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

limit handles from overdragging when segments don't fill up timeline

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-02 17:06:53 -05:00
parent 483d64e419
commit ec4ab763a6
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/timeline/ReviewTimeline.tsx
View File

@ -58,6 +58,7 @@ export function ReviewTimeline({
const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false); const [isDraggingExportEnd, setIsDraggingExportEnd] = useState(false);
const [exportStartPosition, setExportStartPosition] = useState(0); const [exportStartPosition, setExportStartPosition] = useState(0);
const [exportEndPosition, setExportEndPosition] = useState(0); const [exportEndPosition, setExportEndPosition] = useState(0);
const segmentsRef = useRef<HTMLDivElement>(null);
const handlebarRef = useRef<HTMLDivElement>(null); const handlebarRef = useRef<HTMLDivElement>(null);
const handlebarTimeRef = useRef<HTMLDivElement>(null); const handlebarTimeRef = useRef<HTMLDivElement>(null);
const exportStartRef = useRef<HTMLDivElement>(null); const exportStartRef = useRef<HTMLDivElement>(null);
@ -100,6 +101,7 @@ export function ReviewTimeline({
} = useDraggableElement({ } = useDraggableElement({
contentRef, contentRef,
timelineRef, timelineRef,
segmentsRef,
draggableElementRef: handlebarRef, draggableElementRef: handlebarRef,
segmentDuration, segmentDuration,
showDraggableElement: showHandlebar, showDraggableElement: showHandlebar,
@ -123,6 +125,7 @@ export function ReviewTimeline({
} = useDraggableElement({ } = useDraggableElement({
contentRef, contentRef,
timelineRef, timelineRef,
segmentsRef,
draggableElementRef: exportStartRef, draggableElementRef: exportStartRef,
segmentDuration, segmentDuration,
showDraggableElement: showExportHandles, showDraggableElement: showExportHandles,
@ -147,6 +150,7 @@ export function ReviewTimeline({
} = useDraggableElement({ } = useDraggableElement({
contentRef, contentRef,
timelineRef, timelineRef,
segmentsRef,
draggableElementRef: exportEndRef, draggableElementRef: exportEndRef,
segmentDuration, segmentDuration,
showDraggableElement: showExportHandles, showDraggableElement: showExportHandles,
@ -319,7 +323,7 @@ export function ReviewTimeline({
: "cursor-auto" : "cursor-auto"
}`} }`}
> >
<div className="flex flex-col relative"> <div ref={segmentsRef} className="flex flex-col relative">
<div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div> <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
<div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div> <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
{children} {children}

21
web/src/hooks/use-draggable-element.ts
View File

@ -6,6 +6,7 @@ import { useTimelineUtils } from "./use-timeline-utils";
type DraggableElementProps = { type DraggableElementProps = {
contentRef: React.RefObject<HTMLElement>; contentRef: React.RefObject<HTMLElement>;
timelineRef: React.RefObject<HTMLDivElement>; timelineRef: React.RefObject<HTMLDivElement>;
segmentsRef: React.RefObject<HTMLDivElement>;
draggableElementRef: React.RefObject<HTMLDivElement>; draggableElementRef: React.RefObject<HTMLDivElement>;
segmentDuration: number; segmentDuration: number;
showDraggableElement: boolean; showDraggableElement: boolean;
@ -29,6 +30,7 @@ type DraggableElementProps = {
function useDraggableElement({ function useDraggableElement({
contentRef, contentRef,
timelineRef, timelineRef,
segmentsRef,
draggableElementRef, draggableElementRef,
segmentDuration, segmentDuration,
showDraggableElement, showDraggableElement,
@ -430,12 +432,18 @@ function useDraggableElement({
useEffect(() => { useEffect(() => {
if ( if (
timelineRef.current && timelineRef.current &&
segmentsRef.current &&
draggableElementTime && draggableElementTime &&
timelineCollapsed && timelineCollapsed &&
timelineSegments && timelineSegments &&
segments segments
) { ) {
setFullTimelineHeight(timelineRef.current.scrollHeight); setFullTimelineHeight(
Math.min(
timelineRef.current.scrollHeight,
segmentsRef.current.scrollHeight,
),
);
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime); const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
let segmentElement = timelineRef.current.querySelector( let segmentElement = timelineRef.current.querySelector(
@ -486,11 +494,16 @@ function useDraggableElement({
}, [timelineCollapsed, segments]); }, [timelineCollapsed, segments]);
useEffect(() => { useEffect(() => {
if (timelineRef.current && segments) { if (timelineRef.current && segments && segmentsRef.current) {
setScrollEdgeSize(timelineRef.current.clientHeight * 0.03); setScrollEdgeSize(timelineRef.current.clientHeight * 0.03);
setFullTimelineHeight(timelineRef.current.scrollHeight); setFullTimelineHeight(
Math.min(
timelineRef.current.scrollHeight,
segmentsRef.current.scrollHeight,
),
);
} }
}, [timelineRef, segments]); }, [timelineRef, segmentsRef, segments]);
return { handleMouseDown, handleMouseUp, handleMouseMove }; return { handleMouseDown, handleMouseUp, handleMouseMove };
} }