chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Scrolling fixes and motion timeline changes (#10295)

Browse Source 
* scrolling updates

* only scroll by 1 segment on desktop
This commit is contained in:
Josh Hawkins
2024-03-06 15:35:10 -06:00
committed by GitHub
parent fb81e44283
commit 90db27e3c8
8 changed files with 220 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/views/events/EventView.tsx
View File

@@ -658,38 +658,40 @@ function MotionReview({
return (
<>
<div
ref={contentRef}
className="w-full h-min m-2 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
>
{reviewCameras.map((camera) => {
let grow;
const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) {
grow = "sm:col-span-2 aspect-wide";
} else if (aspectRatio < 1) {
grow = "md:row-span-2 md:h-full aspect-tall";
} else {
grow = "aspect-video";
}
return (
<DynamicVideoPlayer
key={camera.name}
className={`${grow}`}
camera={camera.name}
timeRange={timeRangeSegments.ranges[selectedRangeIdx]}
cameraPreviews={relevantPreviews || []}
previewOnly
onControllerReady={(controller) => {
videoPlayersRef.current[camera.name] = controller;
setPlayerReady(true);
}}
onClick={() =>
onSelectReview(`motion,${camera.name},${currentTime}`, false)
}
/>
);
})}
<div className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
<div
ref={contentRef}
className="w-full m-2 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
>
{reviewCameras.map((camera) => {
let grow;
const aspectRatio = camera.detect.width / camera.detect.height;
if (aspectRatio > 2) {
grow = "sm:col-span-2 aspect-wide";
} else if (aspectRatio < 1) {
grow = "md:row-span-2 md:h-full aspect-tall";
} else {
grow = "aspect-video";
}
return (
<DynamicVideoPlayer
key={camera.name}
className={`${grow}`}
camera={camera.name}
timeRange={timeRangeSegments.ranges[selectedRangeIdx]}
cameraPreviews={relevantPreviews || []}
previewOnly
onControllerReady={(controller) => {
videoPlayersRef.current[camera.name] = controller;
setPlayerReady(true);
}}
onClick={() =>
onSelectReview(`motion,${camera.name},${currentTime}`, false)
}
/>
);
})}
</div>
</div>
<div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
<MotionReviewTimeline