add hotkeys

enjoy/package.json

@@ -124,6 +124,7 @@
     "react-activity-calendar": "^2.2.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.2",
+    "react-hotkeys-hook": "^4.4.3",
     "react-i18next": "^14.0.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.21.1",
@@ -134,6 +135,7 @@
     "sequelize-typescript": "^2.1.6",
     "sqlite3": "^5.1.7",
     "tailwind-scrollbar-hide": "^1.1.7",
+    "ts-key-enum": "^2.0.12",
     "umzug": "^3.5.0",
     "wavesurfer.js": "^7.6.1",
     "zod": "^3.22.4"

enjoy/src/renderer/components/medias/media-player.tsx

@@ -26,6 +26,8 @@ import {
   DefaultVideoLayout,
   defaultLayoutIcons,
 } from "@vidstack/react/player/layouts/default";
+import { useHotkeys } from "react-hotkeys-hook";
+import { Key } from "ts-key-enum";
 
 const minPxPerSecBase = 150;
 
@@ -499,6 +501,15 @@ export const MediaPlayer = (props: {
     return fitZoomRatio;
   };
 
+  useHotkeys(
+    " ",
+    () => {
+      if (!wavesurfer) return;
+      onPlayClick();
+    },
+    [wavesurfer]
+  );
+
   return (
     <>
       <div className="mb-2" ref={containerRef} />

enjoy/src/renderer/components/record-button.tsx

@@ -5,6 +5,7 @@ import RecordPlugin from "wavesurfer.js/dist/plugins/record";
 import WaveSurfer from "wavesurfer.js";
 import { cn } from "@renderer/lib/utils";
 import { RadialProgress, useToast } from "@renderer/components/ui";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export const RecordButton = (props: {
   className?: string;
@@ -17,6 +18,11 @@ export const RecordButton = (props: {
   const [duration, setDuration] = useState<number>(0);
   const { toast } = useToast();
 
+  useHotkeys(["command+alt+r", "control+alt+r"], () => {
+    if (disabled) return;
+    setIsRecording((isRecording) => !isRecording);
+  });
+
   useEffect(() => {
     if (!isRecording) return;
 

enjoy/src/renderer/components/recordings/recording-card.tsx

@@ -13,7 +13,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@renderer/components/ui";
 import { ChevronDownIcon, Trash2Icon, InfoIcon, Share2Icon } from "lucide-react";

yarn.lock

@@ -5792,6 +5792,7 @@ __metadata:
     react-activity-calendar: "npm:^2.2.1"
     react-dom: "npm:^18.2.0"
     react-hook-form: "npm:^7.49.2"
+    react-hotkeys-hook: "npm:^4.4.3"
     react-i18next: "npm:^14.0.0"
     react-markdown: "npm:^9.0.1"
     react-router-dom: "npm:^6.21.1"
@@ -5805,6 +5806,7 @@ __metadata:
     tailwind-scrollbar-hide: "npm:^1.1.7"
     tailwindcss: "npm:^3.4.1"
     tailwindcss-animate: "npm:^1.0.7"
+    ts-key-enum: "npm:^2.0.12"
     ts-node: "npm:^10.9.2"
     tslib: "npm:^2.6.2"
     typescript: "npm:^5.3.3"
@@ -10633,6 +10635,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hotkeys-hook@npm:^4.4.3":
+  version: 4.4.3
+  resolution: "react-hotkeys-hook@npm:4.4.3"
+  peerDependencies:
+    react: ">=16.8.1"
+    react-dom: ">=16.8.1"
+  checksum: ef79e279129f6e55d81c8762b1da214d9c6ee4617b9597dbc3f93057cba8d166831508967b8e3f763a0c4ce0af3b59e6888c6fc94d152deac9335020b2ba80df
+  languageName: node
+  linkType: hard
+
 "react-i18next@npm:^14.0.0":
   version: 14.0.0
   resolution: "react-i18next@npm:14.0.0"
@@ -12114,6 +12126,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-key-enum@npm:^2.0.12":
+  version: 2.0.12
+  resolution: "ts-key-enum@npm:2.0.12"
+  checksum: 1d9cf8085785bdc324827c5c38f6359b09d9438deab81dfab7fa6d8315c618280ba7527e98d06b68c11066a5a81b06ef84eb378a48bf80ca5772ab0e4c6683d5
+  languageName: node
+  linkType: hard
+
 "ts-node@npm:^10.9.2":
   version: 10.9.2
   resolution: "ts-node@npm:10.9.2"