mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
UI changes (#10651)
* Check if event time is in segment * conditionally render minimap bounds for event segments
This commit is contained in:
parent
0fda7147be
commit
37f60f7140
@ -205,6 +205,7 @@ export function EventSegment({
|
||||
onClick={segmentClick}
|
||||
onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
|
||||
>
|
||||
{showMinimap && (
|
||||
<MinimapBounds
|
||||
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
|
||||
isLastSegmentInMinimap={isLastSegmentInMinimap}
|
||||
@ -212,6 +213,7 @@ export function EventSegment({
|
||||
alignedMinimapEndTime={alignedMinimapEndTime}
|
||||
firstMinimapSegmentRef={firstMinimapSegmentRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Tick timestamp={timestamp} timestampSpread={timestampSpread} />
|
||||
|
||||
|
@ -196,6 +196,7 @@ export function MotionSegment({
|
||||
>
|
||||
{!motionOnly && (
|
||||
<>
|
||||
{showMinimap && (
|
||||
<MinimapBounds
|
||||
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
|
||||
isLastSegmentInMinimap={isLastSegmentInMinimap}
|
||||
@ -203,6 +204,7 @@ export function MotionSegment({
|
||||
alignedMinimapEndTime={alignedMinimapEndTime}
|
||||
firstMinimapSegmentRef={firstMinimapSegmentRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Tick
|
||||
key={`${segmentKey}_tick`}
|
||||
|
@ -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,
|
||||
if (severity === displaySeverityType) {
|
||||
hasDisplaySeverityType = true;
|
||||
highestOtherSeverityValue = Math.max(
|
||||
highestOtherSeverityValue,
|
||||
highestSeverityValue,
|
||||
);
|
||||
const highestOtherSeverityValue = Math.max(...otherSeverityValues);
|
||||
} else {
|
||||
highestSeverityValue = Math.max(highestSeverityValue, severity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (hasDisplaySeverityType) {
|
||||
return [displaySeverityType, highestOtherSeverityValue];
|
||||
} else if (highestSeverityValue === 0) {
|
||||
return [0];
|
||||
} else {
|
||||
return [highestSeverityValue];
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user