Implement recordings fullscreen and rework recordings layout size calculation (#11318)

* Implement fullscreen button

* wrap items on mobile

* control based on width

* refresh

* Implement basic fullscreen

* Fix scrolling

* Add observer to detect of row overflows

* Use cn to simplify classnames

* dynamically respond to layout sizing

* Simplify listener

* Simplify layout

* Handle tall browser

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={{