administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

scroll minimap to keep it in view

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-22 10:05:27 -06:00
parent f84d2db406
commit be825cb37c
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/timeline/EventSegment.tsx
View File

@ -1,7 +1,7 @@
import { useEventUtils } from "@/hooks/use-event-utils";
import { useSegmentUtils } from "@/hooks/use-segment-utils";
import { ReviewSegment, ReviewSeverity } from "@/types/review";
import React, { useMemo } from "react";
import React, { useEffect, useMemo, useRef } from "react";
type EventSegmentProps = {
events: ReviewSegment[];
@ -179,6 +179,18 @@ export function EventSegment({
return showMinimap && segmentTime === alignedMinimapEndTime;
}, [showMinimap, segmentTime, alignedMinimapEndTime]);
const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Check if the first segment is out of view
const firstSegment = firstMinimapSegmentRef.current;
if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
// Scroll the first segment into view
console.log("scrolling into view");
firstSegment.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
}, [showMinimap, isFirstSegmentInMinimap, timestampSpread]);
const segmentClasses = `flex flex-row ${
showMinimap
? isInMinimapRange
@ -235,6 +247,7 @@ export function EventSegment({
<div
className="mr-3 w-[8px] h-2 flex justify-left items-end"
data-severity={severityValue}
ref={isFirstSegmentInMinimap ? firstMinimapSegmentRef : undefined}
>
<div
key={`${segmentKey}_${index}_primary_data`}