CR Updates

platform/viewer/src/routes/Mode/Mode.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { DicomMetadataStore } from '@ohif/core';
 import { DragAndDropProvider, ImageViewerProvider } from '@ohif/ui';
 //
-import { useQuery, useHotkeys } from '@hooks';
+import { useQuery } from '@hooks';
 import ViewportGrid from '@components/ViewportGrid';
 import Compose from './Compose';
 
@@ -17,7 +17,6 @@ export default function ModeRoute({
   servicesManager,
   hotkeysManager
 }) {
-  const isHotkeysLoaded = useHotkeys(hotkeysManager, mode.hotkeys);
   // Parse route params/querystring
   const query = useQuery();
   const queryStudyInstanceUIDs = query.get('StudyInstanceUIDs');
@@ -28,7 +27,7 @@ export default function ModeRoute({
       ? StudyInstanceUIDs
       : [StudyInstanceUIDs];
 
-  const { extensions, sopClassHandlers } = mode;
+  const { extensions, sopClassHandlers, hotkeys } = mode;
 
   if (dataSourceName === undefined) {
     dataSourceName = extensionManager.defaultDataSourceName;
@@ -76,6 +75,22 @@ export default function ModeRoute({
     return ViewportGrid({ ...props, dataSource });
   }
 
+  useEffect(() => {
+    if (!hotkeys) {
+      console.warn('[hotkeys] No bindings defined for hotkeys hook!');
+      return;
+    }
+
+    console.debug('[hotkeys] Setting up hotkeys...');
+    hotkeysManager.setDefaultHotKeys(hotkeys);
+    hotkeysManager.setHotkeys(hotkeys);
+
+    return () => {
+      console.debug('[hotkeys] Removing hotkeys...');
+      hotkeysManager.destroy();
+    };
+  }, []);
+
   useEffect(() => {
     route.init({ servicesManager, extensionManager });
   }, [
@@ -85,8 +100,7 @@ export default function ModeRoute({
     route,
     servicesManager,
     extensionManager,
-    hotkeysManager,
-    isHotkeysLoaded
+    hotkeysManager
   ]);
 
   // This queries for series, but... What does it do with them?