Motion playback (#10609)

* Move controls to separate component and make features configurable

* Allow playback on motion screen

* Simplify layout

* Fix seeking

* Fix playback

* fix preview scrubbing

* Fix player controls visibility

* Use opacity for both dark and light mode

web/src/components/player/HlsVideoPlayer.tsx

@@ -3,31 +3,14 @@ import {
   ReactNode,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
 import Hls from "hls.js";
-import { isDesktop, isMobile, isSafari } from "react-device-detect";
-import { LuPause, LuPlay } from "react-icons/lu";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import {
-  MdForward10,
-  MdReplay10,
-  MdVolumeDown,
-  MdVolumeMute,
-  MdVolumeOff,
-  MdVolumeUp,
-} from "react-icons/md";
+import { isDesktop, isMobile } from "react-device-detect";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { Slider } from "../ui/slider-volume";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+import VideoControls from "./VideoControls";
 
 const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
 const unsupportedErrorCodes = [
@@ -39,6 +22,7 @@ type HlsVideoPlayerProps = {
   className: string;
   children?: ReactNode;
   videoRef: MutableRefObject<HTMLVideoElement | null>;
+  visible: boolean;
   currentSource: string;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
@@ -49,6 +33,7 @@ export default function HlsVideoPlayer({
   className,
   children,
   videoRef,
+  visible,
   currentSource,
   onClipEnded,
   onPlayerLoaded,
@@ -154,7 +139,7 @@ export default function HlsVideoPlayer({
 
   return (
     <div
-      className={`relative`}
+      className={`relative ${visible ? "visible" : "hidden"}`}
       onMouseOver={
         isDesktop
           ? () => {
@@ -221,157 +206,34 @@ export default function HlsVideoPlayer({
         </TransformComponent>
       </TransformWrapper>
       <VideoControls
+        className="absolute bottom-5 left-1/2 -translate-x-1/2"
         video={videoRef.current}
         isPlaying={isPlaying}
         show={controls}
         controlsOpen={controlsOpen}
         setControlsOpen={setControlsOpen}
+        onPlayPause={(play) => {
+          if (!videoRef.current) {
+            return;
+          }
+
+          if (play) {
+            videoRef.current.play();
+          } else {
+            videoRef.current.pause();
+          }
+        }}
+        onSeek={(diff) => {
+          const currentTime = videoRef.current?.currentTime;
+
+          if (!videoRef.current || !currentTime) {
+            return;
+          }
+
+          videoRef.current.currentTime = Math.max(0, currentTime + diff);
+        }}
       />
       {children}
     </div>
   );
 }
-
-type VideoControlsProps = {
-  video: HTMLVideoElement | null;
-  isPlaying: boolean;
-  show: boolean;
-  controlsOpen: boolean;
-  setControlsOpen: (open: boolean) => void;
-};
-function VideoControls({
-  video,
-  isPlaying,
-  show,
-  controlsOpen,
-  setControlsOpen,
-}: VideoControlsProps) {
-  const playbackRates = useMemo(() => {
-    if (isSafari) {
-      return [0.5, 1, 2];
-    } else {
-      return [0.5, 1, 2, 4, 8, 16];
-    }
-  }, []);
-
-  const onReplay = useCallback(
-    (e: React.MouseEvent<SVGElement>) => {
-      e.stopPropagation();
-
-      const currentTime = video?.currentTime;
-
-      if (!video || !currentTime) {
-        return;
-      }
-
-      video.currentTime = Math.max(0, currentTime - 10);
-    },
-    [video],
-  );
-
-  const onSkip = useCallback(
-    (e: React.MouseEvent<SVGElement>) => {
-      e.stopPropagation();
-
-      const currentTime = video?.currentTime;
-
-      if (!video || !currentTime) {
-        return;
-      }
-
-      video.currentTime = currentTime + 10;
-    },
-    [video],
-  );
-
-  const onTogglePlay = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-
-      if (!video) {
-        return;
-      }
-
-      if (isPlaying) {
-        video.pause();
-      } else {
-        video.play();
-      }
-    },
-    [isPlaying, video],
-  );
-
-  // volume control
-
-  const VolumeIcon = useMemo(() => {
-    if (!video || video?.muted) {
-      return MdVolumeOff;
-    } else if (video.volume <= 0.33) {
-      return MdVolumeMute;
-    } else if (video.volume <= 0.67) {
-      return MdVolumeDown;
-    } else {
-      return MdVolumeUp;
-    }
-    // only update when specific fields change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [video?.volume, video?.muted]);
-
-  if (!video || !show) {
-    return;
-  }
-
-  return (
-    <div
-      className={`absolute bottom-5 left-1/2 -translate-x-1/2 px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-black bg-opacity-60 rounded-lg`}
-    >
-      <div className="flex justify-normal items-center gap-2">
-        <VolumeIcon
-          className="size-5"
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation();
-            video.muted = !video.muted;
-          }}
-        />
-        {video.muted == false && (
-          <Slider
-            className="w-20"
-            value={[video.volume]}
-            min={0}
-            max={1}
-            step={0.02}
-            onValueChange={(value) => (video.volume = value[0])}
-          />
-        )}
-      </div>
-      <MdReplay10 className="size-5 cursor-pointer" onClick={onReplay} />
-      <div className="cursor-pointer" onClick={onTogglePlay}>
-        {isPlaying ? (
-          <LuPause className="size-5 fill-white" />
-        ) : (
-          <LuPlay className="size-5 fill-white" />
-        )}
-      </div>
-      <MdForward10 className="size-5 cursor-pointer" onClick={onSkip} />
-      <DropdownMenu
-        open={controlsOpen}
-        onOpenChange={(open) => {
-          setControlsOpen(open);
-        }}
-      >
-        <DropdownMenuTrigger>{`${video.playbackRate}x`}</DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuRadioGroup
-            onValueChange={(rate) => (video.playbackRate = parseInt(rate))}
-          >
-            {playbackRates.map((rate) => (
-              <DropdownMenuRadioItem key={rate} value={rate.toString()}>
-                {rate}x
-              </DropdownMenuRadioItem>
-            ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}