undo disable shortcuts

ohcnetwork · Jul 22, 2024 · 15ace8c · 15ace8c
1 parent 98af9ba
commit 15ace8c
Showing 1 changed file with 46 additions and 45 deletions.
diff --git a/src/Components/CameraFeed/FeedControls.tsx b/src/Components/CameraFeed/FeedControls.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import FeedButton from "./FeedButton";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { PTZPayload } from "./useOperateCamera";
+import { isAppleDevice } from "../../Utils/utils";
 
 const Actions = {
   UP: 1 << 0,
@@ -12,7 +13,7 @@ const Actions = {
   ZOOM_OUT: 1 << 5,
 } as const;
 
-// const metaKey = isAppleDevice ? "Meta" : "Control";
+const metaKey = isAppleDevice ? "Meta" : "Control";
 
 export type PTZAction = keyof typeof Actions;
 
@@ -53,7 +54,7 @@ interface Props {
   inlineView: boolean;
 }
 
-export default function FeedControls(props: Props) {
+export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
   const [precision, setPrecision] = useState(1);
   const togglePrecision = () => setPrecision((p) => (p === 16 ? 1 : p << 1));
 
@@ -65,77 +66,77 @@ export default function FeedControls(props: Props) {
     position: (
       <>
         <FeedButton
-          // shortcuts={[["Shift", "7"]]}
           onTrigger={move(Actions.UP | Actions.LEFT)}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[["Shift", "7"]]}
+          shortcutsDisabled={shortcutsDisabled}
           helpText="Move Diagonally Up-Left"
           tooltipClassName="-translate-y-20"
         >
           <CareIcon icon="l-triangle" className="-rotate-45" />
         </FeedButton>
 
         <FeedButton
-          // shortcuts={[
-          //   [metaKey, "Shift", "8"],
-          //   [metaKey, "Shift", "ArrowUp"],
-          // ]}
           onTrigger={move(Actions.UP)}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[
+            [metaKey, "Shift", "8"],
+            [metaKey, "Shift", "ArrowUp"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
           tooltipClassName="-translate-y-20 -translate-x-11"
           helpText="Move Up"
         >
           <CareIcon icon="l-triangle" className="rotate-0" />
         </FeedButton>
 
         <FeedButton
-          // shortcuts={[[metaKey, "Shift", "9"]]}
           onTrigger={move(Actions.UP | Actions.RIGHT)}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[[metaKey, "Shift", "9"]]}
+          shortcutsDisabled={shortcutsDisabled}
           helpText="Move Diagonally Up-Right"
           tooltipClassName="-translate-y-20 -translate-x-24"
         >
           <CareIcon icon="l-triangle" className="rotate-45" />
         </FeedButton>
 
         <FeedButton
-          // shortcuts={[
-          //   [metaKey, "Shift", "4"],
-          //   [metaKey, "Shift", "ArrowLeft"],
-          // ]}
           onTrigger={move(Actions.LEFT)}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[
+            [metaKey, "Shift", "4"],
+            [metaKey, "Shift", "ArrowLeft"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
           helpText="Move Left"
         >
           <CareIcon icon="l-triangle" className="-rotate-90" />
         </FeedButton>
 
         <FeedButton
-          // shortcuts={[["Shift", "P"]]}
+          shortcuts={[["Shift", "P"]]}
           onTrigger={togglePrecision}
           helpText="Toggle Precision"
           className="font-bold"
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcutsDisabled={shortcutsDisabled}
         >
           {precision}x
         </FeedButton>
 
         <FeedButton
           onTrigger={move(Actions.RIGHT)}
-          // shortcuts={[
-          //   [metaKey, "Shift", "6"],
-          //   [metaKey, "Shift", "ArrowRight"],
-          // ]}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[
+            [metaKey, "Shift", "6"],
+            [metaKey, "Shift", "ArrowRight"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
           helpText="Move Right"
           tooltipClassName="-translate-y-9 translate-x-11"
         >
           <CareIcon icon="l-triangle" className="rotate-90" />
         </FeedButton>
 
         <FeedButton
-          // shortcuts={[[metaKey, "Shift", "1"]]}
           onTrigger={move(Actions.DOWN | Actions.LEFT)}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[[metaKey, "Shift", "1"]]}
+          shortcutsDisabled={shortcutsDisabled}
           tooltipClassName="-translate-y-20"
           helpText="Move Diagonally Down-Left"
         >
@@ -144,21 +145,21 @@ export default function FeedControls(props: Props) {
 
         <FeedButton
           onTrigger={move(Actions.DOWN)}
-          // shortcuts={[
-          //   [metaKey, "Shift", "2"],
-          //   [metaKey, "Shift", "ArrowDown"],
-          // ]}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[
+            [metaKey, "Shift", "2"],
+            [metaKey, "Shift", "ArrowDown"],
+          ]}
+          shortcutsDisabled={shortcutsDisabled}
           tooltipClassName="-translate-y-20  -translate-x-14"
           helpText="Move Down"
         >
           <CareIcon icon="l-triangle" className="rotate-180" />
         </FeedButton>
 
         <FeedButton
-          // shortcuts={[[metaKey, "Shift", "3"]]}
           onTrigger={move(Actions.DOWN | Actions.RIGHT)}
-          // shortcutsDisabled={shortcutsDisabled}
+          shortcuts={[[metaKey, "Shift", "3"]]}
+          shortcutsDisabled={shortcutsDisabled}
           tooltipClassName="-translate-y-9 translate-x-11"
           helpText="Move Diagonally Down-Right"
         >
@@ -169,20 +170,20 @@ export default function FeedControls(props: Props) {
     zoom: (
       <>
         <FeedButton
-          // shortcuts={[[metaKey, "I"]]}
+          onTrigger={move(Actions.ZOOM_IN)}
+          shortcuts={[[metaKey, "I"]]}
+          shortcutsDisabled={shortcutsDisabled}
           tooltipClassName="tooltip-left translate-y-2 translate-x-1"
           helpText="Zoom In"
-          onTrigger={move(Actions.ZOOM_IN)}
-          // shortcutsDisabled={shortcutsDisabled}
         >
           <CareIcon icon="l-search-plus" />
         </FeedButton>
         <FeedButton
-          // shortcuts={[[metaKey, "O"]]}
+          onTrigger={move(Actions.ZOOM_OUT)}
+          shortcuts={[[metaKey, "O"]]}
+          shortcutsDisabled={shortcutsDisabled}
           tooltipClassName="tooltip-left translate-y-2 translate-x-1"
           helpText="Zoom Out"
-          onTrigger={move(Actions.ZOOM_OUT)}
-          // shortcutsDisabled={shortcutsDisabled}
         >
           <CareIcon icon="l-search-minus" />
         </FeedButton>
@@ -191,22 +192,22 @@ export default function FeedControls(props: Props) {
 
     reset: (
       <FeedButton
-        // shortcuts={[["Shift", "R"]]}
+        onTrigger={props.onReset}
+        shortcuts={[["Shift", "R"]]}
+        shortcutsDisabled={shortcutsDisabled}
         tooltipClassName="tooltip-left translate-y-2 translate-x-1"
         helpText="Reset"
-        onTrigger={props.onReset}
-        // shortcutsDisabled={shortcutsDisabled}
       >
         <CareIcon icon="l-redo" />
       </FeedButton>
     ),
     fullscreen: (
       <FeedButton
-        // shortcuts={[["Shift", "F"]]}
-        tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-        helpText={props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
         onTrigger={() => props.setFullscreen(!props.isFullscreen)}
-        // shortcutsDisabled={shortcutsDisabled}
+        shortcuts={[["Shift", "F"]]}
+        shortcutsDisabled={shortcutsDisabled}
+        helpText={props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+        tooltipClassName="tooltip-left translate-y-2 translate-x-1"
       >
         <CareIcon
           icon={