Move keyboard controls to video controls (#10617)

Author: NickM-27

web/src/components/player/HlsVideoPlayer.tsx

@@ -1,14 +1,12 @@
 import {
   MutableRefObject,
   ReactNode,
-  useCallback,
   useEffect,
   useRef,
   useState,
 } from "react";
 import Hls from "hls.js";
 import { isDesktop, isMobile } from "react-device-detect";
-import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
 
@@ -87,56 +85,6 @@ export default function HlsVideoPlayer({
   const [controls, setControls] = useState(isMobile);
   const [controlsOpen, setControlsOpen] = useState(false);
 
-  const onKeyboardShortcut = useCallback(
-    (key: string, down: boolean, repeat: boolean) => {
-      if (!videoRef.current) {
-        return;
-      }
-
-      switch (key) {
-        case "ArrowLeft":
-          if (down) {
-            const currentTime = videoRef.current.currentTime;
-
-            if (currentTime) {
-              videoRef.current.currentTime = Math.max(0, currentTime - 5);
-            }
-          }
-          break;
-        case "ArrowRight":
-          if (down) {
-            const currentTime = videoRef.current.currentTime;
-
-            if (currentTime) {
-              videoRef.current.currentTime = currentTime + 5;
-            }
-          }
-          break;
-        case "m":
-          if (down && !repeat && videoRef.current) {
-            videoRef.current.muted = !videoRef.current.muted;
-          }
-          break;
-        case " ":
-          if (down && videoRef.current) {
-            if (videoRef.current.paused) {
-              videoRef.current.play();
-            } else {
-              videoRef.current.pause();
-            }
-          }
-          break;
-      }
-    },
-    // only update when preview only changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [videoRef.current],
-  );
-  useKeyboardListener(
-    ["ArrowLeft", "ArrowRight", "m", " "],
-    onKeyboardShortcut,
-  );
-
   return (
     <div
       className={`relative ${visible ? "visible" : "hidden"}`}

web/src/components/player/VideoControls.tsx

@@ -17,6 +17,7 @@ import {
   MdVolumeUp,
 } from "react-icons/md";
 import { Slider } from "../ui/slider-volume";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 
 type VideoControls = {
   volume?: boolean;
@@ -100,6 +101,40 @@ export default function VideoControls({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [video?.volume, video?.muted]);
 
+  const onKeyboardShortcut = useCallback(
+    (key: string, down: boolean, repeat: boolean) => {
+      switch (key) {
+        case "ArrowLeft":
+          if (down) {
+            onSeek(-10);
+          }
+          break;
+        case "ArrowRight":
+          if (down) {
+            onSeek(10);
+          }
+          break;
+        case "m":
+          if (down && !repeat && video) {
+            video.muted = !video.muted;
+          }
+          break;
+        case " ":
+          if (down) {
+            onPlayPause(!isPlaying);
+          }
+          break;
+      }
+    },
+    // only update when preview only changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [video, isPlaying, onSeek],
+  );
+  useKeyboardListener(
+    ["ArrowLeft", "ArrowRight", "m", " "],
+    onKeyboardShortcut,
+  );
+
   if (!show) {
     return;
   }