fix(progress control): Fix the video continuing to play when the user…

… scrubs outside of seekbar (#4918)

Scrubbing inside the seekbar paused the player properly but scrubbing inside the progress control outside the seekbar, the player never paused. This meant that when you scrubbed, if you kept the mouse down but lingered for a moment, the player would continue playing until the mouse moved again.

This fixes it so that the seekbar mousedown and mouseup handlers are called when the progress control mousedown and mouseup handlers are triggered.

src/js/control-bar/progress-control/progress-control.js

@@ -55,22 +55,25 @@ class ProgressControl extends Component {
    */
   handleMouseMove(event) {
     const seekBar = this.getChild('seekBar');
-    const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
-    const seekBarEl = seekBar.el();
-    const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
-    let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
-
-    // The default skin has a gap on either side of the `SeekBar`. This means
-    // that it's possible to trigger this behavior outside the boundaries of
-    // the `SeekBar`. This ensures we stay within it at all times.
-    if (seekBarPoint > 1) {
-      seekBarPoint = 1;
-    } else if (seekBarPoint < 0) {
-      seekBarPoint = 0;
-    }
 
-    if (mouseTimeDisplay) {
-      mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+    if (seekBar) {
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      const seekBarEl = seekBar.el();
+      const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
+      let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
+
+      // The default skin has a gap on either side of the `SeekBar`. This means
+      // that it's possible to trigger this behavior outside the boundaries of
+      // the `SeekBar`. This ensures we stay within it at all times.
+      if (seekBarPoint > 1) {
+        seekBarPoint = 1;
+      } else if (seekBarPoint < 0) {
+        seekBarPoint = 0;
+      }
+
+      if (mouseTimeDisplay) {
+        mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      }
     }
   }
 
@@ -97,7 +100,9 @@ class ProgressControl extends Component {
   handleMouseSeek(event) {
     const seekBar = this.getChild('seekBar');
 
-    seekBar.handleMouseMove(event);
+    if (seekBar) {
+      seekBar.handleMouseMove(event);
+    }
   }
 
   /**
@@ -157,6 +162,11 @@ class ProgressControl extends Component {
    */
   handleMouseDown(event) {
     const doc = this.el_.ownerDocument;
+    const seekBar = this.getChild('seekBar');
+
+    if (seekBar) {
+      seekBar.handleMouseDown(event);
+    }
 
     this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
     this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
@@ -175,6 +185,11 @@ class ProgressControl extends Component {
    */
   handleMouseUp(event) {
     const doc = this.el_.ownerDocument;
+    const seekBar = this.getChild('seekBar');
+
+    if (seekBar) {
+      seekBar.handleMouseUp(event);
+    }
 
     this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
     this.off(doc, 'touchmove', this.throttledHandleMouseSeek);

src/js/control-bar/progress-control/seek-bar.js

@@ -179,6 +179,8 @@ class SeekBar extends Slider {
       return;
     }
 
+    // Stop event propagation to prevent double fire in progress-control.js
+    event.stopPropagation();
     this.player_.scrubbing(true);
 
     this.videoWasPlaying = !this.player_.paused();
@@ -244,6 +246,8 @@ class SeekBar extends Slider {
   handleMouseUp(event) {
     super.handleMouseUp(event);
 
+    // Stop event propagation to prevent double fire in progress-control.js
+    event.stopPropagation();
     this.player_.scrubbing(false);
 
     /**