Improve audio auto play cancellation (#1873)

* Cancel automatic audio playback when hiding the popup

* Don't play audio if the popup is hidden

3 files changed, 20 insertions, 2 deletions

diff --git a/ext/js/app/popup.js b/ext/js/app/popup.js
index 63657dd3..8bf1d7c9 100644
--- a/ext/js/app/popup.js
+++ b/ext/js/app/popup.js
@@ -38,6 +38,7 @@ class Popup extends EventDispatcher {
         this._injectPromise = null;
         this._injectPromiseComplete = false;
         this._visible = new DynamicProperty(false);
+        this._visibleValue = false;
         this._options = null;
         this._optionsContext = null;
         this._contentScale = 1.0;
@@ -441,7 +442,10 @@ class Popup extends EventDispatcher {
     }
 
     _onVisibleChange({value}) {
+        if (this._visibleValue === value) { return; }
+        this._visibleValue = value;
         this._frame.style.setProperty('visibility', value ? 'visible' : 'hidden', 'important');
+        this._invokeSafe('visibilityChanged', {value});
     }
 
     _focusParent() {
diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js
index e5c1b135..972d90b6 100644
--- a/ext/js/display/display-audio.js
+++ b/ext/js/display/display-audio.js
@@ -77,7 +77,7 @@ class DisplayAudio {
     }
 
     setupEntriesComplete() {
-        if (!this._autoPlay) { return; }
+        if (!this._autoPlay || !this._display.popupVisible) { return; }
 
         this.clearAutoPlayTimer();
 
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 9f1de06e..a9581def 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -111,6 +111,7 @@ class Display extends EventDispatcher {
         this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);
         this._elementOverflowController = new ElementOverflowController();
         this._displayAnki = new DisplayAnki(this, japaneseUtil);
+        this._popupVisible = false;
 
         this._hotkeyHandler.registerActions([
             ['close',             () => { this._onHotkeyClose(); }],
@@ -132,7 +133,8 @@ class Display extends EventDispatcher {
             ['clearAutoPlayTimer', {async: false, handler: this._onMessageClearAutoPlayTimer.bind(this)}],
             ['setCustomCss',       {async: false, handler: this._onMessageSetCustomCss.bind(this)}],
             ['setContentScale',    {async: false, handler: this._onMessageSetContentScale.bind(this)}],
-            ['configure',          {async: true,  handler: this._onMessageConfigure.bind(this)}]
+            ['configure',          {async: true,  handler: this._onMessageConfigure.bind(this)}],
+            ['visibilityChanged',  {async: false, handler: this._onMessageVisibilityChanged.bind(this)}]
         ]);
         this.registerWindowMessageHandlers([
             ['extensionUnloaded', {async: false, handler: this._onMessageExtensionUnloaded.bind(this)}]
@@ -208,6 +210,10 @@ class Display extends EventDispatcher {
         return this._fullQuery;
     }
 
+    get popupVisible() {
+        return this._popupVisible;
+    }
+
     async prepare() {
         // State setup
         const {documentElement} = document;
@@ -520,6 +526,14 @@ class Display extends EventDispatcher {
         await this.setOptionsContext(optionsContext);
     }
 
+    _onMessageVisibilityChanged({value}) {
+        this._popupVisible = value;
+        if (!value) {
+            this._displayAudio.clearAutoPlayTimer();
+            this._displayAudio.stopAudio();
+        }
+    }
+
     _onMessageExtensionUnloaded() {
         if (yomichan.isExtensionUnloaded) { return; }
         yomichan.triggerExtensionUnloaded();