From b6192c13777e4860d6f7f0837ee7b3b823a2e902 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 15 Mar 2024 17:03:39 -0600
Subject: [PATCH] Improve consistency of video scaling

---
 web/src/components/player/HlsVideoPlayer.tsx  |  6 +++--
 .../player/dynamic/DynamicVideoPlayer.tsx     | 23 ++++++++++++-------
 web/src/views/events/RecordingView.tsx        |  2 +-
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 4492bae43..fd0e79db0 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -59,6 +59,7 @@ export default function HlsVideoPlayer({
 
   const hlsRef = useRef<Hls>();
   const [useHlsCompat, setUseHlsCompat] = useState(false);
+  const [loadedMetadata, setLoadedMetadata] = useState(false);
 
   useEffect(() => {
     if (!videoRef.current) {
@@ -153,7 +154,7 @@ export default function HlsVideoPlayer({
 
   return (
     <div
-      className={`relative ${className ?? ""}`}
+      className={`relative`}
       onMouseOver={
         isDesktop
           ? () => {
@@ -174,7 +175,7 @@ export default function HlsVideoPlayer({
         <TransformComponent>
           <video
             ref={videoRef}
-            className="size-full rounded-2xl"
+            className={`${className ?? ""} bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
             preload="auto"
             autoPlay
             controls={false}
@@ -204,6 +205,7 @@ export default function HlsVideoPlayer({
                 : undefined
             }
             onLoadedData={onPlayerLoaded}
+            onLoadedMetadata={() => setLoadedMetadata(true)}
             onEnded={onClipEnded}
             onError={(e) => {
               if (
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 3c656a4a7..c869e516d 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -38,16 +38,23 @@ export default function DynamicVideoPlayer({
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // playback behavior
-  const wideVideo = useMemo(() => {
+
+  const grow = useMemo(() => {
     if (!config) {
-      return false;
+      return "aspect-video";
     }
 
-    return (
+    const aspectRatio =
       config.cameras[camera].detect.width /
-        config.cameras[camera].detect.height >
-      1.7
-    );
+      config.cameras[camera].detect.height;
+
+    if (aspectRatio > 2) {
+      return "";
+    } else if (aspectRatio < 16 / 9) {
+      return "aspect-tall";
+    } else {
+      return "aspect-video";
+    }
   }, [camera, config]);
 
   // controlling playback
@@ -163,7 +170,7 @@ export default function DynamicVideoPlayer({
         className={`w-full relative ${isScrubbing || isLoading ? "hidden" : "visible"}`}
       >
         <HlsVideoPlayer
-          className={`${wideVideo ? "" : "aspect-video"}`}
+          className={`${grow}`}
           videoRef={playerRef}
           currentSource={source}
           onTimeUpdate={onTimeUpdate}
@@ -180,7 +187,7 @@ export default function DynamicVideoPlayer({
         </HlsVideoPlayer>
       </div>
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className ?? ""}`}
+        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 82210836f..d7220c7ab 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -181,7 +181,7 @@ export function DesktopRecordingView({
 
     if (aspectRatio > 2) {
       return "wide";
-    } else if (aspectRatio < 1) {
+    } else if (aspectRatio < 16 / 9) {
       return "tall";
     } else {
       return "normal";