UNPKG

cloudinary-video-player

Version:

Cloudinary Video Player

114 lines (86 loc) • 35.5 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
/*! * Cloudinary Video Player v3.2.1 * Built on 2025-08-12T18:54:00.175Z * https://github.com/cloudinary/cloudinary-video-player */ /* * 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([["interaction-areas"],{ /***/ "./components/themeButton/themedButton.const.js": /*!******************************************************!*\ !*** ./components/themeButton/themedButton.const.js ***! \******************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ BUTTON_THEME: () => (/* binding */ BUTTON_THEME)\n/* harmony export */ });\nconst BUTTON_THEME = {\n TRANSPARENT_WHITE: 'transparent-white'\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./components/themeButton/themedButton.const.js?"); /***/ }), /***/ "./components/themeButton/themedButton.js": /*!************************************************!*\ !*** ./components/themeButton/themedButton.js ***! \************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ themedButton: () => (/* binding */ themedButton)\n/* harmony export */ });\n/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../utils/dom */ \"./utils/dom.js\");\n\nconst themedButton = _ref => {\n let {\n text,\n onClick,\n theme = '',\n loadingDelay = 0\n } = _ref;\n return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_0__.elementsCreator)({\n tag: 'button',\n attr: {\n class: `vp-theme-button theme-${theme}`\n },\n onClick,\n children: [{\n tag: 'div',\n attr: {\n class: 'vp-loading-bar'\n },\n style: {\n 'animation-duration': `${loadingDelay}ms`\n }\n }, {\n tag: 'div',\n attr: {\n class: 'content'\n },\n children: text\n }]\n });\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./components/themeButton/themedButton.js?"); /***/ }), /***/ "./plugins/colors/colors.js": /*!**********************************!*\ !*** ./plugins/colors/colors.js ***! \**********************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */ getDefaultPlayerColor: () => (/* binding */ getDefaultPlayerColor)\n/* harmony export */ });\n/* harmony import */ var _video_player_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../video-player.utils */ \"./video-player.utils.js\");\n/* harmony import */ var _colors_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./colors.scss */ \"./plugins/colors/colors.scss\");\n\n\nconst defaults = {\n colorsDark: {\n 'base': '#000000',\n 'accent': '#0D9AFF',\n 'text': '#FFFFFF'\n },\n colorsLight: {\n 'base': '#FFFFFF',\n 'accent': '#0D9AFF',\n 'text': '#000000'\n }\n};\nconst getDefaultPlayerColor = options => {\n return (0,_video_player_utils__WEBPACK_IMPORTED_MODULE_0__.isLight)(options) ? defaults.colorsLight : defaults.colorsDark;\n};\nconst colorsPlugin = function (player) {\n let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n const skinDefaults = getDefaultPlayerColor(player.options_);\n opts.colors = Object.assign({}, skinDefaults, opts.colors);\n\n // Set CSS custom properties on the player element\n const playerEl = player.el();\n if (opts.colors.base) {\n playerEl.style.setProperty('--color-base', opts.colors.base);\n }\n if (opts.colors.accent) {\n playerEl.style.setProperty('--color-accent', opts.colors.accent);\n }\n if (opts.colors.text) {\n playerEl.style.setProperty('--color-text', opts.colors.text);\n }\n\n // Return an object with methods to update colors if needed\n return {\n updateColors: newColors => {\n const updatedColors = Object.assign({}, opts.colors, newColors);\n if (updatedColors.base) {\n playerEl.style.setProperty('--color-base', updatedColors.base);\n }\n if (updatedColors.accent) {\n playerEl.style.setProperty('--color-accent', updatedColors.accent);\n }\n if (updatedColors.text) {\n playerEl.style.setProperty('--color-text', updatedColors.text);\n }\n opts.colors = updatedColors;\n },\n getColors: () => opts.colors\n };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (colorsPlugin);\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/colors/colors.js?"); /***/ }), /***/ "./plugins/interaction-areas/interaction-areas.const.js": /*!**************************************************************!*\ !*** ./plugins/interaction-areas/interaction-areas.const.js ***! \**************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CLOSE_INTERACTION_AREA_LAYOUT_DELAY: () => (/* binding */ CLOSE_INTERACTION_AREA_LAYOUT_DELAY),\n/* harmony export */ DEFAULT_INTERACTION_ARE_TRANSITION: () => (/* binding */ DEFAULT_INTERACTION_ARE_TRANSITION),\n/* harmony export */ INTERACTION_AREAS_CONTAINER_CLASS_NAME: () => (/* binding */ INTERACTION_AREAS_CONTAINER_CLASS_NAME),\n/* harmony export */ INTERACTION_AREAS_PREFIX: () => (/* binding */ INTERACTION_AREAS_PREFIX),\n/* harmony export */ INTERACTION_AREAS_TEMPLATE: () => (/* binding */ INTERACTION_AREAS_TEMPLATE),\n/* harmony export */ INTERACTION_AREAS_THEME: () => (/* binding */ INTERACTION_AREAS_THEME),\n/* harmony export */ INTERACTION_AREA_HAND_ICON: () => (/* binding */ INTERACTION_AREA_HAND_ICON),\n/* harmony export */ INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME: () => (/* binding */ INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME),\n/* harmony export */ TEMPLATE_INTERACTION_AREAS_VTT: () => (/* binding */ TEMPLATE_INTERACTION_AREAS_VTT)\n/* harmony export */ });\nconst INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME = 'cld-ia-layout-state';\nconst INTERACTION_AREAS_PREFIX = 'vp-ia';\nconst INTERACTION_AREAS_CONTAINER_CLASS_NAME = 'interaction-areas-container';\nconst INTERACTION_AREAS_TEMPLATE = {\n PORTRAIT: 'portrait',\n LANDSCAPE: 'landscape',\n All: 'all',\n CENTER: 'center'\n};\nconst INTERACTION_AREAS_THEME = {\n PULSING: 'pulsing',\n SHADOWED: 'shadowed'\n};\nconst TEMPLATE_INTERACTION_AREAS_VTT = {\n [INTERACTION_AREAS_TEMPLATE.PORTRAIT]: 'https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt',\n [INTERACTION_AREAS_TEMPLATE.LANDSCAPE]: 'https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt',\n [INTERACTION_AREAS_TEMPLATE.All]: 'https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt',\n [INTERACTION_AREAS_TEMPLATE.CENTER]: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt'\n};\nconst INTERACTION_AREA_HAND_ICON = 'https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg';\nconst CLOSE_INTERACTION_AREA_LAYOUT_DELAY = 4500;\nconst DEFAULT_INTERACTION_ARE_TRANSITION = 250;\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/interaction-areas/interaction-areas.const.js?"); /***/ }), /***/ "./plugins/interaction-areas/interaction-areas.service.js": /*!****************************************************************!*\ !*** ./plugins/interaction-areas/interaction-areas.service.js ***! \****************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ interactionAreasService: () => (/* binding */ interactionAreasService)\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_get__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/get */ \"../node_modules/lodash/get.js\");\n/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_get__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lodash/throttle */ \"../node_modules/lodash/throttle.js\");\n/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash/noop */ \"../node_modules/lodash/noop.js\");\n/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./interaction-areas.const */ \"./plugins/interaction-areas/interaction-areas.const.js\");\n/* harmony import */ var _interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./interaction-areas.utils */ \"./plugins/interaction-areas/interaction-areas.utils.js\");\n/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/dom */ \"./utils/dom.js\");\n/* harmony import */ var _video_player_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../video-player.utils */ \"./video-player.utils.js\");\n/* harmony import */ var _utils_consts__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/consts */ \"./utils/consts.js\");\n/* harmony import */ var _interaction_areas_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./interaction-areas.scss */ \"./plugins/interaction-areas/interaction-areas.scss\");\n\n\n\n\n\n\n\n\n\n\nconst interactionAreasService = (player, playerOptions, videojsOptions) => {\n let isZoomed = false;\n let currentSource = null;\n let currentTrack = null;\n let unZoom = (lodash_noop__WEBPACK_IMPORTED_MODULE_3___default());\n const shouldLayoutMessage = () => (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.shouldShowAreaLayoutMessage)(videojsOptions.interactionDisplay);\n const getIsSyncOffsetTime = () => {\n const interactionAreasConfig = getInteractionAreasConfig();\n return interactionAreasConfig && interactionAreasConfig.syncOffsetTime !== undefined ? interactionAreasConfig.syncOffsetTime : false;\n };\n function isInteractionAreasEnabled() {\n let enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n const interactionAreasConfig = getInteractionAreasConfig();\n return enabled || interactionAreasConfig && interactionAreasConfig.enable;\n }\n function setAreasPositionListener() {\n currentTrack && player.videojs.removeRemoteTextTrack(currentTrack);\n const isEnabled = isInteractionAreasEnabled();\n const interactionAreasConfig = getInteractionAreasConfig();\n if (!isEnabled || isZoomed) {\n return null;\n }\n if (Array.isArray(interactionAreasConfig.template)) {\n addInteractionAreasItems(interactionAreasConfig.template);\n setContainerSize();\n } else {\n const vttUrl = interactionAreasConfig.vttUrl || _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.TEMPLATE_INTERACTION_AREAS_VTT[interactionAreasConfig.template];\n if (vttUrl) {\n currentTrack = (0,_video_player_utils__WEBPACK_IMPORTED_MODULE_7__.addMetadataTrack)(player.videojs, vttUrl);\n addCueListener(currentTrack);\n }\n }\n }\n function setGoBackButton() {\n const button = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.createElement)('div', {\n 'class': 'go-back-button'\n });\n button.addEventListener('click', () => {\n unZoom();\n }, false);\n const tracksContainer = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.createElement)('div', {\n 'class': _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.INTERACTION_AREAS_CONTAINER_CLASS_NAME\n }, button);\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.setInteractionAreasContainer)(player.videojs, tracksContainer);\n }\n function getInteractionAreasConfig() {\n const {\n cldSrc\n } = currentSource;\n return cldSrc && cldSrc.interactionAreas();\n }\n function removeLayoutMessage() {\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.removeInteractionAreasContainer)(player.videojs);\n setAreasPositionListener();\n player.play();\n }\n function setLayoutMessage() {\n if (!isInteractionAreasEnabled()) {\n return;\n }\n if (shouldLayoutMessage()) {\n let layoutMessageTimout = null;\n const showItAgainCheckbox = lodash_get__WEBPACK_IMPORTED_MODULE_1___default()(videojsOptions, 'interactionDisplay.layout.showAgain', false);\n player.pause();\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.createInteractionAreaLayoutMessage)(player.videojs, () => {\n clearTimeout(layoutMessageTimout);\n removeLayoutMessage();\n }, showItAgainCheckbox);\n if (!showItAgainCheckbox) {\n layoutMessageTimout = setTimeout(removeLayoutMessage, _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.CLOSE_INTERACTION_AREA_LAYOUT_DELAY);\n }\n } else {\n removeLayoutMessage();\n }\n }\n function handleAds() {\n player.on('adsready', () => {\n player.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED, setLayoutMessage);\n });\n }\n function init() {\n currentSource = currentSource || player.videojs.currentSource();\n if (isInteractionAreasEnabled()) {\n player.videojs.el().classList.add('interaction-areas');\n player.videojs.one(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.PLAY, () => {\n if (typeof player.videojs.ima === 'object') {\n handleAds();\n } else {\n setLayoutMessage();\n }\n });\n const setInteractionAreasContainerSize = lodash_throttle__WEBPACK_IMPORTED_MODULE_2___default()(setContainerSize, 100);\n player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.FULL_SCREEN_CHANGE, () => {\n // waiting for fullscreen will end\n setTimeout(setInteractionAreasContainerSize, 100);\n });\n const resizeDestroy = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.addEventListener)(window, 'resize', setContainerSize, false);\n player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.DISPOSE, resizeDestroy);\n }\n player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.ENDED, () => {\n unZoom();\n });\n player.videojs.on(_utils_consts__WEBPACK_IMPORTED_MODULE_8__.PLAYER_EVENT.ERROR, () => {\n player.pause();\n });\n }\n function onZoom(src, newOption, item) {\n const originalCurrentTime = player.currentTime();\n const isSyncOffsetTime = getIsSyncOffsetTime();\n const {\n cldSrc\n } = currentSource;\n const currentSrcOptions = cldSrc.getInitOptions();\n const option = newOption || {\n transformation: currentSrcOptions.transformation\n };\n const transformation = !src && (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.getZoomTransformation)(player.videoElement, item);\n const sourceOptions = transformation ? video_js__WEBPACK_IMPORTED_MODULE_0___default().obj.merge({\n transformation\n }, option) : option;\n const newSource = cldSrc.isRawUrl ? currentSource.src : {\n publicId: cldSrc.publicId()\n };\n player.source(transformation ? {\n publicId: cldSrc.publicId()\n } : src, sourceOptions).play();\n isSyncOffsetTime && player.currentTime(originalCurrentTime);\n isZoomed = true;\n setGoBackButton();\n unZoom = () => {\n if (isZoomed) {\n isZoomed = false;\n const currentZoomedTime = player.currentTime();\n const duration = player.duration();\n player.source(newSource, currentSrcOptions).play();\n isSyncOffsetTime && currentZoomedTime < duration && player.currentTime(currentZoomedTime);\n setAreasPositionListener();\n }\n };\n }\n function onInteractionAreasClick(_ref) {\n let {\n event,\n item,\n index\n } = _ref;\n const interactionAreasConfig = getInteractionAreasConfig();\n interactionAreasConfig.onClick && interactionAreasConfig.onClick({\n item,\n index,\n event,\n zoom: (source, option) => {\n onZoom(source, option, item);\n }\n });\n }\n function addInteractionAreasItems(interactionAreasData, previousInteractionAreasData) {\n let durationTime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;\n const configs = {\n playerOptions: playerOptions,\n videojsOptions: videojsOptions\n };\n if (previousInteractionAreasData) {\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.updateInteractionAreasItem)(player.videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onInteractionAreasClick);\n } else {\n const interactionAreasItems = interactionAreasData.map((item, index) => {\n return (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.getInteractionAreaItem)(configs, item, index, durationTime, event => {\n onInteractionAreasClick({\n event,\n item,\n index\n });\n });\n });\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.setInteractionAreasContainer)(player.videojs, (0,_utils_dom__WEBPACK_IMPORTED_MODULE_6__.createElement)('div', {\n 'class': _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.INTERACTION_AREAS_CONTAINER_CLASS_NAME\n }, interactionAreasItems));\n }\n }\n function setContainerSize() {\n if (isInteractionAreasEnabled()) {\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.setInteractionAreasContainerSize)(player.videojs, player.videoElement);\n }\n }\n function addCueListener(track) {\n if (!track) {\n return;\n }\n let previousTracksData = null;\n track.addEventListener('cuechange', () => {\n const activeCue = track.activeCues && track.activeCues[0];\n if (activeCue) {\n const durationTime = Math.max(Math.floor((activeCue.endTime - activeCue.startTime) * 1000), _interaction_areas_const__WEBPACK_IMPORTED_MODULE_4__.DEFAULT_INTERACTION_ARE_TRANSITION);\n const tracksData = JSON.parse(activeCue.text);\n addInteractionAreasItems(tracksData, previousTracksData, durationTime);\n !previousTracksData && setContainerSize();\n previousTracksData = tracksData;\n } else {\n (0,_interaction_areas_utils__WEBPACK_IMPORTED_MODULE_5__.removeInteractionAreasContainer)(player.videojs);\n previousTracksData = null;\n }\n });\n }\n init();\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/interaction-areas/interaction-areas.service.js?"); /***/ }), /***/ "./plugins/interaction-areas/interaction-areas.utils.js": /*!**************************************************************!*\ !*** ./plugins/interaction-areas/interaction-areas.utils.js ***! \**************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ createInteractionAreaLayoutMessage: () => (/* binding */ createInteractionAreaLayoutMessage),\n/* harmony export */ getInteractionAreaItem: () => (/* binding */ getInteractionAreaItem),\n/* harmony export */ getZoomTransformation: () => (/* binding */ getZoomTransformation),\n/* harmony export */ percentageToFixedValue: () => (/* binding */ percentageToFixedValue),\n/* harmony export */ removeInteractionAreasContainer: () => (/* binding */ removeInteractionAreasContainer),\n/* harmony export */ setInteractionAreasContainer: () => (/* binding */ setInteractionAreasContainer),\n/* harmony export */ setInteractionAreasContainerSize: () => (/* binding */ setInteractionAreasContainerSize),\n/* harmony export */ shouldShowAreaLayoutMessage: () => (/* binding */ shouldShowAreaLayoutMessage),\n/* harmony export */ updateInteractionAreasItem: () => (/* binding */ updateInteractionAreasItem)\n/* harmony export */ });\n/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash/get */ \"../node_modules/lodash/get.js\");\n/* harmony import */ var lodash_get__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash_get__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash/noop */ \"../node_modules/lodash/noop.js\");\n/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _utils_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/dom */ \"./utils/dom.js\");\n/* harmony import */ var _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./interaction-areas.const */ \"./plugins/interaction-areas/interaction-areas.const.js\");\n/* harmony import */ var _colors_colors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../colors/colors */ \"./plugins/colors/colors.js\");\n/* harmony import */ var _components_themeButton_themedButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../components/themeButton/themedButton */ \"./components/themeButton/themedButton.js\");\n/* harmony import */ var _components_themeButton_themedButton_const__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../components/themeButton/themedButton.const */ \"./components/themeButton/themedButton.const.js\");\n\n\n\n\n\n\n\nconst getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;\nconst getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {\n let {\n playerOptions,\n videojsOptions\n } = _ref;\n const defaultColor = (0,_colors_colors__WEBPACK_IMPORTED_MODULE_4__.getDefaultPlayerColor)(videojsOptions);\n const accentColor = playerOptions && playerOptions.colors ? playerOptions.colors.accent : defaultColor.accent;\n\n // theme = 'pulsing' / 'shadowed'\n const theme = lodash_get__WEBPACK_IMPORTED_MODULE_0___default()(videojsOptions, 'interactionDisplay.theme.template', _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_THEME.PULSING);\n return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({\n tag: 'div',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-item theme-${theme}`,\n 'data-id': getInteractionAreaItemId(item, index)\n },\n style: {\n left: `${item.left}%`,\n top: `${item.top}%`,\n width: `${item.width}%`,\n height: `${item.height}%`,\n transitionDuration: `${durationTime}ms`\n },\n event: {\n name: 'click',\n callback: onClick\n },\n children: [{\n tag: 'div',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-area-marker`\n },\n children: [{\n tag: 'div',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-shadow`\n },\n style: {\n [theme === _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor\n }\n }, {\n tag: 'div',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-main`\n },\n style: {\n borderColor: accentColor\n }\n }]\n }]\n });\n};\nconst percentageToFixedValue = (outOf, value) => outOf / (100 / +value);\nconst getZoomTransformation = (videoElement, interactionAreaItem) => {\n const {\n videoHeight,\n videoWidth\n } = videoElement;\n const itemX = percentageToFixedValue(videoWidth, interactionAreaItem.left);\n const itemY = percentageToFixedValue(videoHeight, interactionAreaItem.top);\n const itemWidth = percentageToFixedValue(videoWidth, interactionAreaItem.width);\n const itemHeight = percentageToFixedValue(videoHeight, interactionAreaItem.height);\n const videoAspectRatio = videoWidth / videoHeight;\n const itemAspectRatio = itemWidth / itemHeight;\n const width = Math.round(itemAspectRatio > 1 || videoAspectRatio > 1 ? itemHeight * itemAspectRatio : itemWidth);\n const height = Math.round(width / videoAspectRatio);\n const x = Math.round(itemX - (width - itemWidth) / 2);\n const y = Math.round(itemY - (height - itemHeight) / 2);\n return {\n width,\n height,\n x: Math.min(Math.max(x, 0), videoWidth - width),\n y: Math.min(Math.max(y, 0), videoHeight - height),\n crop: 'crop'\n };\n};\nconst setInteractionAreasContainer = (videojs, newInteractionAreasContainer) => {\n const currentInteractionAreasContainer = getInteractionAreasContainer(videojs);\n if (currentInteractionAreasContainer) {\n currentInteractionAreasContainer.replaceWith(newInteractionAreasContainer);\n } else {\n // do not use element.append for ie11 support\n videojs.el().appendChild(newInteractionAreasContainer);\n }\n};\nconst getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector(`[data-id=${getInteractionAreaItemId(item, index)}]`);\nconst updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {\n const interactionAreasContainer = getInteractionAreasContainer(videojs);\n interactionAreasData.forEach((item, index) => {\n const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);\n const itemId = getInteractionAreaItemId(item);\n const isExistItem = previousInteractionAreasData.some(i => getInteractionAreaItemId(i) === itemId);\n\n // in case the element of the item is in the dom and exist in the previous data , it update the element position\n if (isExistItem && itemElement) {\n (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.styleElement)(itemElement, {\n left: `${item.left}%`,\n top: `${item.top}%`,\n width: `${item.width}%`,\n height: `${item.height}%`,\n transitionDuration: `${durationTime}ms`\n });\n // if the element did not exist before , not in the dom and not in the previous data , it add a new element\n } else if (!isExistItem && !itemElement) {\n // do not use element.append for ie11 support\n interactionAreasContainer.appendChild(getInteractionAreaItem(configs, item, index, durationTime, event => {\n onClick({\n event,\n item,\n index\n });\n }));\n }\n });\n\n // checking the previous data for element that should be removed if not exist in the new data object.\n previousInteractionAreasData.forEach((item, index) => {\n const itemElement = getInteractionAreaElementById(interactionAreasContainer, item, index);\n const itemId = getInteractionAreaItemId(item);\n const shouldBeRemoved = !interactionAreasData.some(i => getInteractionAreaItemId(i) === itemId);\n if (itemElement && shouldBeRemoved) {\n // do not use element.remove for ie11 support\n itemElement.parentNode.removeChild(itemElement);\n }\n });\n};\nconst shouldShowAreaLayoutMessage = interactionAreasConfig => {\n const isLayoutEnabled = lodash_get__WEBPACK_IMPORTED_MODULE_0___default()(interactionAreasConfig, 'layout.enable', true);\n return isLayoutEnabled && localStorage.getItem(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME) !== 'true';\n};\nconst onClickInteractionAreaLayoutClick = function (checked) {\n let onClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (lodash_noop__WEBPACK_IMPORTED_MODULE_1___default());\n localStorage.setItem(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_LAYOUT_LOCAL_STORAGE_NAME, JSON.parse(checked));\n onClick();\n};\nconst createInteractionAreaLayoutMessage = function (videojs, onClick) {\n let showItAgainCheckbox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n let checked = false;\n const id = `checkbox_${Math.round(Math.random() * 10000)}`;\n const tracksContainer = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({\n tag: 'div',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME} ${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message ${showItAgainCheckbox ? '' : 'clickable'}`\n },\n onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,\n children: [{\n tag: 'img',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-icon`,\n src: _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_HAND_ICON\n }\n }, {\n tag: 'h3',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-title`\n },\n children: 'Tap on dots to zoom for a product.'\n }, (0,_components_themeButton_themedButton__WEBPACK_IMPORTED_MODULE_5__.themedButton)({\n text: 'Got it',\n theme: _components_themeButton_themedButton_const__WEBPACK_IMPORTED_MODULE_6__.BUTTON_THEME.TRANSPARENT_WHITE,\n loadingDelay: showItAgainCheckbox ? 0 : _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.CLOSE_INTERACTION_AREA_LAYOUT_DELAY,\n onClick: showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null\n }), showItAgainCheckbox && {\n tag: 'div',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-do-not-show`\n },\n children: [{\n tag: 'input',\n attr: {\n type: 'checkbox',\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox`,\n id\n },\n event: {\n name: 'input',\n callback: event => {\n checked = event.target.checked;\n }\n }\n }, {\n tag: 'label',\n attr: {\n class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox-title`,\n for: id\n },\n children: 'Don׳t show it again'\n }]\n }].filter(i => i)\n });\n setInteractionAreasContainer(videojs, tracksContainer);\n};\nconst getInteractionAreasContainer = videojs => videojs.el().querySelector(`.${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);\nconst removeInteractionAreasContainer = videojs => {\n const interactionAreasContainer = getInteractionAreasContainer(videojs);\n\n // do not use element.remove for ie11 support\n interactionAreasContainer && interactionAreasContainer.parentNode.removeChild(interactionAreasContainer);\n};\nconst setInteractionAreasContainerSize = (videojs, videoElement) => {\n const interactionAreasContainer = getInteractionAreasContainer(videojs);\n if (!interactionAreasContainer) {\n return;\n }\n const {\n videoHeight,\n videoWidth\n } = videoElement;\n const videoAspectRatio = videoWidth / videoHeight;\n const width = videoAspectRatio * videoElement.clientHeight;\n interactionAreasContainer.style.width = `${videoElement.clientWidth < width ? '100%' : width}px`;\n interactionAreasContainer.style.height = videoElement.clientWidth < width ? `${videoElement.clientWidth / videoAspectRatio}px` : '100%';\n};\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/interaction-areas/interaction-areas.utils.js?"); /***/ }), /***/ "../node_modules/lodash/noop.js": /*!**************************************!*\ !*** ../node_modules/lodash/noop.js ***! \**************************************/ /***/ ((module) => { eval("/**\n * This method returns `undefined`.\n *\n * @static\n * @memberOf _\n * @since 2.3.0\n * @category Util\n * @example\n *\n * _.times(2, _.noop);\n * // => [undefined, undefined]\n */\nfunction noop() {\n // No operation performed.\n}\n\nmodule.exports = noop;\n\n\n//# sourceURL=webpack://cloudinary-video-player/../node_modules/lodash/noop.js?"); /***/ }), /***/ "./plugins/colors/colors.scss": /*!************************************!*\ !*** ./plugins/colors/colors.scss ***! \************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/colors/colors.scss?"); /***/ }), /***/ "./plugins/interaction-areas/interaction-areas.scss": /*!**********************************************************!*\ !*** ./plugins/interaction-areas/interaction-areas.scss ***! \**********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://cloudinary-video-player/./plugins/interaction-areas/interaction-areas.scss?"); /***/ }) }]);