aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-05-26 20:40:53 -0400
committerGitHub <noreply@github.com>2021-05-26 20:40:53 -0400
commit8ed712512b43c3a546369bfdd247a7c1bb347c4f (patch)
tree9a92cb60c45956ce9d5e3eaf89319661ad74d43d
parent0232325f960b1fbe41e03f74a46fb18a7abf33f7 (diff)
Add some help popups for custom audio sources (#1712)
-rw-r--r--ext/js/pages/settings/audio-controller.js36
-rw-r--r--ext/js/pages/settings/settings-main.js2
-rw-r--r--ext/settings.html40
3 files changed, 76 insertions, 2 deletions
diff --git a/ext/js/pages/settings/audio-controller.js b/ext/js/pages/settings/audio-controller.js
index 6b1ce0b5..dcc5428e 100644
--- a/ext/js/pages/settings/audio-controller.js
+++ b/ext/js/pages/settings/audio-controller.js
@@ -20,8 +20,9 @@
*/
class AudioController {
- constructor(settingsController) {
+ constructor(settingsController, modalController) {
this._settingsController = settingsController;
+ this._modalController = modalController;
this._audioSystem = new AudioSystem();
this._audioSourceContainer = null;
this._audioSourceAddButton = null;
@@ -166,6 +167,7 @@ class AudioController {
eventListeners.addEventListener(removeButton, 'click', this._onAudioSourceRemoveClicked.bind(this, entry), false);
}
if (menuButton !== null) {
+ eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this, entry), false);
eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this, entry), false);
}
@@ -222,11 +224,43 @@ class AudioController {
this._removeAudioSourceEntry(entry);
}
+ _onMenuOpen(entry, e) {
+ const {menu} = e.detail;
+
+ let hasHelp = false;
+ switch (entry.value) {
+ case 'custom':
+ case 'custom-json':
+ hasHelp = true;
+ break;
+ }
+
+ menu.bodyNode.querySelector('.popup-menu-item[data-menu-action=help]').hidden = !hasHelp;
+ }
+
_onMenuClose(entry, e) {
switch (e.detail.action) {
+ case 'help':
+ this._showHelp(entry.value);
+ break;
case 'remove':
this._removeAudioSourceEntry(entry);
break;
}
}
+
+ _showHelp(type) {
+ switch (type) {
+ case 'custom':
+ this._showModal('audio-source-help-custom');
+ break;
+ case 'custom-json':
+ this._showModal('audio-source-help-custom-json');
+ break;
+ }
+ }
+
+ _showModal(name) {
+ this._modalController.getModal(name).setVisible(true);
+ }
}
diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js
index 6f3e2a58..e8092112 100644
--- a/ext/js/pages/settings/settings-main.js
+++ b/ext/js/pages/settings/settings-main.js
@@ -113,7 +113,7 @@ async function setupGenericSettingsController(genericSettingController) {
const genericSettingController = new GenericSettingController(settingsController);
preparePromises.push(setupGenericSettingsController(genericSettingController));
- const audioController = new AudioController(settingsController);
+ const audioController = new AudioController(settingsController, modalController);
audioController.prepare();
const profileController = new ProfileController(settingsController, modalController);
diff --git a/ext/settings.html b/ext/settings.html
index f9a2b04a..9f1e688c 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -2466,6 +2466,45 @@
</div>
</div></div>
+<div id="audio-source-help-custom-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+ <div class="modal-header">
+ <div class="modal-title">Audio Source - Custom URL</div>
+ </div>
+ <div class="modal-body">
+ <p>
+ A custom URL can be used to play audio from any URL.
+ The replacement tags <code data-select-on-click="">{term}</code> and <code data-select-on-click="">{reading}</code>
+ can be used to specify which term and reading is being looked up.<br>
+ </p>
+ <p>
+ Example:<br>
+ <a data-select-on-click="">http://localhost/audio.mp3?term={term}&amp;reading={reading}</a>
+ </p>
+ </div>
+ <div class="modal-footer">
+ <button data-modal-action="hide">Close</button>
+ </div>
+</div></div>
+
+<div id="audio-source-help-custom-json-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
+ <div class="modal-header">
+ <div class="modal-title">Audio Source - Custom URL (JSON)</div>
+ </div>
+ <div class="modal-body">
+ <p>
+ A custom URL to a JSON file which lists one or more audio URLs for a given term.
+ The format of the JSON file is described in <a href="/data/schemas/custom-audio-list-schema.json" target="_blank" rel="noopener noreferrer">this schema file</a>.
+ </p>
+ <p>
+ Example:<br>
+ <a data-select-on-click="">http://localhost/audio.json?term={term}&amp;reading={reading}</a>
+ </p>
+ </div>
+ <div class="modal-footer">
+ <button data-modal-action="hide">Close</button>
+ </div>
+</div></div>
+
<!-- Audio templates -->
<template id="audio-source-template"><div class="audio-source horizontal-flex">
@@ -2483,6 +2522,7 @@
</div></template>
<template id="audio-source-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
+ <button class="popup-menu-item" data-menu-action="help">Help</button>
<button class="popup-menu-item" data-menu-action="remove">Remove</button>
</div></div></div></template>