blob: 0407e677d6e80ddf5658e5b1e1616144772d0794 (
plain) (
blame)
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
|
import { html, useState, useEffect } from './vendor/htm-preact.js';
import { t } from './i18n.js';
import { useSaver } from './settings-ui.js';
import { FolderPickerField } from './folder-tree.js';
/**
* The Photos app's operator settings: folders, and nothing else.
*
* Photos was always several folders (docs/MESHBAY_DESIGN.md §9.9) — a photo library
* is routinely scattered, with no single natural root — so this pane is what
* the other two grew into rather than the exception it used to be. No
* third-party service: EXIF is read locally on the node, and nothing about a
* photo leaves the machine to be identified.
*/
function PhotoSettings({ roots, dirs, settings, saveDirectories }) {
const { busy, msg, run } = useSaver();
const [directories, setDirectories] = useState(settings.photoDirectories || []);
useEffect(() => {
setDirectories(settings.photoDirectories || []);
}, [settings.photoDirectories]);
const current = settings.photoDirectories || [];
const dirty = directories.length !== current.length
|| directories.some((d, i) => d !== current[i]);
return html`
<div class="app-settings">
<${FolderPickerField}
label=${t('settings_app.photo_directories_label')}
hint=${t('settings_app.photo_directories_hint')}
roots=${roots} dirs=${dirs} mode="multi"
value=${directories} disabled=${busy}
onChange=${setDirectories} />
<button class="app-save" disabled=${busy || !dirty}
onClick=${() => run(() => saveDirectories(directories))}>
${busy ? t('settings_app.saving') : t('settings_app.save')}
</button>
${msg && html`<p class="settings-hint">${msg}</p>`}
</div>
`;
}
export { PhotoSettings };
|