administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use the review card in event timeline popover

Browse Source
This commit is contained in:
Nicolas Mowen 2025-11-05 08:26:35 -07:00
parent e1bc7360ad
commit c25d5f431f
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/timeline/EventSegment.tsx
View File

@ -1,4 +1,3 @@
import { useApiHost } from "@/api";
import { useTimelineUtils } from "@/hooks/use-timeline-utils"; import { useTimelineUtils } from "@/hooks/use-timeline-utils";
import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils"; import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
import { ReviewSegment, ReviewSeverity } from "@/types/review"; import { ReviewSegment, ReviewSeverity } from "@/types/review";
@ -18,6 +17,7 @@ import { HoverCardPortal } from "@radix-ui/react-hover-card";
import scrollIntoView from "scroll-into-view-if-needed"; import scrollIntoView from "scroll-into-view-if-needed";
import { MinimapBounds, Tick, Timestamp } from "./segment-metadata"; import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
import useTapUtils from "@/hooks/use-tap-utils"; import useTapUtils from "@/hooks/use-tap-utils";
import ReviewCard from "../card/ReviewCard";
type EventSegmentProps = { type EventSegmentProps = {
events: ReviewSegment[]; events: ReviewSegment[];
@ -54,7 +54,7 @@ export function EventSegment({
displaySeverityType, displaySeverityType,
shouldShowRoundedCorners, shouldShowRoundedCorners,
getEventStart, getEventStart,
getEventThumbnail, getEvent,
} = useEventSegmentUtils(segmentDuration, events, severityType); } = useEventSegmentUtils(segmentDuration, events, severityType);
const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils( const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
@ -87,13 +87,11 @@ export function EventSegment({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [getEventStart, segmentTime]); }, [getEventStart, segmentTime]);
const apiHost = useApiHost();
const { handleTouchStart } = useTapUtils(); const { handleTouchStart } = useTapUtils();
const eventThumbnail = useMemo(() => { const segmentEvent = useMemo(() => {
return getEventThumbnail(segmentTime); return getEvent(segmentTime);
}, [getEventThumbnail, segmentTime]); }, [getEvent, segmentTime]);
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]); const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
const segmentKey = useMemo( const segmentKey = useMemo(
@ -252,10 +250,7 @@ export function EventSegment({
className="w-[250px] rounded-lg p-2 md:rounded-2xl" className="w-[250px] rounded-lg p-2 md:rounded-2xl"
side="left" side="left"
> >
<img {segmentEvent && <ReviewCard event={segmentEvent} />}
className="rounded-lg"
src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
/>
</HoverCardContent> </HoverCardContent>
</HoverCardPortal> </HoverCardPortal>
</HoverCard> </HoverCard>

8
web/src/hooks/use-event-segment-utils.ts
View File

@ -191,8 +191,8 @@ export const useEventSegmentUtils = (
[events, getSegmentStart, getSegmentEnd, severityType], [events, getSegmentStart, getSegmentEnd, severityType],
); );
const getEventThumbnail = useCallback( const getEvent = useCallback(
(time: number): string => { (time: number): ReviewSegment | undefined => {
const matchingEvent = events.find((event) => { const matchingEvent = events.find((event) => {
return ( return (
time >= getSegmentStart(event.start_time) && time >= getSegmentStart(event.start_time) &&
@ -201,7 +201,7 @@ export const useEventSegmentUtils = (
); );
}); });
return matchingEvent?.thumb_path ?? ""; return matchingEvent;
}, },
[events, getSegmentStart, getSegmentEnd, severityType], [events, getSegmentStart, getSegmentEnd, severityType],
); );
@ -214,6 +214,6 @@ export const useEventSegmentUtils = (
getReviewed, getReviewed,
shouldShowRoundedCorners, shouldShowRoundedCorners,
getEventStart, getEventStart,
getEventThumbnail, getEvent,
}; };
}; };