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