administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 05:05:26 +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

87
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,48 +170,54 @@ export default function HlsVideoPlayer({
} }
onClick={isDesktop ? undefined : () => setControls(!controls)} onClick={isDesktop ? undefined : () => setControls(!controls)}
> >
<video <TransformWrapper minScale={1.0}>
ref={videoRef} <TransformComponent>
className="size-full rounded-2xl" <video
preload="auto" ref={videoRef}
autoPlay className="size-full rounded-2xl"
controls={false} preload="auto"
playsInline autoPlay
muted controls={false}
onPlay={() => { playsInline
setIsPlaying(true); muted
onPlay={() => {
setIsPlaying(true);
if (isMobile) { if (isMobile) {
setControls(true); setControls(true);
setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000)); setMobileCtrlTimeout(
} setTimeout(() => setControls(false), 4000),
}} );
onPlaying={onPlaying} }
onPause={() => { }}
setIsPlaying(false); onPlaying={onPlaying}
onPause={() => {
setIsPlaying(false);
if (isMobile && mobileCtrlTimeout) { if (isMobile && mobileCtrlTimeout) {
clearTimeout(mobileCtrlTimeout); clearTimeout(mobileCtrlTimeout);
} }
}} }}
onTimeUpdate={() => onTimeUpdate={() =>
onTimeUpdate && videoRef.current onTimeUpdate && videoRef.current
? onTimeUpdate(videoRef.current.currentTime) ? onTimeUpdate(videoRef.current.currentTime)
: undefined : undefined
} }
onLoadedData={onPlayerLoaded} onLoadedData={onPlayerLoaded}
onEnded={onClipEnded} onEnded={onClipEnded}
onError={(e) => { onError={(e) => {
if ( if (
!hlsRef.current && !hlsRef.current &&
// @ts-expect-error code does exist // @ts-expect-error code does exist
unsupportedErrorCodes.includes(e.target.error.code) && unsupportedErrorCodes.includes(e.target.error.code) &&
videoRef.current videoRef.current
) { ) {
setUseHlsCompat(true); setUseHlsCompat(true);
} }
}} }}
/> />
</TransformComponent>
</TransformWrapper>
<VideoControls <VideoControls
video={videoRef.current} video={videoRef.current}
isPlaying={isPlaying} isPlaying={isPlaying}

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

@ -265,20 +265,18 @@ 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={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
className={`${fullscreen ? "*:rounded-none" : ""}`} windowVisible
windowVisible showStillWithoutActivity={false}
showStillWithoutActivity={false} cameraConfig={camera}
cameraConfig={camera} playAudio={audio}
playAudio={audio} micEnabled={mic}
micEnabled={mic} 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} />}