chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Better segment clicking (#10321)

Browse Source 
* better segment clicking on motion segments

* move handlebar on click when handlebar is showing

* only scroll handlebar if needed
This commit is contained in:
Josh Hawkins
2024-03-07 22:02:29 -06:00
committed by GitHub
parent 507c6afa2c
commit dfab850b61
6 changed files with 34 additions and 18 deletions
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>