feat: add set gain
This commit is contained in:
@@ -1,209 +0,0 @@
|
||||
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
|
||||
@@ -1,49 +0,0 @@
|
||||
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,31 @@
|
||||
import type { Notification } from '../types/types';
|
||||
|
||||
type Props = {
|
||||
notifications: Notification[];
|
||||
onRemove: (id: number) => void;
|
||||
};
|
||||
|
||||
export default function Notifications({ notifications, onRemove }: Props) {
|
||||
return (
|
||||
<div className="notifications">
|
||||
{notifications.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`notification ${n.type} ${n.removing ? 'notification-out' : ''}`}
|
||||
>
|
||||
<span className="notification-message" title={n.message}>
|
||||
{n.message}
|
||||
</span>
|
||||
|
||||
<button
|
||||
className="tab-close notification-close"
|
||||
onClick={() => onRemove(n.id)}
|
||||
aria-label="Dismiss notification"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
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;
|
||||
@@ -1,26 +1,29 @@
|
||||
import { useState } from "react";
|
||||
import { DSP, DSP_TYPES } from "../types";
|
||||
import { useState } from 'react';
|
||||
import { DSP, DSP_TYPES } from '../../types/types';
|
||||
|
||||
function AddDSPForm({
|
||||
onCancel,
|
||||
onAdd,
|
||||
}: {
|
||||
onCancel: () => void;
|
||||
onAdd: (d: Omit<DSP, "status">) => void;
|
||||
onAdd: (d: Omit<DSP, 'status' | 'id'>) => void;
|
||||
}) {
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
name: '',
|
||||
type: DSP_TYPES[0].name,
|
||||
ip: "192.168.1.100",
|
||||
ip: '192.168.1.100',
|
||||
port: DSP_TYPES[0].defaultPort,
|
||||
deviceId: "",
|
||||
deviceId: '1',
|
||||
});
|
||||
|
||||
const canSubmit = form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId;
|
||||
const canSubmit =
|
||||
form.name.trim().length > 0 && form.ip.trim().length > 0 && form.deviceId.length > 0;
|
||||
|
||||
function submit() {
|
||||
if (!canSubmit) return;
|
||||
onAdd({ id: crypto.randomUUID(), ...form });
|
||||
onAdd({
|
||||
...form,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -36,7 +39,7 @@ function AddDSPForm({
|
||||
id="f-name"
|
||||
placeholder="Main Room DSP"
|
||||
value={form.name}
|
||||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -46,41 +49,37 @@ function AddDSPForm({
|
||||
<select
|
||||
id="f-type"
|
||||
value={form.type}
|
||||
onChange={e => {
|
||||
const selected = DSP_TYPES.find(
|
||||
d => d.name === e.target.value
|
||||
);
|
||||
onChange={(e) => {
|
||||
const selected = DSP_TYPES.find((d) => d.name === e.target.value);
|
||||
|
||||
setForm({
|
||||
setForm({
|
||||
...form,
|
||||
type: e.target.value,
|
||||
port: selected?.defaultPort ?? form.port,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
{DSP_TYPES.map(dsp => (
|
||||
<option key={dsp.name} value={dsp.name}>
|
||||
>
|
||||
{DSP_TYPES.map((dsp) => (
|
||||
<option key={dsp.name} value={dsp.name}>
|
||||
{dsp.name}
|
||||
</option>
|
||||
</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 })
|
||||
}
|
||||
/>
|
||||
<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>
|
||||
|
||||
@@ -91,7 +90,7 @@ function AddDSPForm({
|
||||
id="f-ip"
|
||||
className="mono"
|
||||
value={form.ip}
|
||||
onChange={e => setForm({ ...form, ip: e.target.value })}
|
||||
onChange={(e) => setForm({ ...form, ip: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -102,7 +101,7 @@ function AddDSPForm({
|
||||
className="mono"
|
||||
type="number"
|
||||
value={form.port}
|
||||
onChange={e => setForm({ ...form, port: Number(e.target.value) })}
|
||||
onChange={(e) => setForm({ ...form, port: Number(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,4 +118,4 @@ function AddDSPForm({
|
||||
);
|
||||
}
|
||||
|
||||
export default AddDSPForm;
|
||||
export default AddDSPForm;
|
||||
@@ -0,0 +1,174 @@
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
import { useState } from 'react';
|
||||
import '../../styles/App.css';
|
||||
import { DSP, DSPStatus, AppPage } from '../../types/types';
|
||||
import TopBar from '../topbar/Topbar';
|
||||
import DSPPage from '../dsp408/DspPage';
|
||||
import AddDSPForm from './AddDspPage';
|
||||
import { useNotifications } from '../../hooks/useNotifications';
|
||||
import Notifications from '../Notifications';
|
||||
import { DSPState } from '../../types/dsp408State';
|
||||
import CreditsPage from './CreditsPage';
|
||||
import HomePage from './HomePage';
|
||||
|
||||
function App() {
|
||||
const [dsps, setDsps] = useState<DSP[]>([]);
|
||||
const [selected, setSelected] = useState<number | null>(null);
|
||||
const [page, setPage] = useState<AppPage>('home');
|
||||
const { notifications, notify, removeNotification } = useNotifications();
|
||||
|
||||
async function addDSP(dsp: Omit<DSP, 'id' | 'status'>) {
|
||||
try {
|
||||
const id = await invoke<number>('create_dsp408', {
|
||||
ip: dsp.ip,
|
||||
port: dsp.port,
|
||||
deviceId: Number(dsp.deviceId),
|
||||
});
|
||||
|
||||
const newDsp: DSP = {
|
||||
id,
|
||||
...dsp,
|
||||
status: 'disconnected',
|
||||
};
|
||||
|
||||
setDsps((prev) => [...prev, newDsp]);
|
||||
setSelected(id);
|
||||
setPage('view-dsp');
|
||||
|
||||
notify('Added successfully', 'success', dsp.name);
|
||||
} catch (err) {
|
||||
notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeDSP(dsp: DSP) {
|
||||
try {
|
||||
let id = dsp.id;
|
||||
await invoke('remove_dsp408', {
|
||||
id,
|
||||
});
|
||||
|
||||
setDsps((prev) => {
|
||||
const next = prev.filter((d) => d.id !== id);
|
||||
|
||||
if (selected === id) {
|
||||
setSelected(next.length ? next[0].id : null);
|
||||
}
|
||||
|
||||
return next;
|
||||
});
|
||||
|
||||
notify('Removed successfully', 'success', dsp?.name);
|
||||
} catch (err) {
|
||||
notify(`Remove failed: ${String(err)}`, 'error', dsp?.name);
|
||||
}
|
||||
}
|
||||
|
||||
async function connectDSP(dsp: DSP) {
|
||||
setStatus(dsp.id, 'connecting');
|
||||
|
||||
try {
|
||||
await invoke('connect_dsp408', {
|
||||
id: dsp.id,
|
||||
});
|
||||
|
||||
console.log('Connected');
|
||||
|
||||
setStatus(dsp.id, 'connected');
|
||||
|
||||
const state = await getDSPState(dsp);
|
||||
|
||||
console.log(state);
|
||||
|
||||
notify('Connected', 'success', dsp.name);
|
||||
} catch (err) {
|
||||
notify(`Connection failed: ${String(err)}`, 'error', dsp.name);
|
||||
|
||||
setStatus(dsp.id, 'disconnected');
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnectDSP(dsp: DSP) {
|
||||
try {
|
||||
await invoke('disconnect_dsp408', {
|
||||
id: dsp.id,
|
||||
});
|
||||
|
||||
setStatus(dsp.id, 'disconnected');
|
||||
|
||||
notify('Disconnected', 'success', dsp.name);
|
||||
} catch (err) {
|
||||
notify(`Disconnect failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
}
|
||||
|
||||
async function getDSPState(dsp: DSP) {
|
||||
try {
|
||||
const state = await invoke<DSPState>('get_dsp_state', {
|
||||
id: dsp.id,
|
||||
});
|
||||
|
||||
return state;
|
||||
} catch (err) {
|
||||
notify(`Failed to get state: ${String(err)}`, 'error', dsp.name);
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function setStatus(id: number, status: DSPStatus) {
|
||||
setDsps((prev) => prev.map((d) => (d.id === id ? { ...d, status } : d)));
|
||||
}
|
||||
|
||||
const activeDsp = dsps.find((d) => d.id === selected) ?? null;
|
||||
const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<Notifications notifications={notifications} onRemove={removeNotification} />
|
||||
|
||||
<TopBar
|
||||
dsps={dsps}
|
||||
selected={selected}
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
setSelect={setSelected}
|
||||
|
||||
onSelect={(id) => {
|
||||
setSelected(id);
|
||||
setPage('view-dsp');
|
||||
}}
|
||||
|
||||
onRemove={removeDSP}
|
||||
|
||||
onAddClick={() => {
|
||||
setPage('add-dsp');
|
||||
}}
|
||||
/>
|
||||
|
||||
<main className="stage">
|
||||
{page === 'credits' ? (
|
||||
<CreditsPage />
|
||||
) : page === 'add-dsp' ? (
|
||||
<AddDSPForm onCancel={() => setPage('home')} onAdd={addDSP} />
|
||||
) : activeDsp ? (
|
||||
<DSPPage
|
||||
dsp={activeDsp}
|
||||
onConnect={() => connectDSP(activeDsp)}
|
||||
onDisconnect={() => disconnectDSP(activeDsp)}
|
||||
notify={notify}
|
||||
/>
|
||||
) : (
|
||||
<HomePage
|
||||
onAddDSP={() => setPage('add-dsp')}
|
||||
dspCount={dsps.length}
|
||||
connectedCount={connectedDspCount}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,35 @@
|
||||
function CreditsPage() {
|
||||
return (
|
||||
<div className="card panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<h1 className="panel-title">Credits</h1>
|
||||
<div className="panel-type">Thank you to everyone supporting the project</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl className="specs">
|
||||
<div className="spec">
|
||||
<dt>Developer</dt>
|
||||
<dd>Your Name</dd>
|
||||
</div>
|
||||
|
||||
<div className="spec">
|
||||
<dt>Design</dt>
|
||||
<dd>Open Source Community</dd>
|
||||
</div>
|
||||
|
||||
<div className="spec">
|
||||
<dt>Libraries</dt>
|
||||
<dd className="mono">React · Tauri · TypeScript</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="panel-actions">
|
||||
<button className="btn btn-primary">Support the project</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreditsPage;
|
||||
@@ -0,0 +1,37 @@
|
||||
function HomePage({
|
||||
dspCount,
|
||||
connectedCount,
|
||||
onAddDSP,
|
||||
}: {
|
||||
dspCount: number;
|
||||
connectedCount: number;
|
||||
onAddDSP: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="card panel">
|
||||
<dl className="specs">
|
||||
<div className="spec">
|
||||
<dt>Connected</dt>
|
||||
<dd>
|
||||
{connectedCount} DSP{connectedCount !== 1 ? 's' : ''}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="spec">
|
||||
<dt>Devices</dt>
|
||||
<dd>
|
||||
{dspCount} DSP{dspCount !== 1 ? 's' : ''} configured
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="panel-actions">
|
||||
<button className="btn btn-primary" onClick={onAddDSP}>
|
||||
Add a DSP
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
@@ -1,6 +1,6 @@
|
||||
import { DSP } from "../types";
|
||||
import { DSP } from '../../types/types';
|
||||
|
||||
function DSPPanel({
|
||||
function ConnectionPanel({
|
||||
dsp,
|
||||
onConnect,
|
||||
onDisconnect,
|
||||
@@ -10,11 +10,11 @@ function DSPPanel({
|
||||
onDisconnect: () => void;
|
||||
}) {
|
||||
const statusLabel =
|
||||
dsp.status === "connected"
|
||||
? "Connected"
|
||||
: dsp.status === "connecting"
|
||||
? "Connecting…"
|
||||
: "Disconnected";
|
||||
dsp.status === 'connected'
|
||||
? 'Connected'
|
||||
: dsp.status === 'connecting'
|
||||
? 'Connecting…'
|
||||
: 'Disconnected';
|
||||
|
||||
return (
|
||||
<div className="card panel">
|
||||
@@ -25,10 +25,8 @@ function DSPPanel({
|
||||
</div>
|
||||
|
||||
<div className="status-block">
|
||||
<span className={"led led--lg led--" + dsp.status} />
|
||||
<span className={"status-label status-label--" + dsp.status}>
|
||||
{statusLabel}
|
||||
</span>
|
||||
<span className={`led led--lg led--${dsp.status}`} />
|
||||
<span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,18 +35,20 @@ function DSPPanel({
|
||||
<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>
|
||||
<dd className="mono">{dsp.deviceId || '—'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="panel-actions">
|
||||
{dsp.status === "connected" ? (
|
||||
{dsp.status === 'connected' ? (
|
||||
<button className="btn btn-outline" onClick={onDisconnect}>
|
||||
Disconnect
|
||||
</button>
|
||||
@@ -56,9 +56,9 @@ function DSPPanel({
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={onConnect}
|
||||
disabled={dsp.status === "connecting"}
|
||||
disabled={dsp.status === 'connecting'}
|
||||
>
|
||||
{dsp.status === "connecting" ? "Connecting…" : "Connect"}
|
||||
{dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -66,4 +66,4 @@ function DSPPanel({
|
||||
);
|
||||
}
|
||||
|
||||
export default DSPPanel;
|
||||
export default ConnectionPanel;
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useState } from 'react';
|
||||
import { DSP } from '../../types/types';
|
||||
import Sidebar from './Sidebar/Sidebar';
|
||||
import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
|
||||
import ConnectionPanel from './ConnectionPanel';
|
||||
import GainPanel from './GainPanel';
|
||||
import { NotificationType } from '../../types/types';
|
||||
|
||||
function DSPPage({
|
||||
dsp,
|
||||
onConnect,
|
||||
onDisconnect,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
onConnect: () => void;
|
||||
onDisconnect: () => void;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const [activeSidebar, setActiveSidebar] = useState('overview');
|
||||
|
||||
const sidebarItems = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
icon: <InfoIcon />,
|
||||
},
|
||||
{
|
||||
id: 'gain',
|
||||
label: 'Gain',
|
||||
icon: <SlidersIcon />,
|
||||
},
|
||||
];
|
||||
|
||||
const renderTab = () => {
|
||||
switch (activeSidebar) {
|
||||
case 'overview':
|
||||
return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
|
||||
|
||||
case 'gain':
|
||||
return <GainPanel dsp={dsp} notify={notify} />;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dsp-layout">
|
||||
<Sidebar
|
||||
items={sidebarItems}
|
||||
activeId={activeSidebar}
|
||||
onSelect={setActiveSidebar}
|
||||
appName={dsp.name}
|
||||
/>
|
||||
|
||||
<div className="dsp-content">{renderTab()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DSPPage;
|
||||
@@ -0,0 +1,56 @@
|
||||
import VerticalStack from './VerticalStack/VerticalStack';
|
||||
import VerticalSlider from './Slider.tsx/VerticalSlider';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { InputChannel, Channel } from '../../types/dsp408State';
|
||||
import { DSP } from '../../types/types';
|
||||
import { NotificationType } from '../../types/types';
|
||||
|
||||
function GainPanel({
|
||||
dsp,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const setGain = async (value: number) => {
|
||||
const channel: Channel = {
|
||||
Input: InputChannel.InA,
|
||||
};
|
||||
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
db: value,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to set input gain', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<VerticalStack title="In A" titleFontSize={18}>
|
||||
<VerticalSlider
|
||||
min={-60}
|
||||
max={12}
|
||||
step={1}
|
||||
switchStepValue={-10}
|
||||
switchStep={0.1}
|
||||
unit=" dB"
|
||||
onChange={setGain}
|
||||
/>
|
||||
|
||||
<button className="btn btn-ghost">Reset</button>
|
||||
|
||||
<button className="btn btn-primary">Apply</button>
|
||||
</VerticalStack>
|
||||
);
|
||||
}
|
||||
|
||||
export default GainPanel;
|
||||
@@ -0,0 +1,268 @@
|
||||
/* ---------- Label ---------- */
|
||||
|
||||
.sidebar-label {
|
||||
opacity: 0;
|
||||
max-width: 0;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
transition:
|
||||
opacity var(--dur-fast) var(--ease-standard),
|
||||
max-width var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-label {
|
||||
opacity: 1;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Icon ---------- */
|
||||
|
||||
.sidebar-icon {
|
||||
width: var(--sidebar-icon-size, 20px);
|
||||
height: var(--sidebar-icon-size, 20px);
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.sidebar-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: block;
|
||||
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Item ---------- */
|
||||
|
||||
.sidebar-item {
|
||||
width: var(--sidebar-item-size);
|
||||
height: var(--sidebar-item-size);
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: var(--border-width) solid transparent;
|
||||
border-radius: var(--radius-lg);
|
||||
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition:
|
||||
width var(--dur-base) var(--ease-standard),
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-item {
|
||||
width: calc(100% - var(--space-4));
|
||||
gap: var(--sidebar-item-gap);
|
||||
|
||||
justify-content: flex-start;
|
||||
|
||||
padding-left: var(--sidebar-item-padding);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Item States ---------- */
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-item--active {
|
||||
border-color: var(--accent-brand);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Sidebar ---------- */
|
||||
|
||||
.sidebar-rail {
|
||||
position: fixed;
|
||||
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: var(--sidebar-width-collapsed);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: var(--bg-void);
|
||||
|
||||
border-right: var(--border-width) solid var(--border-hairline);
|
||||
|
||||
z-index: 30;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
transition:
|
||||
width var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded {
|
||||
width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- App name ---------- */
|
||||
|
||||
.sidebar-app-name {
|
||||
position: absolute;
|
||||
|
||||
top: var(--space-3);
|
||||
left: var(--space-4);
|
||||
|
||||
height: var(--sidebar-toggle-size);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transition: opacity var(--dur-fast) var(--ease-standard);
|
||||
|
||||
z-index: 31;
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-app-name {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transition-delay: var(--dur-fast);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Scroll ---------- */
|
||||
|
||||
.sidebar-scroll {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: var(--space-1);
|
||||
|
||||
padding: calc(var(--sidebar-toggle-size) + var(--space-3) * 2) 0 var(--space-3);
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-scroll {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Toggle ---------- */
|
||||
|
||||
.sidebar-toggle {
|
||||
position: absolute;
|
||||
|
||||
top: var(--space-3);
|
||||
left: calc((var(--sidebar-width-collapsed) - var(--sidebar-toggle-size)) / 2);
|
||||
|
||||
width: var(--sidebar-toggle-size);
|
||||
height: var(--sidebar-toggle-size);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
|
||||
background: var(--bg-void);
|
||||
color: var(--text-muted);
|
||||
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
transition:
|
||||
left var(--dur-base) var(--ease-standard),
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard),
|
||||
transform var(--dur-fast) var(--ease-standard);
|
||||
|
||||
z-index: 32;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle {
|
||||
left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
background: var(--bg-raised);
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
border-color: var(--accent-brand);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle:active {
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle:active {
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
transition:
|
||||
transform var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Content ---------- */
|
||||
|
||||
.stage--with-sidebar {
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
|
||||
transition:
|
||||
margin-left var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useState } from 'react';
|
||||
import './Sidebar.css';
|
||||
import { ChevronLeftIcon } from '../../../assets/icons/ChevronLeftIcon';
|
||||
|
||||
export type SidebarItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function Sidebar({
|
||||
items,
|
||||
activeId,
|
||||
onSelect,
|
||||
appName,
|
||||
}: {
|
||||
items: SidebarItem[];
|
||||
activeId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
appName: string;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className={`sidebar-rail ${expanded ? 'sidebar-rail--expanded' : ''}`}>
|
||||
<span className="sidebar-app-name">{appName}</span>
|
||||
|
||||
<button
|
||||
className="sidebar-toggle"
|
||||
onClick={() => setExpanded((prev) => !prev)}
|
||||
aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
<ChevronLeftIcon className="sidebar-toggle-icon" />
|
||||
</button>
|
||||
|
||||
<div className="sidebar-scroll">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onSelect(item.id)}
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
aria-current={activeId === item.id ? 'page' : undefined}
|
||||
className={`sidebar-item ${activeId === item.id ? 'sidebar-item--active' : ''}`}
|
||||
>
|
||||
<span className="sidebar-icon">{item.icon}</span>
|
||||
<span className="sidebar-label">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
.gauge-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 4.375rem;
|
||||
|
||||
padding-top: var(--space-3);
|
||||
margin: var(--space-3);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.gauge-track {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 13.125rem;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
|
||||
width: 34.3%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
top: 0;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: 2.86cqw;
|
||||
height: 100%;
|
||||
|
||||
background: var(--border-hairline);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
|
||||
width: 75%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--bg-panel);
|
||||
|
||||
border: var(--border-width-active) solid var(--accent-brand);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
transition:
|
||||
transform var(--transition-fast) var(--ease-standard),
|
||||
box-shadow var(--transition-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticks span {
|
||||
width: 14.3cqw;
|
||||
height: 2.86cqw;
|
||||
|
||||
background: var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 11.4%;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 11.4%;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: var(--space-2);
|
||||
|
||||
width: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: var(--space-2);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
color: var(--accent-brand);
|
||||
|
||||
font-size: var(--value-font-size, 16px);
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.25em;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.value input,
|
||||
.value-unit {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.value input {
|
||||
height: 1.4em;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
text-align: center;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
background: transparent;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import './VerticalSlider.css';
|
||||
|
||||
type VerticalSliderProps = {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
|
||||
switchStepValue?: number;
|
||||
switchStep?: number;
|
||||
|
||||
value?: number;
|
||||
onChange?: (value: number) => void;
|
||||
|
||||
unit?: string;
|
||||
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function getDecimals(n: number) {
|
||||
const s = n.toString();
|
||||
const i = s.indexOf('.');
|
||||
return i === -1 ? 0 : s.length - i - 1;
|
||||
}
|
||||
|
||||
// Measures whatever box the consumer actually rendered — no more
|
||||
// assuming the gauge is always 70px wide.
|
||||
function useElementSize<T extends HTMLElement>() {
|
||||
const ref = useRef<T>(null);
|
||||
const [size, setSize] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const { width, height } = entries[0].contentRect;
|
||||
setSize({ width, height });
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
setSize({ width: rect.width, height: rect.height });
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return [ref, size] as const;
|
||||
}
|
||||
|
||||
export default function VerticalSlider({
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
switchStepValue,
|
||||
switchStep,
|
||||
value: controlledValue,
|
||||
onChange,
|
||||
unit = '',
|
||||
className,
|
||||
style,
|
||||
}: VerticalSliderProps) {
|
||||
const [internalValue, setInternalValue] = useState(min);
|
||||
const value = controlledValue ?? internalValue;
|
||||
|
||||
const [editingText, setEditingText] = useState<string | null>(null);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [containerRef, containerSize] = useElementSize<HTMLDivElement>();
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const isDragging = useRef(false);
|
||||
const lastValue = useRef(value);
|
||||
const keyboardValue = useRef<number | null>(null);
|
||||
|
||||
const currentStep =
|
||||
switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
|
||||
? switchStep
|
||||
: step;
|
||||
|
||||
const decimals = useMemo(
|
||||
() => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
|
||||
[step, switchStep]
|
||||
);
|
||||
|
||||
const charWidth = useMemo(
|
||||
() => Math.max(min.toFixed(decimals).length, max.toFixed(decimals).length) + 1,
|
||||
[min, max, decimals]
|
||||
);
|
||||
|
||||
// Same formula as before, just driven by a real measurement
|
||||
// instead of a hardcoded container width.
|
||||
const fontSize = useMemo(() => {
|
||||
if (!containerSize.width) return 18;
|
||||
|
||||
const chars = charWidth + unit.length + 1;
|
||||
|
||||
const available = containerSize.width * 0.9;
|
||||
|
||||
return Math.max(12, Math.min(22, available / chars));
|
||||
}, [containerSize.width, charWidth, unit.length]);
|
||||
|
||||
function normalizeValue(input: number) {
|
||||
const clamped = Math.min(max, Math.max(min, input));
|
||||
const snapped = Math.round(clamped / currentStep) * currentStep;
|
||||
return Number(snapped.toFixed(6));
|
||||
}
|
||||
|
||||
function updateValue(v: number) {
|
||||
const next = normalizeValue(v);
|
||||
|
||||
if (controlledValue === undefined) {
|
||||
setInternalValue(next);
|
||||
}
|
||||
|
||||
lastValue.current = next;
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (
|
||||
e.key !== 'ArrowUp' &&
|
||||
e.key !== 'ArrowDown' &&
|
||||
e.key !== 'ArrowLeft' &&
|
||||
e.key !== 'ArrowRight'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
let next = value;
|
||||
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
|
||||
next += currentStep;
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
|
||||
next -= currentStep;
|
||||
}
|
||||
|
||||
updateValue(next);
|
||||
|
||||
keyboardValue.current = normalizeValue(next);
|
||||
}
|
||||
|
||||
function handleKeyUp(_e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (keyboardValue.current !== null) {
|
||||
onChange?.(keyboardValue.current);
|
||||
keyboardValue.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
function valueFromPointer(clientY: number) {
|
||||
if (!sliderRef.current) return;
|
||||
|
||||
const rect = sliderRef.current.getBoundingClientRect();
|
||||
const trackHeight = rect.height; // measured, not a constant
|
||||
|
||||
let offset = clientY - rect.top;
|
||||
offset = Math.max(0, Math.min(trackHeight, offset));
|
||||
|
||||
const percent = 1 - offset / trackHeight;
|
||||
const raw = min + percent * (max - min);
|
||||
|
||||
updateValue(raw);
|
||||
}
|
||||
|
||||
function startDrag(e: React.PointerEvent<HTMLDivElement>) {
|
||||
isDragging.current = true;
|
||||
|
||||
valueFromPointer(e.clientY);
|
||||
|
||||
const move = (ev: PointerEvent) => {
|
||||
valueFromPointer(ev.clientY);
|
||||
};
|
||||
|
||||
const up = () => {
|
||||
isDragging.current = false;
|
||||
|
||||
onChange?.(lastValue.current);
|
||||
|
||||
window.removeEventListener('pointermove', move);
|
||||
window.removeEventListener('pointerup', up);
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', move);
|
||||
window.addEventListener('pointerup', up);
|
||||
}
|
||||
|
||||
function commitEditing() {
|
||||
if (editingText !== null && editingText !== '' && editingText !== '-') {
|
||||
const parsed = Number(editingText);
|
||||
if (!Number.isNaN(parsed)) updateValue(parsed);
|
||||
}
|
||||
setEditingText(null);
|
||||
}
|
||||
|
||||
const percent = (value - min) / (max - min);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={['gauge-container', className].filter(Boolean).join(' ')}
|
||||
style={style}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className="gauge-track">
|
||||
<div className="ticks left">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<span key={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="slider"
|
||||
ref={sliderRef}
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onPointerDown={startDrag}
|
||||
>
|
||||
<div className="track" />
|
||||
<div className="thumb" style={{ bottom: `${percent * 100}%` }} />
|
||||
</div>
|
||||
|
||||
<div className="ticks right">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<span key={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="value"
|
||||
style={{ '--value-font-size': `${fontSize}px` } as React.CSSProperties}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={editingText ?? value.toFixed(decimals)}
|
||||
style={{
|
||||
width: `${charWidth}ch`,
|
||||
}}
|
||||
onFocus={() => setEditingText(value.toFixed(decimals))}
|
||||
onChange={(e) => setEditingText(e.target.value)}
|
||||
onBlur={commitEditing}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
setEditingText(null);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="value-unit">{unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
.vertical-stack {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* header */
|
||||
|
||||
.vertical-stack__title {
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
padding: var(--space-2);
|
||||
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* area containing components */
|
||||
|
||||
.vertical-stack__content {
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* each component slot */
|
||||
|
||||
.vertical-stack__item {
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
The child keeps its natural dimensions.
|
||||
Only horizontal scaling happens.
|
||||
*/
|
||||
|
||||
.vertical-stack__scale {
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
transform-origin: center;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import React, { useLayoutEffect, useRef, useState } from 'react';
|
||||
|
||||
import './VerticalStack.css';
|
||||
|
||||
type VerticalStackProps = {
|
||||
title: string;
|
||||
titleFontSize?: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function VerticalStack({ title, titleFontSize = 16, children }: VerticalStackProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const itemRefs = useRef<HTMLDivElement[]>([]);
|
||||
|
||||
const [scales, setScales] = useState<number[]>([]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
function updateScale() {
|
||||
if (!containerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const availableWidth = containerRef.current.clientWidth;
|
||||
|
||||
const newScales = itemRefs.current.map((item) => {
|
||||
const child = item.firstElementChild as HTMLElement;
|
||||
|
||||
if (!child) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
const width = child.scrollWidth;
|
||||
|
||||
return Math.min(1, availableWidth / width);
|
||||
});
|
||||
|
||||
setScales(newScales);
|
||||
}
|
||||
|
||||
updateScale();
|
||||
|
||||
const observer = new ResizeObserver(updateScale);
|
||||
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [children]);
|
||||
|
||||
return (
|
||||
<div className="vertical-stack" ref={containerRef}>
|
||||
<div
|
||||
className="vertical-stack__title"
|
||||
style={{
|
||||
fontSize: titleFontSize,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="vertical-stack__content">
|
||||
{React.Children.map(children, (child, index) => (
|
||||
<div
|
||||
className="vertical-stack__item"
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
itemRefs.current[index] = el;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="vertical-stack__scale"
|
||||
style={{
|
||||
transform: `scaleX(${scales[index] ?? 1})`,
|
||||
}}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { DSP } from "../types";
|
||||
import { DSP } from '../../types/types';
|
||||
|
||||
function Tab({
|
||||
dsp,
|
||||
@@ -15,28 +15,26 @@ function Tab({
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className={
|
||||
"tab" +
|
||||
(active ? " tab--active" : "") +
|
||||
(dimmed ? " tab--dimmed" : "")
|
||||
}
|
||||
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={'led led--' + dsp.status} />
|
||||
<span className="tab-name" title={dsp.name}>
|
||||
{dsp.name}
|
||||
</span>
|
||||
<span
|
||||
className="tab-close"
|
||||
role="button"
|
||||
aria-label={`Remove ${dsp.name}`}
|
||||
onClick={e => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
>
|
||||
×
|
||||
x
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab;
|
||||
export default Tab;
|
||||
@@ -0,0 +1,95 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { DSP, AppPage } from '../../types/types';
|
||||
import Tab from './Tab';
|
||||
import AnimatedLogo from '../../assets/icons/AnimatedLogo';
|
||||
import { PlusIcon } from '../../assets/icons/PlusIcon';
|
||||
import { CrownIcon } from '../../assets/icons/CrownIcon';
|
||||
|
||||
function TopBar({
|
||||
dsps,
|
||||
selected,
|
||||
page,
|
||||
setPage,
|
||||
setSelect,
|
||||
onSelect,
|
||||
onRemove,
|
||||
onAddClick,
|
||||
}: {
|
||||
dsps: DSP[];
|
||||
selected: number | null;
|
||||
page: AppPage;
|
||||
setPage: (page: AppPage) => void;
|
||||
setSelect: (select: number | null) => void;
|
||||
onSelect: (id: number) => void;
|
||||
onRemove: (dsp: DSP) => void;
|
||||
onAddClick: () => void;
|
||||
}) {
|
||||
const hasTabs = dsps.length > 0;
|
||||
const tabstripRef = useRef<HTMLDivElement>(null);
|
||||
const prevCount = useRef(dsps.length);
|
||||
|
||||
useEffect(() => {
|
||||
if (dsps.length > prevCount.current && tabstripRef.current) {
|
||||
tabstripRef.current.scrollTo({
|
||||
left: tabstripRef.current.scrollWidth,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
prevCount.current = dsps.length;
|
||||
}, [dsps.length]);
|
||||
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div
|
||||
className="logo-slot"
|
||||
onClick={() => {
|
||||
setSelect(null);
|
||||
setPage('home');
|
||||
}}
|
||||
aria-label="Go to home"
|
||||
>
|
||||
<AnimatedLogo />
|
||||
</div>
|
||||
|
||||
<div className="tabstrip" ref={tabstripRef}>
|
||||
{dsps.map((dsp) => (
|
||||
<Tab
|
||||
key={dsp.id}
|
||||
dsp={dsp}
|
||||
active={selected === dsp.id && !(page == 'add-dsp')}
|
||||
dimmed={page === 'add-dsp'}
|
||||
onSelect={() => onSelect(dsp.id)}
|
||||
onRemove={() => onRemove(dsp)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="tabstrip-actions">
|
||||
{hasTabs ? (
|
||||
<button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
|
||||
<PlusIcon width={14} height={14} />
|
||||
</button>
|
||||
) : (
|
||||
<button className="tab-add-empty" onClick={onAddClick}>
|
||||
<PlusIcon width={14} height={14} />
|
||||
<span>Add DSP</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="crown-action"
|
||||
title="Credits & Support"
|
||||
aria-label="Credits & Support"
|
||||
onClick={() => {
|
||||
setPage('credits');
|
||||
setSelect(null);
|
||||
}}
|
||||
>
|
||||
<CrownIcon width={18} height={18} />
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopBar;
|
||||
Reference in New Issue
Block a user