Add option to play audio automatically

ext/bg/js/options.js

@@ -185,6 +185,7 @@ function optionsSetDefaults(options) {
             enable: true,
             audioSource: 'jpod101',
             audioVolume: 100,
+            autoPlayAudio: false,
             resultOutputMode: 'group',
             debugInfo: false,
             maxResults: 32,

ext/bg/js/settings.js

@@ -24,6 +24,7 @@ async function formRead() {
     optionsNew.general.showGuide = $('#show-usage-guide').prop('checked');
     optionsNew.general.compactTags = $('#compact-tags').prop('checked');
     optionsNew.general.compactGlossaries = $('#compact-glossaries').prop('checked');
+    optionsNew.general.autoPlayAudio = $('#auto-play-audio').prop('checked');
     optionsNew.general.resultOutputMode = $('#result-output-mode').val();
     optionsNew.general.audioSource = $('#audio-playback-source').val();
     optionsNew.general.audioVolume = parseFloat($('#audio-playback-volume').val());
@@ -153,6 +154,7 @@ async function onReady() {
     $('#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);

ext/bg/settings.html

@@ -43,6 +43,10 @@
                     <label><input type="checkbox" id="compact-glossaries"> Compact glossaries</label>
                 </div>
 
+                <div class="checkbox">
+                    <label><input type="checkbox" id="auto-play-audio"> Play audio automatically</label>
+                </div>
+
                 <div class="checkbox">
                     <label><input type="checkbox" id="show-advanced-options"> Show advanced options</label>
                 </div>

ext/fg/js/float.js

@@ -20,6 +20,8 @@
 class DisplayFloat extends Display {
     constructor() {
         super($('#spinner'), $('#definitions'));
+        this.autoPlayAudioTimer = null;
+
         $(window).on('message', utilAsync(this.onMessage.bind(this)));
     }
 
@@ -54,6 +56,10 @@ class DisplayFloat extends Display {
                 this.kanjiShow(definitions, options, context);
             },
 
+            clearAutoPlayTimer: () => {
+                this.clearAutoPlayTimer();
+            },
+
             orphaned: () => {
                 this.onOrphaned();
             }
@@ -83,6 +89,18 @@ class DisplayFloat extends Display {
             super.onKeyDown(e);
         }
     }
+
+    autoPlayAudio() {
+        this.clearAutoPlayTimer();
+        this.autoPlayAudioTimer = window.setTimeout(() => super.autoPlayAudio(), 400);
+    }
+
+    clearAutoPlayTimer() {
+        if (this.autoPlayAudioTimer) {
+            window.clearTimeout(this.autoPlayAudioTimer);
+            this.autoPlayAudioTimer = null;
+        }
+    }
 }
 
 window.yomichan_display = new DisplayFloat();

ext/fg/js/frontend.js

@@ -254,6 +254,7 @@ class Frontend {
     searchClear() {
         docImposterDestroy();
         this.popup.hide();
+        this.popup.clearAutoPlayTimer();
 
         if (this.options.scanning.selectText && this.textSourceLast) {
             this.textSourceLast.deselect();

ext/fg/js/popup.js

@@ -125,6 +125,12 @@ class Popup {
         this.invokeApi('kanjiShow', {definitions, options, context});
     }
 
+    clearAutoPlayTimer() {
+        if (this.injected) {
+            this.invokeApi('clearAutoPlayTimer');
+        }
+    }
+
     invokeApi(action, params={}) {
         this.container.contentWindow.postMessage({action, params}, '*');
     }

ext/mixed/js/display.js

@@ -185,8 +185,7 @@ class Display {
             80: /* p */ () => {
                 if (e.altKey) {
                     if ($('.entry').eq(this.index).data('type') === 'term') {
-                        const expressionIndex = this.options.general.resultOutputMode === 'merge' ? 0 : -1;
+                        this.audioPlay(this.definitions[this.index], this.firstExpressionIndex);
-                        this.audioPlay(this.definitions[this.index], expressionIndex);
                     }
 
                     return true;
@@ -258,6 +257,10 @@ class Display {
             this.container.html(content);
             this.entryScrollIntoView(context && context.index || 0);
 
+            if (this.options.general.autoPlayAudio && this.options.general.audioSource !== 'disabled') {
+                this.autoPlayAudio();
+            }
+
             $('.action-add-note').click(this.onNoteAdd.bind(this));
             $('.action-view-note').click(this.onNoteView.bind(this));
             $('.action-play-audio').click(this.onAudioPlay.bind(this));
@@ -309,6 +312,10 @@ class Display {
         }
     }
 
+    autoPlayAudio() {
+        this.audioPlay(this.definitions[0], this.firstExpressionIndex);
+    }
+
     async adderButtonUpdate(modes, sequence) {
         try {
             const states = await apiDefinitionsAddable(this.definitions, modes);
@@ -422,6 +429,10 @@ class Display {
         }
     }
 
+    get firstExpressionIndex() {
+        return this.options.general.resultOutputMode === 'merge' ? 0 : -1;
+    }
+
     static clozeBuild(sentence, source) {
         const result = {
             sentence: sentence.text.trim()