Merge pull request #22 from mbsantiago/fix/better-shortkeys

Use react-hotkeys-hook to better handle hotkeys
mbsantiago · Jun 8, 2024 · 515ba06 · 515ba06
2 parents 893780c + 1b34e93
commit 515ba06
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 100 deletions.
diff --git a/Makefile b/Makefile
@@ -1,5 +1,14 @@
 SHELL := /bin/bash
 
+dev-front:
+	cd front && npm run dev
+
+dev-back:
+	cd back && make serve-dev
+
+dev-docs:
+	cd back && make serve-docs
+
 install-dev:
 	bash scripts/install_dev.sh
 

diff --git a/back/pyproject.toml b/back/pyproject.toml
@@ -7,7 +7,7 @@ dependencies = [
     "uvicorn[standard]>=0.20.0",
     "aiosqlite>=0.18.0",
     "passlib>=1.7.4",
-    "soundevent[all]>=2.0",
+    "soundevent[all]>=2.0.1",
     "fastapi>=0.101.0",
     "pydantic-settings>=2.0.2",
     "fastapi-users[sqlalchemy]>=12.1.1",

diff --git a/back/requirements-dev.lock b/back/requirements-dev.lock
@@ -6,6 +6,7 @@
 #   features: []
 #   all-features: false
 #   with-sources: false
+#   generate-hashes: false
 
 -e file:.
 affine==2.4.0
@@ -340,7 +341,7 @@ sniffio==1.3.1
     # via httpx
 snuggs==1.4.7
     # via rasterio
-soundevent==2.0.0
+soundevent==2.0.1
     # via whombat
 soundfile==0.12.1
     # via crowsetta

diff --git a/back/requirements.lock b/back/requirements.lock
@@ -6,6 +6,7 @@
 #   features: []
 #   all-features: false
 #   with-sources: false
+#   generate-hashes: false
 
 -e file:.
 affine==2.4.0
@@ -215,7 +216,7 @@ sniffio==1.3.1
     # via httpx
 snuggs==1.4.7
     # via rasterio
-soundevent==2.0.0
+soundevent==2.0.1
     # via whombat
 soundfile==0.12.1
     # via crowsetta

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -31,6 +31,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.4",
     "react-hot-toast": "^2.4.1",
+    "react-hotkeys-hook": "^4.5.0",
     "react-leaflet": "^4.2.1",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.23.1",
@@ -43,6 +44,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.44.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.12",
@@ -60,6 +62,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "next": "^14.2.3",
+    "playwright": "^1.44.1",
     "prettier": "^3.2.5",
     "react-types": "^0.1.0",
     "ts-prune": "^0.10.3"

diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import "./globals.css";
+import { StrictMode } from "react";
 import { Mulish } from "next/font/google";
 
 import { ClientProvider } from "@/app/client";
@@ -18,15 +19,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body
-        className={`${mulish.className} font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 min-h-screen w-screen overflow-x-hidden`}
-      >
-        <ClientProvider>
-          {children}
-          <Notification />
-        </ClientProvider>
-      </body>
-    </html>
+    <StrictMode>
+      <html lang="en">
+        <body
+          className={`${mulish.className} font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 min-h-screen w-screen overflow-x-hidden`}
+        >
+          <ClientProvider>
+            {children}
+            <Notification />
+          </ClientProvider>
+        </body>
+      </html>
+    </StrictMode>
   );
 }
diff --git a/front/src/components/ShortcutHelper.tsx b/front/src/components/ShortcutHelper.tsx
@@ -1,11 +1,9 @@
+import { useHotkeys } from "react-hotkeys-hook";
 import { useState } from "react";
 import { HelpIcon } from "@/components/icons";
 import { DialogOverlay } from "@/components/Dialog";
 import KeyboardKey from "@/components/KeyboardKey";
 import Button from "@/components/Button";
-import { useKeyPressEvent } from "react-use";
-
-import useKeyFilter from "@/hooks/utils/useKeyFilter";
 
 type Shortcut = {
   label: string;
@@ -19,7 +17,7 @@ export default function ShortcutHelper({
   shortcuts?: Shortcut[];
 } = {}) {
   const [show, setShow] = useState(false);
-  useKeyPressEvent(useKeyFilter({ key: "h" }), () => setShow((v) => !v));
+  useHotkeys("h", () => setShow((v) => !v));
 
   return (
     <>

diff --git a/front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx b/front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx
@@ -115,12 +115,13 @@ export default function ClipAnnotationSpectrogram({
     [onSelectAnnotation],
   );
 
-  const { seek } = audio;
+  const { seek, play } = audio;
   const handleDoubleClick = useCallback(
     ({ position }: { position: Position }) => {
       seek(position.time);
+      play();
     },
-    [seek],
+    [seek, play],
   );
 
   const spectrogram = useSpectrogram({
@@ -249,7 +250,7 @@ export default function ClipAnnotationSpectrogram({
         )}
         {withPlayer && <Player {...audio} />}
       </div>
-      <div className="relative overflow-hidden rounded-md" style={{ height }}>
+      <div className="overflow-hidden relative rounded-md" style={{ height }}>
         <SpectrogramTags
           disabled={disabled}
           tags={annotate.tags}

diff --git a/front/src/hooks/annotation/useAnnotateClipKeyShortcuts.ts b/front/src/hooks/annotation/useAnnotateClipKeyShortcuts.ts
@@ -1,6 +1,4 @@
-import { useKeyPressEvent } from "react-use";
-
-import useKeyFilter from "@/hooks/utils/useKeyFilter";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import type { KeyShortcut } from "@/hooks/utils/useKeyFilter";
 
@@ -29,7 +27,7 @@ export default function useAnnotateClipKeyShortcuts(props: {
   enabled?: boolean;
 }) {
   const { onGoCreate, onGoSelect, onGoDelete, enabled = true } = props;
-  useKeyPressEvent(useKeyFilter({ enabled, key: "a" }), onGoCreate);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "s" }), onGoSelect);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "d" }), onGoDelete);
+  useHotkeys("a", onGoCreate, { enabled });
+  useHotkeys("s", onGoSelect, { enabled });
+  useHotkeys("d", onGoDelete, { enabled });
 }
diff --git a/front/src/hooks/annotation/useAnnotateTasksKeyShortcuts.ts b/front/src/hooks/annotation/useAnnotateTasksKeyShortcuts.ts
@@ -1,6 +1,4 @@
-import { useKeyPressEvent } from "react-use";
-
-import useKeyFilter from "@/hooks/utils/useKeyFilter";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import type { KeyShortcut } from "@/hooks/utils/useKeyFilter";
 
@@ -33,11 +31,11 @@ export const ANNOTATE_TASKS_KEY_SHORTCUTS: KeyShortcut[] = [
 ];
 
 export default function useAnnotateTaskKeyShortcuts(props: {
-  onGoNext?: () => void;
-  onGoPrevious?: () => void;
-  onMarkCompleted?: () => void;
-  onMarkRejected?: () => void;
-  onMarkVerified?: () => void;
+  onGoNext: () => void;
+  onGoPrevious: () => void;
+  onMarkCompleted: () => void;
+  onMarkRejected: () => void;
+  onMarkVerified: () => void;
   enabled?: boolean;
 }) {
   const {
@@ -49,9 +47,9 @@ export default function useAnnotateTaskKeyShortcuts(props: {
     enabled = true,
   } = props;
 
-  useKeyPressEvent(useKeyFilter({ enabled, key: "n" }), onGoNext);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "p" }), onGoPrevious);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "g" }), onMarkCompleted);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "r" }), onMarkRejected);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "v" }), onMarkVerified);
+  useHotkeys("n", onGoNext, { enabled });
+  useHotkeys("p", onGoPrevious, { enabled });
+  useHotkeys("g", onMarkCompleted, { enabled });
+  useHotkeys("r", onMarkRejected, { enabled });
+  useHotkeys("v", onMarkVerified, { enabled });
 }
diff --git a/front/src/hooks/audio/useAudioKeyShortcuts.ts b/front/src/hooks/audio/useAudioKeyShortcuts.ts
@@ -1,6 +1,4 @@
-import { useKeyPressEvent } from "react-use";
-
-import useKeyFilter from "@/hooks/utils/useKeyFilter";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import type { KeyShortcut } from "@/hooks/utils/useKeyFilter";
 
@@ -17,8 +15,5 @@ export default function useAnnotateClipKeyShortcuts(props: {
   enabled?: boolean;
 }) {
   const { onTogglePlay, enabled = true } = props;
-  useKeyPressEvent(
-    useKeyFilter({ enabled, key: " ", preventDefault: true }),
-    onTogglePlay,
-  );
+  useHotkeys(" ", onTogglePlay, { enabled });
 }
diff --git a/front/src/hooks/spectrogram/useSpectrogramKeyShortcuts.ts b/front/src/hooks/spectrogram/useSpectrogramKeyShortcuts.ts
@@ -1,6 +1,4 @@
-import { useKeyPressEvent } from "react-use";
-
-import useKeyFilter from "@/hooks/utils/useKeyFilter";
+import { useHotkeys } from "react-hotkeys-hook";
 
 import type { KeyShortcut } from "@/hooks/utils/useKeyFilter";
 
@@ -23,6 +21,6 @@ export default function useAnnotateClipKeyShortcuts(props: {
   enabled?: boolean;
 }) {
   const { onGoMove, onGoZoom, enabled = true } = props;
-  useKeyPressEvent(useKeyFilter({ enabled, key: "x" }), onGoMove);
-  useKeyPressEvent(useKeyFilter({ enabled, key: "z" }), onGoZoom);
+  useHotkeys("x", onGoMove, { enabled });
+  useHotkeys("z", onGoZoom, { enabled });
 }