-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dorska/quality selector #556
Merged
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
6c870de
initial work on quality selector button
adorsk 0086746
test/format updates
0285493
fix pip string for pip 10 (which tox force installs >:( )
adorsk e8cab7c
change playlist selector to select highest available active playlist
adorsk 8b661ea
remove defunct fn
adorsk 4fdb76f
revert '-e' changes for requirements, no need for '-e' w/ bug fix fro…
adorsk File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| /* Adapted from https://github.com/chrisboustead/videojs-hls-quality-selector . | ||
| * We use our own version rather than the original because | ||
| * the original structures its code in a way that makes it difficult to | ||
| * register the plugin; | ||
| * the original will register the plugin against its own videojs instance, | ||
| * from its own node_modules, rather than our videojs instance. | ||
| * This happens regardless of whether we 'require' or 'import' it. | ||
| * So, we use our own version instead. | ||
| */ | ||
|
|
||
| import videojs from "video.js" | ||
|
|
||
| const hlsQualitySelector = function() { | ||
| const player = this | ||
| player.ready(() => { | ||
| player.hlsQualitySelector = new HlsQualitySelectorPlugin(player) | ||
| }) | ||
| } | ||
|
|
||
| class HlsQualitySelectorPlugin { | ||
| constructor(player) { | ||
| this.player = player | ||
| this.keyedMenuItems = {} | ||
| this.KEY_FOR_AUTO = "__AUTO__" | ||
| if (this.player.qualityLevels && this.getHls()) { | ||
| this.createQualityMenu() | ||
| this.bindPlayerEvents() | ||
| } | ||
| } | ||
|
|
||
| getHls() { | ||
| return this.player.tech({ IWillNotUseThisInPlugins: true }).hls | ||
| } | ||
|
|
||
| bindPlayerEvents() { | ||
| this.player | ||
| .qualityLevels() | ||
| .on("addqualitylevel", this.onAddQualityLevel.bind(this)) | ||
| } | ||
|
|
||
| createQualityMenu() { | ||
| const player = this.player | ||
| const videoJsButtonClass = videojs.getComponent("MenuButton") | ||
| const concreteButtonClass = videojs.extend(videoJsButtonClass, { | ||
| constructor: function() { | ||
| videoJsButtonClass.call(this, player, { | ||
| title: player.localize("Quality") | ||
| }) | ||
| }, | ||
| createItems: function() { | ||
| return [] | ||
| } | ||
| }) | ||
|
|
||
| this._qualityMenuButton = new concreteButtonClass() | ||
|
|
||
| const placementIndex = player.controlBar.children().length - 2 | ||
| const concreteButtonInstance = player.controlBar.addChild( | ||
| this._qualityMenuButton, | ||
| { componentClass: "qualitySelector" }, | ||
| placementIndex | ||
| ) | ||
| concreteButtonInstance.addClass("vjs-quality-selector") | ||
| concreteButtonInstance.addClass("vjs-icon-hd") | ||
| concreteButtonInstance.removeClass("vjs-hidden") | ||
| } | ||
|
|
||
| createQualityMenuItem(item) { | ||
| const player = this.player | ||
| const videoJsMenuItemClass = videojs.getComponent("MenuItem") | ||
| const concreteMenuItemClass = videojs.extend(videoJsMenuItemClass, { | ||
| constructor: function() { | ||
| videoJsMenuItemClass.call(this, player, { | ||
| label: item.label, | ||
| selectable: true, | ||
| selected: item.selected || false | ||
| }) | ||
| this.key = item.key | ||
| }, | ||
| handleClick: () => { | ||
| this.selectQualityLevel({ key: item.key }) | ||
| this._qualityMenuButton.unpressButton() | ||
| } | ||
| }) | ||
| return new concreteMenuItemClass() | ||
| } | ||
|
|
||
| onAddQualityLevel() { | ||
| const player = this.player | ||
| const qualityList = player.qualityLevels() | ||
| const levels = qualityList.levels_ || [] | ||
|
|
||
| const menuItems = [] | ||
| for (let i = 0; i < levels.length; ++i) { | ||
| const menuItem = this.createQualityMenuItem.call(this, { | ||
| key: levels[i].id, | ||
| label: `${levels[i].height}p`, | ||
| value: levels[i].height | ||
| }) | ||
| menuItems.push(menuItem) | ||
| } | ||
| menuItems.push( | ||
| this.createQualityMenuItem.call(this, { | ||
| key: this.KEY_FOR_AUTO, | ||
| label: "Auto", | ||
| value: "auto", | ||
| selected: true | ||
| }) | ||
| ) | ||
|
|
||
| if (this._qualityMenuButton) { | ||
| this._qualityMenuButton.createItems = () => menuItems | ||
| this._qualityMenuButton.update() | ||
| } | ||
|
|
||
| this.keyedMenuItems = {} | ||
| for (const menuItem of menuItems) { | ||
| this.keyedMenuItems[menuItem.key] = menuItem | ||
| } | ||
| } | ||
|
|
||
| selectQualityLevel({ key }) { | ||
| for (let i = 0; i < this._qualityMenuButton.items.length; ++i) { | ||
| this._qualityMenuButton.items[i].selected(false) | ||
| } | ||
| const qualityList = this.player.qualityLevels() | ||
| for (let i = 0; i < qualityList.length; ++i) { | ||
| const quality = qualityList[i] | ||
| quality.enabled = quality.id === key || key === this.KEY_FOR_AUTO | ||
| } | ||
| this.keyedMenuItems[key].selected(true) | ||
| } | ||
| } | ||
|
|
||
| export default hlsQualitySelector | ||
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it be possible to bring in/adapt some of the unit tests for this plugin too, to improve coverage?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wasn't sure on whether this would be worth it. The original plugin just tests that it can register against videojs:
https://github.com/chrisboustead/videojs-hls-quality-selector/blob/master/test/plugin.test.js
We could write tests, but I think it would mostly look like a lot of mocking for videojs functions.
Do you think it's worth pursuing? Either way is fine with me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok with me to skip it if it won't add much value.