From 5269b0810c41681e02de31d2ed617a2c2dede313 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 14 Feb 2024 09:42:19 -0700
Subject: [PATCH] Use correct aspect ratio on all devices

---
 .../image/AnimatedEventThumbnail.tsx          | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/components/image/AnimatedEventThumbnail.tsx b/web/src/components/image/AnimatedEventThumbnail.tsx
index 6c4762a83..347138b0b 100644
--- a/web/src/components/image/AnimatedEventThumbnail.tsx
+++ b/web/src/components/image/AnimatedEventThumbnail.tsx
@@ -4,12 +4,15 @@ 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) {
@@ -19,11 +22,25 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
     return `${baseUrl}api/events/${event.id}/preview.gif`;
   }, [event]);
 
+  const aspectRatio = useMemo(() => {
+    if (!config) {
+      return 1;
+    }
+
+    const detect = config.cameras[event.camera].detect;
+    return detect.width / detect.height;
+  }, [config]);
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <div className="relative h-24 mr-4">
-          <img className="h-full w-min rounded" src={imageUrl} />
+        <div
+          className="h-24 relative rounded bg-cover bg-no-repeat bg-center mr-4"
+          style={{
+            backgroundImage: `url(${imageUrl})`,
+            aspectRatio: aspectRatio,
+          }}
+        >
           <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
             <div className="absolute left-1 bottom-0 text-xs text-white w-full">
               <TimeAgo time={event.start_time * 1000} dense />