administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +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;
}, []);
const segmentWidth = useMemo(() => {
return interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
);
}, [
segmentTime,
segmentDuration,
maxSegmentWidth,
getMotionSegmentValue,
interpolateMotionAudioData,
]);
const alignedMinimapStartTime = useMemo(
() => alignStartDateToTimeline(minimapStartTime ?? 0),
[minimapStartTime, alignStartDateToTimeline],
@ -154,13 +167,18 @@ export function MotionSegment({
};
const segmentClick = useCallback(() => {
if (startTimestamp && setHandlebarTime) {
if (startTimestamp && setHandlebarTime && segmentWidth > 1) {
setHandlebarTime(startTimestamp);
}
}, [startTimestamp, setHandlebarTime]);
}, [startTimestamp, setHandlebarTime, segmentWidth]);
return (
<div key={segmentKey} className={segmentClasses}>
<div
key={segmentKey}
className={segmentClasses}
onClick={segmentClick}
onTouchStart={(event) => handleTouchStart(event, segmentClick)}
>
<MinimapBounds
isFirstSegmentInMinimap={isFirstSegmentInMinimap}
isLastSegmentInMinimap={isLastSegmentInMinimap}
@ -185,13 +203,8 @@ export function MotionSegment({
<div
key={`${segmentKey}_motion_data_1`}
className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
onTouchStart={(event) => handleTouchStart(event, segmentClick)}
style={{
width: interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
),
width: segmentWidth,
}}
></div>
</div>
@ -202,13 +215,8 @@ export function MotionSegment({
<div
key={`${segmentKey}_motion_data_2`}
className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
onTouchStart={(event) => handleTouchStart(event, segmentClick)}
style={{
width: interpolateMotionAudioData(
getMotionSegmentValue(segmentTime),
maxSegmentWidth,
),
width: segmentWidth,
}}
></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) => {
return (
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 [mockMotionData, setMockMotionData] = useState<MotionData[]>([]);
const [handlebarTime, setHandlebarTime] = useState(
Math.floor(Date.now() / 1000) - 15 * 60,
Math.round((Date.now() / 1000 - 15 * 60) / 60) * 60,
);
useMemo(() => {
@ -285,7 +285,7 @@ function UIPlayground() {
<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
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
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar