mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-09-26 19:41:29 +08:00
64988c9be0
* Break out live page * Improving layouts and add chip component * Improve default camera player sizing * Improve live updating * Cleanup and fit figma * Use fixed height * Masonry layout * Fix stuff * Don't force heights * Adjust scaling * Cleanup * remove sidebar (#9731) * remove sidebar * keep sidebar on mobile for now and add icons * Fix revalidation * Cleanup * Cleanup width * Add chips for activity on cameras * Remove dashboard from header * Use Inter font (#9735) * Show still image when no activity is occurring * remove unused search params * add playing check for webrtc * Don't use grid at all for single column * Fix height on mobile * a few style updates to better match figma (#9745) * Remove active objects when they become stationary * Move to sidebar only and make settings separate component * Fix layout * Animate visibility of chips * Sidebar is full screen * Fix tall aspect ratio cameras * Fix complicated aspect logic * remove * Adjust thumbnail aspect and add text * margin on single column layout * Smaller event thumb text * Simplify basic image view * Only show the red dot when camera is recording * Improve typing for camera toggles * animate chips with react-transition-group (#9763) * don't flash when going to still image * revalidate * tooltips and active tracking outline (#9766) * tooltips * fix tooltip provider and add active tracking outline * remove unused icon * remove figma comment * Get live mode working for jsmpeg * add small gradient below timeago on event thumbnails (#9767) * Create live mode hook and make sure jsmpeg can be used * Enforce env var * Use print * Remove unstable * Add tooltips to thumbnails * Put back vite * Format * Update web/src/components/player/JSMpegPlayer.tsx --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Co-authored-by: Blake Blackshear <blake@frigate.video>
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { baseUrl } from "@/api/baseUrl";
|
|
import { Event as FrigateEvent } from "@/types/event";
|
|
import { LuStar } from "react-icons/lu";
|
|
import TimeAgo from "../dynamic/TimeAgo";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
|
|
|
type EventThumbnailProps = {
|
|
event: FrigateEvent;
|
|
onFavorite?: (e: Event, event: FrigateEvent) => void;
|
|
};
|
|
export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
|
|
style={{
|
|
backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
|
|
}}
|
|
>
|
|
<LuStar
|
|
className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
|
|
onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
|
|
fill={event.retain_indefinitely ? "currentColor" : "none"}
|
|
/>
|
|
<div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
|
|
<div className="absolute left-1 bottom-0 text-xs text-white w-full">
|
|
<TimeAgo time={event.start_time * 1000} dense />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{`${event.label} ${
|
|
event.sub_label ? `(${event.sub_label})` : ""
|
|
} detected with score of ${(event.data.score * 100).toFixed(0)}% ${
|
|
event.data.sub_label_score
|
|
? `(${event.data.sub_label_score * 100}%)`
|
|
: ""
|
|
}`}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|