Add new keyboard shortcuts to improve UX

remarcable · Nov 17, 2023 · dc25d3a · dc25d3a
1 parent 8e05dc3
commit dc25d3a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/HelpDialog/index.tsx b/src/components/HelpDialog/index.tsx
@@ -24,8 +24,10 @@ const SHORTCUTS = [
   { key: "l", action: "Rewind 10 seconds" },
   { key: "← (Left Arrow)", action: "Fast forward 5 seconds" },
   { key: "→ (Right Arrow)", action: "Rewind 5 seconds" },
-  { key: "Space", action: "Set Marker" },
-  { key: "Shift + Space", action: "Set Jump Marker" },
+  { key: "Enter", action: "Rewind to start" },
+  { key: "Backspace", action: "Remove selected marker" },
+  { key: "Space", action: "Set marker" },
+  { key: "Shift + Space", action: "Set jump marker" },
 ] as const;
 
 const HelpDialog: React.FC<HelpDialogProps> = ({ open, handleClose }) => {

diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
@@ -26,6 +26,10 @@ const Player: React.FC = () => {
     () => dispatch(playerActions.addMeasureMarker()),
     [dispatch]
   );
+  const removeCurrentMarker = useCallback(
+    () => dispatch(playerActions.removeCurrentMarker()),
+    [dispatch]
+  );
   const openJumpMarkerDialog = useCallback(
     () => dispatch(playerActions.openJumpMarkerDialog()),
     [dispatch]
@@ -47,7 +51,9 @@ const Player: React.FC = () => {
     togglePlaying,
     addMeasureMarker,
     openJumpMarkerDialog,
+    removeCurrentMarker,
     relativeSeek,
+    absoluteSeek,
   });
 
   return (

diff --git a/src/hooks/usePlayerHotkeys.ts b/src/hooks/usePlayerHotkeys.ts
@@ -5,13 +5,17 @@ export const usePlayerHotkeys = ({
   togglePlaying,
   addMeasureMarker,
   openJumpMarkerDialog,
+  removeCurrentMarker,
   relativeSeek,
+  absoluteSeek,
 }: {
   dialogIsOpen: boolean;
   togglePlaying: () => void;
   addMeasureMarker: () => void;
   openJumpMarkerDialog: () => void;
+  removeCurrentMarker: () => void;
   relativeSeek: (seconds: number) => void;
+  absoluteSeek: (seconds: number) => void;
 }) => {
   useHotkeys(
     "k",
@@ -43,8 +47,11 @@ export const usePlayerHotkeys = ({
     [openJumpMarkerDialog]
   );
 
+  useHotkeys("backspace", () => removeCurrentMarker(), [removeCurrentMarker]);
+
   useHotkeys("j", () => relativeSeek(-10), [relativeSeek]);
   useHotkeys("l", () => relativeSeek(+10), [relativeSeek]);
   useHotkeys("left", () => relativeSeek(-5), [relativeSeek]);
   useHotkeys("right", () => relativeSeek(+5), [relativeSeek]);
+  useHotkeys("enter", () => absoluteSeek(0), [absoluteSeek]);
 };
diff --git a/src/state/playerSlice.ts b/src/state/playerSlice.ts
@@ -114,6 +114,17 @@ export const playerSlice = createSlice({
       const { markers } = state;
       const index = markers.findIndex((m) => m.time === action.payload);
 
+      if (index !== -1) {
+        markers.splice(index, 1);
+      }
+    },
+    removeCurrentMarker: (state) => {
+      const { time, markers } = state;
+      const index = markers.findIndex(
+        (m) => time - 0.01 <= m.time && m.time <= time + 0.01
+      );
+      console.log(time, index);
+
       if (index !== -1) {
         markers.splice(index, 1);
       }