Recording fixes (#10728)

* Use timerange everywhere and ensure recordings has last 24 hours

* Pause recording when selecting timeline

* Fix loading layout

* Fix updating current time not always working

* Simplify dynamic video player

* Clean up desktop sizing

* Fix current hour

* Make padding consistent

* Improve spacing for extra cameras

* Make back button consistent

* Fix preview player not jumping to correct time

* Dont use useEffect due to preview changing

* Simplify

* Fix transition

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

@@ -9,7 +9,6 @@ import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
 import { TimeRange, Timeline } from "@/types/timeline";
-import { isDesktop } from "react-device-detect";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -41,26 +40,6 @@ export default function DynamicVideoPlayer({
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  // playback behavior
-
-  const grow = useMemo(() => {
-    if (!config) {
-      return "aspect-video";
-    }
-
-    const aspectRatio =
-      config.cameras[camera].detect.width /
-      config.cameras[camera].detect.height;
-
-    if (aspectRatio > 2) {
-      return "";
-    } else if (aspectRatio < 16 / 9) {
-      return isDesktop ? "" : "aspect-tall";
-    } else {
-      return "aspect-video";
-    }
-  }, [camera, config]);
-
   // controlling playback
 
   const playerRef = useRef<HTMLVideoElement | null>(null);
@@ -169,9 +148,9 @@ export default function DynamicVideoPlayer({
   }, [controller, recordings]);
 
   return (
-    <div className={`w-full relative ${className ?? ""}`}>
+    <>
       <HlsVideoPlayer
-        className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
+        className={className ?? ""}
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
@@ -195,7 +174,7 @@ export default function DynamicVideoPlayer({
         )}
       </HlsVideoPlayer>
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}`}
+        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}
@@ -205,6 +184,6 @@ export default function DynamicVideoPlayer({
           setPreviewController(previewController);
         }}
       />
-    </div>
+    </>
   );
 }