OLD | NEW |
---|---|
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview MediaControls class implements media playback controls | 6 * @fileoverview MediaControls class implements media playback controls |
7 * that exist outside of the audio/video HTML element. | 7 * that exist outside of the audio/video HTML element. |
8 */ | 8 */ |
9 | 9 |
10 /** | 10 /** |
(...skipping 227 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
238 /* | 238 /* |
239 * Time controls | 239 * Time controls |
240 */ | 240 */ |
241 | 241 |
242 /** | 242 /** |
243 * The default range of 100 is too coarse for the media progress slider. | 243 * The default range of 100 is too coarse for the media progress slider. |
244 */ | 244 */ |
245 MediaControls.PROGRESS_RANGE = 5000; | 245 MediaControls.PROGRESS_RANGE = 5000; |
246 | 246 |
247 /** | 247 /** |
248 * @param {boolean=} opt_seekMark True if the progress slider should have | |
249 * a seek mark. | |
250 * @param {HTMLElement=} opt_parent Parent container. | 248 * @param {HTMLElement=} opt_parent Parent container. |
251 */ | 249 */ |
252 MediaControls.prototype.initTimeControls = function(opt_seekMark, opt_parent) { | 250 MediaControls.prototype.initTimeControls = function(opt_parent) { |
fukino
2015/10/15 12:45:05
After removing AudioControl class, opt_seemMark is
| |
253 var timeControls = this.createControl('time-controls', opt_parent); | 251 var timeControls = this.createControl('time-controls', opt_parent); |
254 | 252 |
255 var sliderConstructor = | 253 this.progressSlider_ = new MediaControls.PreciseSlider( |
256 opt_seekMark ? MediaControls.PreciseSlider : MediaControls.Slider; | |
257 | |
258 this.progressSlider_ = new sliderConstructor( | |
259 this.createControl('progress media-control', timeControls), | 254 this.createControl('progress media-control', timeControls), |
260 0, /* value */ | 255 0, /* value */ |
261 MediaControls.PROGRESS_RANGE, | 256 MediaControls.PROGRESS_RANGE, |
262 this.onProgressChange_.bind(this), | 257 this.onProgressChange_.bind(this), |
263 this.onProgressDrag_.bind(this)); | 258 this.onProgressDrag_.bind(this)); |
264 | 259 |
265 var timeBox = this.createControl('time media-control', timeControls); | 260 var timeBox = this.createControl('time media-control', timeControls); |
266 | 261 |
267 this.duration_ = this.createControl('duration', timeBox); | 262 this.duration_ = this.createControl('duration', timeBox); |
268 // Set the initial width to the minimum to reduce the flicker. | 263 // Set the initial width to the minimum to reduce the flicker. |
(...skipping 572 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
841 /** | 836 /** |
842 * Create a customized slider with a precise time feedback. | 837 * Create a customized slider with a precise time feedback. |
843 * | 838 * |
844 * The time value is shown above the slider bar at the mouse position. | 839 * The time value is shown above the slider bar at the mouse position. |
845 * | 840 * |
846 * @param {!HTMLElement} container The containing div element. | 841 * @param {!HTMLElement} container The containing div element. |
847 * @param {number} value Initial value [0..1]. | 842 * @param {number} value Initial value [0..1]. |
848 * @param {number} range Number of distinct slider positions to be supported. | 843 * @param {number} range Number of distinct slider positions to be supported. |
849 * @param {function(number)} onChange Value change handler. | 844 * @param {function(number)} onChange Value change handler. |
850 * @param {function(boolean)} onDrag Drag begin/end handler. | 845 * @param {function(boolean)} onDrag Drag begin/end handler. |
851 * @param {function(number):string} formatFunction Value formatting function. | |
852 * @constructor | 846 * @constructor |
853 * @struct | 847 * @struct |
854 * @extends {MediaControls.Slider} | 848 * @extends {MediaControls.Slider} |
855 */ | 849 */ |
856 MediaControls.PreciseSlider = function( | 850 MediaControls.PreciseSlider = function( |
857 container, value, range, onChange, onDrag, formatFunction) { | 851 container, value, range, onChange, onDrag) { |
fukino
2015/10/15 12:45:05
unused argument.
| |
858 MediaControls.Slider.apply(this, arguments); | 852 MediaControls.Slider.apply(this, arguments); |
859 | 853 |
860 var doc = this.container_.ownerDocument; | 854 var doc = this.container_.ownerDocument; |
861 | 855 |
862 /** | 856 /** |
863 * @type {number} | 857 * @type {number} |
864 * @private | 858 * @private |
865 */ | 859 */ |
866 this.latestMouseUpTime_ = 0; | 860 this.latestMouseUpTime_ = 0; |
867 | 861 |
(...skipping 197 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1065 * @struct | 1059 * @struct |
1066 * @extends {MediaControls} | 1060 * @extends {MediaControls} |
1067 */ | 1061 */ |
1068 function VideoControls(containerElement, onMediaError, stringFunction, | 1062 function VideoControls(containerElement, onMediaError, stringFunction, |
1069 opt_fullScreenToggle, opt_stateIconParent) { | 1063 opt_fullScreenToggle, opt_stateIconParent) { |
1070 MediaControls.call(this, containerElement, onMediaError); | 1064 MediaControls.call(this, containerElement, onMediaError); |
1071 this.stringFunction_ = stringFunction; | 1065 this.stringFunction_ = stringFunction; |
1072 | 1066 |
1073 this.container_.classList.add('video-controls'); | 1067 this.container_.classList.add('video-controls'); |
1074 this.initPlayButton(); | 1068 this.initPlayButton(); |
1075 this.initTimeControls(true /* show seek mark */); | 1069 this.initTimeControls(); |
1076 this.initVolumeControls(); | 1070 this.initVolumeControls(); |
1077 | 1071 |
1078 // Create the cast button. | 1072 // Create the cast button. |
1079 this.castButton_ = this.createButton('cast menubutton'); | 1073 this.castButton_ = this.createButton('cast menubutton'); |
1080 this.castButton_.setAttribute('menu', '#cast-menu'); | 1074 this.castButton_.setAttribute('menu', '#cast-menu'); |
1081 this.castButton_.setAttribute( | 1075 this.castButton_.setAttribute( |
1082 'label', this.stringFunction_('VIDEO_PLAYER_PLAY_ON')); | 1076 'label', this.stringFunction_('VIDEO_PLAYER_PLAY_ON')); |
1083 cr.ui.decorate(this.castButton_, cr.ui.MenuButton); | 1077 cr.ui.decorate(this.castButton_, cr.ui.MenuButton); |
1084 | 1078 |
1085 if (opt_fullScreenToggle) { | 1079 if (opt_fullScreenToggle) { |
(...skipping 207 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
1293 var hideBelow = function(selector, limit) { | 1287 var hideBelow = function(selector, limit) { |
1294 this.container_.querySelector(selector).style.display = | 1288 this.container_.querySelector(selector).style.display = |
1295 width < limit ? 'none' : '-webkit-box'; | 1289 width < limit ? 'none' : '-webkit-box'; |
1296 }.bind(this); | 1290 }.bind(this); |
1297 | 1291 |
1298 hideBelow('.time', 350); | 1292 hideBelow('.time', 350); |
1299 hideBelow('.volume', 275); | 1293 hideBelow('.volume', 275); |
1300 hideBelow('.volume-controls', 210); | 1294 hideBelow('.volume-controls', 210); |
1301 hideBelow('.fullscreen', 150); | 1295 hideBelow('.fullscreen', 150); |
1302 }; | 1296 }; |
1303 | |
1304 /** | |
1305 * Creates audio controls. | |
1306 * | |
1307 * @param {!HTMLElement} container Parent container. | |
1308 * @param {function(boolean)} advanceTrack Parameter: true=forward. | |
1309 * @param {function(Event)} onError Error handler. | |
1310 * @constructor | |
1311 * @struct | |
1312 * @extends {MediaControls} | |
1313 */ | |
1314 function AudioControls(container, advanceTrack, onError) { | |
1315 MediaControls.call(this, container, onError); | |
1316 | |
1317 this.container_.classList.add('audio-controls'); | |
1318 | |
1319 this.advanceTrack_ = advanceTrack; | |
1320 | |
1321 this.initPlayButton(); | |
1322 this.initTimeControls(false /* no seek mark */); | |
1323 /* No volume controls */ | |
1324 this.createButton('previous', this.onAdvanceClick_.bind(this, false)); | |
1325 this.createButton('next', this.onAdvanceClick_.bind(this, true)); | |
1326 | |
1327 // Disables all controls at first. | |
1328 this.enableControls_('.media-control', false); | |
1329 | |
1330 var audioControls = this; | |
1331 chrome.mediaPlayerPrivate.onNextTrack.addListener( | |
1332 function() { audioControls.onAdvanceClick_(true); }); | |
1333 chrome.mediaPlayerPrivate.onPrevTrack.addListener( | |
1334 function() { audioControls.onAdvanceClick_(false); }); | |
1335 chrome.mediaPlayerPrivate.onTogglePlayState.addListener( | |
1336 function() { audioControls.togglePlayState(); }); | |
1337 } | |
1338 | |
1339 AudioControls.prototype = { __proto__: MediaControls.prototype }; | |
1340 | |
1341 /** | |
1342 * Media completion handler. Advances to the next track. | |
1343 */ | |
1344 AudioControls.prototype.onMediaComplete = function() { | |
1345 this.advanceTrack_(true); | |
1346 }; | |
1347 | |
1348 /** | |
1349 * The track position after which "previous" button acts as "restart". | |
1350 */ | |
1351 AudioControls.TRACK_RESTART_THRESHOLD = 5; // seconds. | |
1352 | |
1353 /** | |
1354 * @param {boolean} forward True if advancing forward. | |
1355 * @private | |
1356 */ | |
1357 AudioControls.prototype.onAdvanceClick_ = function(forward) { | |
1358 if (!forward && | |
1359 (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) { | |
1360 // We are far enough from the beginning of the current track. | |
1361 // Restart it instead of than skipping to the previous one. | |
1362 this.getMedia().currentTime = 0; | |
1363 } else { | |
1364 this.advanceTrack_(forward); | |
1365 } | |
1366 }; | |
OLD | NEW |