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

Add ability to open to recordings from event gif

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-28 08:41:31 -07:00
parent 1825869a64
commit e05d428060
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/image/AnimatedEventThumbnail.tsx
View File

@ -1,11 +1,12 @@
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 { useMemo } from "react"; import { useCallback, useMemo } from "react";
import { useApiHost } from "@/api"; 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";
type AnimatedEventThumbnailProps = { type AnimatedEventThumbnailProps = {
event: ReviewSegment; event: ReviewSegment;
@ -14,6 +15,15 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
// interaction
const navigate = useNavigate();
const onOpenReview = useCallback(() => {
navigate("events", { state: { review: event.id } });
}, [navigate, event]);
// image behavior
const imageUrl = useMemo(() => { const imageUrl = useMemo(() => {
if (Date.now() / 1000 < event.start_time + 20) { if (Date.now() / 1000 < event.start_time + 20) {
return `${apiHost}api/preview/${event.camera}/${event.start_time}/thumbnail.jpg`; return `${apiHost}api/preview/${event.camera}/${event.start_time}/thumbnail.jpg`;
@ -35,11 +45,12 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
className="h-24 relative rounded bg-cover bg-no-repeat bg-center mr-4" className="h-24 relative rounded bg-cover bg-no-repeat bg-center mr-4 cursor-pointer"
style={{ style={{
backgroundImage: `url(${imageUrl})`, backgroundImage: `url(${imageUrl})`,
aspectRatio: aspectRatio, aspectRatio: aspectRatio,
}} }}
onClick={onOpenReview}
> >
<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">