-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathAuditionButton.jsx
More file actions
52 lines (47 loc) · 1.15 KB
/
Copy pathAuditionButton.jsx
File metadata and controls
52 lines (47 loc) · 1.15 KB
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
import React from 'react';
const GLYPH = {
idle: '►',
resolving: '…',
playing: '■',
synth: '≈',
};
const HINT = {
idle: 'Play a ten-second excerpt',
resolving: 'Looking for a preview…',
playing: 'Stop',
synth: 'No preview found — playing a chord from this genre’s spectrum',
};
/**
* One control, four states. `≈` means the catalogue had no match and the
* fallback chord played instead, so a silent-looking press is never ambiguous.
*/
const AuditionButton = ({
id,
activeId,
status,
enabled,
onPlay,
label,
wide = false,
}) => {
const state = activeId === id ? status : 'idle';
return (
<button
type="button"
className={`dm-audition${wide ? ' is-wide' : ''}`}
disabled={!enabled}
onClick={onPlay}
aria-label={enabled ? `${HINT[state]}: ${label}` : `Audio off: ${label}`}
title={enabled ? HINT[state] : 'Audio is off'}
>
{!enabled
? wide
? '[MUTED]'
: '[×]'
: wide
? `[${GLYPH[state]} ${state === 'playing' ? 'STOP' : '10s EXCERPT'}]`
: `[${GLYPH[state]}]`}
</button>
);
};
export default AuditionButton;