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

Make live view zoomable

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-15 06:28:50 -06:00
parent c66f552280
commit 3edbfdeb88
3 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/package-lock.json generated
View File

@ -52,6 +52,7 @@
"react-tracked": "^1.7.11", "react-tracked": "^1.7.11",
"react-transition-group": "^4.4.5", "react-transition-group": "^4.4.5",
"react-use-websocket": "^4.7.0", "react-use-websocket": "^4.7.0",
"react-zoom-pan-pinch": "^3.4.3",
"recoil": "^0.7.7", "recoil": "^0.7.7",
"scroll-into-view-if-needed": "^3.1.0", "scroll-into-view-if-needed": "^3.1.0",
"sonner": "^1.4.0", "sonner": "^1.4.0",
@ -6694,6 +6695,19 @@
"react-dom": ">= 18.0.0" "react-dom": ">= 18.0.0"
} }
}, },
"node_modules/react-zoom-pan-pinch": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.4.3.tgz",
"integrity": "sha512-x5MFlfAx2D6NTpZu8OISqc2nYn4p+YEaM1p21w7S/VE1wbVzK8vRzTo9Bj1ydufa649MuP7JBRM3vvj1RftFZw==",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
}
},
"node_modules/read-cache": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

1
web/package.json
View File

@ -57,6 +57,7 @@
"react-tracked": "^1.7.11", "react-tracked": "^1.7.11",
"react-transition-group": "^4.4.5", "react-transition-group": "^4.4.5",
"react-use-websocket": "^4.7.0", "react-use-websocket": "^4.7.0",
"react-zoom-pan-pinch": "^3.4.3",
"recoil": "^0.7.7", "recoil": "^0.7.7",
"scroll-into-view-if-needed": "^3.1.0", "scroll-into-view-if-needed": "^3.1.0",
"sonner": "^1.4.0", "sonner": "^1.4.0",

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

@ -55,6 +55,7 @@ import {
MdZoomOut, MdZoomOut,
} from "react-icons/md"; } from "react-icons/md";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import useSWR from "swr"; import useSWR from "swr";
type LiveCameraViewProps = { type LiveCameraViewProps = {
@ -263,6 +264,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
aspectRatio: aspectRatio, aspectRatio: aspectRatio,
}} }}
> >
<TransformWrapper minScale={1.0}>
<div className="p-2">
<TransformComponent>
<LivePlayer <LivePlayer
key={camera.name} key={camera.name}
className={`${fullscreen ? "*:rounded-none" : ""}`} className={`${fullscreen ? "*:rounded-none" : ""}`}
@ -273,6 +277,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
micEnabled={mic} micEnabled={mic}
preferredLiveMode={preferredLiveMode} preferredLiveMode={preferredLiveMode}
/> />
</TransformComponent>
</div>
</TransformWrapper>
</div> </div>
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />} {camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}
</div> </div>