cloudinary-video-player 3.6.3-edge.5 → 3.6.3-edge.7

package/dist/playlist.js

@@ -1,6 +1,6 @@
 /*!
- * Cloudinary Video Player v3.6.3-edge.5
- * Built on 2025-12-18T16:42:03.707Z
+ * Cloudinary Video Player v3.6.3-edge.7
+ * Built on 2025-12-18T16:58:38.948Z
  * https://github.com/cloudinary/cloudinary-video-player
  */
 /*
@@ -13,317 +13,317 @@
  */
 (self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["playlist"],{
 
-/***/ "./plugins/playlist/playlist.js":
+/***/ "../node_modules/lodash/_baseTrim.js"
+/*!*******************************************!*\
+  !*** ../node_modules/lodash/_baseTrim.js ***!
+  \*******************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+eval("{var trimmedEndIndex = __webpack_require__(/*! ./_trimmedEndIndex */ \"../node_modules/lodash/_trimmedEndIndex.js\");\n\n/** Used to match leading whitespace. */\nvar reTrimStart = /^\\s+/;\n\n/**\n * The base implementation of `_.trim`.\n *\n * @private\n * @param {string} string The string to trim.\n * @returns {string} Returns the trimmed string.\n */\nfunction baseTrim(string) {\n  return string\n    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')\n    : string;\n}\n\nmodule.exports = baseTrim;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/_baseTrim.js?\n}");
+
+/***/ },
+
+/***/ "../node_modules/lodash/_trimmedEndIndex.js"
+/*!**************************************************!*\
+  !*** ../node_modules/lodash/_trimmedEndIndex.js ***!
+  \**************************************************/
+(module) {
+
+eval("{/** Used to match a single whitespace character. */\nvar reWhitespace = /\\s/;\n\n/**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace\n * character of `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the index of the last non-whitespace character.\n */\nfunction trimmedEndIndex(string) {\n  var index = string.length;\n\n  while (index-- && reWhitespace.test(string.charAt(index))) {}\n  return index;\n}\n\nmodule.exports = trimmedEndIndex;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/_trimmedEndIndex.js?\n}");
+
+/***/ },
+
+/***/ "../node_modules/lodash/isInteger.js"
+/*!*******************************************!*\
+  !*** ../node_modules/lodash/isInteger.js ***!
+  \*******************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+eval("{var toInteger = __webpack_require__(/*! ./toInteger */ \"../node_modules/lodash/toInteger.js\");\n\n/**\n * Checks if `value` is an integer.\n *\n * **Note:** This method is based on\n * [`Number.isInteger`](https://mdn.io/Number/isInteger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an integer, else `false`.\n * @example\n *\n * _.isInteger(3);\n * // => true\n *\n * _.isInteger(Number.MIN_VALUE);\n * // => false\n *\n * _.isInteger(Infinity);\n * // => false\n *\n * _.isInteger('3');\n * // => false\n */\nfunction isInteger(value) {\n  return typeof value == 'number' && value == toInteger(value);\n}\n\nmodule.exports = isInteger;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/isInteger.js?\n}");
+
+/***/ },
+
+/***/ "../node_modules/lodash/toFinite.js"
+/*!******************************************!*\
+  !*** ../node_modules/lodash/toFinite.js ***!
+  \******************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+eval("{var toNumber = __webpack_require__(/*! ./toNumber */ \"../node_modules/lodash/toNumber.js\");\n\n/** Used as references for various `Number` constants. */\nvar INFINITY = 1 / 0,\n    MAX_INTEGER = 1.7976931348623157e+308;\n\n/**\n * Converts `value` to a finite number.\n *\n * @static\n * @memberOf _\n * @since 4.12.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted number.\n * @example\n *\n * _.toFinite(3.2);\n * // => 3.2\n *\n * _.toFinite(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toFinite(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toFinite('3.2');\n * // => 3.2\n */\nfunction toFinite(value) {\n  if (!value) {\n    return value === 0 ? value : 0;\n  }\n  value = toNumber(value);\n  if (value === INFINITY || value === -INFINITY) {\n    var sign = (value < 0 ? -1 : 1);\n    return sign * MAX_INTEGER;\n  }\n  return value === value ? value : 0;\n}\n\nmodule.exports = toFinite;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/toFinite.js?\n}");
+
+/***/ },
+
+/***/ "../node_modules/lodash/toInteger.js"
+/*!*******************************************!*\
+  !*** ../node_modules/lodash/toInteger.js ***!
+  \*******************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+eval("{var toFinite = __webpack_require__(/*! ./toFinite */ \"../node_modules/lodash/toFinite.js\");\n\n/**\n * Converts `value` to an integer.\n *\n * **Note:** This method is loosely based on\n * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toInteger(3.2);\n * // => 3\n *\n * _.toInteger(Number.MIN_VALUE);\n * // => 0\n *\n * _.toInteger(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toInteger('3.2');\n * // => 3\n */\nfunction toInteger(value) {\n  var result = toFinite(value),\n      remainder = result % 1;\n\n  return result === result ? (remainder ? result - remainder : result) : 0;\n}\n\nmodule.exports = toInteger;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/toInteger.js?\n}");
+
+/***/ },
+
+/***/ "../node_modules/lodash/toNumber.js"
+/*!******************************************!*\
+  !*** ../node_modules/lodash/toNumber.js ***!
+  \******************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+eval("{var baseTrim = __webpack_require__(/*! ./_baseTrim */ \"../node_modules/lodash/_baseTrim.js\"),\n    isObject = __webpack_require__(/*! ./isObject */ \"../node_modules/lodash/isObject.js\"),\n    isSymbol = __webpack_require__(/*! ./isSymbol */ \"../node_modules/lodash/isSymbol.js\");\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n  if (typeof value == 'number') {\n    return value;\n  }\n  if (isSymbol(value)) {\n    return NAN;\n  }\n  if (isObject(value)) {\n    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n    value = isObject(other) ? (other + '') : other;\n  }\n  if (typeof value != 'string') {\n    return value === 0 ? value : +value;\n  }\n  value = baseTrim(value);\n  var isBinary = reIsBinary.test(value);\n  return (isBinary || reIsOctal.test(value))\n    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n    : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/toNumber.js?\n}");
+
+/***/ },
+
+/***/ "./plugins/playlist/playlist.js"
 /*!**************************************!*\
   !*** ./plugins/playlist/playlist.js ***!
   \**************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var utils_slicing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! utils/slicing */ \"./utils/slicing.js\");\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var plugins_cloudinary_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! plugins/cloudinary/common */ \"./plugins/cloudinary/common.js\");\n/* harmony import */ var _utils_api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/api */ \"./plugins/playlist/utils/api.js\");\n/* harmony import */ var _ui_playlist__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ui/playlist */ \"./plugins/playlist/ui/playlist.js\");\n/* harmony import */ var _ui_playlist_widget__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ui/playlist-widget */ \"./plugins/playlist/ui/playlist-widget.js\");\n/* harmony import */ var _ui_panel_playlist_panel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ui/panel/playlist-panel */ \"./plugins/playlist/ui/panel/playlist-panel.js\");\n\n\n\n\n\n\n\nconst LIST_BY_TAG_PARAMS = {\n  format: 'json',\n  resource_type: 'video',\n  type: 'list'\n};\nconst playlist = function (player) {\n  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n  const chainTarget = (0,utils_slicing__WEBPACK_IMPORTED_MODULE_0__.sliceProperties)(options, 'chainTarget').chainTarget;\n  let playlistInstance = null;\n  let playlistDisposer = null;\n  let playlistWidget = null;\n  const initPlaylistWidget = () => {\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.PLAYLIST_CREATED, () => {\n      var _options$playlistWidg;\n      if (playlistWidget) {\n        playlistWidget.dispose();\n      }\n      if (((_options$playlistWidg = options.playlistWidget) === null || _options$playlistWidg === void 0 ? void 0 : _options$playlistWidg.show) != false) {\n        if (player.fluid_) {\n          options.playlistWidget.fluid = true;\n        }\n        if (player.cloudinary.fontFace) {\n          options.playlistWidget.fontFace = player.cloudinary.fontFace;\n        }\n        playlistWidget = new _ui_playlist_widget__WEBPACK_IMPORTED_MODULE_5__[\"default\"](player, options.playlistWidget);\n      }\n    });\n  };\n  const disposePlaylist = () => {\n    player.removeClass('vjs-playlist');\n    playlistInstance = undefined;\n    player.playlist().dispose();\n    player.off('cldsourcechanged', playlistDisposer);\n  };\n  const addPlaylistDisposer = () => {\n    const disposer = () => {\n      if (playlistInstance && !playlistInstance.currentSource().contains(player.currentSource())) {\n        player.disposePlaylist();\n      }\n    };\n    player.on('cldsourcechanged', disposer);\n    return disposer;\n  };\n  const createPlaylist = (sources, options) => {\n    if (sources instanceof _ui_playlist__WEBPACK_IMPORTED_MODULE_4__[\"default\"]) {\n      playlistInstance = sources;\n      playlistInstance.resetState();\n      playlistInstance.currentIndex(playlistInstance.currentIndex());\n    } else {\n      playlistInstance = new _ui_playlist__WEBPACK_IMPORTED_MODULE_4__[\"default\"](player.cloudinary, sources, options);\n      playlistInstance.currentIndex(0);\n    }\n    initPlaylistWidget();\n    playlistDisposer = addPlaylistDisposer();\n    player.addClass('vjs-playlist');\n  };\n  player.cloudinary.sourcesByTag = async function (tag) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    const url = (0,plugins_cloudinary_common__WEBPACK_IMPORTED_MODULE_2__.getCloudinaryUrl)(tag, Object.assign({}, player.cloudinary.cloudinaryConfig(), LIST_BY_TAG_PARAMS));\n    const result = await fetch(url);\n    const json = await result.json();\n    const resources = (0,_utils_api__WEBPACK_IMPORTED_MODULE_3__.normalizeJsonResponse)(json.resources);\n    if (options.sorter) {\n      resources.sort(options.sorter);\n    }\n    const sources = resources.map(resource => {\n      let sourceParams = options.sourceParams || {};\n      if (typeof sourceParams === 'function') {\n        sourceParams = sourceParams(resource);\n      }\n      const info = resource.context && resource.context.custom || {};\n      const source = Object.assign({\n        info\n      }, sourceParams, {\n        publicId: resource.publicId\n      });\n      return player.cloudinary.buildSource(source);\n    });\n    return sources;\n  };\n  return function (sources) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    if (sources === undefined) {\n      return playlistInstance;\n    }\n    if (playlistInstance) {\n      disposePlaylist();\n    }\n    createPlaylist(sources, options);\n    player.trigger('playlistcreated');\n    return chainTarget;\n  };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (playlist);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/playlist.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var utils_slicing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! utils/slicing */ \"./utils/slicing.js\");\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var plugins_cloudinary_common__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! plugins/cloudinary/common */ \"./plugins/cloudinary/common.js\");\n/* harmony import */ var _utils_api__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/api */ \"./plugins/playlist/utils/api.js\");\n/* harmony import */ var _ui_playlist__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ui/playlist */ \"./plugins/playlist/ui/playlist.js\");\n/* harmony import */ var _ui_playlist_widget__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ui/playlist-widget */ \"./plugins/playlist/ui/playlist-widget.js\");\n/* harmony import */ var _ui_panel_playlist_panel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ui/panel/playlist-panel */ \"./plugins/playlist/ui/panel/playlist-panel.js\");\n\n\n\n\n\n\n\nconst LIST_BY_TAG_PARAMS = {\n  format: 'json',\n  resource_type: 'video',\n  type: 'list'\n};\nconst playlist = function (player) {\n  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n  const chainTarget = (0,utils_slicing__WEBPACK_IMPORTED_MODULE_0__.sliceProperties)(options, 'chainTarget').chainTarget;\n  let playlistInstance = null;\n  let playlistDisposer = null;\n  let playlistWidget = null;\n  const initPlaylistWidget = () => {\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.PLAYLIST_CREATED, () => {\n      if (playlistWidget) {\n        playlistWidget.dispose();\n      }\n      if (options.playlistWidget?.show != false) {\n        if (player.fluid_) {\n          options.playlistWidget.fluid = true;\n        }\n        if (player.cloudinary.fontFace) {\n          options.playlistWidget.fontFace = player.cloudinary.fontFace;\n        }\n        playlistWidget = new _ui_playlist_widget__WEBPACK_IMPORTED_MODULE_5__[\"default\"](player, options.playlistWidget);\n      }\n    });\n  };\n  const disposePlaylist = () => {\n    player.removeClass('vjs-playlist');\n    playlistInstance = undefined;\n    player.playlist().dispose();\n    player.off('cldsourcechanged', playlistDisposer);\n  };\n  const addPlaylistDisposer = () => {\n    const disposer = () => {\n      if (playlistInstance && !playlistInstance.currentSource().contains(player.currentSource())) {\n        player.disposePlaylist();\n      }\n    };\n    player.on('cldsourcechanged', disposer);\n    return disposer;\n  };\n  const createPlaylist = (sources, options) => {\n    if (sources instanceof _ui_playlist__WEBPACK_IMPORTED_MODULE_4__[\"default\"]) {\n      playlistInstance = sources;\n      playlistInstance.resetState();\n      playlistInstance.currentIndex(playlistInstance.currentIndex());\n    } else {\n      playlistInstance = new _ui_playlist__WEBPACK_IMPORTED_MODULE_4__[\"default\"](player.cloudinary, sources, options);\n      playlistInstance.currentIndex(0);\n    }\n    initPlaylistWidget();\n    playlistDisposer = addPlaylistDisposer();\n    player.addClass('vjs-playlist');\n  };\n  player.cloudinary.sourcesByTag = async function (tag) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    const url = (0,plugins_cloudinary_common__WEBPACK_IMPORTED_MODULE_2__.getCloudinaryUrl)(tag, Object.assign({}, player.cloudinary.cloudinaryConfig(), LIST_BY_TAG_PARAMS));\n    const result = await fetch(url);\n    const json = await result.json();\n    const resources = (0,_utils_api__WEBPACK_IMPORTED_MODULE_3__.normalizeJsonResponse)(json.resources);\n    if (options.sorter) {\n      resources.sort(options.sorter);\n    }\n    const sources = resources.map(resource => {\n      let sourceParams = options.sourceParams || {};\n      if (typeof sourceParams === 'function') {\n        sourceParams = sourceParams(resource);\n      }\n      const info = resource.context && resource.context.custom || {};\n      const source = Object.assign({\n        info\n      }, sourceParams, {\n        publicId: resource.publicId\n      });\n      return player.cloudinary.buildSource(source);\n    });\n    return sources;\n  };\n  return function (sources) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    if (sources === undefined) {\n      return playlistInstance;\n    }\n    if (playlistInstance) {\n      disposePlaylist();\n    }\n    createPlaylist(sources, options);\n    player.trigger('playlistcreated');\n    return chainTarget;\n  };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (playlist);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/playlist.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/components/playlist-button.js":
+/***/ "./plugins/playlist/ui/components/playlist-button.js"
 /*!***********************************************************!*\
   !*** ./plugins/playlist/ui/components/playlist-button.js ***!
   \***********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n\n\n// Get the ClickableComponent base class from Video.js\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\n\n// Create a common class for playlist buttons\nclass PlaylistButton extends ClickableComponent {\n  constructor(player, options) {\n    // It is important to invoke the superclass before anything else,\n    // to get all the features of components out of the box!\n    super(player, options);\n    const type = options.type;\n    if (!type && type !== 'previous' && type !== 'next') {\n      throw new Error('Type must be either \\'previous\\' or \\'next\\'');\n    }\n  }\n\n  // The `createEl` function of a component creates its DOM element.\n  createEl() {\n    const type = this.options_.type;\n    const typeCssClass = \"vjs-icon-\".concat(type, \"-item\");\n    return video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {\n      // Prefixing classes of elements within a player with \"vjs-\"\n      // is a convention used in Video.js.\n      className: \"vjs-control vjs-playlist-button vjs-button \".concat(typeCssClass),\n      ariaLabel: \"Playlist \".concat(type, \" item\")\n    });\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-button.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n\n\n// Get the ClickableComponent base class from Video.js\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\n\n// Create a common class for playlist buttons\nclass PlaylistButton extends ClickableComponent {\n  constructor(player, options) {\n    // It is important to invoke the superclass before anything else,\n    // to get all the features of components out of the box!\n    super(player, options);\n    const type = options.type;\n    if (!type && type !== 'previous' && type !== 'next') {\n      throw new Error('Type must be either \\'previous\\' or \\'next\\'');\n    }\n  }\n\n  // The `createEl` function of a component creates its DOM element.\n  createEl() {\n    const type = this.options_.type;\n    const typeCssClass = `vjs-icon-${type}-item`;\n    return video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {\n      // Prefixing classes of elements within a player with \"vjs-\"\n      // is a convention used in Video.js.\n      className: `vjs-control vjs-playlist-button vjs-button ${typeCssClass}`,\n      ariaLabel: `Playlist ${type} item`\n    });\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-button.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/components/playlist-buttons.js":
+/***/ "./plugins/playlist/ui/components/playlist-buttons.js"
 /*!************************************************************!*\
   !*** ./plugins/playlist/ui/components/playlist-buttons.js ***!
   \************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PlaylistNextButton: () => (/* reexport safe */ _playlist_next_button__WEBPACK_IMPORTED_MODULE_0__[\"default\"]),\n/* harmony export */   PlaylistPreviousButton: () => (/* reexport safe */ _playlist_previous_button__WEBPACK_IMPORTED_MODULE_1__[\"default\"])\n/* harmony export */ });\n/* harmony import */ var _playlist_next_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-next-button */ \"./plugins/playlist/ui/components/playlist-next-button.js\");\n/* harmony import */ var _playlist_previous_button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./playlist-previous-button */ \"./plugins/playlist/ui/components/playlist-previous-button.js\");\n/* harmony import */ var _playlist_buttons_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./playlist-buttons.scss */ \"./plugins/playlist/ui/components/playlist-buttons.scss\");\n\n\n\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-buttons.js?\n}");
+
+/***/ },
+
+/***/ "./plugins/playlist/ui/components/playlist-buttons.scss"
+/*!**************************************************************!*\
+  !*** ./plugins/playlist/ui/components/playlist-buttons.scss ***!
+  \**************************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PlaylistNextButton: () => (/* reexport safe */ _playlist_next_button__WEBPACK_IMPORTED_MODULE_0__[\"default\"]),\n/* harmony export */   PlaylistPreviousButton: () => (/* reexport safe */ _playlist_previous_button__WEBPACK_IMPORTED_MODULE_1__[\"default\"])\n/* harmony export */ });\n/* harmony import */ var _playlist_next_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-next-button */ \"./plugins/playlist/ui/components/playlist-next-button.js\");\n/* harmony import */ var _playlist_previous_button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./playlist-previous-button */ \"./plugins/playlist/ui/components/playlist-previous-button.js\");\n/* harmony import */ var _playlist_buttons_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./playlist-buttons.scss */ \"./plugins/playlist/ui/components/playlist-buttons.scss\");\n\n\n\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-buttons.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-buttons.scss?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/components/playlist-next-button.js":
+/***/ "./plugins/playlist/ui/components/playlist-next-button.js"
 /*!****************************************************************!*\
   !*** ./plugins/playlist/ui/components/playlist-next-button.js ***!
   \****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-button */ \"./plugins/playlist/ui/components/playlist-button.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass PlaylistNextButton extends _playlist_button__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player) {\n    super(player, {\n      type: 'next'\n    });\n  }\n  handleClick(event) {\n    event.stopPropagation();\n    super.handleClick(event);\n    this.player().cloudinary.playlist().playNext();\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_1___default().registerComponent('PlaylistNextButton', PlaylistNextButton);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistNextButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-next-button.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-button */ \"./plugins/playlist/ui/components/playlist-button.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass PlaylistNextButton extends _playlist_button__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player) {\n    super(player, {\n      type: 'next'\n    });\n  }\n  handleClick(event) {\n    event.stopPropagation();\n    super.handleClick(event);\n    this.player().cloudinary.playlist().playNext();\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_1___default().registerComponent('PlaylistNextButton', PlaylistNextButton);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistNextButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-next-button.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/components/playlist-previous-button.js":
+/***/ "./plugins/playlist/ui/components/playlist-previous-button.js"
 /*!********************************************************************!*\
   !*** ./plugins/playlist/ui/components/playlist-previous-button.js ***!
   \********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-button */ \"./plugins/playlist/ui/components/playlist-button.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass PlaylistPreviousButton extends _playlist_button__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player) {\n    super(player, {\n      type: 'previous'\n    });\n  }\n  handleClick(event) {\n    super.handleClick(event);\n    this.player().cloudinary.playlist().playPrevious();\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_1___default().registerComponent('PlaylistPreviousButton', PlaylistPreviousButton);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistPreviousButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-previous-button.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-button */ \"./plugins/playlist/ui/components/playlist-button.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass PlaylistPreviousButton extends _playlist_button__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player) {\n    super(player, {\n      type: 'previous'\n    });\n  }\n  handleClick(event) {\n    super.handleClick(event);\n    this.player().cloudinary.playlist().playPrevious();\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_1___default().registerComponent('PlaylistPreviousButton', PlaylistPreviousButton);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistPreviousButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-previous-button.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/components/upcoming-video-overlay.js":
+/***/ "./plugins/playlist/ui/components/upcoming-video-overlay.js"
 /*!******************************************************************!*\
   !*** ./plugins/playlist/ui/components/upcoming-video-overlay.js ***!
   \******************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _upcoming_video_overlay_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./upcoming-video-overlay.scss */ \"./plugins/playlist/ui/components/upcoming-video-overlay.scss\");\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n\n\n\n\n// support VJS5 & VJS6 at the same time\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nclass UpcomingVideoOverlay extends ClickableComponent {\n  static DISABLE_TRANSITION_CLASS = 'disable-transition';\n  static VJS_UPCOMING_VIDEO_SHOW = 'vjs-upcoming-video-show';\n  constructor(player) {\n    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      args[_key - 1] = arguments[_key];\n    }\n    super(player, ...args);\n    this._setEvents(player);\n  }\n  _setEvents(player) {\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.UP_COMING_VIDEO_SHOW, this._show);\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.UP_COMING_VIDEO_HIDE, this._hide);\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, this._onPlaylistItemChange);\n  }\n  _hide = () => {\n    this.removeClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);\n  };\n  _disableTransition(block) {\n    this.addClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);\n    block();\n    this.removeClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);\n  }\n  _onPlaylistItemChange = (_, event) => {\n    this._hide();\n    this._disableTransition(() => {\n      if (event.next) {\n        this.setItem(event.next);\n      }\n    });\n  };\n  _show = () => {\n    const ima = this.player().ima;\n    const adsManager = ima === 'object' && ima.getAdsManager();\n    if (adsManager) {\n      if (!adsManager.getCurrentAd() || adsManager.getCurrentAd().isLinear()) {\n        this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);\n      }\n    } else {\n      this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);\n    }\n  };\n  setTitle(source) {\n    const title = this.getChild('upcomingVideoOverlayContent').getChild('upcomingVideoOverlayBar').getChild('upcomingVideoOverlayTitle');\n    title.setContent(source.info().title || source.publicId());\n  }\n  setItem(source) {\n    this._source = source;\n    const maxWidth = parseInt(window.getComputedStyle(this.el(), null).getPropertyValue('max-width'), 10);\n    const maxHeight = Math.round(maxWidth * (9 / 16.0));\n    const transformation = {\n      crop: 'pad',\n      background: 'auto:predominant',\n      width: maxWidth,\n      height: maxHeight\n    };\n    const content = this.getChild('upcomingVideoOverlayContent');\n    this.setTitle(source);\n    content.el().style.backgroundImage = `url(\"${this._source.poster().url({\n      transformation\n    })}\")`;\n  }\n  handleClick() {\n    super.handleClick(event);\n    this.player().cloudinary.playlist().playNext();\n  }\n  createEl() {\n    return super.createEl('div', {\n      className: 'vjs-upcoming-video'\n    });\n  }\n}\nclass UpcomingVideoOverlayContent extends Component {\n  createEl() {\n    // Content wraps image and bar\n    return super.createEl('div', {\n      className: 'upcoming-video-overlay aspect-ratio-content'\n    });\n  }\n}\nclass UpcomingVideoOverlayTitle extends Component {\n  setContent(title) {\n    this._contentSpan.innerText = title;\n  }\n  createEl() {\n    const el = super.createEl('div', {\n      className: 'vjs-control vjs-upcoming-video-title'\n    });\n    const container = dom.createEl('div', {\n      className: 'vjs-upcoming-video-title-display',\n      innerHTML: '<span class=\"vjs-control-text\">Next up</span>Next up: '\n    });\n    this._contentSpan = dom.createEl('span', {\n      className: 'vjs-upcoming-video-title-display-label'\n    });\n    container.appendChild(this._contentSpan);\n    el.appendChild(container);\n    return el;\n  }\n}\nclass UpcomingVideoOverlayBar extends Component {\n  createEl() {\n    return super.createEl('div', {\n      className: 'vjs-upcoming-video-bar'\n    });\n  }\n}\nUpcomingVideoOverlay.prototype.options_ = {\n  children: ['upcomingVideoOverlayContent']\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlay', UpcomingVideoOverlay);\nUpcomingVideoOverlayContent.prototype.options_ = {\n  children: ['upcomingVideoOverlayBar']\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlayContent', UpcomingVideoOverlayContent);\nUpcomingVideoOverlayBar.prototype.options_ = {\n  children: ['upcomingVideoOverlayTitle', 'playlistNextButton']\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlayBar', UpcomingVideoOverlayBar);\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlayTitle', UpcomingVideoOverlayTitle);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UpcomingVideoOverlay);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/upcoming-video-overlay.js?\n}");
+
+/***/ },
+
+/***/ "./plugins/playlist/ui/components/upcoming-video-overlay.scss"
+/*!********************************************************************!*\
+  !*** ./plugins/playlist/ui/components/upcoming-video-overlay.scss ***!
+  \********************************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _upcoming_video_overlay_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./upcoming-video-overlay.scss */ \"./plugins/playlist/ui/components/upcoming-video-overlay.scss\");\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n// support VJS5 & VJS6 at the same time\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nclass UpcomingVideoOverlay extends ClickableComponent {\n  constructor(player) {\n    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      args[_key - 1] = arguments[_key];\n    }\n    super(player, ...args);\n    _defineProperty(this, \"_hide\", () => {\n      this.removeClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);\n    });\n    _defineProperty(this, \"_onPlaylistItemChange\", (_, event) => {\n      this._hide();\n      this._disableTransition(() => {\n        if (event.next) {\n          this.setItem(event.next);\n        }\n      });\n    });\n    _defineProperty(this, \"_show\", () => {\n      const ima = this.player().ima;\n      const adsManager = ima === 'object' && ima.getAdsManager();\n      if (adsManager) {\n        if (!adsManager.getCurrentAd() || adsManager.getCurrentAd().isLinear()) {\n          this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);\n        }\n      } else {\n        this.addClass(UpcomingVideoOverlay.VJS_UPCOMING_VIDEO_SHOW);\n      }\n    });\n    this._setEvents(player);\n  }\n  _setEvents(player) {\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.UP_COMING_VIDEO_SHOW, this._show);\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.UP_COMING_VIDEO_HIDE, this._hide);\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, this._onPlaylistItemChange);\n  }\n  _disableTransition(block) {\n    this.addClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);\n    block();\n    this.removeClass(UpcomingVideoOverlay.DISABLE_TRANSITION_CLASS);\n  }\n  setTitle(source) {\n    const title = this.getChild('upcomingVideoOverlayContent').getChild('upcomingVideoOverlayBar').getChild('upcomingVideoOverlayTitle');\n    title.setContent(source.info().title || source.publicId());\n  }\n  setItem(source) {\n    this._source = source;\n    const maxWidth = parseInt(window.getComputedStyle(this.el(), null).getPropertyValue('max-width'), 10);\n    const maxHeight = Math.round(maxWidth * (9 / 16.0));\n    const transformation = {\n      crop: 'pad',\n      background: 'auto:predominant',\n      width: maxWidth,\n      height: maxHeight\n    };\n    const content = this.getChild('upcomingVideoOverlayContent');\n    this.setTitle(source);\n    content.el().style.backgroundImage = \"url(\\\"\".concat(this._source.poster().url({\n      transformation\n    }), \"\\\")\");\n  }\n  handleClick() {\n    super.handleClick(event);\n    this.player().cloudinary.playlist().playNext();\n  }\n  createEl() {\n    return super.createEl('div', {\n      className: 'vjs-upcoming-video'\n    });\n  }\n}\n_defineProperty(UpcomingVideoOverlay, \"DISABLE_TRANSITION_CLASS\", 'disable-transition');\n_defineProperty(UpcomingVideoOverlay, \"VJS_UPCOMING_VIDEO_SHOW\", 'vjs-upcoming-video-show');\nclass UpcomingVideoOverlayContent extends Component {\n  createEl() {\n    // Content wraps image and bar\n    return super.createEl('div', {\n      className: 'upcoming-video-overlay aspect-ratio-content'\n    });\n  }\n}\nclass UpcomingVideoOverlayTitle extends Component {\n  setContent(title) {\n    this._contentSpan.innerText = title;\n  }\n  createEl() {\n    const el = super.createEl('div', {\n      className: 'vjs-control vjs-upcoming-video-title'\n    });\n    const container = dom.createEl('div', {\n      className: 'vjs-upcoming-video-title-display',\n      innerHTML: '<span class=\"vjs-control-text\">Next up</span>Next up: '\n    });\n    this._contentSpan = dom.createEl('span', {\n      className: 'vjs-upcoming-video-title-display-label'\n    });\n    container.appendChild(this._contentSpan);\n    el.appendChild(container);\n    return el;\n  }\n}\nclass UpcomingVideoOverlayBar extends Component {\n  createEl() {\n    return super.createEl('div', {\n      className: 'vjs-upcoming-video-bar'\n    });\n  }\n}\nUpcomingVideoOverlay.prototype.options_ = {\n  children: ['upcomingVideoOverlayContent']\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlay', UpcomingVideoOverlay);\nUpcomingVideoOverlayContent.prototype.options_ = {\n  children: ['upcomingVideoOverlayBar']\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlayContent', UpcomingVideoOverlayContent);\nUpcomingVideoOverlayBar.prototype.options_ = {\n  children: ['upcomingVideoOverlayTitle', 'playlistNextButton']\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlayBar', UpcomingVideoOverlayBar);\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('upcomingVideoOverlayTitle', UpcomingVideoOverlayTitle);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UpcomingVideoOverlay);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/upcoming-video-overlay.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/upcoming-video-overlay.scss?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/layout/playlist-layout-custom.js":
+/***/ "./plugins/playlist/ui/layout/playlist-layout-custom.js"
 /*!**************************************************************!*\
   !*** ./plugins/playlist/ui/layout/playlist-layout-custom.js ***!
   \**************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-layout */ \"./plugins/playlist/ui/layout/playlist-layout.js\");\n\nclass PlaylistLayoutCustom extends _playlist_layout__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  getCls() {\n    let cls = super.getCls();\n    cls.push('cld-plw-custom');\n    return cls;\n  }\n  createEl() {\n    const el = super.createEl();\n    this.options_.renderTo.appendChild(el);\n    return el;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayoutCustom);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout-custom.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-layout */ \"./plugins/playlist/ui/layout/playlist-layout.js\");\n\nclass PlaylistLayoutCustom extends _playlist_layout__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  getCls() {\n    let cls = super.getCls();\n    cls.push('cld-plw-custom');\n    return cls;\n  }\n  createEl() {\n    const el = super.createEl();\n    this.options_.renderTo.appendChild(el);\n    return el;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayoutCustom);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout-custom.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/layout/playlist-layout-horizontal.js":
+/***/ "./plugins/playlist/ui/layout/playlist-layout-horizontal.js"
 /*!******************************************************************!*\
   !*** ./plugins/playlist/ui/layout/playlist-layout-horizontal.js ***!
   \******************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-layout */ \"./plugins/playlist/ui/layout/playlist-layout.js\");\n\nclass PlaylistLayoutHorizontal extends _playlist_layout__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player, options) {\n    options.wrap = true;\n    super(player, options);\n  }\n  getCls() {\n    const cls = super.getCls();\n    cls.push('cld-plw-horizontal');\n    return cls;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayoutHorizontal);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout-horizontal.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-layout */ \"./plugins/playlist/ui/layout/playlist-layout.js\");\n\nclass PlaylistLayoutHorizontal extends _playlist_layout__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player, options) {\n    options.wrap = true;\n    super(player, options);\n  }\n  getCls() {\n    const cls = super.getCls();\n    cls.push('cld-plw-horizontal');\n    return cls;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayoutHorizontal);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout-horizontal.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/layout/playlist-layout-vertical.js":
+/***/ "./plugins/playlist/ui/layout/playlist-layout-vertical.js"
 /*!****************************************************************!*\
   !*** ./plugins/playlist/ui/layout/playlist-layout-vertical.js ***!
   \****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-layout */ \"./plugins/playlist/ui/layout/playlist-layout.js\");\n\nclass PlaylistLayoutVertical extends _playlist_layout__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player, options) {\n    options.wrap = true;\n    super(player, options);\n  }\n  getCls() {\n    const cls = super.getCls();\n    cls.push('cld-plw-vertical');\n    return cls;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayoutVertical);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout-vertical.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _playlist_layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./playlist-layout */ \"./plugins/playlist/ui/layout/playlist-layout.js\");\n\nclass PlaylistLayoutVertical extends _playlist_layout__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n  constructor(player, options) {\n    options.wrap = true;\n    super(player, options);\n  }\n  getCls() {\n    const cls = super.getCls();\n    cls.push('cld-plw-vertical');\n    return cls;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayoutVertical);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout-vertical.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/layout/playlist-layout.js":
+/***/ "./plugins/playlist/ui/layout/playlist-layout.js"
 /*!*******************************************************!*\
   !*** ./plugins/playlist/ui/layout/playlist-layout.js ***!
   \*******************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/dom */ \"./plugins/playlist/utils/dom.js\");\n/* harmony import */ var utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! utils/css-prefix */ \"./utils/css-prefix.js\");\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nconst OPTIONS_DEFAULT = {\n  wrap: false\n};\nclass PlaylistLayout extends Component {\n  constructor(player, options) {\n    const layoutOptions = _objectSpread(_objectSpread({}, OPTIONS_DEFAULT), options);\n    super(player, layoutOptions);\n    this.player_ = player;\n    const fluidHandler = (e, fluid) => {\n      this.options_.fluid = fluid;\n      this.removeCls();\n      this.setCls();\n    };\n    const wrapVideoWithLayout = () => {\n      const el = this.el();\n      this.videoWrap_ = dom.createEl('div', {\n        className: 'cld-plw-col-player'\n      });\n      this.contentEl_ = this.contentEl_ = dom.createEl('div', {\n        className: 'cld-plw-col-list'\n      });\n      (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.wrap)(this.player().el(), el);\n      el.appendChild(this.videoWrap_);\n      el.appendChild(this.contentEl_);\n      (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.wrap)(this.player().el(), this.videoWrap_);\n    };\n    if (layoutOptions.wrap) {\n      wrapVideoWithLayout();\n    }\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    this.addChild(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.PLAYLIST_PANEL, this.options_);\n    this.setCls();\n    this.dispose = () => {\n      this.removeLayout();\n      super.dispose();\n      player.off(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    };\n  }\n  getCls() {\n    let cls = ['cld-video-player', 'cld-plw-layout'];\n    cls.push((0,utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__.skinClassPrefix)(this.player()));\n    cls.push((0,utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__.playerClassPrefix)(this.player()));\n    if (this.options_.fluid) {\n      cls.push('cld-plw-layout-fluid');\n    }\n    return cls;\n  }\n  setCls() {\n    this.removeClass((0,utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__.skinClassPrefix)(this.player()));\n    this.getCls().forEach(cls => {\n      this.addClass(cls);\n    });\n  }\n  removeCls() {\n    this.getCls().forEach(cls => {\n      this.removeClass(cls);\n    });\n  }\n  update(optionToChange, options) {\n    this.options(options);\n    this.removeChild('PlaylistPanel');\n    this.addChild('PlaylistPanel', this.options_);\n    this.trigger('playlistlayoutupdate');\n  }\n  removeLayout() {\n    const parentElem = this.el().parentElement;\n    if (parentElem) {\n      parentElem.appendChild(this.player().el());\n    }\n  }\n  createEl() {\n    const el = super.createEl('div');\n\n    // Apply font styles on wrapper div.\n    el.style.fontFamily = this.player().el().style.fontFamily;\n    return el;\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('playlistLayout', PlaylistLayout);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayout);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/dom */ \"./plugins/playlist/utils/dom.js\");\n/* harmony import */ var utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! utils/css-prefix */ \"./utils/css-prefix.js\");\n\n\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nconst OPTIONS_DEFAULT = {\n  wrap: false\n};\nclass PlaylistLayout extends Component {\n  constructor(player, options) {\n    const layoutOptions = {\n      ...OPTIONS_DEFAULT,\n      ...options\n    };\n    super(player, layoutOptions);\n    this.player_ = player;\n    const fluidHandler = (e, fluid) => {\n      this.options_.fluid = fluid;\n      this.removeCls();\n      this.setCls();\n    };\n    const wrapVideoWithLayout = () => {\n      const el = this.el();\n      this.videoWrap_ = dom.createEl('div', {\n        className: 'cld-plw-col-player'\n      });\n      this.contentEl_ = this.contentEl_ = dom.createEl('div', {\n        className: 'cld-plw-col-list'\n      });\n      (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.wrap)(this.player().el(), el);\n      el.appendChild(this.videoWrap_);\n      el.appendChild(this.contentEl_);\n      (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.wrap)(this.player().el(), this.videoWrap_);\n    };\n    if (layoutOptions.wrap) {\n      wrapVideoWithLayout();\n    }\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    this.addChild(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.PLAYLIST_PANEL, this.options_);\n    this.setCls();\n    this.dispose = () => {\n      this.removeLayout();\n      super.dispose();\n      player.off(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    };\n  }\n  getCls() {\n    let cls = ['cld-video-player', 'cld-plw-layout'];\n    cls.push((0,utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__.skinClassPrefix)(this.player()));\n    cls.push((0,utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__.playerClassPrefix)(this.player()));\n    if (this.options_.fluid) {\n      cls.push('cld-plw-layout-fluid');\n    }\n    return cls;\n  }\n  setCls() {\n    this.removeClass((0,utils_css_prefix__WEBPACK_IMPORTED_MODULE_3__.skinClassPrefix)(this.player()));\n    this.getCls().forEach(cls => {\n      this.addClass(cls);\n    });\n  }\n  removeCls() {\n    this.getCls().forEach(cls => {\n      this.removeClass(cls);\n    });\n  }\n  update(optionToChange, options) {\n    this.options(options);\n    this.removeChild('PlaylistPanel');\n    this.addChild('PlaylistPanel', this.options_);\n    this.trigger('playlistlayoutupdate');\n  }\n  removeLayout() {\n    const parentElem = this.el().parentElement;\n    if (parentElem) {\n      parentElem.appendChild(this.player().el());\n    }\n  }\n  createEl() {\n    const el = super.createEl('div');\n\n    // Apply font styles on wrapper div.\n    el.style.fontFamily = this.player().el().style.fontFamily;\n    return el;\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('playlistLayout', PlaylistLayout);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistLayout);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/layout/playlist-layout.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/panel/playlist-panel-item.js":
+/***/ "./plugins/playlist/ui/panel/playlist-panel-item.js"
 /*!**********************************************************!*\
   !*** ./plugins/playlist/ui/panel/playlist-panel-item.js ***!
   \**********************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _thumbnail_thumbnail__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../thumbnail/thumbnail */ \"./plugins/playlist/ui/thumbnail/thumbnail.js\");\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst DEFAULT_OPTIONS = {\n  source: null,\n  next: false\n};\nclass PlaylistPanelItem extends _thumbnail_thumbnail__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\n  constructor(player, initOptions) {\n    const options = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(DEFAULT_OPTIONS, initOptions);\n    super(player, options);\n  }\n  handleClick(event) {\n    super.handleClick(event);\n    this.play();\n  }\n  play() {\n    const item = this.getItem();\n    const list = this.player().cloudinary.playlist().list();\n    const index = list.indexOf(item);\n    if (index === -1) {\n      throw new Error('Invalid playlist item...');\n    }\n    this.player().cloudinary.playlist().playAtIndex(index);\n  }\n  isCurrent() {\n    return this.options_.current;\n  }\n  getTitle() {\n    return super.getTitle();\n  }\n  getDuration() {\n    return super.getDuration();\n  }\n  createEl() {\n    const el = super.createEl();\n    el.classList.add('cld-plw-panel-item');\n    const info = dom.createEl('div', {\n      className: 'cld-plw-item-info-wrap'\n    });\n    const titleWrap = dom.createEl('div', {\n      className: 'cld-plw-item-title'\n    });\n    if (this.isCurrent()) {\n      el.classList.add('cld-plw-panel-item-active');\n      const currEl = dom.createEl('span', {\n        className: 'cld-plw-item-title-curr'\n      }, {}, 'Now Playing: ');\n      titleWrap.appendChild(currEl);\n    }\n    const title = dom.createEl('span', {\n      className: 'cld-plw-item-title'\n    }, {}, this.getTitle());\n    titleWrap.appendChild(title);\n    const duration = dom.createEl('div', {\n      className: 'cld-plw-item-duration'\n    }, {}, this.getDuration());\n    info.appendChild(titleWrap);\n    info.appendChild(duration);\n    if (el) {\n      el.appendChild(info);\n    }\n    el.appendChild(info);\n    return el;\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('playlistPanelItem', PlaylistPanelItem);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistPanelItem);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/panel/playlist-panel-item.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _thumbnail_thumbnail__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../thumbnail/thumbnail */ \"./plugins/playlist/ui/thumbnail/thumbnail.js\");\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst DEFAULT_OPTIONS = {\n  source: null,\n  next: false\n};\nclass PlaylistPanelItem extends _thumbnail_thumbnail__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\n  constructor(player, initOptions) {\n    const options = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(DEFAULT_OPTIONS, initOptions);\n    super(player, options);\n  }\n  handleClick(event) {\n    super.handleClick(event);\n    this.play();\n  }\n  play() {\n    const item = this.getItem();\n    const list = this.player().cloudinary.playlist().list();\n    const index = list.indexOf(item);\n    if (index === -1) {\n      throw new Error('Invalid playlist item...');\n    }\n    this.player().cloudinary.playlist().playAtIndex(index);\n  }\n  isCurrent() {\n    return this.options_.current;\n  }\n  getTitle() {\n    return super.getTitle();\n  }\n  getDuration() {\n    return super.getDuration();\n  }\n  createEl() {\n    const el = super.createEl();\n    el.classList.add('cld-plw-panel-item');\n    const info = dom.createEl('div', {\n      className: 'cld-plw-item-info-wrap'\n    });\n    const titleWrap = dom.createEl('div', {\n      className: 'cld-plw-item-title'\n    });\n    if (this.isCurrent()) {\n      el.classList.add('cld-plw-panel-item-active');\n      const currEl = dom.createEl('span', {\n        className: 'cld-plw-item-title-curr'\n      }, {}, 'Now Playing: ');\n      titleWrap.appendChild(currEl);\n    }\n    const title = dom.createEl('span', {\n      className: 'cld-plw-item-title'\n    }, {}, this.getTitle());\n    titleWrap.appendChild(title);\n    const duration = dom.createEl('div', {\n      className: 'cld-plw-item-duration'\n    }, {}, this.getDuration());\n    info.appendChild(titleWrap);\n    info.appendChild(duration);\n    if (el) {\n      el.appendChild(info);\n    }\n    el.appendChild(info);\n    return el;\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('playlistPanelItem', PlaylistPanelItem);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistPanelItem);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/panel/playlist-panel-item.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/panel/playlist-panel.js":
+/***/ "./plugins/playlist/ui/panel/playlist-panel.js"
 /*!*****************************************************!*\
   !*** ./plugins/playlist/ui/panel/playlist-panel.js ***!
   \*****************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _playlist_panel_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./playlist-panel-item */ \"./plugins/playlist/ui/panel/playlist-panel-item.js\");\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n\n\n\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nclass PlaylistPanel extends Component {\n  constructor(player) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    super(player, options);\n    const itemChangeHandler = () => {\n      this.render();\n    };\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, itemChangeHandler);\n    this.render();\n    this.dispose = () => {\n      super.dispose();\n      player.off(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, itemChangeHandler);\n    };\n  }\n  createEl() {\n    const el = super.createEl();\n    el.classList.add('cld-plw-panel');\n    return el;\n  }\n  removeAll() {\n    const children = this.children();\n    for (let i = children.length - 1; i >= 0; --i) {\n      this.removeChild(children[i]);\n    }\n  }\n  getItems() {\n    const playlist = this.player().cloudinary.playlist();\n    const repeat = playlist._repeat;\n    if (this.options_.showAll) {\n      return playlist.list();\n    }\n    const items = [];\n    const numOfItems = this.options_.total;\n    let index = playlist.currentIndex();\n    let source = playlist.list()[index];\n    items.push(source);\n    while (items.length < numOfItems) {\n      index = playlist.nextIndex(index);\n      if (index === -1) {\n        if (!repeat && items.length > 0) {\n          break;\n        }\n        index = 0;\n      }\n      source = playlist.list()[index];\n      items.push(source);\n    }\n    return items;\n  }\n  render() {\n    const items = this.getItems();\n    this.removeAll();\n    items.forEach((source, index) => {\n      const playlistItem = new _playlist_panel_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.player(), video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(this.options_, {\n        item: source,\n        next: index === 1,\n        current: index === 0\n      }));\n      this.addChild(playlistItem);\n    });\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('playlistPanel', PlaylistPanel);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistPanel);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/panel/playlist-panel.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _playlist_panel_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./playlist-panel-item */ \"./plugins/playlist/ui/panel/playlist-panel-item.js\");\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n\n\n\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nclass PlaylistPanel extends Component {\n  constructor(player) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    super(player, options);\n    const itemChangeHandler = () => {\n      this.render();\n    };\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, itemChangeHandler);\n    this.render();\n    this.dispose = () => {\n      super.dispose();\n      player.off(utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PLAYLIST_ITEM_CHANGED, itemChangeHandler);\n    };\n  }\n  createEl() {\n    const el = super.createEl();\n    el.classList.add('cld-plw-panel');\n    return el;\n  }\n  removeAll() {\n    const children = this.children();\n    for (let i = children.length - 1; i >= 0; --i) {\n      this.removeChild(children[i]);\n    }\n  }\n  getItems() {\n    const playlist = this.player().cloudinary.playlist();\n    const repeat = playlist._repeat;\n    if (this.options_.showAll) {\n      return playlist.list();\n    }\n    const items = [];\n    const numOfItems = this.options_.total;\n    let index = playlist.currentIndex();\n    let source = playlist.list()[index];\n    items.push(source);\n    while (items.length < numOfItems) {\n      index = playlist.nextIndex(index);\n      if (index === -1) {\n        if (!repeat && items.length > 0) {\n          break;\n        }\n        index = 0;\n      }\n      source = playlist.list()[index];\n      items.push(source);\n    }\n    return items;\n  }\n  render() {\n    const items = this.getItems();\n    this.removeAll();\n    items.forEach((source, index) => {\n      const playlistItem = new _playlist_panel_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.player(), video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(this.options_, {\n        item: source,\n        next: index === 1,\n        current: index === 0\n      }));\n      this.addChild(playlistItem);\n    });\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('playlistPanel', PlaylistPanel);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistPanel);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/panel/playlist-panel.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/playlist-widget.js":
+/***/ "./plugins/playlist/ui/playlist-widget.js"
 /*!************************************************!*\
   !*** ./plugins/playlist/ui/playlist-widget.js ***!
   \************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var _layout_playlist_layout_horizontal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./layout/playlist-layout-horizontal */ \"./plugins/playlist/ui/layout/playlist-layout-horizontal.js\");\n/* harmony import */ var _layout_playlist_layout_vertical__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./layout/playlist-layout-vertical */ \"./plugins/playlist/ui/layout/playlist-layout-vertical.js\");\n/* harmony import */ var _layout_playlist_layout_custom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layout/playlist-layout-custom */ \"./plugins/playlist/ui/layout/playlist-layout-custom.js\");\n/* harmony import */ var _playlist_const__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./playlist.const */ \"./plugins/playlist/ui/playlist.const.js\");\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\nconst modifyOptions = (player, opt) => {\n  const options = _objectSpread(_objectSpread({}, _playlist_const__WEBPACK_IMPORTED_MODULE_5__.PLAYLIST_DEFAULTS_OPTIONS), opt);\n  if (options.show && typeof options.selector === 'string') {\n    options.useDefaultLayout = false;\n    options.useCustomLayout = true;\n    options.renderTo = document.querySelector(options.selector);\n    options.showAll = true;\n    if (!options.renderTo.length === 0) {\n      throw new Error(\"Couldn't find element(s) by selector '\".concat(options.selector, \"' for playlist\"));\n    }\n  }\n  if (options.show && !options.selector) {\n    options.useDefaultLayout = true;\n    options.useCustomLayout = false;\n  }\n  options.direction = options.direction.toLowerCase() === 'horizontal' ? 'horizontal' : 'vertical';\n  options.skin = player.options_.skin;\n  return options;\n};\nclass PlaylistWidget {\n  constructor(player) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    options = modifyOptions(player, options);\n    this.options_ = options;\n    this.player_ = player;\n    this.render();\n    const fluidHandler = (e, fluid) => {\n      this.options_.fluid = fluid;\n    };\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    this.options = options => {\n      if (!options) {\n        return this.options_;\n      }\n      this.options_ = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(this.options_, options);\n      player.trigger('playlistwidgetoption', this.options_.playlistWidget);\n      return this.options_;\n    };\n    this.dispose = () => {\n      this.layout_.dispose();\n      player.off(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    };\n  }\n  render() {\n    if (this.options_.useDefaultLayout) {\n      if (this.options_.direction === 'horizontal') {\n        this.layout_ = new _layout_playlist_layout_horizontal__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.player_, this.options_);\n      } else {\n        this.layout_ = new _layout_playlist_layout_vertical__WEBPACK_IMPORTED_MODULE_3__[\"default\"](this.player_, this.options_);\n      }\n    }\n    if (this.options_.useCustomLayout) {\n      this.layout_ = new _layout_playlist_layout_custom__WEBPACK_IMPORTED_MODULE_4__[\"default\"](this.player_, this.options_);\n    }\n  }\n  getLayout() {\n    return this.layout_;\n  }\n  update(optionName, optionValue) {\n    this.options(optionValue);\n    if (optionName === 'direction') {\n      this.layout_.removeLayout();\n      this.layout_.dispose();\n      this.render();\n    } else {\n      this.layout_.update(optionName, this.options_);\n    }\n  }\n  setSkin() {\n    this.layout_.setCls();\n  }\n  total() {\n    let totalNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _playlist_const__WEBPACK_IMPORTED_MODULE_5__.PLAYLIST_DEFAULTS_OPTIONS.total;\n    const total = parseInt(totalNumber, 10);\n    if (total !== this.options_.total && typeof total === 'number' && total > 0) {\n      this.update('total', {\n        total: total\n      });\n    }\n    return this;\n  }\n  direction() {\n    let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _playlist_const__WEBPACK_IMPORTED_MODULE_5__.PLAYLIST_DEFAULTS_OPTIONS.direction;\n    if (direction === 'horizontal' || direction === 'vertical') {\n      this.update('direction', {\n        direction: direction\n      });\n    }\n    return this;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistWidget);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist-widget.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var utils_consts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var _layout_playlist_layout_horizontal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./layout/playlist-layout-horizontal */ \"./plugins/playlist/ui/layout/playlist-layout-horizontal.js\");\n/* harmony import */ var _layout_playlist_layout_vertical__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./layout/playlist-layout-vertical */ \"./plugins/playlist/ui/layout/playlist-layout-vertical.js\");\n/* harmony import */ var _layout_playlist_layout_custom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./layout/playlist-layout-custom */ \"./plugins/playlist/ui/layout/playlist-layout-custom.js\");\n/* harmony import */ var _playlist_const__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./playlist.const */ \"./plugins/playlist/ui/playlist.const.js\");\n\n\n\n\n\n\nconst modifyOptions = (player, opt) => {\n  const options = {\n    ..._playlist_const__WEBPACK_IMPORTED_MODULE_5__.PLAYLIST_DEFAULTS_OPTIONS,\n    ...opt\n  };\n  if (options.show && typeof options.selector === 'string') {\n    options.useDefaultLayout = false;\n    options.useCustomLayout = true;\n    options.renderTo = document.querySelector(options.selector);\n    options.showAll = true;\n    if (!options.renderTo.length === 0) {\n      throw new Error(`Couldn't find element(s) by selector '${options.selector}' for playlist`);\n    }\n  }\n  if (options.show && !options.selector) {\n    options.useDefaultLayout = true;\n    options.useCustomLayout = false;\n  }\n  options.direction = options.direction.toLowerCase() === 'horizontal' ? 'horizontal' : 'vertical';\n  options.skin = player.options_.skin;\n  return options;\n};\nclass PlaylistWidget {\n  constructor(player) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    options = modifyOptions(player, options);\n    this.options_ = options;\n    this.player_ = player;\n    this.render();\n    const fluidHandler = (e, fluid) => {\n      this.options_.fluid = fluid;\n    };\n    player.on(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    this.options = options => {\n      if (!options) {\n        return this.options_;\n      }\n      this.options_ = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(this.options_, options);\n      player.trigger('playlistwidgetoption', this.options_.playlistWidget);\n      return this.options_;\n    };\n    this.dispose = () => {\n      this.layout_.dispose();\n      player.off(utils_consts__WEBPACK_IMPORTED_MODULE_1__.PLAYER_EVENT.FLUID, fluidHandler);\n    };\n  }\n  render() {\n    if (this.options_.useDefaultLayout) {\n      if (this.options_.direction === 'horizontal') {\n        this.layout_ = new _layout_playlist_layout_horizontal__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.player_, this.options_);\n      } else {\n        this.layout_ = new _layout_playlist_layout_vertical__WEBPACK_IMPORTED_MODULE_3__[\"default\"](this.player_, this.options_);\n      }\n    }\n    if (this.options_.useCustomLayout) {\n      this.layout_ = new _layout_playlist_layout_custom__WEBPACK_IMPORTED_MODULE_4__[\"default\"](this.player_, this.options_);\n    }\n  }\n  getLayout() {\n    return this.layout_;\n  }\n  update(optionName, optionValue) {\n    this.options(optionValue);\n    if (optionName === 'direction') {\n      this.layout_.removeLayout();\n      this.layout_.dispose();\n      this.render();\n    } else {\n      this.layout_.update(optionName, this.options_);\n    }\n  }\n  setSkin() {\n    this.layout_.setCls();\n  }\n  total() {\n    let totalNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _playlist_const__WEBPACK_IMPORTED_MODULE_5__.PLAYLIST_DEFAULTS_OPTIONS.total;\n    const total = parseInt(totalNumber, 10);\n    if (total !== this.options_.total && typeof total === 'number' && total > 0) {\n      this.update('total', {\n        total: total\n      });\n    }\n    return this;\n  }\n  direction() {\n    let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _playlist_const__WEBPACK_IMPORTED_MODULE_5__.PLAYLIST_DEFAULTS_OPTIONS.direction;\n    if (direction === 'horizontal' || direction === 'vertical') {\n      this.update('direction', {\n        direction: direction\n      });\n    }\n    return this;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PlaylistWidget);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist-widget.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/playlist.const.js":
+/***/ "./plugins/playlist/ui/playlist.const.js"
 /*!***********************************************!*\
   !*** ./plugins/playlist/ui/playlist.const.js ***!
   \***********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   DEFAULT_AUTO_ADVANCE: () => (/* binding */ DEFAULT_AUTO_ADVANCE),\n/* harmony export */   DEFAULT_PRESENT_UPCOMING: () => (/* binding */ DEFAULT_PRESENT_UPCOMING),\n/* harmony export */   PLAYLIST_DEFAULTS_OPTIONS: () => (/* binding */ PLAYLIST_DEFAULTS_OPTIONS),\n/* harmony export */   UPCOMING_VIDEO_TRANSITION: () => (/* binding */ UPCOMING_VIDEO_TRANSITION)\n/* harmony export */ });\nconst DEFAULT_AUTO_ADVANCE = 0;\nconst DEFAULT_PRESENT_UPCOMING = 10;\nconst UPCOMING_VIDEO_TRANSITION = 1;\nconst PLAYLIST_DEFAULTS_OPTIONS = {\n  fluid: false,\n  show: true,\n  direction: 'vertical',\n  total: 4,\n  selector: false,\n  renderTo: []\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist.const.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   DEFAULT_AUTO_ADVANCE: () => (/* binding */ DEFAULT_AUTO_ADVANCE),\n/* harmony export */   DEFAULT_PRESENT_UPCOMING: () => (/* binding */ DEFAULT_PRESENT_UPCOMING),\n/* harmony export */   PLAYLIST_DEFAULTS_OPTIONS: () => (/* binding */ PLAYLIST_DEFAULTS_OPTIONS),\n/* harmony export */   UPCOMING_VIDEO_TRANSITION: () => (/* binding */ UPCOMING_VIDEO_TRANSITION)\n/* harmony export */ });\nconst DEFAULT_AUTO_ADVANCE = 0;\nconst DEFAULT_PRESENT_UPCOMING = 10;\nconst UPCOMING_VIDEO_TRANSITION = 1;\nconst PLAYLIST_DEFAULTS_OPTIONS = {\n  fluid: false,\n  show: true,\n  direction: 'vertical',\n  total: 4,\n  selector: false,\n  renderTo: []\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist.const.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/playlist.js":
+/***/ "./plugins/playlist/ui/playlist.js"
 /*!*****************************************!*\
   !*** ./plugins/playlist/ui/playlist.js ***!
   \*****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var plugins_cloudinary_models_video_source_video_source__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plugins/cloudinary/models/video-source/video-source */ \"./plugins/cloudinary/models/video-source/video-source.js\");\n/* harmony import */ var lodash_isInteger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/isInteger */ \"../node_modules/lodash/isInteger.js\");\n/* harmony import */ var lodash_isInteger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_isInteger__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _components_upcoming_video_overlay__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/upcoming-video-overlay */ \"./plugins/playlist/ui/components/upcoming-video-overlay.js\");\n/* harmony import */ var _components_playlist_buttons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/playlist-buttons */ \"./plugins/playlist/ui/components/playlist-buttons.js\");\n/* harmony import */ var _playlist_const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./playlist.const */ \"./plugins/playlist/ui/playlist.const.js\");\n/* harmony import */ var _playlist_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./playlist.scss */ \"./plugins/playlist/ui/playlist.scss\");\n\n\n\n\n\n\nclass Playlist {\n  constructor(context) {\n    let sources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n    let {\n      repeat = false,\n      autoAdvance = false,\n      presentUpcoming = false\n    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n    this._context = context;\n    this._sources = [];\n    this._defaultRecResolverCache = {};\n    this._currentIndex = null;\n    this._recommendationsHandler = null;\n    this._autoAdvance = null;\n    this._presentUpcoming = null;\n    this.addUiComponents();\n    this.resetState = () => {\n      this.repeat(repeat);\n      this.autoAdvance(autoAdvance);\n      this.presentUpcoming(presentUpcoming);\n    };\n    sources.forEach(source => this.enqueue(source));\n    this.resetState();\n  }\n  list() {\n    return this._sources;\n  }\n  player() {\n    return this._context.player;\n  }\n  addUiComponents() {\n    const controlBar = this.player().getChild('ControlBar');\n    const children = controlBar.children();\n    controlBar.addChild('playlistPreviousButton', {}, children.findIndex(c => c.name_ === 'PlayToggle'));\n    controlBar.addChild('playlistNextButton', {}, children.findIndex(c => c.name_ === 'PlayToggle') + 1);\n    this.player().addChild('upcomingVideoOverlay');\n  }\n  presentUpcoming(delay) {\n    this._presentUpcoming = this._presentUpcoming || {};\n    if (delay === undefined) {\n      return this._presentUpcoming.delay;\n    }\n    if (delay === true) {\n      delay = _playlist_const__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_PRESENT_UPCOMING;\n    } else if (delay === false) {\n      delay = false;\n    } else if (!lodash_isInteger__WEBPACK_IMPORTED_MODULE_1___default()(delay) || delay < 0) {\n      throw new Error('presentUpcoming \\'delay\\' must be either a boolean or a positive integer.');\n    }\n    this._presentUpcoming.delay = delay;\n    this._setupPresentUpcoming();\n    return this._presentUpcoming.delay;\n  }\n  autoAdvance(delay) {\n    this._autoAdvance = this._autoAdvance || {};\n    if (delay === undefined) {\n      return this._autoAdvance.delay;\n    }\n    if (delay === true) {\n      delay = _playlist_const__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_AUTO_ADVANCE;\n    } else if (delay === false) {\n      delay = false;\n    } else if (!lodash_isInteger__WEBPACK_IMPORTED_MODULE_1___default()(delay) || delay < 0) {\n      throw new Error('Auto advance \\'delay\\' must be either a boolean or a positive integer.');\n    }\n    this._autoAdvance.delay = delay;\n    this._setupAutoAdvance();\n    return this._autoAdvance.delay;\n  }\n  _setupAutoAdvance() {\n    this._resetAutoAdvance();\n    const delay = this._autoAdvance.delay;\n    if (delay === false) {\n      return;\n    }\n    const trigger = () => {\n      if (this.player().ended()) {\n        this._autoAdvance.timeout = setTimeout(() => {\n          this.playNext();\n        }, delay * 1000);\n      }\n    };\n    this._autoAdvance = {\n      delay,\n      trigger\n    };\n    this._context.on('ended', this._autoAdvance.trigger);\n  }\n  dispose() {\n    this._resetAutoAdvance();\n    this._resetPresentUpcoming();\n    this._resetRecommendations();\n  }\n  _resetPresentUpcoming() {\n    this.player().trigger('upcomingvideohide');\n    if (!this._presentUpcoming) {\n      this._presentUpcoming = {};\n    }\n    if (this._presentUpcoming.trigger) {\n      this._context.off('timeupdate', this._presentUpcoming.trigger);\n    }\n    this._presentUpcoming.trigger = null;\n    this._presentUpcoming.showTriggered = false;\n  }\n  _setupPresentUpcoming() {\n    this._resetPresentUpcoming();\n    const delay = this._presentUpcoming.delay;\n    if (delay === false) {\n      return;\n    }\n    this._presentUpcoming.trigger = () => {\n      const currentTime = this.player().currentTime();\n      const duration = this.player().duration();\n      const remainingTime = duration - currentTime;\n      if (remainingTime < _playlist_const__WEBPACK_IMPORTED_MODULE_4__.UPCOMING_VIDEO_TRANSITION + 0.5) {\n        if (this._presentUpcoming.showTriggered) {\n          this.player().trigger('upcomingvideohide');\n          this._presentUpcoming.showTriggered = false;\n        }\n      } else if (remainingTime <= this._presentUpcoming.delay && !this._presentUpcoming.showTriggered && !this.player().loop()) {\n        this.player().trigger('upcomingvideoshow');\n        this._presentUpcoming.showTriggered = true;\n      } else if (this._presentUpcoming.showTriggered && (remainingTime > this._presentUpcoming.delay || this.player().loop())) {\n        this.player().trigger('upcomingvideohide');\n        this._presentUpcoming.showTriggered = false;\n      }\n    };\n    this._context.on('timeupdate', this._presentUpcoming.trigger);\n  }\n  _resetAutoAdvance() {\n    if (!this._autoAdvance) {\n      this._autoAdvance = {};\n    }\n    if (this._autoAdvance.timeout) {\n      clearTimeout(this._autoAdvance.timeout);\n    }\n    if (this._autoAdvance.trigger) {\n      this._context.off('ended', this._autoAdvance.trigger);\n    }\n    this._autoAdvance.timeout = null;\n    this._autoAdvance.trigger = null;\n  }\n  _resetRecommendations() {\n    if (this._recommendationsHandler) {\n      this._context.off('ended', this._recommendationsHandler);\n    }\n  }\n  _refreshRecommendations() {\n    this._resetRecommendations();\n    this._recommendationsHandler = () => {\n      if (this.autoAdvance() === false && this._context.autoShowRecommendations()) {\n        this.player().trigger('recommendationsshow');\n      }\n    };\n    this._context.on('ended', this._recommendationsHandler);\n  }\n  _refreshTextTracks() {\n    this.player().trigger('refreshTextTracks', this.currentSource().textTracks());\n  }\n  _recommendationItemBuilder(source) {\n    const defaultResolver = this._defaultRecResolverCache[source.objectId];\n    if (source.recommendations() && (!defaultResolver || source.recommendations() !== defaultResolver)) {\n      return;\n    }\n    return source => ({\n      source,\n      action: () => this.playItem(source)\n    });\n  }\n  currentIndex(index) {\n    if (index === undefined) {\n      return this._currentIndex;\n    }\n    if (index >= this.length() || index < 0) {\n      throw new Error('Invalid playlist index.');\n    }\n    this._currentIndex = index;\n    const current = this.currentSource();\n    const itemBuilder = this._recommendationItemBuilder(current);\n    if (!current.recommendations()) {\n      current.recommendations(this._defaultRecommendationsResolver(current));\n    }\n\n    // Extract source options for analytics\n    const sourceOptions = current.getInitOptions ? current.getInitOptions() : {};\n    this._context.source(current, {\n      ...sourceOptions,\n      recommendationOptions: {\n        disableAutoShow: true,\n        itemBuilder\n      }\n    });\n    const eventData = {\n      playlist: this,\n      current,\n      next: this.next()\n    };\n    this.player().trigger('playlistitemchanged', eventData);\n    this._refreshRecommendations();\n    this._refreshTextTracks();\n    return current;\n  }\n  _defaultRecommendationsResolver(source) {\n    const defaultResolver = this._defaultRecResolverCache[source.objectId];\n    if (defaultResolver) {\n      return defaultResolver;\n    }\n    this._defaultRecResolverCache[source.objectId] = () => {\n      let index = this.list().indexOf(source);\n      const items = [];\n      const numOfItems = Math.min(4, this.length() - 1);\n      while (items.length < numOfItems) {\n        index = this.nextIndex(index);\n        if (index === -1) {\n          break;\n        }\n        const source = this.list()[index];\n        items.push(source);\n      }\n      return items;\n    };\n    return this._defaultRecResolverCache[source.objectId];\n  }\n  buildSource(source) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    return this._context.buildSource(source, options);\n  }\n  enqueue(source) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    const src = source instanceof plugins_cloudinary_models_video_source_video_source__WEBPACK_IMPORTED_MODULE_0__[\"default\"] ? source : this.buildSource(source, options);\n    this._sources.push(src);\n    return src;\n  }\n  playItem(item) {\n    let index = this.list().indexOf(item);\n    if (index === -1) {\n      throw new Error('Invalid playlist item.');\n    }\n    this.playAtIndex(index);\n  }\n  playAtIndex(index) {\n    this.currentIndex(index);\n    this.player().play();\n    return this.currentSource();\n  }\n  currentSource() {\n    return this.list()[this.currentIndex()];\n  }\n  removeAt(index) {\n    if (index >= this.length() || index < 0) {\n      throw new Error('Invalid playlist index.');\n    }\n    this._sources.splice(index, 1);\n    return this;\n  }\n  repeat(repeat) {\n    if (repeat === undefined) {\n      return this._repeat;\n    }\n    this._repeat = !!repeat;\n    return this._repeat;\n  }\n  first() {\n    return this.list()[0];\n  }\n  last() {\n    return this.list()[this.length() - 1];\n  }\n  next() {\n    const nextIndex = this.nextIndex();\n    if (nextIndex === -1) {\n      return null;\n    }\n    return this.list()[nextIndex];\n  }\n  nextIndex(index) {\n    index = index !== undefined ? index : this.currentIndex();\n    if (index >= this.length() || index < 0) {\n      throw new Error('Invalid playlist index.');\n    }\n    const isLast = index === this.length() - 1;\n    let nextIndex = index + 1;\n    if (isLast) {\n      if (this.repeat()) {\n        nextIndex = 0;\n      } else {\n        return -1;\n      }\n    }\n    return nextIndex;\n  }\n  previousIndex() {\n    if (this.isFirst()) {\n      return -1;\n    }\n    return this.currentIndex() - 1;\n  }\n  playFirst() {\n    return this.playAtIndex(0);\n  }\n  playLast() {\n    const lastIndex = this.list().length - 1;\n    return this.playAtIndex(lastIndex);\n  }\n  isLast() {\n    return this.currentIndex() >= this.length() - 1;\n  }\n  isFirst() {\n    return this.currentIndex() === 0;\n  }\n  length() {\n    return this.list().length;\n  }\n  playNext() {\n    let nextIndex = this.nextIndex();\n    if (nextIndex === -1) {\n      return null;\n    }\n    return this.playAtIndex(nextIndex);\n  }\n  playPrevious() {\n    let previousIndex = this.previousIndex();\n    if (previousIndex === -1) {\n      return null;\n    }\n    return this.playAtIndex(previousIndex);\n  }\n  playlistByTag = (() => {\n    var _this = this;\n    return function (tag) {\n      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      return _this.player().sourcesByTag(tag, options).then(sources => _this.player().playlist(sources, options));\n    };\n  })();\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Playlist);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist.js?\n}");
+
+/***/ },
+
+/***/ "./plugins/playlist/ui/playlist.scss"
+/*!*******************************************!*\
+  !*** ./plugins/playlist/ui/playlist.scss ***!
+  \*******************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var plugins_cloudinary_models_video_source_video_source__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plugins/cloudinary/models/video-source/video-source */ \"./plugins/cloudinary/models/video-source/video-source.js\");\n/* harmony import */ var lodash_isInteger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/isInteger */ \"../node_modules/lodash/isInteger.js\");\n/* harmony import */ var lodash_isInteger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_isInteger__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _components_upcoming_video_overlay__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/upcoming-video-overlay */ \"./plugins/playlist/ui/components/upcoming-video-overlay.js\");\n/* harmony import */ var _components_playlist_buttons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/playlist-buttons */ \"./plugins/playlist/ui/components/playlist-buttons.js\");\n/* harmony import */ var _playlist_const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./playlist.const */ \"./plugins/playlist/ui/playlist.const.js\");\n/* harmony import */ var _playlist_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./playlist.scss */ \"./plugins/playlist/ui/playlist.scss\");\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\nclass Playlist {\n  constructor(context) {\n    var _this = this;\n    let _sources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n    let {\n      repeat = false,\n      autoAdvance = false,\n      presentUpcoming = false\n    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n    _defineProperty(this, \"playlistByTag\", function (tag) {\n      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      return _this.player().sourcesByTag(tag, options).then(sources => _this.player().playlist(sources, options));\n    });\n    this._context = context;\n    this._sources = [];\n    this._defaultRecResolverCache = {};\n    this._currentIndex = null;\n    this._recommendationsHandler = null;\n    this._autoAdvance = null;\n    this._presentUpcoming = null;\n    this.addUiComponents();\n    this.resetState = () => {\n      this.repeat(repeat);\n      this.autoAdvance(autoAdvance);\n      this.presentUpcoming(presentUpcoming);\n    };\n    _sources.forEach(source => this.enqueue(source));\n    this.resetState();\n  }\n  list() {\n    return this._sources;\n  }\n  player() {\n    return this._context.player;\n  }\n  addUiComponents() {\n    const controlBar = this.player().getChild('ControlBar');\n    const children = controlBar.children();\n    controlBar.addChild('playlistPreviousButton', {}, children.findIndex(c => c.name_ === 'PlayToggle'));\n    controlBar.addChild('playlistNextButton', {}, children.findIndex(c => c.name_ === 'PlayToggle') + 1);\n    this.player().addChild('upcomingVideoOverlay');\n  }\n  presentUpcoming(delay) {\n    this._presentUpcoming = this._presentUpcoming || {};\n    if (delay === undefined) {\n      return this._presentUpcoming.delay;\n    }\n    if (delay === true) {\n      delay = _playlist_const__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_PRESENT_UPCOMING;\n    } else if (delay === false) {\n      delay = false;\n    } else if (!lodash_isInteger__WEBPACK_IMPORTED_MODULE_1___default()(delay) || delay < 0) {\n      throw new Error('presentUpcoming \\'delay\\' must be either a boolean or a positive integer.');\n    }\n    this._presentUpcoming.delay = delay;\n    this._setupPresentUpcoming();\n    return this._presentUpcoming.delay;\n  }\n  autoAdvance(delay) {\n    this._autoAdvance = this._autoAdvance || {};\n    if (delay === undefined) {\n      return this._autoAdvance.delay;\n    }\n    if (delay === true) {\n      delay = _playlist_const__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_AUTO_ADVANCE;\n    } else if (delay === false) {\n      delay = false;\n    } else if (!lodash_isInteger__WEBPACK_IMPORTED_MODULE_1___default()(delay) || delay < 0) {\n      throw new Error('Auto advance \\'delay\\' must be either a boolean or a positive integer.');\n    }\n    this._autoAdvance.delay = delay;\n    this._setupAutoAdvance();\n    return this._autoAdvance.delay;\n  }\n  _setupAutoAdvance() {\n    this._resetAutoAdvance();\n    const delay = this._autoAdvance.delay;\n    if (delay === false) {\n      return;\n    }\n    const trigger = () => {\n      if (this.player().ended()) {\n        this._autoAdvance.timeout = setTimeout(() => {\n          this.playNext();\n        }, delay * 1000);\n      }\n    };\n    this._autoAdvance = {\n      delay,\n      trigger\n    };\n    this._context.on('ended', this._autoAdvance.trigger);\n  }\n  dispose() {\n    this._resetAutoAdvance();\n    this._resetPresentUpcoming();\n    this._resetRecommendations();\n  }\n  _resetPresentUpcoming() {\n    this.player().trigger('upcomingvideohide');\n    if (!this._presentUpcoming) {\n      this._presentUpcoming = {};\n    }\n    if (this._presentUpcoming.trigger) {\n      this._context.off('timeupdate', this._presentUpcoming.trigger);\n    }\n    this._presentUpcoming.trigger = null;\n    this._presentUpcoming.showTriggered = false;\n  }\n  _setupPresentUpcoming() {\n    this._resetPresentUpcoming();\n    const delay = this._presentUpcoming.delay;\n    if (delay === false) {\n      return;\n    }\n    this._presentUpcoming.trigger = () => {\n      const currentTime = this.player().currentTime();\n      const duration = this.player().duration();\n      const remainingTime = duration - currentTime;\n      if (remainingTime < _playlist_const__WEBPACK_IMPORTED_MODULE_4__.UPCOMING_VIDEO_TRANSITION + 0.5) {\n        if (this._presentUpcoming.showTriggered) {\n          this.player().trigger('upcomingvideohide');\n          this._presentUpcoming.showTriggered = false;\n        }\n      } else if (remainingTime <= this._presentUpcoming.delay && !this._presentUpcoming.showTriggered && !this.player().loop()) {\n        this.player().trigger('upcomingvideoshow');\n        this._presentUpcoming.showTriggered = true;\n      } else if (this._presentUpcoming.showTriggered && (remainingTime > this._presentUpcoming.delay || this.player().loop())) {\n        this.player().trigger('upcomingvideohide');\n        this._presentUpcoming.showTriggered = false;\n      }\n    };\n    this._context.on('timeupdate', this._presentUpcoming.trigger);\n  }\n  _resetAutoAdvance() {\n    if (!this._autoAdvance) {\n      this._autoAdvance = {};\n    }\n    if (this._autoAdvance.timeout) {\n      clearTimeout(this._autoAdvance.timeout);\n    }\n    if (this._autoAdvance.trigger) {\n      this._context.off('ended', this._autoAdvance.trigger);\n    }\n    this._autoAdvance.timeout = null;\n    this._autoAdvance.trigger = null;\n  }\n  _resetRecommendations() {\n    if (this._recommendationsHandler) {\n      this._context.off('ended', this._recommendationsHandler);\n    }\n  }\n  _refreshRecommendations() {\n    this._resetRecommendations();\n    this._recommendationsHandler = () => {\n      if (this.autoAdvance() === false && this._context.autoShowRecommendations()) {\n        this.player().trigger('recommendationsshow');\n      }\n    };\n    this._context.on('ended', this._recommendationsHandler);\n  }\n  _refreshTextTracks() {\n    this.player().trigger('refreshTextTracks', this.currentSource().textTracks());\n  }\n  _recommendationItemBuilder(source) {\n    const defaultResolver = this._defaultRecResolverCache[source.objectId];\n    if (source.recommendations() && (!defaultResolver || source.recommendations() !== defaultResolver)) {\n      return;\n    }\n    return source => ({\n      source,\n      action: () => this.playItem(source)\n    });\n  }\n  currentIndex(index) {\n    if (index === undefined) {\n      return this._currentIndex;\n    }\n    if (index >= this.length() || index < 0) {\n      throw new Error('Invalid playlist index.');\n    }\n    this._currentIndex = index;\n    const current = this.currentSource();\n    const itemBuilder = this._recommendationItemBuilder(current);\n    if (!current.recommendations()) {\n      current.recommendations(this._defaultRecommendationsResolver(current));\n    }\n\n    // Extract source options for analytics\n    const sourceOptions = current.getInitOptions ? current.getInitOptions() : {};\n    this._context.source(current, _objectSpread(_objectSpread({}, sourceOptions), {}, {\n      recommendationOptions: {\n        disableAutoShow: true,\n        itemBuilder\n      }\n    }));\n    const eventData = {\n      playlist: this,\n      current,\n      next: this.next()\n    };\n    this.player().trigger('playlistitemchanged', eventData);\n    this._refreshRecommendations();\n    this._refreshTextTracks();\n    return current;\n  }\n  _defaultRecommendationsResolver(source) {\n    const defaultResolver = this._defaultRecResolverCache[source.objectId];\n    if (defaultResolver) {\n      return defaultResolver;\n    }\n    this._defaultRecResolverCache[source.objectId] = () => {\n      let index = this.list().indexOf(source);\n      const items = [];\n      const numOfItems = Math.min(4, this.length() - 1);\n      while (items.length < numOfItems) {\n        index = this.nextIndex(index);\n        if (index === -1) {\n          break;\n        }\n        const source = this.list()[index];\n        items.push(source);\n      }\n      return items;\n    };\n    return this._defaultRecResolverCache[source.objectId];\n  }\n  buildSource(source) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    return this._context.buildSource(source, options);\n  }\n  enqueue(source) {\n    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    const src = source instanceof plugins_cloudinary_models_video_source_video_source__WEBPACK_IMPORTED_MODULE_0__[\"default\"] ? source : this.buildSource(source, options);\n    this._sources.push(src);\n    return src;\n  }\n  playItem(item) {\n    let index = this.list().indexOf(item);\n    if (index === -1) {\n      throw new Error('Invalid playlist item.');\n    }\n    this.playAtIndex(index);\n  }\n  playAtIndex(index) {\n    this.currentIndex(index);\n    this.player().play();\n    return this.currentSource();\n  }\n  currentSource() {\n    return this.list()[this.currentIndex()];\n  }\n  removeAt(index) {\n    if (index >= this.length() || index < 0) {\n      throw new Error('Invalid playlist index.');\n    }\n    this._sources.splice(index, 1);\n    return this;\n  }\n  repeat(repeat) {\n    if (repeat === undefined) {\n      return this._repeat;\n    }\n    this._repeat = !!repeat;\n    return this._repeat;\n  }\n  first() {\n    return this.list()[0];\n  }\n  last() {\n    return this.list()[this.length() - 1];\n  }\n  next() {\n    const nextIndex = this.nextIndex();\n    if (nextIndex === -1) {\n      return null;\n    }\n    return this.list()[nextIndex];\n  }\n  nextIndex(index) {\n    index = index !== undefined ? index : this.currentIndex();\n    if (index >= this.length() || index < 0) {\n      throw new Error('Invalid playlist index.');\n    }\n    const isLast = index === this.length() - 1;\n    let nextIndex = index + 1;\n    if (isLast) {\n      if (this.repeat()) {\n        nextIndex = 0;\n      } else {\n        return -1;\n      }\n    }\n    return nextIndex;\n  }\n  previousIndex() {\n    if (this.isFirst()) {\n      return -1;\n    }\n    return this.currentIndex() - 1;\n  }\n  playFirst() {\n    return this.playAtIndex(0);\n  }\n  playLast() {\n    const lastIndex = this.list().length - 1;\n    return this.playAtIndex(lastIndex);\n  }\n  isLast() {\n    return this.currentIndex() >= this.length() - 1;\n  }\n  isFirst() {\n    return this.currentIndex() === 0;\n  }\n  length() {\n    return this.list().length;\n  }\n  playNext() {\n    let nextIndex = this.nextIndex();\n    if (nextIndex === -1) {\n      return null;\n    }\n    return this.playAtIndex(nextIndex);\n  }\n  playPrevious() {\n    let previousIndex = this.previousIndex();\n    if (previousIndex === -1) {\n      return null;\n    }\n    return this.playAtIndex(previousIndex);\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Playlist);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist.scss?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/ui/thumbnail/thumbnail.js":
+/***/ "./plugins/playlist/ui/thumbnail/thumbnail.js"
 /*!****************************************************!*\
   !*** ./plugins/playlist/ui/thumbnail/thumbnail.js ***!
   \****************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _thumbnail_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./thumbnail.scss */ \"./plugins/playlist/ui/thumbnail/thumbnail.scss\");\n\n\n\n// Get the ClickableComponent base class from Video.js\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nconst THUMB_DEFAULT_WIDTH = 300;\nconst DEFAULT_OPTIONS = {\n  item: null,\n  transformation: {\n    width: THUMB_DEFAULT_WIDTH,\n    aspect_ratio: '16:9',\n    crop: 'pad',\n    background: 'black'\n  }\n};\nclass Thumbnail extends ClickableComponent {\n  constructor(player, initOptions) {\n    const options = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(DEFAULT_OPTIONS, initOptions);\n    super(player, options);\n  }\n  getItem() {\n    return this.options_.item;\n  }\n  getTitle() {\n    return this.getItem().info().title;\n  }\n  getDuration() {\n    return ' '; // this.getItem().info().title;\n  }\n  getThumbnail() {\n    return this.getItem().poster().url({\n      transformation: this.options_.transformation\n    });\n  }\n  handleClick(e) {\n    e.preventDefault();\n  }\n  createControlTextEl() {\n    return;\n  }\n  createEl() {\n    let tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'a';\n    const el = super.createEl(tag, {\n      className: 'cld-thumbnail',\n      href: '#'\n    });\n    const img = super.createEl('img', {\n      className: 'cld-thumbnail-img',\n      src: this.getThumbnail()\n    });\n    el.appendChild(img);\n    el.style.backgroundImage = `url('${this.getThumbnail()}')`;\n    return el;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Thumbnail);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/thumbnail/thumbnail.js?\n}");
+
+/***/ },
+
+/***/ "./plugins/playlist/ui/thumbnail/thumbnail.scss"
+/*!******************************************************!*\
+  !*** ./plugins/playlist/ui/thumbnail/thumbnail.scss ***!
+  \******************************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _thumbnail_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./thumbnail.scss */ \"./plugins/playlist/ui/thumbnail/thumbnail.scss\");\n\n\n\n// Get the ClickableComponent base class from Video.js\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nconst THUMB_DEFAULT_WIDTH = 300;\nconst DEFAULT_OPTIONS = {\n  item: null,\n  transformation: {\n    width: THUMB_DEFAULT_WIDTH,\n    aspect_ratio: '16:9',\n    crop: 'pad',\n    background: 'black'\n  }\n};\nclass Thumbnail extends ClickableComponent {\n  constructor(player, initOptions) {\n    const options = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(DEFAULT_OPTIONS, initOptions);\n    super(player, options);\n  }\n  getItem() {\n    return this.options_.item;\n  }\n  getTitle() {\n    return this.getItem().info().title;\n  }\n  getDuration() {\n    return ' '; // this.getItem().info().title;\n  }\n  getThumbnail() {\n    return this.getItem().poster().url({\n      transformation: this.options_.transformation\n    });\n  }\n  handleClick(e) {\n    e.preventDefault();\n  }\n  createControlTextEl() {\n    return;\n  }\n  createEl() {\n    let tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'a';\n    const el = super.createEl(tag, {\n      className: 'cld-thumbnail',\n      href: '#'\n    });\n    const img = super.createEl('img', {\n      className: 'cld-thumbnail-img',\n      src: this.getThumbnail()\n    });\n    el.appendChild(img);\n    el.style.backgroundImage = \"url('\".concat(this.getThumbnail(), \"')\");\n    return el;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Thumbnail);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/thumbnail/thumbnail.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/thumbnail/thumbnail.scss?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/utils/api.js":
+/***/ "./plugins/playlist/utils/api.js"
 /*!***************************************!*\
   !*** ./plugins/playlist/utils/api.js ***!
   \***************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   normalizeJsonResponse: () => (/* binding */ normalizeJsonResponse)\n/* harmony export */ });\n/* harmony import */ var lodash_camelCase__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/camelCase */ \"../node_modules/lodash/camelCase.js\");\n/* harmony import */ var lodash_camelCase__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_camelCase__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/isPlainObject */ \"../node_modules/lodash/isPlainObject.js\");\n/* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _time__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./time */ \"./plugins/playlist/utils/time.js\");\n\n\n\nconst TIME_FIELDS = ['created_at', 'updated_at'];\nconst normalizeJsonResponse = obj => {\n  const agg = {};\n  if (lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1___default()(obj)) {\n    Object.keys(obj).reduce((agg, key) => {\n      const newKey = lodash_camelCase__WEBPACK_IMPORTED_MODULE_0___default()(key);\n      if (TIME_FIELDS.indexOf(key) !== -1) {\n        agg[newKey] = new Date((0,_time__WEBPACK_IMPORTED_MODULE_2__.parseISO8601)(obj[key]));\n      } else {\n        agg[newKey] = normalizeJsonResponse(obj[key]);\n      }\n      return agg;\n    }, agg);\n    return agg;\n  } else if (Array.isArray(obj)) {\n    return obj.map(item => normalizeJsonResponse(item));\n  } else {\n    return obj;\n  }\n};\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/utils/api.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   normalizeJsonResponse: () => (/* binding */ normalizeJsonResponse)\n/* harmony export */ });\n/* harmony import */ var lodash_camelCase__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/camelCase */ \"../node_modules/lodash/camelCase.js\");\n/* harmony import */ var lodash_camelCase__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_camelCase__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/isPlainObject */ \"../node_modules/lodash/isPlainObject.js\");\n/* harmony import */ var lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _time__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./time */ \"./plugins/playlist/utils/time.js\");\n\n\n\nconst TIME_FIELDS = ['created_at', 'updated_at'];\nconst normalizeJsonResponse = obj => {\n  const agg = {};\n  if (lodash_isPlainObject__WEBPACK_IMPORTED_MODULE_1___default()(obj)) {\n    Object.keys(obj).reduce((agg, key) => {\n      const newKey = lodash_camelCase__WEBPACK_IMPORTED_MODULE_0___default()(key);\n      if (TIME_FIELDS.indexOf(key) !== -1) {\n        agg[newKey] = new Date((0,_time__WEBPACK_IMPORTED_MODULE_2__.parseISO8601)(obj[key]));\n      } else {\n        agg[newKey] = normalizeJsonResponse(obj[key]);\n      }\n      return agg;\n    }, agg);\n    return agg;\n  } else if (Array.isArray(obj)) {\n    return obj.map(item => normalizeJsonResponse(item));\n  } else {\n    return obj;\n  }\n};\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/utils/api.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/utils/dom.js":
+/***/ "./plugins/playlist/utils/dom.js"
 /*!***************************************!*\
   !*** ./plugins/playlist/utils/dom.js ***!
   \***************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   wrap: () => (/* binding */ wrap)\n/* harmony export */ });\nconst wrap = (el, wrapper) => {\n  el.parentNode.insertBefore(wrapper, el);\n  wrapper.appendChild(el);\n  return wrapper;\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/utils/dom.js?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   wrap: () => (/* binding */ wrap)\n/* harmony export */ });\nconst wrap = (el, wrapper) => {\n  el.parentNode.insertBefore(wrapper, el);\n  wrapper.appendChild(el);\n  return wrapper;\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/utils/dom.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./plugins/playlist/utils/time.js":
+/***/ "./plugins/playlist/utils/time.js"
 /*!****************************************!*\
   !*** ./plugins/playlist/utils/time.js ***!
   \****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   parseISO8601: () => (/* binding */ parseISO8601)\n/* harmony export */ });\n// https://github.com/csnover/js-iso8601/blob/master/iso8601.js\nconst numericKeys = [1, 4, 5, 6, 7, 10, 11];\nconst parseISO8601 = function (date) {\n  let timestamp = 0;\n  let struct = 0;\n  let minutesOffset = 0;\n\n  // ES5 §15.9.4.2 states that the string should attempt to be parsed as a Date Time String Format string\n  // before falling back to any implementation-specific date parsing, so that’s what we do, even if native\n  // implementations could be faster\n  //              1 YYYY                2 MM       3 DD           4 HH    5 mm       6 ss        7 msec        8 Z 9 ±    10 tzHH    11 tzmm\n  if (struct = /^(\\d{4}|[+\\-]\\d{6})(?:-(\\d{2})(?:-(\\d{2}))?)?(?:T(\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.(\\d{3}))?)?(?:(Z)|([+\\-])(\\d{2})(?::(\\d{2}))?)?)?$/.exec(date)) {\n    // avoid NaN timestamps caused by “undefined” values being passed to Date.UTC\n    for (let i = 0, k; k = numericKeys[i]; ++i) {\n      struct[k] = +struct[k] || 0;\n    }\n\n    // allow undefined days and months\n    struct[2] = (+struct[2] || 1) - 1;\n    struct[3] = +struct[3] || 1;\n    if (struct[8] !== 'Z' && struct[9] !== undefined) {\n      minutesOffset = struct[10] * 60 + struct[11];\n      if (struct[9] === '+') {\n        minutesOffset = 0 - minutesOffset;\n      }\n    }\n    timestamp = Date.UTC(struct[1], struct[2], struct[3], struct[4], struct[5] + minutesOffset, struct[6], struct[7]);\n  } else {\n    timestamp = NaN;\n  }\n  return timestamp;\n};\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/utils/time.js?");
-
-/***/ }),
-
-/***/ "../node_modules/lodash/_baseTrim.js":
-/*!*******************************************!*\
-  !*** ../node_modules/lodash/_baseTrim.js ***!
-  \*******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-eval("var trimmedEndIndex = __webpack_require__(/*! ./_trimmedEndIndex */ \"../node_modules/lodash/_trimmedEndIndex.js\");\n\n/** Used to match leading whitespace. */\nvar reTrimStart = /^\\s+/;\n\n/**\n * The base implementation of `_.trim`.\n *\n * @private\n * @param {string} string The string to trim.\n * @returns {string} Returns the trimmed string.\n */\nfunction baseTrim(string) {\n  return string\n    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')\n    : string;\n}\n\nmodule.exports = baseTrim;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/_baseTrim.js?");
-
-/***/ }),
-
-/***/ "../node_modules/lodash/_trimmedEndIndex.js":
-/*!**************************************************!*\
-  !*** ../node_modules/lodash/_trimmedEndIndex.js ***!
-  \**************************************************/
-/***/ ((module) => {
-
-eval("/** Used to match a single whitespace character. */\nvar reWhitespace = /\\s/;\n\n/**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace\n * character of `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the index of the last non-whitespace character.\n */\nfunction trimmedEndIndex(string) {\n  var index = string.length;\n\n  while (index-- && reWhitespace.test(string.charAt(index))) {}\n  return index;\n}\n\nmodule.exports = trimmedEndIndex;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/_trimmedEndIndex.js?");
-
-/***/ }),
-
-/***/ "../node_modules/lodash/isInteger.js":
-/*!*******************************************!*\
-  !*** ../node_modules/lodash/isInteger.js ***!
-  \*******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-eval("var toInteger = __webpack_require__(/*! ./toInteger */ \"../node_modules/lodash/toInteger.js\");\n\n/**\n * Checks if `value` is an integer.\n *\n * **Note:** This method is based on\n * [`Number.isInteger`](https://mdn.io/Number/isInteger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an integer, else `false`.\n * @example\n *\n * _.isInteger(3);\n * // => true\n *\n * _.isInteger(Number.MIN_VALUE);\n * // => false\n *\n * _.isInteger(Infinity);\n * // => false\n *\n * _.isInteger('3');\n * // => false\n */\nfunction isInteger(value) {\n  return typeof value == 'number' && value == toInteger(value);\n}\n\nmodule.exports = isInteger;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/isInteger.js?");
-
-/***/ }),
-
-/***/ "../node_modules/lodash/toFinite.js":
-/*!******************************************!*\
-  !*** ../node_modules/lodash/toFinite.js ***!
-  \******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-eval("var toNumber = __webpack_require__(/*! ./toNumber */ \"../node_modules/lodash/toNumber.js\");\n\n/** Used as references for various `Number` constants. */\nvar INFINITY = 1 / 0,\n    MAX_INTEGER = 1.7976931348623157e+308;\n\n/**\n * Converts `value` to a finite number.\n *\n * @static\n * @memberOf _\n * @since 4.12.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted number.\n * @example\n *\n * _.toFinite(3.2);\n * // => 3.2\n *\n * _.toFinite(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toFinite(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toFinite('3.2');\n * // => 3.2\n */\nfunction toFinite(value) {\n  if (!value) {\n    return value === 0 ? value : 0;\n  }\n  value = toNumber(value);\n  if (value === INFINITY || value === -INFINITY) {\n    var sign = (value < 0 ? -1 : 1);\n    return sign * MAX_INTEGER;\n  }\n  return value === value ? value : 0;\n}\n\nmodule.exports = toFinite;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/toFinite.js?");
-
-/***/ }),
-
-/***/ "../node_modules/lodash/toInteger.js":
-/*!*******************************************!*\
-  !*** ../node_modules/lodash/toInteger.js ***!
-  \*******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-eval("var toFinite = __webpack_require__(/*! ./toFinite */ \"../node_modules/lodash/toFinite.js\");\n\n/**\n * Converts `value` to an integer.\n *\n * **Note:** This method is loosely based on\n * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {number} Returns the converted integer.\n * @example\n *\n * _.toInteger(3.2);\n * // => 3\n *\n * _.toInteger(Number.MIN_VALUE);\n * // => 0\n *\n * _.toInteger(Infinity);\n * // => 1.7976931348623157e+308\n *\n * _.toInteger('3.2');\n * // => 3\n */\nfunction toInteger(value) {\n  var result = toFinite(value),\n      remainder = result % 1;\n\n  return result === result ? (remainder ? result - remainder : result) : 0;\n}\n\nmodule.exports = toInteger;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/toInteger.js?");
-
-/***/ }),
-
-/***/ "../node_modules/lodash/toNumber.js":
-/*!******************************************!*\
-  !*** ../node_modules/lodash/toNumber.js ***!
-  \******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-eval("var baseTrim = __webpack_require__(/*! ./_baseTrim */ \"../node_modules/lodash/_baseTrim.js\"),\n    isObject = __webpack_require__(/*! ./isObject */ \"../node_modules/lodash/isObject.js\"),\n    isSymbol = __webpack_require__(/*! ./isSymbol */ \"../node_modules/lodash/isSymbol.js\");\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n  if (typeof value == 'number') {\n    return value;\n  }\n  if (isSymbol(value)) {\n    return NAN;\n  }\n  if (isObject(value)) {\n    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n    value = isObject(other) ? (other + '') : other;\n  }\n  if (typeof value != 'string') {\n    return value === 0 ? value : +value;\n  }\n  value = baseTrim(value);\n  var isBinary = reIsBinary.test(value);\n  return (isBinary || reIsOctal.test(value))\n    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n    : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/toNumber.js?");
-
-/***/ }),
-
-/***/ "./plugins/playlist/ui/components/playlist-buttons.scss":
-/*!**************************************************************!*\
-  !*** ./plugins/playlist/ui/components/playlist-buttons.scss ***!
-  \**************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/playlist-buttons.scss?");
-
-/***/ }),
-
-/***/ "./plugins/playlist/ui/components/upcoming-video-overlay.scss":
-/*!********************************************************************!*\
-  !*** ./plugins/playlist/ui/components/upcoming-video-overlay.scss ***!
-  \********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/components/upcoming-video-overlay.scss?");
-
-/***/ }),
-
-/***/ "./plugins/playlist/ui/playlist.scss":
-/*!*******************************************!*\
-  !*** ./plugins/playlist/ui/playlist.scss ***!
-  \*******************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/playlist.scss?");
-
-/***/ }),
-
-/***/ "./plugins/playlist/ui/thumbnail/thumbnail.scss":
-/*!******************************************************!*\
-  !*** ./plugins/playlist/ui/thumbnail/thumbnail.scss ***!
-  \******************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/ui/thumbnail/thumbnail.scss?");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   parseISO8601: () => (/* binding */ parseISO8601)\n/* harmony export */ });\n// https://github.com/csnover/js-iso8601/blob/master/iso8601.js\nconst numericKeys = [1, 4, 5, 6, 7, 10, 11];\nconst parseISO8601 = function (date) {\n  let timestamp = 0;\n  let struct = 0;\n  let minutesOffset = 0;\n\n  // ES5 §15.9.4.2 states that the string should attempt to be parsed as a Date Time String Format string\n  // before falling back to any implementation-specific date parsing, so that’s what we do, even if native\n  // implementations could be faster\n  //              1 YYYY                2 MM       3 DD           4 HH    5 mm       6 ss        7 msec        8 Z 9 ±    10 tzHH    11 tzmm\n  if (struct = /^(\\d{4}|[+\\-]\\d{6})(?:-(\\d{2})(?:-(\\d{2}))?)?(?:T(\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.(\\d{3}))?)?(?:(Z)|([+\\-])(\\d{2})(?::(\\d{2}))?)?)?$/.exec(date)) {\n    // avoid NaN timestamps caused by “undefined” values being passed to Date.UTC\n    for (let i = 0, k; k = numericKeys[i]; ++i) {\n      struct[k] = +struct[k] || 0;\n    }\n\n    // allow undefined days and months\n    struct[2] = (+struct[2] || 1) - 1;\n    struct[3] = +struct[3] || 1;\n    if (struct[8] !== 'Z' && struct[9] !== undefined) {\n      minutesOffset = struct[10] * 60 + struct[11];\n      if (struct[9] === '+') {\n        minutesOffset = 0 - minutesOffset;\n      }\n    }\n    timestamp = Date.UTC(struct[1], struct[2], struct[3], struct[4], struct[5] + minutesOffset, struct[6], struct[7]);\n  } else {\n    timestamp = NaN;\n  }\n  return timestamp;\n};\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/playlist/utils/time.js?\n}");
 
-/***/ })
+/***/ }
 
 }]);