Adding a playlist plugin that gives you more options over your content

plugin/PlayLists/videojs-playlist-ui/videojs-playlist-ui.es.js

@@ -0,0 +1,500 @@
+/*! @name videojs-playlist-ui @version 3.5.2 @license Apache-2.0 */
+import document from 'global/document';
+import videojs from 'video.js';
+
+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;
+
+export default playlistUi;