cloudinary-video-player 1.6.2-edge.13

package/src/components/playlist/layout/playlist-layout-horizontal.js

@@ -0,0 +1,16 @@
+import PlaylistLayout from './playlist-layout';
+
+class PlaylistLayoutHorizontal extends PlaylistLayout {
+  constructor (player, options) {
+    options.wrap = true;
+    super(player, options);
+  }
+
+  getCls() {
+    const cls = super.getCls();
+    cls.push('cld-plw-horizontal');
+    return cls;
+  }
+}
+
+export default PlaylistLayoutHorizontal;

package/src/components/playlist/layout/playlist-layout-vertical.js

@@ -0,0 +1,19 @@
+import PlaylistLayout from './playlist-layout';
+
+class PlaylistLayoutVertical extends PlaylistLayout {
+
+  constructor (player, options) {
+    options.wrap = true;
+    super(player, options);
+  }
+
+  getCls() {
+    const cls = super.getCls();
+    cls.push('cld-plw-vertical');
+
+    return cls;
+  }
+}
+
+
+export default PlaylistLayoutVertical;

package/src/components/playlist/layout/playlist-layout.js

@@ -0,0 +1,110 @@
+import videojs from 'video.js';
+import { wrap } from '../../../utils/dom';
+import {
+  skinClassPrefix,
+  playerClassPrefix
+} from '../../../utils/css-prefix';
+
+const dom = videojs.dom || videojs;
+const Component = videojs.getComponent('Component');
+
+const OPTIONS_DEFAULT = {
+  wrap: false
+};
+
+class PlaylistLayout extends Component {
+  constructor(player, options) {
+    const layoutOptions = { ...OPTIONS_DEFAULT, ...options };
+    super(player, layoutOptions);
+    this.player_ = player;
+    this.setCls();
+
+    const fluidHandler = (e, fluid) => {
+      this.options_.fluid = fluid;
+      this.removeCls();
+      this.setCls();
+    };
+
+    const wrapVideoWithLayout = () => {
+      const el = this.el();
+
+      this.videoWrap_ = dom.createEl('div', { className: 'cld-plw-col-player' });
+      this.contentEl_ = this.contentEl_ = dom.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('fluid', fluidHandler);
+
+    this.addChild('PlaylistPanel', this.options_);
+
+    this.dispose = () => {
+      this.removeLayout();
+      super.dispose();
+      player.off('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));
+    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;
+  }
+
+}
+
+videojs.registerComponent('playlistLayout', PlaylistLayout);
+
+export default PlaylistLayout;

package/src/components/playlist/panel/playlist-panel-item.js

@@ -0,0 +1,86 @@
+import videojs from 'video.js';
+import Thumbnail from '../thumbnail/thumbnail';
+
+const dom = videojs.dom || videojs;
+
+const DEFAULT_OPTIONS = {
+  source: null,
+  next: false
+};
+
+class PlaylistPanelItem extends Thumbnail {
+
+  constructor(player, initOptions) {
+    const options = videojs.mergeOptions(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;
+  }
+}
+
+videojs.registerComponent('playlistPanelItem', PlaylistPanelItem);
+
+export default PlaylistPanelItem;

package/src/components/playlist/panel/playlist-panel.js

@@ -0,0 +1,92 @@
+import videojs from 'video.js';
+import 'assets/styles/components/playlist.scss';
+import PlaylistPanelItem from './playlist-panel-item';
+
+
+const Component = videojs.getComponent('Component');
+
+class PlaylistPanel extends Component {
+
+  constructor(player, options = {}) {
+    super(player, options);
+
+    const itemChangeHandler = () => {
+      this.render();
+    };
+
+    player.on('playlistitemchanged', itemChangeHandler);
+
+    this.render();
+
+    this.dispose = () => {
+      super.dispose();
+      player.off('playlistitemchanged', itemChangeHandler);
+    };
+  }
+
+  createEl() {
+    const el = super.createEl();
+    el.classList.add('cld-plw-panel');
+
+    return el;
+  }
+
+  removeAll() {
+    const childrens = this.children();
+    for (let i = childrens.length - 1; i >= 0; --i) {
+      this.removeChild(childrens[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(), videojs.mergeOptions(this.options_, {
+        item: source,
+        next: index === 1,
+        current: index === 0
+      }));
+
+      this.addChild(playlistItem);
+
+    });
+  }
+}
+
+videojs.registerComponent('playlistPanel', PlaylistPanel);
+
+export default PlaylistPanel;

package/src/components/playlist/playlist-widget.js

@@ -0,0 +1,119 @@
+import videojs from 'video.js';
+import PlaylistLayoutHorizontal from './layout/playlist-layout-horizontal';
+import PlaylistLayoutVertical from './layout/playlist-layout-vertical';
+import PlaylistLayoutCustom from './layout/playlist-layout-custom';
+import { PLAYLIST_DEFAULTS_OPTIONS } from './playlist.const';
+
+
+const modifyOptions = (player, opt) => {
+  const options = { ...PLAYLIST_DEFAULTS_OPTIONS, ...opt };
+
+  if (options.show && typeof options.selector === 'string') {
+    options.useDefaultLayout = false;
+    options.useCustomLayout = true;
+    options.renderTo = document.querySelector(options.selector);
+    options.showAll = true;
+
+    if (!options.renderTo.length === 0) {
+      throw new Error(`Couldn't find element(s) by selector '${options.selector}' for playlist`);
+    }
+  }
+
+  if (options.show && !options.selector) {
+    options.useDefaultLayout = true;
+    options.useCustomLayout = false;
+  }
+
+  options.direction = options.direction.toLowerCase() === 'horizontal' ? 'horizontal' : 'vertical';
+
+  options.skin = player.options_.skin;
+
+  return options;
+};
+
+
+class PlaylistWidget {
+  constructor(player, options = {}) {
+    options = modifyOptions(player, options);
+    this.options_ = options;
+    this.player_ = player;
+    this.render();
+
+    const fluidHandler = (e, fluid) => {
+      this.options_.fluid = fluid;
+    };
+
+    player.on('fluid', fluidHandler);
+
+    this.options = (options) => {
+      if (!options) {
+        return this.options_;
+      }
+
+      this.options_ = videojs.mergeOptions(this.options_, options);
+      player.trigger('playlistwidgetoption', this.options_.playlistWidget);
+      return this.options_;
+
+    };
+
+    this.dispose = () => {
+      this.layout_.dispose();
+      player.off('fluid', fluidHandler);
+    };
+  }
+
+  render() {
+    if (this.options_.useDefaultLayout) {
+      if (this.options_.direction === 'horizontal') {
+        this.layout_ = new PlaylistLayoutHorizontal(this.player_, this.options_);
+      } else {
+        this.layout_ = new PlaylistLayoutVertical(this.player_, this.options_);
+      }
+    }
+
+    if (this.options_.useCustomLayout) {
+      this.layout_ = new PlaylistLayoutCustom(this.player_, this.options_);
+    }
+  }
+
+  getLayout() {
+    return this.layout_;
+  }
+
+  update(optionName, optionValue) {
+    this.options(optionValue);
+
+    if (optionName === 'direction') {
+      this.layout_.removeLayout();
+      this.layout_.dispose();
+      this.render();
+    } else {
+      this.layout_.update(optionName, this.options_);
+    }
+  }
+
+  setSkin() {
+    this.layout_.setCls();
+  }
+
+  total(totalNumber = PLAYLIST_DEFAULTS_OPTIONS.total) {
+    const total = parseInt(totalNumber, 10);
+
+    if (total !== this.options_.total && typeof total === 'number' && total > 0) {
+      this.update('total', { total: total });
+    }
+
+    return this;
+  }
+
+  direction(direction = PLAYLIST_DEFAULTS_OPTIONS.direction) {
+    if (direction === 'horizontal' || direction === 'vertical') {
+      this.update('direction', { direction: direction });
+    }
+
+    return this;
+  }
+}
+
+
+export default PlaylistWidget;

package/src/components/playlist/playlist.const.js

@@ -0,0 +1,14 @@
+export const DEFAULT_AUTO_ADVANCE = 0;
+
+export const DEFAULT_PRESENT_UPCOMING = 10;
+
+export const UPCOMING_VIDEO_TRANSITION = 1;
+
+export const PLAYLIST_DEFAULTS_OPTIONS = {
+  fluid: false,
+  show: true,
+  direction: 'vertical',
+  total: 4,
+  selector: false,
+  renderTo: []
+};