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

Add zooming to full recordings

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-15 06:33:34 -06:00
parent 3edbfdeb88
commit 3983507c0a
2 changed files with 59 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -27,6 +27,7 @@ import {
} from "react-icons/md"; } from "react-icons/md";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { Slider } from "../ui/slider-volume"; import { Slider } from "../ui/slider-volume";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const; const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
const unsupportedErrorCodes = [ const unsupportedErrorCodes = [
@ -169,6 +170,8 @@ export default function HlsVideoPlayer({
} }
onClick={isDesktop ? undefined : () => setControls(!controls)} onClick={isDesktop ? undefined : () => setControls(!controls)}
> >
<TransformWrapper minScale={1.0}>
<TransformComponent>
<video <video
ref={videoRef} ref={videoRef}
className="size-full rounded-2xl" className="size-full rounded-2xl"
@ -182,7 +185,9 @@ export default function HlsVideoPlayer({
if (isMobile) { if (isMobile) {
setControls(true); setControls(true);
setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000)); setMobileCtrlTimeout(
setTimeout(() => setControls(false), 4000),
);
} }
}} }}
onPlaying={onPlaying} onPlaying={onPlaying}
@ -211,6 +216,8 @@ export default function HlsVideoPlayer({
} }
}} }}
/> />
</TransformComponent>
</TransformWrapper>
<VideoControls <VideoControls
video={videoRef.current} video={videoRef.current}
isPlaying={isPlaying} isPlaying={isPlaying}

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

@ -265,11 +265,10 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
}} }}
> >
<TransformWrapper minScale={1.0}> <TransformWrapper minScale={1.0}>
<div className="p-2">
<TransformComponent> <TransformComponent>
<LivePlayer <LivePlayer
key={camera.name} key={camera.name}
className={`${fullscreen ? "*:rounded-none" : ""}`} className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
windowVisible windowVisible
showStillWithoutActivity={false} showStillWithoutActivity={false}
cameraConfig={camera} cameraConfig={camera}
@ -278,7 +277,6 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
preferredLiveMode={preferredLiveMode} preferredLiveMode={preferredLiveMode}
/> />
</TransformComponent> </TransformComponent>
</div>
</TransformWrapper> </TransformWrapper>
</div> </div>
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />} {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}