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 |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8834e257f0df517de70a1eb3e88d191fc90e07ec |
--- /dev/null |
+++ b/chrome/browser/resources/media_router/elements/route_controls/route_controls.js |
@@ -0,0 +1,255 @@ |
+// 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
takumif
2017/05/15 17:13:12
Acknowledged. I think determining user intention b
|
+ 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, shou
takumif
2017/05/15 17:13:12
displayedDescription_ would already be set to eith
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 forma
takumif
2017/05/15 17:13:12
This is to be consistent with the existing behavio
mark a. foltz
2017/05/15 20:43:22
Okay, this inconsistency is a bit head scratching,
|
+ } |
+ }, |
+ |
+ /** |
+ * 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; |
+ }, |
+}); |