Update audio options format

ext/bg/js/api.js

@@ -68,7 +68,7 @@ async function apiDefinitionAdd(definition, mode, context, optionsContext) {
         await audioInject(
             definition,
             options.anki.terms.fields,
-            options.general.audioSource,
+            options.audio.sources,
             optionsContext
         );
     }

ext/bg/js/audio.js

@@ -138,7 +138,7 @@ function audioBuildFilename(definition) {
     }
 }
 
-async function audioInject(definition, fields, mode, optionsContext) {
+async function audioInject(definition, fields, sources, optionsContext) {
     let usesAudio = false;
     for (const name in fields) {
         if (fields[name].includes('{audio}')) {
@@ -157,7 +157,7 @@ async function audioInject(definition, fields, mode, optionsContext) {
             audioSourceDefinition = definition.expressions[0];
         }
 
-        const url = await audioBuildUrl(audioSourceDefinition, mode, optionsContext);
+        const url = await audioBuildUrl(audioSourceDefinition, sources[0], optionsContext);
         const filename = audioBuildFilename(audioSourceDefinition);
 
         if (url && filename) {

ext/bg/js/options.js

@@ -74,6 +74,18 @@ const profileOptionsVersionUpdates = [
         if (utilStringHashCode(options.anki.fieldTemplates) === -250091611) {
             options.anki.fieldTemplates = profileOptionsGetDefaultFieldTemplates();
         }
+    },
+    (options) => {
+        const oldAudioSource = options.general.audioSource;
+        const disabled = oldAudioSource === 'disabled';
+        options.audio.enabled = !disabled;
+        options.audio.volume = options.general.audioVolume;
+        options.audio.autoPlay = options.general.autoPlayAudio;
+        options.audio.sources = [disabled ? 'jpod101' : oldAudioSource];
+
+        delete options.general.audioSource;
+        delete options.general.audioVolume;
+        delete options.general.autoPlayAudio;
     }
 ];
 
@@ -247,9 +259,6 @@ function profileOptionsCreateDefaults() {
     return {
         general: {
             enable: true,
-            audioSource: 'jpod101',
-            audioVolume: 100,
-            autoPlayAudio: false,
             resultOutputMode: 'group',
             debugInfo: false,
             maxResults: 32,
@@ -270,6 +279,14 @@ function profileOptionsCreateDefaults() {
             customPopupCss: ''
         },
 
+        audio: {
+            enabled: true,
+            sources: ['jpod101', 'jpod101-alternate', 'jisho', 'custom'],
+            volume: 100,
+            autoPlay: false,
+            customSourceUrl: ''
+        },
+
         scanning: {
             middleMouse: true,
             touchInputEnabled: true,

ext/bg/js/settings.js

@@ -26,10 +26,7 @@ async function formRead(options) {
     options.general.showGuide = $('#show-usage-guide').prop('checked');
     options.general.compactTags = $('#compact-tags').prop('checked');
     options.general.compactGlossaries = $('#compact-glossaries').prop('checked');
-    options.general.autoPlayAudio = $('#auto-play-audio').prop('checked');
     options.general.resultOutputMode = $('#result-output-mode').val();
-    options.general.audioSource = $('#audio-playback-source').val();
-    options.general.audioVolume = parseFloat($('#audio-playback-volume').val());
     options.general.debugInfo = $('#show-debug-info').prop('checked');
     options.general.showAdvanced = $('#show-advanced-options').prop('checked');
     options.general.maxResults = parseInt($('#max-displayed-results').val(), 10);
@@ -44,6 +41,10 @@ async function formRead(options) {
     options.general.popupVerticalOffset2 = parseInt($('#popup-vertical-offset2').val(), 10);
     options.general.customPopupCss = $('#custom-popup-css').val();
 
+    options.audio.enabled = $('#audio-playback-enabled').prop('checked');
+    options.audio.autoPlay = $('#auto-play-audio').prop('checked');
+    options.audio.volume = parseFloat($('#audio-playback-volume').val());
+
     options.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked');
     options.scanning.touchInputEnabled = $('#touch-input-enabled').prop('checked');
     options.scanning.selectText = $('#select-matched-text').prop('checked');
@@ -92,10 +93,7 @@ async function formWrite(options) {
     $('#show-usage-guide').prop('checked', options.general.showGuide);
     $('#compact-tags').prop('checked', options.general.compactTags);
     $('#compact-glossaries').prop('checked', options.general.compactGlossaries);
-    $('#auto-play-audio').prop('checked', options.general.autoPlayAudio);
     $('#result-output-mode').val(options.general.resultOutputMode);
-    $('#audio-playback-source').val(options.general.audioSource);
-    $('#audio-playback-volume').val(options.general.audioVolume);
     $('#show-debug-info').prop('checked', options.general.debugInfo);
     $('#show-advanced-options').prop('checked', options.general.showAdvanced);
     $('#max-displayed-results').val(options.general.maxResults);
@@ -110,6 +108,10 @@ async function formWrite(options) {
     $('#popup-vertical-offset2').val(options.general.popupVerticalOffset2);
     $('#custom-popup-css').val(options.general.customPopupCss);
 
+    $('#audio-playback-enabled').prop('checked', options.audio.enabled);
+    $('#auto-play-audio').prop('checked', options.audio.autoPlay);
+    $('#audio-playback-volume').val(options.audio.volume);
+
     $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse);
     $('#touch-input-enabled').prop('checked', options.scanning.touchInputEnabled);
     $('#select-matched-text').prop('checked', options.scanning.selectText);

ext/bg/settings.html

@@ -240,6 +240,10 @@
             <div>
                 <h3>Audio Options</h3>
 
+                <div class="checkbox">
+                    <label><input type="checkbox" id="audio-playback-enabled"> Enable audio playback in search results</label>
+                </div>
+
                 <div class="checkbox">
                     <label><input type="checkbox" id="auto-play-audio"> Play audio automatically</label>
                 </div>

ext/mixed/js/display.js

@@ -189,7 +189,7 @@ class Display {
                 addable: options.anki.enable,
                 grouped: options.general.resultOutputMode === 'group',
                 merged: options.general.resultOutputMode === 'merge',
-                playback: options.general.audioSource !== 'disabled',
+                playback: options.audio.enabled,
                 compactGlossaries: options.general.compactGlossaries,
                 debug: options.general.debugInfo
             };
@@ -209,7 +209,7 @@ class Display {
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
-            if (this.options.general.autoPlayAudio && this.options.general.audioSource !== 'disabled') {
+            if (this.options.audio.enabled && this.options.audio.autoPlay) {
                 this.autoPlayAudio();
             }
 
@@ -404,7 +404,7 @@ class Display {
             this.setSpinnerVisible(true);
 
             const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex];
-            let url = await apiAudioGetUrl(expression, this.options.general.audioSource, this.optionsContext);
+            let url = await apiAudioGetUrl(expression, this.options.audio.sources[0], this.optionsContext);
             if (!url) {
                 url = '/mixed/mp3/button.mp3';
             }
@@ -413,10 +413,11 @@ class Display {
                 this.audioCache[key].pause();
             }
 
+            const volume = this.options.audio.volume / 100.0;
             let audio = this.audioCache[url];
             if (audio) {
                 audio.currentTime = 0;
-                audio.volume = this.options.general.audioVolume / 100.0;
+                audio.volume = volume;
                 audio.play();
             } else {
                 audio = new Audio(url);
@@ -426,7 +427,7 @@ class Display {
                     }
 
                     this.audioCache[url] = audio;
-                    audio.volume = this.options.general.audioVolume / 100.0;
+                    audio.volume = volume;
                     audio.play();
                 };
             }