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
|
import { html, useState, useEffect } from './vendor/htm-preact.js';
import { t } from './i18n.js';
import { ToggleSwitch, useSaver } from './settings-ui.js';
import { FolderPickerField } from './folder-tree.js';
/**
* The Music app's operator settings.
*
* Same shape as Videos, minus a credential: MusicBrainz's read endpoints need
* no API key, only a descriptive User-Agent, and that is one operator identity
* held node-wide rather than a per-group setting (docs/MESHBAY_DESIGN.md §9.8).
*
* Several folders, for the same reason Videos has several: a music library
* that lives on two drives had no way to say so.
*/
function MusicSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
const { busy, msg, run } = useSaver();
const [directories, setDirectories] = useState(settings.musicDirectories || []);
const [mbEnabled, setMbEnabled] = useState(settings.musicbrainzEnabled !== false);
useEffect(() => {
setDirectories(settings.musicDirectories || []);
}, [settings.musicDirectories]);
useEffect(() => {
setMbEnabled(settings.musicbrainzEnabled !== false);
}, [settings.musicbrainzEnabled]);
const current = settings.musicDirectories || [];
const dirsDirty = directories.length !== current.length
|| directories.some((d, i) => d !== current[i]);
return html`
<div class="app-settings">
<${FolderPickerField}
label=${t('settings_app.music_directories_label')}
hint=${t('settings_app.music_directories_hint')}
roots=${roots} dirs=${dirs} mode="multi"
value=${directories} disabled=${busy}
onChange=${setDirectories} />
<button class="app-save" disabled=${busy || !dirsDirty}
onClick=${() => run(() => saveDirectories(directories))}>
${busy ? t('settings_app.saving') : t('settings_app.save')}
</button>
<h4 class="app-settings-sub">${t('settings_node.musicbrainz_title')}</h4>
<p class="settings-hint">${t('settings_node.musicbrainz_hint')}</p>
<div class="settings-row">
<${ToggleSwitch} checked=${mbEnabled} disabled=${busy}
onChange=${(v) => { setMbEnabled(v);
run(() => transport.setMusicbrainzEnabled(v, signFn)); }}
label=${mbEnabled ? t('settings_node.musicbrainz_enabled')
: t('settings_node.musicbrainz_disabled')} />
</div>
${msg && html`<p class="settings-hint">${msg}</p>`}
</div>
`;
}
export { MusicSettings };
|