Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-12-23 19:11:14 +01:00
Code Issues Projects Releases Wiki Activity

feat(web): allow CameraImage to stretch

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-13 07:24:53 -08:00 committed by Blake Blackshear
parent 52a29ed00a
commit 7314572d97
3 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/CameraImage.jsx
View File

@ -4,7 +4,7 @@ import { useApiHost, useConfig } from '../api';
import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
import { useResizeObserver } from '../hooks';
export default function CameraImage({ camera, onload, searchParams = '' }) {
export default function CameraImage({ camera, onload, searchParams = '', stretch = false }) {
const { data: config } = useConfig();
const apiHost = useApiHost();
const [hasLoaded, setHasLoaded] = useState(false);
@ -15,11 +15,10 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
const { name, width, height } = config.cameras[camera];
const aspectRatio = width / height;
const scaledHeight = useMemo(() => Math.min(Math.ceil(availableWidth / aspectRatio), height), [
availableWidth,
aspectRatio,
height,
]);
const scaledHeight = useMemo(() => {
const scaledHeight = Math.floor(availableWidth / aspectRatio);
return stretch ? scaledHeight : Math.min(scaledHeight, height);
}, [availableWidth, aspectRatio, height, stretch]);
const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio), [scaledHeight, aspectRatio]);
const img = useMemo(() => new Image(), []);

20
web/src/components/__tests__/CameraImage.test.jsx
View File

@ -25,12 +25,18 @@ describe('CameraImage', () => {
render(<CameraImage camera="front" />);
expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
expect(screen.queryByTestId('cameraimage-canvas')).toMatchInlineSnapshot(`
<canvas
data-testid="cameraimage-canvas"
height="405"
width="720"
/>
`);
const canvas = screen.queryByTestId('cameraimage-canvas');
expect(canvas).toHaveAttribute('height', '405');
expect(canvas).toHaveAttribute('width', '720');
});
test('allows camera image to stretch to available space', async () => {
jest.spyOn(Hooks, 'useResizeObserver').mockReturnValueOnce([{ width: 1400 }]);
render(<CameraImage camera="front" stretch />);
expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
const canvas = screen.queryByTestId('cameraimage-canvas');
expect(canvas).toHaveAttribute('height', '787');
expect(canvas).toHaveAttribute('width', '1400');
});
});

2
web/src/routes/Cameras.jsx
View File

@ -23,5 +23,5 @@ function Camera({ name }) {
const href = `/cameras/${name}`;
const buttons = useMemo(() => [{ name: 'Events', href: `/events?camera=${name}` }], [name]);
return <Card buttons={buttons} href={href} header={name} media={<CameraImage camera={name} />} />;
return <Card buttons={buttons} href={href} header={name} media={<CameraImage camera={name} stretch />} />;
}