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

put segment height in hook

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-28 09:33:58 -05:00
parent 618ade6750
commit f990531199
3 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,18 +69,15 @@ export function ReviewTimeline({
); );
const exportSectionRef = useRef<HTMLDivElement>(null); const exportSectionRef = useRef<HTMLDivElement>(null);
const segmentHeight = 8;
const [draggableElementType, setDraggableElementType] = const [draggableElementType, setDraggableElementType] =
useState<DraggableElement>(); useState<DraggableElement>();
const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils( const { alignStartDateToTimeline, alignEndDateToTimeline, segmentHeight } =
{ useTimelineUtils({
segmentDuration, segmentDuration,
timelineDuration, timelineDuration,
timelineRef, timelineRef,
}, });
);
const paddedExportStartTime = useMemo(() => { const paddedExportStartTime = useMemo(() => {
if (exportStartTime) { if (exportStartTime) {

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

@ -46,20 +46,18 @@ function useDraggableElement({
setDraggableElementPosition, setDraggableElementPosition,
dense, dense,
}: DraggableElementProps) { }: DraggableElementProps) {
const segmentHeight = 8;
const [clientYPosition, setClientYPosition] = useState<number | null>(null); const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0); const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const [elementScrollIntoView, setElementScrollIntoView] = useState(true); const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
const [scrollEdgeSize, setScrollEdgeSize] = useState<number>(); const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
const [fullTimelineHeight, setFullTimelineHeight] = useState<number>(); const [fullTimelineHeight, setFullTimelineHeight] = useState<number>();
const [segments, setSegments] = useState<HTMLDivElement[]>([]); const [segments, setSegments] = useState<HTMLDivElement[]>([]);
const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils( const { alignStartDateToTimeline, getCumulativeScrollTop, segmentHeight } =
{ useTimelineUtils({
segmentDuration: segmentDuration, segmentDuration: segmentDuration,
timelineDuration: timelineDuration, timelineDuration: timelineDuration,
timelineRef, timelineRef,
}, });
);
const draggingAtTopEdge = useMemo(() => { const draggingAtTopEdge = useMemo(() => {
if (clientYPosition && timelineRef.current && scrollEdgeSize) { if (clientYPosition && timelineRef.current && scrollEdgeSize) {
@ -147,7 +145,7 @@ function useDraggableElement({
(time: number) => { (time: number) => {
return ((timelineStartAligned - time) / segmentDuration) * segmentHeight; return ((timelineStartAligned - time) / segmentDuration) * segmentHeight;
}, },
[segmentDuration, timelineStartAligned], [segmentDuration, timelineStartAligned, segmentHeight],
); );
const updateDraggableElementPosition = useCallback( const updateDraggableElementPosition = useCallback(

5
web/src/hooks/use-timeline-utils.ts
View File

@ -11,6 +11,8 @@ export function useTimelineUtils({
timelineDuration, timelineDuration,
timelineRef, timelineRef,
}: TimelineUtilsProps) { }: TimelineUtilsProps) {
const segmentHeight = 8;
const alignEndDateToTimeline = useCallback( const alignEndDateToTimeline = useCallback(
(time: number): number => { (time: number): number => {
const remainder = time % segmentDuration; const remainder = time % segmentDuration;
@ -42,8 +44,6 @@ export function useTimelineUtils({
if (timelineRef?.current && timelineDuration) { if (timelineRef?.current && timelineDuration) {
const { clientHeight: visibleTimelineHeight } = timelineRef.current; const { clientHeight: visibleTimelineHeight } = timelineRef.current;
const segmentHeight = 8;
const visibleTime = const visibleTime =
(visibleTimelineHeight / segmentHeight) * segmentDuration; (visibleTimelineHeight / segmentHeight) * segmentDuration;
@ -56,5 +56,6 @@ export function useTimelineUtils({
alignStartDateToTimeline, alignStartDateToTimeline,
getCumulativeScrollTop, getCumulativeScrollTop,
getVisibleTimelineDuration, getVisibleTimelineDuration,
segmentHeight,
}; };
} }