509 lines
15 KiB
JavaScript
509 lines
15 KiB
JavaScript
/*! @name videojs-playlist-ui @version 3.5.2 @license Apache-2.0 */
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('global/document'), require('video.js')) :
|
|
typeof define === 'function' && define.amd ? define(['global/document', 'video.js'], factory) :
|
|
(global.videojsPlaylistUi = factory(global.document,global.videojs));
|
|
}(this, (function (document,videojs) { 'use strict';
|
|
|
|
document = document && document.hasOwnProperty('default') ? document['default'] : document;
|
|
videojs = videojs && videojs.hasOwnProperty('default') ? videojs['default'] : videojs;
|
|
|
|
function _inheritsLoose(subClass, superClass) {
|
|
subClass.prototype = Object.create(superClass.prototype);
|
|
subClass.prototype.constructor = subClass;
|
|
subClass.__proto__ = superClass;
|
|
}
|
|
|
|
var version = "3.5.2";
|
|
|
|
var dom = videojs.dom || videojs;
|
|
var registerPlugin = videojs.registerPlugin || videojs.plugin; // Array#indexOf analog for IE8
|
|
|
|
var indexOf = function indexOf(array, target) {
|
|
for (var i = 0, length = array.length; i < length; i++) {
|
|
if (array[i] === target) {
|
|
return i;
|
|
}
|
|
}
|
|
|
|
return -1;
|
|
}; // see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/pointerevents.js
|
|
|
|
|
|
var supportsCssPointerEvents = function () {
|
|
var element = document.createElement('x');
|
|
element.style.cssText = 'pointer-events:auto';
|
|
return element.style.pointerEvents === 'auto';
|
|
}();
|
|
|
|
var defaults = {
|
|
className: 'vjs-playlist',
|
|
playOnSelect: false,
|
|
supportsCssPointerEvents: supportsCssPointerEvents
|
|
}; // we don't add `vjs-playlist-now-playing` in addSelectedClass
|
|
// so it won't conflict with `vjs-icon-play
|
|
// since it'll get added when we mouse out
|
|
|
|
var addSelectedClass = function addSelectedClass(el) {
|
|
el.addClass('vjs-selected');
|
|
};
|
|
|
|
var removeSelectedClass = function removeSelectedClass(el) {
|
|
el.removeClass('vjs-selected');
|
|
|
|
if (el.thumbnail) {
|
|
dom.removeClass(el.thumbnail, 'vjs-playlist-now-playing');
|
|
}
|
|
};
|
|
|
|
var upNext = function upNext(el) {
|
|
el.addClass('vjs-up-next');
|
|
};
|
|
|
|
var notUpNext = function notUpNext(el) {
|
|
el.removeClass('vjs-up-next');
|
|
};
|
|
|
|
var createThumbnail = function createThumbnail(thumbnail) {
|
|
if (!thumbnail) {
|
|
var placeholder = document.createElement('div');
|
|
placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
|
|
return placeholder;
|
|
}
|
|
|
|
var picture = document.createElement('picture');
|
|
picture.className = 'vjs-playlist-thumbnail';
|
|
|
|
if (typeof thumbnail === 'string') {
|
|
// simple thumbnails
|
|
var img = document.createElement('img');
|
|
img.src = thumbnail;
|
|
img.alt = '';
|
|
picture.appendChild(img);
|
|
} else {
|
|
// responsive thumbnails
|
|
// additional variations of a <picture> are specified as
|
|
// <source> elements
|
|
for (var i = 0; i < thumbnail.length - 1; i++) {
|
|
var _variant = thumbnail[i];
|
|
var source = document.createElement('source'); // transfer the properties of each variant onto a <source>
|
|
|
|
for (var prop in _variant) {
|
|
source[prop] = _variant[prop];
|
|
}
|
|
|
|
picture.appendChild(source);
|
|
} // the default version of a <picture> is specified by an <img>
|
|
|
|
|
|
var variant = thumbnail[thumbnail.length - 1];
|
|
|
|
var _img = document.createElement('img');
|
|
|
|
_img.alt = '';
|
|
|
|
for (var _prop in variant) {
|
|
_img[_prop] = variant[_prop];
|
|
}
|
|
|
|
picture.appendChild(_img);
|
|
}
|
|
|
|
return picture;
|
|
};
|
|
|
|
var Component = videojs.getComponent('Component');
|
|
|
|
var PlaylistMenuItem =
|
|
/*#__PURE__*/
|
|
function (_Component) {
|
|
_inheritsLoose(PlaylistMenuItem, _Component);
|
|
|
|
function PlaylistMenuItem(player, playlistItem, settings) {
|
|
var _this;
|
|
|
|
if (!playlistItem.item) {
|
|
throw new Error('Cannot construct a PlaylistMenuItem without an item option');
|
|
}
|
|
|
|
_this = _Component.call(this, player, playlistItem) || this;
|
|
_this.item = playlistItem.item;
|
|
_this.playOnSelect = settings.playOnSelect;
|
|
|
|
_this.emitTapEvents();
|
|
|
|
_this.on(['click', 'tap'], _this.switchPlaylistItem_);
|
|
|
|
_this.on('keydown', _this.handleKeyDown_);
|
|
|
|
return _this;
|
|
}
|
|
|
|
var _proto = PlaylistMenuItem.prototype;
|
|
|
|
_proto.handleKeyDown_ = function handleKeyDown_(event) {
|
|
// keycode 13 is <Enter>
|
|
// keycode 32 is <Space>
|
|
if (event.which === 13 || event.which === 32) {
|
|
this.switchPlaylistItem_();
|
|
}
|
|
};
|
|
|
|
_proto.switchPlaylistItem_ = function switchPlaylistItem_(event) {
|
|
this.player_.playlist.currentItem(indexOf(this.player_.playlist(), this.item));
|
|
|
|
if (this.playOnSelect) {
|
|
this.player_.play();
|
|
}
|
|
};
|
|
|
|
_proto.createEl = function createEl() {
|
|
var li = document.createElement('li');
|
|
var item = this.options_.item;
|
|
|
|
if (typeof item.data === 'object') {
|
|
var dataKeys = Object.keys(item.data);
|
|
dataKeys.forEach(function (key) {
|
|
var value = item.data[key];
|
|
li.dataset[key] = value;
|
|
});
|
|
}
|
|
|
|
li.className = 'vjs-playlist-item';
|
|
li.setAttribute('tabIndex', 0); // Thumbnail image
|
|
|
|
this.thumbnail = createThumbnail(item.thumbnail);
|
|
li.appendChild(this.thumbnail); // Duration
|
|
|
|
if (item.duration) {
|
|
var duration = document.createElement('time');
|
|
var time = videojs.formatTime(item.duration);
|
|
duration.className = 'vjs-playlist-duration';
|
|
duration.setAttribute('datetime', 'PT0H0M' + item.duration + 'S');
|
|
duration.appendChild(document.createTextNode(time));
|
|
li.appendChild(duration);
|
|
} // Now playing
|
|
|
|
|
|
var nowPlayingEl = document.createElement('span');
|
|
var nowPlayingText = this.localize('Now Playing');
|
|
nowPlayingEl.className = 'vjs-playlist-now-playing-text';
|
|
nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
|
|
nowPlayingEl.setAttribute('title', nowPlayingText);
|
|
this.thumbnail.appendChild(nowPlayingEl); // Title container contains title and "up next"
|
|
|
|
var titleContainerEl = document.createElement('div');
|
|
titleContainerEl.className = 'vjs-playlist-title-container';
|
|
this.thumbnail.appendChild(titleContainerEl); // Up next
|
|
|
|
var upNextEl = document.createElement('span');
|
|
var upNextText = this.localize('Up Next');
|
|
upNextEl.className = 'vjs-up-next-text';
|
|
upNextEl.appendChild(document.createTextNode(upNextText));
|
|
upNextEl.setAttribute('title', upNextText);
|
|
titleContainerEl.appendChild(upNextEl); // Video title
|
|
|
|
var titleEl = document.createElement('cite');
|
|
var titleText = item.name || this.localize('Untitled Video');
|
|
titleEl.className = 'vjs-playlist-name';
|
|
titleEl.appendChild(document.createTextNode(titleText));
|
|
titleEl.setAttribute('title', titleText);
|
|
titleContainerEl.appendChild(titleEl);
|
|
return li;
|
|
};
|
|
|
|
return PlaylistMenuItem;
|
|
}(Component);
|
|
|
|
var PlaylistMenu =
|
|
/*#__PURE__*/
|
|
function (_Component2) {
|
|
_inheritsLoose(PlaylistMenu, _Component2);
|
|
|
|
function PlaylistMenu(player, options) {
|
|
var _this2;
|
|
|
|
if (!player.playlist) {
|
|
throw new Error('videojs-playlist is required for the playlist component');
|
|
}
|
|
|
|
_this2 = _Component2.call(this, player, options) || this;
|
|
_this2.items = [];
|
|
|
|
if (options.horizontal) {
|
|
_this2.addClass('vjs-playlist-horizontal');
|
|
} else {
|
|
_this2.addClass('vjs-playlist-vertical');
|
|
} // If CSS pointer events aren't supported, we have to prevent
|
|
// clicking on playlist items during ads with slightly more
|
|
// invasive techniques. Details in the stylesheet.
|
|
|
|
|
|
if (options.supportsCssPointerEvents) {
|
|
_this2.addClass('vjs-csspointerevents');
|
|
}
|
|
|
|
_this2.createPlaylist_();
|
|
|
|
if (!videojs.browser.TOUCH_ENABLED) {
|
|
_this2.addClass('vjs-mouse');
|
|
}
|
|
|
|
_this2.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], function (event) {
|
|
_this2.update();
|
|
}); // Keep track of whether an ad is playing so that the menu
|
|
// appearance can be adapted appropriately
|
|
|
|
|
|
_this2.on(player, 'adstart', function () {
|
|
_this2.addClass('vjs-ad-playing');
|
|
});
|
|
|
|
_this2.on(player, 'adend', function () {
|
|
_this2.removeClass('vjs-ad-playing');
|
|
});
|
|
|
|
_this2.on('dispose', function () {
|
|
_this2.empty_();
|
|
|
|
player.playlistMenu = null;
|
|
});
|
|
|
|
_this2.on(player, 'dispose', function () {
|
|
_this2.dispose();
|
|
});
|
|
|
|
return _this2;
|
|
}
|
|
|
|
var _proto2 = PlaylistMenu.prototype;
|
|
|
|
_proto2.createEl = function createEl() {
|
|
return dom.createEl('div', {
|
|
className: this.options_.className
|
|
});
|
|
};
|
|
|
|
_proto2.empty_ = function empty_() {
|
|
if (this.items && this.items.length) {
|
|
this.items.forEach(function (i) {
|
|
return i.dispose();
|
|
});
|
|
this.items.length = 0;
|
|
}
|
|
};
|
|
|
|
_proto2.createPlaylist_ = function createPlaylist_() {
|
|
var playlist = this.player_.playlist() || [];
|
|
var list = this.el_.querySelector('.vjs-playlist-item-list');
|
|
var overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
|
|
|
|
if (!list) {
|
|
list = document.createElement('ol');
|
|
list.className = 'vjs-playlist-item-list';
|
|
this.el_.appendChild(list);
|
|
}
|
|
|
|
this.empty_(); // create new items
|
|
|
|
for (var i = 0; i < playlist.length; i++) {
|
|
var item = new PlaylistMenuItem(this.player_, {
|
|
item: playlist[i]
|
|
}, this.options_);
|
|
this.items.push(item);
|
|
list.appendChild(item.el_);
|
|
} // Inject the ad overlay. IE<11 doesn't support "pointer-events:
|
|
// none" so we use this element to block clicks during ad
|
|
// playback.
|
|
|
|
|
|
if (!overlay) {
|
|
overlay = document.createElement('li');
|
|
overlay.className = 'vjs-playlist-ad-overlay';
|
|
list.appendChild(overlay);
|
|
} else {
|
|
// Move overlay to end of list
|
|
list.appendChild(overlay);
|
|
} // select the current playlist item
|
|
|
|
|
|
var selectedIndex = this.player_.playlist.currentItem();
|
|
|
|
if (this.items.length && selectedIndex >= 0) {
|
|
addSelectedClass(this.items[selectedIndex]);
|
|
var thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
|
|
|
|
if (thumbnail) {
|
|
dom.addClass(thumbnail, 'vjs-playlist-now-playing');
|
|
}
|
|
}
|
|
};
|
|
|
|
_proto2.update = function update() {
|
|
// replace the playlist items being displayed, if necessary
|
|
var playlist = this.player_.playlist();
|
|
|
|
if (this.items.length !== playlist.length) {
|
|
// if the menu is currently empty or the state is obviously out
|
|
// of date, rebuild everything.
|
|
this.createPlaylist_();
|
|
return;
|
|
}
|
|
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
if (this.items[i].item !== playlist[i]) {
|
|
// if any of the playlist items have changed, rebuild the
|
|
// entire playlist
|
|
this.createPlaylist_();
|
|
return;
|
|
}
|
|
} // the playlist itself is unchanged so just update the selection
|
|
|
|
|
|
var currentItem = this.player_.playlist.currentItem();
|
|
|
|
for (var _i = 0; _i < this.items.length; _i++) {
|
|
var item = this.items[_i];
|
|
|
|
if (_i === currentItem) {
|
|
addSelectedClass(item);
|
|
|
|
if (document.activeElement !== item.el()) {
|
|
dom.addClass(item.thumbnail, 'vjs-playlist-now-playing');
|
|
}
|
|
|
|
notUpNext(item);
|
|
} else if (_i === currentItem + 1) {
|
|
removeSelectedClass(item);
|
|
upNext(item);
|
|
} else {
|
|
removeSelectedClass(item);
|
|
notUpNext(item);
|
|
}
|
|
}
|
|
};
|
|
|
|
return PlaylistMenu;
|
|
}(Component);
|
|
/**
|
|
* 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.
|
|
*/
|
|
|
|
|
|
var hasChildEls = function hasChildEls(el) {
|
|
for (var i = 0; i < el.childNodes.length; i++) {
|
|
if (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.
|
|
*/
|
|
|
|
|
|
var findRoot = function findRoot(className) {
|
|
var all = document.querySelectorAll('.' + className);
|
|
var el;
|
|
|
|
for (var i = 0; i < all.length; i++) {
|
|
if (!hasChildEls(all[i])) {
|
|
el = all[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
return el;
|
|
};
|
|
/**
|
|
* 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.
|
|
*/
|
|
|
|
|
|
var playlistUi = function playlistUi(options) {
|
|
var player = this;
|
|
|
|
if (!player.playlist) {
|
|
throw new Error('videojs-playlist plugin is required by the videojs-playlist-ui plugin');
|
|
}
|
|
|
|
if (dom.isEl(options)) {
|
|
videojs.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!');
|
|
options = {
|
|
el: options
|
|
};
|
|
}
|
|
|
|
options = videojs.mergeOptions(defaults, options); // If the player is already using this plugin, remove the pre-existing
|
|
// PlaylistMenu, but retain the element and its location in the DOM because
|
|
// it will be re-used.
|
|
|
|
if (player.playlistMenu) {
|
|
var el = player.playlistMenu.el(); // Catch cases where the menu may have been disposed elsewhere or the
|
|
// element removed from the DOM.
|
|
|
|
if (el) {
|
|
var parentNode = el.parentNode;
|
|
var nextSibling = el.nextSibling; // Disposing the menu will remove `el` from the DOM, but we need to
|
|
// empty it ourselves to be sure.
|
|
|
|
player.playlistMenu.dispose();
|
|
dom.emptyEl(el); // Put the element back in its place.
|
|
|
|
if (nextSibling) {
|
|
parentNode.insertBefore(el, nextSibling);
|
|
} else {
|
|
parentNode.appendChild(el);
|
|
}
|
|
|
|
options.el = el;
|
|
}
|
|
}
|
|
|
|
if (!dom.isEl(options.el)) {
|
|
options.el = findRoot(options.className);
|
|
}
|
|
|
|
player.playlistMenu = new PlaylistMenu(player, options);
|
|
}; // register components
|
|
|
|
|
|
videojs.registerComponent('PlaylistMenu', PlaylistMenu);
|
|
videojs.registerComponent('PlaylistMenuItem', PlaylistMenuItem); // register the plugin
|
|
|
|
registerPlugin('playlistUi', playlistUi);
|
|
playlistUi.VERSION = version;
|
|
|
|
return playlistUi;
|
|
|
|
})));
|