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 skeleton for gif loading

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-12 10:35:11 -06:00
parent 9e10b914c9
commit cb5c093d1d
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,17 @@
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import TimeAgo from "../dynamic/TimeAgo"; import TimeAgo from "../dynamic/TimeAgo";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo, useState } from "react";
import { useApiHost } from "@/api";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { ReviewSegment } from "@/types/review"; import { ReviewSegment } from "@/types/review";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Skeleton } from "../ui/skeleton";
type AnimatedEventThumbnailProps = { type AnimatedEventThumbnailProps = {
event: ReviewSegment; event: ReviewSegment;
}; };
export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) { export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
// interaction // interaction
@ -24,13 +23,15 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
// image behavior // image behavior
const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(0);
const imageUrl = useMemo(() => { const imageUrl = useMemo(() => {
if (Date.now() / 1000 < event.start_time + 20) { if (error > 0) {
return `${apiHost}api/preview/${event.camera}/${event.start_time}/thumbnail.jpg`; return `${baseUrl}api/review/${event.id}/preview.gif?key=${error}`;
} }
return `${baseUrl}api/review/${event.id}/preview.gif`; return `${baseUrl}api/review/${event.id}/preview.gif`;
}, [apiHost, event]); }, [error, event]);
const aspectRatio = useMemo(() => { const aspectRatio = useMemo(() => {
if (!config) { if (!config) {
@ -44,14 +45,22 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div className="h-24 relative">
className="h-24 relative rounded bg-cover bg-no-repeat bg-center mr-4 cursor-pointer" <img
style={{ className="size-full rounded object-cover object-center cursor-pointer"
backgroundImage: `url(${imageUrl})`, src={imageUrl}
aspectRatio: aspectRatio, style={{
}} aspectRatio: aspectRatio,
onClick={onOpenReview} }}
> onClick={onOpenReview}
onLoad={() => setLoaded(true)}
onError={() => {
if (error < 2) {
setError(error + 1);
}
}}
/>
{!loaded && <Skeleton className="absolute inset-0" />}
<div className="absolute bottom-0 inset-x-0 h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded"> <div className="absolute bottom-0 inset-x-0 h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
<div className="w-full absolute left-1 bottom-0 text-xs text-white"> <div className="w-full absolute left-1 bottom-0 text-xs text-white">
<TimeAgo time={event.start_time * 1000} dense /> <TimeAgo time={event.start_time * 1000} dense />

2
web/src/views/live/LiveDashboardView.tsx
View File

@ -117,7 +117,7 @@ export default function LiveDashboardView({
{events && events.length > 0 && ( {events && events.length > 0 && (
<ScrollArea> <ScrollArea>
<TooltipProvider> <TooltipProvider>
<div className="flex"> <div className="flex gap-4 items-center">
{events.map((event) => { {events.map((event) => {
return <AnimatedEventThumbnail key={event.id} event={event} />; return <AnimatedEventThumbnail key={event.id} event={event} />;
})} })}