Merge branch 'blakeblackshear:dev' into API-enhancements

frigate/ptz/onvif.py

@@ -176,7 +176,7 @@ class OnvifController:
 
         for preset in presets:
             self.cams[camera_name]["presets"][
-                preset.get("Name", f"preset {preset['token']}").lower()
+                getattr(preset, "Name", f"preset {preset['token']}").lower()
             ] = preset["token"]
 
         # get list of supported features

web/src/components/MultiSelect.jsx

@@ -4,9 +4,7 @@ import Menu from './Menu';
 import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
-import CameraIcon from '../icons/Camera';
-import SpeakerIcon from '../icons/Speaker';
-import useSWR from 'swr';
+import SelectOnlyIcon from '../icons/SelectOnly';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
   const popupRef = useRef(null);
@@ -20,7 +18,6 @@ export default function MultiSelect({ className, title, options, selection, onTo
   };
 
   const menuHeight = Math.round(window.innerHeight * 0.55);
-  const { data: config } = useSWR('config');
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
@@ -61,7 +58,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
                   className="max-h-[35px] mx-2"
                   onClick={() => onSelectSingle(item)}
                 >
-                  {title === 'Labels' && config.audio.listen.includes(item) ? <SpeakerIcon /> : <CameraIcon />}
+                  { ( <SelectOnlyIcon /> ) }
                 </Button>
               </div>
             </div>

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/icons/SelectOnly.jsx

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function SelectOnly({ className = 'h-5 w-5', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 7H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z"
+      />
+    </svg>
+  );
+}
+
+export default memo(SelectOnly);

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">
-      <SortedCameras config={config} unsortedCameras={config.cameras} />
+    <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} 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),
-    [config, audioValue, sendAudio, detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
+    ]).filter((button) => button != null),
+    [config, availableWidth, setCameraOptions, audioValue, sendAudio, detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
   );
 
   return (
-    <Card
-      buttons={buttons}
-      href={href}
-      header={cleanName}
-      icons={icons}
-      media={<CameraImage camera={name} stretch />}
-    />
+    <Fragment>
+      {cameraOptions && (
+        <Dialog>
+          <div className="p-4">
+            <Heading size="md">{`${name.replaceAll('_', ' ')} Settings`}</Heading>
+            <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 () => {