Bug 1239372 - only pause video during draging. draft
authorAlastor Wu <alwu@mozilla.com>
Wed, 15 Jun 2016 15:29:18 +0100
changeset 378241 7fe1987993c208472b121291464a56875947790f
parent 378181 14c5bf11d37b9e92d27f7089d9392de2ac339bb3
child 523499 63495347b978ef375b235e2e2d81cf2b59b18618
push id20970
push useralwu@mozilla.com
push dateWed, 15 Jun 2016 14:29:16 +0000
bugs1239372
milestone50.0a1
Bug 1239372 - only pause video during draging. MozReview-Commit-ID: F1vNDqMvKVK
toolkit/content/widgets/videocontrols.xml
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -99,18 +99,17 @@
       </property>
 
       <constructor>
           <![CDATA[
           this.scrubberNameFormat = ]]>"&scrubberScale.nameFormat;"<![CDATA[;
           this.durationValue = "";
           this.valueBar = null;
           this.isDragging = false;
-          this.isDraggingComplete = true;
-          this.wasPausedBeforeDrag = true;
+          this.isPausedByDragging = false;
 
           this.thumb = document.getAnonymousElementByAttribute(this, "class", "scale-thumb");
           this.type = this.getAttribute("class");
           this.Utils = document.getBindingParent(this.parentNode).Utils;
           if (this.type == "scrubber")
               this.valueBar = this.Utils.progressBar;
           ]]>
       </constructor>
@@ -167,32 +166,38 @@
 
       <method name="dragStateChanged">
         <parameter name="isDragging"/>
           <body>
           <![CDATA[
             if (this.type == "scrubber") {
                 this.Utils.log("--- dragStateChanged: " + isDragging + " ---");
                 this.isDragging = isDragging;
-                if (isDragging) {
-                    this.wasPausedBeforeDrag = this.Utils.video.paused;
-                    this.isDraggingComplete = false;
-                    this.Utils.video.pause();
-                } else if (!this.wasPausedBeforeDrag && !this.isDraggingComplete) {
-                    this.isDraggingComplete = true;
+                if (this.isPausedByDragging && !isDragging) {
                     // After the drag ends, resume playing.
                     this.Utils.video.play();
-                } else {
-                    this.isDraggingComplete = true;
+                    this.isPausedByDragging = false;
                 }
             }
           ]]>
           </body>
       </method>
 
+      <method name="pauseVideoDuringDragging">
+          <body>
+          <![CDATA[
+            if (this.isDragging &&
+                !this.Utils.video.paused && !this.isPausedByDragging) {
+                this.isPausedByDragging = true;
+                this.Utils.video.pause();
+            }
+          ]]>
+          </body>
+      </method>
+
       </implementation>
   </binding>
 
   <binding id="videoControls">
 
     <resources>
         <stylesheet src="chrome://global/content/bindings/videocontrols.css"/>
         <stylesheet src="chrome://global/skin/media/videocontrols.css"/>
@@ -827,16 +832,21 @@
                     if (!Utils.scrubber.isDragging) {
                         Utils.startFade(Utils.controlBar, false);
                         Utils._hideControlsTimeout = 0;
                         Utils._controlsHiddenByTimeout = true;
                     }
                 },
                 HIDE_CONTROLS_TIMEOUT_MS : 2000,
                 onMouseMove : function (event) {
+                    // Pause playing video when the mouse is dragging over the control bar.
+                    if (this.scrubber.isDragging) {
+                      this.scrubber.pauseVideoDuringDragging();
+                    }
+
                     // If the controls are static, don't change anything.
                     if (!this.dynamicControls)
                         return;
 
                     clearTimeout(this._hideControlsTimeout);
 
                     // Suppress fading out the controls until the video has rendered
                     // its first frame. But since autoplay videos start off with no