Add visual design for pan / tilt

web/src/components/CameraControlPanel.jsx

@@ -3,6 +3,10 @@ import { useState } from 'preact/hooks';
 import useSWR from 'swr';
 import { usePtzCommand } from '../api/ws';
 import ActivityIndicator from './ActivityIndicator';
+import ArrowRightDouble from '../icons/ArrowRightDouble';
+import ArrowUpDouble from '../icons/ArrowUpDouble';
+import ArrowDownDouble from '../icons/ArrowDownDouble';
+import ArrowLeftDouble from '../icons/ArrowLeftDouble';
 import Button from './Button';
 
 export default function CameraControlPanel({ camera = '' }) {
@@ -27,8 +31,24 @@ export default function CameraControlPanel({ camera = '' }) {
   }
 
   return (
-    <div data-testid="control-panel" className="grid grid-cols-1 3xl:grid-cols-4 md:grid-cols-3 gap-4">
+    <div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      ptz is enabled with features {ptz.features[0]}
+      {ptz.features.includes('pt') && (
+        <div className="w-44 p-4">
+          <div className="w-full flex justify-center">
+            <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
+          </div>
+          <div className="w-full flex justify-between">
+            <ArrowLeftDouble className="h-12 p-2 bg-slate-500" />
+            <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
+          </div>
+          <div className="flex justify-center">
+            <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
+          </div>
+        </div>
+      )}
+
+      {ptz.features.includes('zoom') && <div>zoom</div>}
+
       {ptz.presets && (
         <div>
           <div className="p-4">

web/src/icons/ArrowDownDouble.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function ArrowDownDouble({ className = '' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className}`}
+    >
+      <path d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
+    </svg>
+  );
+}
+
+export default memo(ArrowDownDouble);

web/src/icons/ArrowLeftDouble.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function ArrowLeftDouble({ className = '' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className}`}
+    >
+      <path d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
+    </svg>
+  );
+}
+
+export default memo(ArrowLeftDouble);

web/src/icons/ArrowRightDouble.jsx

@@ -3,8 +3,15 @@ import { memo } from 'preact/compat';
 
 export function ArrowRightDouble({ className = '' }) {
   return (
-    <svg className={`fill-current ${className}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <svg
-      <path d="M0 3.795l2.995-2.98 11.132 11.185-11.132 11.186-2.995-2.981 8.167-8.205-8.167-8.205zm18.04 8.205l-8.167 8.205 2.995 2.98 11.132-11.185-11.132-11.186-2.995 2.98 8.167 8.206z" />
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className}`}
+    >
+      <path d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
     </svg>
   );
 }

web/src/icons/ArrowUpDouble.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function ArrowUpDouble({ className = '' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className}`}
+    >
+      <path d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5" />
+    </svg>
+  );
+}
+
+export default memo(ArrowUpDouble);