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.
*/
export default class ConcreteButton extends VideoJsButtonClass {
/**
* Button constructor.
*
@ -32,7 +31,7 @@ export default class ConcreteButton extends VideoJsButtonClass {
constructor(player) {
super(player, {
title: player.localize('Quality'),
name: 'QualityButton'
name: 'QualityButton',
});
}
@ -52,7 +51,7 @@ export default class ConcreteButton extends VideoJsButtonClass {
* The constructed menu
*/
createMenu() {
const menu = new VideoJsMenuClass(this.player_, {menuButton: this});
const menu = new VideoJsMenuClass(this.player_, { menuButton: this });
this.hideThreshold_ = 0;
@ -61,9 +60,9 @@ export default class ConcreteButton extends VideoJsButtonClass {
const titleEl = Dom.createEl('li', {
className: 'vjs-menu-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;
@ -80,6 +79,5 @@ export default class ConcreteButton extends VideoJsButtonClass {
}
return menu;
}
}

View file

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

View file

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