OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2017 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 // This Polymer element shows media controls for a route that is currently cast | |
6 // to a device. | |
7 Polymer({ | |
8 is: 'route-controls', | |
9 | |
10 properties: { | |
11 /** | |
12 * The current time displayed in seconds, before formatting. | |
13 * @type {number} | |
14 */ | |
15 displayedCurrentTime_: { | |
16 type: Number, | |
17 value: 0 | |
apacible
2017/05/17 21:52:17
nit: trailing commas please :)
takumif
2017/05/18 18:01:55
Done.
| |
18 }, | |
19 | |
20 /** | |
21 * The media description to display. Uses route description if none is | |
22 * provided by the route status object. | |
23 * @type {string} | |
24 */ | |
25 displayedDescription_: { | |
26 type: String, | |
27 value: '' | |
28 }, | |
29 | |
30 /** | |
31 * The volume shown in the volume control, between 0 and 1. | |
32 * @type {number} | |
33 */ | |
34 displayedVolume_: { | |
35 type: Number, | |
36 value: 0 | |
37 }, | |
38 | |
39 /** | |
40 * Set to true when the user is dragging the seek bar. Updates for the | |
41 * current time from the browser will be ignored when set to true. | |
42 * @private {boolean} | |
43 */ | |
44 isSeeking_: { | |
45 type: Boolean, | |
46 value: false | |
47 }, | |
48 | |
49 /** | |
50 * Set to true when the user is dragging the volume bar. Volume updates from | |
51 * the browser will be ignored when set to true. | |
52 * @private {boolean} | |
53 */ | |
54 isVolumeChanging_: { | |
55 type: Boolean, | |
56 value: false | |
57 }, | |
58 | |
59 /** | |
60 * The status of the media route shown. | |
61 * @private {!media_router.RouteStatus} | |
62 */ | |
63 routeStatus: { | |
64 type: Object, | |
65 observer: 'onRouteStatusChange_', | |
66 value: new media_router.RouteStatus('', '', false, false, false, false, | |
67 false, false, 0, 0, 0) | |
68 }, | |
69 }, | |
70 | |
71 behaviors: [ | |
72 I18nBehavior, | |
73 ], | |
74 | |
75 /** | |
76 * Converts a number representing an interval of seconds to a string with | |
77 * HH:MM:SS format. | |
78 * @param {number} timeInSec Must be non-negative. Intervals longer than 100 | |
79 * hours get truncated silently. | |
80 * @return {string} | |
81 * | |
82 * @private | |
83 */ | |
84 getFormattedTime_: function(timeInSec) { | |
85 if (timeInSec < 0) { | |
86 return ''; | |
87 } | |
88 var hours = Math.floor(timeInSec / 3600); | |
89 var minutes = Math.floor(timeInSec / 60) % 60; | |
90 var seconds = Math.floor(timeInSec) % 60; | |
91 return ('0' + hours).substr(-2) + ':' + ('0' + minutes).substr(-2) + ':' + | |
92 ('0' + seconds).substr(-2); | |
93 }, | |
94 | |
95 /** | |
96 * @param {!media_router.RouteStatus} routeStatus | |
97 * @return {string} The value for the icon attribute of the mute/unmute | |
98 * button. | |
99 * | |
100 * @private | |
101 */ | |
102 getMuteUnmuteIcon_: function(routeStatus) { | |
103 return routeStatus.isMuted ? 'av:volume-off' : 'av:volume-up'; | |
104 }, | |
105 | |
106 /** | |
107 * @param {!media_router.RouteStatus} routeStatus | |
108 * @return {string} Localized title for the mute/unmute button. | |
109 * | |
110 * @private | |
111 */ | |
112 getMuteUnmuteTitle_: function(routeStatus) { | |
113 return routeStatus.isMuted ? this.i18n('unmuteTitle') : | |
114 this.i18n('muteTitle'); | |
115 }, | |
116 | |
117 /** | |
118 * @param {!media_router.RouteStatus} routeStatus | |
119 * @return {string}The value for the icon attribute of the play/pause button. | |
120 * | |
121 * @private | |
122 */ | |
123 getPlayPauseIcon_: function(routeStatus) { | |
124 return routeStatus.isPaused ? 'av:play-arrow' : 'av:pause'; | |
125 }, | |
126 | |
127 /** | |
128 * @param {!media_router.RouteStatus} routeStatus | |
129 * @return {string} Localized title for the play/pause button. | |
130 * | |
131 * @private | |
132 */ | |
133 getPlayPauseTitle_: function(routeStatus) { | |
134 return routeStatus.isPaused ? this.i18n('playTitle') : | |
135 this.i18n('pauseTitle'); | |
136 }, | |
137 | |
138 /** | |
139 * Called when the user toggles the mute status of the media. Sends a mute or | |
140 * unmute command to the browser. | |
141 * | |
142 * @private | |
143 */ | |
144 onMuteUnmute_: function() { | |
145 media_router.browserApi.setCurrentMediaMute(!this.routeStatus.isMuted); | |
146 }, | |
147 | |
148 /** | |
149 * Called when the user toggles between playing and pausing the media. Sends a | |
150 * play or pause command to the browser. | |
151 * | |
152 * @private | |
153 */ | |
154 onPlayPause_: function() { | |
155 if (this.routeStatus.isPaused) { | |
156 media_router.browserApi.playCurrentMedia(); | |
157 } else { | |
158 media_router.browserApi.pauseCurrentMedia(); | |
159 } | |
160 }, | |
161 | |
162 /** | |
163 * Resets the route controls. Called when the route details view is closed. | |
164 */ | |
165 reset: function() { | |
166 this.routeStatus = new media_router.RouteStatus( | |
167 '', '', false, false, false, false, false, false, 0, 0, 0); | |
168 media_router.ui.setRouteControls(null); | |
169 }, | |
170 | |
171 /** | |
172 * Updates seek and volume bars if the user is not currently dragging on | |
173 * them. | |
174 * @param {!media_router.RouteStatus} newRouteStatus | |
175 * | |
176 * @private | |
177 */ | |
178 onRouteStatusChange_: function(newRouteStatus) { | |
179 if (!this.isSeeking_) { | |
180 this.displayedCurrentTime_ = newRouteStatus.currentTime; | |
181 } | |
182 if (!this.isVolumeChanging_) { | |
183 this.displayedVolume_ = newRouteStatus.volume; | |
184 } | |
185 if (newRouteStatus.description !== '') { | |
186 this.displayedDescription_ = newRouteStatus.description; | |
187 } | |
188 }, | |
189 | |
190 /** | |
191 * Called when the route is updated. Updates the description shown if it has | |
192 * not been provided by status updates. | |
193 * @param {!media_router.Route} route | |
194 */ | |
195 onRouteUpdated: function(route) { | |
196 if (this.routeStatus.description === '') { | |
197 this.displayedDescription_ = | |
198 loadTimeData.getStringF('castingActivityStatus', route.description); | |
199 } | |
200 }, | |
201 | |
202 /** | |
203 * Called when the user clicks on or stops dragging the seek bar. | |
204 * @param {!Event} e | |
205 * | |
206 * @private | |
207 */ | |
208 onSeekComplete_: function(e) { | |
209 this.isSeeking_ = false; | |
210 this.displayedCurrentTime_ = e.target.value; | |
211 media_router.browserApi.seekCurrentMedia(this.displayedCurrentTime_); | |
212 }, | |
213 | |
214 /** | |
215 * Called when the user starts dragging the seek bar. | |
216 * @param {!Event} e | |
217 * | |
218 * @private | |
219 */ | |
220 onSeekStart_: function(e) { | |
221 this.isSeeking_ = true; | |
222 this.displayedCurrentTime_ = e.target.immediateValue; | |
223 }, | |
224 | |
225 /** | |
226 * Called when the user clicks on or stops dragging the volume bar. | |
227 * @param {!Event} e | |
228 * | |
229 * @private | |
230 */ | |
231 onVolumeChangeComplete_: function(e) { | |
232 this.isVolumeChanging_ = false; | |
233 this.volumeSliderValue_ = e.target.value; | |
234 media_router.browserApi.setCurrentMediaVolume(this.volumeSliderValue_); | |
235 }, | |
236 | |
237 /** | |
238 * Called when the user starts dragging the volume bar. | |
239 * @param {!Event} e | |
240 * | |
241 * @private | |
242 */ | |
243 onVolumeChangeStart_: function(e) { | |
244 this.isVolumeChanging_ = true; | |
245 this.volumeSliderValue_ = e.target.immediateValue; | |
246 }, | |
247 }); | |
OLD | NEW |