Show settings cog for camera toggles on mobile (#8098)

* Show settings cog on mobile

* Cleanup ui and remove label

* Fix tests

web/src/components/Switch.jsx

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
 
-export default function Switch({ checked, id, onChange, label, labelPosition = 'before' }) {
+export default function Switch({ className, checked, id, onChange, label, labelPosition = 'before' }) {
   const [isFocused, setFocused] = useState(false);
 
   const handleChange = useCallback(() => {
@@ -21,7 +21,7 @@ export default function Switch({ checked, id, onChange, label, labelPosition = '
   return (
     <label
       htmlFor={id}
-      className={`flex items-center space-x-4 w-full ${onChange ? 'cursor-pointer' : 'cursor-not-allowed'}`}
+      className={`${className ? className : ''} flex items-center space-x-4 w-full ${onChange ? 'cursor-pointer' : 'cursor-not-allowed'}`}
     >
       {label && labelPosition === 'before' ? (
         <div data-testid={`${id}-label`} className="inline-flex flex-grow">

web/src/routes/Cameras.jsx

@@ -5,24 +5,41 @@ import CameraImage from '../components/CameraImage';
 import AudioIcon from '../icons/Audio';
 import ClipIcon from '../icons/Clip';
 import MotionIcon from '../icons/Motion';
+import SettingsIcon from '../icons/Settings';
 import SnapshotIcon from '../icons/Snapshot';
 import { useAudioState, useDetectState, useRecordingsState, useSnapshotsState } from '../api/ws';
 import { useMemo } from 'preact/hooks';
 import useSWR from 'swr';
+import { useRef, useState } from 'react';
+import { useResizeObserver } from '../hooks';
+import Dialog from '../components/Dialog';
+import Switch from '../components/Switch';
+import Heading from '../components/Heading';
+import Button from '../components/Button';
 
 export default function Cameras() {
   const { data: config } = useSWR('config');
 
+  const containerRef = useRef(null);
+  const [{ width: containerWidth }] = useResizeObserver(containerRef);
+  // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering.
+  // https://github.com/blakeblackshear/frigate/issues/1657
+  let scrollBarWidth = 0;
+  if (window.innerWidth && document.body.offsetWidth) {
+    scrollBarWidth = window.innerWidth - document.body.offsetWidth;
+  }
+  const availableWidth = scrollBarWidth ? containerWidth + scrollBarWidth : containerWidth;
+
   return !config ? (
     <ActivityIndicator />
   ) : (
-    <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
+    <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4" ref={containerRef}>
-      <SortedCameras config={config} unsortedCameras={config.cameras} />
+      <SortedCameras config={config} unsortedCameras={config.cameras} availableWidth={availableWidth} />
     </div>
   );
 }
 
-function SortedCameras({ config, unsortedCameras }) {
+function SortedCameras({ config, unsortedCameras, availableWidth }) {
   const sortedCameras = useMemo(
     () =>
       Object.entries(unsortedCameras)
@@ -34,17 +51,20 @@ function SortedCameras({ config, unsortedCameras }) {
   return (
     <Fragment>
       {sortedCameras.map(([camera, conf]) => (
-        <Camera key={camera} name={camera} config={config.cameras[camera]} conf={conf} />
+        <Camera key={camera} name={camera} config={config.cameras[camera]} conf={conf} availableWidth={availableWidth} />
       ))}
     </Fragment>
   );
 }
 
-function Camera({ name, config }) {
+function Camera({ name, config, availableWidth }) {
   const { payload: detectValue, send: sendDetect } = useDetectState(name);
   const { payload: recordValue, send: sendRecordings } = useRecordingsState(name);
   const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
   const { payload: audioValue, send: sendAudio } = useAudioState(name);
+
+  const [cameraOptions, setCameraOptions] = useState('');
+
   const href = `/cameras/${name}`;
   const buttons = useMemo(() => {
     return [
@@ -56,7 +76,15 @@ function Camera({ name, config }) {
     return `${name.replaceAll('_', ' ')}`;
   }, [name]);
   const icons = useMemo(
-    () => [
+    () => (availableWidth < 448 ? [
+      {
+        icon: SettingsIcon,
+        color: 'gray',
+        onClick: () => {
+          setCameraOptions(config.name);
+        },
+      },
+    ] : [
       {
         name: `Toggle detect ${detectValue === 'ON' ? 'off' : 'on'}`,
         icon: MotionIcon,
@@ -95,17 +123,64 @@ function Camera({ name, config }) {
           },
         }
         : null,
-    ].filter((button) => button != null),
+    ]).filter((button) => button != null),
-    [config, audioValue, sendAudio, detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
+    [config, availableWidth, setCameraOptions, audioValue, sendAudio, detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
   );
 
   return (
-    <Card
+    <Fragment>
-      buttons={buttons}
+      {cameraOptions && (
-      href={href}
+        <Dialog>
-      header={cleanName}
+          <div className="p-4">
-      icons={icons}
+            <Heading size="md">{`${name.replaceAll('_', ' ')} Settings`}</Heading>
-      media={<CameraImage camera={name} stretch />}
+            <Switch
-    />
+              className="my-3"
+              checked={detectValue == 'ON'}
+              id="detect"
+              onChange={() => sendDetect(detectValue === 'ON' ? 'OFF' : 'ON', true)}
+              label="Detect"
+              labelPosition="before"
+            />
+            {config.record.enabled_in_config && <Switch
+              className="my-3"
+              checked={recordValue == 'ON'}
+              id="record"
+              onChange={() => sendRecordings(recordValue === 'ON' ? 'OFF' : 'ON', true)}
+              label="Recordings"
+              labelPosition="before"
+            />}
+            <Switch
+              className="my-3"
+              checked={snapshotValue == 'ON'}
+              id="snapshot"
+              onChange={() => sendSnapshots(snapshotValue === 'ON' ? 'OFF' : 'ON', true)}
+              label="Snapshots"
+              labelPosition="before"
+            />
+            {config.audio.enabled_in_config && <Switch
+              className="my-3"
+              checked={audioValue == 'ON'}
+              id="audio"
+              onChange={() => sendAudio(audioValue === 'ON' ? 'OFF' : 'ON', true)}
+              label="Audio Detection"
+              labelPosition="before"
+            />}
+          </div>
+          <div className="p-2 flex justify-start flex-row-reverse space-x-2">
+            <Button className="ml-2" onClick={() => setCameraOptions('')} type="text">
+              Close
+            </Button>
+          </div>
+        </Dialog>
+      )}
+
+      <Card
+        buttons={buttons}
+        href={href}
+        header={cleanName}
+        icons={icons}
+        media={<CameraImage camera={name} stretch />}
+      />
+    </Fragment>
   );
 }

web/src/routes/__tests__/Cameras.test.jsx

@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import * as CameraImage from '../../components/CameraImage';
+import * as Hooks from '../../hooks';
 import * as WS from '../../api/ws';
 import Cameras from '../Cameras';
 import { fireEvent, render, screen, waitForElementToBeRemoved } from 'testing-library';
@@ -8,6 +9,7 @@ describe('Cameras Route', () => {
   beforeEach(() => {
     vi.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
     vi.spyOn(WS, 'useWs').mockImplementation(() => ({ value: { payload: 'OFF' }, send: vi.fn() }));
+    vi.spyOn(Hooks, 'useResizeObserver').mockImplementation(() => [{ width: 1000 }]);
   });
 
   test('shows an ActivityIndicator if not yet loaded', async () => {

web/src/routes/__tests__/Recording.test.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import * as CameraImage from '../../components/CameraImage';
 import * as WS from '../../api/ws';
+import * as Hooks from '../../hooks';
 import Cameras from '../Cameras';
 import { render, screen, waitForElementToBeRemoved } from 'testing-library';
 
@@ -8,6 +9,7 @@ describe('Recording Route', () => {
   beforeEach(() => {
     vi.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
     vi.spyOn(WS, 'useWs').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
+    vi.spyOn(Hooks, 'useResizeObserver').mockImplementation(() => [{ width: 1000 }]);
   });
 
   test('shows an ActivityIndicator if not yet loaded', async () => {