From b3fecddaf551d021167df33eae0b582a334a0e5c Mon Sep 17 00:00:00 2001 From: Sean Ryan Date: Mon, 13 Jun 2022 16:24:00 -0300 Subject: [PATCH 1/3] add manageOwnVisibility flag to pausePlugin --- CHANGELOG.md | 1 + package-lock.json | 24 ++++++++--------- src/plugins/PausePlugin.js | 39 ++++++++++++++++++++++----- src/plugins/PausePlugin.spec.js | 48 +++++++++++++++++++++++++++++++++ 4 files changed, 94 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dac90392..b8cf6cae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.4.0] unreleased ## [2.3.4] 2022-06-09 diff --git a/package-lock.json b/package-lock.json index 180d4726..72f53c8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,12 +53,6 @@ "minimist": "^1.2.0" } }, - "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, "ms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", @@ -3597,9 +3591,9 @@ }, "dependencies": { "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true } } @@ -3911,6 +3905,12 @@ "brace-expansion": "^1.1.7" } }, + "minimist": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", + "dev": true + }, "mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", @@ -3942,9 +3942,9 @@ }, "dependencies": { "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true } } diff --git a/src/plugins/PausePlugin.js b/src/plugins/PausePlugin.js index b420fd66..cf8ddc40 100644 --- a/src/plugins/PausePlugin.js +++ b/src/plugins/PausePlugin.js @@ -9,11 +9,13 @@ import { Button } from '../ui-elements'; export class PausePlugin extends ButtonPlugin { /** * Creates an instance of PausePlugin. - * @param {string | HTMLElement} pauseButton selector string or HTML Element for the input(s) + * @param {string | HTMLElement} pauseButton selector string or HTML Element for the input(s) + * @param {boolean} manageOwnVisibility whether the plugin should manage container's visibility or some other source will handle it * @memberof PausePlugin */ - constructor(pauseButton) { + constructor(pauseButton, manageOwnVisibility = true) { super('Pause-Button-plugin'); + this._manageOwnVisibility = manageOwnVisibility; this._appBlurred = false; this._containerBlurred = false; this._focusTimer = null; @@ -35,7 +37,9 @@ export class PausePlugin extends ButtonPlugin { this.onContainerBlur.bind(this) ); - if ( pauseButton instanceof HTMLElement ) { + this.pageVisibility.enabled = this.manageOwnVisibility; + + if (pauseButton instanceof HTMLElement) { this._pauseButton[0] = new Button({ button: pauseButton, onClick: onPauseToggle, @@ -81,10 +85,29 @@ export class PausePlugin extends ButtonPlugin { * @memberof PausePlugin * @returns {Boolean} */ - get pause() { + get pause() { return this._paused; } + /** + * updates _manageOwnVisibility and also re-enables pageVisibility + * @memberof PausePlugin + * @param {Boolean} manageOwnVisibility + */ + set manageOwnVisibility(manageOwnVisibility) { + this._manageOwnVisibility = manageOwnVisibility; + + this.pageVisibility.enabled = this._manageOwnVisibility; + } + + /** + * @memberof PausePlugin + * @returns {Boolean} + */ + get manageOwnVisibility() { + return this._manageOwnVisibility; + } + /** * forces focus onto the iframe application window * @memberof PausePlugin @@ -116,6 +139,9 @@ export class PausePlugin extends ButtonPlugin { * @memberof PausePlugin */ manageFocus() { + if (!this.manageOwnVisibility) { + return; + } // Unfocus on the iframe if (this._keepFocus) { this.blurApp(); @@ -132,7 +158,7 @@ export class PausePlugin extends ButtonPlugin { // causing rapid toggling of the pause state and related issues, // especially in Internet Explorer this._focusTimer = setTimeout( - function() { + function () { this._focusTimer = null; // A manual pause cannot be overriden by focus events. // User must click the resume button. @@ -215,9 +241,10 @@ export class PausePlugin extends ButtonPlugin { */ init({ iframe }) { this.iframe = iframe; + this.client.on( 'features', - function(features) { + function (features) { if (features.disablePause) { this.pauseDisabled = true; } diff --git a/src/plugins/PausePlugin.spec.js b/src/plugins/PausePlugin.spec.js index 4aacd19c..205a82ce 100644 --- a/src/plugins/PausePlugin.spec.js +++ b/src/plugins/PausePlugin.spec.js @@ -44,6 +44,54 @@ describe('PausePlugin', () => { expect(pp.pauseButton[0].classList.contains('unpaused')).to.be.true; }); + describe('manageOwnVisibility', () => { + let disabledPlugin; + before(() => { + const button = document.createElement('button'); + document.body.innerHTML = ''; + button.id = 'ignore'; + document.body.appendChild(button); + disabledPlugin = new PausePlugin('#ignore', false); // disable the focus management of the plugin + disabledPlugin.preload({ client: new Bellhop() }); + }); + + it('should set manageOwnVisibility to false', () => { + // control + expect(pp.manageOwnVisibility).to.be.true; + + expect(disabledPlugin.manageOwnVisibility).to.be.false; + }); + + it('should set pageVisibility.enabled to false', () => { + expect(disabledPlugin.pageVisibility.enabled).to.be.false; + }); + + it('manageFocus() should not change pause state', async () => { + expect(disabledPlugin.pause).to.be.false; + + disabledPlugin._containerBlurred = true; + disabledPlugin._appBlurred = true; + + disabledPlugin.manageFocus(); + await sleep(150); + expect(disabledPlugin.pause).to.be.false; + }); + + it('setting flag to true should re-enable everything', async () => { + disabledPlugin.manageOwnVisibility = true; + + expect(disabledPlugin.pageVisibility.enabled).to.be.true; + disabledPlugin._containerBlurred = true; + disabledPlugin._appBlurred = true; + + disabledPlugin.manageFocus(); + await sleep(150); + expect(disabledPlugin.pause).to.be.true; + }); + + + }); + describe('manageFocus()', () => { it('should set pause to false if only app is blurred', async () => { pp.onPauseToggle(); //reset the manual pause state which was being set to true for some reason. From b29b1ea54adc86accd48105d91402b6595f7c6a3 Mon Sep 17 00:00:00 2001 From: Sean Ryan Date: Mon, 13 Jun 2022 16:25:00 -0300 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8cf6cae..ccc1c1f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [2.4.0] unreleased +## Added + +- Added `manageOwnVisibility` flag to the PausePlugin to make turning off visibility/focus management easier + ## [2.3.4] 2022-06-09 ## Changed From 27a63d8256e2f4906fb64b4c2854d028af2c7f1a Mon Sep 17 00:00:00 2001 From: Sean Ryan Date: Wed, 22 Jun 2022 16:21:28 -0300 Subject: [PATCH 3/3] update readme --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 2b9250e3..d6233b93 100644 --- a/README.md +++ b/README.md @@ -115,6 +115,23 @@ container.openPath('game.html'); `PausePlugin` sets a className of 'paused' or 'unpaused' on individual pause buttons. +The `PausePlugin` also has an optional flag +`manageOwnVisibility`. This defaults to `true` and is intended to disable the visibility management of the plugin for environements +that handle visibility/focus themselves. For most web based contexts this flag will not be needed. + +```javascript +import { PausePlugin, Container } from 'springroll-container'; + +const container = new Container("#game", { + plugins: [ + // manageOwnVisibility is set to false which means the plugin will not send pause or unpause events if the app is no longer + // focused or other similar states (switched tabs, etc) + new PausePlugin('button#pause-button', false), + ] +}); +container.openPath('game.html'); +``` + ### Captions There are two plugins that interact with captions: `CaptionsTogglePlugin`, and `CaptionsStylePlugin`.