diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js new file mode 100644 index 0000000..5c79bc5 --- /dev/null +++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js @@ -0,0 +1,131 @@ +import { html, useState, useEffect } from './vendor/htm-preact.js'; +import { t, getLocale, LOCALES } from './i18n.js'; +import { ToggleSwitch, useSaver } from './settings-ui.js'; +import { FolderPickerField } from './folder-tree.js'; + +// MeshBay's own locale codes (i18n.js LOCALES) to the language tag TMDB +// expects. Duplicated from nothing: this is the only place it lives now that +// the TMDB fields moved out of the monolithic settings page. +const TMDB_LANGUAGE_BY_LOCALE = { + en: 'en-US', fr: 'fr-FR', es: 'es-ES', 'pt-BR': 'pt-BR', 'zh-CN': 'zh-CN', + ja: 'ja-JP', de: 'de-DE', it: 'it-IT', nl: 'nl-NL', pl: 'pl-PL', +}; + +/** + * The Videos app's operator settings: which folders it works over, and the + * TMDB lookups it makes. + * + * Several folders now, not one. A film library is as likely to be two drives + * as one, and the single-root model made the second one invisible — the + * operator's only recourse was to point Videos at a parent containing both, + * which pulls in everything else under it too. + * + * The TMDB parts are two independent settings that happen to sit together: + * the on/off switch is per group, while the API key and the query language + * are node-wide, because they are one operator's credential and one shared + * cache (docs/mediacenter.md §5.5). They save separately for that reason. + */ +function VideoSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) { + const { busy, msg, run } = useSaver(); + const [directories, setDirectories] = useState(settings.videoDirectories || []); + const [tmdbEnabled, setTmdbEnabled] = useState(settings.tmdbEnabled !== false); + const [token, setToken] = useState(''); + const [language, setLanguage] = useState( + settings.tmdbLanguage || TMDB_LANGUAGE_BY_LOCALE[getLocale()] || 'en-US'); + + useEffect(() => { + setDirectories(settings.videoDirectories || []); + }, [settings.videoDirectories]); + useEffect(() => { + setTmdbEnabled(settings.tmdbEnabled !== false); + }, [settings.tmdbEnabled]); + useEffect(() => { + if (settings.tmdbLanguage) setLanguage(settings.tmdbLanguage); + }, [settings.tmdbLanguage]); + + const current = settings.videoDirectories || []; + const dirsDirty = directories.length !== current.length + || directories.some((d, i) => d !== current[i]); + + return html` + <div class="app-settings"> + <${FolderPickerField} + label=${t('settings_app.video_directories_label')} + hint=${t('settings_app.video_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.tmdb_title')}</h4> + <p class="settings-hint">${t('settings_node.tmdb_hint')}</p> + + <div class="settings-row"> + <${ToggleSwitch} checked=${tmdbEnabled} disabled=${busy} + onChange=${(v) => { setTmdbEnabled(v); + run(() => transport.setTmdbEnabled(v, signFn)); }} + label=${tmdbEnabled ? t('settings_node.tmdb_enabled') + : t('settings_node.tmdb_disabled')} /> + </div> + + <div class="settings-row"> + <label class="settings-label"> + ${t('settings_node.tmdb_token_label')} + <input type="password" value=${token} disabled=${busy} + placeholder=${t('settings_node.tmdb_token_placeholder')} + onInput=${(e) => setToken(e.target.value)} /> + </label> + ${/* No "optional", and no mention of a shipped default. A key that + works without one is a key somebody else is paying the rate + limit for, and the operator should know they are meant to have + their own. */''} + <p class="settings-hint"> + ${settings.tmdbTokenCustomized + ? t('settings_node.tmdb_token_customized') + : t('settings_app.tmdb_token_prompt')} + ${' '} + <a href="https://www.themoviedb.org/settings/api" target="_blank" + rel="noopener noreferrer">${t('settings_app.tmdb_token_link')}</a> + </p> + </div> + + <div class="settings-row"> + <label class="settings-label"> + ${t('settings_node.tmdb_language_label')} + <select value=${language} disabled=${busy} + onChange=${(e) => setLanguage(e.target.value)}> + ${LOCALES.map((l) => html` + <option key=${l.code} value=${TMDB_LANGUAGE_BY_LOCALE[l.code]}> + ${l.name} + </option>`)} + </select> + </label> + <p class="settings-hint">${t('settings_node.tmdb_language_hint')}</p> + </div> + + ${/* The same control as the one above it. Two Save buttons in one pane + that do not look alike is worse than either looking wrong. This one + is never inert: the language always has a value to send, and an + empty token means "leave the stored one alone", not "no change". */''} + <button class="app-save" disabled=${busy} + onClick=${() => run(async () => { + // `undefined` for the token means "leave the stored one alone", + // which is not the same as `''` — that clears it. The input starts + // empty on every render because a secret is not read back, so + // sending it as a value would wipe the key every time the language + // was changed. + await transport.setTmdbConfig(token || undefined, language, signFn); + setToken(''); + })}> + ${busy ? t('settings_app.saving') : t('settings_node.tmdb_save')} + </button> + ${msg && html`<p class="settings-hint">${msg}</p>`} + </div> + `; +} + +export { VideoSettings, TMDB_LANGUAGE_BY_LOCALE }; |