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

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

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

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

@ -2,7 +2,7 @@ import { ReactNode, RefObject } from "react";
export type ReviewTimelineProps = {
timelineRef: RefObject<HTMLDivElement>;
scrollTimeRef: RefObject<HTMLDivElement>;
handlebarRef: RefObject<HTMLDivElement>;
handlebarTimeRef: RefObject<HTMLDivElement>;
handleMouseMove: (
e:
@ -27,7 +27,7 @@ export type ReviewTimelineProps = {
export function ReviewTimeline({
timelineRef,
scrollTimeRef,
handlebarRef,
handlebarTimeRef,
handleMouseMove,
handleMouseUp,
@ -50,14 +50,17 @@ export function ReviewTimeline({
>
<div className="flex flex-col">{children}</div>
{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
className="flex items-center justify-center touch-none select-none"
onMouseDown={handleMouseDown}
onTouchStart={handleMouseDown}
>
<div
ref={scrollTimeRef}
className={`relative w-full ${
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 = {
contentRef: React.RefObject<HTMLElement>;
timelineRef: React.RefObject<HTMLDivElement>;
scrollTimeRef: React.RefObject<HTMLDivElement>;
handlebarRef: React.RefObject<HTMLDivElement>;
alignStartDateToTimeline: (time: number) => number;
alignEndDateToTimeline: (time: number) => number;
segmentDuration: number;
@ -22,7 +22,7 @@ type DragHandlerProps = {
function useDraggableHandler({
contentRef,
timelineRef,
scrollTimeRef,
handlebarRef,
alignStartDateToTimeline,
segmentDuration,
showHandlebar,
@ -83,12 +83,12 @@ function useDraggableHandler({
getClientYPosition(e);
setIsDragging(true);
if (scrollTimeRef.current && clientYPosition && isDesktop) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
if (handlebarRef.current && clientYPosition && isDesktop) {
const handlebarRect = handlebarRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top);
}
},
[setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
[setIsDragging, getClientYPosition, handlebarRef, clientYPosition],
);
const handleMouseUp = useCallback(
@ -121,7 +121,7 @@ function useDraggableHandler({
scrollTimeline: boolean,
updateHandle: boolean,
) => {
const thumb = scrollTimeRef.current;
const thumb = handlebarRef.current;
if (thumb) {
requestAnimationFrame(() => {
thumb.style.top = `${newHandlePosition}px`;
@ -148,7 +148,7 @@ function useDraggableHandler({
}
}
},
[segmentDuration, handlebarTimeRef, scrollTimeRef, setHandlebarTime],
[segmentDuration, handlebarTimeRef, handlebarRef, setHandlebarTime],
);
const handleMouseMove = useCallback(
@ -158,7 +158,7 @@ function useDraggableHandler({
if (
!contentRef.current ||
!timelineRef.current ||
!scrollTimeRef.current
!handlebarRef.current
) {
return;
}
@ -166,7 +166,7 @@ function useDraggableHandler({
getClientYPosition(e);
},
[contentRef, scrollTimeRef, timelineRef, getClientYPosition],
[contentRef, handlebarRef, timelineRef, getClientYPosition],
);
useEffect(() => {
@ -277,7 +277,7 @@ function useDraggableHandler({
useEffect(() => {
if (
timelineRef.current &&
scrollTimeRef.current &&
handlebarRef.current &&
showHandlebar &&
handlebarTime &&
!isDragging
@ -301,7 +301,7 @@ function useDraggableHandler({
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [handlebarTime, showHandlebar, scrollTimeRef, timelineStartAligned]);
}, [handlebarTime, showHandlebar, handlebarRef, timelineStartAligned]);
return { handleMouseDown, handleMouseUp, handleMouseMove };
}