cloudinary-video-player 3.12.1 → 3.12.2-edge.0

package/lib/playlist-panel.js

@@ -0,0 +1,602 @@
+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, m as skinClassPrefix, p as playerClassPrefix } from './video-player.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 };