stay in fullscreen when navigating to a camera (#11666)

web/src/components/player/HlsVideoPlayer.tsx

@@ -39,7 +39,7 @@ type HlsVideoPlayerProps = {
   onPlaying?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
-  setFullscreen?: (full: boolean) => void;
+  toggleFullscreen?: () => void;
 };
 export default function HlsVideoPlayer({
   videoRef,
@@ -53,7 +53,7 @@ export default function HlsVideoPlayer({
   onPlaying,
   setFullResolution,
   onUploadFrame,
-  setFullscreen,
+  toggleFullscreen,
 }: HlsVideoPlayerProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -224,7 +224,7 @@ export default function HlsVideoPlayer({
           }
         }}
         fullscreen={fullscreen}
-        setFullscreen={setFullscreen}
+        toggleFullscreen={toggleFullscreen}
       />
       <TransformComponent
         wrapperStyle={{

web/src/components/player/VideoControls.tsx

@@ -68,7 +68,7 @@ type VideoControlsProps = {
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
-  setFullscreen?: (full: boolean) => void;
+  toggleFullscreen?: () => void;
 };
 export default function VideoControls({
   className,
@@ -88,7 +88,7 @@ export default function VideoControls({
   onSeek,
   onSetPlaybackRate,
   onUploadFrame,
-  setFullscreen,
+  toggleFullscreen,
 }: VideoControlsProps) {
   // layout
 
@@ -160,8 +160,8 @@ export default function VideoControls({
           }
           break;
         case "f":
-          if (setFullscreen && down && !repeat) {
-            setFullscreen(!fullscreen);
+          if (toggleFullscreen && down && !repeat) {
+            toggleFullscreen();
           }
           break;
         case "m":
@@ -178,7 +178,7 @@ export default function VideoControls({
     },
     // only update when preview only changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [video, isPlaying, fullscreen, setFullscreen, onSeek],
+    [video, isPlaying, fullscreen, toggleFullscreen, onSeek],
   );
   useKeyboardListener(
     hotKeys
@@ -287,11 +287,8 @@ export default function VideoControls({
           onUploadFrame={onUploadFrame}
         />
       )}
-      {features.fullscreen && setFullscreen && (
-        <div
-          className="cursor-pointer"
-          onClick={() => setFullscreen(!fullscreen)}
-        >
+      {features.fullscreen && toggleFullscreen && (
+        <div className="cursor-pointer" onClick={toggleFullscreen}>
           {fullscreen ? <FaCompress /> : <FaExpand />}
         </div>
       )}

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

@@ -29,7 +29,7 @@ type DynamicVideoPlayerProps = {
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
   setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
-  setFullscreen: (full: boolean) => void;
+  toggleFullscreen: () => void;
 };
 export default function DynamicVideoPlayer({
   className,
@@ -44,7 +44,7 @@ export default function DynamicVideoPlayer({
   onTimestampUpdate,
   onClipEnded,
   setFullResolution,
-  setFullscreen,
+  toggleFullscreen,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -207,7 +207,7 @@ export default function DynamicVideoPlayer({
         }}
         setFullResolution={setFullResolution}
         onUploadFrame={onUploadFrameToPlus}
-        setFullscreen={setFullscreen}
+        toggleFullscreen={toggleFullscreen}
       />
       <PreviewPlayer
         className={cn(