From 897afd96d4fc9c8ecd12033f84c2669f74f0452c Mon Sep 17 00:00:00 2001
From: Michael Pearson <michael.pearson@canva.com>
Date: Sat, 23 Apr 2022 13:10:16 +1000
Subject: [PATCH] Fix after rebase & add UI option for showing confirmation
 prompts

---
 frigate/config.py          |  3 +++
 web/src/routes/Cameras.jsx | 24 +++++++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frigate/config.py b/frigate/config.py
index 58b064214..fb7c2fa9c 100644
--- a/frigate/config.py
+++ b/frigate/config.py
@@ -46,6 +46,9 @@ class DetectorConfig(FrigateBaseModel):
 
 class UIConfig(FrigateBaseModel):
     use_experimental: bool = Field(default=False, title="Experimental UI")
+    show_confirmation_prompts: bool = Field(
+        default=False, title="Show confirmation prompts"
+    )
 
 
 class MqttConfig(FrigateBaseModel):
diff --git a/web/src/routes/Cameras.jsx b/web/src/routes/Cameras.jsx
index 4bc449602..9ce907a71 100644
--- a/web/src/routes/Cameras.jsx
+++ b/web/src/routes/Cameras.jsx
@@ -5,7 +5,7 @@ import CameraImage from '../components/CameraImage';
 import ClipIcon from '../icons/Clip';
 import MotionIcon from '../icons/Motion';
 import SnapshotIcon from '../icons/Snapshot';
-import Dialog from '../components/Dialog';
+import Prompt from '../components/Prompt';
 import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt';
 import { useMemo, useState } from 'preact/hooks';
 import useSWR from 'swr';
@@ -40,6 +40,8 @@ function SortedCameras({ unsortedCameras }) {
 }
 
 function Camera({ name }) {
+  const {data: config} = useSWR('config');
+  const showConfirmationPrompts = config && config.ui.show_confirmation_prompts;
   const { payload: detectValue, send: sendDetect } = useDetectState(name);
   const [showToggleDetectDialog, setShowToggleDetectDialog] = useState(false);
   const { payload: recordValue, send: sendRecordings } = useRecordingsState(name);
@@ -60,7 +62,11 @@ function Camera({ name }) {
         icon: MotionIcon,
         color: detectValue === 'ON' ? 'blue' : 'gray',
         onClick: () => {
-          setShowToggleDetectDialog(true);
+          if (showConfirmationPrompts) {
+            setShowToggleDetectDialog(true);
+          } else {
+            sendDetect(recordValue === 'ON' ? 'OFF' : 'ON');
+          }
         },
       },
       {
@@ -68,7 +74,11 @@ function Camera({ name }) {
         icon: ClipIcon,
         color: recordValue === 'ON' ? 'blue' : 'gray',
         onClick: () => {
-          setShowToggleRecordingDialog(true);
+          if (showConfirmationPrompts) {
+            setShowToggleRecordingDialog(true);
+          } else {
+            sendRecordings(recordValue === 'ON' ? 'OFF' : 'ON');
+          }
         },
       },
       {
@@ -76,7 +86,11 @@ function Camera({ name }) {
         icon: SnapshotIcon,
         color: snapshotValue === 'ON' ? 'blue' : 'gray',
         onClick: () => {
-          setShowToggleSnapshotDialog(true);
+          if (showConfirmationPrompts) {
+            setShowToggleSnapshotDialog(true);
+          } else {
+            sendSnapshots(recordValue === 'ON' ? 'OFF' : 'ON');
+          }
         },
       },
     ],
@@ -120,7 +134,7 @@ function Camera({ name }) {
     <Fragment>
       <Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} />
       {dialogs.map(({showDialog, dismiss, title, callback}) =>
-        showDialog ? <Dialog
+        showDialog ? <Prompt
           title={title}
           text="Are you sure?"
           onDismiss={dismiss}