From 8278d9abd871e4e97a5bcd62793805453228f48f Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 13 Dec 2023 09:16:32 -0700
Subject: [PATCH] Use constant aspect ratio for review grid

---
 web-new/src/components/card/HistoryCard.tsx   |   2 +-
 .../player/PreviewThumbnailPlayer.tsx         | 124 ++++++++++--------
 web-new/vite.config.ts                        |  12 +-
 3 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/web-new/src/components/card/HistoryCard.tsx b/web-new/src/components/card/HistoryCard.tsx
index 98c826435..0684f3667 100644
--- a/web-new/src/components/card/HistoryCard.tsx
+++ b/web-new/src/components/card/HistoryCard.tsx
@@ -35,7 +35,7 @@ export default function HistoryCard({
   }
 
   return (
-    <Card className="my-2 mr-2 bg-secondary">
+    <Card className="my-2 mr-2 bg-secondary w-[284px]">
       <PreviewThumbnailPlayer
         camera={timeline.camera}
         allPreviews={allPreviews || []}
diff --git a/web-new/src/components/player/PreviewThumbnailPlayer.tsx b/web-new/src/components/player/PreviewThumbnailPlayer.tsx
index abd4b6533..ca51ddfc1 100644
--- a/web-new/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web-new/src/components/player/PreviewThumbnailPlayer.tsx
@@ -4,62 +4,78 @@ import useSWR from "swr";
 import { useCallback, useMemo, useRef } from "react";
 import { useApiHost } from "@/api";
 import Player from "video.js/dist/types/player";
+import { AspectRatio } from "../ui/aspect-ratio";
 
 type PreviewPlayerProps = {
-    camera: string,
-    allPreviews: Preview[],
-    startTs: number,
-}
+  camera: string;
+  allPreviews: Preview[];
+  startTs: number;
+};
 
 type Preview = {
-    camera: string,
-    src: string,
-    type: string,
-    start: number,
-    end: number,
-}
+  camera: string;
+  src: string;
+  type: string;
+  start: number;
+  end: number;
+};
 
-export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }: PreviewPlayerProps) {
-    const { data: config } = useSWR('config');
-    const playerRef = useRef<Player | null>(null);
-    const apiHost = useApiHost();
+export default function PreviewThumbnailPlayer({
+  camera,
+  allPreviews,
+  startTs,
+}: PreviewPlayerProps) {
+  const { data: config } = useSWR("config");
+  const playerRef = useRef<Player | null>(null);
+  const apiHost = useApiHost();
 
-    const relevantPreview = useMemo(() => {
-      return Object.values(allPreviews || []).find(
-        (preview) => preview.camera == camera && preview.start < startTs && preview.end > startTs
-      );
-    }, [allPreviews, camera, startTs]);
-
-    const onHover = useCallback((isHovered: Boolean) => {
-        if (!relevantPreview || !playerRef.current) {
-            return;
-        }
-
-        if (isHovered) {
-          playerRef.current.play();
-        } else {
-          playerRef.current.pause();
-          playerRef.current.currentTime(startTs - relevantPreview.start);
-        }
-      },
-      [relevantPreview, startTs]
+  const relevantPreview = useMemo(() => {
+    return Object.values(allPreviews || []).find(
+      (preview) =>
+        preview.camera == camera &&
+        preview.start < startTs &&
+        preview.end > startTs
     );
+  }, [allPreviews, camera, startTs]);
 
-    if (!relevantPreview) {
-      return (
-        <img className={getThumbWidth(camera, config)} src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`} />
-      );
-    }
+  const onHover = useCallback(
+    (isHovered: Boolean) => {
+      if (!relevantPreview || !playerRef.current) {
+        return;
+      }
 
+      if (isHovered) {
+        playerRef.current.play();
+      } else {
+        playerRef.current.pause();
+        playerRef.current.currentTime(startTs - relevantPreview.start);
+      }
+    },
+    [relevantPreview, startTs]
+  );
+
+  if (!relevantPreview) {
     return (
-      <div
-        className={getThumbWidth(camera, config)}
-        onMouseEnter={() => onHover(true)}
-        onMouseLeave={() => onHover(false)}
+      <AspectRatio
+        ratio={16 / 9}
+        className="bg-black flex justify-center items-center"
       >
+        <img src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`} />
+      </AspectRatio>
+    );
+  }
+
+  return (
+    <AspectRatio
+      ratio={16 / 9}
+      className="bg-black flex justify-center items-center"
+      onMouseEnter={() => onHover(true)}
+      onMouseLeave={() => onHover(false)}
+    >
+      <div className={`${getThumbWidth(camera, config)}`}>
         <VideoPlayer
           options={{
-            preload: 'auto',
+            preload: "auto",
             autoplay: false,
             controls: false,
             muted: true,
@@ -67,7 +83,7 @@ export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }:
             sources: [
               {
                 src: `${relevantPreview.src}`,
-                type: 'video/mp4',
+                type: "video/mp4",
               },
             ],
           }}
@@ -82,18 +98,16 @@ export default function PreviewThumbnailPlayer({ camera, allPreviews, startTs }:
           }}
         />
       </div>
-    );
-  }
+    </AspectRatio>
+  );
+}
 
 function getThumbWidth(camera: string, config: FrigateConfig) {
-const detect = config.cameras[camera].detect;
-if (detect.width / detect.height > 2) {
-    return 'w-[320px]';
-}
+  const detect = config.cameras[camera].detect;
 
-if (detect.width / detect.height < 1.4) {
-    return 'w-[200px]';
-}
+  if (detect.width / detect.height < 1.4) {
+    return "w-[200px]";
+  }
 
-return 'w-[240px]';
-}
\ No newline at end of file
+  return "w-full";
+}
diff --git a/web-new/vite.config.ts b/web-new/vite.config.ts
index a97dbd014..5d5bf8207 100644
--- a/web-new/vite.config.ts
+++ b/web-new/vite.config.ts
@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:5000',
+        target: 'http://192.168.50.106:5000',
         ws: true,
       },
       '/vod': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/clips': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/exports': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/ws': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         ws: true,
       },
       '/live': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         changeOrigin: true,
         ws: true,
       },