cloudinary-video-player 3.6.3-edge.8 → 3.6.3
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 +50 -50
- package/dist/adaptive-streaming.min.js +5 -5
- package/dist/chapters.js +10 -10
- package/dist/chapters.min.js +3 -3
- package/dist/cld-video-player.css +2 -2
- package/dist/cld-video-player.js +1861 -1866
- package/dist/cld-video-player.light.js +1861 -1866
- package/dist/cld-video-player.light.min.js +4 -4
- package/dist/cld-video-player.min.css +2 -2
- package/dist/cld-video-player.min.js +4 -4
- package/dist/colors.js +10 -10
- package/dist/colors.min.js +3 -3
- package/dist/dash.js +18 -18
- package/dist/dash.min.js +4 -4
- package/dist/debug.js +38 -38
- package/dist/debug.min.js +3 -3
- package/dist/ima.js +44 -44
- package/dist/ima.min.js +3 -3
- package/dist/interaction-areas.js +58 -58
- package/dist/interaction-areas.min.js +3 -3
- package/dist/node_modules_lodash_throttle_js.js +26 -26
- package/dist/playlist.js +182 -182
- package/dist/playlist.min.js +3 -3
- package/dist/recommendations-overlay.js +34 -34
- package/dist/recommendations-overlay.min.js +3 -3
- package/dist/share.js +14 -14
- package/dist/share.min.js +3 -3
- package/dist/shoppable.js +48 -48
- package/dist/shoppable.min.js +3 -3
- package/dist/visual-search.js +22 -22
- 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/colors.js +1 -1
- package/lib/dash.js +1 -1
- package/lib/debug.js +1 -1
- package/lib/ima.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 +2 -2
package/dist/shoppable.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3
|
|
3
|
-
* Built on
|
|
2
|
+
* Cloudinary Video Player v3.6.3
|
|
3
|
+
* Built on 2026-01-04T09:24:08.226Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
6
|
"use strict";
|
|
@@ -14,104 +14,104 @@
|
|
|
14
14
|
*/
|
|
15
15
|
(self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["shoppable"],{
|
|
16
16
|
|
|
17
|
-
/***/ "./components/shoppable-bar/layout/bar-layout.js"
|
|
17
|
+
/***/ "./components/shoppable-bar/layout/bar-layout.js":
|
|
18
18
|
/*!*******************************************************!*\
|
|
19
19
|
!*** ./components/shoppable-bar/layout/bar-layout.js ***!
|
|
20
20
|
\*******************************************************/
|
|
21
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
21
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
22
22
|
|
|
23
|
-
eval("
|
|
23
|
+
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_products_overlay__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./shoppable-products-overlay */ \"./components/shoppable-bar/layout/shoppable-products-overlay.js\");\n/* harmony import */ var _shoppable_panel_toggle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shoppable-panel-toggle */ \"./components/shoppable-bar/layout/shoppable-panel-toggle.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());\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\n\n\n\n\nclass ShoppableBarLayout extends Component {\n constructor(player, options) {\n super(player, options);\n this.player_ = player;\n this.player().addClass('cld-shoppable-panel');\n this.player().addClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_HIDDEN_CLASS);\n this.contentWrpEl_ = dom.createEl('div', {\n className: 'cld-spbl-bar'\n });\n this.contentBannerEl_ = dom.createEl('div', {\n className: 'cld-spbl-banner-msg base-color-text'\n }, {}, this.options_.bannerMsg || 'Shop the Video');\n this.contentWrpEl_.appendChild(this.contentBannerEl_);\n const productsOverlay = new _shoppable_products_overlay__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.player_, this.options_);\n this.contentWrpEl_.appendChild(productsOverlay.el_);\n this.contentEl_ = dom.createEl('div', {\n className: _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.CLD_SPBL_INNER_BAR\n });\n this.contentWrpEl_.appendChild(this.contentEl_);\n this.player().el().appendChild(this.contentWrpEl_);\n this.addChild(new _shoppable_panel_toggle__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.player_, {\n toggleIcon: this.options_.toggleIcon,\n clickHandler: () => {\n this.togglePanel();\n }\n }));\n this.addChild('ShoppablePanel', this.options_);\n this.dispose = () => {\n this.removeLayout();\n super.dispose();\n };\n this.togglePanel = open => {\n if (open === true) {\n // Open\n this.player().removeClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_HIDDEN_CLASS);\n this.player().addClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_VISIBLE_CLASS);\n } else if (open === false) {\n // Close\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 } else {\n // Toggle\n this.player().toggleClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_HIDDEN_CLASS);\n this.player().toggleClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_VISIBLE_CLASS);\n }\n let eventName = this.player().hasClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_3__.SHOPPABLE_PANEL_VISIBLE_CLASS) ? 'productBarMax' : 'productBarMin';\n this.player().trigger(eventName);\n };\n\n // Open shoppable\n if (this.options_.startState === 'open') {\n this.togglePanel(true);\n }\n\n // On play start\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_4__.PLAYER_EVENT.PLAY, () => {\n if (this.player_.currentTime() < 0.01) {\n // Open shoppable on-play\n if (this.options_.startState === 'openOnPlay') {\n this.togglePanel(true, this.options_.autoClose);\n }\n\n // Auto-close shoppable\n if (this.options_.autoClose && this.options_.startState.indexOf('open') !== -1) {\n setTimeout(() => {\n // Keep it open while hovered\n if (!this.contentEl_.matches(':hover')) {\n this.togglePanel(false);\n } else {\n this.contentEl_.addEventListener('mouseleave', () => {\n this.togglePanel(false);\n }, {\n once: true\n });\n }\n }, this.options_.autoClose * 1000);\n }\n }\n });\n }\n createEl() {\n const el = super.createEl('div');\n return el;\n }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('shoppableBarLayout', ShoppableBarLayout);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppableBarLayout);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/layout/bar-layout.js?");
|
|
24
24
|
|
|
25
|
-
/***/ },
|
|
25
|
+
/***/ }),
|
|
26
26
|
|
|
27
|
-
/***/ "./components/shoppable-bar/layout/shoppable-panel-toggle.js"
|
|
27
|
+
/***/ "./components/shoppable-bar/layout/shoppable-panel-toggle.js":
|
|
28
28
|
/*!*******************************************************************!*\
|
|
29
29
|
!*** ./components/shoppable-bar/layout/shoppable-panel-toggle.js ***!
|
|
30
30
|
\*******************************************************************/
|
|
31
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
31
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
32
32
|
|
|
33
|
-
eval("
|
|
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
|
|
|
37
|
-
/***/ "./components/shoppable-bar/layout/shoppable-products-overlay.js"
|
|
37
|
+
/***/ "./components/shoppable-bar/layout/shoppable-products-overlay.js":
|
|
38
38
|
/*!***********************************************************************!*\
|
|
39
39
|
!*** ./components/shoppable-bar/layout/shoppable-products-overlay.js ***!
|
|
40
40
|
\***********************************************************************/
|
|
41
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
41
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
42
42
|
|
|
43
|
-
eval("
|
|
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
|
|
|
47
|
-
/***/ "./components/shoppable-bar/panel/shoppable-panel-item.js"
|
|
47
|
+
/***/ "./components/shoppable-bar/panel/shoppable-panel-item.js":
|
|
48
48
|
/*!****************************************************************!*\
|
|
49
49
|
!*** ./components/shoppable-bar/panel/shoppable-panel-item.js ***!
|
|
50
50
|
\****************************************************************/
|
|
51
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
51
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
52
52
|
|
|
53
|
-
eval("
|
|
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
|
|
|
57
|
-
/***/ "./components/shoppable-bar/panel/shoppable-panel.js"
|
|
57
|
+
/***/ "./components/shoppable-bar/panel/shoppable-panel.js":
|
|
58
58
|
/*!***********************************************************!*\
|
|
59
59
|
!*** ./components/shoppable-bar/panel/shoppable-panel.js ***!
|
|
60
60
|
\***********************************************************/
|
|
61
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
61
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
62
62
|
|
|
63
|
-
eval("
|
|
63
|
+
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 lodash_throttle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/throttle */ \"../node_modules/lodash/throttle.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var utils_time__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! utils/time */ \"./utils/time.js\");\n/* harmony import */ var _shoppable_panel_item__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shoppable-panel-item */ \"./components/shoppable-bar/panel/shoppable-panel-item.js\");\n/* harmony import */ var _plugins_cloudinary_models_image_source__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../plugins/cloudinary/models/image-source */ \"./plugins/cloudinary/models/image-source.js\");\n/* harmony import */ var _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../shoppable-widget.const */ \"./components/shoppable-bar/shoppable-widget.const.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../utils/consts */ \"./utils/consts.js\");\n\n\n\n\n\n\n\nconst Component = video_js__WEBPACK_IMPORTED_MODULE_0___default().getComponent('Component');\nclass ShoppablePanel 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 const itemChangeHandler = () => {\n this.render();\n };\n player.on(_utils_consts__WEBPACK_IMPORTED_MODULE_6__.PLAYER_EVENT.SHOPPABLE_ITEM_CHANGED, itemChangeHandler);\n this.render();\n this.dispose = () => {\n super.dispose();\n player.off(_utils_consts__WEBPACK_IMPORTED_MODULE_6__.PLAYER_EVENT.SHOPPABLE_ITEM_CHANGED, itemChangeHandler);\n };\n }\n createEl() {\n const el = super.createEl();\n [_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__.CLD_SPBL_PANEL_CLASS, 'base-color-bg'].map(cls => el.classList.add(cls));\n return el;\n }\n removeAll() {\n const childrens = this.children();\n for (let i = childrens.length - 1; i >= 0; --i) {\n this.removeChild(childrens[i]);\n }\n }\n getItems() {\n const cloudinaryConfig = this.player_.cloudinary.cloudinaryConfig();\n return this.options.products.map(product => {\n if (product.onHover && typeof product.onHover.args === 'object') {\n product.onHover.args.transformation = Object.assign({}, this.options.transformation, product.onHover.args.transformation);\n }\n const conf = {\n productId: product.productId,\n productName: product.productName,\n title: product.title,\n onHover: product.onHover,\n onClick: product.onClick,\n startTime: product.startTime,\n endTime: product.endTime\n };\n const imageSource = new _plugins_cloudinary_models_image_source__WEBPACK_IMPORTED_MODULE_4__[\"default\"](product.publicId, {\n cloudinaryConfig: cloudinaryConfig,\n transformation: Object.assign({}, this.options.transformation, product.transformation)\n });\n return {\n imageSrc: imageSource,\n conf: conf\n };\n });\n }\n scrollToActiveItem() {\n const activeItems = this.el_.getElementsByClassName('active');\n if (activeItems.length > 0) {\n const toScroll = activeItems[0].offsetTop - 12;\n // Test for native scrollTo support (IE will fail)\n if ('scrollBehavior' in document.documentElement.style) {\n this.el_.scrollTo({\n top: toScroll,\n behavior: 'smooth'\n });\n } else {\n this.el_.scrollTop = toScroll;\n }\n }\n }\n render() {\n this.removeAll();\n const items = this.getItems();\n const throttledScrollToActiveItem = lodash_throttle__WEBPACK_IMPORTED_MODULE_1___default()(() => this.scrollToActiveItem(), 1000);\n items.forEach((item, index) => {\n const shoppablePanelItem = new _shoppable_panel_item__WEBPACK_IMPORTED_MODULE_3__[\"default\"](this.player(), {\n item: item.imageSrc,\n conf: item.conf,\n next: index === 1,\n current: index === 0,\n clickHandler: e => {\n let target = e.currentTarget || e.target;\n let evName = this.player_.ended() ? 'productClickPost' : 'productClick';\n this.player_.trigger(evName, {\n productId: target.dataset.productId,\n productName: target.dataset.productName\n });\n\n // Go to URL, or seek video (set currentTime)\n if (target.dataset.clickAction === _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__.SHOPPABLE_CLICK_ACTIONS.GO_TO) {\n window.open(target.dataset.gotoUrl, '_blank');\n } else if (target.dataset.clickAction === _shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__.SHOPPABLE_CLICK_ACTIONS.SEEk) {\n const gotoSecs = (0,utils_time__WEBPACK_IMPORTED_MODULE_2__.parseTime)(target.dataset.seek);\n if (gotoSecs !== null) {\n this.player_.addClass('vjs-has-started'); // Hide the poster image\n if (this.player_.postModal) {\n this.player_.postModal.close();\n }\n this.player_.currentTime(gotoSecs);\n // Close products side-panel\n this.player_.removeClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__.SHOPPABLE_PANEL_VISIBLE_CLASS);\n this.player_.addClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__.SHOPPABLE_PANEL_HIDDEN_CLASS);\n this.player_.addClass(_shoppable_widget_const__WEBPACK_IMPORTED_MODULE_5__.SHOPPABLE_PRODUCTS_OVERLAY_CLASS);\n // Wait for the time update and show the tooltips\n this.player_.one('seeked', () => this.player_.trigger('showProductsOverlay'));\n }\n }\n\n // pause - true (default), false, or number of seconds\n if (target.dataset.pause !== 'false') {\n this.player_.pause();\n if ((0,utils_time__WEBPACK_IMPORTED_MODULE_2__.parseTime)(target.dataset.pause)) {\n setTimeout(() => {\n this.player_.play();\n }, (0,utils_time__WEBPACK_IMPORTED_MODULE_2__.parseTime)(target.dataset.pause) * 1000);\n }\n }\n }\n });\n shoppablePanelItem.on('mouseover', e => {\n let target = e.currentTarget || e.target;\n let evName = this.player_.ended() ? 'productHoverPost' : 'productHover';\n this.player_.trigger(evName, {\n productId: target.dataset.productId,\n productName: target.dataset.productName\n });\n });\n if (typeof item.conf.startTime !== 'undefined' && typeof item.conf.endTime !== 'undefined') {\n this.player_.on(_utils_consts__WEBPACK_IMPORTED_MODULE_6__.PLAYER_EVENT.TIME_UPDATE, () => {\n const time = this.player_.currentTime();\n if (time >= item.conf.startTime && time < item.conf.endTime) {\n shoppablePanelItem.el_.classList.add('active');\n throttledScrollToActiveItem();\n } else if (shoppablePanelItem.el_.classList.contains('active')) {\n shoppablePanelItem.el_.classList.remove('active');\n }\n });\n }\n this.addChild(shoppablePanelItem);\n });\n }\n}\nvideo_js__WEBPACK_IMPORTED_MODULE_0___default().registerComponent('shoppablePanel', ShoppablePanel);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ShoppablePanel);\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/panel/shoppable-panel.js?");
|
|
64
64
|
|
|
65
|
-
/***/ },
|
|
65
|
+
/***/ }),
|
|
66
66
|
|
|
67
|
-
/***/ "./components/shoppable-bar/shoppable-post-widget.js"
|
|
67
|
+
/***/ "./components/shoppable-bar/shoppable-post-widget.js":
|
|
68
68
|
/*!***********************************************************!*\
|
|
69
69
|
!*** ./components/shoppable-bar/shoppable-post-widget.js ***!
|
|
70
70
|
\***********************************************************/
|
|
71
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
71
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
72
72
|
|
|
73
|
-
eval("
|
|
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
|
|
|
77
|
-
/***/ "./components/shoppable-bar/shoppable-widget.const.js"
|
|
77
|
+
/***/ "./components/shoppable-bar/shoppable-widget.const.js":
|
|
78
78
|
/*!************************************************************!*\
|
|
79
79
|
!*** ./components/shoppable-bar/shoppable-widget.const.js ***!
|
|
80
80
|
\************************************************************/
|
|
81
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
81
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
82
82
|
|
|
83
|
-
eval("
|
|
83
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CLD_SPBL_IMAGE: () => (/* binding */ CLD_SPBL_IMAGE),\n/* harmony export */ CLD_SPBL_INNER_BAR: () => (/* binding */ CLD_SPBL_INNER_BAR),\n/* harmony export */ CLD_SPBL_ITEM: () => (/* binding */ CLD_SPBL_ITEM),\n/* harmony export */ CLD_SPBL_PANEL_CLASS: () => (/* binding */ CLD_SPBL_PANEL_CLASS),\n/* harmony export */ CLD_SPBL_TOGGLE_CLASS: () => (/* binding */ CLD_SPBL_TOGGLE_CLASS),\n/* harmony export */ CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS: () => (/* binding */ CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS),\n/* harmony export */ CLD_SPBL_TOGGLE_ICON_CLASS: () => (/* binding */ CLD_SPBL_TOGGLE_ICON_CLASS),\n/* harmony export */ CLOSE_ICON_CLASS: () => (/* binding */ CLOSE_ICON_CLASS),\n/* harmony export */ ICON_CART_CLASS: () => (/* binding */ ICON_CART_CLASS),\n/* harmony export */ SHOPPABLE_ANIMATION_CLASS: () => (/* binding */ SHOPPABLE_ANIMATION_CLASS),\n/* harmony export */ SHOPPABLE_CLICK_ACTIONS: () => (/* binding */ SHOPPABLE_CLICK_ACTIONS),\n/* harmony export */ SHOPPABLE_HOVER_ACTIONS: () => (/* binding */ SHOPPABLE_HOVER_ACTIONS),\n/* harmony export */ SHOPPABLE_PANEL_HIDDEN_CLASS: () => (/* binding */ SHOPPABLE_PANEL_HIDDEN_CLASS),\n/* harmony export */ SHOPPABLE_PANEL_VISIBLE_CLASS: () => (/* binding */ SHOPPABLE_PANEL_VISIBLE_CLASS),\n/* harmony export */ SHOPPABLE_PRODUCTS_OVERLAY_CLASS: () => (/* binding */ SHOPPABLE_PRODUCTS_OVERLAY_CLASS),\n/* harmony export */ SHOPPABLE_WIDGET_OPTIONS_DEFAULTS: () => (/* binding */ SHOPPABLE_WIDGET_OPTIONS_DEFAULTS)\n/* harmony export */ });\nconst SHOPPABLE_WIDGET_OPTIONS_DEFAULTS = {\n location: 'right',\n toggleIcon: '',\n width: '20%',\n startState: 'openOnPlay',\n autoClose: 2,\n transformation: {\n quality: 'auto',\n width: 'auto',\n fetch_format: 'auto',\n crop: 'scale'\n },\n products: [],\n showPostPlayOverlay: false\n};\nconst SHOPPABLE_CLICK_ACTIONS = {\n GO_TO: 'goto',\n SEEk: 'seek'\n};\nconst SHOPPABLE_HOVER_ACTIONS = {\n OVERLAY: 'overlay'\n};\nconst SHOPPABLE_PANEL_VISIBLE_CLASS = 'shoppable-panel-visible';\nconst SHOPPABLE_PANEL_HIDDEN_CLASS = 'shoppable-panel-hidden';\nconst SHOPPABLE_PRODUCTS_OVERLAY_CLASS = 'shoppable-products-overlay';\nconst CLD_SPBL_PANEL_CLASS = 'cld-spbl-panel';\nconst CLD_SPBL_TOGGLE_CLASS = 'cld-spbl-toggle';\nconst CLD_SPBL_TOGGLE_ICON_CLASS = 'cld-spbl-toggle-icon';\nconst CLD_SPBL_INNER_BAR = 'cld-spbl-bar-inner';\nconst CLD_SPBL_TOGGLE_CUSTOM_ICON_CLASS = 'cld-spbl-toggle-custom-icon';\nconst ICON_CART_CLASS = 'vjs-icon-cart';\nconst CLOSE_ICON_CLASS = 'vjs-icon-close';\nconst SHOPPABLE_ANIMATION_CLASS = 'animate';\nconst CLD_SPBL_ITEM = 'cld-spbl-item';\nconst CLD_SPBL_IMAGE = 'cld-spbl-img';\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/shoppable-widget.const.js?");
|
|
84
84
|
|
|
85
|
-
/***/ },
|
|
85
|
+
/***/ }),
|
|
86
86
|
|
|
87
|
-
/***/ "./components/shoppable-bar/shoppable-widget.js"
|
|
87
|
+
/***/ "./components/shoppable-bar/shoppable-widget.js":
|
|
88
88
|
/*!******************************************************!*\
|
|
89
89
|
!*** ./components/shoppable-bar/shoppable-widget.js ***!
|
|
90
90
|
\******************************************************/
|
|
91
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
91
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
92
92
|
|
|
93
|
-
eval("
|
|
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
|
|
|
97
|
-
/***/ "./
|
|
98
|
-
/*!********************************************************!*\
|
|
99
|
-
!*** ./components/shoppable-bar/shoppable-widget.scss ***!
|
|
100
|
-
\********************************************************/
|
|
101
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
102
|
-
|
|
103
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/shoppable-widget.scss?\n}");
|
|
104
|
-
|
|
105
|
-
/***/ },
|
|
106
|
-
|
|
107
|
-
/***/ "./utils/time.js"
|
|
97
|
+
/***/ "./utils/time.js":
|
|
108
98
|
/*!***********************!*\
|
|
109
99
|
!*** ./utils/time.js ***!
|
|
110
100
|
\***********************/
|
|
111
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
101
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
102
|
+
|
|
103
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ parseTime: () => (/* binding */ parseTime)\n/* harmony export */ });\n// Convert time string i.e. '2:40' to seconds number (160)\n// Also allows h:m:s format and mm:ss, m:s etc.\nconst parseTime = function (hms) {\n const [seconds, minutes, hours] = hms.split(':').reverse();\n let sum = null;\n if (!isNaN(seconds)) {\n sum = (+hours || 0) * 60 * 60 + (+minutes || 0) * 60 + +seconds;\n }\n return sum;\n};\n\n\n//# sourceURL=webpack://cloudinary-video-player/./utils/time.js?");
|
|
104
|
+
|
|
105
|
+
/***/ }),
|
|
106
|
+
|
|
107
|
+
/***/ "./components/shoppable-bar/shoppable-widget.scss":
|
|
108
|
+
/*!********************************************************!*\
|
|
109
|
+
!*** ./components/shoppable-bar/shoppable-widget.scss ***!
|
|
110
|
+
\********************************************************/
|
|
111
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
112
112
|
|
|
113
|
-
eval("
|
|
113
|
+
eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/shoppable-widget.scss?");
|
|
114
114
|
|
|
115
|
-
/***/ }
|
|
115
|
+
/***/ })
|
|
116
116
|
|
|
117
117
|
}]);
|
package/dist/shoppable.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3
|
|
3
|
-
* Built on
|
|
2
|
+
* Cloudinary Video Player v3.6.3
|
|
3
|
+
* Built on 2026-01-04T09:23:52.701Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
|
-
(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[525],{2140(t){var e=/\s/;t.exports=function(t){for(var s=t.length;s--&&e.test(t.charAt(s)););return s}},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})}},3664(t,e,s){var o=s(1433);t.exports=function(){return o.Date.now()}},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}},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}},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}},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_)}}}}]);
|
|
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
|
|
3
|
-
* Built on
|
|
2
|
+
* Cloudinary Video Player v3.6.3
|
|
3
|
+
* Built on 2026-01-04T09:24:08.226Z
|
|
4
4
|
* https://github.com/cloudinary/cloudinary-video-player
|
|
5
5
|
*/
|
|
6
6
|
"use strict";
|
|
@@ -14,54 +14,54 @@
|
|
|
14
14
|
*/
|
|
15
15
|
(self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["visual-search"],{
|
|
16
16
|
|
|
17
|
-
/***/ "./plugins/visual-search/components/SearchButton.js"
|
|
17
|
+
/***/ "./plugins/visual-search/components/SearchButton.js":
|
|
18
18
|
/*!**********************************************************!*\
|
|
19
19
|
!*** ./plugins/visual-search/components/SearchButton.js ***!
|
|
20
20
|
\**********************************************************/
|
|
21
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
21
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
22
22
|
|
|
23
|
-
eval("
|
|
23
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SearchButton: () => (/* binding */ SearchButton)\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 SearchButton = onClick => {\n const button = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {\n className: 'vjs-control vjs-button vjs-visual-search-button',\n title: 'Search video content',\n ariaLabel: 'Search video content'\n });\n const searchIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {\n className: 'vjs-icon-search'\n });\n button.appendChild(searchIcon);\n const spinnerIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {\n className: 'vjs-loading-spinner'\n });\n button.appendChild(spinnerIcon);\n button.addEventListener('click', onClick);\n return button;\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/visual-search/components/SearchButton.js?");
|
|
24
24
|
|
|
25
|
-
/***/ },
|
|
25
|
+
/***/ }),
|
|
26
26
|
|
|
27
|
-
/***/ "./plugins/visual-search/components/SearchInput.js"
|
|
27
|
+
/***/ "./plugins/visual-search/components/SearchInput.js":
|
|
28
28
|
/*!*********************************************************!*\
|
|
29
29
|
!*** ./plugins/visual-search/components/SearchInput.js ***!
|
|
30
30
|
\*********************************************************/
|
|
31
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
31
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
32
32
|
|
|
33
|
-
eval("
|
|
33
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SearchInput: () => (/* binding */ SearchInput)\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 SearchInput = (onSearch, onClose) => {\n const form = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('form', {\n className: 'vjs-visual-search-form'\n });\n const input = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('input', {\n className: 'vjs-visual-search-input',\n type: 'text',\n ariaLabel: 'Search input',\n tabIndex: -1\n });\n const closeButton = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('button', {\n className: 'vjs-control vjs-button vjs-visual-search-close',\n type: 'button',\n title: 'Close search',\n ariaLabel: 'Close search',\n tabIndex: -1\n });\n\n // Add close icon\n const closeIcon = video_js__WEBPACK_IMPORTED_MODULE_0___default().dom.createEl('span', {\n className: 'vjs-icon-close'\n });\n closeButton.appendChild(closeIcon);\n form.appendChild(input);\n form.appendChild(closeButton);\n\n // Handle search submission\n form.addEventListener('submit', e => {\n e.preventDefault();\n const query = input.value.trim();\n if (query) {\n onSearch(query);\n }\n });\n\n // Handle close button\n closeButton.addEventListener('click', e => {\n e.preventDefault();\n if (onClose) {\n onClose();\n }\n });\n return {\n element: form,\n input,\n closeButton\n };\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/visual-search/components/SearchInput.js?");
|
|
34
34
|
|
|
35
|
-
/***/ },
|
|
35
|
+
/***/ }),
|
|
36
36
|
|
|
37
|
-
/***/ "./plugins/visual-search/components/SearchResults.js"
|
|
37
|
+
/***/ "./plugins/visual-search/components/SearchResults.js":
|
|
38
38
|
/*!***********************************************************!*\
|
|
39
39
|
!*** ./plugins/visual-search/components/SearchResults.js ***!
|
|
40
40
|
\***********************************************************/
|
|
41
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
41
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
42
42
|
|
|
43
|
-
eval("
|
|
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
|
|
|
47
|
-
/***/ "./plugins/visual-search/visual-search.js"
|
|
47
|
+
/***/ "./plugins/visual-search/visual-search.js":
|
|
48
48
|
/*!************************************************!*\
|
|
49
49
|
!*** ./plugins/visual-search/visual-search.js ***!
|
|
50
50
|
\************************************************/
|
|
51
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
51
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
52
52
|
|
|
53
|
-
eval("
|
|
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
|
|
|
57
|
-
/***/ "./plugins/visual-search/visual-search.scss"
|
|
57
|
+
/***/ "./plugins/visual-search/visual-search.scss":
|
|
58
58
|
/*!**************************************************!*\
|
|
59
59
|
!*** ./plugins/visual-search/visual-search.scss ***!
|
|
60
60
|
\**************************************************/
|
|
61
|
-
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
61
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
62
62
|
|
|
63
|
-
eval("
|
|
63
|
+
eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/visual-search/visual-search.scss?");
|
|
64
64
|
|
|
65
|
-
/***/ }
|
|
65
|
+
/***/ })
|
|
66
66
|
|
|
67
67
|
}]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Cloudinary Video Player v3.6.3
|
|
3
|
-
* Built on
|
|
2
|
+
* Cloudinary Video Player v3.6.3
|
|
3
|
+
* Built on 2026-01-04T09:23:52.701Z
|
|
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:()=>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}}}}]);
|
|
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}}}}]);
|