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

Use correct aspect ratio on all devices

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-14 09:42:19 -07:00
parent f59b77fe60
commit 5269b0810c
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,12 +4,15 @@ 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) {
@ -19,11 +22,25 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
return `${baseUrl}api/events/${event.id}/preview.gif`; return `${baseUrl}api/events/${event.id}/preview.gif`;
}, [event]); }, [event]);
const aspectRatio = useMemo(() => {
if (!config) {
return 1;
}
const detect = config.cameras[event.camera].detect;
return detect.width / detect.height;
}, [config]);
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="relative h-24 mr-4"> <div
<img className="h-full w-min rounded" src={imageUrl} /> 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 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 />