Simplify thumbnail sizing

web/src/components/image/AnimatedEventThumbnail.tsx

@@ -4,15 +4,12 @@ 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) {
@@ -22,32 +19,11 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
     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-[9/16]";
-    } else {
-      return "aspect-video";
-    }
-  }, [config, event]);
-
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <div
-          className={`relative rounded bg-contain h-24 bg-no-repeat bg-center mr-4 ${aspect}`}
-          style={{
-            backgroundImage: `url(${imageUrl})`,
-          }}
-        >
+        <div className="relative h-24 mr-4">
+          <img className="h-full w-min rounded" src={imageUrl} />
           <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 />