From ae7df14da45e9f860ea3a6f92ac09803a9aaf55d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 12 Feb 2024 10:16:36 -0700
Subject: [PATCH] Don't show gif until event is over and fix aspect

---
 .../image/AnimatedEventThumbnail.tsx          | 36 +++++++++++++++++--
 web/src/pages/Live.tsx                        |  2 +-
 web/tailwind.config.js                        |  2 +-
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/web/src/components/image/AnimatedEventThumbnail.tsx b/web/src/components/image/AnimatedEventThumbnail.tsx
index 0584944bb..55acc13d2 100644
--- a/web/src/components/image/AnimatedEventThumbnail.tsx
+++ b/web/src/components/image/AnimatedEventThumbnail.tsx
@@ -2,18 +2,50 @@ import { baseUrl } from "@/api/baseUrl";
 import { Event as FrigateEvent } from "@/types/event";
 import TimeAgo from "../dynamic/TimeAgo";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { useMemo } from "react";
+import { useApiHost } from "@/api";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 type AnimatedEventThumbnailProps = {
   event: FrigateEvent;
 };
 export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
+  const apiHost = useApiHost();
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const imageUrl = useMemo(() => {
+    if (!event.end_time) {
+      return `${apiHost}api/preview/${event.camera}/${event.start_time}/thumbnail.jpg`;
+    }
+
+    return `${baseUrl}api/events/${event.id}/preview.gif`;
+  }, [event]);
+
+  const aspect = useMemo(() => {
+    if (!config) {
+      return "";
+    }
+
+    const detect = config.cameras[event.camera].detect;
+    const aspect = detect.width / detect.height;
+
+    if (aspect > 2) {
+      return "aspect-wide";
+    } else if (aspect < 1) {
+      return "aspect-tall";
+    } else {
+      return "aspect-video";
+    }
+  }, [config, event]);
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className="relative rounded bg-cover aspect-video h-24 bg-no-repeat bg-center mr-4"
+          className={`relative rounded bg-cover h-24 bg-no-repeat bg-center mr-4 ${aspect}`}
           style={{
-            backgroundImage: `url(${baseUrl}api/events/${event.id}/preview.gif)`,
+            backgroundImage: `url(${imageUrl})`,
           }}
         >
           <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 4461cdab7..51a0196ca 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -62,7 +62,7 @@ function Live() {
           if (aspectRatio > 2) {
             grow = "md:col-span-2 aspect-wide";
           } else if (aspectRatio < 1) {
-            grow = `md:row-span-2 aspect-[8/9] md:h-full`;
+            grow = `md:row-span-2 aspect-tall md:h-full`;
           } else {
             grow = "aspect-video";
           }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index f7c8c3155..120dd8747 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -25,7 +25,7 @@ module.exports = {
       },
       aspectRatio: {
         wide: "32 / 9",
-        tall: "9 / 16",
+        tall: "8 / 9",
       },
       colors: {
         border: "hsl(var(--border))",