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