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

align start timeline and update pixel math

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-08 16:27:21 -06:00
parent fc09de1b3e
commit a9d5f6e4dc
3 changed files with 29 additions and 23 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,

28
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) {
@ -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 };
}