Initial commit
This commit is contained in:
479
src/App.css
Normal file
479
src/App.css
Normal file
@ -0,0 +1,479 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
|
||||
|
||||
:root {
|
||||
--bg-void: #0d0f12;
|
||||
--bg-panel: #16191d;
|
||||
--bg-raised: #1e2227;
|
||||
--border-hairline: #2a2f36;
|
||||
--text-primary: #e8eaed;
|
||||
--text-muted: #8b92a0;
|
||||
--accent-brand: #5b8def;
|
||||
--accent-live: #3ecf8e;
|
||||
--accent-down: #ff5c5c;
|
||||
--accent-connecting: #f5a623;
|
||||
|
||||
--font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg-void);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-ui);
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ---------- Top bar ---------- */
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
background: var(--bg-void);
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.logo-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.logo-slot > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabstrip {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 48px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-hairline) transparent;
|
||||
}
|
||||
|
||||
.tabstrip::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.tabstrip::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabstrip::-webkit-scrollbar-thumb {
|
||||
background: var(--border-hairline);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.tabstrip::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 36px;
|
||||
margin-top: 8px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
width: 160px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab--active {
|
||||
background: var(--bg-panel);
|
||||
border-color: var(--border-hairline);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab--dimmed {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
margin-left: 2px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
color: var(--text-muted);
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.tab-close:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Quiet icon button — used once at least one tab exists */
|
||||
.tab-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 5px; /* (tab height 36 - button height 26) / 2 */
|
||||
margin-left: 6px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
|
||||
.tab-add:hover {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-add:active {
|
||||
background: var(--border-hairline);
|
||||
}
|
||||
|
||||
/* Clearer CTA — used when the bar has nothing else to anchor to */
|
||||
.tab-add-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 30px;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 3px; /* (tab height 36 - CTA height 30) / 2 */
|
||||
padding: 0 12px 0 10px;
|
||||
border: 1px dashed var(--border-hairline);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.tab-add-empty:hover {
|
||||
background: var(--bg-raised);
|
||||
border-color: var(--accent-brand);
|
||||
border-style: solid;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ---------- LED status dot ---------- */
|
||||
|
||||
.led {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--accent-down);
|
||||
}
|
||||
|
||||
.led--connected {
|
||||
background: var(--accent-live);
|
||||
box-shadow: 0 0 6px 1px var(--accent-live);
|
||||
}
|
||||
|
||||
.led--connecting {
|
||||
background: var(--accent-connecting);
|
||||
box-shadow: 0 0 6px 1px var(--accent-connecting);
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.led--disconnected {
|
||||
background: var(--accent-down);
|
||||
box-shadow: 0 0 4px 0px var(--accent-down);
|
||||
}
|
||||
|
||||
.led--lg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* ---------- Stage / main area ---------- */
|
||||
|
||||
.stage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
background: var(--bg-panel);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-hairline);
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-mark {
|
||||
font-size: 28px;
|
||||
color: var(--border-hairline);
|
||||
}
|
||||
|
||||
.empty p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ---------- DSP panel ---------- */
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-type {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.status-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-label--connected { color: var(--accent-live); }
|
||||
.status-label--connecting { color: var(--accent-connecting); }
|
||||
.status-label--disconnected { color: var(--text-muted); }
|
||||
|
||||
.specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: 0 0 24px;
|
||||
padding: 16px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border-hairline);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.spec {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.spec dt {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.spec dd {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ---------- Form ---------- */
|
||||
|
||||
.form-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.field--grow {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.field--narrow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select {
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border-hairline);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.12s ease;
|
||||
}
|
||||
|
||||
.field input.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.field input:focus,
|
||||
.field select:focus {
|
||||
border-color: var(--accent-brand);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-brand);
|
||||
color: #0d0f12;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #6f9bf2;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border-color: var(--accent-down);
|
||||
color: var(--accent-down);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: rgba(255, 92, 92, 0.1);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: var(--border-hairline);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
103
src/App.tsx
Normal file
103
src/App.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
import { useState } from "react";
|
||||
import "./App.css";
|
||||
import { DSP, DSPStatus } from "./types";
|
||||
import TopBar from "./components/TopBar";
|
||||
import DSPPanel from "./components/Dsppanel";
|
||||
import AddDSPForm from "./components/Adddspform";
|
||||
|
||||
function App() {
|
||||
const [dsps, setDsps] = useState<DSP[]>([]);
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
|
||||
async function addDSP(dsp: Omit<DSP, "status">) {
|
||||
try {
|
||||
const count = await invoke<number>("create_dsp408", {
|
||||
ip: dsp.ip,
|
||||
port: dsp.port,
|
||||
deviceId: Number(dsp.deviceId),
|
||||
});
|
||||
|
||||
console.log("DSP count:", count);
|
||||
|
||||
const newDsp: DSP = {
|
||||
...dsp,
|
||||
status: "disconnected",
|
||||
};
|
||||
|
||||
setDsps(prev => [...prev, newDsp]);
|
||||
setSelected(newDsp.id);
|
||||
setShowAdd(false);
|
||||
} catch (err) {
|
||||
console.error("Failed to create DSP:", err);
|
||||
// TODO: Show an error dialog/toast
|
||||
}
|
||||
}
|
||||
|
||||
function removeDSP(id: string) {
|
||||
setDsps(prev => {
|
||||
const next = prev.filter(d => d.id !== id);
|
||||
if (selected === id) {
|
||||
setSelected(next.length ? next[0].id : null);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function setStatus(id: string, status: DSPStatus) {
|
||||
setDsps(prev => prev.map(d => (d.id === id ? { ...d, status } : d)));
|
||||
}
|
||||
|
||||
function connect(dsp: DSP) {
|
||||
setStatus(dsp.id, "connecting");
|
||||
window.setTimeout(() => {
|
||||
setStatus(dsp.id, "connected");
|
||||
}, 900);
|
||||
}
|
||||
|
||||
function disconnect(dsp: DSP) {
|
||||
setStatus(dsp.id, "disconnected");
|
||||
}
|
||||
|
||||
const activeDsp = dsps.find(d => d.id === selected) ?? null;
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<TopBar
|
||||
dsps={dsps}
|
||||
selected={selected}
|
||||
showAdd={showAdd}
|
||||
onSelect={id => {
|
||||
setSelected(id);
|
||||
setShowAdd(false);
|
||||
}}
|
||||
onRemove={removeDSP}
|
||||
onAddClick={() => setShowAdd(true)}
|
||||
/>
|
||||
|
||||
<main className="stage">
|
||||
{showAdd ? (
|
||||
<AddDSPForm onCancel={() => setShowAdd(false)} onAdd={addDSP} />
|
||||
) : activeDsp ? (
|
||||
<DSPPanel
|
||||
dsp={activeDsp}
|
||||
onConnect={() => connect(activeDsp)}
|
||||
onDisconnect={() => disconnect(activeDsp)}
|
||||
/>
|
||||
) : (
|
||||
<div className="empty">
|
||||
<div className="empty-mark">◇</div>
|
||||
<p>No output selected.</p>
|
||||
<button className="btn btn-primary" onClick={() => setShowAdd(true)}>
|
||||
Add a DSP
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
122
src/components/Adddspform.tsx
Normal file
122
src/components/Adddspform.tsx
Normal file
@ -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;
|
||||
209
src/components/AnimatedLogo.tsx
Normal file
209
src/components/AnimatedLogo.tsx
Normal file
@ -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
|
||||
49
src/components/DSPTabs.tsx
Normal file
49
src/components/DSPTabs.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
69
src/components/Dsppanel.tsx
Normal file
69
src/components/Dsppanel.tsx
Normal file
@ -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;
|
||||
42
src/components/Tab.tsx
Normal file
42
src/components/Tab.tsx
Normal file
@ -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;
|
||||
68
src/components/Topbar.tsx
Normal file
68
src/components/Topbar.tsx
Normal file
@ -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;
|
||||
9
src/main.tsx
Normal file
9
src/main.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
22
src/types.ts
Normal file
22
src/types.ts
Normal file
@ -0,0 +1,22 @@
|
||||
export type DSPStatus = "connected" | "connecting" | "disconnected";
|
||||
|
||||
export type DSP = {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
ip: string;
|
||||
port: number;
|
||||
deviceId: string;
|
||||
status: DSPStatus;
|
||||
};
|
||||
|
||||
export const DSP_TYPES = [
|
||||
{
|
||||
name: "DSP408",
|
||||
defaultPort: 9761,
|
||||
},
|
||||
{
|
||||
name: "DSP204",
|
||||
defaultPort: 94,
|
||||
},
|
||||
];
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user