cloudinary-video-player
Version:
Cloudinary Video Player
603 lines (574 loc) • 16.7 kB
JavaScript
import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
import { r as requireToNumber } from './toNumber.js';
import { _ as _vjs } from './_videojs-proxy.js';
import { P as PLAYER_EVENT, d as skinClassPrefix, p as playerClassPrefix } from './index2.js';
var toFinite_1;
var hasRequiredToFinite;
function requireToFinite () {
if (hasRequiredToFinite) return toFinite_1;
hasRequiredToFinite = 1;
var toNumber = requireToNumber();
/** Used as references for various `Number` constants. */
var INFINITY = 1 / 0,
MAX_INTEGER = 1.7976931348623157e+308;
/**
* Converts `value` to a finite number.
*
* @static
* @memberOf _
* @since 4.12.0
* @category Lang
* @param {*} value The value to convert.
* @returns {number} Returns the converted number.
* @example
*
* _.toFinite(3.2);
* // => 3.2
*
* _.toFinite(Number.MIN_VALUE);
* // => 5e-324
*
* _.toFinite(Infinity);
* // => 1.7976931348623157e+308
*
* _.toFinite('3.2');
* // => 3.2
*/
function toFinite(value) {
if (!value) {
return value === 0 ? value : 0;
}
value = toNumber(value);
if (value === INFINITY || value === -INFINITY) {
var sign = (value < 0 ? -1 : 1);
return sign * MAX_INTEGER;
}
return value === value ? value : 0;
}
toFinite_1 = toFinite;
return toFinite_1;
}
var toInteger_1;
var hasRequiredToInteger;
function requireToInteger () {
if (hasRequiredToInteger) return toInteger_1;
hasRequiredToInteger = 1;
var toFinite = requireToFinite();
/**
* Converts `value` to an integer.
*
* **Note:** This method is loosely based on
* [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to convert.
* @returns {number} Returns the converted integer.
* @example
*
* _.toInteger(3.2);
* // => 3
*
* _.toInteger(Number.MIN_VALUE);
* // => 0
*
* _.toInteger(Infinity);
* // => 1.7976931348623157e+308
*
* _.toInteger('3.2');
* // => 3
*/
function toInteger(value) {
var result = toFinite(value),
remainder = result % 1;
return result === result ? (remainder ? result - remainder : result) : 0;
}
toInteger_1 = toInteger;
return toInteger_1;
}
var isInteger_1;
var hasRequiredIsInteger;
function requireIsInteger () {
if (hasRequiredIsInteger) return isInteger_1;
hasRequiredIsInteger = 1;
var toInteger = requireToInteger();
/**
* Checks if `value` is an integer.
*
* **Note:** This method is based on
* [`Number.isInteger`](https://mdn.io/Number/isInteger).
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an integer, else `false`.
* @example
*
* _.isInteger(3);
* // => true
*
* _.isInteger(Number.MIN_VALUE);
* // => false
*
* _.isInteger(Infinity);
* // => false
*
* _.isInteger('3');
* // => false
*/
function isInteger(value) {
return typeof value == 'number' && value == toInteger(value);
}
isInteger_1 = isInteger;
return isInteger_1;
}
var isIntegerExports = requireIsInteger();
var isInteger = /*@__PURE__*/getDefaultExportFromCjs(isIntegerExports);
// support VJS5 & VJS6 at the same time
const dom$2 = _vjs.dom || _vjs;
const Component$2 = _vjs.getComponent('Component');
const ClickableComponent$2 = _vjs.getComponent('ClickableComponent');
class UpcomingVideoOverlay extends ClickableComponent$2 {
static DISABLE_TRANSITION_CLASS = 'disable-transition';
static VJS_UPCOMING_VIDEO_SHOW = 'vjs-upcoming-video-show';
constructor(player) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
super(player, ...args);
this._setEvents(player);
}
_setEvents(player) {
player.on(PLAYER_EVENT.UP_COMING_VIDEO_SHOW, this._show);
player.on(PLAYER_EVENT.UP_COMING_VIDEO_HIDE, this._hide);
player.on(PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, this._onPlaylistItemChange);
}
_hide = () => {
this.removeClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);
};
_disableTransition(block) {
this.addClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);
block();
this.removeClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);
}
_onPlaylistItemChange = (_, event) => {
this._hide();
this._disableTransition(() => {
if (event.next) {
this.setItem(event.next);
}
});
};
_show = () => {
const ima = this.player().ima;
const adsManager = ima === 'object' && ima.getAdsManager();
if (adsManager) {
if (!adsManager.getCurrentAd() || adsManager.getCurrentAd().isLinear()) {
this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);
}
} else {
this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);
}
};
setTitle(source) {
const title = this.getChild('upcomingVideoOverlayContent').getChild('upcomingVideoOverlayBar').getChild('upcomingVideoOverlayTitle');
title.setContent(source.info().title || source.publicId());
}
setItem(source) {
this._source = source;
const maxWidth = parseInt(window.getComputedStyle(this.el(), null).getPropertyValue('max-width'), 10);
const maxHeight = Math.round(maxWidth * (9 / 16.0));
const transformation = {
crop: 'pad',
background: 'auto:predominant',
width: maxWidth,
height: maxHeight
};
const content = this.getChild('upcomingVideoOverlayContent');
this.setTitle(source);
content.el().style.backgroundImage = `url("${this._source.poster().url({
transformation
})}")`;
}
handleClick() {
super.handleClick(event);
this.player().cloudinary.playlist().playNext();
}
createEl() {
return super.createEl('div', {
className: 'vjs-upcoming-video'
});
}
}
class UpcomingVideoOverlayContent extends Component$2 {
createEl() {
// Content wraps image and bar
return super.createEl('div', {
className: 'upcoming-video-overlay aspect-ratio-content'
});
}
}
class UpcomingVideoOverlayTitle extends Component$2 {
setContent(title) {
this._contentSpan.innerText = title;
}
createEl() {
const el = super.createEl('div', {
className: 'vjs-control vjs-upcoming-video-title'
});
const container = dom$2.createEl('div', {
className: 'vjs-upcoming-video-title-display',
innerHTML: '<span class="vjs-control-text">Next up</span>Next up: '
});
this._contentSpan = dom$2.createEl('span', {
className: 'vjs-upcoming-video-title-display-label'
});
container.appendChild(this._contentSpan);
el.appendChild(container);
return el;
}
}
class UpcomingVideoOverlayBar extends Component$2 {
createEl() {
return super.createEl('div', {
className: 'vjs-upcoming-video-bar'
});
}
}
UpcomingVideoOverlay.prototype.options_ = {
children: ['upcomingVideoOverlayContent']
};
_vjs.registerComponent('upcomingVideoOverlay', UpcomingVideoOverlay);
UpcomingVideoOverlayContent.prototype.options_ = {
children: ['upcomingVideoOverlayBar']
};
_vjs.registerComponent('upcomingVideoOverlayContent', UpcomingVideoOverlayContent);
UpcomingVideoOverlayBar.prototype.options_ = {
children: ['upcomingVideoOverlayTitle', 'playlistNextButton']
};
_vjs.registerComponent('upcomingVideoOverlayBar', UpcomingVideoOverlayBar);
_vjs.registerComponent('upcomingVideoOverlayTitle', UpcomingVideoOverlayTitle);
// Get the ClickableComponent base class from Video.js
const ClickableComponent$1 = _vjs.getComponent('ClickableComponent');
// Create a common class for playlist buttons
class PlaylistButton extends ClickableComponent$1 {
constructor(player, options) {
// It is important to invoke the superclass before anything else,
// to get all the features of components out of the box!
super(player, options);
const type = options.type;
if (!type && type !== 'previous' && type !== 'next') {
throw new Error('Type must be either \'previous\' or \'next\'');
}
}
// The `createEl` function of a component creates its DOM element.
createEl() {
const type = this.options_.type;
const typeCssClass = `vjs-icon-${type}-item`;
return _vjs.dom.createEl('button', {
// Prefixing classes of elements within a player with "vjs-"
// is a convention used in Video.js.
className: `vjs-control vjs-playlist-button vjs-button ${typeCssClass}`,
ariaLabel: `Playlist ${type} item`
});
}
}
class PlaylistNextButton extends PlaylistButton {
constructor(player) {
super(player, {
type: 'next'
});
}
handleClick(event) {
event.stopPropagation();
super.handleClick(event);
this.player().cloudinary.playlist().playNext();
}
}
_vjs.registerComponent('PlaylistNextButton', PlaylistNextButton);
class PlaylistPreviousButton extends PlaylistButton {
constructor(player) {
super(player, {
type: 'previous'
});
}
handleClick(event) {
super.handleClick(event);
this.player().cloudinary.playlist().playPrevious();
}
}
_vjs.registerComponent('PlaylistPreviousButton', PlaylistPreviousButton);
const wrap = (el, wrapper) => {
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
return wrapper;
};
const dom$1 = _vjs.dom || _vjs;
const Component$1 = _vjs.getComponent('Component');
const OPTIONS_DEFAULT = {
wrap: false
};
class PlaylistLayout extends Component$1 {
constructor(player, options) {
const layoutOptions = {
...OPTIONS_DEFAULT,
...options
};
super(player, layoutOptions);
this.player_ = player;
const fluidHandler = (e, fluid) => {
this.options_.fluid = fluid;
this.removeCls();
this.setCls();
};
const wrapVideoWithLayout = () => {
const el = this.el();
this.videoWrap_ = dom$1.createEl('div', {
className: 'cld-plw-col-player'
});
this.contentEl_ = this.contentEl_ = dom$1.createEl('div', {
className: 'cld-plw-col-list'
});
wrap(this.player().el(), el);
el.appendChild(this.videoWrap_);
el.appendChild(this.contentEl_);
wrap(this.player().el(), this.videoWrap_);
};
if (layoutOptions.wrap) {
wrapVideoWithLayout();
}
player.on(PLAYER_EVENT.FLUID, fluidHandler);
this.addChild(PLAYER_EVENT.PLAYLIST_PANEL, this.options_);
this.setCls();
this.dispose = () => {
this.removeLayout();
super.dispose();
player.off(PLAYER_EVENT.FLUID, fluidHandler);
};
}
getCls() {
let cls = ['cld-video-player', 'cld-plw-layout'];
cls.push(skinClassPrefix(this.player()));
cls.push(playerClassPrefix(this.player()));
if (this.options_.fluid) {
cls.push('cld-plw-layout-fluid');
}
return cls;
}
setCls() {
this.removeClass(skinClassPrefix(this.player()));
this.getCls().forEach(cls => {
this.addClass(cls);
});
}
removeCls() {
this.getCls().forEach(cls => {
this.removeClass(cls);
});
}
update(optionToChange, options) {
this.options(options);
this.removeChild('PlaylistPanel');
this.addChild('PlaylistPanel', this.options_);
this.trigger('playlistlayoutupdate');
}
removeLayout() {
const parentElem = this.el().parentElement;
if (parentElem) {
parentElem.appendChild(this.player().el());
}
}
createEl() {
const el = super.createEl('div');
// Apply font styles on wrapper div.
el.style.fontFamily = this.player().el().style.fontFamily;
return el;
}
}
_vjs.registerComponent('playlistLayout', PlaylistLayout);
// Get the ClickableComponent base class from Video.js
const ClickableComponent = _vjs.getComponent('ClickableComponent');
const THUMB_DEFAULT_WIDTH = 300;
const DEFAULT_OPTIONS$1 = {
item: null,
transformation: {
width: THUMB_DEFAULT_WIDTH,
aspect_ratio: '16:9',
crop: 'pad',
background: 'black'
}
};
class Thumbnail extends ClickableComponent {
constructor(player, initOptions) {
const options = _vjs.obj.merge(DEFAULT_OPTIONS$1, initOptions);
super(player, options);
}
getItem() {
return this.options_.item;
}
getTitle() {
return this.getItem().info().title;
}
getDuration() {
return ' '; // this.getItem().info().title;
}
getThumbnail() {
return this.getItem().poster().url({
transformation: this.options_.transformation
});
}
handleClick(e) {
e.preventDefault();
}
createControlTextEl() {
return;
}
createEl() {
let tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'a';
const el = super.createEl(tag, {
className: 'cld-thumbnail',
href: '#'
});
const img = super.createEl('img', {
className: 'cld-thumbnail-img',
src: this.getThumbnail()
});
el.appendChild(img);
el.style.backgroundImage = `url('${this.getThumbnail()}')`;
return el;
}
}
const dom = _vjs.dom || _vjs;
const DEFAULT_OPTIONS = {
source: null,
next: false
};
class PlaylistPanelItem extends Thumbnail {
constructor(player, initOptions) {
const options = _vjs.obj.merge(DEFAULT_OPTIONS, initOptions);
super(player, options);
}
handleClick(event) {
super.handleClick(event);
this.play();
}
play() {
const item = this.getItem();
const list = this.player().cloudinary.playlist().list();
const index = list.indexOf(item);
if (index === -1) {
throw new Error('Invalid playlist item...');
}
this.player().cloudinary.playlist().playAtIndex(index);
}
isCurrent() {
return this.options_.current;
}
getTitle() {
return super.getTitle();
}
getDuration() {
return super.getDuration();
}
createEl() {
const el = super.createEl();
el.classList.add('cld-plw-panel-item');
const info = dom.createEl('div', {
className: 'cld-plw-item-info-wrap'
});
const titleWrap = dom.createEl('div', {
className: 'cld-plw-item-title'
});
if (this.isCurrent()) {
el.classList.add('cld-plw-panel-item-active');
const currEl = dom.createEl('span', {
className: 'cld-plw-item-title-curr'
}, {}, 'Now Playing: ');
titleWrap.appendChild(currEl);
}
const title = dom.createEl('span', {
className: 'cld-plw-item-title'
}, {}, this.getTitle());
titleWrap.appendChild(title);
const duration = dom.createEl('div', {
className: 'cld-plw-item-duration'
}, {}, this.getDuration());
info.appendChild(titleWrap);
info.appendChild(duration);
if (el) {
el.appendChild(info);
}
el.appendChild(info);
return el;
}
}
_vjs.registerComponent('playlistPanelItem', PlaylistPanelItem);
const Component = _vjs.getComponent('Component');
class PlaylistPanel extends Component {
constructor(player) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
super(player, options);
const itemChangeHandler = () => {
this.render();
};
player.on(PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, itemChangeHandler);
this.render();
this.dispose = () => {
super.dispose();
player.off(PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, itemChangeHandler);
};
}
createEl() {
const el = super.createEl();
el.classList.add('cld-plw-panel');
return el;
}
removeAll() {
const children = this.children();
for (let i = children.length - 1; i >= 0; --i) {
this.removeChild(children[i]);
}
}
getItems() {
const playlist = this.player().cloudinary.playlist();
const repeat = playlist._repeat;
if (this.options_.showAll) {
return playlist.list();
}
const items = [];
const numOfItems = this.options_.total;
let index = playlist.currentIndex();
let source = playlist.list()[index];
items.push(source);
while (items.length < numOfItems) {
index = playlist.nextIndex(index);
if (index === -1) {
if (!repeat && items.length > 0) {
break;
}
index = 0;
}
source = playlist.list()[index];
items.push(source);
}
return items;
}
render() {
const items = this.getItems();
this.removeAll();
items.forEach((source, index) => {
const playlistItem = new PlaylistPanelItem(this.player(), _vjs.obj.merge(this.options_, {
item: source,
next: index === 1,
current: index === 0
}));
this.addChild(playlistItem);
});
}
}
_vjs.registerComponent('playlistPanel', PlaylistPanel);
export { PlaylistLayout as P, isInteger as i };