Add some help popups for custom audio sources (#1712)

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>