Initial scaffold: React+TS+Vite frontend, FastAPI backend, config system

2026-02-25 21:57:36 -06:00
commit 11eab66e9d
45 changed files with 4508 additions and 0 deletions
--- a/frontend/src/components/player/FullscreenView.tsx
+++ b/frontend/src/components/player/FullscreenView.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useCallback } from 'react';
+import { useUIStore } from '@/stores/uiStore';
+import { useConfigStore } from '@/stores/configStore';
+import { CameraPlayer } from './CameraPlayer';
+
+export function FullscreenView() {
+  const { fullscreenCamera, setFullscreenCamera } = useUIStore();
+  const cameras = useConfigStore((s) => s.enabledCameras());
+
+  const currentIdx = cameras.findIndex((c) => c.name === fullscreenCamera);
+  const camera = currentIdx >= 0 ? cameras[currentIdx] : null;
+
+  const navigate = useCallback((dir: 1 | -1) => {
+    if (cameras.length === 0) return;
+    const next = (currentIdx + dir + cameras.length) % cameras.length;
+    setFullscreenCamera(cameras[next].name);
+  }, [cameras, currentIdx, setFullscreenCamera]);
+
+  const close = useCallback(() => setFullscreenCamera(null), [setFullscreenCamera]);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+      else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') navigate(1);
+      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') navigate(-1);
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [close, navigate]);
+
+  if (!camera) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-dark-primary flex flex-col">
+      {/* Header */}
+      <div className="h-12 bg-dark-secondary border-b border-dark-border flex items-center justify-between px-4 shrink-0">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => navigate(-1)}
+            className="p-1.5 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <h2 className="text-base font-semibold text-white">{camera.display_name}</h2>
+          <button
+            onClick={() => navigate(1)}
+            className="p-1.5 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+          <span className="text-xs text-gray-500 ml-2">{currentIdx + 1} / {cameras.length}</span>
+        </div>
+
+        <button
+          onClick={close}
+          className="p-2 text-gray-400 hover:text-white hover:bg-dark-hover rounded-lg transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Video */}
+      <div className="flex-1 flex items-center justify-center p-4">
+        <CameraPlayer
+          key={camera.name}
+          camera={camera}
+          className="w-full h-full rounded-lg"
+          showLabel={false}
+        />
+      </div>
+    </div>
+  );
+}