From a1cef809b33cea6c9c6cc68cbf3f9cfd5646ad87 Mon Sep 17 00:00:00 2001
From: Ku Lok Sun <sundaykuloksun@gmail.com>
Date: Tue, 13 Feb 2018 06:34:44 +0800
Subject: [PATCH] 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.
---
 .../progress-control/progress-control.js      | 45 ++++++++++++-------
 .../control-bar/progress-control/seek-bar.js  |  4 ++
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/js/control-bar/progress-control/progress-control.js b/src/js/control-bar/progress-control/progress-control.js
index 7f412b069..a58ce544f 100644
--- a/src/js/control-bar/progress-control/progress-control.js
+++ b/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 (seekBar) {
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      const seekBarEl = seekBar.el();
+      const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
+      let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
 
-    if (mouseTimeDisplay) {
-      mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+      // 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);
diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
index 16c0fd298..11199de47 100644
--- a/src/js/control-bar/progress-control/seek-bar.js
+++ b/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);
 
     /**