first commit

src/components/AppShell.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import TopNav from "@/components/TopNav";
+
+export default function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-dvh bg-zinc-950 text-zinc-50">
+      <TopNav />
+      <main className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 md:py-6">
+        {children}
+      </main>
+    </div>
+  );
+}
+

src/components/CameraTile.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Maximize, RefreshCcw } from "lucide-react";
+import { useWhepPlayer } from "@/hooks/useWhepPlayer";
+
+type Props = {
+  name: string;
+  webrtcBaseUrl: string;
+  isOnline: boolean;
+};
+
+function StatusDot({ online }: { online: boolean }) {
+  return (
+    <span
+      className={[
+        "inline-flex h-2.5 w-2.5 rounded-full",
+        online ? "bg-emerald-400" : "bg-rose-400",
+      ].join(" ")}
+      aria-label={online ? "online" : "offline"}
+      title={online ? "online" : "offline"}
+    />
+  );
+}
+
+export default function CameraTile({ name, webrtcBaseUrl, isOnline }: Props) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        setVisible(Boolean(entry?.isIntersecting));
+      },
+      { threshold: 0.2 }
+    );
+
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  const enabled = useMemo(() => visible, [visible]);
+  const player = useWhepPlayer({ enabled, webrtcBaseUrl, streamName: name });
+
+  const onFullscreen = async () => {
+    const v = player.videoRef.current;
+    if (!v) return;
+    const anyV = v as HTMLVideoElement & { webkitRequestFullscreen?: () => Promise<void> | void };
+    if (v.requestFullscreen) await v.requestFullscreen();
+    else if (anyV.webkitRequestFullscreen) anyV.webkitRequestFullscreen();
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/30"
+    >
+      <div className="absolute left-0 top-0 z-10 flex w-full items-center justify-between gap-2 bg-gradient-to-b from-zinc-950/80 to-transparent px-3 py-2">
+        <div className="flex items-center gap-2">
+          <StatusDot online={isOnline} />
+          <div className="text-xs font-medium text-zinc-100">{name}</div>
+          <div className="text-[11px] text-zinc-400">
+            {player.status === "playing" ? "webrtc" : player.status}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 opacity-100 transition md:opacity-0 md:group-hover:opacity-100">
+          <button
+            type="button"
+            onClick={player.restart}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
+            title="Reload"
+          >
+            <RefreshCcw className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onClick={onFullscreen}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
+            title="Fullscreen"
+          >
+            <Maximize className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="aspect-video w-full bg-black">
+        <video
+          ref={player.videoRef}
+          className="h-full w-full object-contain"
+          muted
+          playsInline
+        />
+      </div>
+
+      {player.status === "error" ? (
+        <div className="border-t border-zinc-800 px-3 py-2 text-xs text-rose-300">
+          {player.error ?? "error"}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+

src/components/Empty.tsx

@@ -0,0 +1,8 @@
+import { cn } from '@/lib/utils'
+
+// Empty component
+export default function Empty() {
+  return (
+    <div className={cn('flex h-full items-center justify-center')}>Empty</div>
+  )
+}

src/components/TopNav.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+import TopNav from "@/components/TopNav";
+
+describe("TopNav", () => {
+  it("renders navigation links", () => {
+    render(
+      <MemoryRouter>
+        <TopNav />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Live")).toBeInTheDocument();
+    expect(screen.getByText("Playback")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+  });
+});
+

src/components/TopNav.tsx

@@ -0,0 +1,55 @@
+import { NavLink } from "react-router-dom";
+import { Film, Settings2, Video } from "lucide-react";
+import type { ReactNode } from "react";
+
+function NavItem({
+  to,
+  label,
+  icon,
+}: {
+  to: string;
+  label: string;
+  icon: ReactNode;
+}) {
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        [
+          "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition",
+          isActive
+            ? "bg-zinc-800 text-zinc-50"
+            : "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50",
+        ].join(" ")
+      }
+    >
+      <span className="inline-flex h-4 w-4 items-center justify-center">{icon}</span>
+      <span>{label}</span>
+    </NavLink>
+  );
+}
+
+export default function TopNav() {
+  return (
+    <header className="border-b border-zinc-800 bg-zinc-950/70 backdrop-blur">
+      <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 md:px-6">
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-900 ring-1 ring-zinc-800">
+            <Video className="h-5 w-5" />
+          </div>
+          <div className="leading-tight">
+            <div className="text-sm font-semibold">IPCam Dashboard</div>
+            <div className="text-xs text-zinc-400">MediaMTX + Orange Pi</div>
+          </div>
+        </div>
+
+        <nav className="flex items-center gap-1">
+          <NavItem to="/live" label="Live" icon={<Video className="h-4 w-4" />} />
+          <NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} />
+          <NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} />
+        </nav>
+      </div>
+    </header>
+  );
+}
+