[Media Router] Custom Controls 4 - Implement details view WebUI

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

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This Polymer element shows media controls for a route that is currently cast
+// to a device.
+Polymer({
+  is: 'route-controls',
+
+  properties: {
+    /**
+     * The current time displayed in seconds.

[mark a. foltz, 2017/05/12 00:02:46]

Nit: in seconds, before formatting.

[takumif, 2017/05/15 17:13:12]

Done.

+     * @type {number}
+     */
+    displayedCurrentTime_: {
+      type: Number,
+      value: 0
+    },
+
+    /**
+     * The media description to display. Uses route description if none is
+     * provided by the route status object.
+     * @type {string}
+     */
+    displayedDescription_: {
+      type: String,
+      value: ''
+    },
+
+    /**
+     * The volume shown in the volume control, between 0 and 1.
+     * @type {number}
+     */
+    displayedVolume_: {
+      type: Number,
+      value: 0
+    },
+
+    /**
+     * Set to true when the user is dragging the seek bar. Updates for the
+     * current time from the browser will be ignored when set to true.
+     * @private {boolean}
+     */
+    isSeeking_: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * Set to true when the user is dragging the volume bar. Volume updates from
+     * the browser will be ignored when set to true.
+     * @private {boolean}
+     */
+    isVolumeChanging_: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * The status of the media route shown.
+     * @private {!media_router.RouteStatus}
+     */
+    routeStatus: {
+      type: Object,
+      observer: 'onRouteStatusChange_',
+      value: new media_router.RouteStatus('', '', false, false, false, false,
+                                          false, false, 0, 0, 0)
+    },
+  },
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  /**
+   * 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) {
+    if (timeInSec < 0) {
+      return '';
+    }
+    var hours = Math.floor(timeInSec / 3600);
+    var minutes = Math.floor(timeInSec / 60) % 60;
+    var seconds = Math.floor(timeInSec) % 60;
+    return ('0' + hours).substr(-2) + ':' + ('0' + minutes).substr(-2) + ':' +
+           ('0' + seconds).substr(-2);
+  },
+
+  /**
+   * @param {!media_router.RouteStatus} routeStatus
+   * @return {string} The value for the icon attribute of the mute/unmute
+   *     button.
+   *
+   * @private
+   */
+  getMuteUnmuteIcon_: function(routeStatus) {
+    return routeStatus.isMuted ? 'av:volume-off' : 'av:volume-up';
+  },
+
+  /**
+   * @param {!media_router.RouteStatus} routeStatus
+   * @return {string} Localized title for the mute/unmute button.
+   *
+   * @private
+   */
+  getMuteUnmuteTitle_: function(routeStatus) {
+    return routeStatus.isMuted ? this.i18n('unmuteTitle') :
+                                 this.i18n('muteTitle');
+  },
+
+  /**
+   * @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';
+  },
+
+  /**
+   * @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');
+  },
+
+  /**
+   * Called when the user toggles the mute status of the media. Sends a mute or
+   * unmute command to the browser.
+   *
+   * @private
+   */
+  onMuteUnmute_: function() {
+    media_router.browserApi.setCurrentMediaMute(!this.routeStatus.isMuted);
+  },
+
+  /**
+   * 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) {

[mark a. foltz, 2017/05/12 00:02:46]

This may be out of sync with the true state of the media (since there is a delay
propagating changes to the WebUI).   However Cast applications have had to deal
with this already since it's a multi-controller model so I don't anticipate any
new complications.

[takumif, 2017/05/15 17:13:12]

Acknowledged. I think determining user intention based on what is shown by the
WebUI is fine, since if the user is clicking the button they likely want a state
change from what is displayed. Also the extension-side controller checks if the
commands are consistent with the media status.

+      media_router.browserApi.playCurrentMedia();
+    } else {
+      media_router.browserApi.pauseCurrentMedia();
+    }
+  },
+
+  /**
+   * 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);
+    media_router.ui.setRouteControls(null);
+  },
+
+  /**
+   * Updates seek and volume bars if the user is not currently dragging on
+   * them.
+   * @param {!media_router.RouteStatus} newRouteStatus
+   *
+   * @private
+   */
+  onRouteStatusChange_: function(newRouteStatus) {
+    if (!this.isSeeking_) {
+      this.displayedCurrentTime_ = newRouteStatus.currentTime;
+    }
+    if (!this.isVolumeChanging_) {
+      this.displayedVolume_ = newRouteStatus.volume;
+    }
+    if (newRouteStatus.description !== '') {

[mark a. foltz, 2017/05/12 00:02:46]

If the new route status description is empty, should you fall back to route
description here?

[takumif, 2017/05/15 17:13:12]

displayedDescription_ would already be set to either the route description or
the description of the old route status, so no need to update here (unless route
description should take precedence over stale route status description, but I'm
not sure about that).

[mark a. foltz, 2017/05/15 20:43:22]

Acknowledged.

+      this.displayedDescription_ = newRouteStatus.description;
+    }
+  },
+
+  /**
+   * Called when the route is updated. Updates the description shown if it has
+   * not been provided by status updates.
+   * @param {!media_router.Route} route
+   */
+  onRouteUpdated: function(route) {
+    if (this.routeStatus.description === '') {
+      this.displayedDescription_ =
+          loadTimeData.getStringF('castingActivityStatus', route.description);

[mark a. foltz, 2017/05/12 00:02:46]

Why is the route description inserted into a formatted string (while the route
status description is taken as-is)?

[takumif, 2017/05/15 17:13:12]

This is to be consistent with the existing behavior. Currently the extensionview
doesn't use the formatting, but the fallback description (that is shown when the
extensionview doesn't load) does. The formatting simply prefixes "Casting: ", so
perhaps it's not necessary.

[mark a. foltz, 2017/05/15 20:43:22]

Okay, this inconsistency is a bit head scratching, but it can be cleaned up once
we land everything.

+    }
+  },
+
+  /**
+   * Called when the user clicks on or stops dragging the seek bar.
+   * @param {!Event} e
+   *
+   * @private
+   */
+  onSeekComplete_: function(e) {
+    this.isSeeking_ = false;
+    /** @type {{value: number}} */
+    var target = e.target;

[mark a. foltz, 2017/05/12 00:02:46]

This can be inlined. Similar comment applies below. 

[takumif, 2017/05/15 17:13:12]

Done.

+    this.displayedCurrentTime_ = target.value;
+    media_router.browserApi.seekCurrentMedia(this.displayedCurrentTime_);
+  },
+
+  /**
+   * Called when the user starts dragging the seek bar.
+   * @param {!Event} e
+   *
+   * @private
+   */
+  onSeekStart_: function(e) {
+    this.isSeeking_ = true;
+    /** @type {{immediateValue: number}} */
+    var target = e.target;
+    this.displayedCurrentTime_ = target.immediateValue;
+  },
+
+  /**
+   * Called when the user clicks on or stops dragging the volume bar.
+   * @param {!Event} e
+   *
+   * @private
+   */
+  onVolumeChangeComplete_: function(e) {
+    this.isVolumeChanging_ = false;
+    /** @type {{value: number}} */
+    var target = e.target;
+    this.volumeSliderValue_ = target.value;
+    media_router.browserApi.setCurrentMediaVolume(this.volumeSliderValue_);
+  },
+
+  /**
+   * Called when the user starts dragging the volume bar.
+   * @param {!Event} e
+   *
+   * @private
+   */
+  onVolumeChangeStart_: function(e) {
+    this.isVolumeChanging_ = true;
+    /** @type {{immediateValue: number}} */
+    var target = e.target;
+    this.volumeSliderValue_ = target.immediateValue;
+  },
+});