-
Notifications
You must be signed in to change notification settings - Fork 7.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added support for playbackRate switching. closes #1132
- Loading branch information
Showing
15 changed files
with
229 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| /** | ||
| * The component for controlling the playback rate | ||
| * | ||
| * @param {vjs.Player|Object} player | ||
| * @param {Object=} options | ||
| * @constructor | ||
| */ | ||
| vjs.PlaybackRateMenuButton = vjs.MenuButton.extend({ | ||
| /** @constructor */ | ||
| init: function(player, options){ | ||
| vjs.MenuButton.call(this, player, options); | ||
|
|
||
| this.updateVisibility(); | ||
| this.updateLabel(); | ||
|
|
||
| player.on('loadstart', vjs.bind(this, this.updateVisibility)); | ||
| player.on('ratechange', vjs.bind(this, this.updateLabel)); | ||
| } | ||
| }); | ||
|
|
||
| vjs.PlaybackRateMenuButton.prototype.createEl = function(){ | ||
| var el = vjs.Component.prototype.createEl.call(this, 'div', { | ||
| className: 'vjs-playback-rate vjs-menu-button vjs-control', | ||
| innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">Playback Rate</span></div>' | ||
| }); | ||
|
|
||
| this.labelEl_ = vjs.createEl('div', { | ||
| className: 'vjs-playback-rate-value', | ||
| innerHTML: 1.0 | ||
| }); | ||
|
|
||
| el.appendChild(this.labelEl_); | ||
|
|
||
| return el; | ||
| }; | ||
|
|
||
| // Menu creation | ||
| vjs.PlaybackRateMenuButton.prototype.createMenu = function(){ | ||
| var menu = new vjs.Menu(this.player()); | ||
| var rates = this.player().options().playbackRates; | ||
|
|
||
| if (rates) { | ||
| for (var i = rates.length - 1; i >= 0; i--) { | ||
| menu.addChild( | ||
| new vjs.PlaybackRateMenuItem(this.player(), {rate: rates[i] + 'x'}) | ||
| ); | ||
| }; | ||
| } | ||
|
|
||
| return menu; | ||
| }; | ||
|
|
||
| vjs.PlaybackRateMenuButton.prototype.updateARIAAttributes = function(){ | ||
| // Current playback rate | ||
| this.el().setAttribute('aria-valuenow', this.player().playbackRate()); | ||
| }; | ||
|
|
||
| vjs.PlaybackRateMenuButton.prototype.onClick = function(){ | ||
| // select next rate option | ||
| var currentRate = this.player().playbackRate(); | ||
| var rates = this.player().options().playbackRates; | ||
| // this will select first one if the last one currently selected | ||
| var newRate = rates[0]; | ||
| for (var i = 0; i <rates.length ; i++) { | ||
| if (rates[i] > currentRate) { | ||
| newRate = rates[i]; | ||
| break; | ||
| } | ||
| }; | ||
| this.player().playbackRate(newRate); | ||
| }; | ||
|
|
||
| vjs.PlaybackRateMenuButton.prototype.playbackRateSupported = function(){ | ||
| return this.player().tech | ||
| && this.player().tech.features['playbackRate'] | ||
| && this.player().options().playbackRates | ||
| && this.player().options().playbackRates.length > 0 | ||
| ; | ||
| }; | ||
|
|
||
| /** | ||
| * Hide playback rate controls when they're no playback rate options to select | ||
| */ | ||
| vjs.PlaybackRateMenuButton.prototype.updateVisibility = function(){ | ||
| if (this.playbackRateSupported()) { | ||
| this.removeClass('vjs-hidden'); | ||
| } else { | ||
| this.addClass('vjs-hidden'); | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * Update button label when rate changed | ||
| */ | ||
| vjs.PlaybackRateMenuButton.prototype.updateLabel = function(){ | ||
| if (this.playbackRateSupported()) { | ||
| this.labelEl_.innerHTML = this.player().playbackRate() + 'x'; | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * The specific menu item type for selecting a playback rate | ||
| * | ||
| * @constructor | ||
| */ | ||
| vjs.PlaybackRateMenuItem = vjs.MenuItem.extend({ | ||
| contentElType: 'button', | ||
| /** @constructor */ | ||
| init: function(player, options){ | ||
| var label = this.label = options['rate']; | ||
| var rate = this.rate = parseFloat(label, 10); | ||
|
|
||
| // Modify options for parent MenuItem class's init. | ||
| options['label'] = label; | ||
| options['selected'] = rate === 1; | ||
| vjs.MenuItem.call(this, player, options); | ||
|
|
||
| this.player().on('ratechange', vjs.bind(this, this.update)); | ||
| } | ||
| }); | ||
|
|
||
| vjs.PlaybackRateMenuItem.prototype.onClick = function(){ | ||
| vjs.MenuItem.prototype.onClick.call(this); | ||
| this.player().playbackRate(this.rate); | ||
| }; | ||
|
|
||
| vjs.PlaybackRateMenuItem.prototype.update = function(){ | ||
| this.selected(this.player().playbackRate() == this.rate); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters