administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

better segment clicking on motion segments

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-07 16:24:33 -06:00
parent 507c6afa2c
commit 28957004ba
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,6 +82,19 @@ export function MotionSegment({
return isMobile ? 30 : 50; return isMobile ? 30 : 50;
}, []); }, []);
const segmentWidth = useMemo(() => {
return interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
);
}, [
segmentTime,
segmentDuration,
maxSegmentWidth,
getMotionSegmentValue,
interpolateMotionAudioData,
]);
const alignedMinimapStartTime = useMemo( const alignedMinimapStartTime = useMemo(
() => alignStartDateToTimeline(minimapStartTime ?? 0), () => alignStartDateToTimeline(minimapStartTime ?? 0),
[minimapStartTime, alignStartDateToTimeline], [minimapStartTime, alignStartDateToTimeline],
@ -154,13 +167,18 @@ export function MotionSegment({
}; };
const segmentClick = useCallback(() => { const segmentClick = useCallback(() => {
if (startTimestamp && setHandlebarTime) { if (startTimestamp && setHandlebarTime && segmentWidth > 1) {
setHandlebarTime(startTimestamp); setHandlebarTime(startTimestamp);
} }
}, [startTimestamp, setHandlebarTime]); }, [startTimestamp, setHandlebarTime, segmentWidth]);
return ( return (
<div key={segmentKey} className={segmentClasses}> <div
key={segmentKey}
className={segmentClasses}
onClick={segmentClick}
onTouchStart={(event) => handleTouchStart(event, segmentClick)}
>
<MinimapBounds <MinimapBounds
isFirstSegmentInMinimap={isFirstSegmentInMinimap} isFirstSegmentInMinimap={isFirstSegmentInMinimap}
isLastSegmentInMinimap={isLastSegmentInMinimap} isLastSegmentInMinimap={isLastSegmentInMinimap}
@ -185,13 +203,8 @@ export function MotionSegment({
<div <div
key={`${segmentKey}_motion_data_1`} key={`${segmentKey}_motion_data_1`}
className={`h-[2px] rounded-full bg-motion_review`} className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
onTouchStart={(event) => handleTouchStart(event, segmentClick)}
style={{ style={{
width: interpolateMotionAudioData( width: segmentWidth,
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
),
}} }}
></div> ></div>
</div> </div>
@ -202,13 +215,8 @@ export function MotionSegment({
<div <div
key={`${segmentKey}_motion_data_2`} key={`${segmentKey}_motion_data_2`}
className={`h-[2px] rounded-full bg-motion_review`} className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
onTouchStart={(event) => handleTouchStart(event, segmentClick)}
style={{ style={{
width: interpolateMotionAudioData( width: segmentWidth,
getMotionSegmentValue(segmentTime),
maxSegmentWidth,
),
}} }}
></div> ></div>
</div> </div>

2
web/src/hooks/use-motion-segment-utils.ts
View File

@ -43,7 +43,7 @@ export const useMotionSegmentUtils = (
const matchingEvent = motion_events.find((event) => { const matchingEvent = motion_events.find((event) => {
return ( return (
time >= getSegmentStart(event.start_time) && time >= getSegmentStart(event.start_time) &&
time < getSegmentEnd(event.start_time) time <= getSegmentEnd(event.start_time)
); );
}); });

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

@ -124,7 +124,7 @@ function UIPlayground() {
const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]); const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
const [mockMotionData, setMockMotionData] = useState<MotionData[]>([]); const [mockMotionData, setMockMotionData] = useState<MotionData[]>([]);
const [handlebarTime, setHandlebarTime] = useState( const [handlebarTime, setHandlebarTime] = useState(
Math.floor(Date.now() / 1000) - 15 * 60, Math.round((Date.now() / 1000 - 15 * 60) / 60) * 60,
); );
useMemo(() => { useMemo(() => {
@ -285,7 +285,7 @@ function UIPlayground() {
<MotionReviewTimeline <MotionReviewTimeline
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.round(((Date.now() / 1000) * 60) / 60) * 60} // 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) - 6 * 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