UNPKG

cloudinary-video-player

Version:

Cloudinary Video Player

117 lines (86 loc) • 42.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/*! * Cloudinary Video Player v3.2.1 * Built on 2025-08-12T18:54:00.175Z * https://github.com/cloudinary/cloudinary-video-player */ "use strict"; /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ (self["cloudinaryVideoPlayerChunkLoading"] = self["cloudinaryVideoPlayerChunkLoading"] || []).push([["shoppable"],{ /***/ "./components/shoppable-bar/layout/bar-layout.js": /*!*******************************************************!*\ !*** ./components/shoppable-bar/layout/bar-layout.js ***! \*******************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _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?"); /***/ }), /***/ "./components/shoppable-bar/layout/shoppable-panel-toggle.js": /*!*******************************************************************!*\ !*** ./components/shoppable-bar/layout/shoppable-panel-toggle.js ***! \*******************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _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?"); /***/ }), /***/ "./components/shoppable-bar/layout/shoppable-products-overlay.js": /*!***********************************************************************!*\ !*** ./components/shoppable-bar/layout/shoppable-products-overlay.js ***! \***********************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var 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?"); /***/ }), /***/ "./components/shoppable-bar/panel/shoppable-panel-item.js": /*!****************************************************************!*\ !*** ./components/shoppable-bar/panel/shoppable-panel-item.js ***! \****************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _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?"); /***/ }), /***/ "./components/shoppable-bar/panel/shoppable-panel.js": /*!***********************************************************!*\ !*** ./components/shoppable-bar/panel/shoppable-panel.js ***! \***********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var 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?"); /***/ }), /***/ "./components/shoppable-bar/shoppable-post-widget.js": /*!***********************************************************!*\ !*** ./components/shoppable-bar/shoppable-post-widget.js ***! \***********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _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?"); /***/ }), /***/ "./components/shoppable-bar/shoppable-widget.const.js": /*!************************************************************!*\ !*** ./components/shoppable-bar/shoppable-widget.const.js ***! \************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ 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?"); /***/ }), /***/ "./components/shoppable-bar/shoppable-widget.js": /*!******************************************************!*\ !*** ./components/shoppable-bar/shoppable-widget.js ***! \******************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ \"../node_modules/video.js/dist/alt/video.core-exposed.js\");\n/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(video_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _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?"); /***/ }), /***/ "./utils/time.js": /*!***********************!*\ !*** ./utils/time.js ***! \***********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ 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?"); /***/ }), /***/ "./components/shoppable-bar/shoppable-widget.scss": /*!********************************************************!*\ !*** ./components/shoppable-bar/shoppable-widget.scss ***! \********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./components/shoppable-bar/shoppable-widget.scss?"); /***/ }) }]);