mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Fix zoom scaling for live view (#10479)
This commit is contained in:
Nicolas Mowen
GitHub
parent
f5a26c5962
commit
df0291db5c
@ -157,131 +157,142 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
|||||||
}, [cameraAspectRatio, windowAspectRatio, fullscreen]);
|
}, [cameraAspectRatio, windowAspectRatio, fullscreen]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<TransformWrapper minScale={1.0}>
|
||||||
ref={mainRef}
|
|
||||||
className={
|
|
||||||
fullscreen
|
|
||||||
? `fixed inset-0 bg-black z-30`
|
|
||||||
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
|
ref={mainRef}
|
||||||
className={
|
className={
|
||||||
fullscreen
|
fullscreen
|
||||||
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
|
? `fixed inset-0 bg-black z-30`
|
||||||
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
|
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{!fullscreen ? (
|
|
||||||
<Button
|
|
||||||
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
|
||||||
size={isMobile ? "icon" : "default"}
|
|
||||||
onClick={() => navigate(-1)}
|
|
||||||
>
|
|
||||||
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
|
||||||
{isDesktop && "Back"}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<div />
|
|
||||||
)}
|
|
||||||
<TooltipProvider>
|
|
||||||
<div
|
|
||||||
className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
|
|
||||||
>
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={fullscreen ? FaCompress : FaExpand}
|
|
||||||
isActive={fullscreen}
|
|
||||||
title={fullscreen ? "Close" : "Fullscreen"}
|
|
||||||
onClick={() => {
|
|
||||||
if (fullscreen) {
|
|
||||||
document.exitFullscreen();
|
|
||||||
} else {
|
|
||||||
mainRef.current?.requestFullscreen();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{window.isSecureContext && (
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={mic ? FaMicrophone : FaMicrophoneSlash}
|
|
||||||
isActive={mic}
|
|
||||||
title={`${mic ? "Disable" : "Enable"} Two Way Talk`}
|
|
||||||
onClick={() => setMic(!mic)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={audio ? GiSpeaker : GiSpeakerOff}
|
|
||||||
isActive={audio}
|
|
||||||
title={`${audio ? "Disable" : "Enable"} Camera Audio`}
|
|
||||||
onClick={() => setAudio(!audio)}
|
|
||||||
/>
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
|
|
||||||
isActive={detectState == "ON"}
|
|
||||||
title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
|
|
||||||
onClick={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
|
|
||||||
/>
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={recordState == "ON" ? LuVideo : LuVideoOff}
|
|
||||||
isActive={recordState == "ON"}
|
|
||||||
title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
|
|
||||||
onClick={() => sendRecord(recordState == "ON" ? "OFF" : "ON")}
|
|
||||||
/>
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
|
|
||||||
isActive={snapshotState == "ON"}
|
|
||||||
title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
|
|
||||||
onClick={() => sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")}
|
|
||||||
/>
|
|
||||||
{camera.audio.enabled_in_config && (
|
|
||||||
<CameraFeatureToggle
|
|
||||||
className="p-2 md:p-0"
|
|
||||||
variant={fullscreen ? "overlay" : "primary"}
|
|
||||||
Icon={audioState == "ON" ? LuEar : LuEarOff}
|
|
||||||
isActive={audioState == "ON"}
|
|
||||||
title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}
|
|
||||||
onClick={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TooltipProvider>
|
|
||||||
</div>
|
|
||||||
<div className="relative size-full p-2">
|
|
||||||
<div
|
<div
|
||||||
className={growClassName}
|
className={
|
||||||
style={{
|
fullscreen
|
||||||
aspectRatio: aspectRatio,
|
? `absolute right-32 top-1 z-40 ${isMobile ? "landscape:left-2 landscape:right-auto landscape:bottom-1 landscape:top-auto" : ""}`
|
||||||
|
: `w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{!fullscreen ? (
|
||||||
|
<Button
|
||||||
|
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
||||||
|
size={isMobile ? "icon" : "default"}
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
>
|
||||||
|
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
||||||
|
{isDesktop && "Back"}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div />
|
||||||
|
)}
|
||||||
|
<TooltipProvider>
|
||||||
|
<div
|
||||||
|
className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
|
||||||
|
>
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={fullscreen ? FaCompress : FaExpand}
|
||||||
|
isActive={fullscreen}
|
||||||
|
title={fullscreen ? "Close" : "Fullscreen"}
|
||||||
|
onClick={() => {
|
||||||
|
if (fullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else {
|
||||||
|
mainRef.current?.requestFullscreen();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{window.isSecureContext && (
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={mic ? FaMicrophone : FaMicrophoneSlash}
|
||||||
|
isActive={mic}
|
||||||
|
title={`${mic ? "Disable" : "Enable"} Two Way Talk`}
|
||||||
|
onClick={() => setMic(!mic)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={audio ? GiSpeaker : GiSpeakerOff}
|
||||||
|
isActive={audio}
|
||||||
|
title={`${audio ? "Disable" : "Enable"} Camera Audio`}
|
||||||
|
onClick={() => setAudio(!audio)}
|
||||||
|
/>
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
|
||||||
|
isActive={detectState == "ON"}
|
||||||
|
title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
|
||||||
|
onClick={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
|
||||||
|
/>
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={recordState == "ON" ? LuVideo : LuVideoOff}
|
||||||
|
isActive={recordState == "ON"}
|
||||||
|
title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
|
||||||
|
onClick={() => sendRecord(recordState == "ON" ? "OFF" : "ON")}
|
||||||
|
/>
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
|
||||||
|
isActive={snapshotState == "ON"}
|
||||||
|
title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
|
||||||
|
onClick={() =>
|
||||||
|
sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{camera.audio.enabled_in_config && (
|
||||||
|
<CameraFeatureToggle
|
||||||
|
className="p-2 md:p-0"
|
||||||
|
variant={fullscreen ? "overlay" : "primary"}
|
||||||
|
Icon={audioState == "ON" ? LuEar : LuEarOff}
|
||||||
|
isActive={audioState == "ON"}
|
||||||
|
title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}
|
||||||
|
onClick={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TooltipProvider>
|
||||||
|
</div>
|
||||||
|
<TransformComponent
|
||||||
|
wrapperStyle={{
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
contentStyle={{
|
||||||
|
position: "relative",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
padding: "8px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TransformWrapper minScale={1.0}>
|
<div
|
||||||
<TransformComponent>
|
className={`flex flex-col justify-center items-center ${growClassName}`}
|
||||||
<LivePlayer
|
style={{
|
||||||
key={camera.name}
|
aspectRatio: aspectRatio,
|
||||||
className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
|
}}
|
||||||
windowVisible
|
>
|
||||||
showStillWithoutActivity={false}
|
<LivePlayer
|
||||||
cameraConfig={camera}
|
key={camera.name}
|
||||||
playAudio={audio}
|
className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
|
||||||
micEnabled={mic}
|
windowVisible
|
||||||
preferredLiveMode={preferredLiveMode}
|
showStillWithoutActivity={false}
|
||||||
/>
|
cameraConfig={camera}
|
||||||
</TransformComponent>
|
playAudio={audio}
|
||||||
</TransformWrapper>
|
micEnabled={mic}
|
||||||
</div>
|
preferredLiveMode={preferredLiveMode}
|
||||||
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}
|
/>
|
||||||
|
</div>
|
||||||
|
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}
|
||||||
|
</TransformComponent>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</TransformWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user