| 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 184 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 195 * @param {number} duration Duration in seconds. | 195 * @param {number} duration Duration in seconds. |
| 196 * @private | 196 * @private |
| 197 */ | 197 */ |
| 198 MediaControls.prototype.displayProgress_ = function(current, duration) { | 198 MediaControls.prototype.displayProgress_ = function(current, duration) { |
| 199 var ratio = current / duration; | 199 var ratio = current / duration; |
| 200 this.progressSlider_.setValue(ratio); | 200 this.progressSlider_.setValue(ratio); |
| 201 this.currentTime_.textContent = MediaControls.formatTime_(current); | 201 this.currentTime_.textContent = MediaControls.formatTime_(current); |
| 202 }; | 202 }; |
| 203 | 203 |
| 204 /** | 204 /** |
| 205 * @param {number} value Progress [0..1] | 205 * @param {number} value Progress [0..1]. |
| 206 * @private | 206 * @private |
| 207 */ | 207 */ |
| 208 MediaControls.prototype.onProgressChange_ = function(value) { | 208 MediaControls.prototype.onProgressChange_ = function(value) { |
| 209 if (!this.media_.seekable || !this.media_.duration) { | 209 if (!this.media_.seekable || !this.media_.duration) { |
| 210 console.error('Inconsistent media state'); | 210 console.error('Inconsistent media state'); |
| 211 return; | 211 return; |
| 212 } | 212 } |
| 213 | 213 |
| 214 var current = this.media_.duration * value; | 214 var current = this.media_.duration * value; |
| 215 this.media_.currentTime = current; | 215 this.media_.currentTime = current; |
| (...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 264 if (this.media_.volume == 0) { | 264 if (this.media_.volume == 0) { |
| 265 this.volume_.setValue(this.savedVolume_ || 1); | 265 this.volume_.setValue(this.savedVolume_ || 1); |
| 266 } else { | 266 } else { |
| 267 this.savedVolume_ = this.media_.volume; | 267 this.savedVolume_ = this.media_.volume; |
| 268 this.volume_.setValue(0); | 268 this.volume_.setValue(0); |
| 269 } | 269 } |
| 270 this.onVolumeChange_(this.volume_.getValue()); | 270 this.onVolumeChange_(this.volume_.getValue()); |
| 271 }; | 271 }; |
| 272 | 272 |
| 273 /** | 273 /** |
| 274 * @param {number} value Volume [0..1] | 274 * @param {number} value Volume [0..1]. |
| 275 * @return {number} The rough level [0..3] used to pick an icon. | 275 * @return {number} The rough level [0..3] used to pick an icon. |
| 276 * @private | 276 * @private |
| 277 */ | 277 */ |
| 278 MediaControls.getVolumeLevel_ = function(value) { | 278 MediaControls.getVolumeLevel_ = function(value) { |
| 279 if (value == 0) return 0; | 279 if (value == 0) return 0; |
| 280 if (value <= 1 / 3) return 1; | 280 if (value <= 1 / 3) return 1; |
| 281 if (value <= 2 / 3) return 2; | 281 if (value <= 2 / 3) return 2; |
| 282 return 3; | 282 return 3; |
| 283 }; | 283 }; |
| 284 | 284 |
| (...skipping 310 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 595 }; | 595 }; |
| 596 | 596 |
| 597 /** | 597 /** |
| 598 * @return {number} [0..1] The current value. | 598 * @return {number} [0..1] The current value. |
| 599 */ | 599 */ |
| 600 MediaControls.Slider.prototype.getValue = function() { | 600 MediaControls.Slider.prototype.getValue = function() { |
| 601 return this.value_; | 601 return this.value_; |
| 602 }; | 602 }; |
| 603 | 603 |
| 604 /** | 604 /** |
| 605 * @param {number} value [0..1] | 605 * @param {number} value [0..1]. |
| 606 */ | 606 */ |
| 607 MediaControls.Slider.prototype.setValue = function(value) { | 607 MediaControls.Slider.prototype.setValue = function(value) { |
| 608 this.value_ = value; | 608 this.value_ = value; |
| 609 this.setValueToUI_(value); | 609 this.setValueToUI_(value); |
| 610 }; | 610 }; |
| 611 | 611 |
| 612 /** | 612 /** |
| 613 * Fill the given proportion the slider bar (from the left). | 613 * Fill the given proportion the slider bar (from the left). |
| 614 * | 614 * |
| 615 * @param {number} proportion [0..1] | 615 * @param {number} proportion [0..1]. |
| 616 * @private | 616 * @private |
| 617 */ | 617 */ |
| 618 MediaControls.Slider.prototype.setFilled_ = function(proportion) { | 618 MediaControls.Slider.prototype.setFilled_ = function(proportion) { |
| 619 this.filled_.style.width = proportion * 100 + '%'; | 619 this.filled_.style.width = proportion * 100 + '%'; |
| 620 }; | 620 }; |
| 621 | 621 |
| 622 /** | 622 /** |
| 623 * Get the value from the input element. | 623 * Get the value from the input element. |
| 624 * | 624 * |
| 625 * @return {number} Value [0..1] | 625 * @return {number} Value [0..1]. |
| 626 * @private | 626 * @private |
| 627 */ | 627 */ |
| 628 MediaControls.Slider.prototype.getValueFromUI_ = function() { | 628 MediaControls.Slider.prototype.getValueFromUI_ = function() { |
| 629 return this.input_.value / this.input_.max; | 629 return this.input_.value / this.input_.max; |
| 630 }; | 630 }; |
| 631 | 631 |
| 632 /** | 632 /** |
| 633 * Update the UI with the current value. | 633 * Update the UI with the current value. |
| 634 * | 634 * |
| 635 * @param {number} value [0..1] | 635 * @param {number} value [0..1]. |
| 636 * @private | 636 * @private |
| 637 */ | 637 */ |
| 638 MediaControls.Slider.prototype.setValueToUI_ = function(value) { | 638 MediaControls.Slider.prototype.setValueToUI_ = function(value) { |
| 639 this.input_.value = value * this.input_.max; | 639 this.input_.value = value * this.input_.max; |
| 640 this.setFilled_(value); | 640 this.setFilled_(value); |
| 641 }; | 641 }; |
| 642 | 642 |
| 643 /** | 643 /** |
| 644 * Compute the proportion in which the given position divides the slider bar. | 644 * Compute the proportion in which the given position divides the slider bar. |
| 645 * | 645 * |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 701 * Number of animation steps. | 701 * Number of animation steps. |
| 702 */ | 702 */ |
| 703 MediaControls.AnimatedSlider.STEPS = 10; | 703 MediaControls.AnimatedSlider.STEPS = 10; |
| 704 | 704 |
| 705 /** | 705 /** |
| 706 * Animation duration. | 706 * Animation duration. |
| 707 */ | 707 */ |
| 708 MediaControls.AnimatedSlider.DURATION = 100; | 708 MediaControls.AnimatedSlider.DURATION = 100; |
| 709 | 709 |
| 710 /** | 710 /** |
| 711 * @param {number} value [0..1] | 711 * @param {number} value [0..1]. |
| 712 * @private | 712 * @private |
| 713 */ | 713 */ |
| 714 MediaControls.AnimatedSlider.prototype.setValueToUI_ = function(value) { | 714 MediaControls.AnimatedSlider.prototype.setValueToUI_ = function(value) { |
| 715 if (this.animationInterval_) { | 715 if (this.animationInterval_) { |
| 716 clearInterval(this.animationInterval_); | 716 clearInterval(this.animationInterval_); |
| 717 } | 717 } |
| 718 var oldValue = this.getValueFromUI_(); | 718 var oldValue = this.getValueFromUI_(); |
| 719 var step = 0; | 719 var step = 0; |
| 720 this.animationInterval_ = setInterval(function() { | 720 this.animationInterval_ = setInterval(function() { |
| 721 step++; | 721 step++; |
| (...skipping 407 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1129 AudioControls.prototype.onAdvanceClick_ = function(forward) { | 1129 AudioControls.prototype.onAdvanceClick_ = function(forward) { |
| 1130 if (!forward && | 1130 if (!forward && |
| 1131 (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) { | 1131 (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) { |
| 1132 // We are far enough from the beginning of the current track. | 1132 // We are far enough from the beginning of the current track. |
| 1133 // Restart it instead of than skipping to the previous one. | 1133 // Restart it instead of than skipping to the previous one. |
| 1134 this.getMedia().currentTime = 0; | 1134 this.getMedia().currentTime = 0; |
| 1135 } else { | 1135 } else { |
| 1136 this.advanceTrack_(forward); | 1136 this.advanceTrack_(forward); |
| 1137 } | 1137 } |
| 1138 }; | 1138 }; |
| OLD | NEW |