Merge pull request #440 from AppQuality/develop

Add onShortcut event to player component

src/stories/player/_types.tsx

@@ -12,6 +12,7 @@ export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
   handleBookmarkUpdate?: (bookmark: IBookmark) => void;
   i18n?: PlayerI18n;
   showControls?: boolean;
+  onShortcut?: (type: string) => void;
 }
 
 export interface PlayerI18n {
@@ -48,4 +49,4 @@ type VideoTag = {
     style: string;
     usageNumber: number;
   };
-};
+};

src/stories/player/hooks/useKeyboardCommands.ts

@@ -1,49 +1,64 @@
-import { useVideoContext } from "@appquality/stream-player";
 import { useEffect } from "react";
 
-type KeyboardCommandsHook = (
-  setIsPlaying: (isPlaying: boolean) => void,
-  onCutHandler?: (time: number) => void,
-  videoRef?: HTMLVideoElement | null,
-) => void;
+type KeyboardCommandsHook = ({
+  setIsPlaying,
+  onCutHandler,
+  videoRef,
+}: {
+  setIsPlaying: (isPlaying: boolean) => void;
+  onCutHandler?: (time: number) => void;
+  onShortcut?: (type: string) => void;
+  videoRef?: HTMLVideoElement | null;
+}) => void;
 
-export const useKeyboardCommands: KeyboardCommandsHook = (setIsPlaying, onCutHandler, videoRef) => {
+export const useKeyboardCommands: KeyboardCommandsHook = ({
+  setIsPlaying,
+  onCutHandler,
+  onShortcut,
+  videoRef,
+}) => {
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
       // console.log("handleKeyDown", e.code, document.activeElement, e.target);
       if (document.activeElement?.tagName === "INPUT") return;
       if (document.activeElement?.tagName === "TEXTAREA") return;
-      
+
       if (!videoRef) return;
-      
+
       if (e.code === "Space") {
         e.preventDefault();
         if (videoRef.paused) {
           setIsPlaying(true);
           videoRef.play();
+          onShortcut?.("play");
         } else {
           setIsPlaying(false);
           videoRef.pause();
+          onShortcut?.("pause");
         }
       }
       if (e.code === "ArrowLeft") {
         videoRef.currentTime -= 10;
+        onShortcut?.("rewind");
       }
       if (e.code === "ArrowRight") {
         videoRef.currentTime += 10;
+        onShortcut?.("fast-forward");
       }
       if (e.code === "KeyM") {
         videoRef.muted = !videoRef.muted;
         videoRef.volume = videoRef.muted ? 0 : 1;
+        onShortcut?.("mute");
       }
       if (e.code === "KeyS") {
         onCutHandler?.(videoRef.currentTime);
         e.stopPropagation();
+        onShortcut?.("start/stop_observation");
       }
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
-    }
+    };
   }, [videoRef, onCutHandler]);
-}
+};

src/stories/player/index.stories.tsx

@@ -16,6 +16,7 @@ interface PlayerStoryArgs extends PlayerArgs {}
 const defaultArgs: PlayerStoryArgs = {
   url: "https://s3.eu-west-1.amazonaws.com/appq.static/demo/098648899205a00f8311d929d3073499ef9d664b_1715352138.mp4",
   onCutHandler: undefined, // Storybook fix https://github.com/storybookjs/storybook/issues/22930
+  onShortcut: (type: string) => console.log("Shortcut intercept", type),
 };
 
 const Template: StoryFn<PlayerStoryArgs> = (args) => (
@@ -37,7 +38,7 @@ const TemplateWithCutter: StoryFn<PlayerStoryArgs> = ({
   ...args
 }) => {
   const [observations, setObservations] = useState<IBookmark[]>(
-    bookmarks || []
+    bookmarks || [],
   );
   const [start, setStart] = useState<number | undefined>(undefined);
 
@@ -60,7 +61,7 @@ const TemplateWithCutter: StoryFn<PlayerStoryArgs> = ({
       ]);
       setStart(undefined);
     },
-    [observations, start]
+    [observations, start],
   );
 
   return (
@@ -105,7 +106,7 @@ const TemplateWithButtonForPip: StoryFn<PlayerStoryArgs> = (args) => {
     (isPipFromPlayer: boolean) => {
       setIsPip(isPipFromPlayer);
     },
-    [setIsPip]
+    [setIsPip],
   );
   return (
     <Container id="player.story.container">

src/stories/player/index.tsx

@@ -7,13 +7,13 @@ import {
   useRef,
 } from "react";
 import { PlayerArgs } from "./_types";
+import { ProgressContextProvider } from "./context/progressContext";
+import { useKeyboardCommands } from "./hooks/useKeyboardCommands";
+import { usePictureInPicture } from "./hooks/usePictureInPicture";
 import { Container } from "./parts/container";
 import { Controls } from "./parts/controls";
 import { FloatingControls } from "./parts/floatingControls";
 import { VideoSpinner } from "./parts/spinner";
-import { ProgressContextProvider } from "./context/progressContext";
-import { usePictureInPicture } from "./hooks/usePictureInPicture";
-import { useKeyboardCommands } from "./hooks/useKeyboardCommands";
 
 /**
  * The Player is a styled media tag with custom controls
@@ -39,7 +39,12 @@ const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
       videoRef,
     ]);
 
-    useKeyboardCommands(setIsPlaying, onCutHandler, videoRef);
+    useKeyboardCommands({
+      setIsPlaying,
+      onCutHandler,
+      videoRef,
+      onShortcut: props.onShortcut,
+    });
     usePictureInPicture(videoRef, pipMode, onPipChange);
 
     useEffect(() => {
@@ -85,7 +90,7 @@ const PlayerCore = forwardRef<HTMLVideoElement, PlayerArgs>(
         </ProgressContextProvider>
       </Container>
     );
-  }
+  },
 );
 
 const PlayerProvider = (props: PropsWithChildren<PlayerArgs>) => (
@@ -96,4 +101,4 @@ const PlayerProvider = (props: PropsWithChildren<PlayerArgs>) => (
 
 PlayerProvider.Core = PlayerCore;
 
-export { Player, PlayerProvider, useVideoContext };
+export { Player, PlayerProvider, useVideoContext };