Multiple custom audio sources (#1303)

* Fix label

* Fix icon size being flexible

* Add schema

* Add customSourceType option

* Update settings

* Pass customSourceType to the audio downloader

* Implement custom audio JSON mode

3 files changed, 7 insertions, 6 deletions

diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index ec55120b..d144937b 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -970,6 +970,7 @@ button.popup-menu-item:disabled {
     height: calc(16em / 14);
     background-color: var(--text-color);
     margin-right: 0.5em;
+    flex: 0 0 auto;
 }
 .popup-menu-item-icon:not([hidden]) {
     display: block;
diff --git a/ext/mixed/js/display-audio.js b/ext/mixed/js/display-audio.js
index c60831b1..f624d85b 100644
--- a/ext/mixed/js/display-audio.js
+++ b/ext/mixed/js/display-audio.js
@@ -112,7 +112,7 @@ class DisplayAudio {
 
         const {expression, reading} = expressionReading;
         const audioOptions = this._getAudioOptions();
-        const {textToSpeechVoice, customSourceUrl, volume} = audioOptions;
+        const {textToSpeechVoice, customSourceUrl, customSourceType, volume} = audioOptions;
         if (!Array.isArray(sources)) {
             ({sources} = audioOptions);
         }
@@ -126,7 +126,7 @@ class DisplayAudio {
             // Create audio
             let audio;
             let title;
-            const info = await this._createExpressionAudio(sources, sourceDetailsMap, expression, reading, {textToSpeechVoice, customSourceUrl});
+            const info = await this._createExpressionAudio(sources, sourceDetailsMap, expression, reading, {textToSpeechVoice, customSourceUrl, customSourceType});
             if (info !== null) {
                 let source;
                 ({audio, source} = info);
@@ -520,13 +520,13 @@ class DisplayAudio {
             // Entry info
             entry.index = i;
 
-            const {audio, audioResolved, title} = infoList[i];
+            const {audio, audioResolved, info: {name}} = infoList[i];
             if (audioResolved) { entry.valid = (audio !== null); }
 
             const labelNode = entry.node.querySelector('.popup-menu-item-label');
             let label = defaultLabel;
             if (ii > 1) { label = `${label} ${i + 1}`; }
-            if (typeof title === 'string' && title.length > 0) { label += `: ${title}`; }
+            if (typeof name === 'string' && name.length > 0) { label += `: ${name}`; }
             labelNode.textContent = label;
         }
 
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index eb8b2900..6c97cb84 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -1432,13 +1432,13 @@ class Display extends EventDispatcher {
     async _injectAnkiNoteMedia(definition, mode, options, fields) {
         const {
             anki: {screenshot: {format, quality}},
-            audio: {sources, customSourceUrl}
+            audio: {sources, customSourceUrl, customSourceType}
         } = options;
 
         const timestamp = Date.now();
         const ownerFrameId = this._ownerFrameId;
         const definitionDetails = this._getDefinitionDetailsForNote(definition);
-        const audioDetails = (mode !== 'kanji' && this._ankiNoteBuilder.containsMarker(fields, 'audio') ? {sources, customSourceUrl} : null);
+        const audioDetails = (mode !== 'kanji' && this._ankiNoteBuilder.containsMarker(fields, 'audio') ? {sources, customSourceUrl, customSourceType} : null);
         const screenshotDetails = (this._ankiNoteBuilder.containsMarker(fields, 'screenshot') ? {ownerFrameId, format, quality} : null);
         const clipboardDetails = {
             image: this._ankiNoteBuilder.containsMarker(fields, 'clipboard-image'),