feat(web): allow CameraImage to stretch

web/src/components/CameraImage.jsx

@@ -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(), []);

web/src/components/__tests__/CameraImage.test.jsx

@@ -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');
  });
 });

web/src/routes/Cameras.jsx

@@ -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 />} />;
 }