aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-08-02 19:25:10 -0400
committerGitHub <noreply@github.com>2021-08-02 19:25:10 -0400
commitedb0aaf6b4fbaed298f81778ced68990ab4f5b9a (patch)
tree977cd3e1f74f99014b274fb7009fd1aab8fadd77 /ext/js
parentb0df8045f6b749208a1e34fc43a46828a490d604 (diff)
Improve audio auto play cancellation (#1873)
* Cancel automatic audio playback when hiding the popup * Don't play audio if the popup is hidden
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/app/popup.js4
-rw-r--r--ext/js/display/display-audio.js2
-rw-r--r--ext/js/display/display.js16
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();