administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Simplify thumbnail sizing

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-13 13:54:58 -07:00
parent beed45e7ed
commit f59b77fe60
1 changed files with 2 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/image/AnimatedEventThumbnail.tsx
View File

@ -4,15 +4,12 @@ import TimeAgo from "../dynamic/TimeAgo";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { useMemo } from "react"; import { useMemo } from "react";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
type AnimatedEventThumbnailProps = { type AnimatedEventThumbnailProps = {
event: FrigateEvent; event: FrigateEvent;
}; };
export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) { export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config");
const imageUrl = useMemo(() => { const imageUrl = useMemo(() => {
if (Date.now() / 1000 < event.start_time + 20) { 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`; return `${baseUrl}api/events/${event.id}/preview.gif`;
}, [event]); }, [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 ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div className="relative h-24 mr-4">
className={`relative rounded bg-contain h-24 bg-no-repeat bg-center mr-4 ${aspect}`} <img className="h-full w-min rounded" src={imageUrl} />
style={{
backgroundImage: `url(${imageUrl})`,
}}
>
<div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded"> <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"> <div className="absolute left-1 bottom-0 text-xs text-white w-full">
<TimeAgo time={event.start_time * 1000} dense /> <TimeAgo time={event.start_time * 1000} dense />