This commit is contained in:
Sean Yesmunt 2021-02-18 13:45:39 -05:00
parent b98178c97a
commit 0a8d43e932
3 changed files with 31 additions and 35 deletions

View file

@ -23,7 +23,6 @@ function toTitleCase(string) {
* Extend vjs button class for quality button. * Extend vjs button class for quality button.
*/ */
export default class ConcreteButton extends VideoJsButtonClass { export default class ConcreteButton extends VideoJsButtonClass {
/** /**
* Button constructor. * Button constructor.
* *
@ -32,7 +31,7 @@ export default class ConcreteButton extends VideoJsButtonClass {
constructor(player) { constructor(player) {
super(player, { super(player, {
title: player.localize('Quality'), title: player.localize('Quality'),
name: 'QualityButton' name: 'QualityButton',
}); });
} }
@ -52,7 +51,7 @@ export default class ConcreteButton extends VideoJsButtonClass {
* The constructed menu * The constructed menu
*/ */
createMenu() { createMenu() {
const menu = new VideoJsMenuClass(this.player_, {menuButton: this}); const menu = new VideoJsMenuClass(this.player_, { menuButton: this });
this.hideThreshold_ = 0; this.hideThreshold_ = 0;
@ -61,9 +60,9 @@ export default class ConcreteButton extends VideoJsButtonClass {
const titleEl = Dom.createEl('li', { const titleEl = Dom.createEl('li', {
className: 'vjs-menu-title', className: 'vjs-menu-title',
innerHTML: toTitleCase(this.options_.title), innerHTML: toTitleCase(this.options_.title),
tabIndex: -1 tabIndex: -1,
}); });
const titleComponent = new VideoJsComponent(this.player_, {el: titleEl}); const titleComponent = new VideoJsComponent(this.player_, { el: titleEl });
this.hideThreshold_ += 1; this.hideThreshold_ += 1;
@ -80,6 +79,5 @@ export default class ConcreteButton extends VideoJsButtonClass {
} }
return menu; return menu;
} }
} }

View file

@ -7,7 +7,6 @@ const VideoJsMenuItemClass = videojs.getComponent('MenuItem');
* Extend vjs menu item class. * Extend vjs menu item class.
*/ */
export default class ConcreteMenuItem extends VideoJsMenuItemClass { export default class ConcreteMenuItem extends VideoJsMenuItemClass {
/** /**
* Menu item constructor. * Menu item constructor.
* *
@ -20,7 +19,7 @@ export default class ConcreteMenuItem extends VideoJsMenuItemClass {
super(player, { super(player, {
label: item.label, label: item.label,
selectable: true, selectable: true,
selected: item.selected || false selected: item.selected || false,
}); });
this.item = item; this.item = item;
this.qualityButton = qualityButton; this.qualityButton = qualityButton;
@ -31,7 +30,6 @@ export default class ConcreteMenuItem extends VideoJsMenuItemClass {
* Click event for menu item. * Click event for menu item.
*/ */
handleClick() { handleClick() {
// Reset other menu items selected status. // Reset other menu items selected status.
for (let i = 0; i < this.qualityButton.items.length; ++i) { for (let i = 0; i < this.qualityButton.items.length; ++i) {
this.qualityButton.items[i].selected(false); this.qualityButton.items[i].selected(false);
@ -40,6 +38,5 @@ export default class ConcreteMenuItem extends VideoJsMenuItemClass {
// Set this menu item to selected, and set quality. // Set this menu item to selected, and set quality.
this.plugin.setQuality(this.item.value); this.plugin.setQuality(this.item.value);
this.selected(true); this.selected(true);
} }
} }

View file

@ -1,5 +1,6 @@
/* eslint-disable */
import videojs from 'video.js'; import videojs from 'video.js';
import {version as VERSION} from './package.json'; import { version as VERSION } from './package.json';
import ConcreteButton from './ConcreteButton'; import ConcreteButton from './ConcreteButton';
import ConcreteMenuItem from './ConcreteMenuItem'; import ConcreteMenuItem from './ConcreteMenuItem';
@ -13,7 +14,6 @@ const registerPlugin = videojs.registerPlugin || videojs.plugin;
* VideoJS HLS Quality Selector Plugin class. * VideoJS HLS Quality Selector Plugin class.
*/ */
class HlsQualitySelectorPlugin { class HlsQualitySelectorPlugin {
/** /**
* Plugin Constructor. * Plugin Constructor.
* *
@ -82,21 +82,21 @@ class HlsQualitySelectorPlugin {
this._qualityButton = new ConcreteButton(player); this._qualityButton = new ConcreteButton(player);
const placementIndex = player.controlBar.children().length - 2; const placementIndex = player.controlBar.children().length - 2;
const concreteButtonInstance = player.controlBar.addChild(this._qualityButton, const concreteButtonInstance = player.controlBar.addChild(
{componentClass: 'qualitySelector'}, this._qualityButton,
this.config.placementIndex || placementIndex); { componentClass: 'qualitySelector' },
this.config.placementIndex || placementIndex
);
concreteButtonInstance.addClass('vjs-quality-selector'); concreteButtonInstance.addClass('vjs-quality-selector');
if (!this.config.displayCurrentQuality) { if (!this.config.displayCurrentQuality) {
const icon = ` ${this.config.vjsIconClass || 'vjs-icon-hd'}`; const icon = ` ${this.config.vjsIconClass || 'vjs-icon-hd'}`;
concreteButtonInstance concreteButtonInstance.menuButton_.$('.vjs-icon-placeholder').className += icon;
.menuButton_.$('.vjs-icon-placeholder').className += icon;
} else { } else {
this.setButtonInnerText('auto'); this.setButtonInnerText('auto');
} }
concreteButtonInstance.removeClass('vjs-hidden'); concreteButtonInstance.removeClass('vjs-hidden');
} }
/** /**
@ -105,8 +105,7 @@ class HlsQualitySelectorPlugin {
* @param {string} text - the text to display in the button. * @param {string} text - the text to display in the button.
*/ */
setButtonInnerText(text) { setButtonInnerText(text) {
this._qualityButton this._qualityButton.menuButton_.$('.vjs-icon-placeholder').innerHTML = text;
.menuButton_.$('.vjs-icon-placeholder').innerHTML = text;
} }
/** /**
@ -125,16 +124,17 @@ class HlsQualitySelectorPlugin {
* Executed when a quality level is added from HLS playlist. * Executed when a quality level is added from HLS playlist.
*/ */
onAddQualityLevel() { onAddQualityLevel() {
const player = this.player; const player = this.player;
const qualityList = player.qualityLevels(); const qualityList = player.qualityLevels();
const levels = qualityList.levels_ || []; const levels = qualityList.levels_ || [];
const levelItems = []; const levelItems = [];
for (let i = 0; i < levels.length; ++i) { for (let i = 0; i < levels.length; ++i) {
if (!levelItems.filter(_existingItem => { if (
!levelItems.filter((_existingItem) => {
return _existingItem.item && _existingItem.item.value === levels[i].height; return _existingItem.item && _existingItem.item.value === levels[i].height;
}).length) { }).length
) {
const levelItem = this.getQualityMenuItem.call(this, { const levelItem = this.getQualityMenuItem.call(this, {
label: levels[i].height + 'p', label: levels[i].height + 'p',
value: levels[i].height, value: levels[i].height,
@ -145,7 +145,7 @@ class HlsQualitySelectorPlugin {
} }
levelItems.sort((current, next) => { levelItems.sort((current, next) => {
if ((typeof current !== 'object') || (typeof next !== 'object')) { if (typeof current !== 'object' || typeof next !== 'object') {
return -1; return -1;
} }
if (current.item.value < next.item.value) { if (current.item.value < next.item.value) {
@ -157,19 +157,20 @@ class HlsQualitySelectorPlugin {
return 0; return 0;
}); });
levelItems.push(this.getQualityMenuItem.call(this, { levelItems.push(
this.getQualityMenuItem.call(this, {
label: player.localize('Auto'), label: player.localize('Auto'),
value: 'auto', value: 'auto',
selected: true selected: true,
})); })
);
if (this._qualityButton) { if (this._qualityButton) {
this._qualityButton.createItems = function() { this._qualityButton.createItems = function () {
return levelItems; return levelItems;
}; };
this._qualityButton.update(); this._qualityButton.update();
} }
} }
/** /**
@ -190,7 +191,7 @@ class HlsQualitySelectorPlugin {
for (let i = 0; i < qualityList.length; ++i) { for (let i = 0; i < qualityList.length; ++i) {
const quality = qualityList[i]; const quality = qualityList[i];
quality.enabled = (quality.height === height || height === 'auto'); quality.enabled = quality.height === height || height === 'auto';
} }
this._qualityButton.unpressButton(); this._qualityButton.unpressButton();
} }
@ -203,7 +204,6 @@ class HlsQualitySelectorPlugin {
getCurrentQuality() { getCurrentQuality() {
return this._currentQuality || 'auto'; return this._currentQuality || 'auto';
} }
} }
/** /**
@ -237,7 +237,7 @@ const onPlayerReady = (player, options) => {
* @param {Object} [options={}] * @param {Object} [options={}]
* An object of options left to the plugin author to define. * An object of options left to the plugin author to define.
*/ */
const hlsQualitySelector = function(options) { const hlsQualitySelector = function (options) {
this.ready(() => { this.ready(() => {
onPlayerReady(this, videojs.mergeOptions(defaults, options)); onPlayerReady(this, videojs.mergeOptions(defaults, options));
}); });
@ -250,3 +250,4 @@ registerPlugin('hlsQualitySelector', hlsQualitySelector);
hlsQualitySelector.VERSION = VERSION; hlsQualitySelector.VERSION = VERSION;
export default hlsQualitySelector; export default hlsQualitySelector;
/* eslint-enable */