cloudinary-video-player 3.6.3-edge.0 → 3.6.3-edge.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/adaptive-streaming.js +5 -5
- package/dist/adaptive-streaming.min.js +4 -4
- package/dist/chapters.js +3 -3
- package/dist/chapters.min.js +3 -3
- package/dist/cld-video-player.css +2 -2
- package/dist/cld-video-player.js +38 -38
- package/dist/cld-video-player.light.js +38 -38
- package/dist/cld-video-player.light.min.js +4 -4
- package/dist/cld-video-player.min.css +3 -3
- package/dist/cld-video-player.min.js +4 -4
- package/dist/colors.js +2 -2
- package/dist/colors.min.js +2 -2
- package/dist/dash.js +2 -2
- package/dist/dash.min.js +2 -2
- package/dist/debug.js +3 -3
- package/dist/debug.min.js +3 -3
- package/dist/ima.js +2 -2
- package/dist/ima.min.js +2 -2
- package/dist/interaction-areas.js +4 -4
- package/dist/interaction-areas.min.js +3 -3
- package/dist/node_modules_lodash_throttle_js.js +2 -2
- package/dist/playlist.js +9 -9
- package/dist/playlist.min.js +3 -3
- package/dist/recommendations-overlay.js +4 -4
- package/dist/recommendations-overlay.min.js +3 -3
- package/dist/share.js +3 -3
- package/dist/share.min.js +3 -3
- package/dist/shoppable.js +7 -7
- package/dist/shoppable.min.js +3 -3
- package/dist/visual-search.js +4 -4
- package/dist/visual-search.min.js +3 -3
- package/lib/adaptive-streaming.js +1 -1
- package/lib/all.js +1 -1
- package/lib/chapters.js +1 -1
- package/lib/cld-video-player.js +1 -1
- package/lib/debug.js +1 -1
- package/lib/interaction-areas.js +1 -1
- package/lib/player.js +1 -1
- package/lib/playlist.js +1 -1
- package/lib/recommendations-overlay.js +1 -1
- package/lib/share.js +1 -1
- package/lib/shoppable.js +1 -1
- package/lib/videoPlayer.js +1 -1
- package/lib/visual-search.js +1 -1
- package/package.json +5 -2
package/dist/shoppable.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3-edge.
|
|
3
|
-
* Built on 2025-12-
|
|
2
|
+
* Cloudinary Video Player v3.6.3-edge.10
|
|
3
|
+
* Built on 2025-12-30T09:40:59.004Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
6
|
"use strict";
|
|
@@ -30,7 +30,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
30
30
|
\*******************************************************************/
|
|
31
31
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
32
32
|
|
|
33
|
-
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 _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/consts */ \"./utils/consts.js\");\n\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nclass ShoppablePanelToggle extends ClickableComponent {\n constructor(player, options) {\n super(player, options);\n this.options_ = options;\n }\n handleClick(event) {\n event.preventDefault();\n event.stopPropagation();\n this.options_.clickHandler();\n }\n createEl() {\n let iconProps = {};\n let iconAttrs = {};\n if (this.options_.toggleIcon) {\n iconProps = {\n className:
|
|
33
|
+
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 _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/consts */ \"./utils/consts.js\");\n\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nclass ShoppablePanelToggle extends ClickableComponent {\n constructor(player, options) {\n super(player, options);\n this.options_ = options;\n }\n handleClick(event) {\n event.preventDefault();\n event.stopPropagation();\n this.options_.clickHandler();\n }\n createEl() {\n let iconProps = {};\n let iconAttrs = {};\n if (this.options_.toggleIcon) {\n iconProps = {\n className: `${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.CLD_SPBL_TOGGLE_ICON_CLASS} ${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS} ${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.CLOSE_ICON_CLASS}`\n };\n iconAttrs = {\n style: `background-image: url(${this.options_.toggleIcon})`\n };\n } else {\n iconProps = {\n className: `${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.CLD_SPBL_TOGGLE_ICON_CLASS} ${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.ICON_CART_CLASS}`\n };\n }\n const icon = dom.createEl('span', iconProps, iconAttrs);\n const el = super.createEl('a', {\n className: `${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.CLD_SPBL_TOGGLE_CLASS} base-color-bg`\n });\n el.appendChild(icon);\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_2__.PLAYER_EVENT.PRODUCT_BAR_MIN, () => {\n setTimeout(() => {\n icon.classList.add(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.SHOPPABLE_ANIMATION_CLASS);\n setTimeout(() => {\n icon.classList.remove(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_1__.SHOPPABLE_ANIMATION_CLASS);\n }, 1000);\n }, 500);\n });\n return el;\n }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('shoppablePanelToggle', ShoppablePanelToggle);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppablePanelToggle);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/layout/shoppable-panel-toggle.js?");
|
|
34
34
|
|
|
35
35
|
/***/ }),
|
|
36
36
|
|
|
@@ -40,7 +40,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
40
40
|
\***********************************************************************/
|
|
41
41
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
42
42
|
|
|
43
|
-
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_time__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/time */ \"./utils/time.js\");\n/* harmony import */ var utils_find__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/find */ \"./utils/find.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/consts */ \"./utils/consts.js\");\
|
|
43
|
+
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_time__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! utils/time */ \"./utils/time.js\");\n/* harmony import */ var utils_find__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/find */ \"./utils/find.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/consts */ \"./utils/consts.js\");\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\n\n\n\n\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nclass ShoppableProductsOverlay extends Component {\n constructor(player) {\n let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(player, options);\n this.options_ = options;\n this.player_ = player;\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_4__.PLAYER_EVENT.SHOW_PRODUCTS_OVERLAY, this.renderProducts);\n this.dispose = () => {\n this.layout_.dispose();\n };\n }\n renderProducts = () => {\n // Close products side-panel\n this.player_.removeClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_VISIBLE_CLASS);\n this.player_.addClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_HIDDEN_CLASS);\n this.player_.addClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PRODUCTS_OVERLAY_CLASS);\n this.layout_.innerHTML = '';\n\n // Filter products with appearance on currentTime\n const currentTime = this.player_.currentTime();\n const currentProducts = this.options_.products.filter(product => product.hotspots && product.hotspots.some(a => (0,utils_time__WEBPACK_IMPORTED_MODULE_1__.parseTime)(a.time) === currentTime));\n currentProducts.forEach(product => {\n const hotspot = (0,utils_find__WEBPACK_IMPORTED_MODULE_2__.find)(product.hotspots, hs => (0,utils_time__WEBPACK_IMPORTED_MODULE_1__.parseTime)(hs.time) === currentTime);\n const productName = dom.createEl('div', {\n className: 'cld-spbl-product-hotspot-name'\n }, {}, product.productName);\n const productTooltip = dom.createEl('div', {\n className: 'cld-spbl-product-tooltip cld-spbl-product-tooltip-' + hotspot.tooltipPosition\n }, {}, productName);\n const productHotSpot = dom.createEl('a', {\n className: 'cld-spbl-product-hotspot accent-color-text',\n href: hotspot.clickUrl,\n target: '_blank'\n }, {\n style: 'left:' + hotspot.x + '; top:' + hotspot.y + ';'\n }, productTooltip);\n this.layout_.appendChild(productHotSpot);\n });\n\n // Remove\n this.player_.one(_utils_consts__WEBPACK_IMPORTED_MODULE_4__.PLAYER_EVENT.SEEKING, this.clearLayout);\n this.player_.one(_utils_consts__WEBPACK_IMPORTED_MODULE_4__.PLAYER_EVENT.PLAY, this.clearLayout);\n };\n clearLayout = () => {\n this.layout_.innerHTML = '';\n this.player_.removeClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PRODUCTS_OVERLAY_CLASS);\n };\n createEl() {\n const dimensions = this.player_.currentDimensions();\n this.layout_ = dom.createEl('div', {\n className: 'cld-spbl-products-overlay',\n style: `padding-top: ${dimensions.height / dimensions.width * 100}%;`\n });\n return this.layout_;\n }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('ShoppableProductsOverlay', ShoppableProductsOverlay);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppableProductsOverlay);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/layout/shoppable-products-overlay.js?");
|
|
44
44
|
|
|
45
45
|
/***/ }),
|
|
46
46
|
|
|
@@ -50,7 +50,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
50
50
|
\****************************************************************/
|
|
51
51
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
52
52
|
|
|
53
|
-
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 _plugins_cloudinary_models_image_source__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../plugins/cloudinary/models/image-source */ \"./plugins/cloudinary/models/image-source.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\n\n\nconst widthTransformation = {\n width: 132\n};\nclass ShoppablePanelItem extends ClickableComponent {\n constructor(player, initOptions) {\n super(player, initOptions);\n this.options_ = initOptions;\n this.isDragged = false;\n }\n handleClick(event) {\n event.preventDefault();\n event.stopPropagation();\n if (!this.el_.matches(
|
|
53
|
+
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 _plugins_cloudinary_models_image_source__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../plugins/cloudinary/models/image-source */ \"./plugins/cloudinary/models/image-source.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n\nconst ClickableComponent = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('ClickableComponent');\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\n\n\nconst widthTransformation = {\n width: 132\n};\nclass ShoppablePanelItem extends ClickableComponent {\n constructor(player, initOptions) {\n super(player, initOptions);\n this.options_ = initOptions;\n this.isDragged = false;\n }\n handleClick(event) {\n event.preventDefault();\n event.stopPropagation();\n if (!this.el_.matches(`.dragged .${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.CLD_SPBL_ITEM}`)) {\n // Prevent click event if dragged\n this.options_.clickHandler(event);\n }\n this.isDragged = false;\n }\n getTitle() {\n return this.options_.conf.title;\n }\n createEl() {\n const el = super.createEl('a', {\n className: `${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.CLD_SPBL_ITEM} base-color-bg accent-color-text`,\n href: '#'\n });\n el.setAttribute('data-product-id', this.options_.conf.productId || '');\n el.setAttribute('data-product-name', this.options_.conf.productName || '');\n if (this.options_.conf.onHover) {\n addOnHover(el, this.options_.conf.onHover, this.options_.item.cloudinaryConfig());\n }\n if (this.options_.conf.onClick) {\n addOnClick(el, this.options_.conf.onClick);\n }\n const img = super.createEl('img', {\n className: _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.CLD_SPBL_IMAGE\n }, {\n src: this.options_.item.url(widthTransformation)\n });\n el.appendChild(img);\n if (this.getTitle()) {\n const info = dom.createEl('div', {\n className: 'cld-spbl-item-info base-color-semi-bg text-color-text'\n });\n const title = dom.createEl('span', {\n className: 'cld-spbl-item-title'\n }, {}, this.getTitle());\n info.appendChild(title);\n el.appendChild(info);\n }\n return el;\n }\n}\nconst addOnHover = (el, conf, cldConf) => {\n el.setAttribute('data-hover-action', conf.action);\n if (conf.action === _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.SHOPPABLE_HOVER_ACTIONS.OVERLAY) {\n const overlayText = dom.createEl('span', {\n className: 'cld-spbl-overlay-text base-color-text'\n }, {}, conf.args);\n const overlay = dom.createEl('span', {\n className: 'cld-spbl-overlay text-color-semi-bg base-color-text'\n }, {\n title: conf.args\n }, overlayText);\n el.appendChild(overlay);\n } else {\n const switchImgSource = new _plugins_cloudinary_models_image_source__WEBPACK_IMPORTED_MODULE_1__[\"default\"](conf.args.publicId, {\n cloudinaryConfig: cldConf,\n transformation: conf.args.transformation\n });\n const hoverImg = dom.createEl('img', {\n className: `${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.CLD_SPBL_IMAGE} cld-spbl-hover-img`\n }, {\n src: switchImgSource.url(widthTransformation)\n });\n el.appendChild(hoverImg);\n }\n};\nconst addOnClick = (el, conf) => {\n el.setAttribute('data-click-action', conf.action);\n el.setAttribute('data-pause', conf.pause);\n if (conf.action === _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.SHOPPABLE_CLICK_ACTIONS.SEEk) {\n el.setAttribute('data-seek', conf.args.time);\n } else if (conf.action === _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.SHOPPABLE_CLICK_ACTIONS.GO_TO) {\n el.setAttribute('data-goto-url', conf.args.url);\n }\n};\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('shoppablePanelItem', ShoppablePanelItem);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppablePanelItem);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/panel/shoppable-panel-item.js?");
|
|
54
54
|
|
|
55
55
|
/***/ }),
|
|
56
56
|
|
|
@@ -70,7 +70,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
70
70
|
\***********************************************************/
|
|
71
71
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
72
72
|
|
|
73
|
-
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 _panel_shoppable_panel_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./panel/shoppable-panel.js */ \"./components/shoppable-bar/panel/shoppable-panel.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\
|
|
73
|
+
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 _panel_shoppable_panel_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./panel/shoppable-panel.js */ \"./components/shoppable-bar/panel/shoppable-panel.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n\n\n\nconst dom = (video_js__WEBPACK_IMPORTED_MODULE_0___default().dom) || (video_js__WEBPACK_IMPORTED_MODULE_0___default());\nclass ShoppablePostWidget {\n constructor(player) {\n let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n this.options_ = {\n ...options,\n postPlay: true\n };\n this.player_ = player;\n this.render();\n\n // Handle drag-to-scroll\n this.handleDragToScroll();\n this.dispose = () => {\n this.layout_.dispose();\n };\n }\n handleDragToScroll() {\n const postModal = this.player_.postModal.el_;\n const slider = postModal.querySelector(`.${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_2__.CLD_SPBL_PANEL_CLASS}`);\n let isDown = false;\n let startX = 0;\n let scrollLeft = 0;\n slider.addEventListener('mousedown', e => {\n isDown = true;\n startX = e.pageX - slider.offsetLeft;\n scrollLeft = slider.scrollLeft;\n });\n document.addEventListener('mouseup', e => {\n isDown = false;\n setTimeout(() => {\n slider.classList.remove('dragged');\n }, 300);\n const x = e.pageX - slider.offsetLeft;\n const walk = x - startX;\n if (Math.abs(walk) > 5) {\n e.preventDefault();\n }\n });\n document.addEventListener('mousemove', e => {\n if (!isDown) {\n return;\n }\n e.preventDefault();\n const x = e.pageX - slider.offsetLeft;\n const walk = x - startX;\n slider.scrollLeft = scrollLeft - walk;\n if (Math.abs(walk) > 5 && !slider.classList.contains('dragged')) {\n slider.classList.add('dragged');\n }\n });\n }\n render() {\n this.player_.postModal = null;\n const el = dom.createEl('div', {\n className: 'cld-spbl-post-play'\n });\n const panel = new _panel_shoppable_panel_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.player_, this.options_);\n const title = dom.createEl('div', {\n className: 'cld-spbl-post-title base-color-text'\n }, {}, this.options_.bannerMsg || 'Shop the Video');\n\n // Background - poster + blur effect\n const bgSrc = this.player_.cloudinary.currentPoster();\n bgSrc.transformation([bgSrc.transformation().toOptions ? bgSrc.transformation().toOptions() : {}, {\n effect: 'blur:3000'\n }]);\n const panelBg = dom.createEl('div', {\n className: 'cld-spbl-post-play-bg',\n style: `background-image: url(\"${bgSrc.url()}\")`\n });\n const replayBtn = dom.createEl('button', {\n className: 'cld-spbl-replay-btn base-color-bg vjs-icon-replay',\n onclick: () => {\n this.player_.trigger('replay');\n this.player_.postModal.close();\n this.player_.play();\n }\n }, {}, 'Replay');\n el.appendChild(panelBg);\n el.appendChild(title);\n el.appendChild(panel.el());\n el.appendChild(replayBtn);\n this.player_.postModal = this.player_.createModal(el, {\n name: 'postModal',\n uncloseable: true\n });\n this.player_.addClass('cld-spbl-post-modal');\n this.player_.postModal.on('beforemodalclose', () => {\n this.player_.removeClass('cld-spbl-post-modal');\n });\n }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppablePostWidget);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/shoppable-post-widget.js?");
|
|
74
74
|
|
|
75
75
|
/***/ }),
|
|
76
76
|
|
|
@@ -90,7 +90,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
90
90
|
\******************************************************/
|
|
91
91
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
92
92
|
|
|
93
|
-
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 _layout_bar_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./layout/bar-layout */ \"./components/shoppable-bar/layout/bar-layout.js\");\n/* harmony import */ var _shoppable_post_widget__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shoppable-post-widget */ \"./components/shoppable-bar/shoppable-post-widget.js\");\n/* harmony import */ var _shoppable_widget_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shoppable-widget.scss */ \"./components/shoppable-bar/shoppable-widget.scss\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/consts */ \"./utils/consts.js\");\n\n\n\n\n\n\nclass ShoppableWidget {\n constructor(player) {\n let initOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n this.options_ = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__.SHOPPABLE_WIDGET_OPTIONS_DEFAULTS, initOptions);\n this.player_ = player;\n if (this.options_.showPostPlayOverlay) {\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_5__.PLAYER_EVENT.ENDED, () => {\n this.player_.addChild(new _shoppable_post_widget__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.player_, this.options_));\n });\n }\n const width = this.options_.width;\n this._injectCSS(
|
|
93
|
+
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 _layout_bar_layout__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./layout/bar-layout */ \"./components/shoppable-bar/layout/bar-layout.js\");\n/* harmony import */ var _shoppable_post_widget__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shoppable-post-widget */ \"./components/shoppable-bar/shoppable-post-widget.js\");\n/* harmony import */ var _shoppable_widget_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shoppable-widget.scss */ \"./components/shoppable-bar/shoppable-widget.scss\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils/consts */ \"./utils/consts.js\");\n\n\n\n\n\n\nclass ShoppableWidget {\n constructor(player) {\n let initOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n this.options_ = video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__.SHOPPABLE_WIDGET_OPTIONS_DEFAULTS, initOptions);\n this.player_ = player;\n if (this.options_.showPostPlayOverlay) {\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_5__.PLAYER_EVENT.ENDED, () => {\n this.player_.addChild(new _shoppable_post_widget__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.player_, this.options_));\n });\n }\n const width = this.options_.width;\n this._injectCSS(`\n .${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__.CLD_SPBL_INNER_BAR} {\n transform: translateX(${width});\n }\n .${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__.SHOPPABLE_PANEL_VISIBLE_CLASS} .vjs-control-bar {\n width: calc(100% - ${width});\n }\n .${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__.CLD_SPBL_TOGGLE_CLASS} {\n right: ${width};\n }\n .${_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_4__.CLD_SPBL_PANEL_CLASS}{\n width: ${width};\n }\n `);\n this._setListeners();\n }\n _setListeners() {\n const resizeHandler = this._resizeHandler.bind(this);\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_5__.PLAYER_EVENT.RESIZE, resizeHandler);\n window.addEventListener('resize', resizeHandler);\n this.dispose = () => {\n this.player_.off(_utils_consts__WEBPACK_IMPORTED_MODULE_5__.PLAYER_EVENT.RESIZE, resizeHandler);\n window.removeEventListener('resize', resizeHandler);\n this.layout_.dispose();\n };\n }\n _injectCSS(css) {\n const style = document.createElement('style');\n style.innerHTML = css;\n this.player_.el_.appendChild(style);\n }\n _resizeHandler() {\n const shoppableBarBreakpoints = [['sm', 0, 80], ['md', 81, 110], ['lg', 111, 170]];\n const shoppableBarWidth = parseFloat(this.options_.width) / 100.0 * this.player_.el_.clientWidth;\n let inRange = false;\n if (shoppableBarWidth) {\n for (const [name, min, max] of shoppableBarBreakpoints) {\n if (shoppableBarWidth > min && shoppableBarWidth <= max) {\n this.layout_.contentWrpEl_.setAttribute('size', name);\n inRange = name;\n }\n }\n if (!inRange) {\n this.layout_.contentWrpEl_.removeAttribute('size');\n }\n }\n }\n init() {\n this.render();\n }\n render() {\n this.layout_ = new _layout_bar_layout__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.player_, this.options_);\n }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppableWidget);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/shoppable-widget.js?");
|
|
94
94
|
|
|
95
95
|
/***/ }),
|
|
96
96
|
|
package/dist/shoppable.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3-edge.
|
|
3
|
-
* Built on 2025-12-
|
|
2
|
+
* Cloudinary Video Player v3.6.3-edge.10
|
|
3
|
+
* Built on 2025-12-30T09:40:45.212Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
|
-
(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[525],{9987:(t,e,o)=>{"use strict";o.d(e,{default:()=>Q});var s=o(6673),r=o.n(s);const a=function(t){const[e,o,s]=t.split(":").reverse();let r=null;return isNaN(e)||(r=60*(+s||0)*60+60*(+o||0)+ +e),r};var n=o(9339);const i={location:"right",toggleIcon:"",width:"20%",startState:"openOnPlay",autoClose:2,transformation:{quality:"auto",width:"auto",fetch_format:"auto",crop:"scale"},products:[],showPostPlayOverlay:!1},l="goto",c="seek",p="overlay",d="shoppable-panel-visible",h="shoppable-panel-hidden",u="shoppable-products-overlay",m="cld-spbl-panel",f="cld-spbl-toggle",g="cld-spbl-toggle-icon",y="cld-spbl-bar-inner",_="animate",v="cld-spbl-item",b="cld-spbl-img";var C=o(1104);function E(t,e,o){return(e=function(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var s=o.call(t,e||"default");if("object"!=typeof s)return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}const P=r().dom||r(),T=r().getComponent("Component");class w extends T{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e),E(this,"renderProducts",()=>{this.player_.removeClass(d),this.player_.addClass(h),this.player_.addClass(u),this.layout_.innerHTML="";const t=this.player_.currentTime();this.options_.products.filter(e=>e.hotspots&&e.hotspots.some(e=>a(e.time)===t)).forEach(e=>{const o=(0,n.I)(e.hotspots,e=>a(e.time)===t),s=P.createEl("div",{className:"cld-spbl-product-hotspot-name"},{},e.productName),r=P.createEl("div",{className:"cld-spbl-product-tooltip cld-spbl-product-tooltip-"+o.tooltipPosition},{},s),i=P.createEl("a",{className:"cld-spbl-product-hotspot accent-color-text",href:o.clickUrl,target:"_blank"},{style:"left:"+o.x+"; top:"+o.y+";"},r);this.layout_.appendChild(i)}),this.player_.one(C.f.SEEKING,this.clearLayout),this.player_.one(C.f.PLAY,this.clearLayout)}),E(this,"clearLayout",()=>{this.layout_.innerHTML="",this.player_.removeClass(u)}),this.options_=e,this.player_=t,this.player_.on(C.f.SHOW_PRODUCTS_OVERLAY,this.renderProducts),this.dispose=()=>{this.layout_.dispose()}}createEl(){const t=this.player_.currentDimensions();return this.layout_=P.createEl("div",{className:"cld-spbl-products-overlay",style:"padding-top: ".concat(t.height/t.width*100,"%;")}),this.layout_}}r().registerComponent("ShoppableProductsOverlay",w);const N=w,O=r().dom||r(),L=r().getComponent("ClickableComponent");class x extends L{constructor(t,e){super(t,e),this.options_=e}handleClick(t){t.preventDefault(),t.stopPropagation(),this.options_.clickHandler()}createEl(){let t={},e={};this.options_.toggleIcon?(t={className:"".concat(g," ").concat("cld-spbl-toggle-custom-icon"," ").concat("vjs-icon-close")},e={style:"background-image: url(".concat(this.options_.toggleIcon,")")}):t={className:"".concat(g," ").concat("vjs-icon-cart")};const o=O.createEl("span",t,e),s=super.createEl("a",{className:"".concat(f," base-color-bg")});return s.appendChild(o),this.player_.on(C.f.PRODUCT_BAR_MIN,()=>{setTimeout(()=>{o.classList.add(_),setTimeout(()=>{o.classList.remove(_)},1e3)},500)}),s}}r().registerComponent("shoppablePanelToggle",x);const k=x,S=r().dom||r(),j=r().getComponent("Component");class I extends j{constructor(t,e){super(t,e),this.player_=t,this.player().addClass("cld-shoppable-panel"),this.player().addClass(h),this.contentWrpEl_=S.createEl("div",{className:"cld-spbl-bar"}),this.contentBannerEl_=S.createEl("div",{className:"cld-spbl-banner-msg base-color-text"},{},this.options_.bannerMsg||"Shop the Video"),this.contentWrpEl_.appendChild(this.contentBannerEl_);const o=new N(this.player_,this.options_);this.contentWrpEl_.appendChild(o.el_),this.contentEl_=S.createEl("div",{className:y}),this.contentWrpEl_.appendChild(this.contentEl_),this.player().el().appendChild(this.contentWrpEl_),this.addChild(new k(this.player_,{toggleIcon:this.options_.toggleIcon,clickHandler:()=>{this.togglePanel()}})),this.addChild("ShoppablePanel",this.options_),this.dispose=()=>{this.removeLayout(),super.dispose()},this.togglePanel=t=>{!0===t?(this.player().removeClass(h),this.player().addClass(d)):!1===t?(this.player().removeClass(d),this.player().addClass(h)):(this.player().toggleClass(h),this.player().toggleClass(d));let e=this.player().hasClass(d)?"productBarMax":"productBarMin";this.player().trigger(e)},"open"===this.options_.startState&&this.togglePanel(!0),this.player_.on(C.f.PLAY,()=>{this.player_.currentTime()<.01&&("openOnPlay"===this.options_.startState&&this.togglePanel(!0,this.options_.autoClose),this.options_.autoClose&&-1!==this.options_.startState.indexOf("open")&&setTimeout(()=>{this.contentEl_.matches(":hover")?this.contentEl_.addEventListener("mouseleave",()=>{this.togglePanel(!1)},{once:!0}):this.togglePanel(!1)},1e3*this.options_.autoClose))})}createEl(){return super.createEl("div")}}r().registerComponent("shoppableBarLayout",I);const A=I;var H=o(2858),M=o.n(H),D=o(4650);const W=r().getComponent("ClickableComponent"),B=r().dom||r(),R={width:132};class z extends W{constructor(t,e){super(t,e),this.options_=e,this.isDragged=!1}handleClick(t){t.preventDefault(),t.stopPropagation(),this.el_.matches(".dragged .".concat(v))||this.options_.clickHandler(t),this.isDragged=!1}getTitle(){return this.options_.conf.title}createEl(){const t=super.createEl("a",{className:"".concat(v," base-color-bg accent-color-text"),href:"#"});t.setAttribute("data-product-id",this.options_.conf.productId||""),t.setAttribute("data-product-name",this.options_.conf.productName||""),this.options_.conf.onHover&&U(t,this.options_.conf.onHover,this.options_.item.cloudinaryConfig()),this.options_.conf.onClick&&V(t,this.options_.conf.onClick);const e=super.createEl("img",{className:b},{src:this.options_.item.url(R)});if(t.appendChild(e),this.getTitle()){const e=B.createEl("div",{className:"cld-spbl-item-info base-color-semi-bg text-color-text"}),o=B.createEl("span",{className:"cld-spbl-item-title"},{},this.getTitle());e.appendChild(o),t.appendChild(e)}return t}}const U=(t,e,o)=>{if(t.setAttribute("data-hover-action",e.action),e.action===p){const o=B.createEl("span",{className:"cld-spbl-overlay-text base-color-text"},{},e.args),s=B.createEl("span",{className:"cld-spbl-overlay text-color-semi-bg base-color-text"},{title:e.args},o);t.appendChild(s)}else{const s=new D.A(e.args.publicId,{cloudinaryConfig:o,transformation:e.args.transformation}),r=B.createEl("img",{className:"".concat(b," cld-spbl-hover-img")},{src:s.url(R)});t.appendChild(r)}},V=(t,e)=>{t.setAttribute("data-click-action",e.action),t.setAttribute("data-pause",e.pause),e.action===c?t.setAttribute("data-seek",e.args.time):e.action===l&&t.setAttribute("data-goto-url",e.args.url)};r().registerComponent("shoppablePanelItem",z);const X=z,G=r().getComponent("Component");class Y extends G{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e),this.options=e;const o=()=>{this.render()};t.on(C.f.SHOPPABLE_ITEM_CHANGED,o),this.render(),this.dispose=()=>{super.dispose(),t.off(C.f.SHOPPABLE_ITEM_CHANGED,o)}}createEl(){const t=super.createEl();return[m,"base-color-bg"].map(e=>t.classList.add(e)),t}removeAll(){const t=this.children();for(let e=t.length-1;e>=0;--e)this.removeChild(t[e])}getItems(){const t=this.player_.cloudinary.cloudinaryConfig();return this.options.products.map(e=>{e.onHover&&"object"==typeof e.onHover.args&&(e.onHover.args.transformation=Object.assign({},this.options.transformation,e.onHover.args.transformation));const o={productId:e.productId,productName:e.productName,title:e.title,onHover:e.onHover,onClick:e.onClick,startTime:e.startTime,endTime:e.endTime};return{imageSrc:new D.A(e.publicId,{cloudinaryConfig:t,transformation:Object.assign({},this.options.transformation,e.transformation)}),conf:o}})}scrollToActiveItem(){const t=this.el_.getElementsByClassName("active");if(t.length>0){const e=t[0].offsetTop-12;"scrollBehavior"in document.documentElement.style?this.el_.scrollTo({top:e,behavior:"smooth"}):this.el_.scrollTop=e}}render(){this.removeAll();const t=this.getItems(),e=M()(()=>this.scrollToActiveItem(),1e3);t.forEach((t,o)=>{const s=new X(this.player(),{item:t.imageSrc,conf:t.conf,next:1===o,current:0===o,clickHandler:t=>{let e=t.currentTarget||t.target,o=this.player_.ended()?"productClickPost":"productClick";if(this.player_.trigger(o,{productId:e.dataset.productId,productName:e.dataset.productName}),e.dataset.clickAction===l)window.open(e.dataset.gotoUrl,"_blank");else if(e.dataset.clickAction===c){const t=a(e.dataset.seek);null!==t&&(this.player_.addClass("vjs-has-started"),this.player_.postModal&&this.player_.postModal.close(),this.player_.currentTime(t),this.player_.removeClass(d),this.player_.addClass(h),this.player_.addClass(u),this.player_.one("seeked",()=>this.player_.trigger("showProductsOverlay")))}"false"!==e.dataset.pause&&(this.player_.pause(),a(e.dataset.pause)&&setTimeout(()=>{this.player_.play()},1e3*a(e.dataset.pause)))}});s.on("mouseover",t=>{let e=t.currentTarget||t.target,o=this.player_.ended()?"productHoverPost":"productHover";this.player_.trigger(o,{productId:e.dataset.productId,productName:e.dataset.productName})}),void 0!==t.conf.startTime&&void 0!==t.conf.endTime&&this.player_.on(C.f.TIME_UPDATE,()=>{const o=this.player_.currentTime();o>=t.conf.startTime&&o<t.conf.endTime?(s.el_.classList.add("active"),e()):s.el_.classList.contains("active")&&s.el_.classList.remove("active")}),this.addChild(s)})}}r().registerComponent("shoppablePanel",Y);const $=Y;function q(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),o.push.apply(o,s)}return o}function Z(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?q(Object(o),!0).forEach(function(e){F(t,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):q(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function F(t,e,o){return(e=function(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var s=o.call(t,e||"default");if("object"!=typeof s)return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}const K=r().dom||r();const J=class{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.options_=Z(Z({},e),{},{postPlay:!0}),this.player_=t,this.render(),this.handleDragToScroll(),this.dispose=()=>{this.layout_.dispose()}}handleDragToScroll(){const t=this.player_.postModal.el_.querySelector(".".concat(m));let e=!1,o=0,s=0;t.addEventListener("mousedown",r=>{e=!0,o=r.pageX-t.offsetLeft,s=t.scrollLeft}),document.addEventListener("mouseup",s=>{e=!1,setTimeout(()=>{t.classList.remove("dragged")},300);const r=s.pageX-t.offsetLeft-o;Math.abs(r)>5&&s.preventDefault()}),document.addEventListener("mousemove",r=>{if(!e)return;r.preventDefault();const a=r.pageX-t.offsetLeft-o;t.scrollLeft=s-a,Math.abs(a)>5&&!t.classList.contains("dragged")&&t.classList.add("dragged")})}render(){this.player_.postModal=null;const t=K.createEl("div",{className:"cld-spbl-post-play"}),e=new $(this.player_,this.options_),o=K.createEl("div",{className:"cld-spbl-post-title base-color-text"},{},this.options_.bannerMsg||"Shop the Video"),s=this.player_.cloudinary.currentPoster();s.transformation([s.transformation().toOptions?s.transformation().toOptions():{},{effect:"blur:3000"}]);const r=K.createEl("div",{className:"cld-spbl-post-play-bg",style:'background-image: url("'.concat(s.url(),'")')}),a=K.createEl("button",{className:"cld-spbl-replay-btn base-color-bg vjs-icon-replay",onclick:()=>{this.player_.trigger("replay"),this.player_.postModal.close(),this.player_.play()}},{},"Replay");t.appendChild(r),t.appendChild(o),t.appendChild(e.el()),t.appendChild(a),this.player_.postModal=this.player_.createModal(t,{name:"postModal",uncloseable:!0}),this.player_.addClass("cld-spbl-post-modal"),this.player_.postModal.on("beforemodalclose",()=>{this.player_.removeClass("cld-spbl-post-modal")})}};const Q=class{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.options_=r().obj.merge(i,e),this.player_=t,this.options_.showPostPlayOverlay&&this.player_.on(C.f.ENDED,()=>{this.player_.addChild(new J(this.player_,this.options_))});const o=this.options_.width;this._injectCSS("\n .".concat(y," {\n transform: translateX(").concat(o,");\n }\n .").concat(d," .vjs-control-bar {\n width: calc(100% - ").concat(o,");\n }\n .").concat(f," {\n right: ").concat(o,";\n }\n .").concat(m,"{\n width: ").concat(o,";\n }\n ")),this._setListeners()}_setListeners(){const t=this._resizeHandler.bind(this);this.player_.on(C.f.RESIZE,t),window.addEventListener("resize",t),this.dispose=()=>{this.player_.off(C.f.RESIZE,t),window.removeEventListener("resize",t),this.layout_.dispose()}}_injectCSS(t){const e=document.createElement("style");e.innerHTML=t,this.player_.el_.appendChild(e)}_resizeHandler(){const t=[["sm",0,80],["md",81,110],["lg",111,170]],e=parseFloat(this.options_.width)/100*this.player_.el_.clientWidth;let o=!1;if(e){for(const[s,r,a]of t)e>r&&e<=a&&(this.layout_.contentWrpEl_.setAttribute("size",s),o=s);o||this.layout_.contentWrpEl_.removeAttribute("size")}}init(){this.render()}render(){this.layout_=new A(this.player_,this.options_)}}},8812:(t,e,o)=>{var s=o(2140),r=/^\s+/;t.exports=function(t){return t?t.slice(0,s(t)+1).replace(r,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var o=t.length;o--&&e.test(t.charAt(o)););return o}},6177:(t,e,o)=>{var s=o(8953),r=o(3664),a=o(5378),n=Math.max,i=Math.min;t.exports=function(t,e,o){var l,c,p,d,h,u,m=0,f=!1,g=!1,y=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function _(e){var o=l,s=c;return l=c=void 0,m=e,d=t.apply(s,o)}function v(t){var o=t-u;return void 0===u||o>=e||o<0||g&&t-m>=p}function b(){var t=r();if(v(t))return C(t);h=setTimeout(b,function(t){var o=e-(t-u);return g?i(o,p-(t-m)):o}(t))}function C(t){return h=void 0,y&&l?_(t):(l=c=void 0,d)}function E(){var t=r(),o=v(t);if(l=arguments,c=this,u=t,o){if(void 0===h)return function(t){return m=t,h=setTimeout(b,e),f?_(t):d}(u);if(g)return clearTimeout(h),h=setTimeout(b,e),_(u)}return void 0===h&&(h=setTimeout(b,e)),d}return e=a(e)||0,s(o)&&(f=!!o.leading,p=(g="maxWait"in o)?n(a(o.maxWait)||0,e):p,y="trailing"in o?!!o.trailing:y),E.cancel=function(){void 0!==h&&clearTimeout(h),m=0,l=u=c=h=void 0},E.flush=function(){return void 0===h?d:C(r())},E}},3664:(t,e,o)=>{var s=o(1433);t.exports=function(){return s.Date.now()}},2858:(t,e,o)=>{var s=o(6177),r=o(8953);t.exports=function(t,e,o){var a=!0,n=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return r(o)&&(a="leading"in o?!!o.leading:a,n="trailing"in o?!!o.trailing:n),s(t,e,{leading:a,maxWait:e,trailing:n})}},5378:(t,e,o)=>{var s=o(8812),r=o(8953),a=o(5414),n=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,l=/^0o[0-7]+$/i,c=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return NaN;if(r(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=r(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=s(t);var o=i.test(t);return o||l.test(t)?c(t.slice(2),o?2:8):n.test(t)?NaN:+t}}}]);
|
|
6
|
+
(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[525],{9987:(t,e,s)=>{"use strict";s.d(e,{default:()=>Z});var o=s(6673),a=s.n(o);const i=function(t){const[e,s,o]=t.split(":").reverse();let a=null;return isNaN(e)||(a=60*(+o||0)*60+60*(+s||0)+ +e),a};var r=s(9339);const n={location:"right",toggleIcon:"",width:"20%",startState:"openOnPlay",autoClose:2,transformation:{quality:"auto",width:"auto",fetch_format:"auto",crop:"scale"},products:[],showPostPlayOverlay:!1},l="goto",c="seek",p="overlay",d="shoppable-panel-visible",h="shoppable-panel-hidden",u="shoppable-products-overlay",m="cld-spbl-panel",g="cld-spbl-toggle",_="cld-spbl-toggle-icon",y="cld-spbl-bar-inner",f="animate",v="cld-spbl-item",b="cld-spbl-img";var C=s(1104);const E=a().dom||a(),T=a().getComponent("Component");class N extends T{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e),this.options_=e,this.player_=t,this.player_.on(C.f.SHOW_PRODUCTS_OVERLAY,this.renderProducts),this.dispose=()=>{this.layout_.dispose()}}renderProducts=()=>{this.player_.removeClass(d),this.player_.addClass(h),this.player_.addClass(u),this.layout_.innerHTML="";const t=this.player_.currentTime();this.options_.products.filter(e=>e.hotspots&&e.hotspots.some(e=>i(e.time)===t)).forEach(e=>{const s=(0,r.I)(e.hotspots,e=>i(e.time)===t),o=E.createEl("div",{className:"cld-spbl-product-hotspot-name"},{},e.productName),a=E.createEl("div",{className:"cld-spbl-product-tooltip cld-spbl-product-tooltip-"+s.tooltipPosition},{},o),n=E.createEl("a",{className:"cld-spbl-product-hotspot accent-color-text",href:s.clickUrl,target:"_blank"},{style:"left:"+s.x+"; top:"+s.y+";"},a);this.layout_.appendChild(n)}),this.player_.one(C.f.SEEKING,this.clearLayout),this.player_.one(C.f.PLAY,this.clearLayout)};clearLayout=()=>{this.layout_.innerHTML="",this.player_.removeClass(u)};createEl(){const t=this.player_.currentDimensions();return this.layout_=E.createEl("div",{className:"cld-spbl-products-overlay",style:`padding-top: ${t.height/t.width*100}%;`}),this.layout_}}a().registerComponent("ShoppableProductsOverlay",N);const P=N,L=a().dom||a(),x=a().getComponent("ClickableComponent");class w extends x{constructor(t,e){super(t,e),this.options_=e}handleClick(t){t.preventDefault(),t.stopPropagation(),this.options_.clickHandler()}createEl(){let t={},e={};this.options_.toggleIcon?(t={className:`${_} cld-spbl-toggle-custom-icon vjs-icon-close`},e={style:`background-image: url(${this.options_.toggleIcon})`}):t={className:`${_} vjs-icon-cart`};const s=L.createEl("span",t,e),o=super.createEl("a",{className:`${g} base-color-bg`});return o.appendChild(s),this.player_.on(C.f.PRODUCT_BAR_MIN,()=>{setTimeout(()=>{s.classList.add(f),setTimeout(()=>{s.classList.remove(f)},1e3)},500)}),o}}a().registerComponent("shoppablePanelToggle",w);const k=w,I=a().dom||a(),A=a().getComponent("Component");class H extends A{constructor(t,e){super(t,e),this.player_=t,this.player().addClass("cld-shoppable-panel"),this.player().addClass(h),this.contentWrpEl_=I.createEl("div",{className:"cld-spbl-bar"}),this.contentBannerEl_=I.createEl("div",{className:"cld-spbl-banner-msg base-color-text"},{},this.options_.bannerMsg||"Shop the Video"),this.contentWrpEl_.appendChild(this.contentBannerEl_);const s=new P(this.player_,this.options_);this.contentWrpEl_.appendChild(s.el_),this.contentEl_=I.createEl("div",{className:y}),this.contentWrpEl_.appendChild(this.contentEl_),this.player().el().appendChild(this.contentWrpEl_),this.addChild(new k(this.player_,{toggleIcon:this.options_.toggleIcon,clickHandler:()=>{this.togglePanel()}})),this.addChild("ShoppablePanel",this.options_),this.dispose=()=>{this.removeLayout(),super.dispose()},this.togglePanel=t=>{!0===t?(this.player().removeClass(h),this.player().addClass(d)):!1===t?(this.player().removeClass(d),this.player().addClass(h)):(this.player().toggleClass(h),this.player().toggleClass(d));let e=this.player().hasClass(d)?"productBarMax":"productBarMin";this.player().trigger(e)},"open"===this.options_.startState&&this.togglePanel(!0),this.player_.on(C.f.PLAY,()=>{this.player_.currentTime()<.01&&("openOnPlay"===this.options_.startState&&this.togglePanel(!0,this.options_.autoClose),this.options_.autoClose&&-1!==this.options_.startState.indexOf("open")&&setTimeout(()=>{this.contentEl_.matches(":hover")?this.contentEl_.addEventListener("mouseleave",()=>{this.togglePanel(!1)},{once:!0}):this.togglePanel(!1)},1e3*this.options_.autoClose))})}createEl(){return super.createEl("div")}}a().registerComponent("shoppableBarLayout",H);const M=H;var S=s(2858),$=s.n(S),O=s(4650);const D=a().getComponent("ClickableComponent"),W=a().dom||a(),j={width:132};class B extends D{constructor(t,e){super(t,e),this.options_=e,this.isDragged=!1}handleClick(t){t.preventDefault(),t.stopPropagation(),this.el_.matches(`.dragged .${v}`)||this.options_.clickHandler(t),this.isDragged=!1}getTitle(){return this.options_.conf.title}createEl(){const t=super.createEl("a",{className:`${v} base-color-bg accent-color-text`,href:"#"});t.setAttribute("data-product-id",this.options_.conf.productId||""),t.setAttribute("data-product-name",this.options_.conf.productName||""),this.options_.conf.onHover&&R(t,this.options_.conf.onHover,this.options_.item.cloudinaryConfig()),this.options_.conf.onClick&&z(t,this.options_.conf.onClick);const e=super.createEl("img",{className:b},{src:this.options_.item.url(j)});if(t.appendChild(e),this.getTitle()){const e=W.createEl("div",{className:"cld-spbl-item-info base-color-semi-bg text-color-text"}),s=W.createEl("span",{className:"cld-spbl-item-title"},{},this.getTitle());e.appendChild(s),t.appendChild(e)}return t}}const R=(t,e,s)=>{if(t.setAttribute("data-hover-action",e.action),e.action===p){const s=W.createEl("span",{className:"cld-spbl-overlay-text base-color-text"},{},e.args),o=W.createEl("span",{className:"cld-spbl-overlay text-color-semi-bg base-color-text"},{title:e.args},s);t.appendChild(o)}else{const o=new O.A(e.args.publicId,{cloudinaryConfig:s,transformation:e.args.transformation}),a=W.createEl("img",{className:`${b} cld-spbl-hover-img`},{src:o.url(j)});t.appendChild(a)}},z=(t,e)=>{t.setAttribute("data-click-action",e.action),t.setAttribute("data-pause",e.pause),e.action===c?t.setAttribute("data-seek",e.args.time):e.action===l&&t.setAttribute("data-goto-url",e.args.url)};a().registerComponent("shoppablePanelItem",B);const U=B,V=a().getComponent("Component");class X extends V{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(t,e),this.options=e;const s=()=>{this.render()};t.on(C.f.SHOPPABLE_ITEM_CHANGED,s),this.render(),this.dispose=()=>{super.dispose(),t.off(C.f.SHOPPABLE_ITEM_CHANGED,s)}}createEl(){const t=super.createEl();return[m,"base-color-bg"].map(e=>t.classList.add(e)),t}removeAll(){const t=this.children();for(let e=t.length-1;e>=0;--e)this.removeChild(t[e])}getItems(){const t=this.player_.cloudinary.cloudinaryConfig();return this.options.products.map(e=>{e.onHover&&"object"==typeof e.onHover.args&&(e.onHover.args.transformation=Object.assign({},this.options.transformation,e.onHover.args.transformation));const s={productId:e.productId,productName:e.productName,title:e.title,onHover:e.onHover,onClick:e.onClick,startTime:e.startTime,endTime:e.endTime};return{imageSrc:new O.A(e.publicId,{cloudinaryConfig:t,transformation:Object.assign({},this.options.transformation,e.transformation)}),conf:s}})}scrollToActiveItem(){const t=this.el_.getElementsByClassName("active");if(t.length>0){const e=t[0].offsetTop-12;"scrollBehavior"in document.documentElement.style?this.el_.scrollTo({top:e,behavior:"smooth"}):this.el_.scrollTop=e}}render(){this.removeAll();const t=this.getItems(),e=$()(()=>this.scrollToActiveItem(),1e3);t.forEach((t,s)=>{const o=new U(this.player(),{item:t.imageSrc,conf:t.conf,next:1===s,current:0===s,clickHandler:t=>{let e=t.currentTarget||t.target,s=this.player_.ended()?"productClickPost":"productClick";if(this.player_.trigger(s,{productId:e.dataset.productId,productName:e.dataset.productName}),e.dataset.clickAction===l)window.open(e.dataset.gotoUrl,"_blank");else if(e.dataset.clickAction===c){const t=i(e.dataset.seek);null!==t&&(this.player_.addClass("vjs-has-started"),this.player_.postModal&&this.player_.postModal.close(),this.player_.currentTime(t),this.player_.removeClass(d),this.player_.addClass(h),this.player_.addClass(u),this.player_.one("seeked",()=>this.player_.trigger("showProductsOverlay")))}"false"!==e.dataset.pause&&(this.player_.pause(),i(e.dataset.pause)&&setTimeout(()=>{this.player_.play()},1e3*i(e.dataset.pause)))}});o.on("mouseover",t=>{let e=t.currentTarget||t.target,s=this.player_.ended()?"productHoverPost":"productHover";this.player_.trigger(s,{productId:e.dataset.productId,productName:e.dataset.productName})}),void 0!==t.conf.startTime&&void 0!==t.conf.endTime&&this.player_.on(C.f.TIME_UPDATE,()=>{const s=this.player_.currentTime();s>=t.conf.startTime&&s<t.conf.endTime?(o.el_.classList.add("active"),e()):o.el_.classList.contains("active")&&o.el_.classList.remove("active")}),this.addChild(o)})}}a().registerComponent("shoppablePanel",X);const G=X,Y=a().dom||a();const q=class{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.options_={...e,postPlay:!0},this.player_=t,this.render(),this.handleDragToScroll(),this.dispose=()=>{this.layout_.dispose()}}handleDragToScroll(){const t=this.player_.postModal.el_.querySelector(`.${m}`);let e=!1,s=0,o=0;t.addEventListener("mousedown",a=>{e=!0,s=a.pageX-t.offsetLeft,o=t.scrollLeft}),document.addEventListener("mouseup",o=>{e=!1,setTimeout(()=>{t.classList.remove("dragged")},300);const a=o.pageX-t.offsetLeft-s;Math.abs(a)>5&&o.preventDefault()}),document.addEventListener("mousemove",a=>{if(!e)return;a.preventDefault();const i=a.pageX-t.offsetLeft-s;t.scrollLeft=o-i,Math.abs(i)>5&&!t.classList.contains("dragged")&&t.classList.add("dragged")})}render(){this.player_.postModal=null;const t=Y.createEl("div",{className:"cld-spbl-post-play"}),e=new G(this.player_,this.options_),s=Y.createEl("div",{className:"cld-spbl-post-title base-color-text"},{},this.options_.bannerMsg||"Shop the Video"),o=this.player_.cloudinary.currentPoster();o.transformation([o.transformation().toOptions?o.transformation().toOptions():{},{effect:"blur:3000"}]);const a=Y.createEl("div",{className:"cld-spbl-post-play-bg",style:`background-image: url("${o.url()}")`}),i=Y.createEl("button",{className:"cld-spbl-replay-btn base-color-bg vjs-icon-replay",onclick:()=>{this.player_.trigger("replay"),this.player_.postModal.close(),this.player_.play()}},{},"Replay");t.appendChild(a),t.appendChild(s),t.appendChild(e.el()),t.appendChild(i),this.player_.postModal=this.player_.createModal(t,{name:"postModal",uncloseable:!0}),this.player_.addClass("cld-spbl-post-modal"),this.player_.postModal.on("beforemodalclose",()=>{this.player_.removeClass("cld-spbl-post-modal")})}};const Z=class{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.options_=a().obj.merge(n,e),this.player_=t,this.options_.showPostPlayOverlay&&this.player_.on(C.f.ENDED,()=>{this.player_.addChild(new q(this.player_,this.options_))});const s=this.options_.width;this._injectCSS(`\n .${y} {\n transform: translateX(${s});\n }\n .${d} .vjs-control-bar {\n width: calc(100% - ${s});\n }\n .${g} {\n right: ${s};\n }\n .${m}{\n width: ${s};\n }\n `),this._setListeners()}_setListeners(){const t=this._resizeHandler.bind(this);this.player_.on(C.f.RESIZE,t),window.addEventListener("resize",t),this.dispose=()=>{this.player_.off(C.f.RESIZE,t),window.removeEventListener("resize",t),this.layout_.dispose()}}_injectCSS(t){const e=document.createElement("style");e.innerHTML=t,this.player_.el_.appendChild(e)}_resizeHandler(){const t=[["sm",0,80],["md",81,110],["lg",111,170]],e=parseFloat(this.options_.width)/100*this.player_.el_.clientWidth;let s=!1;if(e){for(const[o,a,i]of t)e>a&&e<=i&&(this.layout_.contentWrpEl_.setAttribute("size",o),s=o);s||this.layout_.contentWrpEl_.removeAttribute("size")}}init(){this.render()}render(){this.layout_=new M(this.player_,this.options_)}}},8812:(t,e,s)=>{var o=s(2140),a=/^\s+/;t.exports=function(t){return t?t.slice(0,o(t)+1).replace(a,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var s=t.length;s--&&e.test(t.charAt(s)););return s}},6177:(t,e,s)=>{var o=s(8953),a=s(3664),i=s(5378),r=Math.max,n=Math.min;t.exports=function(t,e,s){var l,c,p,d,h,u,m=0,g=!1,_=!1,y=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function f(e){var s=l,o=c;return l=c=void 0,m=e,d=t.apply(o,s)}function v(t){var s=t-u;return void 0===u||s>=e||s<0||_&&t-m>=p}function b(){var t=a();if(v(t))return C(t);h=setTimeout(b,function(t){var s=e-(t-u);return _?n(s,p-(t-m)):s}(t))}function C(t){return h=void 0,y&&l?f(t):(l=c=void 0,d)}function E(){var t=a(),s=v(t);if(l=arguments,c=this,u=t,s){if(void 0===h)return function(t){return m=t,h=setTimeout(b,e),g?f(t):d}(u);if(_)return clearTimeout(h),h=setTimeout(b,e),f(u)}return void 0===h&&(h=setTimeout(b,e)),d}return e=i(e)||0,o(s)&&(g=!!s.leading,p=(_="maxWait"in s)?r(i(s.maxWait)||0,e):p,y="trailing"in s?!!s.trailing:y),E.cancel=function(){void 0!==h&&clearTimeout(h),m=0,l=u=c=h=void 0},E.flush=function(){return void 0===h?d:C(a())},E}},3664:(t,e,s)=>{var o=s(1433);t.exports=function(){return o.Date.now()}},2858:(t,e,s)=>{var o=s(6177),a=s(8953);t.exports=function(t,e,s){var i=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return a(s)&&(i="leading"in s?!!s.leading:i,r="trailing"in s?!!s.trailing:r),o(t,e,{leading:i,maxWait:e,trailing:r})}},5378:(t,e,s)=>{var o=s(8812),a=s(8953),i=s(5414),r=/^[-+]0x[0-9a-f]+$/i,n=/^0b[01]+$/i,l=/^0o[0-7]+$/i,c=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(i(t))return NaN;if(a(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=a(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=o(t);var s=n.test(t);return s||l.test(t)?c(t.slice(2),s?2:8):r.test(t)?NaN:+t}}}]);
|
package/dist/visual-search.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3-edge.
|
|
3
|
-
* Built on 2025-12-
|
|
2
|
+
* Cloudinary Video Player v3.6.3-edge.10
|
|
3
|
+
* Built on 2025-12-30T09:40:59.004Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
6
|
"use strict";
|
|
@@ -40,7 +40,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
40
40
|
\***********************************************************/
|
|
41
41
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
42
42
|
|
|
43
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SearchResults: () => (/* binding */ SearchResults)\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 SearchResults = player => {\n const clearMarkers = () => {\n player.$$('.vjs-visual-search-marker').forEach(el => el.remove());\n player.$$('.vjs-visual-search-results-wrapper').forEach(el => el.remove());\n\n // Remove the class that indicates search results are displayed\n player.removeClass('vjs-visual-search-results-active');\n };\n const displayResults = results => {\n // Clear existing markers\n clearMarkers();\n const total = player.duration();\n const seekBar = player.controlBar.progressControl.seekBar;\n\n // Create wrapper for search results\n const wrapperEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n className: 'vjs-visual-search-results-wrapper',\n role: 'presentation'\n });\n\n // Add markers for each result\n results.forEach(result => {\n const {\n start_time,\n end_time\n } = result;\n const position = start_time / total * 100;\n const width = (end_time - start_time) / total * 100;\n const time =
|
|
43
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SearchResults: () => (/* binding */ SearchResults)\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 SearchResults = player => {\n const clearMarkers = () => {\n player.$$('.vjs-visual-search-marker').forEach(el => el.remove());\n player.$$('.vjs-visual-search-results-wrapper').forEach(el => el.remove());\n\n // Remove the class that indicates search results are displayed\n player.removeClass('vjs-visual-search-results-active');\n };\n const displayResults = results => {\n // Clear existing markers\n clearMarkers();\n const total = player.duration();\n const seekBar = player.controlBar.progressControl.seekBar;\n\n // Create wrapper for search results\n const wrapperEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n className: 'vjs-visual-search-results-wrapper',\n role: 'presentation'\n });\n\n // Add markers for each result\n results.forEach(result => {\n const {\n start_time,\n end_time\n } = result;\n const position = start_time / total * 100;\n const width = (end_time - start_time) / total * 100;\n const time = `${Math.floor(start_time / 60)}:${Math.floor(start_time % 60).toString().padStart(2, '0')}`;\n const markerEl = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n className: 'vjs-control vjs-visual-search-marker',\n style: `left: ${position}%; width: ${width}%`,\n tabIndex: 0,\n role: 'button',\n title: `Search result at ${time}`,\n ariaLabel: `Search result at ${time}`\n });\n wrapperEl.appendChild(markerEl);\n\n // Add click handler to jump to this time\n markerEl.addEventListener('click', () => {\n player.currentTime(start_time);\n });\n\n // Add keyboard support\n markerEl.addEventListener('keydown', e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n player.currentTime(start_time);\n }\n });\n });\n\n // Add wrapper to seek bar\n seekBar.el().appendChild(wrapperEl);\n\n // Add a class to indicate search results are displayed\n if (results.length > 0) {\n player.addClass('vjs-visual-search-results-active');\n }\n };\n return {\n displayResults,\n clearMarkers\n };\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/visual-search/components/SearchResults.js?");
|
|
44
44
|
|
|
45
45
|
/***/ }),
|
|
46
46
|
|
|
@@ -50,7 +50,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
50
50
|
\************************************************/
|
|
51
51
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
52
52
|
|
|
53
|
-
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 _components_SearchButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/SearchButton */ \"./plugins/visual-search/components/SearchButton.js\");\n/* harmony import */ var _components_SearchInput__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/SearchInput */ \"./plugins/visual-search/components/SearchInput.js\");\n/* harmony import */ var _components_SearchResults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/SearchResults */ \"./plugins/visual-search/components/SearchResults.js\");\n/* harmony import */ var _visual_search_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./visual-search.scss */ \"./plugins/visual-search/visual-search.scss\");\n\n\n\n\n\nconst visualSearch = (options, player) => {\n player.addClass('vjs-visual-search');\n let isSearchActive = false;\n const searchResults = (0,_components_SearchResults__WEBPACK_IMPORTED_MODULE_3__.SearchResults)(player);\n const performSearch = async query => {\n const searchButton = player.$('.vjs-visual-search-button');\n searchButton.classList.add('vjs-waiting');\n try {\n const source = player.cloudinary.source();\n const publicId = source.publicId();\n const transformation = Object.assign({}, source.transformation());\n transformation.flags = transformation.flags || [];\n transformation.flags.push(
|
|
53
|
+
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 _components_SearchButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/SearchButton */ \"./plugins/visual-search/components/SearchButton.js\");\n/* harmony import */ var _components_SearchInput__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/SearchInput */ \"./plugins/visual-search/components/SearchInput.js\");\n/* harmony import */ var _components_SearchResults__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/SearchResults */ \"./plugins/visual-search/components/SearchResults.js\");\n/* harmony import */ var _visual_search_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./visual-search.scss */ \"./plugins/visual-search/visual-search.scss\");\n\n\n\n\n\nconst visualSearch = (options, player) => {\n player.addClass('vjs-visual-search');\n let isSearchActive = false;\n const searchResults = (0,_components_SearchResults__WEBPACK_IMPORTED_MODULE_3__.SearchResults)(player);\n const performSearch = async query => {\n const searchButton = player.$('.vjs-visual-search-button');\n searchButton.classList.add('vjs-waiting');\n try {\n const source = player.cloudinary.source();\n const publicId = source.publicId();\n const transformation = Object.assign({}, source.transformation());\n transformation.flags = transformation.flags || [];\n transformation.flags.push(`getinfo:search_b64_${btoa(query)}`);\n const visualSearchSrc = source.config().url(`${publicId}`, {\n transformation\n });\n const response = await fetch(visualSearchSrc, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json'\n }\n });\n if (!response.ok) {\n throw new Error(`Search request failed with status: ${response.status}`);\n }\n const results = await response.json();\n searchResults.displayResults(results.timestamps);\n if (results && !player.hasStarted()) {\n // Make sure the progress bar is visible\n player.play().then(() => player.pause());\n }\n } catch (error) {\n console.error('Error performing visual search:', error);\n } finally {\n searchButton.classList.remove('vjs-waiting');\n }\n };\n const clearUI = () => {\n isSearchActive = false;\n searchResults.clearMarkers();\n player.$('.vjs-visual-search-wrapper')?.remove();\n };\n const createSearchUI = () => {\n clearUI();\n const titleBar = player.$('.vjs-title-bar');\n if (titleBar) {\n titleBar.classList.remove('vjs-hidden');\n }\n const searchContainer = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('div', {\n className: 'vjs-visual-search-wrapper'\n });\n\n // Handle the search icon click (expand or submit)\n const handleSearchButtonClick = () => {\n if (!isSearchActive) {\n isSearchActive = true;\n searchContainer.classList.add('vjs-visual-search-active');\n searchInput.input.tabIndex = 0;\n searchInput.closeButton.tabIndex = 0;\n searchInput.input.focus();\n } else {\n const query = searchInput.input.value.trim();\n if (query) {\n performSearch(query);\n }\n }\n };\n const closeSearch = () => {\n if (isSearchActive) {\n isSearchActive = false;\n searchContainer.classList.remove('vjs-visual-search-active');\n searchInput.input.value = '';\n searchInput.input.tabIndex = -1;\n searchInput.closeButton.tabIndex = -1;\n searchResults.clearMarkers();\n }\n };\n const searchButton = (0,_components_SearchButton__WEBPACK_IMPORTED_MODULE_1__.SearchButton)(handleSearchButtonClick);\n const searchInput = (0,_components_SearchInput__WEBPACK_IMPORTED_MODULE_2__.SearchInput)(performSearch, closeSearch);\n searchContainer.appendChild(searchButton);\n searchContainer.appendChild(searchInput.element);\n titleBar.prepend(searchContainer);\n player.on('keydown', e => {\n if (e.key === 'Escape' && isSearchActive) {\n closeSearch();\n }\n });\n };\n createSearchUI();\n\n // Public methods\n player.visualSearch = {\n createSearchUI,\n clearUI\n };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (visualSearch);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/visual-search/visual-search.js?");
|
|
54
54
|
|
|
55
55
|
/***/ }),
|
|
56
56
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3-edge.
|
|
3
|
-
* Built on 2025-12-
|
|
2
|
+
* Cloudinary Video Player v3.6.3-edge.10
|
|
3
|
+
* Built on 2025-12-30T09:40:45.212Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
|
-
"use strict";(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[728],{9148:(e,a,s)=>{s.d(a,{default:()=>
|
|
6
|
+
"use strict";(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[728],{9148:(e,a,s)=>{s.d(a,{default:()=>l});var t=s(6673),r=s.n(t);const l=(e,a)=>{a.addClass("vjs-visual-search");let s=!1;const t=(e=>{const a=()=>{e.$$(".vjs-visual-search-marker").forEach(e=>e.remove()),e.$$(".vjs-visual-search-results-wrapper").forEach(e=>e.remove()),e.removeClass("vjs-visual-search-results-active")};return{displayResults:s=>{a();const t=e.duration(),l=e.controlBar.progressControl.seekBar,n=r().dom.createEl("div",{className:"vjs-visual-search-results-wrapper",role:"presentation"});s.forEach(a=>{const{start_time:s,end_time:l}=a,c=s/t*100,o=(l-s)/t*100,i=`${Math.floor(s/60)}:${Math.floor(s%60).toString().padStart(2,"0")}`,d=r().dom.createEl("div",{className:"vjs-control vjs-visual-search-marker",style:`left: ${c}%; width: ${o}%`,tabIndex:0,role:"button",title:`Search result at ${i}`,ariaLabel:`Search result at ${i}`});n.appendChild(d),d.addEventListener("click",()=>{e.currentTime(s)}),d.addEventListener("keydown",a=>{"Enter"!==a.key&&" "!==a.key||(a.preventDefault(),e.currentTime(s))})}),l.el().appendChild(n),s.length>0&&e.addClass("vjs-visual-search-results-active")},clearMarkers:a}})(a),l=async e=>{const s=a.$(".vjs-visual-search-button");s.classList.add("vjs-waiting");try{const s=a.cloudinary.source(),r=s.publicId(),l=Object.assign({},s.transformation());l.flags=l.flags||[],l.flags.push(`getinfo:search_b64_${btoa(e)}`);const n=s.config().url(`${r}`,{transformation:l}),c=await fetch(n,{method:"GET",headers:{"Content-Type":"application/json"}});if(!c.ok)throw new Error(`Search request failed with status: ${c.status}`);const o=await c.json();t.displayResults(o.timestamps),o&&!a.hasStarted()&&a.play().then(()=>a.pause())}catch(e){console.error("Error performing visual search:",e)}finally{s.classList.remove("vjs-waiting")}},n=()=>{s=!1,t.clearMarkers(),a.$(".vjs-visual-search-wrapper")?.remove()},c=()=>{n();const e=a.$(".vjs-title-bar");e&&e.classList.remove("vjs-hidden");const c=r().dom.createEl("div",{className:"vjs-visual-search-wrapper"}),o=()=>{s&&(s=!1,c.classList.remove("vjs-visual-search-active"),d.input.value="",d.input.tabIndex=-1,d.closeButton.tabIndex=-1,t.clearMarkers())},i=(e=>{const a=r().dom.createEl("button",{className:"vjs-control vjs-button vjs-visual-search-button",title:"Search video content",ariaLabel:"Search video content"}),s=r().dom.createEl("span",{className:"vjs-icon-search"});a.appendChild(s);const t=r().dom.createEl("span",{className:"vjs-loading-spinner"});return a.appendChild(t),a.addEventListener("click",e),a})(()=>{if(s){const e=d.input.value.trim();e&&l(e)}else s=!0,c.classList.add("vjs-visual-search-active"),d.input.tabIndex=0,d.closeButton.tabIndex=0,d.input.focus()}),d=((e,a)=>{const s=r().dom.createEl("form",{className:"vjs-visual-search-form"}),t=r().dom.createEl("input",{className:"vjs-visual-search-input",type:"text",ariaLabel:"Search input",tabIndex:-1}),l=r().dom.createEl("button",{className:"vjs-control vjs-button vjs-visual-search-close",type:"button",title:"Close search",ariaLabel:"Close search",tabIndex:-1}),n=r().dom.createEl("span",{className:"vjs-icon-close"});return l.appendChild(n),s.appendChild(t),s.appendChild(l),s.addEventListener("submit",a=>{a.preventDefault();const s=t.value.trim();s&&e(s)}),l.addEventListener("click",e=>{e.preventDefault(),a&&a()}),{element:s,input:t,closeButton:l}})(l,o);c.appendChild(i),c.appendChild(d.element),e.prepend(c),a.on("keydown",e=>{"Escape"===e.key&&s&&o()})};c(),a.visualSearch={createSearchUI:c,clearUI:n}}}}]);
|