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

rename vars and change which div is absolutely positioned (#10358)

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-10 08:23:36 -05:00 committed by GitHub
parent efaa95b742
commit 70825bc938
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,7 @@ export function EventReviewTimeline({
onHandlebarDraggingChange, onHandlebarDraggingChange,
}: EventReviewTimelineProps) { }: EventReviewTimelineProps) {
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const scrollTimeRef = useRef<HTMLDivElement>(null); const handlebarRef = useRef<HTMLDivElement>(null);
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(
@ -68,7 +68,7 @@ export function EventReviewTimeline({
useDraggableHandler({ useDraggableHandler({
contentRef, contentRef,
timelineRef, timelineRef,
scrollTimeRef, handlebarRef,
alignStartDateToTimeline, alignStartDateToTimeline,
alignEndDateToTimeline, alignEndDateToTimeline,
segmentDuration, segmentDuration,
@ -143,7 +143,7 @@ export function EventReviewTimeline({
return ( return (
<ReviewTimeline <ReviewTimeline
timelineRef={timelineRef} timelineRef={timelineRef}
scrollTimeRef={scrollTimeRef} handlebarRef={handlebarRef}
handlebarTimeRef={handlebarTimeRef} handlebarTimeRef={handlebarTimeRef}
handleMouseMove={handleMouseMove} handleMouseMove={handleMouseMove}
handleMouseUp={handleMouseUp} handleMouseUp={handleMouseUp}

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

@ -47,7 +47,7 @@ export function MotionReviewTimeline({
onHandlebarDraggingChange, onHandlebarDraggingChange,
}: MotionReviewTimelineProps) { }: MotionReviewTimelineProps) {
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const scrollTimeRef = useRef<HTMLDivElement>(null); const handlebarRef = useRef<HTMLDivElement>(null);
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(
@ -69,7 +69,7 @@ export function MotionReviewTimeline({
useDraggableHandler({ useDraggableHandler({
contentRef, contentRef,
timelineRef, timelineRef,
scrollTimeRef, handlebarRef,
alignStartDateToTimeline, alignStartDateToTimeline,
alignEndDateToTimeline, alignEndDateToTimeline,
segmentDuration, segmentDuration,
@ -145,7 +145,7 @@ export function MotionReviewTimeline({
return ( return (
<ReviewTimeline <ReviewTimeline
timelineRef={timelineRef} timelineRef={timelineRef}
scrollTimeRef={scrollTimeRef} handlebarRef={handlebarRef}
handlebarTimeRef={handlebarTimeRef} handlebarTimeRef={handlebarTimeRef}
handleMouseMove={handleMouseMove} handleMouseMove={handleMouseMove}
handleMouseUp={handleMouseUp} handleMouseUp={handleMouseUp}

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

@ -2,7 +2,7 @@ import { ReactNode, RefObject } from "react";
export type ReviewTimelineProps = { export type ReviewTimelineProps = {
timelineRef: RefObject<HTMLDivElement>; timelineRef: RefObject<HTMLDivElement>;
scrollTimeRef: RefObject<HTMLDivElement>; handlebarRef: RefObject<HTMLDivElement>;
handlebarTimeRef: RefObject<HTMLDivElement>; handlebarTimeRef: RefObject<HTMLDivElement>;
handleMouseMove: ( handleMouseMove: (
e: e:
@ -27,7 +27,7 @@ export type ReviewTimelineProps = {
export function ReviewTimeline({ export function ReviewTimeline({
timelineRef, timelineRef,
scrollTimeRef, handlebarRef,
handlebarTimeRef, handlebarTimeRef,
handleMouseMove, handleMouseMove,
handleMouseUp, handleMouseUp,
@ -50,14 +50,17 @@ export function ReviewTimeline({
> >
<div className="flex flex-col">{children}</div> <div className="flex flex-col">{children}</div>
{showHandlebar && ( {showHandlebar && (
<div className="absolute left-0 top-0 z-20 w-full" role="scrollbar"> <div
className="absolute left-0 top-0 z-20 w-full"
role="scrollbar"
ref={handlebarRef}
>
<div <div
className="flex items-center justify-center touch-none select-none" className="flex items-center justify-center touch-none select-none"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onTouchStart={handleMouseDown} onTouchStart={handleMouseDown}
> >
<div <div
ref={scrollTimeRef}
className={`relative w-full ${ className={`relative w-full ${
isDragging ? "cursor-grabbing" : "cursor-grab" isDragging ? "cursor-grabbing" : "cursor-grab"
}`} }`}

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

@ -5,7 +5,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
type DragHandlerProps = { type DragHandlerProps = {
contentRef: React.RefObject<HTMLElement>; contentRef: React.RefObject<HTMLElement>;
timelineRef: React.RefObject<HTMLDivElement>; timelineRef: React.RefObject<HTMLDivElement>;
scrollTimeRef: React.RefObject<HTMLDivElement>; handlebarRef: React.RefObject<HTMLDivElement>;
alignStartDateToTimeline: (time: number) => number; alignStartDateToTimeline: (time: number) => number;
alignEndDateToTimeline: (time: number) => number; alignEndDateToTimeline: (time: number) => number;
segmentDuration: number; segmentDuration: number;
@ -22,7 +22,7 @@ type DragHandlerProps = {
function useDraggableHandler({ function useDraggableHandler({
contentRef, contentRef,
timelineRef, timelineRef,
scrollTimeRef, handlebarRef,
alignStartDateToTimeline, alignStartDateToTimeline,
segmentDuration, segmentDuration,
showHandlebar, showHandlebar,
@ -83,12 +83,12 @@ function useDraggableHandler({
getClientYPosition(e); getClientYPosition(e);
setIsDragging(true); setIsDragging(true);
if (scrollTimeRef.current && clientYPosition && isDesktop) { if (handlebarRef.current && clientYPosition && isDesktop) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect(); const handlebarRect = handlebarRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top); setInitialClickAdjustment(clientYPosition - handlebarRect.top);
} }
}, },
[setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition], [setIsDragging, getClientYPosition, handlebarRef, clientYPosition],
); );
const handleMouseUp = useCallback( const handleMouseUp = useCallback(
@ -121,7 +121,7 @@ function useDraggableHandler({
scrollTimeline: boolean, scrollTimeline: boolean,
updateHandle: boolean, updateHandle: boolean,
) => { ) => {
const thumb = scrollTimeRef.current; const thumb = handlebarRef.current;
if (thumb) { if (thumb) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
thumb.style.top = `${newHandlePosition}px`; thumb.style.top = `${newHandlePosition}px`;
@ -148,7 +148,7 @@ function useDraggableHandler({
} }
} }
}, },
[segmentDuration, handlebarTimeRef, scrollTimeRef, setHandlebarTime], [segmentDuration, handlebarTimeRef, handlebarRef, setHandlebarTime],
); );
const handleMouseMove = useCallback( const handleMouseMove = useCallback(
@ -158,7 +158,7 @@ function useDraggableHandler({
if ( if (
!contentRef.current || !contentRef.current ||
!timelineRef.current || !timelineRef.current ||
!scrollTimeRef.current !handlebarRef.current
) { ) {
return; return;
} }
@ -166,7 +166,7 @@ function useDraggableHandler({
getClientYPosition(e); getClientYPosition(e);
}, },
[contentRef, scrollTimeRef, timelineRef, getClientYPosition], [contentRef, handlebarRef, timelineRef, getClientYPosition],
); );
useEffect(() => { useEffect(() => {
@ -277,7 +277,7 @@ function useDraggableHandler({
useEffect(() => { useEffect(() => {
if ( if (
timelineRef.current && timelineRef.current &&
scrollTimeRef.current && handlebarRef.current &&
showHandlebar && showHandlebar &&
handlebarTime && handlebarTime &&
!isDragging !isDragging
@ -301,7 +301,7 @@ function useDraggableHandler({
} }
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [handlebarTime, showHandlebar, scrollTimeRef, timelineStartAligned]); }, [handlebarTime, showHandlebar, handlebarRef, timelineStartAligned]);
return { handleMouseDown, handleMouseUp, handleMouseMove }; return { handleMouseDown, handleMouseUp, handleMouseMove };
} }