fix: only change focus from BPB if not a mouse click (#4497)

src/js/big-play-button.js

@@ -11,6 +11,13 @@ 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`.
@@ -36,6 +43,11 @@ class BigPlayButton extends Button {
   handleClick(event) {
     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');
 
@@ -44,14 +56,26 @@ class BigPlayButton extends Button {
       return;
     }
 
-    if (playPromise) {
+    const playFocus = () => playToggle.focus();
-      playPromise.then(() => playToggle.focus());
+
+    if (playPromise && playPromise.then) {
+      const ignoreRejectedPlayPromise = () => {};
+
+      playPromise.then(playFocus, ignoreRejectedPlayPromise);
     } else {
-      this.setTimeout(function() {
+      this.setTimeout(playFocus, 1);
-        playToggle.focus();
-      }, 1);
     }
   }
+
+  handleKeyPress(event) {
+    this.mouseused_ = false;
+
+    super.handleKeyPress(event);
+  }
+
+  handleMouseDown(event) {
+    this.mouseused_ = true;
+  }
 }
 
 /**