administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 10:07:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add camera previews back

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-16 07:41:49 -06:00
parent b52044aecc
commit db7eef27c9
1 changed files with 53 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
web/src/views/recording/RecordingView.tsx
View File

@ -774,62 +774,61 @@ export function RecordingView({
containerRef={mainLayoutRef}
/>
</div>
{isDesktop &&
effectiveCameras.length > 1 &&
timelineType !== "detail" && (
<div
ref={previewRowRef}
className={cn(
"scrollbar-container flex gap-2 overflow-auto",
mainCameraAspect == "tall"
? "h-full w-72 flex-col"
: `h-28 w-full`,
previewRowOverflows ? "" : "items-center justify-center",
)}
>
<div className="w-2" />
{effectiveCameras.map((cam) => {
if (cam == mainCamera || cam == "birdseye") {
return;
}
{isDesktop && effectiveCameras.length > 1 && (
<div
ref={previewRowRef}
className={cn(
"scrollbar-container flex gap-2 overflow-auto",
mainCameraAspect == "tall"
? "h-full w-72 flex-col"
: `h-28 w-full`,
previewRowOverflows ? "" : "items-center justify-center",
timelineType == "detail" && "mt-4",
)}
>
<div className="w-2" />
{effectiveCameras.map((cam) => {
if (cam == mainCamera || cam == "birdseye") {
return;
}
return (
<Tooltip key={cam}>
<TooltipTrigger asChild>
<div
className={
mainCameraAspect == "tall" ? "w-full" : "h-full"
}
style={{
aspectRatio: getCameraAspect(cam),
return (
<Tooltip key={cam}>
<TooltipTrigger asChild>
<div
className={
mainCameraAspect == "tall" ? "w-full" : "h-full"
}
style={{
aspectRatio: getCameraAspect(cam),
}}
>
<PreviewPlayer
previewRef={previewRef}
className="size-full"
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
startTime={startTime}
isScrubbing={scrubbing}
isVisible={visiblePreviews.includes(cam)}
onControllerReady={(controller) => {
previewRefs.current[cam] = controller;
controller.scrubToTimestamp(startTime);
}}
>
<PreviewPlayer
previewRef={previewRef}
className="size-full"
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
startTime={startTime}
isScrubbing={scrubbing}
isVisible={visiblePreviews.includes(cam)}
onControllerReady={(controller) => {
previewRefs.current[cam] = controller;
controller.scrubToTimestamp(startTime);
}}
onClick={() => onSelectCamera(cam)}
/>
</div>
</TooltipTrigger>
<TooltipContent className="smart-capitalize">
<CameraNameLabel camera={cam} />
</TooltipContent>
</Tooltip>
);
})}
<div className="w-2" />
</div>
)}
onClick={() => onSelectCamera(cam)}
/>
</div>
</TooltipTrigger>
<TooltipContent className="smart-capitalize">
<CameraNameLabel camera={cam} />
</TooltipContent>
</Tooltip>
);
})}
<div className="w-2" />
</div>
)}
</div>
</div>
<Timeline