LucasDLTG/dsp-thomann-interface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive connection section

Browse Source
This commit is contained in:
LucasDLTG
2026-07-24 22:25:50 +02:00
parent 62d3b22fea
commit a157b5f198
10 changed files with 245 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/styles/App.css → src/App.css
View File

2
src/App.tsx
View File

@ -1,7 +1,7 @@
import { invoke } from '@tauri-apps/api/core';
import { useState } from 'react';
import './styles/App.css';
import './App.css';
import { DSP, DSPStatus, AppPage } from './types/types';
import TopBar from './components/Topbar/Topbar';
import DSPPage from './pages/DspPage/DspPage';

4
src/components/Led/Led.tsx
View File

@ -5,10 +5,12 @@ type LedProps = {
className?: string;
};
export function Led({ status = 'disconnected', className = '' }: LedProps) {
function Led({ status = 'disconnected', className = '' }: LedProps) {
return (
<span className={['led', className].filter(Boolean).join(' ')}>
<span className={`led-dot led-dot--${status}`} />
</span>
);
}
export default Led;

109
src/components/dsp408/ConnectionSection/ConnectionSection.css
View File

@ -1,64 +1,107 @@
/* .connection-panel-frame {
width: 33.333%;
height: 33.333%;
box-sizing: border-box;
}
.panel {
.connection-section {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
position: relative;
justify-content: center;
align-items: center;
}
.panel-type {
.connection-panel {
width: 340px;
display: flex;
flex-direction: column;
}
.connection-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
min-width: 0;
}
.connection-panel__header-text {
flex: 1;
min-width: 0;
}
.connection-panel__title {
margin: 0;
font-size: var(--font-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.connection-panel__type {
margin-top: var(--space-1);
font-size: 12px;
font-size: var(--font-sm);
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.03em;
}
.panel-header {
.connection-panel__specs {
margin: var(--space-5) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.connection-panel__spec {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
min-width: 0;
align-items: center;
gap: var(--space-3);
}
.panel-header-text {
min-width: 0;
flex: 1 1 auto;
.connection-panel__spec dt {
color: var(--text-muted);
font-size: var(--font-sm);
}
.panel-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.connection-panel__spec dd {
margin: 0;
font-size: 18px;
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.mono {
.connection-panel__mono {
font-family: var(--font-mono);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.specs {
.connection-panel__actions {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
.connection-panel__status {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.connection-section {
position: absolute;
inset: 0;
.connection-panel__led {
height: 14px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
} */
justify-content: center;
flex: 0 0 auto;
}

103
src/components/dsp408/ConnectionSection/ConnectionSection.tsx
View File

@ -1,14 +1,10 @@
// ConnectionPanel.tsx
import { DSP } from '../../../types/types';
import Button from '../../Button/Button';
import Card from '../../Card/Card';
import Led from '../../Led/Led';
import './ConnectionSection.css';
const DESIGN_WIDTH = 340;
const DESIGN_HEIGHT = 280;
const BTN_W = 100;
const BTN_H = 40;
function ConnectionPanel({
dsp,
onConnect,
@ -27,59 +23,58 @@ function ConnectionPanel({
return (
<div className="connection-section">
<div
className="connection-panel-frame"
style={{ '--panel-w': DESIGN_WIDTH, '--panel-h': DESIGN_HEIGHT } as React.CSSProperties}
>
<div className="card panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
<div className="panel-header">
<div className="panel-header-text">
<h1 className="panel-title" title={dsp.name}>
{dsp.name}
</h1>
<div className="panel-type">{dsp.type}</div>
</div>
<Card className="connection-panel">
<div className="connection-panel__header">
<div className="connection-panel__header-text">
<h1 className="connection-panel__title" title={dsp.name}>
{dsp.name}
</h1>
<div className="status-block">
<span className={`led led--lg led--${dsp.status}`} />
<span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
</div>
<div className="connection-panel__type">{dsp.type}</div>
</div>
<dl className="specs">
<div className="spec">
<dt>IP address</dt>
<dd className="mono" title={dsp.ip}>
{dsp.ip}
</dd>
</div>
<div className="connection-panel__status">
<span className="connection-panel__led">
<Led status={dsp.status} />
</span>
<div className="spec">
<dt>Port</dt>
<dd className="mono">{dsp.port}</dd>
</div>
<div className="spec">
<dt>Device ID</dt>
<dd className="mono" title={dsp.deviceId || undefined}>
{dsp.deviceId || '—'}
</dd>
</div>
</dl>
<div className="panel-actions">
{dsp.status === 'connected' ? (
<Button variant="outline" onClick={onDisconnect}>
Disconnect
</Button>
) : (
<Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
{dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
</Button>
)}
<span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
</div>
</div>
</div>
<dl className="connection-panel__specs">
<div className="connection-panel__spec">
<dt>IP address</dt>
<dd className="connection-panel__mono" title={dsp.ip}>
{dsp.ip}
</dd>
</div>
<div className="connection-panel__spec">
<dt>Port</dt>
<dd className="connection-panel__mono">{dsp.port}</dd>
</div>
<div className="connection-panel__spec">
<dt>Device ID</dt>
<dd className="connection-panel__mono" title={dsp.deviceId || undefined}>
{dsp.deviceId || '—'}
</dd>
</div>
</dl>
<div className="connection-panel__actions">
{dsp.status === 'connected' ? (
<Button variant="outline" onClick={onDisconnect}>
Disconnect
</Button>
) : (
<Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
{dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
</Button>
)}
</div>
</Card>
</div>
);
}

48
src/components/dsp408/GainSection/GainSection.tsx
View File

@ -1,4 +1,4 @@
import VerticalSlider from '../../Slider/VerticalSlider';
import VerticalSlider from '../Slider/VerticalSlider';
import { invoke } from '@tauri-apps/api/core';
import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
import { DSP } from '../../../types/types';
@ -93,33 +93,31 @@ function GainPanel({
return (
<div className="gain-panel-frame">
<AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
<div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
<div className="gain-panel__title">{title}</div>
<div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
<div className="gain-panel__title">{title}</div>
<VerticalSlider
min={-60}
max={12}
step={0.5}
switchStepValue={-10}
switchStep={0.1}
unit=" dB"
onChange={setGain}
/>
<VerticalSlider
min={-60}
max={12}
step={0.5}
switchStepValue={-10}
switchStep={0.1}
unit=" dB"
onChange={setGain}
/>
<Button variant="toggle" className={muted ? 'active-danger' : ''} onClick={toggleMute}>
{muted ? 'Muted' : 'Mute'}
</Button>
<Button variant="toggle" className={muted ? 'active-danger' : ''} onClick={toggleMute}>
{muted ? 'Muted' : 'Mute'}
</Button>
<Button
variant="toggle"
className={inverted ? 'active-warning' : ''}
onClick={toggleInverse}
>
{inverted ? 'Inverted' : 'Invert'}
</Button>
</div>
</AutoScale>
<Button
variant="toggle"
className={inverted ? 'active-warning' : ''}
onClick={toggleInverse}
>
{inverted ? 'Inverted' : 'Invert'}
</Button>
</div>
</div>
);
}

54
src/components/Slider/VerticalSlider.css → src/components/dsp408/Slider/VerticalSlider.css
View File

@ -1,9 +1,19 @@
.gauge-container {
width: 70px;
height: 260px;
.gauge-viewport {
container-type: inline-size;
container-name: gauge;
padding-top: 20px;
padding-bottom: 10px;
width: 100%;
aspect-ratio: 70 / 260;
box-sizing: border-box;
}
.gauge-container {
width: 100%;
height: 100%;
padding-top: 28.571cqw; /* 20px */
padding-bottom: 14.286cqw; /* 10px */
display: flex;
flex-direction: column;
@ -17,21 +27,23 @@
.gauge-track {
position: relative;
width: 70px;
height: 210px;
width: 100%;
height: 300cqw; /* 210px */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 8px;
margin-bottom: 11.429cqw; /* 8px */
box-sizing: border-box;
}
.slider {
position: relative;
width: 24px;
width: 34.286cqw; /* 24px */
height: 100%;
cursor: pointer;
@ -48,7 +60,7 @@
transform: translateX(-50%);
width: 2px;
width: 2.857cqw; /* 2px */
height: 100%;
@ -62,7 +74,7 @@
left: 50%;
width: 18px;
width: 25.714cqw; /* 18px */
aspect-ratio: 1;
@ -94,9 +106,9 @@
}
.ticks span {
width: 10px;
width: 14.286cqw; /* 10px */
height: 2px;
height: 2.857cqw; /* 2px */
background: var(--border-hairline);
@ -104,22 +116,22 @@
}
.left {
left: 8px;
left: 11.429cqw; /* 8px */
}
.right {
right: 8px;
right: 11.429cqw; /* 8px */
}
.value {
width: 100%;
margin-top: 4px;
margin-top: 5.714cqw; /* 4px */
padding-top: 2px;
padding-bottom: 2px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2.857cqw; /* 2px */
padding-bottom: 2.857cqw; /* 2px */
padding-right: 5.714cqw; /* 4px */
padding-left: 5.714cqw; /* 4px */
box-sizing: border-box;
@ -134,7 +146,7 @@
color: var(--accent-brand);
font-size: 16px;
font-size: 22.857cqw;
font-family: var(--font-ui);

106
src/components/Slider/VerticalSlider.tsx → src/components/dsp408/Slider/VerticalSlider.tsx
View File

@ -2,7 +2,10 @@ import { useMemo, useRef, useState, useEffect } from 'react';
import './VerticalSlider.css';
// Design size 260*70
// Design size 260*70 (height*width) — kept as the reference ratio.
// All CSS dimensions are expressed in container-query width units (cqw)
// relative to this DESIGN_WIDTH, so the whole component scales together
// and preserves this aspect ratio at any rendered size.
const DESIGN_WIDTH = 70;
@ -79,6 +82,9 @@ export default function VerticalSlider({
return Math.max(minStr.length, maxStr.length) + unit.length;
}, [min, max, decimals, unit]);
// Computed in "design pixels" (i.e. assuming the component is rendered at
// DESIGN_WIDTH px wide), then converted below to cqw so it scales with
// the actual rendered size instead of staying a fixed pixel value.
const valueFontSize = useMemo(() => {
const availableWidth = DESIGN_WIDTH - 8;
const AVG_CHAR_WIDTH_RATIO = 0.6;
@ -86,6 +92,10 @@ export default function VerticalSlider({
return Math.min(16, Math.max(8, sizeByWidth));
}, [maxChars]);
// Convert the "design px" font size into cqw units relative to the
// component's own width, so it scales proportionally with everything else.
const valueFontSizeCqw = useMemo(() => (valueFontSize / DESIGN_WIDTH) * 100, [valueFontSize]);
function normalizeValue(input: number) {
const clamped = Math.min(max, Math.max(min, input));
const snapped = Math.round(clamped / currentStep) * currentStep;
@ -192,55 +202,57 @@ export default function VerticalSlider({
const percent = (value - min) / (max - min);
return (
<div className={['gauge-container', className].filter(Boolean).join(' ')} style={style}>
<div className="gauge-track">
<div className="ticks left">
{Array.from({ length: 15 }).map((_, i) => (
<span key={i} />
))}
<div className={['gauge-viewport', className].filter(Boolean).join(' ')} style={style}>
<div className="gauge-container">
<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}
onPointerMove={handlePointerMove}
onPointerUp={endDrag}
onPointerCancel={endDrag}
>
<div className="track" />
<div ref={thumbRef} className="thumb" style={{ bottom: `${percent * 100}%` }} />
</div>
<div className="ticks right">
{Array.from({ length: 15 }).map((_, i) => (
<span key={i} />
))}
</div>
</div>
<div
className="slider"
ref={sliderRef}
tabIndex={0}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onPointerDown={startDrag}
onPointerMove={handlePointerMove}
onPointerUp={endDrag}
onPointerCancel={endDrag}
>
<div className="track" />
<div ref={thumbRef} className="thumb" style={{ bottom: `${percent * 100}%` }} />
<div className="value" style={{ fontSize: `${valueFontSizeCqw}cqw` }}>
<input
ref={inputRef}
type="text"
inputMode="decimal"
value={editingText ?? displayValue.toFixed(decimals)}
style={{ width: '100%' }}
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 className="ticks right">
{Array.from({ length: 15 }).map((_, i) => (
<span key={i} />
))}
</div>
</div>
<div className="value" style={{ fontSize: `${valueFontSize}px` }}>
<input
ref={inputRef}
type="text"
inputMode="decimal"
value={editingText ?? displayValue.toFixed(decimals)}
style={{ width: '100%' }}
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>
);

2
src/components/topbar/Topbar.tsx
View File

@ -3,7 +3,7 @@ import { DSP, AppPage } from '../../types/types';
import AnimatedLogo from '../../assets/icons/AnimatedLogo';
import { PlusIcon } from '../../assets/icons/PlusIcon';
import { CrownIcon } from '../../assets/icons/CrownIcon';
import { Led } from '../Led/Led';
import Led from '../Led/Led';
import { CloseIcon } from '../../assets/icons/CloseIcon';
import './Topbar.css';

0
src/styles/variables.css → src/variables.css
View File