Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Fix alert thumbnails on iOS and safari desktop (#14121)

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-02 14:49:52 -05:00 committed by GitHub
parent 75d531285a
commit a1efcfb2d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/card/AnimatedEventCard.tsx
View File

@ -17,6 +17,7 @@ import { usePersistence } from "@/hooks/use-persistence";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { FaCircleCheck } from "react-icons/fa6"; import { FaCircleCheck } from "react-icons/fa6";
import { cn } from "@/lib/utils";
type AnimatedEventCardProps = { type AnimatedEventCardProps = {
event: ReviewSegment; event: ReviewSegment;
@ -145,7 +146,10 @@ export function AnimatedEventCard({
> >
{!alertVideos ? ( {!alertVideos ? (
<img <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/", "")}`} src={`${apiHost}${event.thumb_path.replace("/media/frigate/", "")}`}
loading={isSafari ? "eager" : "lazy"} loading={isSafari ? "eager" : "lazy"}
onLoad={() => setIsLoaded(true)} onLoad={() => setIsLoaded(true)}
@ -200,7 +204,14 @@ export function AnimatedEventCard({
</div> </div>
</div> </div>
)} )}
{!isLoaded && <Skeleton className="absolute inset-0" />} {!isLoaded && (
<Skeleton
style={{
aspectRatio: alertVideos ? aspectRatio : 16 / 9,
}}
className="size-full"
/>
)}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>