mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 17:59:55 +02:00
112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
import document from 'global/document';
|
|
import videojs from 'video.js';
|
|
import {version as VERSION} from '../package.json';
|
|
import PlaylistMenu from './playlist-menu';
|
|
|
|
// see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/pointerevents.js
|
|
const supportsCssPointerEvents = (() => {
|
|
const element = document.createElement('x');
|
|
|
|
element.style.cssText = 'pointer-events:auto';
|
|
return element.style.pointerEvents === 'auto';
|
|
})();
|
|
|
|
const defaults = {
|
|
className: 'vjs-playlist',
|
|
playOnSelect: false,
|
|
supportsCssPointerEvents
|
|
};
|
|
|
|
const Plugin = videojs.getPlugin('plugin');
|
|
|
|
/**
|
|
* Initialize the plugin on a player.
|
|
*
|
|
* @param {Object} [options]
|
|
* An options object.
|
|
*
|
|
* @param {HTMLElement} [options.el]
|
|
* A DOM element to use as a root node for the playlist.
|
|
*
|
|
* @param {string} [options.className]
|
|
* An HTML class name to use to find a root node for the playlist.
|
|
*
|
|
* @param {boolean} [options.playOnSelect = false]
|
|
* If true, will attempt to begin playback upon selecting a new
|
|
* playlist item in the UI.
|
|
*/
|
|
class PlaylistUI extends Plugin {
|
|
|
|
constructor(player, options) {
|
|
super(player, options);
|
|
|
|
if (!player.usingPlugin('playlist')) {
|
|
player.log.error('videojs-playlist plugin is required by the videojs-playlist-ui plugin');
|
|
return;
|
|
}
|
|
|
|
options = this.options_ = videojs.obj.merge(defaults, options);
|
|
|
|
if (!videojs.dom.isEl(options.el)) {
|
|
options.el = this.findRoot_(options.className);
|
|
}
|
|
|
|
// Expose the playlist menu component on the player as well as the plugin
|
|
// This is a bit of an anti-pattern, but it's been that way forever and
|
|
// there are likely to be integrations relying on it.
|
|
this.playlistMenu = player.playlistMenu = new PlaylistMenu(player, options);
|
|
}
|
|
|
|
/**
|
|
* Dispose the plugin.
|
|
*/
|
|
dispose() {
|
|
super.dispose();
|
|
this.playlistMenu.dispose();
|
|
}
|
|
|
|
/**
|
|
* Returns a boolean indicating whether an element has child elements.
|
|
*
|
|
* Note that this is distinct from whether it has child _nodes_.
|
|
*
|
|
* @param {HTMLElement} el
|
|
* A DOM element.
|
|
*
|
|
* @return {boolean}
|
|
* Whether the element has child elements.
|
|
*/
|
|
hasChildEls_(el) {
|
|
for (let i = 0; i < el.childNodes.length; i++) {
|
|
if (videojs.dom.isEl(el.childNodes[i])) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Finds the first empty root element.
|
|
*
|
|
* @param {string} className
|
|
* An HTML class name to search for.
|
|
*
|
|
* @return {HTMLElement}
|
|
* A DOM element to use as the root for a playlist.
|
|
*/
|
|
findRoot_(className) {
|
|
const all = document.querySelectorAll('.' + className);
|
|
|
|
for (let i = 0; i < all.length; i++) {
|
|
if (!this.hasChildEls_(all[i])) {
|
|
return all[i];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
videojs.registerPlugin('playlistUi', PlaylistUI);
|
|
|
|
PlaylistUI.VERSION = VERSION;
|
|
|
|
export default PlaylistUI;
|