From a1efcfb2d0eded586762a187f80e0bdc206f8d22 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 2 Oct 2024 14:49:52 -0500
Subject: [PATCH] Fix alert thumbnails on iOS and safari desktop (#14121)

---
 web/src/components/card/AnimatedEventCard.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 73c6af3b5..0c13b96a8 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -17,6 +17,7 @@ import { usePersistence } from "@/hooks/use-persistence";
 import { Skeleton } from "../ui/skeleton";
 import { Button } from "../ui/button";
 import { FaCircleCheck } from "react-icons/fa6";
+import { cn } from "@/lib/utils";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
@@ -145,7 +146,10 @@ export function AnimatedEventCard({
             >
               {!alertVideos ? (
                 <img
-                  className="max-h-full select-none"
+                  className={cn(
+                    "h-full w-auto min-w-10 select-none object-contain",
+                    isSafari && !isLoaded ? "hidden" : "visible",
+                  )}
                   src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
                   loading={isSafari ? "eager" : "lazy"}
                   onLoad={() => setIsLoaded(true)}
@@ -200,7 +204,14 @@ export function AnimatedEventCard({
               </div>
             </div>
           )}
-          {!isLoaded && <Skeleton className="absolute inset-0" />}
+          {!isLoaded && (
+            <Skeleton
+              style={{
+                aspectRatio: alertVideos ? aspectRatio : 16 / 9,
+              }}
+              className="size-full"
+            />
+          )}
         </div>
       </TooltipTrigger>
       <TooltipContent>