Add ability to restart

web/src/AppBar.jsx

@@ -5,12 +5,17 @@ import Menu, { MenuItem, MenuSeparator } from './components/Menu';
 import AutoAwesomeIcon from './icons/AutoAwesome';
 import LightModeIcon from './icons/LightMode';
 import DarkModeIcon from './icons/DarkMode';
+import FrigateRestartIcon from './icons/FrigateRestart';
+import Dialog from './components/Dialog';
 import { useDarkMode } from './context';
 import { useCallback, useRef, useState } from 'preact/hooks';
+import { useRestart } from './api/mqtt';
 
 export default function AppBar() {
   const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const [showDialog, setShowDialog] = useState(false);
   const { setDarkMode } = useDarkMode();
+  const { send: sendRestart } = useRestart();
 
   const handleSelectDarkMode = useCallback(
     (value, label) => {
@@ -30,6 +35,20 @@ export default function AppBar() {
     setShowMoreMenu(false);
   }, [setShowMoreMenu]);
 
+  const handleClickRestartDialog = useCallback(() => {
+    setShowDialog(false);
+    sendRestart();
+  }, [setShowDialog]);
+
+  const handleDismissRestartDialog = () => {
+    setShowDialog(false);
+  };
+
+  const handleRestart = useCallback(() => {
+    setShowMoreMenu(false);
+    setShowDialog(true);
+  });
+
   return (
     <Fragment>
       <BaseAppBar title={LinkedLogo} overflowRef={moreRef} onOverflowClick={handleShowMenu} />
@@ -39,7 +58,20 @@ export default function AppBar() {
           <MenuSeparator />
           <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
           <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+          <MenuSeparator />
+          <MenuItem icon={RestartFrigateIcon} label="Restart Frigate" onSelect={handleRestart} />
         </Menu>
+      ) : null},
+      {showDialog ? (
+        <Dialog
+          onDismiss={handleDismissRestartDialog}
+          title="Restart Frigate"
+          text="Are you sure?"
+          actions={[
+            { text: 'Yes', color: 'red', onClick: handleClickRestartDialog },
+            { text: 'Cancel', onClick: handleDismissRestartDialog },
+          ]}
+        />
       ) : null}
     </Fragment>
   );

web/src/api/mqtt.jsx

@@ -72,7 +72,7 @@ export function MqttProvider({
   return <Mqtt.Provider value={{ state, ws: wsRef.current }}>{children}</Mqtt.Provider>;
 }
 
-export function useMqtt(watchTopic, publishTopic) {
+export function useMqtt(watchTopic, publishTopic, defaultValue = null) {
   const { state, ws } = useContext(Mqtt);
 
   const value = state[watchTopic] || { payload: null };
@@ -118,3 +118,12 @@ export function useSnapshotsState(camera) {
   } = useMqtt(`${camera}/snapshots/state`, `${camera}/snapshots/set`);
   return { payload, send, connected };
 }
+
+export function useRestart() {
+  const {
+    value: { payload },
+    send,
+    connected,
+  } = useMqtt(``, `restart`, "container");
+  return { send, connected };
+}

web/src/icons/FrigateRestart.jsx

@@ -0,0 +1,13 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function FrigateRestart({ className = '' }) {
+  return (
+    <svg className={`fill-current ${className}`} viewBox="0 0 24 24">
+      <rect fill="none" height="24" width="24" />
+      <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
+    </svg>
+  );
+}
+
+export default memo(FrigateRestart);