mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Motion review timeline (#10235)
* initial motion and audio timeline with dummy data * initial motion and audio timeline with dummy data
This commit is contained in:
Josh Hawkins
GitHub
parent
0f168dfc1a
commit
282c92c9c8
@ -10,6 +10,7 @@ import {
|
||||
import EventSegment from "./EventSegment";
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import ReviewTimeline from "./ReviewTimeline";
|
||||
|
||||
export type EventReviewTimelineProps = {
|
||||
segmentDuration: number;
|
||||
@ -48,7 +49,6 @@ export function EventReviewTimeline({
|
||||
const scrollTimeRef = useRef<HTMLDivElement>(null);
|
||||
const timelineRef = useRef<HTMLDivElement>(null);
|
||||
const handlebarTimeRef = useRef<HTMLDivElement>(null);
|
||||
const observer = useRef<ResizeObserver | null>(null);
|
||||
const timelineDuration = useMemo(
|
||||
() => timelineStart - timelineEnd,
|
||||
[timelineEnd, timelineStart],
|
||||
@ -77,28 +77,6 @@ export function EventReviewTimeline({
|
||||
handlebarTimeRef,
|
||||
});
|
||||
|
||||
function handleResize() {
|
||||
// TODO: handle screen resize for mobile
|
||||
// eslint-disable-next-line no-empty
|
||||
if (timelineRef.current && contentRef.current) {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current) {
|
||||
const content = contentRef.current;
|
||||
observer.current = new ResizeObserver(() => {
|
||||
handleResize();
|
||||
});
|
||||
observer.current.observe(content);
|
||||
return () => {
|
||||
observer.current?.unobserve(content);
|
||||
};
|
||||
}
|
||||
// should only be calculated at beginning
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Generate segments for the timeline
|
||||
const generateSegments = useCallback(() => {
|
||||
const segmentCount = timelineDuration / segmentDuration;
|
||||
@ -158,46 +136,19 @@ export function EventReviewTimeline({
|
||||
}, [isDragging, onHandlebarDraggingChange]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={timelineRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onTouchMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onTouchEnd={handleMouseUp}
|
||||
className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
|
||||
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
|
||||
}`}
|
||||
<ReviewTimeline
|
||||
timelineRef={timelineRef}
|
||||
scrollTimeRef={scrollTimeRef}
|
||||
handlebarTimeRef={handlebarTimeRef}
|
||||
handleMouseMove={handleMouseMove}
|
||||
handleMouseUp={handleMouseUp}
|
||||
handleMouseDown={handleMouseDown}
|
||||
segmentDuration={segmentDuration}
|
||||
showHandlebar={showHandlebar}
|
||||
isDragging={isDragging}
|
||||
>
|
||||
<div className="flex flex-col">{segments}</div>
|
||||
{showHandlebar && (
|
||||
<div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar">
|
||||
<div
|
||||
className="flex items-center justify-center touch-none select-none"
|
||||
onMouseDown={handleMouseDown}
|
||||
onTouchStart={handleMouseDown}
|
||||
>
|
||||
<div
|
||||
ref={scrollTimeRef}
|
||||
className={`relative w-full ${
|
||||
isDragging ? "cursor-grabbing" : "cursor-grab"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`bg-destructive rounded-full mx-auto ${
|
||||
segmentDuration < 60 ? "w-16 md:w-20" : "w-12 md:w-16"
|
||||
} h-5 flex items-center justify-center`}
|
||||
>
|
||||
<div
|
||||
ref={handlebarTimeRef}
|
||||
className="text-white text-[8px] md:text-xs z-10"
|
||||
></div>
|
||||
</div>
|
||||
<div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{segments}
|
||||
</ReviewTimeline>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { useSegmentUtils } from "@/hooks/use-segment-utils";
|
||||
import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
|
||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import React, {
|
||||
RefObject,
|
||||
@ -9,7 +9,6 @@ import React, {
|
||||
useMemo,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
import {
|
||||
HoverCard,
|
||||
HoverCardContent,
|
||||
@ -17,6 +16,7 @@ import {
|
||||
} from "../ui/hover-card";
|
||||
import { HoverCardPortal } from "@radix-ui/react-hover-card";
|
||||
import scrollIntoView from "scroll-into-view-if-needed";
|
||||
import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
|
||||
|
||||
type EventSegmentProps = {
|
||||
events: ReviewSegment[];
|
||||
@ -30,105 +30,6 @@ type EventSegmentProps = {
|
||||
contentRef: RefObject<HTMLDivElement>;
|
||||
};
|
||||
|
||||
type MinimapSegmentProps = {
|
||||
isFirstSegmentInMinimap: boolean;
|
||||
isLastSegmentInMinimap: boolean;
|
||||
alignedMinimapStartTime: number;
|
||||
alignedMinimapEndTime: number;
|
||||
firstMinimapSegmentRef: React.MutableRefObject<HTMLDivElement | null>;
|
||||
};
|
||||
|
||||
type TickSegmentProps = {
|
||||
timestamp: Date;
|
||||
timestampSpread: number;
|
||||
};
|
||||
|
||||
type TimestampSegmentProps = {
|
||||
isFirstSegmentInMinimap: boolean;
|
||||
isLastSegmentInMinimap: boolean;
|
||||
timestamp: Date;
|
||||
timestampSpread: number;
|
||||
segmentKey: number;
|
||||
};
|
||||
|
||||
function MinimapBounds({
|
||||
isFirstSegmentInMinimap,
|
||||
isLastSegmentInMinimap,
|
||||
alignedMinimapStartTime,
|
||||
alignedMinimapEndTime,
|
||||
firstMinimapSegmentRef,
|
||||
}: MinimapSegmentProps) {
|
||||
return (
|
||||
<>
|
||||
{isFirstSegmentInMinimap && (
|
||||
<div
|
||||
className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8"
|
||||
ref={firstMinimapSegmentRef}
|
||||
>
|
||||
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
...(isDesktop && { month: "short", day: "2-digit" }),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLastSegmentInMinimap && (
|
||||
<div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px]">
|
||||
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
...(isDesktop && { month: "short", day: "2-digit" }),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
|
||||
return (
|
||||
<div className="absolute">
|
||||
<div className="flex items-end content-end w-[12px] h-2">
|
||||
<div
|
||||
className={`h-0.5 ${
|
||||
timestamp.getMinutes() % timestampSpread === 0 &&
|
||||
timestamp.getSeconds() === 0
|
||||
? "w-[12px] bg-gray-400"
|
||||
: "w-[8px] bg-gray-600"
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Timestamp({
|
||||
isFirstSegmentInMinimap,
|
||||
isLastSegmentInMinimap,
|
||||
timestamp,
|
||||
timestampSpread,
|
||||
segmentKey,
|
||||
}: TimestampSegmentProps) {
|
||||
return (
|
||||
<div className="absolute left-[15px] top-[1px] h-2 z-10">
|
||||
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
|
||||
<div
|
||||
key={`${segmentKey}_timestamp`}
|
||||
className="text-[8px] text-gray-400"
|
||||
>
|
||||
{timestamp.getMinutes() % timestampSpread === 0 &&
|
||||
timestamp.getSeconds() === 0 &&
|
||||
timestamp.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function EventSegment({
|
||||
events,
|
||||
segmentTime,
|
||||
@ -147,7 +48,7 @@ export function EventSegment({
|
||||
shouldShowRoundedCorners,
|
||||
getEventStart,
|
||||
getEventThumbnail,
|
||||
} = useSegmentUtils(segmentDuration, events, severityType);
|
||||
} = useEventSegmentUtils(segmentDuration, events, severityType);
|
||||
|
||||
const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
|
||||
events,
|
||||
@ -294,11 +195,7 @@ export function EventSegment({
|
||||
}, [startTimestamp]);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={segmentKey}
|
||||
className={segmentClasses}
|
||||
data-segment-time={new Date(segmentTime * 1000)}
|
||||
>
|
||||
<div key={segmentKey} className={segmentClasses}>
|
||||
<MinimapBounds
|
||||
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
|
||||
isLastSegmentInMinimap={isLastSegmentInMinimap}
|
||||
@ -317,7 +214,7 @@ export function EventSegment({
|
||||
segmentKey={segmentKey}
|
||||
/>
|
||||
|
||||
{severity.map((severityValue, index) => (
|
||||
{severity.map((severityValue: number, index: number) => (
|
||||
<React.Fragment key={index}>
|
||||
{severityValue === displaySeverityType && (
|
||||
<HoverCard openDelay={200} closeDelay={100}>
|
||||
|
||||
157
web/src/components/timeline/MotionReviewTimeline.tsx
Normal file
157
web/src/components/timeline/MotionReviewTimeline.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import useDraggableHandler from "@/hooks/use-handle-dragging";
|
||||
import {
|
||||
useEffect,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
RefObject,
|
||||
} from "react";
|
||||
import MotionSegment from "./MotionSegment";
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import ReviewTimeline from "./ReviewTimeline";
|
||||
import { MockMotionData } from "@/pages/UIPlayground";
|
||||
|
||||
export type MotionReviewTimelineProps = {
|
||||
segmentDuration: number;
|
||||
timestampSpread: number;
|
||||
timelineStart: number;
|
||||
timelineEnd: number;
|
||||
showHandlebar?: boolean;
|
||||
handlebarTime?: number;
|
||||
setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
|
||||
showMinimap?: boolean;
|
||||
minimapStartTime?: number;
|
||||
minimapEndTime?: number;
|
||||
events: ReviewSegment[];
|
||||
motion_events: MockMotionData[];
|
||||
severityType: ReviewSeverity;
|
||||
contentRef: RefObject<HTMLDivElement>;
|
||||
onHandlebarDraggingChange?: (isDragging: boolean) => void;
|
||||
};
|
||||
|
||||
export function MotionReviewTimeline({
|
||||
segmentDuration,
|
||||
timestampSpread,
|
||||
timelineStart,
|
||||
timelineEnd,
|
||||
showHandlebar = false,
|
||||
handlebarTime,
|
||||
setHandlebarTime,
|
||||
showMinimap = false,
|
||||
minimapStartTime,
|
||||
minimapEndTime,
|
||||
events,
|
||||
motion_events,
|
||||
contentRef,
|
||||
onHandlebarDraggingChange,
|
||||
}: MotionReviewTimelineProps) {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const scrollTimeRef = useRef<HTMLDivElement>(null);
|
||||
const timelineRef = useRef<HTMLDivElement>(null);
|
||||
const handlebarTimeRef = useRef<HTMLDivElement>(null);
|
||||
const timelineDuration = useMemo(
|
||||
() => timelineStart - timelineEnd,
|
||||
[timelineEnd, timelineStart],
|
||||
);
|
||||
|
||||
const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
|
||||
events,
|
||||
segmentDuration,
|
||||
);
|
||||
|
||||
const { handleMouseDown, handleMouseUp, handleMouseMove } =
|
||||
useDraggableHandler({
|
||||
contentRef,
|
||||
timelineRef,
|
||||
scrollTimeRef,
|
||||
alignStartDateToTimeline,
|
||||
alignEndDateToTimeline,
|
||||
segmentDuration,
|
||||
showHandlebar,
|
||||
handlebarTime,
|
||||
setHandlebarTime,
|
||||
timelineDuration,
|
||||
timelineStart,
|
||||
isDragging,
|
||||
setIsDragging,
|
||||
handlebarTimeRef,
|
||||
});
|
||||
|
||||
// Generate segments for the timeline
|
||||
const generateSegments = useCallback(() => {
|
||||
const segmentCount = timelineDuration / segmentDuration;
|
||||
const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
|
||||
|
||||
return Array.from({ length: segmentCount }, (_, index) => {
|
||||
const segmentTime = segmentAlignedTime - index * segmentDuration;
|
||||
|
||||
return (
|
||||
<MotionSegment
|
||||
key={segmentTime}
|
||||
events={events}
|
||||
motion_events={motion_events}
|
||||
segmentDuration={segmentDuration}
|
||||
segmentTime={segmentTime}
|
||||
timestampSpread={timestampSpread}
|
||||
showMinimap={showMinimap}
|
||||
minimapStartTime={minimapStartTime}
|
||||
minimapEndTime={minimapEndTime}
|
||||
contentRef={contentRef}
|
||||
/>
|
||||
);
|
||||
});
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
segmentDuration,
|
||||
timestampSpread,
|
||||
timelineStart,
|
||||
timelineDuration,
|
||||
showMinimap,
|
||||
minimapStartTime,
|
||||
minimapEndTime,
|
||||
events,
|
||||
]);
|
||||
|
||||
const segments = useMemo(
|
||||
() => generateSegments(),
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[
|
||||
segmentDuration,
|
||||
timestampSpread,
|
||||
timelineStart,
|
||||
timelineDuration,
|
||||
showMinimap,
|
||||
minimapStartTime,
|
||||
minimapEndTime,
|
||||
events,
|
||||
],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (onHandlebarDraggingChange) {
|
||||
onHandlebarDraggingChange(isDragging);
|
||||
}
|
||||
}, [isDragging, onHandlebarDraggingChange]);
|
||||
|
||||
return (
|
||||
<ReviewTimeline
|
||||
timelineRef={timelineRef}
|
||||
scrollTimeRef={scrollTimeRef}
|
||||
handlebarTimeRef={handlebarTimeRef}
|
||||
handleMouseMove={handleMouseMove}
|
||||
handleMouseUp={handleMouseUp}
|
||||
handleMouseDown={handleMouseDown}
|
||||
segmentDuration={segmentDuration}
|
||||
showHandlebar={showHandlebar}
|
||||
isDragging={isDragging}
|
||||
>
|
||||
{segments}
|
||||
</ReviewTimeline>
|
||||
);
|
||||
}
|
||||
|
||||
export default MotionReviewTimeline;
|
||||
307
web/src/components/timeline/MotionSegment.tsx
Normal file
307
web/src/components/timeline/MotionSegment.tsx
Normal file
@ -0,0 +1,307 @@
|
||||
import { useEventUtils } from "@/hooks/use-event-utils";
|
||||
import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
|
||||
import { ReviewSegment } from "@/types/review";
|
||||
import React, {
|
||||
RefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from "react";
|
||||
import scrollIntoView from "scroll-into-view-if-needed";
|
||||
import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
|
||||
import { MockMotionData } from "@/pages/UIPlayground";
|
||||
import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
type MotionSegmentProps = {
|
||||
events: ReviewSegment[];
|
||||
motion_events: MockMotionData[];
|
||||
segmentTime: number;
|
||||
segmentDuration: number;
|
||||
timestampSpread: number;
|
||||
showMinimap: boolean;
|
||||
minimapStartTime?: number;
|
||||
minimapEndTime?: number;
|
||||
contentRef: RefObject<HTMLDivElement>;
|
||||
};
|
||||
|
||||
export function MotionSegment({
|
||||
events,
|
||||
motion_events,
|
||||
segmentTime,
|
||||
segmentDuration,
|
||||
timestampSpread,
|
||||
showMinimap,
|
||||
minimapStartTime,
|
||||
minimapEndTime,
|
||||
contentRef,
|
||||
}: MotionSegmentProps) {
|
||||
const severityType = "all";
|
||||
const {
|
||||
getSeverity,
|
||||
getReviewed,
|
||||
displaySeverityType,
|
||||
shouldShowRoundedCorners,
|
||||
getEventStart,
|
||||
} = useEventSegmentUtils(segmentDuration, events, severityType);
|
||||
|
||||
const {
|
||||
getMotionSegmentValue,
|
||||
getAudioSegmentValue,
|
||||
interpolateMotionAudioData,
|
||||
} = useMotionSegmentUtils(segmentDuration, motion_events);
|
||||
|
||||
const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
|
||||
events,
|
||||
segmentDuration,
|
||||
);
|
||||
|
||||
const severity = useMemo(
|
||||
() => getSeverity(segmentTime, displaySeverityType),
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[getSeverity, segmentTime],
|
||||
);
|
||||
|
||||
const reviewed = useMemo(
|
||||
() => getReviewed(segmentTime),
|
||||
[getReviewed, segmentTime],
|
||||
);
|
||||
|
||||
const { roundTopSecondary, roundBottomSecondary } = useMemo(
|
||||
() => shouldShowRoundedCorners(segmentTime),
|
||||
[shouldShowRoundedCorners, segmentTime],
|
||||
);
|
||||
|
||||
const startTimestamp = useMemo(() => {
|
||||
const eventStart = getEventStart(segmentTime);
|
||||
if (eventStart) {
|
||||
return alignStartDateToTimeline(eventStart);
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getEventStart, segmentTime]);
|
||||
|
||||
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
|
||||
const segmentKey = useMemo(() => segmentTime, [segmentTime]);
|
||||
|
||||
const maxSegmentWidth = useMemo(() => {
|
||||
return isMobile ? 15 : 25;
|
||||
}, []);
|
||||
|
||||
const alignedMinimapStartTime = useMemo(
|
||||
() => alignStartDateToTimeline(minimapStartTime ?? 0),
|
||||
[minimapStartTime, alignStartDateToTimeline],
|
||||
);
|
||||
const alignedMinimapEndTime = useMemo(
|
||||
() => alignEndDateToTimeline(minimapEndTime ?? 0),
|
||||
[minimapEndTime, alignEndDateToTimeline],
|
||||
);
|
||||
|
||||
const isInMinimapRange = useMemo(() => {
|
||||
return (
|
||||
showMinimap &&
|
||||
segmentTime >= alignedMinimapStartTime &&
|
||||
segmentTime < alignedMinimapEndTime
|
||||
);
|
||||
}, [
|
||||
showMinimap,
|
||||
alignedMinimapStartTime,
|
||||
alignedMinimapEndTime,
|
||||
segmentTime,
|
||||
]);
|
||||
|
||||
const isFirstSegmentInMinimap = useMemo(() => {
|
||||
return showMinimap && segmentTime === alignedMinimapStartTime;
|
||||
}, [showMinimap, segmentTime, alignedMinimapStartTime]);
|
||||
|
||||
const isLastSegmentInMinimap = useMemo(() => {
|
||||
return showMinimap && segmentTime === alignedMinimapEndTime;
|
||||
}, [showMinimap, segmentTime, alignedMinimapEndTime]);
|
||||
|
||||
const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Check if the first segment is out of view
|
||||
const firstSegment = firstMinimapSegmentRef.current;
|
||||
if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
|
||||
scrollIntoView(firstSegment, {
|
||||
scrollMode: "if-needed",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
|
||||
|
||||
const segmentClasses = `h-2 relative w-full ${
|
||||
showMinimap
|
||||
? isInMinimapRange
|
||||
? "bg-secondary-highlight"
|
||||
: isLastSegmentInMinimap
|
||||
? ""
|
||||
: "opacity-70"
|
||||
: ""
|
||||
} ${
|
||||
isFirstSegmentInMinimap || isLastSegmentInMinimap
|
||||
? "relative h-2 border-b-2 border-gray-500"
|
||||
: ""
|
||||
}`;
|
||||
|
||||
const severityColors: { [key: number]: string } = {
|
||||
1: reviewed
|
||||
? "from-severity_motion-dimmed/50 to-severity_motion/50"
|
||||
: "from-severity_motion-dimmed to-severity_motion",
|
||||
2: reviewed
|
||||
? "from-severity_detection-dimmed/50 to-severity_detection/50"
|
||||
: "from-severity_detection-dimmed to-severity_detection",
|
||||
3: reviewed
|
||||
? "from-severity_alert-dimmed/50 to-severity_alert/50"
|
||||
: "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) {
|
||||
scrollIntoView(element, {
|
||||
scrollMode: "if-needed",
|
||||
behavior: "smooth",
|
||||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [startTimestamp]);
|
||||
|
||||
return (
|
||||
<div key={segmentKey} className={segmentClasses}>
|
||||
<MinimapBounds
|
||||
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
|
||||
isLastSegmentInMinimap={isLastSegmentInMinimap}
|
||||
alignedMinimapStartTime={alignedMinimapStartTime}
|
||||
alignedMinimapEndTime={alignedMinimapEndTime}
|
||||
firstMinimapSegmentRef={firstMinimapSegmentRef}
|
||||
/>
|
||||
|
||||
<Tick timestamp={timestamp} timestampSpread={timestampSpread} />
|
||||
|
||||
<Timestamp
|
||||
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
|
||||
isLastSegmentInMinimap={isLastSegmentInMinimap}
|
||||
timestamp={timestamp}
|
||||
timestampSpread={timestampSpread}
|
||||
segmentKey={segmentKey}
|
||||
/>
|
||||
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
|
||||
<div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]">
|
||||
<div className="w-[10px] md:w-[20px] flex justify-end">
|
||||
<div
|
||||
key={`${segmentKey}_motion_data_1`}
|
||||
className={`h-[2px] rounded-full bg-motion_review`}
|
||||
onClick={segmentClick}
|
||||
style={{
|
||||
width:
|
||||
maxSegmentWidth -
|
||||
interpolateMotionAudioData(
|
||||
getMotionSegmentValue(segmentTime - segmentDuration / 2),
|
||||
0,
|
||||
100,
|
||||
1,
|
||||
maxSegmentWidth,
|
||||
),
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-[10px] md:w-[20px]">
|
||||
<div
|
||||
key={`${segmentKey}_audio_data_1`}
|
||||
className={`h-[2px] rounded-full bg-audio_review`}
|
||||
onClick={segmentClick}
|
||||
style={{
|
||||
width: interpolateMotionAudioData(
|
||||
getAudioSegmentValue(segmentTime - segmentDuration / 2),
|
||||
-100,
|
||||
0,
|
||||
1,
|
||||
maxSegmentWidth,
|
||||
),
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row justify-center w-[20px] md:w-[40px]">
|
||||
<div className="w-[10px] md:w-[20px] flex justify-end">
|
||||
<div
|
||||
key={`${segmentKey}_motion_data_2`}
|
||||
className={`h-[2px] rounded-full bg-motion_review`}
|
||||
onClick={segmentClick}
|
||||
style={{
|
||||
width:
|
||||
maxSegmentWidth -
|
||||
interpolateMotionAudioData(
|
||||
getMotionSegmentValue(segmentTime),
|
||||
0,
|
||||
100,
|
||||
1,
|
||||
maxSegmentWidth,
|
||||
),
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-[10px] md:w-[20px]">
|
||||
<div
|
||||
key={`${segmentKey}_audio_data_2`}
|
||||
className={`h-[2px] rounded-full bg-audio_review`}
|
||||
onClick={segmentClick}
|
||||
style={{
|
||||
width: interpolateMotionAudioData(
|
||||
getAudioSegmentValue(segmentTime),
|
||||
-100,
|
||||
0,
|
||||
1,
|
||||
maxSegmentWidth,
|
||||
),
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{severity.map((severityValue: number, index: number) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className="absolute right-0 h-2 z-10">
|
||||
<div
|
||||
key={`${segmentKey}_${index}_secondary_data`}
|
||||
className={`
|
||||
w-1 h-2 bg-gradient-to-r
|
||||
${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
|
||||
${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
|
||||
${severityColors[severityValue]}
|
||||
`}
|
||||
></div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MotionSegment;
|
||||
84
web/src/components/timeline/ReviewTimeline.tsx
Normal file
84
web/src/components/timeline/ReviewTimeline.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import { ReactNode, RefObject } from "react";
|
||||
|
||||
export type ReviewTimelineProps = {
|
||||
timelineRef: RefObject<HTMLDivElement>;
|
||||
scrollTimeRef: RefObject<HTMLDivElement>;
|
||||
handlebarTimeRef: RefObject<HTMLDivElement>;
|
||||
handleMouseMove: (
|
||||
e:
|
||||
| React.MouseEvent<HTMLDivElement, MouseEvent>
|
||||
| React.TouchEvent<HTMLDivElement>,
|
||||
) => void;
|
||||
handleMouseUp: (
|
||||
e:
|
||||
| React.MouseEvent<HTMLDivElement, MouseEvent>
|
||||
| React.TouchEvent<HTMLDivElement>,
|
||||
) => void;
|
||||
handleMouseDown: (
|
||||
e:
|
||||
| React.MouseEvent<HTMLDivElement, MouseEvent>
|
||||
| React.TouchEvent<HTMLDivElement>,
|
||||
) => void;
|
||||
segmentDuration: number;
|
||||
showHandlebar: boolean;
|
||||
isDragging: boolean;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function ReviewTimeline({
|
||||
timelineRef,
|
||||
scrollTimeRef,
|
||||
handlebarTimeRef,
|
||||
handleMouseMove,
|
||||
handleMouseUp,
|
||||
handleMouseDown,
|
||||
segmentDuration,
|
||||
showHandlebar = false,
|
||||
isDragging,
|
||||
children,
|
||||
}: ReviewTimelineProps) {
|
||||
return (
|
||||
<div
|
||||
ref={timelineRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onTouchMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onTouchEnd={handleMouseUp}
|
||||
className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
|
||||
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col">{children}</div>
|
||||
{showHandlebar && (
|
||||
<div className="absolute left-0 top-0 z-20 w-full" role="scrollbar">
|
||||
<div
|
||||
className="flex items-center justify-center touch-none select-none"
|
||||
onMouseDown={handleMouseDown}
|
||||
onTouchStart={handleMouseDown}
|
||||
>
|
||||
<div
|
||||
ref={scrollTimeRef}
|
||||
className={`relative w-full ${
|
||||
isDragging ? "cursor-grabbing" : "cursor-grab"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`bg-destructive rounded-full mx-auto ${
|
||||
segmentDuration < 60 ? "w-14 md:w-20" : "w-12 md:w-16"
|
||||
} h-5 flex items-center justify-center`}
|
||||
>
|
||||
<div
|
||||
ref={handlebarTimeRef}
|
||||
className="text-white text-[8px] md:text-xs z-10"
|
||||
></div>
|
||||
</div>
|
||||
<div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReviewTimeline;
|
||||
100
web/src/components/timeline/segment-metadata.tsx
Normal file
100
web/src/components/timeline/segment-metadata.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import { isDesktop } from "react-device-detect";
|
||||
|
||||
type MinimapSegmentProps = {
|
||||
isFirstSegmentInMinimap: boolean;
|
||||
isLastSegmentInMinimap: boolean;
|
||||
alignedMinimapStartTime: number;
|
||||
alignedMinimapEndTime: number;
|
||||
firstMinimapSegmentRef: React.MutableRefObject<HTMLDivElement | null>;
|
||||
};
|
||||
|
||||
type TickSegmentProps = {
|
||||
timestamp: Date;
|
||||
timestampSpread: number;
|
||||
};
|
||||
|
||||
type TimestampSegmentProps = {
|
||||
isFirstSegmentInMinimap: boolean;
|
||||
isLastSegmentInMinimap: boolean;
|
||||
timestamp: Date;
|
||||
timestampSpread: number;
|
||||
segmentKey: number;
|
||||
};
|
||||
|
||||
export function MinimapBounds({
|
||||
isFirstSegmentInMinimap,
|
||||
isLastSegmentInMinimap,
|
||||
alignedMinimapStartTime,
|
||||
alignedMinimapEndTime,
|
||||
firstMinimapSegmentRef,
|
||||
}: MinimapSegmentProps) {
|
||||
return (
|
||||
<>
|
||||
{isFirstSegmentInMinimap && (
|
||||
<div
|
||||
className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8"
|
||||
ref={firstMinimapSegmentRef}
|
||||
>
|
||||
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
...(isDesktop && { month: "short", day: "2-digit" }),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLastSegmentInMinimap && (
|
||||
<div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px]">
|
||||
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
...(isDesktop && { month: "short", day: "2-digit" }),
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
|
||||
return (
|
||||
<div className="absolute">
|
||||
<div className="flex items-end content-end w-[12px] h-2">
|
||||
<div
|
||||
className={`h-0.5 ${
|
||||
timestamp.getMinutes() % timestampSpread === 0 &&
|
||||
timestamp.getSeconds() === 0
|
||||
? "w-[12px] bg-gray-400"
|
||||
: "w-[8px] bg-gray-600"
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Timestamp({
|
||||
isFirstSegmentInMinimap,
|
||||
isLastSegmentInMinimap,
|
||||
timestamp,
|
||||
timestampSpread,
|
||||
segmentKey,
|
||||
}: TimestampSegmentProps) {
|
||||
return (
|
||||
<div className="absolute left-[15px] top-[1px] h-2 z-10">
|
||||
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
|
||||
<div
|
||||
key={`${segmentKey}_timestamp`}
|
||||
className="text-[8px] text-gray-400"
|
||||
>
|
||||
{timestamp.getMinutes() % timestampSpread === 0 &&
|
||||
timestamp.getSeconds() === 0 &&
|
||||
timestamp.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { ReviewSegment } from "@/types/review";
|
||||
|
||||
export const useSegmentUtils = (
|
||||
export const useEventSegmentUtils = (
|
||||
segmentDuration: number,
|
||||
events: ReviewSegment[],
|
||||
severityType: string,
|
||||
76
web/src/hooks/use-motion-segment-utils.ts
Normal file
76
web/src/hooks/use-motion-segment-utils.ts
Normal file
@ -0,0 +1,76 @@
|
||||
import { useCallback } from "react";
|
||||
import { MockMotionData } from "@/pages/UIPlayground";
|
||||
|
||||
export const useMotionSegmentUtils = (
|
||||
segmentDuration: number,
|
||||
motion_events: MockMotionData[],
|
||||
) => {
|
||||
const getSegmentStart = useCallback(
|
||||
(time: number): number => {
|
||||
return Math.floor(time / segmentDuration) * segmentDuration;
|
||||
},
|
||||
[segmentDuration],
|
||||
);
|
||||
|
||||
const getSegmentEnd = useCallback(
|
||||
(time: number | undefined): number => {
|
||||
if (time) {
|
||||
return (
|
||||
Math.floor(time / segmentDuration) * segmentDuration + segmentDuration
|
||||
);
|
||||
} else {
|
||||
return Date.now() / 1000 + segmentDuration;
|
||||
}
|
||||
},
|
||||
[segmentDuration],
|
||||
);
|
||||
|
||||
const interpolateMotionAudioData = useCallback(
|
||||
(
|
||||
value: number,
|
||||
oldMin: number,
|
||||
oldMax: number,
|
||||
newMin: number,
|
||||
newMax: number,
|
||||
): number => {
|
||||
return (
|
||||
((value - oldMin) / (oldMax - oldMin)) * (newMax - newMin) + newMin
|
||||
);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const getMotionSegmentValue = useCallback(
|
||||
(time: number): number => {
|
||||
const matchingEvent = motion_events.find((event) => {
|
||||
return (
|
||||
time >= getSegmentStart(event.start_time) &&
|
||||
time < getSegmentEnd(event.end_time)
|
||||
);
|
||||
});
|
||||
|
||||
return matchingEvent?.motionValue ?? 0;
|
||||
},
|
||||
[motion_events, getSegmentStart, getSegmentEnd],
|
||||
);
|
||||
|
||||
const getAudioSegmentValue = useCallback(
|
||||
(time: number): number => {
|
||||
const matchingEvent = motion_events.find((event) => {
|
||||
return (
|
||||
time >= getSegmentStart(event.start_time) &&
|
||||
time < getSegmentEnd(event.end_time)
|
||||
);
|
||||
});
|
||||
|
||||
return matchingEvent?.audioValue ?? 0;
|
||||
},
|
||||
[motion_events, getSegmentStart, getSegmentEnd],
|
||||
);
|
||||
|
||||
return {
|
||||
getMotionSegmentValue,
|
||||
getAudioSegmentValue,
|
||||
interpolateMotionAudioData,
|
||||
};
|
||||
};
|
||||
@ -7,6 +7,16 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||
import { ReviewData, ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import CameraActivityIndicator from "@/components/indicators/CameraActivityIndicator";
|
||||
import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
// Color data
|
||||
const colors = [
|
||||
@ -43,6 +53,39 @@ function ColorSwatch({ name, value }: { name: string; value: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
export type MockMotionData = {
|
||||
start_time: number;
|
||||
end_time: number;
|
||||
motionValue: number;
|
||||
audioValue: number;
|
||||
};
|
||||
|
||||
function generateRandomMotionAudioData(): MockMotionData[] {
|
||||
const now = new Date();
|
||||
const endTime = now.getTime() / 1000;
|
||||
const startTime = endTime - 24 * 60 * 60; // 24 hours ago
|
||||
const interval = 30; // 30 seconds
|
||||
|
||||
const data = [];
|
||||
for (
|
||||
let startTimestamp = startTime;
|
||||
startTimestamp < endTime;
|
||||
startTimestamp += interval
|
||||
) {
|
||||
const endTimestamp = startTimestamp + interval;
|
||||
const motionValue = Math.floor(Math.random() * 101); // Random number between 0 and 100
|
||||
const audioValue = Math.random() * -100; // Random negative value between -100 and 0
|
||||
data.push({
|
||||
start_time: startTimestamp,
|
||||
end_time: endTimestamp,
|
||||
motionValue,
|
||||
audioValue,
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const generateRandomEvent = (): ReviewSegment => {
|
||||
const start_time =
|
||||
Math.floor(Date.now() / 1000) - 10800 - Math.random() * 60 * 60;
|
||||
@ -83,6 +126,7 @@ function UIPlayground() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
|
||||
const [mockMotionData, setMockMotionData] = useState<MockMotionData[]>([]);
|
||||
const [handlebarTime, setHandlebarTime] = useState(
|
||||
Math.floor(Date.now() / 1000) - 15 * 60,
|
||||
);
|
||||
@ -90,6 +134,7 @@ function UIPlayground() {
|
||||
useMemo(() => {
|
||||
const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
|
||||
setMockEvents(initialEvents);
|
||||
setMockMotionData(generateRandomMotionAudioData());
|
||||
}, []);
|
||||
|
||||
// Calculate minimap start and end times based on events
|
||||
@ -142,6 +187,8 @@ function UIPlayground() {
|
||||
setIsDragging(dragging);
|
||||
};
|
||||
|
||||
const [isEventsReviewTimeline, setIsEventsReviewTimeline] = useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-full">
|
||||
@ -175,6 +222,28 @@ function UIPlayground() {
|
||||
<p className="text-small">
|
||||
Handlebar is dragging: {isDragging ? "yes" : "no"}
|
||||
</p>
|
||||
<div className="my-4">
|
||||
<Heading as="h4">Timeline type</Heading>
|
||||
<Select
|
||||
defaultValue={isEventsReviewTimeline ? "event" : "motion"}
|
||||
onValueChange={(checked) => {
|
||||
setIsEventsReviewTimeline(checked == "event");
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select a timeline" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Timeline Type</SelectLabel>
|
||||
<SelectItem value="event">Event Review</SelectItem>
|
||||
<SelectItem value="motion">
|
||||
Motion/Audio Review
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-[40px] my-4">
|
||||
<CameraActivityIndicator />
|
||||
</div>
|
||||
@ -215,23 +284,44 @@ function UIPlayground() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-[100px] overflow-y-auto no-scrollbar">
|
||||
<EventReviewTimeline
|
||||
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
|
||||
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
|
||||
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
|
||||
timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
|
||||
showHandlebar // show / hide the handlebar
|
||||
handlebarTime={handlebarTime} // set the time of the handlebar
|
||||
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
|
||||
onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
|
||||
showMinimap // show / hide the minimap
|
||||
minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
|
||||
minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
|
||||
events={mockEvents} // events, including new has_been_reviewed and severity properties
|
||||
severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
|
||||
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
|
||||
/>
|
||||
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
|
||||
{!isEventsReviewTimeline && (
|
||||
<MotionReviewTimeline
|
||||
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
|
||||
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
|
||||
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
|
||||
timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
|
||||
showHandlebar // show / hide the handlebar
|
||||
handlebarTime={handlebarTime} // set the time of the handlebar
|
||||
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
|
||||
onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
|
||||
showMinimap // show / hide the minimap
|
||||
minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
|
||||
minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
|
||||
events={mockEvents} // events, including new has_been_reviewed and severity properties
|
||||
motion_events={mockMotionData}
|
||||
severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
|
||||
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
|
||||
/>
|
||||
)}
|
||||
{isEventsReviewTimeline && (
|
||||
<EventReviewTimeline
|
||||
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
|
||||
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
|
||||
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
|
||||
timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
|
||||
showHandlebar // show / hide the handlebar
|
||||
handlebarTime={handlebarTime} // set the time of the handlebar
|
||||
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
|
||||
onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
|
||||
showMinimap // show / hide the minimap
|
||||
minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
|
||||
minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
|
||||
events={mockEvents} // events, including new has_been_reviewed and severity properties
|
||||
severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
|
||||
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -91,6 +91,12 @@ module.exports = {
|
||||
DEFAULT: "hsl(var(--severity_motion))",
|
||||
dimmed: "hsl(var(--severity_motion_dimmed))",
|
||||
},
|
||||
motion_review: {
|
||||
DEFAULT: "hsl(var(--motion_review))",
|
||||
},
|
||||
audio_review: {
|
||||
DEFAULT: "hsl(var(--audio_review))",
|
||||
},
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
|
||||
@ -73,6 +73,12 @@
|
||||
|
||||
--severity_motion: var(--yellow-400);
|
||||
--severity_motion_dimmed: var(--yellow-200);
|
||||
|
||||
--motion_review: hsl(44, 94%, 50%);
|
||||
--motion_review: 44, 94%, 50%;
|
||||
|
||||
--audio_review: hsl(228, 94%, 67%);
|
||||
--audio_review: 228, 94%, 67%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user