videojs-playlist-ui - npm Package Compare versions

Comparing version 3.8.0 to 4.0.0

CHANGELOG.md

@@ -0,1 +1,14 @@
+<a name="4.0.0"></a>
+# [4.0.0](https://github.com/brightcove/videojs-playlist-ui/compare/v3.8.0...v4.0.0) (2021-12-17)
+
+### Chores
+
+* skip vjsverify es check ([#141](https://github.com/brightcove/videojs-playlist-ui/issues/141)) ([9c6944a](https://github.com/brightcove/videojs-playlist-ui/commit/9c6944a))
+* Update generate-rollup-config to drop older browser support ([#139](https://github.com/brightcove/videojs-playlist-ui/issues/139)) ([262acc6](https://github.com/brightcove/videojs-playlist-ui/commit/262acc6))
+
+
+### BREAKING CHANGES
+
+* This removes support for some older browsers like IE 11
+
 <a name="3.8.0"></a>
@@ -2,0 +15,0 @@ # [3.8.0](https://github.com/brightcove/videojs-playlist-ui/compare/v3.7.0...v3.8.0) (2020-05-06)

dist/videojs-playlist-ui.cjs.js

@@ -1,22 +0,19 @@
-/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 4.0.0 @license Apache-2.0 */
 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var document = require('global/document');
+var videojs = require('video.js');
 
-var document = _interopDefault(require('global/document'));
-var videojs = _interopDefault(require('video.js'));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
-}
+var document__default = /*#__PURE__*/_interopDefaultLegacy(document);
+var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 
-var version = "3.8.0";
+var version = "4.0.0";
 
-var dom = videojs.dom || videojs;
-var registerPlugin = videojs.registerPlugin || videojs.plugin; // Array#indexOf analog for IE8
+const dom = videojs__default["default"].dom || videojs__default["default"];
+const registerPlugin = videojs__default["default"].registerPlugin || videojs__default["default"].plugin; // Array#indexOf analog for IE8
 
-var indexOf = function indexOf(array, target) {
-  for (var i = 0, length = array.length; i < length; i++) {
+const indexOf = function (array, target) {
+  for (let i = 0, length = array.length; i < length; i++) {
     if (array[i] === target) {
@@ -31,12 +28,12 @@ return i;
 
-var supportsCssPointerEvents = function () {
-  var element = document.createElement('x');
+const supportsCssPointerEvents = (() => {
+  const element = document__default["default"].createElement('x');
   element.style.cssText = 'pointer-events:auto';
   return element.style.pointerEvents === 'auto';
-}();
+})();
 
-var defaults = {
+const defaults = {
   className: 'vjs-playlist',
   playOnSelect: false,
-  supportsCssPointerEvents: supportsCssPointerEvents
+  supportsCssPointerEvents
 }; // we don't add `vjs-playlist-now-playing` in addSelectedClass
@@ -46,7 +43,7 @@ // so it won't conflict with `vjs-icon-play
 
-var addSelectedClass = function addSelectedClass(el) {
+const addSelectedClass = function (el) {
   el.addClass('vjs-selected');
 };
 
-var removeSelectedClass = function removeSelectedClass(el) {
+const removeSelectedClass = function (el) {
   el.removeClass('vjs-selected');
@@ -59,13 +56,13 @@
 
-var upNext = function upNext(el) {
+const upNext = function (el) {
   el.addClass('vjs-up-next');
 };
 
-var notUpNext = function notUpNext(el) {
+const notUpNext = function (el) {
   el.removeClass('vjs-up-next');
 };
 
-var createThumbnail = function createThumbnail(thumbnail) {
+const createThumbnail = function (thumbnail) {
   if (!thumbnail) {
-    var placeholder = document.createElement('div');
+    const placeholder = document__default["default"].createElement('div');
     placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
@@ -75,3 +72,3 @@ return placeholder;
 
-  var picture = document.createElement('picture');
+  const picture = document__default["default"].createElement('picture');
   picture.className = 'vjs-playlist-thumbnail';
@@ -81,3 +78,3 @@
     // simple thumbnails
-    var img = document.createElement('img');
+    const img = document__default["default"].createElement('img');
     img.src = thumbnail;
@@ -90,8 +87,8 @@ img.alt = '';
     // <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 (let i = 0; i < thumbnail.length - 1; i++) {
+      const variant = thumbnail[i];
+      const source = document__default["default"].createElement('source'); // transfer the properties of each variant onto a <source>
 
-      for (var prop in _variant) {
-        source[prop] = _variant[prop];
+      for (const prop in variant) {
+        source[prop] = variant[prop];
       }
@@ -103,13 +100,11 @@
 
-    var variant = thumbnail[thumbnail.length - 1];
+    const variant = thumbnail[thumbnail.length - 1];
+    const img = document__default["default"].createElement('img');
+    img.alt = '';
 
-    var _img = document.createElement('img');
-
-    _img.alt = '';
-
-    for (var _prop in variant) {
-      _img[_prop] = variant[_prop];
+    for (const prop in variant) {
+      img[prop] = variant[prop];
     }
 
-    picture.appendChild(_img);
+    picture.appendChild(img);
   }
@@ -120,12 +115,6 @@
 
-var Component = videojs.getComponent('Component');
+const Component = videojs__default["default"].getComponent('Component');
 
-var PlaylistMenuItem =
-/*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(PlaylistMenuItem, _Component);
-
-  function PlaylistMenuItem(player, playlistItem, settings) {
-    var _this;
-
+class PlaylistMenuItem extends Component {
+  constructor(player, playlistItem, settings) {
     if (!playlistItem.item) {
@@ -136,18 +125,11 @@ throw new Error('Cannot construct a PlaylistMenuItem without an item option');
     playlistItem.showDescription = settings.showDescription;
-    _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;
+    super(player, playlistItem);
+    this.item = playlistItem.item;
+    this.playOnSelect = settings.playOnSelect;
+    this.emitTapEvents();
+    this.on(['click', 'tap'], this.switchPlaylistItem_);
+    this.on('keydown', this.handleKeyDown_);
   }
 
-  var _proto = PlaylistMenuItem.prototype;
-
-  _proto.handleKeyDown_ = function handleKeyDown_(event) {
+  handleKeyDown_(event) {
     // keycode 13 is <Enter>
@@ -158,5 +140,5 @@ // keycode 32 is <Space>
     }
-  };
+  }
 
-  _proto.switchPlaylistItem_ = function switchPlaylistItem_(event) {
+  switchPlaylistItem_(event) {
     this.player_.playlist.currentItem(indexOf(this.player_.playlist(), this.item));
@@ -167,13 +149,13 @@
     }
-  };
+  }
 
-  _proto.createEl = function createEl() {
-    var li = document.createElement('li');
-    var item = this.options_.item;
-    var showDescription = this.options_.showDescription;
+  createEl() {
+    const li = document__default["default"].createElement('li');
+    const item = this.options_.item;
+    const showDescription = this.options_.showDescription;
 
     if (typeof item.data === 'object') {
-      var dataKeys = Object.keys(item.data);
-      dataKeys.forEach(function (key) {
-        var value = item.data[key];
+      const dataKeys = Object.keys(item.data);
+      dataKeys.forEach(key => {
+        const value = item.data[key];
         li.dataset[key] = value;
@@ -190,7 +172,7 @@ });
     if (item.duration) {
-      var duration = document.createElement('time');
-      var time = videojs.formatTime(item.duration);
+      const duration = document__default["default"].createElement('time');
+      const time = videojs__default["default"].formatTime(item.duration);
       duration.className = 'vjs-playlist-duration';
       duration.setAttribute('datetime', 'PT0H0M' + item.duration + 'S');
-      duration.appendChild(document.createTextNode(time));
+      duration.appendChild(document__default["default"].createTextNode(time));
       li.appendChild(duration);
@@ -200,24 +182,24 @@ } // Now playing
 
-    var nowPlayingEl = document.createElement('span');
-    var nowPlayingText = this.localize('Now Playing');
+    const nowPlayingEl = document__default["default"].createElement('span');
+    const nowPlayingText = this.localize('Now Playing');
     nowPlayingEl.className = 'vjs-playlist-now-playing-text';
-    nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
+    nowPlayingEl.appendChild(document__default["default"].createTextNode(nowPlayingText));
     nowPlayingEl.setAttribute('title', nowPlayingText);
     this.thumbnail.appendChild(nowPlayingEl); // Title container contains title and "up next"
 
-    var titleContainerEl = document.createElement('div');
+    const titleContainerEl = document__default["default"].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');
+    const upNextEl = document__default["default"].createElement('span');
+    const upNextText = this.localize('Up Next');
     upNextEl.className = 'vjs-up-next-text';
-    upNextEl.appendChild(document.createTextNode(upNextText));
+    upNextEl.appendChild(document__default["default"].createTextNode(upNextText));
     upNextEl.setAttribute('title', upNextText);
     titleContainerEl.appendChild(upNextEl); // Video title
 
-    var titleEl = document.createElement('cite');
-    var titleText = item.name || this.localize('Untitled Video');
+    const titleEl = document__default["default"].createElement('cite');
+    const titleText = item.name || this.localize('Untitled Video');
     titleEl.className = 'vjs-playlist-name';
-    titleEl.appendChild(document.createTextNode(titleText));
+    titleEl.appendChild(document__default["default"].createTextNode(titleText));
     titleEl.setAttribute('title', titleText);
@@ -227,6 +209,6 @@ titleContainerEl.appendChild(titleEl); // We add thumbnail video description only if specified in playlist options
     if (showDescription) {
-      var descriptionEl = document.createElement('div');
-      var descriptionText = item.description || '';
+      const descriptionEl = document__default["default"].createElement('div');
+      const descriptionText = item.description || '';
       descriptionEl.className = 'vjs-playlist-description';
-      descriptionEl.appendChild(document.createTextNode(descriptionText));
+      descriptionEl.appendChild(document__default["default"].createTextNode(descriptionText));
       descriptionEl.setAttribute('title', descriptionText);
@@ -237,15 +219,8 @@ titleContainerEl.appendChild(descriptionEl);
     return li;
-  };
+  }
 
-  return PlaylistMenuItem;
-}(Component);
+}
 
-var PlaylistMenu =
-/*#__PURE__*/
-function (_Component2) {
-  _inheritsLoose(PlaylistMenu, _Component2);
-
-  function PlaylistMenu(player, options) {
-    var _this2;
-
+class PlaylistMenu extends Component {
+  constructor(player, options) {
     if (!player.playlist) {
@@ -255,9 +230,9 @@ throw new Error('videojs-playlist is required for the playlist component');
 
-    _this2 = _Component2.call(this, player, options) || this;
-    _this2.items = [];
+    super(player, options);
+    this.items = [];
 
     if (options.horizontal) {
-      _this2.addClass('vjs-playlist-horizontal');
+      this.addClass('vjs-playlist-horizontal');
     } else {
-      _this2.addClass('vjs-playlist-vertical');
+      this.addClass('vjs-playlist-vertical');
     } // If CSS pointer events aren't supported, we have to prevent
@@ -269,62 +244,51 @@ // clicking on playlist items during ads with slightly more
     if (options.supportsCssPointerEvents) {
-      _this2.addClass('vjs-csspointerevents');
+      this.addClass('vjs-csspointerevents');
     }
 
-    _this2.createPlaylist_();
+    this.createPlaylist_();
 
-    if (!videojs.browser.TOUCH_ENABLED) {
-      _this2.addClass('vjs-mouse');
+    if (!videojs__default["default"].browser.TOUCH_ENABLED) {
+      this.addClass('vjs-mouse');
     }
 
-    _this2.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], function (event) {
-      _this2.update();
+    this.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], event => {
+      this.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');
+    this.on(player, 'adstart', () => {
+      this.addClass('vjs-ad-playing');
     });
-
-    _this2.on(player, 'adend', function () {
-      _this2.removeClass('vjs-ad-playing');
+    this.on(player, 'adend', () => {
+      this.removeClass('vjs-ad-playing');
     });
-
-    _this2.on('dispose', function () {
-      _this2.empty_();
-
+    this.on('dispose', () => {
+      this.empty_();
       player.playlistMenu = null;
     });
-
-    _this2.on(player, 'dispose', function () {
-      _this2.dispose();
+    this.on(player, 'dispose', () => {
+      this.dispose();
     });
-
-    return _this2;
   }
 
-  var _proto2 = PlaylistMenu.prototype;
-
-  _proto2.createEl = function createEl() {
+  createEl() {
     return dom.createEl('div', {
       className: this.options_.className
     });
-  };
+  }
 
-  _proto2.empty_ = function empty_() {
+  empty_() {
     if (this.items && this.items.length) {
-      this.items.forEach(function (i) {
-        return i.dispose();
-      });
+      this.items.forEach(i => 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');
+  createPlaylist_() {
+    const playlist = this.player_.playlist() || [];
+    let list = this.el_.querySelector('.vjs-playlist-item-list');
+    let overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
 
     if (!list) {
-      list = document.createElement('ol');
+      list = document__default["default"].createElement('ol');
       list.className = 'vjs-playlist-item-list';
@@ -336,4 +300,4 @@ this.el_.appendChild(list);
 
-    for (var i = 0; i < playlist.length; i++) {
-      var item = new PlaylistMenuItem(this.player_, {
+    for (let i = 0; i < playlist.length; i++) {
+      const item = new PlaylistMenuItem(this.player_, {
         item: playlist[i]
@@ -349,3 +313,3 @@ }, this.options_);
     if (!overlay) {
-      overlay = document.createElement('li');
+      overlay = document__default["default"].createElement('li');
       overlay.className = 'vjs-playlist-ad-overlay';
@@ -359,7 +323,7 @@ list.appendChild(overlay);
 
-    var selectedIndex = this.player_.playlist.currentItem();
+    const selectedIndex = this.player_.playlist.currentItem();
 
     if (this.items.length && selectedIndex >= 0) {
       addSelectedClass(this.items[selectedIndex]);
-      var thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
+      const thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
 
@@ -370,7 +334,7 @@ if (thumbnail) {
     }
-  };
+  }
 
-  _proto2.update = function update() {
+  update() {
     // replace the playlist items being displayed, if necessary
-    var playlist = this.player_.playlist();
+    const playlist = this.player_.playlist();
 
@@ -384,3 +348,3 @@ if (this.items.length !== playlist.length) {
 
-    for (var i = 0; i < this.items.length; i++) {
+    for (let i = 0; i < this.items.length; i++) {
       if (this.items[i].item !== playlist[i]) {
@@ -395,11 +359,11 @@ // if any of the playlist items have changed, rebuild the
 
-    var currentItem = this.player_.playlist.currentItem();
+    const currentItem = this.player_.playlist.currentItem();
 
-    for (var _i = 0; _i < this.items.length; _i++) {
-      var item = this.items[_i];
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i];
 
-      if (_i === currentItem) {
+      if (i === currentItem) {
         addSelectedClass(item);
 
-        if (document.activeElement !== item.el()) {
+        if (document__default["default"].activeElement !== item.el()) {
           dom.addClass(item.thumbnail, 'vjs-playlist-now-playing');
@@ -409,3 +373,3 @@ }
         notUpNext(item);
-      } else if (_i === currentItem + 1) {
+      } else if (i === currentItem + 1) {
         removeSelectedClass(item);
@@ -418,6 +382,5 @@ upNext(item);
     }
-  };
+  }
 
-  return PlaylistMenu;
-}(Component);
+}
 /**
@@ -436,4 +399,4 @@ * Returns a boolean indicating whether an element has child elements.
 
-var hasChildEls = function hasChildEls(el) {
-  for (var i = 0; i < el.childNodes.length; i++) {
+const hasChildEls = el => {
+  for (let i = 0; i < el.childNodes.length; i++) {
     if (dom.isEl(el.childNodes[i])) {
@@ -457,7 +420,7 @@ return true;
 
-var findRoot = function findRoot(className) {
-  var all = document.querySelectorAll('.' + className);
-  var el;
+const findRoot = className => {
+  const all = document__default["default"].querySelectorAll('.' + className);
+  let el;
 
-  for (var i = 0; i < all.length; i++) {
+  for (let i = 0; i < all.length; i++) {
     if (!hasChildEls(all[i])) {
@@ -489,4 +452,4 @@ el = all[i];
 
-var playlistUi = function playlistUi(options) {
-  var player = this;
+const playlistUi = function (options) {
+  const player = this;
 
@@ -498,3 +461,3 @@ if (!player.playlist) {
   if (dom.isEl(options)) {
-    videojs.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!');
+    videojs__default["default"].log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!');
     options = {
@@ -505,3 +468,3 @@ el: options
 
-  options = videojs.mergeOptions(defaults, options); // If the player is already using this plugin, remove the pre-existing
+  options = videojs__default["default"].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
@@ -511,8 +474,8 @@ // 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
+    const 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
+      const parentNode = el.parentNode;
+      const nextSibling = el.nextSibling; // Disposing the menu will remove `el` from the DOM, but we need to
       // empty it ourselves to be sure.
@@ -541,4 +504,4 @@
 
-videojs.registerComponent('PlaylistMenu', PlaylistMenu);
-videojs.registerComponent('PlaylistMenuItem', PlaylistMenuItem); // register the plugin
+videojs__default["default"].registerComponent('PlaylistMenu', PlaylistMenu);
+videojs__default["default"].registerComponent('PlaylistMenuItem', PlaylistMenuItem); // register the plugin
 
@@ -545,0 +508,0 @@ registerPlugin('playlistUi', playlistUi);

dist/videojs-playlist-ui.es.js

@@ -1,18 +0,12 @@
-/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 4.0.0 @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 = "4.0.0";
 
-var version = "3.8.0";
+const dom = videojs.dom || videojs;
+const registerPlugin = videojs.registerPlugin || videojs.plugin; // Array#indexOf analog for IE8
 
-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++) {
+const indexOf = function (array, target) {
+  for (let i = 0, length = array.length; i < length; i++) {
     if (array[i] === target) {
@@ -27,12 +21,12 @@ return i;
 
-var supportsCssPointerEvents = function () {
-  var element = document.createElement('x');
+const supportsCssPointerEvents = (() => {
+  const element = document.createElement('x');
   element.style.cssText = 'pointer-events:auto';
   return element.style.pointerEvents === 'auto';
-}();
+})();
 
-var defaults = {
+const defaults = {
   className: 'vjs-playlist',
   playOnSelect: false,
-  supportsCssPointerEvents: supportsCssPointerEvents
+  supportsCssPointerEvents
 }; // we don't add `vjs-playlist-now-playing` in addSelectedClass
@@ -42,7 +36,7 @@ // so it won't conflict with `vjs-icon-play
 
-var addSelectedClass = function addSelectedClass(el) {
+const addSelectedClass = function (el) {
   el.addClass('vjs-selected');
 };
 
-var removeSelectedClass = function removeSelectedClass(el) {
+const removeSelectedClass = function (el) {
   el.removeClass('vjs-selected');
@@ -55,13 +49,13 @@
 
-var upNext = function upNext(el) {
+const upNext = function (el) {
   el.addClass('vjs-up-next');
 };
 
-var notUpNext = function notUpNext(el) {
+const notUpNext = function (el) {
   el.removeClass('vjs-up-next');
 };
 
-var createThumbnail = function createThumbnail(thumbnail) {
+const createThumbnail = function (thumbnail) {
   if (!thumbnail) {
-    var placeholder = document.createElement('div');
+    const placeholder = document.createElement('div');
     placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
@@ -71,3 +65,3 @@ return placeholder;
 
-  var picture = document.createElement('picture');
+  const picture = document.createElement('picture');
   picture.className = 'vjs-playlist-thumbnail';
@@ -77,3 +71,3 @@
     // simple thumbnails
-    var img = document.createElement('img');
+    const img = document.createElement('img');
     img.src = thumbnail;
@@ -86,8 +80,8 @@ img.alt = '';
     // <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 (let i = 0; i < thumbnail.length - 1; i++) {
+      const variant = thumbnail[i];
+      const source = document.createElement('source'); // transfer the properties of each variant onto a <source>
 
-      for (var prop in _variant) {
-        source[prop] = _variant[prop];
+      for (const prop in variant) {
+        source[prop] = variant[prop];
       }
@@ -99,13 +93,11 @@
 
-    var variant = thumbnail[thumbnail.length - 1];
+    const variant = thumbnail[thumbnail.length - 1];
+    const img = document.createElement('img');
+    img.alt = '';
 
-    var _img = document.createElement('img');
-
-    _img.alt = '';
-
-    for (var _prop in variant) {
-      _img[_prop] = variant[_prop];
+    for (const prop in variant) {
+      img[prop] = variant[prop];
     }
 
-    picture.appendChild(_img);
+    picture.appendChild(img);
   }
@@ -116,12 +108,6 @@
 
-var Component = videojs.getComponent('Component');
+const Component = videojs.getComponent('Component');
 
-var PlaylistMenuItem =
-/*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(PlaylistMenuItem, _Component);
-
-  function PlaylistMenuItem(player, playlistItem, settings) {
-    var _this;
-
+class PlaylistMenuItem extends Component {
+  constructor(player, playlistItem, settings) {
     if (!playlistItem.item) {
@@ -132,18 +118,11 @@ throw new Error('Cannot construct a PlaylistMenuItem without an item option');
     playlistItem.showDescription = settings.showDescription;
-    _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;
+    super(player, playlistItem);
+    this.item = playlistItem.item;
+    this.playOnSelect = settings.playOnSelect;
+    this.emitTapEvents();
+    this.on(['click', 'tap'], this.switchPlaylistItem_);
+    this.on('keydown', this.handleKeyDown_);
   }
 
-  var _proto = PlaylistMenuItem.prototype;
-
-  _proto.handleKeyDown_ = function handleKeyDown_(event) {
+  handleKeyDown_(event) {
     // keycode 13 is <Enter>
@@ -154,5 +133,5 @@ // keycode 32 is <Space>
     }
-  };
+  }
 
-  _proto.switchPlaylistItem_ = function switchPlaylistItem_(event) {
+  switchPlaylistItem_(event) {
     this.player_.playlist.currentItem(indexOf(this.player_.playlist(), this.item));
@@ -163,13 +142,13 @@
     }
-  };
+  }
 
-  _proto.createEl = function createEl() {
-    var li = document.createElement('li');
-    var item = this.options_.item;
-    var showDescription = this.options_.showDescription;
+  createEl() {
+    const li = document.createElement('li');
+    const item = this.options_.item;
+    const showDescription = this.options_.showDescription;
 
     if (typeof item.data === 'object') {
-      var dataKeys = Object.keys(item.data);
-      dataKeys.forEach(function (key) {
-        var value = item.data[key];
+      const dataKeys = Object.keys(item.data);
+      dataKeys.forEach(key => {
+        const value = item.data[key];
         li.dataset[key] = value;
@@ -186,4 +165,4 @@ });
     if (item.duration) {
-      var duration = document.createElement('time');
-      var time = videojs.formatTime(item.duration);
+      const duration = document.createElement('time');
+      const time = videojs.formatTime(item.duration);
       duration.className = 'vjs-playlist-duration';
@@ -196,4 +175,4 @@ duration.setAttribute('datetime', 'PT0H0M' + item.duration + 'S');
 
-    var nowPlayingEl = document.createElement('span');
-    var nowPlayingText = this.localize('Now Playing');
+    const nowPlayingEl = document.createElement('span');
+    const nowPlayingText = this.localize('Now Playing');
     nowPlayingEl.className = 'vjs-playlist-now-playing-text';
@@ -204,8 +183,8 @@ nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
 
-    var titleContainerEl = document.createElement('div');
+    const 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');
+    const upNextEl = document.createElement('span');
+    const upNextText = this.localize('Up Next');
     upNextEl.className = 'vjs-up-next-text';
@@ -216,4 +195,4 @@ upNextEl.appendChild(document.createTextNode(upNextText));
 
-    var titleEl = document.createElement('cite');
-    var titleText = item.name || this.localize('Untitled Video');
+    const titleEl = document.createElement('cite');
+    const titleText = item.name || this.localize('Untitled Video');
     titleEl.className = 'vjs-playlist-name';
@@ -225,4 +204,4 @@ titleEl.appendChild(document.createTextNode(titleText));
     if (showDescription) {
-      var descriptionEl = document.createElement('div');
-      var descriptionText = item.description || '';
+      const descriptionEl = document.createElement('div');
+      const descriptionText = item.description || '';
       descriptionEl.className = 'vjs-playlist-description';
@@ -235,15 +214,8 @@ descriptionEl.appendChild(document.createTextNode(descriptionText));
     return li;
-  };
+  }
 
-  return PlaylistMenuItem;
-}(Component);
+}
 
-var PlaylistMenu =
-/*#__PURE__*/
-function (_Component2) {
-  _inheritsLoose(PlaylistMenu, _Component2);
-
-  function PlaylistMenu(player, options) {
-    var _this2;
-
+class PlaylistMenu extends Component {
+  constructor(player, options) {
     if (!player.playlist) {
@@ -253,9 +225,9 @@ throw new Error('videojs-playlist is required for the playlist component');
 
-    _this2 = _Component2.call(this, player, options) || this;
-    _this2.items = [];
+    super(player, options);
+    this.items = [];
 
     if (options.horizontal) {
-      _this2.addClass('vjs-playlist-horizontal');
+      this.addClass('vjs-playlist-horizontal');
     } else {
-      _this2.addClass('vjs-playlist-vertical');
+      this.addClass('vjs-playlist-vertical');
     } // If CSS pointer events aren't supported, we have to prevent
@@ -267,59 +239,48 @@ // clicking on playlist items during ads with slightly more
     if (options.supportsCssPointerEvents) {
-      _this2.addClass('vjs-csspointerevents');
+      this.addClass('vjs-csspointerevents');
     }
 
-    _this2.createPlaylist_();
+    this.createPlaylist_();
 
     if (!videojs.browser.TOUCH_ENABLED) {
-      _this2.addClass('vjs-mouse');
+      this.addClass('vjs-mouse');
     }
 
-    _this2.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], function (event) {
-      _this2.update();
+    this.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], event => {
+      this.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');
+    this.on(player, 'adstart', () => {
+      this.addClass('vjs-ad-playing');
     });
-
-    _this2.on(player, 'adend', function () {
-      _this2.removeClass('vjs-ad-playing');
+    this.on(player, 'adend', () => {
+      this.removeClass('vjs-ad-playing');
     });
-
-    _this2.on('dispose', function () {
-      _this2.empty_();
-
+    this.on('dispose', () => {
+      this.empty_();
       player.playlistMenu = null;
     });
-
-    _this2.on(player, 'dispose', function () {
-      _this2.dispose();
+    this.on(player, 'dispose', () => {
+      this.dispose();
     });
-
-    return _this2;
   }
 
-  var _proto2 = PlaylistMenu.prototype;
-
-  _proto2.createEl = function createEl() {
+  createEl() {
     return dom.createEl('div', {
       className: this.options_.className
     });
-  };
+  }
 
-  _proto2.empty_ = function empty_() {
+  empty_() {
     if (this.items && this.items.length) {
-      this.items.forEach(function (i) {
-        return i.dispose();
-      });
+      this.items.forEach(i => 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');
+  createPlaylist_() {
+    const playlist = this.player_.playlist() || [];
+    let list = this.el_.querySelector('.vjs-playlist-item-list');
+    let overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
 
@@ -334,4 +295,4 @@ if (!list) {
 
-    for (var i = 0; i < playlist.length; i++) {
-      var item = new PlaylistMenuItem(this.player_, {
+    for (let i = 0; i < playlist.length; i++) {
+      const item = new PlaylistMenuItem(this.player_, {
         item: playlist[i]
@@ -356,7 +317,7 @@ }, this.options_);
 
-    var selectedIndex = this.player_.playlist.currentItem();
+    const selectedIndex = this.player_.playlist.currentItem();
 
     if (this.items.length && selectedIndex >= 0) {
       addSelectedClass(this.items[selectedIndex]);
-      var thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
+      const thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
 
@@ -367,7 +328,7 @@ if (thumbnail) {
     }
-  };
+  }
 
-  _proto2.update = function update() {
+  update() {
     // replace the playlist items being displayed, if necessary
-    var playlist = this.player_.playlist();
+    const playlist = this.player_.playlist();
 
@@ -381,3 +342,3 @@ if (this.items.length !== playlist.length) {
 
-    for (var i = 0; i < this.items.length; i++) {
+    for (let i = 0; i < this.items.length; i++) {
       if (this.items[i].item !== playlist[i]) {
@@ -392,8 +353,8 @@ // if any of the playlist items have changed, rebuild the
 
-    var currentItem = this.player_.playlist.currentItem();
+    const currentItem = this.player_.playlist.currentItem();
 
-    for (var _i = 0; _i < this.items.length; _i++) {
-      var item = this.items[_i];
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i];
 
-      if (_i === currentItem) {
+      if (i === currentItem) {
         addSelectedClass(item);
@@ -406,3 +367,3 @@
         notUpNext(item);
-      } else if (_i === currentItem + 1) {
+      } else if (i === currentItem + 1) {
         removeSelectedClass(item);
@@ -415,6 +376,5 @@ upNext(item);
     }
-  };
+  }
 
-  return PlaylistMenu;
-}(Component);
+}
 /**
@@ -433,4 +393,4 @@ * Returns a boolean indicating whether an element has child elements.
 
-var hasChildEls = function hasChildEls(el) {
-  for (var i = 0; i < el.childNodes.length; i++) {
+const hasChildEls = el => {
+  for (let i = 0; i < el.childNodes.length; i++) {
     if (dom.isEl(el.childNodes[i])) {
@@ -454,7 +414,7 @@ return true;
 
-var findRoot = function findRoot(className) {
-  var all = document.querySelectorAll('.' + className);
-  var el;
+const findRoot = className => {
+  const all = document.querySelectorAll('.' + className);
+  let el;
 
-  for (var i = 0; i < all.length; i++) {
+  for (let i = 0; i < all.length; i++) {
     if (!hasChildEls(all[i])) {
@@ -486,4 +446,4 @@ el = all[i];
 
-var playlistUi = function playlistUi(options) {
-  var player = this;
+const playlistUi = function (options) {
+  const player = this;
 
@@ -506,8 +466,8 @@ if (!player.playlist) {
   if (player.playlistMenu) {
-    var el = player.playlistMenu.el(); // Catch cases where the menu may have been disposed elsewhere or the
+    const 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
+      const parentNode = el.parentNode;
+      const nextSibling = el.nextSibling; // Disposing the menu will remove `el` from the DOM, but we need to
       // empty it ourselves to be sure.
@@ -542,2 +502,2 @@
 
-export default playlistUi;
+export { playlistUi as default };

dist/videojs-playlist-ui.js

@@ -1,24 +0,19 @@
-/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
+/*! @name videojs-playlist-ui @version 4.0.0 @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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
+  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsPlaylistUi = factory(global.videojs));
+})(this, (function (videojs) { 'use strict';
 
-  document = document && document.hasOwnProperty('default') ? document['default'] : document;
-  videojs = videojs && videojs.hasOwnProperty('default') ? videojs['default'] : videojs;
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    subClass.__proto__ = superClass;
-  }
+  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 
-  var version = "3.8.0";
+  var version = "4.0.0";
 
-  var dom = videojs.dom || videojs;
-  var registerPlugin = videojs.registerPlugin || videojs.plugin; // Array#indexOf analog for IE8
+  const dom = videojs__default["default"].dom || videojs__default["default"];
+  const registerPlugin = videojs__default["default"].registerPlugin || videojs__default["default"].plugin; // Array#indexOf analog for IE8
 
-  var indexOf = function indexOf(array, target) {
-    for (var i = 0, length = array.length; i < length; i++) {
+  const indexOf = function (array, target) {
+    for (let i = 0, length = array.length; i < length; i++) {
       if (array[i] === target) {
@@ -33,12 +28,12 @@ return i;
 
-  var supportsCssPointerEvents = function () {
-    var element = document.createElement('x');
+  const supportsCssPointerEvents = (() => {
+    const element = document.createElement('x');
     element.style.cssText = 'pointer-events:auto';
     return element.style.pointerEvents === 'auto';
-  }();
+  })();
 
-  var defaults = {
+  const defaults = {
     className: 'vjs-playlist',
     playOnSelect: false,
-    supportsCssPointerEvents: supportsCssPointerEvents
+    supportsCssPointerEvents
   }; // we don't add `vjs-playlist-now-playing` in addSelectedClass
@@ -48,7 +43,7 @@ // so it won't conflict with `vjs-icon-play
 
-  var addSelectedClass = function addSelectedClass(el) {
+  const addSelectedClass = function (el) {
     el.addClass('vjs-selected');
   };
 
-  var removeSelectedClass = function removeSelectedClass(el) {
+  const removeSelectedClass = function (el) {
     el.removeClass('vjs-selected');
@@ -61,13 +56,13 @@
 
-  var upNext = function upNext(el) {
+  const upNext = function (el) {
     el.addClass('vjs-up-next');
   };
 
-  var notUpNext = function notUpNext(el) {
+  const notUpNext = function (el) {
     el.removeClass('vjs-up-next');
   };
 
-  var createThumbnail = function createThumbnail(thumbnail) {
+  const createThumbnail = function (thumbnail) {
     if (!thumbnail) {
-      var placeholder = document.createElement('div');
+      const placeholder = document.createElement('div');
       placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
@@ -77,3 +72,3 @@ return placeholder;
 
-    var picture = document.createElement('picture');
+    const picture = document.createElement('picture');
     picture.className = 'vjs-playlist-thumbnail';
@@ -83,3 +78,3 @@
       // simple thumbnails
-      var img = document.createElement('img');
+      const img = document.createElement('img');
       img.src = thumbnail;
@@ -92,8 +87,8 @@ img.alt = '';
       // <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 (let i = 0; i < thumbnail.length - 1; i++) {
+        const variant = thumbnail[i];
+        const source = document.createElement('source'); // transfer the properties of each variant onto a <source>
 
-        for (var prop in _variant) {
-          source[prop] = _variant[prop];
+        for (const prop in variant) {
+          source[prop] = variant[prop];
         }
@@ -105,13 +100,11 @@
 
-      var variant = thumbnail[thumbnail.length - 1];
+      const variant = thumbnail[thumbnail.length - 1];
+      const img = document.createElement('img');
+      img.alt = '';
 
-      var _img = document.createElement('img');
-
-      _img.alt = '';
-
-      for (var _prop in variant) {
-        _img[_prop] = variant[_prop];
+      for (const prop in variant) {
+        img[prop] = variant[prop];
       }
 
-      picture.appendChild(_img);
+      picture.appendChild(img);
     }
@@ -122,12 +115,6 @@
 
-  var Component = videojs.getComponent('Component');
+  const Component = videojs__default["default"].getComponent('Component');
 
-  var PlaylistMenuItem =
-  /*#__PURE__*/
-  function (_Component) {
-    _inheritsLoose(PlaylistMenuItem, _Component);
-
-    function PlaylistMenuItem(player, playlistItem, settings) {
-      var _this;
-
+  class PlaylistMenuItem extends Component {
+    constructor(player, playlistItem, settings) {
       if (!playlistItem.item) {
@@ -138,18 +125,11 @@ throw new Error('Cannot construct a PlaylistMenuItem without an item option');
       playlistItem.showDescription = settings.showDescription;
-      _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;
+      super(player, playlistItem);
+      this.item = playlistItem.item;
+      this.playOnSelect = settings.playOnSelect;
+      this.emitTapEvents();
+      this.on(['click', 'tap'], this.switchPlaylistItem_);
+      this.on('keydown', this.handleKeyDown_);
     }
 
-    var _proto = PlaylistMenuItem.prototype;
-
-    _proto.handleKeyDown_ = function handleKeyDown_(event) {
+    handleKeyDown_(event) {
       // keycode 13 is <Enter>
@@ -160,5 +140,5 @@ // keycode 32 is <Space>
       }
-    };
+    }
 
-    _proto.switchPlaylistItem_ = function switchPlaylistItem_(event) {
+    switchPlaylistItem_(event) {
       this.player_.playlist.currentItem(indexOf(this.player_.playlist(), this.item));
@@ -169,13 +149,13 @@
       }
-    };
+    }
 
-    _proto.createEl = function createEl() {
-      var li = document.createElement('li');
-      var item = this.options_.item;
-      var showDescription = this.options_.showDescription;
+    createEl() {
+      const li = document.createElement('li');
+      const item = this.options_.item;
+      const showDescription = this.options_.showDescription;
 
       if (typeof item.data === 'object') {
-        var dataKeys = Object.keys(item.data);
-        dataKeys.forEach(function (key) {
-          var value = item.data[key];
+        const dataKeys = Object.keys(item.data);
+        dataKeys.forEach(key => {
+          const value = item.data[key];
           li.dataset[key] = value;
@@ -192,4 +172,4 @@ });
       if (item.duration) {
-        var duration = document.createElement('time');
-        var time = videojs.formatTime(item.duration);
+        const duration = document.createElement('time');
+        const time = videojs__default["default"].formatTime(item.duration);
         duration.className = 'vjs-playlist-duration';
@@ -202,4 +182,4 @@ duration.setAttribute('datetime', 'PT0H0M' + item.duration + 'S');
 
-      var nowPlayingEl = document.createElement('span');
-      var nowPlayingText = this.localize('Now Playing');
+      const nowPlayingEl = document.createElement('span');
+      const nowPlayingText = this.localize('Now Playing');
       nowPlayingEl.className = 'vjs-playlist-now-playing-text';
@@ -210,8 +190,8 @@ nowPlayingEl.appendChild(document.createTextNode(nowPlayingText));
 
-      var titleContainerEl = document.createElement('div');
+      const 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');
+      const upNextEl = document.createElement('span');
+      const upNextText = this.localize('Up Next');
       upNextEl.className = 'vjs-up-next-text';
@@ -222,4 +202,4 @@ upNextEl.appendChild(document.createTextNode(upNextText));
 
-      var titleEl = document.createElement('cite');
-      var titleText = item.name || this.localize('Untitled Video');
+      const titleEl = document.createElement('cite');
+      const titleText = item.name || this.localize('Untitled Video');
       titleEl.className = 'vjs-playlist-name';
@@ -231,4 +211,4 @@ titleEl.appendChild(document.createTextNode(titleText));
       if (showDescription) {
-        var descriptionEl = document.createElement('div');
-        var descriptionText = item.description || '';
+        const descriptionEl = document.createElement('div');
+        const descriptionText = item.description || '';
         descriptionEl.className = 'vjs-playlist-description';
@@ -241,15 +221,8 @@ descriptionEl.appendChild(document.createTextNode(descriptionText));
       return li;
-    };
+    }
 
-    return PlaylistMenuItem;
-  }(Component);
+  }
 
-  var PlaylistMenu =
-  /*#__PURE__*/
-  function (_Component2) {
-    _inheritsLoose(PlaylistMenu, _Component2);
-
-    function PlaylistMenu(player, options) {
-      var _this2;
-
+  class PlaylistMenu extends Component {
+    constructor(player, options) {
       if (!player.playlist) {
@@ -259,9 +232,9 @@ throw new Error('videojs-playlist is required for the playlist component');
 
-      _this2 = _Component2.call(this, player, options) || this;
-      _this2.items = [];
+      super(player, options);
+      this.items = [];
 
       if (options.horizontal) {
-        _this2.addClass('vjs-playlist-horizontal');
+        this.addClass('vjs-playlist-horizontal');
       } else {
-        _this2.addClass('vjs-playlist-vertical');
+        this.addClass('vjs-playlist-vertical');
       } // If CSS pointer events aren't supported, we have to prevent
@@ -273,59 +246,48 @@ // clicking on playlist items during ads with slightly more
       if (options.supportsCssPointerEvents) {
-        _this2.addClass('vjs-csspointerevents');
+        this.addClass('vjs-csspointerevents');
       }
 
-      _this2.createPlaylist_();
+      this.createPlaylist_();
 
-      if (!videojs.browser.TOUCH_ENABLED) {
-        _this2.addClass('vjs-mouse');
+      if (!videojs__default["default"].browser.TOUCH_ENABLED) {
+        this.addClass('vjs-mouse');
       }
 
-      _this2.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], function (event) {
-        _this2.update();
+      this.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], event => {
+        this.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');
+      this.on(player, 'adstart', () => {
+        this.addClass('vjs-ad-playing');
       });
-
-      _this2.on(player, 'adend', function () {
-        _this2.removeClass('vjs-ad-playing');
+      this.on(player, 'adend', () => {
+        this.removeClass('vjs-ad-playing');
       });
-
-      _this2.on('dispose', function () {
-        _this2.empty_();
-
+      this.on('dispose', () => {
+        this.empty_();
         player.playlistMenu = null;
       });
-
-      _this2.on(player, 'dispose', function () {
-        _this2.dispose();
+      this.on(player, 'dispose', () => {
+        this.dispose();
       });
-
-      return _this2;
     }
 
-    var _proto2 = PlaylistMenu.prototype;
-
-    _proto2.createEl = function createEl() {
+    createEl() {
       return dom.createEl('div', {
         className: this.options_.className
       });
-    };
+    }
 
-    _proto2.empty_ = function empty_() {
+    empty_() {
       if (this.items && this.items.length) {
-        this.items.forEach(function (i) {
-          return i.dispose();
-        });
+        this.items.forEach(i => 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');
+    createPlaylist_() {
+      const playlist = this.player_.playlist() || [];
+      let list = this.el_.querySelector('.vjs-playlist-item-list');
+      let overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
 
@@ -340,4 +302,4 @@ if (!list) {
 
-      for (var i = 0; i < playlist.length; i++) {
-        var item = new PlaylistMenuItem(this.player_, {
+      for (let i = 0; i < playlist.length; i++) {
+        const item = new PlaylistMenuItem(this.player_, {
           item: playlist[i]
@@ -362,7 +324,7 @@ }, this.options_);
 
-      var selectedIndex = this.player_.playlist.currentItem();
+      const selectedIndex = this.player_.playlist.currentItem();
 
       if (this.items.length && selectedIndex >= 0) {
         addSelectedClass(this.items[selectedIndex]);
-        var thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
+        const thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');
 
@@ -373,7 +335,7 @@ if (thumbnail) {
       }
-    };
+    }
 
-    _proto2.update = function update() {
+    update() {
       // replace the playlist items being displayed, if necessary
-      var playlist = this.player_.playlist();
+      const playlist = this.player_.playlist();
 
@@ -387,3 +349,3 @@ if (this.items.length !== playlist.length) {
 
-      for (var i = 0; i < this.items.length; i++) {
+      for (let i = 0; i < this.items.length; i++) {
         if (this.items[i].item !== playlist[i]) {
@@ -398,8 +360,8 @@ // if any of the playlist items have changed, rebuild the
 
-      var currentItem = this.player_.playlist.currentItem();
+      const currentItem = this.player_.playlist.currentItem();
 
-      for (var _i = 0; _i < this.items.length; _i++) {
-        var item = this.items[_i];
+      for (let i = 0; i < this.items.length; i++) {
+        const item = this.items[i];
 
-        if (_i === currentItem) {
+        if (i === currentItem) {
           addSelectedClass(item);
@@ -412,3 +374,3 @@
           notUpNext(item);
-        } else if (_i === currentItem + 1) {
+        } else if (i === currentItem + 1) {
           removeSelectedClass(item);
@@ -421,6 +383,5 @@ upNext(item);
       }
-    };
+    }
 
-    return PlaylistMenu;
-  }(Component);
+  }
   /**
@@ -439,4 +400,4 @@ * Returns a boolean indicating whether an element has child elements.
 
-  var hasChildEls = function hasChildEls(el) {
-    for (var i = 0; i < el.childNodes.length; i++) {
+  const hasChildEls = el => {
+    for (let i = 0; i < el.childNodes.length; i++) {
       if (dom.isEl(el.childNodes[i])) {
@@ -460,7 +421,7 @@ return true;
 
-  var findRoot = function findRoot(className) {
-    var all = document.querySelectorAll('.' + className);
-    var el;
+  const findRoot = className => {
+    const all = document.querySelectorAll('.' + className);
+    let el;
 
-    for (var i = 0; i < all.length; i++) {
+    for (let i = 0; i < all.length; i++) {
       if (!hasChildEls(all[i])) {
@@ -492,4 +453,4 @@ el = all[i];
 
-  var playlistUi = function playlistUi(options) {
-    var player = this;
+  const playlistUi = function (options) {
+    const player = this;
 
@@ -501,3 +462,3 @@ if (!player.playlist) {
     if (dom.isEl(options)) {
-      videojs.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!');
+      videojs__default["default"].log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!');
       options = {
@@ -508,3 +469,3 @@ el: options
 
-    options = videojs.mergeOptions(defaults, options); // If the player is already using this plugin, remove the pre-existing
+    options = videojs__default["default"].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
@@ -514,8 +475,8 @@ // 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
+      const 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
+        const parentNode = el.parentNode;
+        const nextSibling = el.nextSibling; // Disposing the menu will remove `el` from the DOM, but we need to
         // empty it ourselves to be sure.
@@ -544,4 +505,4 @@
 
-  videojs.registerComponent('PlaylistMenu', PlaylistMenu);
-  videojs.registerComponent('PlaylistMenuItem', PlaylistMenuItem); // register the plugin
+  videojs__default["default"].registerComponent('PlaylistMenu', PlaylistMenu);
+  videojs__default["default"].registerComponent('PlaylistMenuItem', PlaylistMenuItem); // register the plugin
 
@@ -553,2 +514,2 @@ registerPlugin('playlistUi', playlistUi);
 
-})));
+}));

dist/videojs-playlist-ui.min.js

@@ -1,2 +0,2 @@
-/*! @name videojs-playlist-ui @version 3.8.0 @license Apache-2.0 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("global/document"),require("video.js")):"function"==typeof define&&define.amd?define(["global/document","video.js"],e):t.videojsPlaylistUi=e(t.document,t.videojs)}(this,function(m,y){"use strict";function i(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}m=m&&m.hasOwnProperty("default")?m.default:m;function r(t){t.addClass("vjs-selected")}function a(t){t.removeClass("vjs-selected"),t.thumbnail&&p.removeClass(t.thumbnail,"vjs-playlist-now-playing")}function n(t){t.removeClass("vjs-up-next")}function o(t){for(var e=0;e<t.childNodes.length;e++)if(p.isEl(t.childNodes[e]))return 1}function t(t){var e=this;if(!e.playlist)throw new Error("videojs-playlist plugin is required by the videojs-playlist-ui plugin");if(p.isEl(t)&&(y.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!'),t={el:t}),t=y.mergeOptions(d,t),e.playlistMenu){var i=e.playlistMenu.el();if(i){var l=i.parentNode,s=i.nextSibling;e.playlistMenu.dispose(),p.emptyEl(i),s?l.insertBefore(i,s):l.appendChild(i),t.el=i}}p.isEl(t.el)||(t.el=function(t){for(var e,i=m.querySelectorAll("."+t),l=0;l<i.length;l++)if(!o(i[l])){e=i[l];break}return e}(t.className)),e.playlistMenu=new h(e,t)}var e,p=(y=y&&y.hasOwnProperty("default")?y.default:y).dom||y,l=y.registerPlugin||y.plugin,d={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:((e=m.createElement("x")).style.cssText="pointer-events:auto","auto"===e.style.pointerEvents)},s=y.getComponent("Component"),c=function(s){function t(t,e,i){var l;if(!e.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");return e.showDescription=i.showDescription,(l=s.call(this,t,e)||this).item=e.item,l.playOnSelect=i.playOnSelect,l.emitTapEvents(),l.on(["click","tap"],l.switchPlaylistItem_),l.on("keydown",l.handleKeyDown_),l}i(t,s);var e=t.prototype;return e.handleKeyDown_=function(t){13!==t.which&&32!==t.which||this.switchPlaylistItem_()},e.switchPlaylistItem_=function(){this.player_.playlist.currentItem(function(t,e){for(var i=0,l=t.length;i<l;i++)if(t[i]===e)return i;return-1}(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()},e.createEl=function(){var i=m.createElement("li"),l=this.options_.item,t=this.options_.showDescription;"object"==typeof l.data&&Object.keys(l.data).forEach(function(t){var e=l.data[t];i.dataset[t]=e});if(i.className="vjs-playlist-item",i.setAttribute("tabIndex",0),this.thumbnail=function(t){if(!t){var e=m.createElement("div");return e.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",e}var i=m.createElement("picture");if(i.className="vjs-playlist-thumbnail","string"==typeof t){var l=m.createElement("img");l.src=t,l.alt="",i.appendChild(l)}else{for(var s=0;s<t.length-1;s++){var a=t[s],n=m.createElement("source");for(var r in a)n[r]=a[r];i.appendChild(n)}var o=t[t.length-1],p=m.createElement("img");for(var d in p.alt="",o)p[d]=o[d];i.appendChild(p)}return i}(l.thumbnail),i.appendChild(this.thumbnail),l.duration){var e=m.createElement("time"),s=y.formatTime(l.duration);e.className="vjs-playlist-duration",e.setAttribute("datetime","PT0H0M"+l.duration+"S"),e.appendChild(m.createTextNode(s)),i.appendChild(e)}var a=m.createElement("span"),n=this.localize("Now Playing");a.className="vjs-playlist-now-playing-text",a.appendChild(m.createTextNode(n)),a.setAttribute("title",n),this.thumbnail.appendChild(a);var r=m.createElement("div");r.className="vjs-playlist-title-container",this.thumbnail.appendChild(r);var o=m.createElement("span"),p=this.localize("Up Next");o.className="vjs-up-next-text",o.appendChild(m.createTextNode(p)),o.setAttribute("title",p),r.appendChild(o);var d=m.createElement("cite"),c=l.name||this.localize("Untitled Video");if(d.className="vjs-playlist-name",d.appendChild(m.createTextNode(c)),d.setAttribute("title",c),r.appendChild(d),t){var h=m.createElement("div"),u=l.description||"";h.className="vjs-playlist-description",h.appendChild(m.createTextNode(u)),h.setAttribute("title",u),r.appendChild(h)}return i},t}(s),h=function(l){function t(t,e){var i;if(!t.playlist)throw new Error("videojs-playlist is required for the playlist component");return(i=l.call(this,t,e)||this).items=[],e.horizontal?i.addClass("vjs-playlist-horizontal"):i.addClass("vjs-playlist-vertical"),e.supportsCssPointerEvents&&i.addClass("vjs-csspointerevents"),i.createPlaylist_(),y.browser.TOUCH_ENABLED||i.addClass("vjs-mouse"),i.on(t,["loadstart","playlistchange","playlistsorted"],function(t){i.update()}),i.on(t,"adstart",function(){i.addClass("vjs-ad-playing")}),i.on(t,"adend",function(){i.removeClass("vjs-ad-playing")}),i.on("dispose",function(){i.empty_(),t.playlistMenu=null}),i.on(t,"dispose",function(){i.dispose()}),i}i(t,l);var e=t.prototype;return e.createEl=function(){return p.createEl("div",{className:this.options_.className})},e.empty_=function(){this.items&&this.items.length&&(this.items.forEach(function(t){return t.dispose()}),this.items.length=0)},e.createPlaylist_=function(){var t=this.player_.playlist()||[],e=this.el_.querySelector(".vjs-playlist-item-list"),i=this.el_.querySelector(".vjs-playlist-ad-overlay");e||((e=m.createElement("ol")).className="vjs-playlist-item-list",this.el_.appendChild(e)),this.empty_();for(var l=0;l<t.length;l++){var s=new c(this.player_,{item:t[l]},this.options_);this.items.push(s),e.appendChild(s.el_)}i||((i=m.createElement("li")).className="vjs-playlist-ad-overlay"),e.appendChild(i);var a=this.player_.playlist.currentItem();if(this.items.length&&0<=a){r(this.items[a]);var n=this.items[a].$(".vjs-playlist-thumbnail");n&&p.addClass(n,"vjs-playlist-now-playing")}},e.update=function(){var t=this.player_.playlist();if(this.items.length===t.length){for(var e=0;e<this.items.length;e++)if(this.items[e].item!==t[e])return void this.createPlaylist_();for(var i=this.player_.playlist.currentItem(),l=0;l<this.items.length;l++){var s=this.items[l];l===i?(r(s),m.activeElement!==s.el()&&p.addClass(s.thumbnail,"vjs-playlist-now-playing"),n(s)):l===i+1?(a(s),s.addClass("vjs-up-next")):(a(s),n(s))}}else this.createPlaylist_()},t}(s);return y.registerComponent("PlaylistMenu",h),y.registerComponent("PlaylistMenuItem",c),l("playlistUi",t),t.VERSION="3.8.0",t});
+/*! @name videojs-playlist-ui @version 4.0.0 @license Apache-2.0 */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).videojsPlaylistUi=e(t.videojs)}(this,(function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=e(t);const i=s.default.dom||s.default,l=s.default.registerPlugin||s.default.plugin,n={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:(()=>{const t=document.createElement("x");return t.style.cssText="pointer-events:auto","auto"===t.style.pointerEvents})()},a=function(t){t.addClass("vjs-selected")},o=function(t){t.removeClass("vjs-selected"),t.thumbnail&&i.removeClass(t.thumbnail,"vjs-playlist-now-playing")},r=function(t){t.removeClass("vjs-up-next")},d=s.default.getComponent("Component");class c extends d{constructor(t,e,s){if(!e.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");e.showDescription=s.showDescription,super(t,e),this.item=e.item,this.playOnSelect=s.playOnSelect,this.emitTapEvents(),this.on(["click","tap"],this.switchPlaylistItem_),this.on("keydown",this.handleKeyDown_)}handleKeyDown_(t){13!==t.which&&32!==t.which||this.switchPlaylistItem_()}switchPlaylistItem_(t){this.player_.playlist.currentItem(function(t,e){for(let s=0,i=t.length;s<i;s++)if(t[s]===e)return s;return-1}(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()}createEl(){const t=document.createElement("li"),e=this.options_.item,i=this.options_.showDescription;if("object"==typeof e.data){Object.keys(e.data).forEach((s=>{const i=e.data[s];t.dataset[s]=i}))}if(t.className="vjs-playlist-item",t.setAttribute("tabIndex",0),this.thumbnail=function(t){if(!t){const t=document.createElement("div");return t.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",t}const e=document.createElement("picture");if(e.className="vjs-playlist-thumbnail","string"==typeof t){const s=document.createElement("img");s.src=t,s.alt="",e.appendChild(s)}else{for(let s=0;s<t.length-1;s++){const i=t[s],l=document.createElement("source");for(const t in i)l[t]=i[t];e.appendChild(l)}const s=t[t.length-1],i=document.createElement("img");i.alt="";for(const t in s)i[t]=s[t];e.appendChild(i)}return e}(e.thumbnail),t.appendChild(this.thumbnail),e.duration){const i=document.createElement("time"),l=s.default.formatTime(e.duration);i.className="vjs-playlist-duration",i.setAttribute("datetime","PT0H0M"+e.duration+"S"),i.appendChild(document.createTextNode(l)),t.appendChild(i)}const l=document.createElement("span"),n=this.localize("Now Playing");l.className="vjs-playlist-now-playing-text",l.appendChild(document.createTextNode(n)),l.setAttribute("title",n),this.thumbnail.appendChild(l);const a=document.createElement("div");a.className="vjs-playlist-title-container",this.thumbnail.appendChild(a);const o=document.createElement("span"),r=this.localize("Up Next");o.className="vjs-up-next-text",o.appendChild(document.createTextNode(r)),o.setAttribute("title",r),a.appendChild(o);const d=document.createElement("cite"),c=e.name||this.localize("Untitled Video");if(d.className="vjs-playlist-name",d.appendChild(document.createTextNode(c)),d.setAttribute("title",c),a.appendChild(d),i){const t=document.createElement("div"),s=e.description||"";t.className="vjs-playlist-description",t.appendChild(document.createTextNode(s)),t.setAttribute("title",s),a.appendChild(t)}return t}}class p extends d{constructor(t,e){if(!t.playlist)throw new Error("videojs-playlist is required for the playlist component");super(t,e),this.items=[],e.horizontal?this.addClass("vjs-playlist-horizontal"):this.addClass("vjs-playlist-vertical"),e.supportsCssPointerEvents&&this.addClass("vjs-csspointerevents"),this.createPlaylist_(),s.default.browser.TOUCH_ENABLED||this.addClass("vjs-mouse"),this.on(t,["loadstart","playlistchange","playlistsorted"],(t=>{this.update()})),this.on(t,"adstart",(()=>{this.addClass("vjs-ad-playing")})),this.on(t,"adend",(()=>{this.removeClass("vjs-ad-playing")})),this.on("dispose",(()=>{this.empty_(),t.playlistMenu=null})),this.on(t,"dispose",(()=>{this.dispose()}))}createEl(){return i.createEl("div",{className:this.options_.className})}empty_(){this.items&&this.items.length&&(this.items.forEach((t=>t.dispose())),this.items.length=0)}createPlaylist_(){const t=this.player_.playlist()||[];let e=this.el_.querySelector(".vjs-playlist-item-list"),s=this.el_.querySelector(".vjs-playlist-ad-overlay");e||(e=document.createElement("ol"),e.className="vjs-playlist-item-list",this.el_.appendChild(e)),this.empty_();for(let s=0;s<t.length;s++){const i=new c(this.player_,{item:t[s]},this.options_);this.items.push(i),e.appendChild(i.el_)}s||(s=document.createElement("li"),s.className="vjs-playlist-ad-overlay"),e.appendChild(s);const l=this.player_.playlist.currentItem();if(this.items.length&&l>=0){a(this.items[l]);const t=this.items[l].$(".vjs-playlist-thumbnail");t&&i.addClass(t,"vjs-playlist-now-playing")}}update(){const t=this.player_.playlist();if(this.items.length!==t.length)return void this.createPlaylist_();for(let e=0;e<this.items.length;e++)if(this.items[e].item!==t[e])return void this.createPlaylist_();const e=this.player_.playlist.currentItem();for(let t=0;t<this.items.length;t++){const s=this.items[t];t===e?(a(s),document.activeElement!==s.el()&&i.addClass(s.thumbnail,"vjs-playlist-now-playing"),r(s)):t===e+1?(o(s),s.addClass("vjs-up-next")):(o(s),r(s))}}}const h=t=>{for(let e=0;e<t.childNodes.length;e++)if(i.isEl(t.childNodes[e]))return!0;return!1},u=function(t){const e=this;if(!e.playlist)throw new Error("videojs-playlist plugin is required by the videojs-playlist-ui plugin");if(i.isEl(t)&&(s.default.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!'),t={el:t}),t=s.default.mergeOptions(n,t),e.playlistMenu){const s=e.playlistMenu.el();if(s){const l=s.parentNode,n=s.nextSibling;e.playlistMenu.dispose(),i.emptyEl(s),n?l.insertBefore(s,n):l.appendChild(s),t.el=s}}i.isEl(t.el)||(t.el=(t=>{const e=document.querySelectorAll("."+t);let s;for(let t=0;t<e.length;t++)if(!h(e[t])){s=e[t];break}return s})(t.className)),e.playlistMenu=new p(e,t)};return s.default.registerComponent("PlaylistMenu",p),s.default.registerComponent("PlaylistMenuItem",c),l("playlistUi",u),u.VERSION="4.0.0",u}));

package.json

 {
   "name": "videojs-playlist-ui",
-  "version": "3.8.0",
+  "version": "4.0.0",
   "author": "Brightcove, Inc.",
@@ -23,4 +23,3 @@ "description": "A user interface for the videojs-playlist API",
     "postclean": "shx mkdir -p ./dist ./test/dist",
-    "docs": "npm-run-all docs:*",
-    "docs:toc": "doctoc README.md",
+    "docs": "doctoc README.md",
     "lint": "vjsstandard",
@@ -38,3 +37,3 @@ "server": "karma start scripts/karma.conf.js --singleRun=false --auto-watch",
     "posttest": "shx cat test/dist/coverage/text.txt",
-    "prepublishOnly": "npm run build && vjsverify"
+    "prepublishOnly": "npm run build && vjsverify --skip-es-check"
   },
@@ -51,3 +50,3 @@ "repository": {
     "conventional-changelog-cli": "^2.0.31",
-    "conventional-changelog-videojs": "^3.0.0",
+    "conventional-changelog-videojs": "^3.0.2",
     "doctoc": "^1.3.1",
@@ -63,3 +62,3 @@ "husky": "^1.3.1",
     "postcss-cli": "^6.1.3",
-    "rollup": "^0.67.4",
+    "rollup": "^2.61.1",
     "shx": "^0.3.2",
@@ -69,7 +68,7 @@ "sinon": "^6.1.5",
     "videojs-generate-postcss-config": "~2.0.1",
-    "videojs-generate-rollup-config": "^2.3.2",
-    "videojs-generator-verify": "^1.2.0",
+    "videojs-generate-rollup-config": "^7.0.0",
+    "videojs-generator-verify": "^4.0.1",
     "videojs-languages": "^2.0.0",
     "videojs-playlist": "^4.3.1",
-    "videojs-standard": "^8.0.4"
+    "videojs-standard": "^9.0.1"
   },
@@ -98,6 +97,2 @@ "main": "dist/videojs-playlist-ui.cjs.js",
   ],
-  "browserslist": [
-    "defaults",
-    "ie 11"
-  ],
   "lint-staged": {
@@ -104,0 +99,0 @@ "*.js": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

395829

increased by1.2%

Lines of code

8601

increased by0.88%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes