chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Various bugfixes and improvements (#11624)

Browse Source 
* various bugfixes and improvements

* add separator

* no separator
This commit is contained in:
Josh Hawkins
2024-05-29 13:05:28 -05:00
committed by GitHub
parent 3dd401f57a
commit f1c0422d5e
7 changed files with 90 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/views/live/LiveBirdseyeView.tsx
View File

@@ -42,12 +42,24 @@ export default function LiveBirdseyeView() {
return config.birdseye.width / config.birdseye.height;
}, [config]);
const windowAspectRatio = useMemo(() => {
return windowWidth / windowHeight;
}, [windowWidth, windowHeight]);
const containerAspectRatio = useMemo(() => {
if (!containerRef.current) {
return windowAspectRatio;
}
return containerRef.current.clientWidth / containerRef.current.clientHeight;
}, [windowAspectRatio, containerRef]);
const growClassName = useMemo(() => {
if (isMobile) {
if (isPortrait) {
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
} else {
if (cameraAspectRatio > 16 / 9) {
if (cameraAspectRatio > containerAspectRatio) {
return "absolute left-0 top-[50%] -translate-y-[50%]";
} else {
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
@@ -56,7 +68,7 @@ export default function LiveBirdseyeView() {
}
if (fullscreen) {
if (cameraAspectRatio > 16 / 9) {
if (cameraAspectRatio > containerAspectRatio) {
return "absolute inset-x-2 top-[50%] -translate-y-[50%]";
} else {
return "absolute inset-y-2 left-[50%] -translate-x-[50%]";
@@ -64,7 +76,7 @@ export default function LiveBirdseyeView() {
} else {
return "absolute top-0 bottom-0 left-[50%] -translate-x-[50%]";
}
}, [cameraAspectRatio, fullscreen, isPortrait]);
}, [cameraAspectRatio, containerAspectRatio, fullscreen, isPortrait]);
const preferredLiveMode = useMemo(() => {
if (!config || !config.birdseye.restream) {
@@ -78,18 +90,6 @@ export default function LiveBirdseyeView() {
return "mse";
}, [config]);
const windowAspectRatio = useMemo(() => {
return windowWidth / windowHeight;
}, [windowWidth, windowHeight]);
const containerAspectRatio = useMemo(() => {
if (!containerRef.current) {
return windowAspectRatio;
}
return containerRef.current.clientWidth / containerRef.current.clientHeight;
}, [windowAspectRatio, containerRef]);
const aspectRatio = useMemo<number>(() => {
if (isMobile || fullscreen) {
return cameraAspectRatio;