Add ability to set presets from UI

web/src/api/ws.jsx

@@ -120,6 +120,15 @@ export function useSnapshotsState(camera) {
   return { payload, send, connected };
 }
 
+export function usePtzCommand(camera) {
+  const {
+    value: { payload },
+    send,
+    connected,
+  } = useWs(`${camera}/ptz`, `${camera}/ptz`);
+  return { payload, send, connected };
+}
+
 export function useRestart() {
   const {
     value: { payload },

web/src/components/CameraControlPanel.jsx

@@ -0,0 +1,56 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import useSWR from 'swr';
+import { usePtzCommand } from '../api/ws';
+import ActivityIndicator from './ActivityIndicator';
+import Button from './Button';
+
+export default function CameraControlPanel({ camera = '' }) {
+  const { data: ptz } = useSWR(`${camera}/ptz/info`);
+  const [currentPreset, setCurrentPreset] = useState('');
+
+  const { payload: _, send: sendPtz } = usePtzCommand(camera);
+
+  const onSetPreview = async (e) => {
+    e.stopPropagation();
+
+    if (currentPreset == 'none') {
+      return;
+    }
+
+    sendPtz(`preset-${currentPreset}`);
+    setCurrentPreset('');
+  };
+
+  if (!ptz) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-4 md:grid-cols-3 gap-4">
+      ptz is enabled with features {ptz.features[0]}
+      {ptz.presets && (
+        <div>
+          <div className="p-4">
+            <select
+              className="cursor-pointer rounded dark:bg-slate-800"
+              value={currentPreset}
+              onChange={(e) => {
+                setCurrentPreset(e.target.value);
+              }}
+            >
+              <option value="">Select Preset</option>
+              {ptz.presets.map((item) => (
+                <option key={item} value={item}>
+                  {item}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <Button onClick={(e) => onSetPreview(e)}>Move Camera To Preset</Button>
+        </div>
+      )}
+    </div>
+  );
+}

web/src/routes/Camera.jsx

@@ -15,6 +15,7 @@ import { useApiHost } from '../api';
 import useSWR from 'swr';
 import WebRtcPlayer from '../components/WebRtcPlayer';
 import MsePlayer from '../components/MsePlayer';
+import CameraControlPanel from '../components/CameraControlPanel';
 
 const emptyObject = Object.freeze({});
 
@@ -188,6 +189,12 @@ export default function Camera({ camera }) {
 
       {player}
 
+      {cameraConfig?.onvif?.host && (
+        <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4">
+          <CameraControlPanel camera={camera} />
+        </div>
+      )}
+
       <div className="space-y-4">
         <Heading size="sm">Tracked objects</Heading>
         <div className="flex flex-wrap justify-start">