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

Live camera aspect ratio fixes (#10266)

Browse Source 
* dynamically manage aspect ratio

* full size

* always use camera aspect ratio for mobile

* no need for different handling for pano cams

* don't set aspect ratio on fullscreen
This commit is contained in:
Josh Hawkins
2024-03-05 14:19:56 -06:00
committed by GitHub
parent 7be2923d2d
commit ed99be0856
4 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/hooks/resize-observer.ts
View File

@@ -1,7 +1,11 @@
import { MutableRefObject, useEffect, useMemo, useState } from "react";
export function useResizeObserver(...refs: MutableRefObject<Element | null>[]) {
const [dimensions, setDimensions] = useState(
type RefType = MutableRefObject<Element | null> | Window;
export function useResizeObserver(...refs: RefType[]) {
const [dimensions, setDimensions] = useState<
{ width: number; height: number; x: number; y: number }[]
>(
new Array(refs.length).fill({
width: 0,
height: 0,
@@ -21,14 +25,18 @@ export function useResizeObserver(...refs: MutableRefObject<Element | null>[]) {
useEffect(() => {
refs.forEach((ref) => {
if (ref.current) {
if (ref instanceof Window) {
resizeObserver.observe(document.body);
} else if (ref.current) {
resizeObserver.observe(ref.current);
}
});
return () => {
refs.forEach((ref) => {
if (ref.current) {
if (ref instanceof Window) {
resizeObserver.unobserve(document.body);
} else if (ref.current) {
resizeObserver.unobserve(ref.current);
}
});