1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import { ChangeEvent } from 'react';
import { useAudioStore, type AmbientSound } from '../store/audioStore';
const SOUND_OPTIONS: Array<{ value: AmbientSound; label: string }> = [
{ value: 'none', label: 'Silent' },
{ value: 'rain', label: 'Rain' },
{ value: 'cafe', label: 'Cafe' },
{ value: 'white_noise', label: 'White Noise' },
];
export function AmbientControl() {
const { available, sound, volume, setSound, setVolume } = useAudioStore();
const handleSoundChange = async (event: ChangeEvent<HTMLSelectElement>) => {
await setSound(event.target.value as AmbientSound);
};
const handleVolumeChange = async (event: ChangeEvent<HTMLInputElement>) => {
await setVolume(Number(event.target.value));
};
return (
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '12px',
padding: '8px 10px',
border: '1px solid var(--line-2)',
borderRadius: 'var(--r-3)',
background: 'rgba(17, 21, 28, 0.85)',
boxShadow: 'var(--shadow-1)',
}}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2px', minWidth: '90px' }}>
<span className="eyebrow" style={{ letterSpacing: '0.14em' }}>
Ambient
</span>
<span
style={{
fontFamily: 'var(--font-sans)',
fontSize: '12px',
color: available ? 'var(--fg-3)' : 'var(--negative)',
}}
>
{available ? 'Looping background audio' : 'Audio unavailable'}
</span>
</div>
<select
value={sound}
onChange={handleSoundChange}
disabled={!available}
style={{
fontFamily: 'var(--font-sans)',
fontSize: '13px',
color: available ? 'var(--fg-1)' : 'var(--fg-4)',
background: 'var(--ink-3)',
border: '1px solid var(--line-2)',
borderRadius: 'var(--r-2)',
padding: '6px 10px',
outline: 'none',
minWidth: '132px',
}}
>
{SOUND_OPTIONS.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<input
type="range"
min={0}
max={1}
step={0.05}
value={volume}
onChange={handleVolumeChange}
disabled={!available}
style={{ width: '112px', accentColor: 'var(--brass)' }}
/>
<span
style={{
fontFamily: 'var(--font-mono)',
fontSize: '12px',
color: available ? 'var(--fg-2)' : 'var(--fg-4)',
width: '36px',
textAlign: 'right',
}}
>
{Math.round(volume * 100)}%
</span>
</div>
</div>
);
}
|
