lint
This commit is contained in:
parent
b98178c97a
commit
0a8d43e932
3 changed files with 31 additions and 35 deletions
|
@ -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;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in a new issue