Chromium Code Reviews| 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 |