Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-12-19 19:06:16 +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}
onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
>
<MinimapBounds
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
isLastSegmentInMinimap={isLastSegmentInMinimap}
alignedMinimapStartTime={alignedMinimapStartTime}
alignedMinimapEndTime={alignedMinimapEndTime}
firstMinimapSegmentRef={firstMinimapSegmentRef}
/>
{showMinimap && (
<MinimapBounds
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
isLastSegmentInMinimap={isLastSegmentInMinimap}
alignedMinimapStartTime={alignedMinimapStartTime}
alignedMinimapEndTime={alignedMinimapEndTime}
firstMinimapSegmentRef={firstMinimapSegmentRef}
/>
)}
<Tick timestamp={timestamp} timestampSpread={timestampSpread} />

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

@ -196,13 +196,15 @@ export function MotionSegment({
>
{!motionOnly && (
<>
<MinimapBounds
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
isLastSegmentInMinimap={isLastSegmentInMinimap}
alignedMinimapStartTime={alignedMinimapStartTime}
alignedMinimapEndTime={alignedMinimapEndTime}
firstMinimapSegmentRef={firstMinimapSegmentRef}
/>
{showMinimap && (
<MinimapBounds
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
isLastSegmentInMinimap={isLastSegmentInMinimap}
alignedMinimapStartTime={alignedMinimapStartTime}
alignedMinimapEndTime={alignedMinimapEndTime}
firstMinimapSegmentRef={firstMinimapSegmentRef}
/>
)}
<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(
(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 segmentEnd = getSegmentEnd(event.end_time);
return time >= segmentStart && time < segmentEnd;
});
if (activeEvents?.length === 0) return [0];
const severityValues = activeEvents.map((event) =>
mapSeverityToNumber(event.severity),
);
const highestSeverityValue = Math.max(...severityValues);
if (time >= segmentStart && time < segmentEnd) {
const severity = mapSeverityToNumber(event.severity);
if (severityValues.includes(displaySeverityType)) {
const otherSeverityValues = severityValues.filter(
(severity) => severity !== displaySeverityType,
);
const highestOtherSeverityValue = Math.max(...otherSeverityValues);
if (severity === displaySeverityType) {
hasDisplaySeverityType = true;
highestOtherSeverityValue = Math.max(
highestOtherSeverityValue,
highestSeverityValue,
);
} else {
highestSeverityValue = Math.max(highestSeverityValue, severity);
}
}
}
if (hasDisplaySeverityType) {
return [displaySeverityType, highestOtherSeverityValue];
} else if (highestSeverityValue === 0) {
return [0];
} else {
return [highestSeverityValue];
}

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

@ -89,7 +89,7 @@ function generateRandomMotionAudioData(): MotionData[] {
const generateRandomEvent = (): ReviewSegment => {
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 severities: ReviewSeverity[] = [
"significant_motion",
@ -365,12 +365,12 @@ function UIPlayground() {
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
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 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
showMinimap={false} // 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)
showExportHandles={showExportHandles}
@ -389,7 +389,7 @@ function UIPlayground() {
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
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 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
@ -414,7 +414,7 @@ function UIPlayground() {
<SummaryTimeline
reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
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}
events={mockEvents}
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
}, [playing, playbackRate]);
const { alignStartDateToTimeline } = useTimelineUtils({
segmentDuration,
});
const getDetectionType = useCallback(
(cameraName: string) => {
if (motionOnly) {
return null;
}
const segmentTime = alignStartDateToTimeline(currentTime);
const matchingItem = reviewItems?.all.find(
(item) =>
currentTime >= item.start_time &&
currentTime <= item.end_time &&
item.start_time >= segmentTime &&
item.end_time <= segmentTime + segmentDuration &&
item.camera === cameraName,
);
return matchingItem ? matchingItem.severity : null;
},
[reviewItems, currentTime, motionOnly],
[reviewItems, currentTime, motionOnly, alignStartDateToTimeline],
);
if (!relevantPreviews) {