[Media Router] Update volume while dragging slider in WebUI route controller

Currently volume change requests are sent only when the user clicks and releases
the click. This CL makes it send requests even while the user is dragging the
slider knob, to match the behavior of the extensionview controller.

Bug: 742419
Change-Id: I17e7d53fcf801e1cf720de4789f7b36aaf6dd6f8
Reviewed-on: https://chromium-review.googlesource.com/562836
Commit-Queue: Takumi Fujimoto <takumif@chromium.org>
Reviewed-by: Derek Cheng <imcheng@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486948}

chrome/browser/resources/media_router/elements/route_controls/route_controls.html

@@ -20,7 +20,7 @@
               dir="ltr"
               id="route-time-slider"
               on-change="onSeekComplete_"
-              on-immediate-value-change="onSeekStart_"
+              on-immediate-value-change="onSeekByDragging_"
               min="0" max="[[routeStatus.duration]]" step="1"
               title="[[i18n('seekTitle')]]"
               value="[[displayedCurrentTime_]]"></paper-slider>
@@ -57,7 +57,7 @@
                 hidden="[[!routeStatus.canSetVolume]]"
                 disabled="[[!routeStatus.canSetVolume]]"
                 on-change="onVolumeChangeComplete_"
-                on-immediate-value-change="onVolumeChangeStart_"
+                on-immediate-value-change="onVolumeChangeByDragging_"
                 title="[[i18n('volumeTitle')]]"
                 value="[[displayedVolume_]]"
                 min="0" max="1" step="0.01"></paper-slider>

chrome/browser/resources/media_router/elements/route_controls/route_controls.js

@@ -68,6 +68,16 @@ Polymer({
       value: false,
     },
 
+    /**
+     * The timestamp for when the controller last submitted a volume change
+     * request for the volume slider being dragged.
+     * @private {boolean}
+     */
+    lastVolumeChangeByDragging_: {
+      type: Number,
+      value: 0,
+    },
+
     /**
      * The timestamp for when the route details view was opened.
      * @type {number}
@@ -285,11 +295,11 @@ Polymer({
   },
 
   /**
-   * Called when the user starts dragging the seek bar.
+   * Called while the user is dragging the seek bar.
    * @param {!Event} e
    * @private
    */
-  onSeekStart_: function(e) {
+  onSeekByDragging_: function(e) {
     this.isSeeking_ = true;
     var target = /** @type {{immediateValue: number}} */ (e.target);
     this.displayedCurrentTime_ = target.immediateValue;
@@ -301,28 +311,43 @@ Polymer({
    * @private
    */
   onVolumeChangeComplete_: function(e) {
-    this.isVolumeChanging_ = false;
     this.volumeSliderValue_ = e.target.value;
     media_router.browserApi.setCurrentMediaVolume(this.volumeSliderValue_);
+    if (this.isVolumeChanging_) {
+      // Wait for 1 second before applying external volume updates, to prevent
+      // notifications originating from this controller moving the slider knob
+      // around.
+      var that = this;
+      setTimeout(function() {
+        that.isVolumeChanging_ = false;
+      }, 1000);
+    }
   },
 
   /**
-   * Called when the user starts dragging the volume bar.
+   * Called while the user is dragging the volume bar.
    * @param {!Event} e
    * @private
    */
-  onVolumeChangeStart_: function(e) {
+  onVolumeChangeByDragging_: function(e) {
+    /** @const */ var currentTime = Date.now();
+    // We limit the frequency of volume change requests during dragging to
+    // limit the number of Mojo calls to the component extension.
+    if (currentTime - this.lastVolumeChangeByDragging_ < 300) {
+      return;
+    }
+    this.lastVolumeChangeByDragging_ = currentTime;
     this.isVolumeChanging_ = true;
     var target = /** @type {{immediateValue: number}} */ (e.target);
     this.volumeSliderValue_ = target.immediateValue;
+    media_router.browserApi.setCurrentMediaVolume(this.volumeSliderValue_);
   },
 
   /**
    * Resets the route controls. Called when the route details view is closed.
    */
   reset: function() {
-    this.routeStatus = new media_router.RouteStatus(
-        '', '', false, false, false, false, false, false, 0, 0, 0);
+    this.routeStatus = new media_router.RouteStatus();
     media_router.ui.setRouteControls(null);
   },