Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

UI changes (#10651)

Browse Source 
* Check if event time is in segment

* conditionally render minimap bounds for event segments
This commit is contained in:
Josh Hawkins 2024-03-24 12:39:28 -05:00 committed by GitHub
parent 0fda7147be
commit 37f60f7140
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -205,13 +205,15 @@ export function EventSegment({
onClick={segmentClick} onClick={segmentClick}
onTouchEnd={(event) => handleTouchStart(event, segmentClick)} onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
> >
<MinimapBounds {showMinimap && (
isFirstSegmentInMinimap={isFirstSegmentInMinimap} <MinimapBounds
isLastSegmentInMinimap={isLastSegmentInMinimap} isFirstSegmentInMinimap={isFirstSegmentInMinimap}
alignedMinimapStartTime={alignedMinimapStartTime} isLastSegmentInMinimap={isLastSegmentInMinimap}
alignedMinimapEndTime={alignedMinimapEndTime} alignedMinimapStartTime={alignedMinimapStartTime}
firstMinimapSegmentRef={firstMinimapSegmentRef} alignedMinimapEndTime={alignedMinimapEndTime}
/> firstMinimapSegmentRef={firstMinimapSegmentRef}
/>
)}
<Tick timestamp={timestamp} timestampSpread={timestampSpread} /> <Tick timestamp={timestamp} timestampSpread={timestampSpread} />

16
web/src/components/timeline/MotionSegment.tsx
View File

@ -196,13 +196,15 @@ export function MotionSegment({
> >
{!motionOnly && ( {!motionOnly && (
<> <>
<MinimapBounds {showMinimap && (
isFirstSegmentInMinimap={isFirstSegmentInMinimap} <MinimapBounds
isLastSegmentInMinimap={isLastSegmentInMinimap} isFirstSegmentInMinimap={isFirstSegmentInMinimap}
alignedMinimapStartTime={alignedMinimapStartTime} isLastSegmentInMinimap={isLastSegmentInMinimap}
alignedMinimapEndTime={alignedMinimapEndTime} alignedMinimapStartTime={alignedMinimapStartTime}
firstMinimapSegmentRef={firstMinimapSegmentRef} alignedMinimapEndTime={alignedMinimapEndTime}
/> firstMinimapSegmentRef={firstMinimapSegmentRef}
/>
)}
<Tick <Tick
key={`${segmentKey}_tick`} key={`${segmentKey}_tick`}

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

@ -46,24 +46,33 @@ export const useEventSegmentUtils = (
const getSeverity = useCallback( const getSeverity = useCallback(
(time: number, displaySeverityType: number): number[] => { (time: number, displaySeverityType: number): number[] => {
const activeEvents = events?.filter((event) => { let highestSeverityValue = 0;
let highestOtherSeverityValue = 0;
let hasDisplaySeverityType = false;
for (const event of events || []) {
const segmentStart = getSegmentStart(event.start_time); const segmentStart = getSegmentStart(event.start_time);
const segmentEnd = getSegmentEnd(event.end_time); const segmentEnd = getSegmentEnd(event.end_time);
return time >= segmentStart && time < segmentEnd;
});
if (activeEvents?.length === 0) return [0]; if (time >= segmentStart && time < segmentEnd) {
const severityValues = activeEvents.map((event) => const severity = mapSeverityToNumber(event.severity);
mapSeverityToNumber(event.severity),
);
const highestSeverityValue = Math.max(...severityValues);
if (severityValues.includes(displaySeverityType)) { if (severity === displaySeverityType) {
const otherSeverityValues = severityValues.filter( hasDisplaySeverityType = true;
(severity) => severity !== displaySeverityType, highestOtherSeverityValue = Math.max(
); highestOtherSeverityValue,
const highestOtherSeverityValue = Math.max(...otherSeverityValues); highestSeverityValue,
);
} else {
highestSeverityValue = Math.max(highestSeverityValue, severity);
}
}
}
if (hasDisplaySeverityType) {
return [displaySeverityType, highestOtherSeverityValue]; return [displaySeverityType, highestOtherSeverityValue];
} else if (highestSeverityValue === 0) {
return [0];
} else { } else {
return [highestSeverityValue]; return [highestSeverityValue];
} }

10
web/src/pages/UIPlayground.tsx
View File

@ -89,7 +89,7 @@ function generateRandomMotionAudioData(): MotionData[] {
const generateRandomEvent = (): ReviewSegment => { const generateRandomEvent = (): ReviewSegment => {
const start_time = const start_time =
Math.floor(Date.now() / 1000) - 10800 - Math.random() * 60 * 60; Math.floor(Date.now() / 1000) - 60 * 30 - Math.random() * 60 * 60;
const end_time = Math.floor(start_time + Math.random() * 60 * 10); const end_time = Math.floor(start_time + Math.random() * 60 * 10);
const severities: ReviewSeverity[] = [ const severities: ReviewSeverity[] = [
"significant_motion", "significant_motion",
@ -365,12 +365,12 @@ function UIPlayground() {
segmentDuration={zoomSettings.segmentDuration} // seconds per segment segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time 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 timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
showMinimap // show / hide the minimap showMinimap={false} // show / hide the minimap
minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm) 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) minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
showExportHandles={showExportHandles} showExportHandles={showExportHandles}
@ -389,7 +389,7 @@ function UIPlayground() {
segmentDuration={zoomSettings.segmentDuration} // seconds per segment segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time 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 timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@ -414,7 +414,7 @@ function UIPlayground() {
<SummaryTimeline <SummaryTimeline
reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time 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 timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
segmentDuration={zoomSettings.segmentDuration} segmentDuration={zoomSettings.segmentDuration}
events={mockEvents} events={mockEvents}
severityType={"alert"} // show only events of this severity on the summary timeline severityType={"alert"} // show only events of this severity on the summary timeline

11
web/src/views/events/EventView.tsx
View File

@ -758,21 +758,26 @@ function MotionReview({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [playing, playbackRate]); }, [playing, playbackRate]);
const { alignStartDateToTimeline } = useTimelineUtils({
segmentDuration,
});
const getDetectionType = useCallback( const getDetectionType = useCallback(
(cameraName: string) => { (cameraName: string) => {
if (motionOnly) { if (motionOnly) {
return null; return null;
} }
const segmentTime = alignStartDateToTimeline(currentTime);
const matchingItem = reviewItems?.all.find( const matchingItem = reviewItems?.all.find(
(item) => (item) =>
currentTime >= item.start_time && item.start_time >= segmentTime &&
currentTime <= item.end_time && item.end_time <= segmentTime + segmentDuration &&
item.camera === cameraName, item.camera === cameraName,
); );
return matchingItem ? matchingItem.severity : null; return matchingItem ? matchingItem.severity : null;
}, },
[reviewItems, currentTime, motionOnly], [reviewItems, currentTime, motionOnly, alignStartDateToTimeline],
); );
if (!relevantPreviews) { if (!relevantPreviews) {