Implement fullscreen button

web/src/components/player/HlsVideoPlayer.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import Hls from "hls.js";
-import { isAndroid, isDesktop, isMobile } from "react-device-detect";
+import { isAndroid, isDesktop, isIOS, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
 import { VideoResolutionType } from "@/types/live";
@@ -28,24 +28,28 @@ type HlsVideoPlayerProps = {
   visible: boolean;
   currentSource: string;
   hotKeys: boolean;
+  fullscreen: boolean;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
   onPlaying?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
+  setFullscreen?: (full: boolean) => void;
 };
 export default function HlsVideoPlayer({
   videoRef,
   visible,
   currentSource,
   hotKeys,
+  fullscreen,
   onClipEnded,
   onPlayerLoaded,
   onTimeUpdate,
   onPlaying,
   setFullResolution,
   onUploadFrame,
+  setFullscreen,
 }: HlsVideoPlayerProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -153,6 +157,7 @@ export default function HlsVideoPlayer({
           seek: true,
           playbackRate: true,
           plusUpload: config?.plus?.enabled == true,
+          fullscreen: !isIOS,
         }}
         setControlsOpen={setControlsOpen}
         setMuted={setMuted}
@@ -196,6 +201,8 @@ export default function HlsVideoPlayer({
             }
           }
         }}
+        fullscreen={fullscreen}
+        setFullscreen={setFullscreen}
       />
       <TransformComponent
         wrapperStyle={{

web/src/components/player/VideoControls.tsx

@@ -30,12 +30,14 @@ import {
   AlertDialogTrigger,
 } from "../ui/alert-dialog";
 import { cn } from "@/lib/utils";
+import { FaCompress, FaExpand } from "react-icons/fa";
 
 type VideoControls = {
   volume?: boolean;
   seek?: boolean;
   playbackRate?: boolean;
   plusUpload?: boolean;
+  fullscreen?: boolean;
 };
 
 const CONTROLS_DEFAULT: VideoControls = {
@@ -43,6 +45,7 @@ const CONTROLS_DEFAULT: VideoControls = {
   seek: true,
   playbackRate: true,
   plusUpload: false,
+  fullscreen: false,
 };
 const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
 
@@ -57,12 +60,14 @@ type VideoControlsProps = {
   playbackRates?: number[];
   playbackRate: number;
   hotKeys?: boolean;
+  fullscreen?: boolean;
   setControlsOpen?: (open: boolean) => void;
   setMuted?: (muted: boolean) => void;
   onPlayPause: (play: boolean) => void;
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
+  setFullscreen?: (full: boolean) => void;
 };
 export default function VideoControls({
   className,
@@ -75,12 +80,14 @@ export default function VideoControls({
   playbackRates = PLAYBACK_RATE_DEFAULT,
   playbackRate,
   hotKeys = true,
+  fullscreen,
   setControlsOpen,
   setMuted,
   onPlayPause,
   onSeek,
   onSetPlaybackRate,
   onUploadFrame,
+  setFullscreen,
 }: VideoControlsProps) {
   const onReplay = useCallback(
     (e: React.MouseEvent<SVGElement>) => {
@@ -248,6 +255,14 @@ export default function VideoControls({
           onUploadFrame={onUploadFrame}
         />
       )}
+      {features.fullscreen && setFullscreen && (
+        <div
+          className="cursor-pointer"
+          onClick={() => setFullscreen(!fullscreen)}
+        >
+          {fullscreen ? <FaCompress /> : <FaExpand />}
+        </div>
+      )}
     </div>
   );
 }

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -24,10 +24,12 @@ type DynamicVideoPlayerProps = {
   startTimestamp?: number;
   isScrubbing: boolean;
   hotKeys: boolean;
+  fullscreen: boolean;
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
   setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
+  setFullscreen: (full: boolean) => void;
 };
 export default function DynamicVideoPlayer({
   className,
@@ -37,10 +39,12 @@ export default function DynamicVideoPlayer({
   startTimestamp,
   isScrubbing,
   hotKeys,
+  fullscreen,
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
   setFullResolution,
+  setFullscreen,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -184,6 +188,7 @@ export default function DynamicVideoPlayer({
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
         hotKeys={hotKeys}
+        fullscreen={fullscreen}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}
         onClipEnded={onClipEnded}
@@ -201,6 +206,7 @@ export default function DynamicVideoPlayer({
         }}
         setFullResolution={setFullResolution}
         onUploadFrame={onUploadFrameToPlus}
+        setFullscreen={setFullscreen}
       />
       <PreviewPlayer
         className={cn(

web/src/views/events/EventView.tsx

@@ -997,6 +997,7 @@ function MotionReview({
           volume: false,
           seek: true,
           playbackRate: true,
+          fullscreen: false,
         }}
         isPlaying={playing}
         show={!scrubbing || controlsOpen}

web/src/views/events/RecordingView.tsx

@@ -43,6 +43,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { FaVideo } from "react-icons/fa";
 import { VideoResolutionType } from "@/types/live";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
+import { cn } from "@/lib/utils";
 
 const SEGMENT_DURATION = 30;
 
@@ -76,6 +77,7 @@ export function RecordingView({
 
   const [mainCamera, setMainCamera] = useState(startCamera);
   const mainControllerRef = useRef<DynamicVideoController | null>(null);
+  const mainLayoutRef = useRef<HTMLDivElement | null>(null);
   const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
 
   const [playbackStart, setPlaybackStart] = useState(startTime);
@@ -208,7 +210,36 @@ export function RecordingView({
     [currentTime],
   );
 
-  // motion timeline data
+  // fullscreen
+
+  const [fullscreen, setFullscreen] = useState(false);
+
+  const onToggleFullscreen = useCallback(
+    (full: boolean) => {
+      if (full) {
+        mainLayoutRef.current?.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    },
+    [mainLayoutRef],
+  );
+
+  useEffect(() => {
+    if (mainLayoutRef.current == null) {
+      return;
+    }
+    const fsListener = () => {
+      setFullscreen(document.fullscreenElement != null);
+    };
+    document.addEventListener("fullscreenchange", fsListener);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", fsListener);
+    };
+  }, [mainLayoutRef]);
+
+  // layout
 
   const getCameraAspect = useCallback(
     (cam: string) => {
@@ -372,19 +403,40 @@ export function RecordingView({
       </div>
 
       <div
-        className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col landscape:flex-row gap-2"}`}
+        ref={mainLayoutRef}
+        className={cn(
+          "h-full flex justify-center overflow-hidden",
+          isDesktop ? "" : "flex-col landscape:flex-row gap-2",
+        )}
+      >
+        <div
+          className={cn("flex flex-1 flex-wrap", isDesktop ? "w-[80%]" : "")}
         >
-        <div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
           <div
             className={`size-full flex items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
           >
             <div
               key={mainCamera}
-              className={`relative ${
+              className={cn(
+                "relative",
                 isDesktop
-                  ? `${mainCameraAspect == "tall" ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
+                  ? cn(
-                  : `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
+                      "px-4 flex justify-center",
-              }`}
+                      mainCameraAspect == "tall"
+                        ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]"
+                        : mainCameraAspect == "wide"
+                          ? "w-full"
+                          : fullscreen
+                            ? "w-[100%]"
+                            : "w-[78%]",
+                    )
+                  : cn(
+                      "portrait:w-full pt-2",
+                      mainCameraAspect == "wide"
+                        ? "landscape:w-full aspect-wide"
+                        : "landscape:h-[94%] aspect-video",
+                    ),
+              )}
               style={{
                 aspectRatio: isDesktop
                   ? mainCameraAspect == "tall"
@@ -400,6 +452,7 @@ export function RecordingView({
                 cameraPreviews={allPreviews ?? []}
                 startTimestamp={playbackStart}
                 hotKeys={exportMode != "select"}
+                fullscreen={fullscreen}
                 onTimestampUpdate={(timestamp) => {
                   setPlayerTime(timestamp);
                   setCurrentTime(timestamp);
@@ -413,11 +466,17 @@ export function RecordingView({
                 }}
                 isScrubbing={scrubbing || exportMode == "timeline"}
                 setFullResolution={setFullResolution}
+                setFullscreen={onToggleFullscreen}
               />
             </div>
             {isDesktop && (
               <div
-                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : "w-full h-[14%] justify-center items-center overflow-x-auto"} `}
+                className={cn(
+                  "flex gap-2",
+                  mainCameraAspect == "tall"
+                    ? "h-full w-[12%] flex-col justify-center overflow-y-auto"
+                    : `justify-center items-center overflow-x-auto ${fullscreen ? "h-[12%]" : "h-[14%]"}`,
+                )}
               >
                 {allCameras.map((cam) => {
                   if (cam == mainCamera) {