Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Timeline handlebar tweaks (#10336)

Browse Source 
* initial offset click for desktop only

* align start timeline and update pixel math
This commit is contained in:
Josh Hawkins 2024-03-08 16:49:10 -06:00 committed by GitHub
parent 3d539c93eb
commit 05a66ce90d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/timeline/EventReviewTimeline.tsx
View File

@ -59,6 +59,11 @@ export function EventReviewTimeline({
segmentDuration,
);
const timelineStartAligned = useMemo(
() => alignStartDateToTimeline(timelineStart),
[timelineStart, alignStartDateToTimeline],
);
const { handleMouseDown, handleMouseUp, handleMouseMove } =
useDraggableHandler({
contentRef,
@ -71,7 +76,7 @@ export function EventReviewTimeline({
handlebarTime,
setHandlebarTime,
timelineDuration,
timelineStart,
timelineStartAligned,
isDragging,
setIsDragging,
handlebarTimeRef,
@ -80,10 +85,9 @@ export function EventReviewTimeline({
// Generate segments for the timeline
const generateSegments = useCallback(() => {
const segmentCount = timelineDuration / segmentDuration;
const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
return Array.from({ length: segmentCount }, (_, index) => {
const segmentTime = segmentAlignedTime - index * segmentDuration;
const segmentTime = timelineStartAligned - index * segmentDuration;
return (
<EventSegment

14
web/src/components/timeline/MotionReviewTimeline.tsx
View File

@ -60,6 +60,11 @@ export function MotionReviewTimeline({
segmentDuration,
);
const timelineStartAligned = useMemo(
() => alignStartDateToTimeline(timelineStart),
[timelineStart, alignStartDateToTimeline],
);
const { handleMouseDown, handleMouseUp, handleMouseMove } =
useDraggableHandler({
contentRef,
@ -72,7 +77,7 @@ export function MotionReviewTimeline({
handlebarTime,
setHandlebarTime,
timelineDuration,
timelineStart,
timelineStartAligned,
isDragging,
setIsDragging,
handlebarTimeRef,
@ -81,10 +86,9 @@ export function MotionReviewTimeline({
// Generate segments for the timeline
const generateSegments = useCallback(() => {
const segmentCount = timelineDuration / segmentDuration;
const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
return Array.from({ length: segmentCount }, (_, index) => {
const segmentTime = segmentAlignedTime - index * segmentDuration;
const segmentTime = timelineStartAligned - index * segmentDuration;
return (
<MotionSegment
@ -106,7 +110,7 @@ export function MotionReviewTimeline({
}, [
segmentDuration,
timestampSpread,
timelineStart,
timelineStartAligned,
timelineDuration,
showMinimap,
minimapStartTime,
@ -122,7 +126,7 @@ export function MotionReviewTimeline({
[
segmentDuration,
timestampSpread,
timelineStart,
timelineStartAligned,
timelineDuration,
showMinimap,
minimapStartTime,

30
web/src/hooks/use-handle-dragging.ts
View File

@ -14,7 +14,7 @@ type DragHandlerProps = {
setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
handlebarTimeRef: React.MutableRefObject<HTMLDivElement | null>;
timelineDuration: number;
timelineStart: number;
timelineStartAligned: number;
isDragging: boolean;
setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
};
@ -30,7 +30,7 @@ function useDraggableHandler({
setHandlebarTime,
handlebarTimeRef,
timelineDuration,
timelineStart,
timelineStartAligned,
isDragging,
setIsDragging,
}: DragHandlerProps) {
@ -83,7 +83,7 @@ function useDraggableHandler({
getClientYPosition(e);
setIsDragging(true);
if (scrollTimeRef.current && clientYPosition) {
if (scrollTimeRef.current && clientYPosition && isDesktop) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top);
}
@ -207,7 +207,7 @@ function useDraggableHandler({
const segmentIndex = Math.floor(newHandlePosition / segmentHeight);
const segmentStartTime = alignStartDateToTimeline(
timelineStart - segmentIndex * segmentDuration,
timelineStartAligned - segmentIndex * segmentDuration,
);
if (draggingAtTopEdge || draggingAtBottomEdge) {
@ -233,8 +233,9 @@ function useDraggableHandler({
if (setHandlebarTime) {
setHandlebarTime(
timelineStart -
(newHandlePosition / segmentHeight) * segmentDuration,
timelineStartAligned -
((newHandlePosition - segmentHeight / 2 - 2) / segmentHeight) *
segmentDuration,
);
}
@ -265,7 +266,7 @@ function useDraggableHandler({
clientYPosition,
isDragging,
segmentDuration,
timelineStart,
timelineStartAligned,
timelineDuration,
timelineRef,
draggingAtTopEdge,
@ -290,20 +291,17 @@ function useDraggableHandler({
const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
const newHandlePosition =
((timelineStart - handlebarTime) / segmentDuration) * segmentHeight +
((timelineStartAligned - handlebarTime) / segmentDuration) *
segmentHeight +
parentScrollTop -
scrolled;
scrolled -
2; // height of handlebar horizontal line
updateHandlebarPosition(
newHandlePosition - segmentHeight,
handlebarTime,
true,
true,
);
updateHandlebarPosition(newHandlePosition, handlebarTime, true, true);
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [handlebarTime, showHandlebar, scrollTimeRef, timelineStart]);
}, [handlebarTime, showHandlebar, scrollTimeRef, timelineStartAligned]);
return { handleMouseDown, handleMouseUp, handleMouseMove };
}