goop converter

2026-09-16 09:31:20 -04:00 · 2026-04-28 19:31:02 -04:00
parent 86eb7e628e
commit 07ad9ab253
63 changed files with 194 additions and 418 deletions
@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { useSession } from '../../context/SessionContext.jsx';
+import { useSettingsNamespace } from '../../settings/index.js';
+import { useRoomCameraSnapshots } from '../../hooks/useRoomCameraSnapshots.js';
+import RoomCameraFeed from '../RoomCameraFeed/index.jsx';
+
+function EmptyState() {
+  return (
+    <div className="panel-section space-y-0.5 text-sm">
+      <p className="text-center text-slate-400">No room cameras configured.</p>
+      <p className="text-center text-slate-500">Add entries to server config to populate this list.</p>
+    </div>
+  );
+}
+
+const ORIENTATIONS = ['horizontal', 'vertical'];
+
+function normalizeOrientation(value, fallback) {
+  if (ORIENTATIONS.includes(value)) {
+    return value;
+  }
+  return fallback;
+}
+
+export default function RoomCameraPanel({
+  defaultOrientation = 'horizontal',
+  orientation: forcedOrientation,
+  hideLayoutToggle = false,
+  hideHeader = false,
+  panelId = null,
+}) {
+  const { session } = useSession();
+  const cameras = session?.roomCameras || [];
+  const feedMap = useRoomCameraSnapshots(cameras.map((camera) => ({ id: camera.id })));
+  const { value: orientationSettings, save: saveOrientationSettings } = useSettingsNamespace('roomCameraPanels', {});
+  const [orientation, setOrientation] = useState(() =>
+    normalizeOrientation(
+      panelId ? orientationSettings?.[panelId] : defaultOrientation,
+      'horizontal',
+    ),
+  );
+
+  useEffect(() => {
+    if (!panelId) return;
+    const stored = orientationSettings?.[panelId];
+    if (!stored) return;
+    setOrientation(normalizeOrientation(stored, 'horizontal'));
+    // only respond to changes for this panel id
+  }, [panelId, orientationSettings?.[panelId]]);
+  const effectiveOrientation = forcedOrientation
+    ? normalizeOrientation(forcedOrientation, 'horizontal')
+    : orientation;
+  const containerClass =
+    effectiveOrientation === 'vertical' ? 'flex flex-col gap-0.5' : 'grid gap-0.5 md:grid-cols-2';
+  const showLayoutToggle = !hideLayoutToggle && !forcedOrientation && cameras.length > 0;
+  const applyOrientation = (next) => {
+    setOrientation(next);
+    if (panelId) {
+      saveOrientationSettings((current) => ({ ...(current || {}), [panelId]: next }));
+    }
+  };
+
+  if (cameras.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <section className="panel-section space-y-0.5 text-base">
+      {!hideHeader && (
+        <header className="flex flex-wrap items-center justify-between gap-0.5 text-sm text-slate-400">
+          <div className="flex items-center gap-0.5">
+            <p>Room cameras</p>
+            <span className="text-xs text-slate-500">{cameras.length}</span>
+          </div>
+          <div className="flex flex-wrap items-center gap-0.5 text-xs">
+            {showLayoutToggle && (
+              <div className="flex items-center gap-0.5">
+                <span className="text-slate-500">Layout:</span>
+                <div className="inline-flex overflow-hidden rounded border border-slate-700">
+                  {ORIENTATIONS.map((option) => (
+                    <button
+                      key={option}
+                      type="button"
+                      className={`px-1 py-0.5 ${effectiveOrientation === option ? 'bg-slate-600 text-white' : 'bg-transparent text-slate-400 hover:text-white'}`}
+                      onClick={() => applyOrientation(option)}
+                    >
+                      {option === 'vertical' ? 'Vertical' : 'Grid'}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </header>
+      )}
+      <div className={containerClass}>
+        {cameras.map((camera) => {
+          const feed = feedMap[camera.id] || null;
+          return (
+            <article key={camera.id} className="w-full space-y-0.5 rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40">
+              {/* <header className="space-y-0.5">
+                <p className="text-lg font-semibold text-white">{camera.name || camera.id}</p>
+                {camera.description && <p className="text-xs text-slate-500">{camera.description}</p>}
+              </header> */}
+              <RoomCameraFeed feed={feed} label={camera.name || camera.id} />
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}