[Media Router] Increment the media's current_time in the WebUI route controller

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

Index: chrome/browser/resources/media_router/elements/route_controls/route_controls.js
diff --git a/chrome/browser/resources/media_router/elements/route_controls/route_controls.js b/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
index 91d86b54ca8b44b888e94754f84d23783d006285..41f995bb93746bc6d6c866564e61024aef2f1fc5 100644
--- a/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
+++ b/chrome/browser/resources/media_router/elements/route_controls/route_controls.js
@@ -85,7 +85,17 @@ Polymer({
       type: Object,
       observer: 'onRouteStatusChange_',
       value: new media_router.RouteStatus(
-          '', '', false, false, false, false, false, false, 0, 0, 0),
+          '', '', false, false, false, false, 0, false, 0, 0, 0),

[imcheng, 2017/06/20 23:00:00]

nit: Can we have a default constructor for RouteStatus?

[takumif, 2017/06/20 23:56:31]

Added default argument values to the ctor parameters.

+    },
+
+    /**
+     * The ID of the timer currently set to increment the current time of the
+     * media. Is 0 when the current time is not being incremented.

[imcheng, 2017/06/20 23:00:00]

, or 0 if the current time is not being incremented.

[takumif, 2017/06/20 23:56:31]

Done.

+     * @private {number}
+     */
+    timeIncrementsTimeoutId_: {
+      type: Number,
+      value: 0,
     },
   },
 
@@ -102,13 +112,24 @@ Polymer({
         /** @type {RouteControlsInterface} */ (this));
   },
 
+  /**
+   * Current time can be incremented if the media is playing, and either the
+   * duration is 0 or current time is less than the duration.
+   * @return {boolean}
+   * @private
+   */
+  canIncrementCurrentTime_: function() {
+    return this.routeStatus.playState === media_router.PlayState.PLAYING &&
+        (this.routeStatus.duration === 0 ||
+         this.routeStatus.currentTime < this.routeStatus.duration);
+  },
+
   /**
    * Converts a number representing an interval of seconds to a string with
    * HH:MM:SS format.
    * @param {number} timeInSec Must be non-negative. Intervals longer than 100
    *     hours get truncated silently.
    * @return {string}
-   *
    * @private
    */
   getFormattedTime_: function(timeInSec) {
@@ -126,7 +147,6 @@ Polymer({
    * @param {!media_router.RouteStatus} routeStatus
    * @return {string} The value for the icon attribute of the mute/unmute
    *     button.
-   *
    * @private
    */
   getMuteUnmuteIcon_: function(routeStatus) {
@@ -136,7 +156,6 @@ Polymer({
   /**
    * @param {!media_router.RouteStatus} routeStatus
    * @return {string} Localized title for the mute/unmute button.
-   *
    * @private
    */
   getMuteUnmuteTitle_: function(routeStatus) {
@@ -147,28 +166,48 @@ Polymer({
   /**
    * @param {!media_router.RouteStatus} routeStatus
    * @return {string}The value for the icon attribute of the play/pause button.
-   *
    * @private
    */
   getPlayPauseIcon_: function(routeStatus) {
-    return routeStatus.isPaused ? 'av:play-arrow' : 'av:pause';
+    return routeStatus.playState === media_router.PlayState.PAUSED ?
+        'av:play-arrow' :
+        'av:pause';
   },
 
   /**
    * @param {!media_router.RouteStatus} routeStatus
    * @return {string} Localized title for the play/pause button.
-   *
    * @private
    */
   getPlayPauseTitle_: function(routeStatus) {
-    return routeStatus.isPaused ? this.i18n('playTitle') :
-                                  this.i18n('pauseTitle');
+    return routeStatus.playState === media_router.PlayState.PAUSED ?
+        this.i18n('playTitle') :
+        this.i18n('pauseTitle');
+  },
+
+  /**
+   * Checks whether the media is still playing, and if so, sends a media status
+   * update incrementing the current time and schedules another call for a
+   * second later.
+   * @private
+   */
+  maybeIncrementCurrentTime_: function() {
+    if (this.canIncrementCurrentTime_()) {
+      this.routeStatus.currentTime++;
+      this.displayedCurrentTime_ = this.routeStatus.currentTime;
+      if (this.routeStatus.duration === 0 ||
+          this.routeStatus.currentTime < this.routeStatus.duration) {
+        this.timeIncrementsTimeoutId_ =
+            setTimeout(() => this.maybeIncrementCurrentTime_(), 1000);
+      }
+    } else {
+      this.timeIncrementsTimeoutId_ = 0;
+    }
   },
 
   /**
    * Called when the user toggles the mute status of the media. Sends a mute or
    * unmute command to the browser.
-   *
    * @private
    */
   onMuteUnmute_: function() {
@@ -178,11 +217,10 @@ Polymer({
   /**
    * Called when the user toggles between playing and pausing the media. Sends a
    * play or pause command to the browser.
-   *
    * @private
    */
   onPlayPause_: function() {
-    if (this.routeStatus.isPaused) {
+    if (this.routeStatus.playState === media_router.PlayState.PAUSED) {
       media_router.browserApi.playCurrentMedia();
     } else {
       media_router.browserApi.pauseCurrentMedia();
@@ -193,7 +231,6 @@ Polymer({
    * Updates seek and volume bars if the user is not currently dragging on
    * them.
    * @param {!media_router.RouteStatus} newRouteStatus
-   *
    * @private
    */
   onRouteStatusChange_: function(newRouteStatus) {
@@ -211,15 +248,22 @@ Polymer({
       media_router.browserApi.reportWebUIRouteControllerLoaded(
           this.initialLoadTime_ - this.routeDetailsOpenTime);
     }
+    if (!this.timeIncrementsTimeoutId_) {

[imcheng, 2017/06/20 23:00:00]

Do we need to check this.canIncrementCurrentTime_ first? Also, if the state
becomes BUFFERED or PAUSED and there is a timeout ID, we would need to clear it.

[takumif, 2017/06/20 23:56:31]

We could, but it's not necessary, since maybeIncrementCurrentTime_() checks
anyways.
maybeIncrementCurrentTime_() clears the timeout ID if the state is no longer
PLAYING, so I don't think we need to do that here.

+      this.timeIncrementsTimeoutId_ =
+          setTimeout(() => this.maybeIncrementCurrentTime_(), 1000);
+    }
   },
 
   /**
    * Called when the route is updated. Updates the description shown if it has
    * not been provided by status updates.
-   * @param {!media_router.Route} route
+   * @param {?media_router.Route} route
    */
   onRouteUpdated: function(route) {
-    if (this.routeStatus.description === '') {
+    if (!route) {
+      this.stopIncrementingCurrentTime_();
+    }
+    if (route && this.routeStatus.description === '') {
       this.displayedDescription_ =
           loadTimeData.getStringF('castingActivityStatus', route.description);
     }
@@ -228,10 +272,10 @@ Polymer({
   /**
    * Called when the user clicks on or stops dragging the seek bar.
    * @param {!Event} e
-   *
    * @private
    */
   onSeekComplete_: function(e) {
+    this.stopIncrementingCurrentTime_();
     this.isSeeking_ = false;
     this.displayedCurrentTime_ = e.target.value;
     media_router.browserApi.seekCurrentMedia(this.displayedCurrentTime_);
@@ -240,7 +284,6 @@ Polymer({
   /**
    * Called when the user starts dragging the seek bar.
    * @param {!Event} e
-   *
    * @private
    */
   onSeekStart_: function(e) {
@@ -252,7 +295,6 @@ Polymer({
   /**
    * Called when the user clicks on or stops dragging the volume bar.
    * @param {!Event} e
-   *
    * @private
    */
   onVolumeChangeComplete_: function(e) {
@@ -264,7 +306,6 @@ Polymer({
   /**
    * Called when the user starts dragging the volume bar.
    * @param {!Event} e
-   *
    * @private
    */
   onVolumeChangeStart_: function(e) {
@@ -281,4 +322,16 @@ Polymer({
         '', '', false, false, false, false, false, false, 0, 0, 0);
     media_router.ui.setRouteControls(null);
   },
+
+  /**
+   * If it is currently incrementing the current time shown, then stops doing
+   * so.
+   * @private
+   */
+  stopIncrementingCurrentTime_: function() {
+    if (this.timeIncrementsTimeoutId_) {
+      clearTimeout(this.timeIncrementsTimeoutId_);
+      this.timeIncrementsTimeoutId_ = 0;
+    }
+  }
 });