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 1 Packages Projects Releases Wiki Activity

pad start and end of timeline to ensure handlebar is always visible

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-12 10:16:57 -05:00
parent b3e094fcb6
commit a5023c8772
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,8 +51,8 @@ export function MotionReviewTimeline({
const timelineRef = useRef<HTMLDivElement>(null); const timelineRef = useRef<HTMLDivElement>(null);
const handlebarTimeRef = useRef<HTMLDivElement>(null); const handlebarTimeRef = useRef<HTMLDivElement>(null);
const timelineDuration = useMemo( const timelineDuration = useMemo(
() => timelineStart - timelineEnd, () => timelineStart - timelineEnd + 4 * segmentDuration,
[timelineEnd, timelineStart], [timelineEnd, timelineStart, segmentDuration],
); );
const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils( const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
@ -61,8 +61,8 @@ export function MotionReviewTimeline({
); );
const timelineStartAligned = useMemo( const timelineStartAligned = useMemo(
() => alignStartDateToTimeline(timelineStart), () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,
[timelineStart, alignStartDateToTimeline], [timelineStart, alignStartDateToTimeline, segmentDuration],
); );
const { handleMouseDown, handleMouseUp, handleMouseMove } = const { handleMouseDown, handleMouseUp, handleMouseMove } =

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

@ -48,7 +48,11 @@ export function ReviewTimeline({
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto" isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
}`} }`}
> >
<div className="flex flex-col">{children}</div> <div 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}
</div>
{showHandlebar && ( {showHandlebar && (
<div <div
className="absolute left-0 top-0 z-20 w-full" className="absolute left-0 top-0 z-20 w-full"

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

@ -195,8 +195,8 @@ function useDraggableHandler({
segmentHeight * (timelineDuration / segmentDuration) - segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 2, segmentHeight * 2,
Math.max( Math.max(
// start of timeline // start of timeline - 2 segments added for handlebar visibility
segmentHeight + scrolled, segmentHeight * 2 + scrolled,
// current Y position // current Y position
clientYPosition - clientYPosition -
timelineTop + timelineTop +