administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 2 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";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
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 unsupportedErrorCodes = [
@ -169,48 +170,54 @@ export default function HlsVideoPlayer({
}
onClick={isDesktop ? undefined : () => setControls(!controls)}
>
<video
ref={videoRef}
className="size-full rounded-2xl"
preload="auto"
autoPlay
controls={false}
playsInline
muted
onPlay={() => {
setIsPlaying(true);
<TransformWrapper minScale={1.0}>
<TransformComponent>
<video
ref={videoRef}
className="size-full rounded-2xl"
preload="auto"
autoPlay
controls={false}
playsInline
muted
onPlay={() => {
setIsPlaying(true);
if (isMobile) {
setControls(true);
setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
}
}}
onPlaying={onPlaying}
onPause={() => {
setIsPlaying(false);
if (isMobile) {
setControls(true);
setMobileCtrlTimeout(
setTimeout(() => setControls(false), 4000),
);
}
}}
onPlaying={onPlaying}
onPause={() => {
setIsPlaying(false);
if (isMobile && mobileCtrlTimeout) {
clearTimeout(mobileCtrlTimeout);
}
}}
onTimeUpdate={() =>
onTimeUpdate && videoRef.current
? onTimeUpdate(videoRef.current.currentTime)
: undefined
}
onLoadedData={onPlayerLoaded}
onEnded={onClipEnded}
onError={(e) => {
if (
!hlsRef.current &&
// @ts-expect-error code does exist
unsupportedErrorCodes.includes(e.target.error.code) &&
videoRef.current
) {
setUseHlsCompat(true);
}
}}
/>
if (isMobile && mobileCtrlTimeout) {
clearTimeout(mobileCtrlTimeout);
}
}}
onTimeUpdate={() =>
onTimeUpdate && videoRef.current
? onTimeUpdate(videoRef.current.currentTime)
: undefined
}
onLoadedData={onPlayerLoaded}
onEnded={onClipEnded}
onError={(e) => {
if (
!hlsRef.current &&
// @ts-expect-error code does exist
unsupportedErrorCodes.includes(e.target.error.code) &&
videoRef.current
) {
setUseHlsCompat(true);
}
}}
/>
</TransformComponent>
</TransformWrapper>
<VideoControls
video={videoRef.current}
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}>
<div className="p-2">
<TransformComponent>
<LivePlayer
key={camera.name}
className={`${fullscreen ? "*:rounded-none" : ""}`}
windowVisible
showStillWithoutActivity={false}
cameraConfig={camera}
playAudio={audio}
micEnabled={mic}
preferredLiveMode={preferredLiveMode}
/>
</TransformComponent>
</div>
<TransformComponent>
<LivePlayer
key={camera.name}
className={`m-1 ${fullscreen ? "*:rounded-none" : ""}`}
windowVisible
showStillWithoutActivity={false}
cameraConfig={camera}
playAudio={audio}
micEnabled={mic}
preferredLiveMode={preferredLiveMode}
/>
</TransformComponent>
</TransformWrapper>
</div>
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}