Initial commit

2026-07-21 16:30:52 +02:00
commit c2b67d8bb2
46 changed files with 8518 additions and 0 deletions
@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { DSP, DSP_TYPES } from "../types";
+
+function AddDSPForm({
+  onCancel,
+  onAdd,
+}: {
+  onCancel: () => void;
+  onAdd: (d: Omit<DSP, "status">) => void;
+}) {
+  const [form, setForm] = useState({
+    name: "",
+    type: DSP_TYPES[0].name,
+    ip: "192.168.1.100",
+    port: DSP_TYPES[0].defaultPort,
+    deviceId: "",
+  });
+
+  const canSubmit = form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId;
+
+  function submit() {
+    if (!canSubmit) return;
+    onAdd({ id: crypto.randomUUID(), ...form });
+  }
+
+  return (
+    <div className="card form-card">
+      <div className="form-header">
+        <h1 className="panel-title">Add DSP</h1>
+        <p className="form-hint">Register a new device to control from this app.</p>
+      </div>
+
+      <div className="field">
+        <label htmlFor="f-name">Name</label>
+        <input
+          id="f-name"
+          placeholder="Main Room DSP"
+          value={form.name}
+          onChange={e => setForm({ ...form, name: e.target.value })}
+        />
+      </div>
+
+      <div className="field-row">
+        <div className="field">
+          <label htmlFor="f-type">Model</label>
+          <select
+            id="f-type"
+            value={form.type}
+            onChange={e => {
+                const selected = DSP_TYPES.find(
+                d => d.name === e.target.value
+                );
+
+                setForm({
+                ...form,
+                type: e.target.value,
+                port: selected?.defaultPort ?? form.port,
+                });
+            }}
+            >
+            {DSP_TYPES.map(dsp => (
+                <option key={dsp.name} value={dsp.name}>
+                {dsp.name}
+                </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="field">
+            <label htmlFor="f-deviceid">Device ID</label>
+            <input
+                id="f-deviceid"
+                className="mono"
+                type="number"
+                min={1}
+                max={255}
+                step={1}
+                placeholder="1"
+                value={form.deviceId}
+                onChange={e =>
+                setForm({ ...form, deviceId: e.target.value })
+                }
+            />
+        </div>
+      </div>
+
+      <div className="field-row">
+        <div className="field field--grow">
+          <label htmlFor="f-ip">IP address</label>
+          <input
+            id="f-ip"
+            className="mono"
+            value={form.ip}
+            onChange={e => setForm({ ...form, ip: e.target.value })}
+          />
+        </div>
+
+        <div className="field field--narrow">
+          <label htmlFor="f-port">Port</label>
+          <input
+            id="f-port"
+            className="mono"
+            type="number"
+            value={form.port}
+            onChange={e => setForm({ ...form, port: Number(e.target.value) })}
+          />
+        </div>
+      </div>
+
+      <div className="form-actions">
+        <button className="btn btn-ghost" onClick={onCancel}>
+          Cancel
+        </button>
+        <button className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
+          Add DSP
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default AddDSPForm;
@@ -0,0 +1,209 @@
+import { useEffect, useRef, useState } from 'react'
+
+// degrees per second
+const DONUT_BASE_SPEED = 360 / 8
+const DONUT_HOVER_SPEED = 360 / 2
+const INNER_BASE_SPEED = 360 / 12
+const INNER_HOVER_SPEED = 360 / 3
+
+const AnimatedLogo = ({ size = 45, className = '' }) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const isHoveredRef = useRef(false)
+  const donutGroupRef = useRef<SVGGElement | null>(null)
+  const innerGroupRef = useRef<SVGGElement | null>(null)
+  const angleRef = useRef({ donut: 0, inner: 0 })
+  const lastTimeRef = useRef<number | null>(null)
+  const rafIdRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    isHoveredRef.current = isHovered
+  }, [isHovered])
+
+  useEffect(() => {
+    const tick = (time: number) => {
+      if (lastTimeRef.current == null) lastTimeRef.current = time
+      const dt = (time - lastTimeRef.current) / 1000
+      lastTimeRef.current = time
+
+      const donutSpeed = isHoveredRef.current ? DONUT_HOVER_SPEED : DONUT_BASE_SPEED
+      const innerSpeed = isHoveredRef.current ? INNER_HOVER_SPEED : INNER_BASE_SPEED
+
+      // Accumulate angle continuously -- speed can change instantly
+      // without ever resetting the current rotation.
+      angleRef.current.donut = (angleRef.current.donut + donutSpeed * dt) % 360
+      angleRef.current.inner = (angleRef.current.inner + innerSpeed * dt) % 360
+
+      if (donutGroupRef.current) {
+        donutGroupRef.current.setAttribute(
+          'transform',
+          `rotate(${angleRef.current.donut} 100 100)`
+        )
+      }
+      if (innerGroupRef.current) {
+        innerGroupRef.current.setAttribute(
+          'transform',
+          `rotate(${angleRef.current.inner} 100 100)`
+        )
+      }
+
+      rafIdRef.current = requestAnimationFrame(tick)
+    }
+
+    rafIdRef.current = requestAnimationFrame(tick)
+    return () => {
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current)
+    }
+  }, [])
+
+  return (
+    <div
+      className={`animated-logo ${className}`}
+      style={{ width: size, height: size }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 200 200"
+        xmlns="http://www.w3.org/2000/svg"
+        style={{ display: 'block' }}
+      >
+        <style>
+          {`
+            .animated-logo {
+              transition: transform 0.3s ease;
+            }
+
+            .animated-logo:hover {
+              transform: scale(1.1);
+            }
+
+            .richGradient stop:nth-child(1) {
+              stop-color: #1e3a8a;
+              animation: pulse-primary 3s ease-in-out infinite;
+            }
+
+            .richGradient stop:nth-child(6) {
+              stop-color: #ea437a;
+              animation: pulse-secondary 3s ease-in-out infinite;
+            }
+
+            .darkening-overlay {
+              animation: breathe 6s ease-in-out infinite;
+            }
+
+            @keyframes pulse-primary {
+              0%, 100% { stop-opacity: 1; }
+              50% { stop-opacity: 0.8; }
+            }
+
+            @keyframes pulse-secondary {
+              0%, 100% { stop-opacity: 1; }
+              50% { stop-opacity: 0.9; }
+            }
+
+            @keyframes breathe {
+              0%, 100% { opacity: 0.6; }
+              50% { opacity: 0.3; }
+            }
+
+            @keyframes logo-entrance {
+              0% {
+                opacity: 0;
+                transform: scale(0.8) rotate(-10deg);
+              }
+              50% {
+                opacity: 0.7;
+                transform: scale(1.05) rotate(5deg);
+              }
+              100% {
+                opacity: 1;
+                transform: scale(1) rotate(0deg);
+              }
+            }
+          `}
+        </style>
+
+        <defs>
+          <linearGradient
+            id="richGradient"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="100%"
+            className="richGradient"
+          >
+            <stop offset="0%" stopColor="#1e3a8a" />
+            <stop offset="25%" stopColor="#2d3485" />
+            <stop offset="45%" stopColor="#4c2e7f" />
+            <stop offset="60%" stopColor="#6b2878" />
+            <stop offset="80%" stopColor="#b9326e" />
+            <stop offset="100%" stopColor="#ea437a" />
+          </linearGradient>
+
+          <radialGradient id="darkenGradient" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="rgba(255,255,255,0.3)" />
+            <stop offset="30%" stopColor="rgba(255,255,255,0.1)" />
+            <stop offset="60%" stopColor="rgba(0,0,0,0)" />
+            <stop offset="80%" stopColor="rgba(0,0,0,0.2)" />
+            <stop offset="100%" stopColor="rgba(0,0,0,0.5)" />
+          </radialGradient>
+
+          <linearGradient
+            id="shadowGradient"
+            x1="20%"
+            y1="20%"
+            x2="80%"
+            y2="80%"
+          >
+            <stop offset="0%" stopColor="#0f1d42" />
+            <stop offset="25%" stopColor="#1f2a5d" />
+            <stop offset="45%" stopColor="#332f78" />
+            <stop offset="60%" stopColor="#5f3458" />
+            <stop offset="80%" stopColor="#7a2250" />
+            <stop offset="100%" stopColor="#a50d57" />
+          </linearGradient>
+        </defs>
+
+        {/* Donut base -- rotation driven by JS so speed can change on hover
+            without resetting the current angle */}
+        <g ref={donutGroupRef}>
+          <path
+            d="M100,20
+               A80,80 0 1,1 99.9,20
+               M100,60
+               A40,40 0 1,0 100.1,60"
+            fill="url(#richGradient)"
+            fillRule="evenodd"
+          />
+        </g>
+
+        {/* Darkening overlay with breathing effect (opacity only, no rotation) */}
+        <path
+          className="darkening-overlay"
+          d="M100,20
+             A80,80 0 1,1 99.9,20
+             M100,60
+             A40,40 0 1,0 100.1,60"
+          fill="url(#darkenGradient)"
+          fillRule="evenodd"
+        />
+
+        {/* Inner shadow -- also JS-driven rotation, independent speed/direction */}
+        <g ref={innerGroupRef}>
+          <path
+            d="M100,60
+               A40,40 0 1,0 100.1,60
+               M100,75
+               A25,25 0 1,1 99.9,75"
+            fill="url(#shadowGradient)"
+            fillRule="evenodd"
+          />
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default AnimatedLogo
@@ -0,0 +1,49 @@
+import { DSP } from "../types";
+
+type Props = {
+  dsps: DSP[];
+  selected: string | null;
+  showAdd: boolean;
+  onSelect(id: string): void;
+  onRemove(id: string): void;
+  onAdd(): void;
+};
+
+export default function DSPTabs({
+  dsps,
+  onSelect,
+  onRemove,
+  onAdd,
+}: Props) {
+
+return (
+  <div className="tabstrip">
+
+    {dsps.map(dsp => (
+      <button
+        key={dsp.id}
+        className="tab"
+        onClick={() => onSelect(dsp.id)}
+      >
+        <span className={"led led--" + dsp.status}/>
+        {dsp.name}
+
+        <span
+          onClick={(e)=>{
+            e.stopPropagation();
+            onRemove(dsp.id);
+          }}
+        >
+          ×
+        </span>
+
+      </button>
+    ))}
+
+    <button className="tab-add" onClick={onAdd}>
+      +
+    </button>
+
+  </div>
+);
+}
@@ -0,0 +1,69 @@
+import { DSP } from "../types";
+
+function DSPPanel({
+  dsp,
+  onConnect,
+  onDisconnect,
+}: {
+  dsp: DSP;
+  onConnect: () => void;
+  onDisconnect: () => void;
+}) {
+  const statusLabel =
+    dsp.status === "connected"
+      ? "Connected"
+      : dsp.status === "connecting"
+      ? "Connecting…"
+      : "Disconnected";
+
+  return (
+    <div className="card panel">
+      <div className="panel-header">
+        <div>
+          <h1 className="panel-title">{dsp.name}</h1>
+          <div className="panel-type">{dsp.type}</div>
+        </div>
+
+        <div className="status-block">
+          <span className={"led led--lg led--" + dsp.status} />
+          <span className={"status-label status-label--" + dsp.status}>
+            {statusLabel}
+          </span>
+        </div>
+      </div>
+
+      <dl className="specs">
+        <div className="spec">
+          <dt>IP address</dt>
+          <dd className="mono">{dsp.ip}</dd>
+        </div>
+        <div className="spec">
+          <dt>Port</dt>
+          <dd className="mono">{dsp.port}</dd>
+        </div>
+        <div className="spec">
+          <dt>Device ID</dt>
+          <dd className="mono">{dsp.deviceId || "—"}</dd>
+        </div>
+      </dl>
+
+      <div className="panel-actions">
+        {dsp.status === "connected" ? (
+          <button className="btn btn-outline" onClick={onDisconnect}>
+            Disconnect
+          </button>
+        ) : (
+          <button
+            className="btn btn-primary"
+            onClick={onConnect}
+            disabled={dsp.status === "connecting"}
+          >
+            {dsp.status === "connecting" ? "Connecting…" : "Connect"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DSPPanel;
@@ -0,0 +1,42 @@
+import { DSP } from "../types";
+
+function Tab({
+  dsp,
+  active,
+  dimmed,
+  onSelect,
+  onRemove,
+}: {
+  dsp: DSP;
+  active: boolean;
+  dimmed: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <button
+      className={
+        "tab" +
+        (active ? " tab--active" : "") +
+        (dimmed ? " tab--dimmed" : "")
+      }
+      onClick={onSelect}
+    >
+      <span className={"led led--" + dsp.status} />
+      <span className="tab-name">{dsp.name || "Untitled"}</span>
+      <span
+        className="tab-close"
+        role="button"
+        aria-label={`Remove ${dsp.name}`}
+        onClick={e => {
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        ×
+      </span>
+    </button>
+  );
+}
+
+export default Tab;
@@ -0,0 +1,68 @@
+import { DSP } from "../types";
+import Tab from "./Tab";
+import AnimatedLogo from "./AnimatedLogo"; // adjust path to wherever yours lives
+
+function TopBar({
+  dsps,
+  selected,
+  showAdd,
+  onSelect,
+  onRemove,
+  onAddClick,
+}: {
+  dsps: DSP[];
+  selected: string | null;
+  showAdd: boolean;
+  onSelect: (id: string) => void;
+  onRemove: (id: string) => void;
+  onAddClick: () => void;
+}) {
+  const hasTabs = dsps.length > 0;
+
+  return (
+    <header className="topbar">
+      <div className="logo-slot">
+        <AnimatedLogo />
+      </div>
+
+      <div className="tabstrip">
+        {dsps.map(dsp => (
+          <Tab
+            key={dsp.id}
+            dsp={dsp}
+            active={selected === dsp.id && !showAdd}
+            dimmed={showAdd}
+            onSelect={() => onSelect(dsp.id)}
+            onRemove={() => onRemove(dsp.id)}
+          />
+        ))}
+
+        {hasTabs ? (
+          <button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
+            <PlusIcon />
+          </button>
+        ) : (
+          <button className="tab-add-empty" onClick={onAddClick}>
+            <PlusIcon />
+            <span>Add DSP</span>
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+      <path
+        d="M8 2.5V13.5M2.5 8H13.5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default TopBar;