Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 16:38:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add ability to use carousel buttons to scroll through object lifecycle elements (#14662)

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-29 10:28:17 -05:00 committed by GitHub
parent 4e25bebdd0
commit e67b7a6d5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/overlay/detail/ObjectLifecycle.tsx
View File

@ -203,6 +203,20 @@ export default function ObjectLifecycle({
setCurrent(index);
};
const handleThumbnailNavigation = useCallback(
(direction: "next" | "previous") => {
if (!mainApi || !thumbnailApi || !eventSequence) return;
const newIndex =
direction === "next"
? Math.min(current + 1, eventSequence.length - 1)
: Math.max(current - 1, 0);
mainApi.scrollTo(newIndex);
thumbnailApi.scrollTo(newIndex);
setCurrent(newIndex);
},
[mainApi, thumbnailApi, current, eventSequence],
);
useEffect(() => {
if (eventSequence && eventSequence.length > 0) {
setTimeIndex(eventSequence?.[current].timestamp);
@ -545,8 +559,14 @@ export default function ObjectLifecycle({
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselPrevious
disabled={current === 0}
onClick={() => handleThumbnailNavigation("previous")}
/>
<CarouselNext
disabled={current === eventSequence.length - 1}
onClick={() => handleThumbnailNavigation("next")}
/>
</Carousel>
</div>
</div>