Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Fix zoom scaling for live view (#10479)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-15 08:57:58 -06:00 committed by GitHub
parent f5a26c5962
commit df0291db5c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 127 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/views/live/LiveCameraView.tsx
View File

@ -157,6 +157,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
}, [cameraAspectRatio, windowAspectRatio, fullscreen]); }, [cameraAspectRatio, windowAspectRatio, fullscreen]);
return ( return (
<TransformWrapper minScale={1.0}>
<div <div
ref={mainRef} ref={mainRef}
className={ className={
@ -242,7 +243,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography} Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
isActive={snapshotState == "ON"} isActive={snapshotState == "ON"}
title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`} title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
onClick={() => sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")} onClick={() =>
sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
}
/> />
{camera.audio.enabled_in_config && ( {camera.audio.enabled_in_config && (
<CameraFeatureToggle <CameraFeatureToggle
@ -257,15 +260,24 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
</div> </div>
</TooltipProvider> </TooltipProvider>
</div> </div>
<div className="relative size-full p-2"> <TransformComponent
wrapperStyle={{
width: "100%",
height: "100%",
}}
contentStyle={{
position: "relative",
width: "100%",
height: "100%",
padding: "8px",
}}
>
<div <div
className={growClassName} className={`flex flex-col justify-center items-center ${growClassName}`}
style={{ style={{
aspectRatio: aspectRatio, aspectRatio: aspectRatio,
}} }}
> >
<TransformWrapper minScale={1.0}>
<TransformComponent>
<LivePlayer <LivePlayer
key={camera.name} key={camera.name}
className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`} className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
@ -276,12 +288,11 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
micEnabled={mic} micEnabled={mic}
preferredLiveMode={preferredLiveMode} preferredLiveMode={preferredLiveMode}
/> />
</TransformComponent>
</TransformWrapper>
</div> </div>
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />} {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}
</TransformComponent>
</div> </div>
</div> </TransformWrapper>
); );
} }