cloudinary-video-player/dist/recommendations-overlay.js

Cloudinary Video Player

/*!
 * Cloudinary Video Player v3.6.3
 * Built on 2026-01-04T09:24:08.226Z
 * https://github.com/cloudinary/cloudinary-video-player
 */
"use strict";
/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["recommendations-overlay"],{

/***/ "./components/recommendations-overlay/recommendations-overlay-content.js":
/*!*******************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay-content.js ***!
  \*******************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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 _recommendations_overlay_primary_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./recommendations-overlay-primary-item */ \"./components/recommendations-overlay/recommendations-overlay-primary-item.js\");\n/* harmony import */ var _recommendations_overlay_secondary_items_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./recommendations-overlay-secondary-items-container */ \"./components/recommendations-overlay/recommendations-overlay-secondary-items-container.js\");\n\n\n\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nclass RecommendationsOverlayContent extends Component {\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._content = new AspectRatioContent(player);\n    this.addChild(this._content);\n  }\n  setItems(primary) {\n    for (var _len2 = arguments.length, secondary = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n      secondary[_key2 - 1] = arguments[_key2];\n    }\n    this._content.setItems(primary, ...secondary);\n  }\n  clearItems() {\n    this._content._primary.clearItem();\n    this._content._secondaryContainer.clearItems();\n  }\n  createEl() {\n    return super.createEl('div', {\n      className: 'vjs-recommendations-overlay-content'\n    });\n  }\n}\nclass AspectRatioContent extends Component {\n  constructor(player) {\n    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {\n      args[_key3 - 1] = arguments[_key3];\n    }\n    super(player, ...args);\n    this._primary = new _recommendations_overlay_primary_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"](player);\n    this._secondaryContainer = new _recommendations_overlay_secondary_items_container__WEBPACK_IMPORTED_MODULE_2__[\"default\"](player);\n    this.addChild(this._primary);\n    this.addChild(this._secondaryContainer);\n  }\n  setItems(primary) {\n    this._primary.setItem(primary);\n    for (var _len4 = arguments.length, secondary = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {\n      secondary[_key4 - 1] = arguments[_key4];\n    }\n    this._secondaryContainer.setItems(...secondary);\n  }\n  createEl() {\n    return super.createEl('div', {\n      className: 'aspect-ratio-content'\n    });\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationsOverlayContent);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay-content.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay-hide-button.js":
/*!***********************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay-hide-button.js ***!
  \***********************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nclass RecommendationOverlayHideButton extends ClickableComponent {\n  createEl() {\n    return super.createEl('span', {\n      className: 'vjs-recommendations-overlay-hide vjs-icon-close'\n    });\n  }\n  handleClick() {\n    this.options_.clickHandler();\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationOverlayHideButton);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay-hide-button.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay-item.js":
/*!****************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay-item.js ***!
  \****************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nclass RecommendationsOverlayItem extends ClickableComponent {\n  setItem(item) {\n    const {\n      action,\n      source\n    } = item;\n    this.source = source;\n    const info = source.info();\n    this.setTitle(info.title || source.publicId());\n    this.setPoster(this.source.poster().url({\n      transformation: {\n        aspect_ratio: '16:9',\n        crop: 'pad',\n        background: 'black'\n      }\n    }));\n    this.setAction(action);\n  }\n  setTitle(text) {\n    this.title.innerText = text;\n  }\n  setAction(action) {\n    this.action = action;\n  }\n  handleClick() {\n    super.handleClick();\n    this.player().trigger('recommendationshide');\n    this.action();\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationsOverlayItem);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay-item.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay-primary-item.js":
/*!************************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay-primary-item.js ***!
  \************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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 _recommendations_overlay_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./recommendations-overlay-item */ \"./components/recommendations-overlay/recommendations-overlay-item.js\");\n/* harmony import */ var components_component_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! components/component-utils */ \"./components/component-utils.js\");\n/* harmony import */ var components_component_utils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(components_component_utils__WEBPACK_IMPORTED_MODULE_2__);\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());\nclass RecommendationsOverlayPrimaryItem extends _recommendations_overlay_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\n  setItem(item) {\n    super.setItem(item);\n    const info = this.source.info();\n    this.setTitle(info.title);\n    this.setSubtitle(info.subtitle);\n    if (info.description) {\n      const descLength = 300;\n      const description = info.description.length > descLength ? info.description.substring(0, descLength) + '...' : info.description;\n      this.setDescription(description);\n    }\n  }\n  setPoster(url) {\n    this.poster.style.backgroundImage = `url('${url}')`;\n  }\n  setTitle(text) {\n    components_component_utils__WEBPACK_IMPORTED_MODULE_2___default().setText(this.title, text);\n    this.setAriaCheck(this.title, !!text);\n  }\n  setSubtitle(text) {\n    components_component_utils__WEBPACK_IMPORTED_MODULE_2___default().setText(this.subtitle, text);\n    this.setAriaCheck(this.subtitle, !!text);\n  }\n  setDescription(text) {\n    components_component_utils__WEBPACK_IMPORTED_MODULE_2___default().setText(this.description, text);\n    this.setAriaCheck(this.description, !!text);\n  }\n  setAriaCheck(element) {\n    let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n    if (active) {\n      element.removeAttribute('aria-hidden');\n    } else {\n      element.setAttribute('aria-hidden', 'true');\n    }\n  }\n  clearItem() {\n    this.setTitle('');\n    this.setSubtitle('');\n    this.setDescription('');\n    this.poster.style.backgroundImage = null;\n  }\n  createEl() {\n    const el = super.createEl('div', {\n      className: 'vjs-recommendations-overlay-item vjs-recommendations-overlay-item-primary'\n    });\n    this.poster = dom.createEl('div', {\n      className: 'vjs-recommendations-overlay-item-primary-image'\n    });\n    this.title = dom.createEl('h2', {\n      ariaLabel: 'Recmmendation Title'\n    });\n    this.setAriaCheck(this.title, false);\n    this.title.innerHTML = '';\n    this.subtitle = dom.createEl('h3', {\n      ariaLabel: 'Recmmendation Subtitle'\n    });\n    this.setAriaCheck(this.subtitle, false);\n    this.subtitle.innerHTML = '';\n    this.description = dom.createEl('p');\n    this.setAriaCheck(this.description, false);\n    this.description.innerHTML = '';\n    this.content = dom.createEl('div', {\n      className: 'vjs-recommendations-overlay-item-info vjs-recommendations-overlay-item-primary-content'\n    });\n    this.content.appendChild(this.title);\n    this.content.appendChild(this.subtitle);\n    this.content.appendChild(this.description);\n    el.appendChild(this.poster);\n    el.appendChild(this.content);\n    return el;\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationsOverlayPrimaryItem);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay-primary-item.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay-secondary-item.js":
/*!**************************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay-secondary-item.js ***!
  \**************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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 _recommendations_overlay_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./recommendations-overlay-item */ \"./components/recommendations-overlay/recommendations-overlay-item.js\");\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());\nclass RecommendationsOverlaySecondaryItem extends _recommendations_overlay_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\n  setItem(item) {\n    super.setItem(item);\n    this.setDuration('');\n  }\n  setPoster(url) {\n    this.el().style.backgroundImage = `url('${url}')`;\n  }\n  setDuration(text) {\n    this.duration.innerText = text;\n  }\n  createEl() {\n    const el = super.createEl('div', {\n      className: 'vjs-recommendations-overlay-item vjs-recommendations-overlay-item-secondary'\n    });\n    this.title = dom.createEl('span', {\n      className: 'vjs-recommendations-overlay-item-secondary-title'\n    });\n    this.title.innerHTML = '';\n    this.duration = dom.createEl('span', {\n      className: 'vjs-recommendations-overlay-item-secondary-duration'\n    });\n    this.duration.innerHTML = '';\n    const caption = dom.createEl('div', {\n      className: 'vjs-recommendations-overlay-item-info'\n    });\n    caption.appendChild(this.title);\n    caption.appendChild(this.duration);\n    el.appendChild(caption);\n    return el;\n  }\n  handleClick() {\n    super.handleClick();\n    this.action();\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationsOverlaySecondaryItem);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay-secondary-item.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay-secondary-items-container.js":
/*!*************************************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay-secondary-items-container.js ***!
  \*************************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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 _recommendations_overlay_secondary_item__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./recommendations-overlay-secondary-item */ \"./components/recommendations-overlay/recommendations-overlay-secondary-item.js\");\n\n\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nclass RecommendationsOverlaySecondaryItemsContainer extends Component {\n  setItems() {\n    for (var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++) {\n      items[_key] = arguments[_key];\n    }\n    this.clearItems();\n    if (!items) {\n      return;\n    }\n    items.forEach(item => {\n      const component = new _recommendations_overlay_secondary_item__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.player());\n      component.setItem(item);\n      this.addChild(component);\n    });\n  }\n  clearItems() {\n    this.children().forEach(() => {\n      this.removeChild(this.children()[0]);\n    });\n  }\n  createEl() {\n    return super.createEl('div', {\n      className: 'vjs-recommendations-overlay-item-secondary-container'\n    });\n  }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationsOverlaySecondaryItemsContainer);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay-secondary-items-container.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay.js":
/*!***********************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay.js ***!
  \***********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

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 _recommendations_overlay_content__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./recommendations-overlay-content */ \"./components/recommendations-overlay/recommendations-overlay-content.js\");\n/* harmony import */ var _recommendations_overlay_hide_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./recommendations-overlay-hide-button */ \"./components/recommendations-overlay/recommendations-overlay-hide-button.js\");\n/* harmony import */ var _recommendations_overlay_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./recommendations-overlay.scss */ \"./components/recommendations-overlay/recommendations-overlay.scss\");\n\n\n\n\nconst MAXIMUM_ITEMS = 4;\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\n\n// TODO: Use Video.js's ModalDialog instead. It handles clicking block logic.\nclass RecommendationsOverlay extends Component {\n  constructor(player, options) {\n    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n      args[_key - 2] = arguments[_key];\n    }\n    super(player, ...args);\n    this._content = new _recommendations_overlay_content__WEBPACK_IMPORTED_MODULE_1__[\"default\"](player);\n    this.addChild(this._content);\n    this.addChild(new _recommendations_overlay_hide_button__WEBPACK_IMPORTED_MODULE_2__[\"default\"](player, {\n      clickHandler: () => {\n        this.close();\n      }\n    }, ...args));\n    this.setEvents(player);\n    this.doNotOpen = false;\n  }\n  setEvents(player) {\n    this.on(player, 'recommendationschanged', (_, eventData) => {\n      this.setItems(...eventData.items);\n    });\n    this.on(player, 'recommendationsnoshow', this.setDoNotOpen);\n    this.on(player, 'recommendationsshow', this.open);\n    this.on(player, 'recommendationshide', this.close);\n    this.on(player, 'cldsourcechanged', () => {\n      this.clearItems();\n      this.close();\n    });\n  }\n  setDoNotOpen() {\n    this.doNotOpen = true;\n  }\n  open() {\n    if (!this.doNotOpen) {\n      // Only show controls on close if they were visible from the first place\n      this._showControlsOnClose = this.player().controls();\n      this.player().controls(false);\n      this.el().style.visibility = 'visible';\n    }\n  }\n  clearItems() {\n    this._content.clearItems();\n  }\n  close() {\n    this.el().style.visibility = 'hidden';\n    if (this._showControlsOnClose) {\n      this.player().controls(true);\n    }\n  }\n  createEl() {\n    const recommendationsOverlayClass = 'vjs-recommendations-overlay';\n    const el = super.createEl('div', {\n      className: recommendationsOverlayClass\n    });\n    video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.addClass(el, recommendationsOverlayClass);\n    return el;\n  }\n  setItems(primary) {\n    for (var _len2 = arguments.length, secondary = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n      secondary[_key2 - 1] = arguments[_key2];\n    }\n    this.doNotOpen = false;\n    secondary = secondary.slice(0, MAXIMUM_ITEMS - 1);\n    this._content.setItems(primary, ...secondary);\n  }\n  handleClick() {\n    this.stopPropagation();\n  }\n  dispose() {\n    super.dispose();\n  }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('recommendationsOverlay', RecommendationsOverlay);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RecommendationsOverlay);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay.js?");

/***/ }),

/***/ "./components/recommendations-overlay/recommendations-overlay.scss":
/*!*************************************************************************!*\
  !*** ./components/recommendations-overlay/recommendations-overlay.scss ***!
  \*************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./components/recommendations-overlay/recommendations-overlay.scss?");

/***/ })

}]);