Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(33)

Side by Side Diff: chrome/browser/resources/file_manager/js/media/media_controls.js

Issue 12676002: Added the reply/loop icon to the video player. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Fixed. Created 7 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « chrome/browser/resources/file_manager/images/media/media_loop_hover.png ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
63 parent.appendChild(control); 63 parent.appendChild(control);
64 return control; 64 return control;
65 }; 65 };
66 66
67 /** 67 /**
68 * Create a custom button. 68 * Create a custom button.
69 * 69 *
70 * @param {string} className Class name. 70 * @param {string} className Class name.
71 * @param {function(Event)} handler Click handler. 71 * @param {function(Event)} handler Click handler.
72 * @param {HTMLElement=} opt_parent Parent element or container if undefined. 72 * @param {HTMLElement=} opt_parent Parent element or container if undefined.
73 * @param {boolean=} opt_toggle True if the button has toggle state. 73 * @param {number=} opt_numStates Number of states, default: 1.
yoshiki 2013/03/08 08:20:07 Expressing the status as a raw number is difficult
mtomasz 2013/03/11 03:47:16 Done.
74 * @return {HTMLElement} The new button element. 74 * @return {HTMLElement} The new button element.
75 */ 75 */
76 MediaControls.prototype.createButton = function( 76 MediaControls.prototype.createButton = function(
77 className, handler, opt_parent, opt_toggle) { 77 className, handler, opt_parent, opt_numStates) {
78 opt_numStates = opt_numStates || 1;
yoshiki 2013/03/08 08:20:07 nit: |opt_numStates| is no longer optional. Please
mtomasz 2013/03/08 09:10:00 We use this pattern very often. opt_sth = opt_sth
yoshiki 2013/03/11 01:45:32 I prefer adding additional value, but it's not str
mtomasz 2013/03/11 03:47:16 The reason I'd prefer this is that I don't think t
yoshiki 2013/03/11 04:42:45 Ok, let's leave it as it is. But the code may be
79
78 var button = this.createControl(className, opt_parent); 80 var button = this.createControl(className, opt_parent);
79 button.classList.add('media-button'); 81 button.classList.add('media-button');
80 button.addEventListener('click', handler); 82 button.addEventListener('click', handler);
81 83
82 var numStates = opt_toggle ? 2 : 1; 84 for (var state = 0; state != opt_numStates; state++) {
83 for (var state = 0; state != numStates; state++) {
84 var stateClass = 'state' + state; 85 var stateClass = 'state' + state;
85 this.createControl('normal ' + stateClass, button); 86 this.createControl('normal ' + stateClass, button);
86 this.createControl('hover ' + stateClass, button); 87 this.createControl('hover ' + stateClass, button);
87 this.createControl('active ' + stateClass, button); 88 this.createControl('active ' + stateClass, button);
88 } 89 }
89 this.createControl('disabled', button); 90 this.createControl('disabled', button);
90 91
91 button.setAttribute('state', 0); 92 button.setAttribute('state', 0);
92 button.addEventListener('click', handler); 93 button.addEventListener('click', handler);
93 return button; 94 return button;
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
144 this.pause(); 145 this.pause();
145 else 146 else
146 this.play(); 147 this.play();
147 }; 148 };
148 149
149 /** 150 /**
150 * @param {HTMLElement=} opt_parent Parent container. 151 * @param {HTMLElement=} opt_parent Parent container.
151 */ 152 */
152 MediaControls.prototype.initPlayButton = function(opt_parent) { 153 MediaControls.prototype.initPlayButton = function(opt_parent) {
153 this.playButton_ = this.createButton('play media-control', 154 this.playButton_ = this.createButton('play media-control',
154 this.togglePlayState.bind(this), opt_parent, true /* toggle */); 155 this.togglePlayState.bind(this), opt_parent, 3 /* States. */);
155 }; 156 };
156 157
157 /* 158 /*
158 * Time controls 159 * Time controls
159 */ 160 */
160 161
161 /** 162 /**
162 * The default range of 100 is too coarse for the media progress slider. 163 * The default range of 100 is too coarse for the media progress slider.
163 */ 164 */
164 MediaControls.PROGRESS_RANGE = 5000; 165 MediaControls.PROGRESS_RANGE = 5000;
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after
224 if (on) { 225 if (on) {
225 this.resumeAfterDrag_ = this.isPlaying(); 226 this.resumeAfterDrag_ = this.isPlaying();
226 this.media_.pause(); 227 this.media_.pause();
227 } else { 228 } else {
228 if (this.resumeAfterDrag_) { 229 if (this.resumeAfterDrag_) {
229 if (this.media_.ended) 230 if (this.media_.ended)
230 this.onMediaPlay_(false); 231 this.onMediaPlay_(false);
231 else 232 else
232 this.media_.play(); 233 this.media_.play();
233 } 234 }
235 this.updatePlayButtonState_(this.isPlaying());
234 } 236 }
235 }; 237 };
236 238
237 /* 239 /*
238 * Volume controls 240 * Volume controls
239 */ 241 */
240 242
241 /** 243 /**
242 * @param {HTMLElement=} opt_parent Parent element for the controls. 244 * @param {HTMLElement=} opt_parent Parent element for the controls.
243 */ 245 */
(...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after
358 360
359 /** 361 /**
360 * 'play' and 'pause' event handler. 362 * 'play' and 'pause' event handler.
361 * @param {boolean} playing True if playing. 363 * @param {boolean} playing True if playing.
362 * @private 364 * @private
363 */ 365 */
364 MediaControls.prototype.onMediaPlay_ = function(playing) { 366 MediaControls.prototype.onMediaPlay_ = function(playing) {
365 if (this.progressSlider_.isDragging()) 367 if (this.progressSlider_.isDragging())
366 return; 368 return;
367 369
368 this.playButton_.setAttribute('state', playing ? '1' : '0'); 370 this.updatePlayButtonState_(playing);
369 this.onPlayStateChanged(); 371 this.onPlayStateChanged();
370 }; 372 };
371 373
372 /** 374 /**
373 * 'durationchange' event handler. 375 * 'durationchange' event handler.
374 * @private 376 * @private
375 */ 377 */
376 MediaControls.prototype.onMediaDuration_ = function() { 378 MediaControls.prototype.onMediaDuration_ = function() {
377 if (!this.media_.duration) { 379 if (!this.media_.duration) {
378 this.enableControls_('.media-control', false); 380 this.enableControls_('.media-control', false);
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
429 */ 431 */
430 MediaControls.prototype.onMediaComplete = function() {}; 432 MediaControls.prototype.onMediaComplete = function() {};
431 433
432 /** 434 /**
433 * Called when play/pause state is changed or on playback progress. 435 * Called when play/pause state is changed or on playback progress.
434 * This is the right moment to save the play state. 436 * This is the right moment to save the play state.
435 */ 437 */
436 MediaControls.prototype.onPlayStateChanged = function() {}; 438 MediaControls.prototype.onPlayStateChanged = function() {};
437 439
438 /** 440 /**
441 * Updates the play button state.
442 * @param {boolean} playing If the video is playing.
443 * @private
444 */
445 MediaControls.prototype.updatePlayButtonState_ = function(playing) {
446 if (playing) {
447 this.playButton_.setAttribute('state', '1'); // Pause icon.
448 } else if (!this.media_.ended) {
449 this.playButton_.setAttribute('state', '0'); // Play icon.
450 } else {
451 this.playButton_.setAttribute('state', '2'); // Replay icon.
452 }
453 };
454
455 /**
439 * Restore play state. Base implementation is empty. 456 * Restore play state. Base implementation is empty.
440 */ 457 */
441 MediaControls.prototype.restorePlayState = function() {}; 458 MediaControls.prototype.restorePlayState = function() {};
442 459
443 /** 460 /**
444 * Encode current state into the page URL or the app state. 461 * Encode current state into the page URL or the app state.
445 */ 462 */
446 MediaControls.prototype.encodeState = function() { 463 MediaControls.prototype.encodeState = function() {
447 if (!this.media_.duration) 464 if (!this.media_.duration)
448 return; 465 return;
(...skipping 683 matching lines...) Expand 10 before | Expand all | Expand 10 after
1132 AudioControls.prototype.onAdvanceClick_ = function(forward) { 1149 AudioControls.prototype.onAdvanceClick_ = function(forward) {
1133 if (!forward && 1150 if (!forward &&
1134 (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) { 1151 (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) {
1135 // We are far enough from the beginning of the current track. 1152 // We are far enough from the beginning of the current track.
1136 // Restart it instead of than skipping to the previous one. 1153 // Restart it instead of than skipping to the previous one.
1137 this.getMedia().currentTime = 0; 1154 this.getMedia().currentTime = 0;
1138 } else { 1155 } else {
1139 this.advanceTrack_(forward); 1156 this.advanceTrack_(forward);
1140 } 1157 }
1141 }; 1158 };
OLDNEW
« no previous file with comments | « chrome/browser/resources/file_manager/images/media/media_loop_hover.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698