Fix video scaling

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -33,6 +33,7 @@ import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 
 const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];
@@ -157,7 +158,7 @@ export default function SearchDetailDialog({
             }}
           />
         )}
-        {page == "video" && <VideoTab search={search} />}
+        {page == "video" && <VideoTab search={search} config={config} />}
       </Content>
     </Overlay>
   );
@@ -311,28 +312,79 @@ function ObjectDetailsTab({
 
 type VideoTabProps = {
   search: SearchResult;
+  config?: FrigateConfig;
 };
-function VideoTab({ search }: VideoTabProps) {
+function VideoTab({ search, config }: VideoTabProps) {
   const [isLoading, setIsLoading] = useState(true);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
 
+  const mainCameraAspect = useMemo(() => {
+    const camera = config?.cameras?.[search.camera];
+
+    if (!camera) {
+      return "normal";
+    }
+
+    const aspectRatio = camera.detect.width / camera.detect.height;
+
+    if (!aspectRatio) {
+      return "normal";
+    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+      return "wide";
+    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+      return "tall";
+    } else {
+      return "normal";
+    }
+  }, [config, search]);
+
+  const containerClassName = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "flex justify-center items-center";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "size-full flex flex-col justify-center items-center";
+      } else {
+        return "size-full";
+      }
+    } else {
+      return "";
+    }
+  }, [mainCameraAspect]);
+
+  const videoClassName = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "w-full aspect-wide";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "w-[50%] aspect-tall flex justify-center";
+      } else {
+        return "size-full";
+      }
+    } else {
+      return "w-full aspect-video";
+    }
+  }, [mainCameraAspect]);
+
   return (
-    <>
+    <div className={`aspect-video ${containerClassName}`}>
       {isLoading && (
         <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       )}
-      <HlsVideoPlayer
+      <div className={videoClassName}>
-        videoRef={videoRef}
+        <HlsVideoPlayer
-        currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
+          videoRef={videoRef}
-        hotKeys
+          currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
-        visible
+          hotKeys
-        frigateControls={false}
+          visible
-        fullscreen={false}
+          frigateControls={false}
-        supportsFullscreen={false}
+          fullscreen={false}
-        onPlaying={() => setIsLoading(false)}
+          supportsFullscreen={false}
-      />
+          onPlaying={() => setIsLoading(false)}
-    </>
+        />
+      </div>
+    </div>
   );
 }