From 27ac776aab3f0ee0fe0eabb70be3b567962c14ba Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 17 Jul 2017 17:14:08 -0400 Subject: [PATCH 1/7] swich to use _mouseused and check clientX, clientY --- src/js/big-play-button.js | 7 ++++++- src/js/button.js | 12 ++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index c151a40bbd..e7158666f8 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -34,7 +34,12 @@ class BigPlayButton extends Button { * @listens click */ handleClick(event) { - this.player_.play(); + const playPromise = this.player_.play(); + + // exit early if clicked via the mouse + if (this._mouseused && event.clientX && event.clientY) { + return; + } const cb = this.player_.getChild('controlBar'); const playToggle = cb && cb.getChild('playToggle'); diff --git a/src/js/button.js b/src/js/button.js index f4ec5685d5..651d05a4ba 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -12,6 +12,13 @@ import {assign} from './utils/obj'; * @extends ClickableComponent */ class Button extends ClickableComponent { + constructor(player, options) { + super(player, options); + + this._mouseused = false; + + this.on('mousedown', this.handleMouseDown); + } /** * Create the `Button`s DOM element. @@ -117,6 +124,7 @@ class Button extends ClickableComponent { * @listens keydown */ handleKeyPress(event) { + this._mouseused = false; // Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button. if (event.which === 32 || event.which === 13) { @@ -126,6 +134,10 @@ class Button extends ClickableComponent { // Pass keypress handling up for unsupported keys super.handleKeyPress(event); } + + handleMouseDown(event) { + this._mouseused = true; + } } Component.registerComponent('Button', Button); From b4afcd707c3a8758509bcaa2e5efc24de78ef761 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 25 Jul 2017 14:58:13 -0400 Subject: [PATCH 2/7] move all handling into big-play-button only --- src/js/big-play-button.js | 20 +++++++++++++++++++- src/js/button.js | 14 -------------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index e7158666f8..9afec7c2db 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -11,6 +11,14 @@ import Component from './component.js'; * @extends Button */ class BigPlayButton extends Button { + constructor(player, options) { + super(player, options); + + this.mouseused_ = false; + + this.on('mousedown', this.handleMouseDown); + } + /** * Builds the default DOM `className`. @@ -37,7 +45,7 @@ class BigPlayButton extends Button { const playPromise = this.player_.play(); // exit early if clicked via the mouse - if (this._mouseused && event.clientX && event.clientY) { + if (this.mouseused_ && event.clientX && event.clientY) { return; } @@ -53,6 +61,16 @@ class BigPlayButton extends Button { playToggle.focus(); }, 1); } + + handleKeyPress(event) { + this.mouseused_ = false; + + super.handleKeyPress(event); + } + + handleMouseDown(event) { + this.mouseused_ = true; + } } /** diff --git a/src/js/button.js b/src/js/button.js index 651d05a4ba..40f3e9400f 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -12,14 +12,6 @@ import {assign} from './utils/obj'; * @extends ClickableComponent */ class Button extends ClickableComponent { - constructor(player, options) { - super(player, options); - - this._mouseused = false; - - this.on('mousedown', this.handleMouseDown); - } - /** * Create the `Button`s DOM element. * @@ -124,8 +116,6 @@ class Button extends ClickableComponent { * @listens keydown */ handleKeyPress(event) { - this._mouseused = false; - // Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button. if (event.which === 32 || event.which === 13) { return; @@ -134,10 +124,6 @@ class Button extends ClickableComponent { // Pass keypress handling up for unsupported keys super.handleKeyPress(event); } - - handleMouseDown(event) { - this._mouseused = true; - } } Component.registerComponent('Button', Button); From 855b51e1820bb03ccc6368c272e8a3dd2c776386 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 25 Jul 2017 15:00:42 -0400 Subject: [PATCH 3/7] put the whitespace back --- src/js/button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/button.js b/src/js/button.js index 40f3e9400f..f4ec5685d5 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -12,6 +12,7 @@ import {assign} from './utils/obj'; * @extends ClickableComponent */ class Button extends ClickableComponent { + /** * Create the `Button`s DOM element. * @@ -116,6 +117,7 @@ class Button extends ClickableComponent { * @listens keydown */ handleKeyPress(event) { + // Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button. if (event.which === 32 || event.which === 13) { return; From 49b7831a589e3e29717aa4f07bf8a5724f9b1a63 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 25 Jul 2017 15:05:17 -0400 Subject: [PATCH 4/7] too much whitespace --- src/js/big-play-button.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index 9afec7c2db..84f72530c9 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -19,7 +19,6 @@ class BigPlayButton extends Button { this.on('mousedown', this.handleMouseDown); } - /** * Builds the default DOM `className`. * From 564edc2c712a969459007b98117d9bb770037b12 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 26 Jul 2017 15:22:29 -0400 Subject: [PATCH 5/7] port playPromise check to 5.x --- src/js/big-play-button.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index 84f72530c9..b3b998ff66 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -56,9 +56,13 @@ class BigPlayButton extends Button { return; } - this.setTimeout(function() { - playToggle.focus(); - }, 1); + if (playPromise) { + playPromise.then(() => playToggle.focus()); + } else { + this.setTimeout(function() { + playToggle.focus(); + }, 1); + } } handleKeyPress(event) { From 5c51089395efe7cf2f4fdb718a3726bf0d17f808 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 26 Jul 2017 15:33:52 -0400 Subject: [PATCH 6/7] code review comments --- src/js/big-play-button.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index b3b998ff66..a2da443e46 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -56,12 +56,13 @@ class BigPlayButton extends Button { return; } - if (playPromise) { - playPromise.then(() => playToggle.focus()); + const playFocus = () => playToggle.focus(); + + if (playPromise && playPromise.then) { + const ignoreRejectedPlayPromise = () => {}; + playPromise.then(playFocus, ignoreRejectedPlayPromise); } else { - this.setTimeout(function() { - playToggle.focus(); - }, 1); + this.setTimeout(playFocus, 1); } } From ba4e1dadb2b981caba9e6d35debee00b4059238b Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 26 Jul 2017 15:34:20 -0400 Subject: [PATCH 7/7] whitespace --- src/js/big-play-button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js index a2da443e46..b28eb80e75 100644 --- a/src/js/big-play-button.js +++ b/src/js/big-play-button.js @@ -60,6 +60,7 @@ class BigPlayButton extends Button { if (playPromise && playPromise.then) { const ignoreRejectedPlayPromise = () => {}; + playPromise.then(playFocus, ignoreRejectedPlayPromise); } else { this.setTimeout(playFocus, 1);