administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 13:15: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 [exportStartPosition, setExportStartPosition] = useState(0);
const [exportEndPosition, setExportEndPosition] = useState(0);
const segmentsRef = useRef<HTMLDivElement>(null);
const handlebarRef = useRef<HTMLDivElement>(null);
const handlebarTimeRef = useRef<HTMLDivElement>(null);
const exportStartRef = useRef<HTMLDivElement>(null);
@ -100,6 +101,7 @@ export function ReviewTimeline({
} = useDraggableElement({
contentRef,
timelineRef,
segmentsRef,
draggableElementRef: handlebarRef,
segmentDuration,
showDraggableElement: showHandlebar,
@ -123,6 +125,7 @@ export function ReviewTimeline({
} = useDraggableElement({
contentRef,
timelineRef,
segmentsRef,
draggableElementRef: exportStartRef,
segmentDuration,
showDraggableElement: showExportHandles,
@ -147,6 +150,7 @@ export function ReviewTimeline({
} = useDraggableElement({
contentRef,
timelineRef,
segmentsRef,
draggableElementRef: exportEndRef,
segmentDuration,
showDraggableElement: showExportHandles,
@ -319,7 +323,7 @@ export function ReviewTimeline({
: "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 bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
{children}

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

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