Improve thumbnails and live player (#9828)

* Don't show gif until event is over and fix aspect

* Be more efficient about updating events

* ensure previews are sorted

* Don't show live view when window is not visible

* Move debug camera to separate view

* Improve jpg loading

* Ensure still is updated on player live finish

* Don't reload when window not visible

* Only disconnect instead of full remove

* Use start time instead of event over to determine gif

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 (Date.now() / 1000 < event.start_time + 20) {
+      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">