mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Review timeline improvements (#10102)
* make event bars clickable * outline and scroll when segment is clicked * match outline colors to event type * hover thumbnails * make event bars clickable * outline and scroll when segment is clicked * match outline colors to event type * hover thumbnails * fix merge from rebase * remove minimap opacity classes * live player outline colors * safelist shadow classes
This commit is contained in:
Josh Hawkins
GitHub
parent
8663fbba01
commit
622e9741c0
@ -126,7 +126,7 @@ export default function LivePlayer({
|
||||
<div
|
||||
className={`relative flex justify-center w-full outline ${
|
||||
activeTracking
|
||||
? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
|
||||
? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-severity_alert"
|
||||
: "outline-0"
|
||||
} transition-all duration-500 ${className}`}
|
||||
>
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
import EventSegment from "./EventSegment";
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import { TooltipProvider } from "../ui/tooltip";
|
||||
|
||||
export type EventReviewTimelineProps = {
|
||||
segmentDuration: number;
|
||||
@ -102,7 +103,7 @@ export function EventReviewTimeline({
|
||||
|
||||
return (
|
||||
<EventSegment
|
||||
key={segmentTime}
|
||||
key={segmentTime + severityType}
|
||||
events={events}
|
||||
segmentDuration={segmentDuration}
|
||||
segmentTime={segmentTime}
|
||||
@ -111,6 +112,7 @@ export function EventReviewTimeline({
|
||||
minimapStartTime={minimapStartTime}
|
||||
minimapEndTime={minimapEndTime}
|
||||
severityType={severityType}
|
||||
contentRef={contentRef}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@ -122,6 +124,7 @@ export function EventReviewTimeline({
|
||||
showMinimap,
|
||||
minimapStartTime,
|
||||
minimapEndTime,
|
||||
events,
|
||||
]);
|
||||
|
||||
const segments = useMemo(
|
||||
@ -210,6 +213,7 @@ export function EventReviewTimeline({
|
||||
]);
|
||||
|
||||
return (
|
||||
<TooltipProvider skipDelayDuration={3000}>
|
||||
<div
|
||||
ref={timelineRef}
|
||||
className={`relative w-[120px] md:w-[100px] h-full overflow-y-scroll no-scrollbar bg-secondary ${
|
||||
@ -218,7 +222,10 @@ export function EventReviewTimeline({
|
||||
>
|
||||
<div className="flex flex-col">{segments}</div>
|
||||
{showHandlebar && (
|
||||
<div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar">
|
||||
<div
|
||||
className={`absolute left-0 top-0 z-20 w-full `}
|
||||
role="scrollbar"
|
||||
>
|
||||
<div className={`flex items-center justify-center `}>
|
||||
<div
|
||||
ref={scrollTimeRef}
|
||||
@ -243,6 +250,7 @@ export function EventReviewTimeline({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { useSegmentUtils } from "@/hooks/use-segment-utils";
|
||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import React, {
|
||||
RefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { Tooltip, TooltipContent } from "../ui/tooltip";
|
||||
import { TooltipTrigger } from "@radix-ui/react-tooltip";
|
||||
|
||||
type EventSegmentProps = {
|
||||
events: ReviewSegment[];
|
||||
@ -12,6 +21,7 @@ type EventSegmentProps = {
|
||||
minimapStartTime?: number;
|
||||
minimapEndTime?: number;
|
||||
severityType: ReviewSeverity;
|
||||
contentRef: RefObject<HTMLDivElement>;
|
||||
};
|
||||
|
||||
type MinimapSegmentProps = {
|
||||
@ -131,12 +141,15 @@ export function EventSegment({
|
||||
minimapStartTime,
|
||||
minimapEndTime,
|
||||
severityType,
|
||||
contentRef,
|
||||
}: EventSegmentProps) {
|
||||
const {
|
||||
getSeverity,
|
||||
getReviewed,
|
||||
displaySeverityType,
|
||||
shouldShowRoundedCorners,
|
||||
getEventStart,
|
||||
getEventThumbnail,
|
||||
} = useSegmentUtils(segmentDuration, events, severityType);
|
||||
|
||||
const { alignDateToTimeline } = useEventUtils(events, segmentDuration);
|
||||
@ -145,15 +158,35 @@ export function EventSegment({
|
||||
() => getSeverity(segmentTime, displaySeverityType),
|
||||
[getSeverity, segmentTime]
|
||||
);
|
||||
|
||||
const reviewed = useMemo(
|
||||
() => getReviewed(segmentTime),
|
||||
[getReviewed, segmentTime]
|
||||
);
|
||||
const { roundTop, roundBottom } = useMemo(
|
||||
|
||||
const {
|
||||
roundTopPrimary,
|
||||
roundBottomPrimary,
|
||||
roundTopSecondary,
|
||||
roundBottomSecondary,
|
||||
} = useMemo(
|
||||
() => shouldShowRoundedCorners(segmentTime),
|
||||
[shouldShowRoundedCorners, segmentTime]
|
||||
);
|
||||
|
||||
const startTimestamp = useMemo(() => {
|
||||
const eventStart = getEventStart(segmentTime);
|
||||
if (eventStart) {
|
||||
return alignDateToTimeline(eventStart);
|
||||
}
|
||||
}, [getEventStart, segmentTime]);
|
||||
|
||||
const apiHost = useApiHost();
|
||||
|
||||
const eventThumbnail = useMemo(() => {
|
||||
return getEventThumbnail(segmentTime);
|
||||
}, [getEventThumbnail, segmentTime]);
|
||||
|
||||
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
|
||||
const segmentKey = useMemo(() => segmentTime, [segmentTime]);
|
||||
|
||||
@ -204,13 +237,7 @@ export function EventSegment({
|
||||
}, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
|
||||
|
||||
const segmentClasses = `flex flex-row ${
|
||||
showMinimap
|
||||
? isInMinimapRange
|
||||
? "bg-card"
|
||||
: isLastSegmentInMinimap
|
||||
? ""
|
||||
: "opacity-70"
|
||||
: ""
|
||||
showMinimap ? (isInMinimapRange ? "bg-muted" : "bg-background") : ""
|
||||
} ${
|
||||
isFirstSegmentInMinimap || isLastSegmentInMinimap
|
||||
? "relative h-2 border-b border-gray-500"
|
||||
@ -229,6 +256,29 @@ export function EventSegment({
|
||||
: "from-severity_alert-dimmed to-severity_alert",
|
||||
};
|
||||
|
||||
const segmentClick = useCallback(() => {
|
||||
if (contentRef.current && startTimestamp) {
|
||||
const element = contentRef.current.querySelector(
|
||||
`[data-segment-start="${startTimestamp - segmentDuration}"]`
|
||||
);
|
||||
if (element instanceof HTMLElement) {
|
||||
debounceScrollIntoView(element);
|
||||
element.classList.add(
|
||||
`outline-severity_${severityType}`,
|
||||
`shadow-severity_${severityType}`
|
||||
);
|
||||
element.classList.add("outline-4", "shadow-[0_0_6px_1px]");
|
||||
element.classList.remove("outline-0", "shadow-none");
|
||||
|
||||
// Remove the classes after a short timeout
|
||||
setTimeout(() => {
|
||||
element.classList.remove("outline-4", "shadow-[0_0_6px_1px]");
|
||||
element.classList.add("outline-0", "shadow-none");
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}, [startTimestamp]);
|
||||
|
||||
return (
|
||||
<div key={segmentKey} className={segmentClasses}>
|
||||
<MinimapBounds
|
||||
@ -257,20 +307,31 @@ export function EventSegment({
|
||||
{severity.map((severityValue, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{severityValue === displaySeverityType && (
|
||||
<Tooltip delayDuration={300}>
|
||||
<div
|
||||
className="mr-3 w-[8px] h-2 flex justify-left items-end"
|
||||
data-severity={severityValue}
|
||||
>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
key={`${segmentKey}_${index}_primary_data`}
|
||||
className={`
|
||||
w-full h-2 bg-gradient-to-r
|
||||
${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
|
||||
${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
|
||||
${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""}
|
||||
${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""}
|
||||
${severityColors[severityValue]}
|
||||
`}
|
||||
onClick={segmentClick}
|
||||
></div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="rounded-2xl" side="left">
|
||||
<img
|
||||
className="rounded-lg"
|
||||
src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
|
||||
/>
|
||||
</TooltipContent>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{severityValue !== displaySeverityType && (
|
||||
@ -279,8 +340,8 @@ export function EventSegment({
|
||||
key={`${segmentKey}_${index}_secondary_data`}
|
||||
className={`
|
||||
w-1 h-2 bg-gradient-to-r
|
||||
${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
|
||||
${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
|
||||
${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
|
||||
${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
|
||||
${severityColors[severityValue]}
|
||||
`}
|
||||
></div>
|
||||
|
||||
@ -84,7 +84,14 @@ export const useSegmentUtils = (
|
||||
);
|
||||
|
||||
const shouldShowRoundedCorners = useCallback(
|
||||
(segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
|
||||
(
|
||||
segmentTime: number
|
||||
): {
|
||||
roundTopPrimary: boolean;
|
||||
roundBottomPrimary: boolean;
|
||||
roundTopSecondary: boolean;
|
||||
roundBottomSecondary: boolean;
|
||||
} => {
|
||||
const prevSegmentTime = segmentTime - segmentDuration;
|
||||
const nextSegmentTime = segmentTime + segmentDuration;
|
||||
|
||||
@ -134,28 +141,61 @@ export const useSegmentUtils = (
|
||||
);
|
||||
});
|
||||
|
||||
let roundTop = false;
|
||||
let roundBottom = false;
|
||||
let roundTopPrimary = false;
|
||||
let roundBottomPrimary = false;
|
||||
let roundTopSecondary = false;
|
||||
let roundBottomSecondary = false;
|
||||
|
||||
if (hasOverlappingSeverityEvent) {
|
||||
roundBottom = !hasPrevSeverityEvent;
|
||||
roundTop = !hasNextSeverityEvent;
|
||||
} else if (hasOverlappingOtherEvent) {
|
||||
roundBottom = !hasPrevOtherEvent;
|
||||
roundTop = !hasNextOtherEvent;
|
||||
} else {
|
||||
roundTop = !hasNextSeverityEvent || !hasNextOtherEvent;
|
||||
roundBottom = !hasPrevSeverityEvent || !hasPrevOtherEvent;
|
||||
roundBottomPrimary = !hasPrevSeverityEvent;
|
||||
roundTopPrimary = !hasNextSeverityEvent;
|
||||
}
|
||||
|
||||
if (hasOverlappingOtherEvent) {
|
||||
roundBottomSecondary = !hasPrevOtherEvent;
|
||||
roundTopSecondary = !hasNextOtherEvent;
|
||||
}
|
||||
|
||||
return {
|
||||
roundTop,
|
||||
roundBottom,
|
||||
roundTopPrimary,
|
||||
roundBottomPrimary,
|
||||
roundTopSecondary,
|
||||
roundBottomSecondary,
|
||||
};
|
||||
},
|
||||
[events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
|
||||
);
|
||||
|
||||
const getEventStart = useCallback(
|
||||
(time: number): number => {
|
||||
const matchingEvent = events.find((event) => {
|
||||
return (
|
||||
time >= getSegmentStart(event.start_time) &&
|
||||
time < getSegmentEnd(event.end_time) &&
|
||||
event.severity == severityType
|
||||
);
|
||||
});
|
||||
|
||||
return matchingEvent?.start_time ?? 0;
|
||||
},
|
||||
[events, getSegmentStart, getSegmentEnd, severityType]
|
||||
);
|
||||
|
||||
const getEventThumbnail = useCallback(
|
||||
(time: number): string => {
|
||||
const matchingEvent = events.find((event) => {
|
||||
return (
|
||||
time >= getSegmentStart(event.start_time) &&
|
||||
time < getSegmentEnd(event.end_time) &&
|
||||
event.severity == severityType
|
||||
);
|
||||
});
|
||||
|
||||
return matchingEvent?.thumb_path ?? "";
|
||||
},
|
||||
[events, getSegmentStart, getSegmentEnd, severityType]
|
||||
);
|
||||
|
||||
return {
|
||||
getSegmentStart,
|
||||
getSegmentEnd,
|
||||
@ -163,5 +203,7 @@ export const useSegmentUtils = (
|
||||
displaySeverityType,
|
||||
getReviewed,
|
||||
shouldShowRoundedCorners,
|
||||
getEventStart,
|
||||
getEventThumbnail
|
||||
};
|
||||
};
|
||||
@ -4,6 +4,7 @@ import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
@ -43,6 +44,7 @@ export default function DesktopEventView({
|
||||
}: DesktopEventViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const segmentDuration = 60;
|
||||
|
||||
// review paging
|
||||
|
||||
@ -78,6 +80,11 @@ export default function DesktopEventView({
|
||||
};
|
||||
}, [reviewPages]);
|
||||
|
||||
const { alignDateToTimeline } = useEventUtils(
|
||||
reviewItems.all,
|
||||
segmentDuration
|
||||
);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const current = reviewItems[severity];
|
||||
|
||||
@ -245,7 +252,10 @@ export default function DesktopEventView({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full mr-4 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4">
|
||||
<div
|
||||
className="w-full mx-2 my-2 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
|
||||
ref={contentRef}
|
||||
>
|
||||
{currentItems ? (
|
||||
currentItems.map((value, segIdx) => {
|
||||
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||
@ -263,6 +273,10 @@ export default function DesktopEventView({
|
||||
key={value.id}
|
||||
ref={lastRow ? lastReviewRef : minimapRef}
|
||||
data-start={value.start_time}
|
||||
data-segment-start={
|
||||
alignDateToTimeline(value.start_time) - segmentDuration
|
||||
}
|
||||
className="outline outline-offset-1 outline-0 rounded-lg shadow-none transition-all duration-500"
|
||||
>
|
||||
<div className="aspect-video rounded-lg overflow-hidden">
|
||||
<PreviewThumbnailPlayer
|
||||
@ -281,9 +295,9 @@ export default function DesktopEventView({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:w-[100px] overflow-y-auto no-scrollbar">
|
||||
<div className="md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
|
||||
<EventReviewTimeline
|
||||
segmentDuration={60}
|
||||
segmentDuration={segmentDuration}
|
||||
timestampSpread={15}
|
||||
timelineStart={timeRange.before}
|
||||
timelineEnd={timeRange.after}
|
||||
|
||||
@ -7,6 +7,11 @@ module.exports = {
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /(outline|shadow)-severity_(alert|detection|motion)/,
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user