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 471 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 482 // not known to be bounded yet. In such cases, we should hide duration. | 482 // not known to be bounded yet. In such cases, we should hide duration. |
| 483 this.currentTime_.textContent = MediaControls.formatTime_(current); | 483 this.currentTime_.textContent = MediaControls.formatTime_(current); |
| 484 this.currentTimeSpacer_.textContent = MediaControls.formatTime_(current); | 484 this.currentTimeSpacer_.textContent = MediaControls.formatTime_(current); |
| 485 } | 485 } |
| 486 }; | 486 }; |
| 487 | 487 |
| 488 /* | 488 /* |
| 489 * Volume controls | 489 * Volume controls |
| 490 */ | 490 */ |
| 491 | 491 |
| 492 MediaControls.STORAGE_PREFIX = 'videoplayer-'; | |
| 493 | |
| 494 MediaControls.KEY_VOLUME = MediaControls.STORAGE_PREFIX + 'volume'; | |
| 495 | |
| 492 /** | 496 /** |
| 493 * @param {HTMLElement=} opt_parent Parent element for the controls. | 497 * @param {HTMLElement=} opt_parent Parent element for the controls. |
| 494 */ | 498 */ |
| 495 MediaControls.prototype.initVolumeControls = function(opt_parent) { | 499 MediaControls.prototype.initVolumeControls = function(opt_parent) { |
| 496 var volumeControls = this.createControl('volume-controls', opt_parent); | 500 var volumeControls = this.createControl('volume-controls', opt_parent); |
| 497 | 501 |
| 498 this.soundButton_ = this.createButton('sound media-control', | 502 this.soundButton_ = this.createButton('sound media-control', |
| 499 this.onSoundButtonClick_.bind(this), volumeControls); | 503 this.onSoundButtonClick_.bind(this), volumeControls); |
| 500 this.soundButton_.setAttribute('level', 3); // max level. | 504 this.soundButton_.setAttribute('level', 3); // max level. |
| 501 this.soundButton_.setAttribute('aria-label', | 505 this.soundButton_.setAttribute('aria-label', |
| 502 str('MEDIA_PLAYER_MUTE_BUTTON_LABEL')); | 506 str('MEDIA_PLAYER_MUTE_BUTTON_LABEL')); |
| 503 | 507 |
| 504 this.volume_ = /** @type {!PaperSliderElement} */ ( | 508 this.volume_ = /** @type {!PaperSliderElement} */ ( |
| 505 document.createElement('paper-slider')); | 509 document.createElement('paper-slider')); |
| 506 this.volume_.classList.add('volume', 'media-control'); | 510 this.volume_.classList.add('volume', 'media-control'); |
| 507 this.volume_.setAttribute('aria-label', | 511 this.volume_.setAttribute('aria-label', |
| 508 str('MEDIA_PLAYER_VOLUME_SLIDER_LABEL')); | 512 str('MEDIA_PLAYER_VOLUME_SLIDER_LABEL')); |
| 509 this.volume_.addEventListener('change', function(event) { | 513 this.volume_.addEventListener('change', function(event) { |
| 510 this.onVolumeChange_(this.volume_.ratio); | 514 this.onVolumeChange_(this.volume_.ratio); |
| 511 }.bind(this)); | 515 }.bind(this)); |
| 512 this.volume_.addEventListener('immediate-value-change', function(event) { | 516 this.volume_.addEventListener('immediate-value-change', function(event) { |
| 513 this.onVolumeDrag_(); | 517 this.onVolumeDrag_(); |
| 514 }.bind(this)); | 518 }.bind(this)); |
| 515 this.volume_.value = this.volume_.max; | 519 this.loadVolumeControlState(); |
| 516 volumeControls.appendChild(this.volume_); | 520 volumeControls.appendChild(this.volume_); |
| 517 }; | 521 }; |
| 518 | 522 |
| 523 MediaControls.prototype.loadVolumeControlState = function() { | |
| 524 chrome.storage.local.get([MediaControls.KEY_VOLUME], function(retrieved) { | |
| 525 var volume = (MediaControls.KEY_VOLUME in retrieved) | |
| 526 ? retrieved[MediaControls.KEY_VOLUME] : 1; | |
|
oka
2016/11/29 05:58:41
retrieved[MediaControls.KEY_VOLUME] || 1;
is commo
yamaguchi
2016/11/29 06:51:32
The stored volume can be 0 when muted or the slide
oka
2016/11/29 07:13:57
Ah. Sorry.
| |
| 527 this.volume_.value = this.volume_.max * volume; | |
| 528 }.bind(this)); | |
| 529 }; | |
| 530 | |
| 531 MediaControls.prototype.saveVolumeControlState = function() { | |
| 532 var valuesToStore = {}; | |
| 533 valuesToStore[MediaControls.KEY_VOLUME] = this.media_.volume; | |
|
oka
2016/11/29 05:58:41
Optional: media_.volume actually means the ratio o
yamaguchi
2016/11/29 06:51:32
Added "normalized" to those symbol names.
I also t
| |
| 534 chrome.storage.local.set(valuesToStore, function() {}); | |
|
oka
2016/11/29 05:58:41
Remove the callback, which is optional.
yamaguchi
2016/11/29 06:51:32
Done.
| |
| 535 }; | |
| 536 | |
| 519 /** | 537 /** |
| 520 * Click handler for the sound level button. | 538 * Click handler for the sound level button. |
| 521 * @private | 539 * @private |
| 522 */ | 540 */ |
| 523 MediaControls.prototype.onSoundButtonClick_ = function() { | 541 MediaControls.prototype.onSoundButtonClick_ = function() { |
| 524 if (this.media_.volume == 0) { | 542 if (this.media_.volume == 0) { |
| 525 this.volume_.value = (this.savedVolume_ || 1) * this.volume_.max; | 543 this.volume_.value = (this.savedVolume_ || 1) * this.volume_.max; |
| 526 this.soundButton_.setAttribute('aria-label', | 544 this.soundButton_.setAttribute('aria-label', |
| 527 str('MEDIA_PLAYER_MUTE_BUTTON_LABEL')); | 545 str('MEDIA_PLAYER_MUTE_BUTTON_LABEL')); |
| 528 } else { | 546 } else { |
| (...skipping 23 matching lines...) Expand all Loading... | |
| 552 */ | 570 */ |
| 553 MediaControls.prototype.onVolumeChange_ = function(value) { | 571 MediaControls.prototype.onVolumeChange_ = function(value) { |
| 554 if (!this.media_) | 572 if (!this.media_) |
| 555 return; // Media is detached. | 573 return; // Media is detached. |
| 556 | 574 |
| 557 this.media_.volume = value; | 575 this.media_.volume = value; |
| 558 this.soundButton_.setAttribute('level', MediaControls.getVolumeLevel_(value)); | 576 this.soundButton_.setAttribute('level', MediaControls.getVolumeLevel_(value)); |
| 559 this.soundButton_.setAttribute('aria-label', | 577 this.soundButton_.setAttribute('aria-label', |
| 560 value === 0 ? str('MEDIA_PLAYER_UNMUTE_BUTTON_LABEL') | 578 value === 0 ? str('MEDIA_PLAYER_UNMUTE_BUTTON_LABEL') |
| 561 : str('MEDIA_PLAYER_MUTE_BUTTON_LABEL')); | 579 : str('MEDIA_PLAYER_MUTE_BUTTON_LABEL')); |
| 580 this.saveVolumeControlState(); | |
| 562 }; | 581 }; |
| 563 | 582 |
| 564 /** | 583 /** |
| 565 * @private | 584 * @private |
| 566 */ | 585 */ |
| 567 MediaControls.prototype.onVolumeDrag_ = function() { | 586 MediaControls.prototype.onVolumeDrag_ = function() { |
| 568 if (this.media_.volume !== 0) { | 587 if (this.media_.volume !== 0) { |
| 569 this.savedVolume_ = this.media_.volume; | 588 this.savedVolume_ = this.media_.volume; |
| 570 } | 589 } |
| 571 }; | 590 }; |
| (...skipping 521 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 1093 this.fullscreenButton_.setAttribute('aria-label', | 1112 this.fullscreenButton_.setAttribute('aria-label', |
| 1094 fullscreen ? str('VIDEO_PLAYER_EXIT_FULL_SCREEN_BUTTON_LABEL') | 1113 fullscreen ? str('VIDEO_PLAYER_EXIT_FULL_SCREEN_BUTTON_LABEL') |
| 1095 : str('VIDEO_PLAYER_FULL_SCREEN_BUTTON_LABEL'));; | 1114 : str('VIDEO_PLAYER_FULL_SCREEN_BUTTON_LABEL'));; |
| 1096 // If the fullscreen button has focus on entering fullscreen mode, reset the | 1115 // If the fullscreen button has focus on entering fullscreen mode, reset the |
| 1097 // focus to make the spacebar toggle play/pause state. This is the | 1116 // focus to make the spacebar toggle play/pause state. This is the |
| 1098 // consistent behavior with Youtube Web UI. | 1117 // consistent behavior with Youtube Web UI. |
| 1099 if (fullscreen) | 1118 if (fullscreen) |
| 1100 this.fullscreenButton_.blur(); | 1119 this.fullscreenButton_.blur(); |
| 1101 } | 1120 } |
| 1102 }; | 1121 }; |
| OLD | NEW |