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

Clean up desktop sizing

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-28 15:10:27 -06:00
parent 2e4ec3c02d
commit 223b6c19de
2 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/player/PreviewPlayer.tsx
View File

@ -23,6 +23,7 @@ type PreviewPlayerProps = {
cameraPreviews: Preview[]; cameraPreviews: Preview[];
startTime?: number; startTime?: number;
isScrubbing: boolean; isScrubbing: boolean;
forceAspect?: number;
onControllerReady: (controller: PreviewController) => void; onControllerReady: (controller: PreviewController) => void;
onClick?: () => void; onClick?: () => void;
}; };
@ -33,6 +34,7 @@ export default function PreviewPlayer({
cameraPreviews, cameraPreviews,
startTime, startTime,
isScrubbing, isScrubbing,
forceAspect,
onControllerReady, onControllerReady,
onClick, onClick,
}: PreviewPlayerProps) { }: PreviewPlayerProps) {
@ -60,6 +62,7 @@ export default function PreviewPlayer({
cameraPreviews={cameraPreviews} cameraPreviews={cameraPreviews}
startTime={startTime} startTime={startTime}
isScrubbing={isScrubbing} isScrubbing={isScrubbing}
forceAspect={forceAspect}
currentHourFrame={currentHourFrame} currentHourFrame={currentHourFrame}
onControllerReady={onControllerReady} onControllerReady={onControllerReady}
onClick={onClick} onClick={onClick}
@ -89,6 +92,7 @@ type PreviewVideoPlayerProps = {
cameraPreviews: Preview[]; cameraPreviews: Preview[];
startTime?: number; startTime?: number;
isScrubbing: boolean; isScrubbing: boolean;
forceAspect?: number;
currentHourFrame?: string; currentHourFrame?: string;
onControllerReady: (controller: PreviewVideoController) => void; onControllerReady: (controller: PreviewVideoController) => void;
onClick?: () => void; onClick?: () => void;
@ -101,6 +105,7 @@ function PreviewVideoPlayer({
cameraPreviews, cameraPreviews,
startTime, startTime,
isScrubbing, isScrubbing,
forceAspect,
currentHourFrame, currentHourFrame,
onControllerReady, onControllerReady,
onClick, onClick,
@ -232,6 +237,9 @@ function PreviewVideoPlayer({
return ( return (
<div <div
className={`relative rounded-2xl bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`} className={`relative rounded-2xl bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
style={{
aspectRatio: forceAspect,
}}
onClick={onClick} onClick={onClick}
> >
{currentHourFrame && ( {currentHourFrame && (

29
web/src/views/events/RecordingView.tsx
View File

@ -351,6 +351,12 @@ export function RecordingView({
? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}` ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}`
: `w-full ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}` : `w-full ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
} }
style={{
aspectRatio:
mainCameraAspect == "tall"
? getCameraAspect(mainCamera)
: undefined,
}}
> >
<DynamicVideoPlayer <DynamicVideoPlayer
className={grow} className={grow}
@ -379,32 +385,29 @@ export function RecordingView({
> >
{allCameras.map((cam) => { {allCameras.map((cam) => {
if (cam !== mainCamera) { if (cam !== mainCamera) {
return ( const preview = (
<div
key={cam}
className={`${mainCameraAspect == "wide" ? "h-full flex-grow" : ""}`}
style={{
aspectRatio:
mainCameraAspect == "wide"
? undefined
: getCameraAspect(cam),
}}
>
<PreviewPlayer <PreviewPlayer
className="h-full" key={cam}
className={`${mainCameraAspect == "wide" ? "flex-grow" : ""}`}
camera={cam} camera={cam}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
startTime={startTime} startTime={startTime}
isScrubbing={scrubbing} isScrubbing={scrubbing}
forceAspect={getCameraAspect(cam)}
onControllerReady={(controller) => { onControllerReady={(controller) => {
previewRefs.current[cam] = controller; previewRefs.current[cam] = controller;
controller.scrubToTimestamp(startTime); controller.scrubToTimestamp(startTime);
}} }}
onClick={() => onSelectCamera(cam)} onClick={() => onSelectCamera(cam)}
/> />
</div>
); );
if (mainCameraAspect == "tall") {
return <div key={`${cam}-t`}>{preview}</div>;
}
return preview;
} }
return null; return null;
})} })}