cloudinary-video-player 2.0.5 → 2.1.0

package/dist/interaction-areas.js

@@ -40,7 +40,7 @@ const themedButton = _ref => {
   return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_0__.elementsCreator)({
     tag: 'button',
     attr: {
-      class: "vp-theme-button theme-".concat(theme)
+      class: `vp-theme-button theme-${theme}`
     },
     onClick,
     children: [{
@@ -49,7 +49,7 @@ const themedButton = _ref => {
         class: 'vp-loading-bar'
       },
       style: {
-        'animation-duration': "".concat(loadingDelay, "ms")
+        'animation-duration': `${loadingDelay}ms`
       }
     }, {
       tag: 'div',
@@ -385,7 +385,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const getInteractionAreaItemId = (item, index) => item.id || item.type || "id_".concat(index);
+const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;
 const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
   let {
     playerOptions,
@@ -399,15 +399,15 @@ const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
   return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({
     tag: 'div',
     attr: {
-      class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-item theme-").concat(theme),
+      class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-item theme-${theme}`,
       'data-id': getInteractionAreaItemId(item, index)
     },
     style: {
-      left: "".concat(item.left, "%"),
-      top: "".concat(item.top, "%"),
-      width: "".concat(item.width, "%"),
-      height: "".concat(item.height, "%"),
-      transitionDuration: "".concat(durationTime, "ms")
+      left: `${item.left}%`,
+      top: `${item.top}%`,
+      width: `${item.width}%`,
+      height: `${item.height}%`,
+      transitionDuration: `${durationTime}ms`
     },
     event: {
       name: 'click',
@@ -416,12 +416,12 @@ const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
     children: [{
       tag: 'div',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-area-marker")
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-area-marker`
       },
       children: [{
         tag: 'div',
         attr: {
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-marker-shadow")
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-shadow`
         },
         style: {
           [theme === _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor
@@ -429,7 +429,7 @@ const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
       }, {
         tag: 'div',
         attr: {
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-marker-main")
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-main`
         },
         style: {
           borderColor: accentColor
@@ -471,7 +471,7 @@ const setInteractionAreasContainer = (videojs, newInteractionAreasContainer) =>
     videojs.el().appendChild(newInteractionAreasContainer);
   }
 };
-const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector("[data-id=".concat(getInteractionAreaItemId(item, index), "]"));
+const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector(`[data-id=${getInteractionAreaItemId(item, index)}]`);
 const updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {
   const interactionAreasContainer = getInteractionAreasContainer(videojs);
   interactionAreasData.forEach((item, index) => {
@@ -482,11 +482,11 @@ const updateInteractionAreasItem = (videojs, configs, interactionAreasData, prev
     // in case the element of the item is in the dom and exist in the previous data , it update the element position
     if (isExistItem && itemElement) {
       (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.styleElement)(itemElement, {
-        left: "".concat(item.left, "%"),
-        top: "".concat(item.top, "%"),
-        width: "".concat(item.width, "%"),
-        height: "".concat(item.height, "%"),
-        transitionDuration: "".concat(durationTime, "ms")
+        left: `${item.left}%`,
+        top: `${item.top}%`,
+        width: `${item.width}%`,
+        height: `${item.height}%`,
+        transitionDuration: `${durationTime}ms`
       });
       // if the element did not exist before , not in the dom and not in the previous data , it add a new element
     } else if (!isExistItem && !itemElement) {
@@ -524,23 +524,23 @@ const onClickInteractionAreaLayoutClick = function (checked) {
 const createInteractionAreaLayoutMessage = function (videojs, onClick) {
   let showItAgainCheckbox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let checked = false;
-  const id = "checkbox_".concat(Math.round(Math.random() * 10000));
+  const id = `checkbox_${Math.round(Math.random() * 10000)}`;
   const tracksContainer = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({
     tag: 'div',
     attr: {
-      class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME, " ").concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message ").concat(showItAgainCheckbox ? '' : 'clickable')
+      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'}`
     },
     onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,
     children: [{
       tag: 'img',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-icon"),
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-icon`,
         src: _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_HAND_ICON
       }
     }, {
       tag: 'h3',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-title")
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-title`
       },
       children: 'Tap on dots to zoom for a product.'
     }, (0,_components_themeButton_themedButton__WEBPACK_IMPORTED_MODULE_5__.themedButton)({
@@ -551,13 +551,13 @@ const createInteractionAreaLayoutMessage = function (videojs, onClick) {
     }), showItAgainCheckbox && {
       tag: 'div',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-do-not-show")
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-do-not-show`
       },
       children: [{
         tag: 'input',
         attr: {
           type: 'checkbox',
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-checkbox"),
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox`,
           id
         },
         event: {
@@ -569,7 +569,7 @@ const createInteractionAreaLayoutMessage = function (videojs, onClick) {
       }, {
         tag: 'label',
         attr: {
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-checkbox-title"),
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox-title`,
           for: id
         },
         children: 'Don׳t show it again'
@@ -578,7 +578,7 @@ const createInteractionAreaLayoutMessage = function (videojs, onClick) {
   });
   setInteractionAreasContainer(videojs, tracksContainer);
 };
-const getInteractionAreasContainer = videojs => videojs.el().querySelector(".".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME));
+const getInteractionAreasContainer = videojs => videojs.el().querySelector(`.${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);
 const removeInteractionAreasContainer = videojs => {
   const interactionAreasContainer = getInteractionAreasContainer(videojs);
 
@@ -596,8 +596,8 @@ const setInteractionAreasContainerSize = (videojs, videoElement) => {
   } = videoElement;
   const videoAspectRatio = videoWidth / videoHeight;
   const width = videoAspectRatio * videoElement.clientHeight;
-  interactionAreasContainer.style.width = "".concat(videoElement.clientWidth < width ? '100%' : width, "px");
-  interactionAreasContainer.style.height = videoElement.clientWidth < width ? "".concat(videoElement.clientWidth / videoAspectRatio, "px") : '100%';
+  interactionAreasContainer.style.width = `${videoElement.clientWidth < width ? '100%' : width}px`;
+  interactionAreasContainer.style.height = videoElement.clientWidth < width ? `${videoElement.clientWidth / videoAspectRatio}px` : '100%';
 };
 
 /***/ }),

package/dist/interaction-areas.light.js

@@ -40,7 +40,7 @@ const themedButton = _ref => {
   return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_0__.elementsCreator)({
     tag: 'button',
     attr: {
-      class: "vp-theme-button theme-".concat(theme)
+      class: `vp-theme-button theme-${theme}`
     },
     onClick,
     children: [{
@@ -49,7 +49,7 @@ const themedButton = _ref => {
         class: 'vp-loading-bar'
       },
       style: {
-        'animation-duration': "".concat(loadingDelay, "ms")
+        'animation-duration': `${loadingDelay}ms`
       }
     }, {
       tag: 'div',
@@ -385,7 +385,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const getInteractionAreaItemId = (item, index) => item.id || item.type || "id_".concat(index);
+const getInteractionAreaItemId = (item, index) => item.id || item.type || `id_${index}`;
 const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
   let {
     playerOptions,
@@ -399,15 +399,15 @@ const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
   return (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({
     tag: 'div',
     attr: {
-      class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-item theme-").concat(theme),
+      class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-item theme-${theme}`,
       'data-id': getInteractionAreaItemId(item, index)
     },
     style: {
-      left: "".concat(item.left, "%"),
-      top: "".concat(item.top, "%"),
-      width: "".concat(item.width, "%"),
-      height: "".concat(item.height, "%"),
-      transitionDuration: "".concat(durationTime, "ms")
+      left: `${item.left}%`,
+      top: `${item.top}%`,
+      width: `${item.width}%`,
+      height: `${item.height}%`,
+      transitionDuration: `${durationTime}ms`
     },
     event: {
       name: 'click',
@@ -416,12 +416,12 @@ const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
     children: [{
       tag: 'div',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-area-marker")
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-area-marker`
       },
       children: [{
         tag: 'div',
         attr: {
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-marker-shadow")
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-shadow`
         },
         style: {
           [theme === _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_THEME.SHADOWED ? 'backgroundColor' : 'borderColor']: accentColor
@@ -429,7 +429,7 @@ const getInteractionAreaItem = (_ref, item, index, durationTime, onClick) => {
       }, {
         tag: 'div',
         attr: {
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-marker-main")
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-marker-main`
         },
         style: {
           borderColor: accentColor
@@ -471,7 +471,7 @@ const setInteractionAreasContainer = (videojs, newInteractionAreasContainer) =>
     videojs.el().appendChild(newInteractionAreasContainer);
   }
 };
-const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector("[data-id=".concat(getInteractionAreaItemId(item, index), "]"));
+const getInteractionAreaElementById = (interactionAreasContainer, item, index) => interactionAreasContainer.querySelector(`[data-id=${getInteractionAreaItemId(item, index)}]`);
 const updateInteractionAreasItem = (videojs, configs, interactionAreasData, previousInteractionAreasData, durationTime, onClick) => {
   const interactionAreasContainer = getInteractionAreasContainer(videojs);
   interactionAreasData.forEach((item, index) => {
@@ -482,11 +482,11 @@ const updateInteractionAreasItem = (videojs, configs, interactionAreasData, prev
     // in case the element of the item is in the dom and exist in the previous data , it update the element position
     if (isExistItem && itemElement) {
       (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.styleElement)(itemElement, {
-        left: "".concat(item.left, "%"),
-        top: "".concat(item.top, "%"),
-        width: "".concat(item.width, "%"),
-        height: "".concat(item.height, "%"),
-        transitionDuration: "".concat(durationTime, "ms")
+        left: `${item.left}%`,
+        top: `${item.top}%`,
+        width: `${item.width}%`,
+        height: `${item.height}%`,
+        transitionDuration: `${durationTime}ms`
       });
       // if the element did not exist before , not in the dom and not in the previous data , it add a new element
     } else if (!isExistItem && !itemElement) {
@@ -524,23 +524,23 @@ const onClickInteractionAreaLayoutClick = function (checked) {
 const createInteractionAreaLayoutMessage = function (videojs, onClick) {
   let showItAgainCheckbox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let checked = false;
-  const id = "checkbox_".concat(Math.round(Math.random() * 10000));
+  const id = `checkbox_${Math.round(Math.random() * 10000)}`;
   const tracksContainer = (0,_utils_dom__WEBPACK_IMPORTED_MODULE_2__.elementsCreator)({
     tag: 'div',
     attr: {
-      class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME, " ").concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message ").concat(showItAgainCheckbox ? '' : 'clickable')
+      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'}`
     },
     onClick: !showItAgainCheckbox ? () => onClickInteractionAreaLayoutClick(checked, onClick) : null,
     children: [{
       tag: 'img',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-icon"),
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-icon`,
         src: _interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREA_HAND_ICON
       }
     }, {
       tag: 'h3',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-title")
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-title`
       },
       children: 'Tap on dots to zoom for a product.'
     }, (0,_components_themeButton_themedButton__WEBPACK_IMPORTED_MODULE_5__.themedButton)({
@@ -551,13 +551,13 @@ const createInteractionAreaLayoutMessage = function (videojs, onClick) {
     }), showItAgainCheckbox && {
       tag: 'div',
       attr: {
-        class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-do-not-show")
+        class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-do-not-show`
       },
       children: [{
         tag: 'input',
         attr: {
           type: 'checkbox',
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-checkbox"),
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox`,
           id
         },
         event: {
@@ -569,7 +569,7 @@ const createInteractionAreaLayoutMessage = function (videojs, onClick) {
       }, {
         tag: 'label',
         attr: {
-          class: "".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX, "-layout-message-checkbox-title"),
+          class: `${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_PREFIX}-layout-message-checkbox-title`,
           for: id
         },
         children: 'Don׳t show it again'
@@ -578,7 +578,7 @@ const createInteractionAreaLayoutMessage = function (videojs, onClick) {
   });
   setInteractionAreasContainer(videojs, tracksContainer);
 };
-const getInteractionAreasContainer = videojs => videojs.el().querySelector(".".concat(_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME));
+const getInteractionAreasContainer = videojs => videojs.el().querySelector(`.${_interaction_areas_const__WEBPACK_IMPORTED_MODULE_3__.INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);
 const removeInteractionAreasContainer = videojs => {
   const interactionAreasContainer = getInteractionAreasContainer(videojs);
 
@@ -596,8 +596,8 @@ const setInteractionAreasContainerSize = (videojs, videoElement) => {
   } = videoElement;
   const videoAspectRatio = videoWidth / videoHeight;
   const width = videoAspectRatio * videoElement.clientHeight;
-  interactionAreasContainer.style.width = "".concat(videoElement.clientWidth < width ? '100%' : width, "px");
-  interactionAreasContainer.style.height = videoElement.clientWidth < width ? "".concat(videoElement.clientWidth / videoAspectRatio, "px") : '100%';
+  interactionAreasContainer.style.width = `${videoElement.clientWidth < width ? '100%' : width}px`;
+  interactionAreasContainer.style.height = videoElement.clientWidth < width ? `${videoElement.clientWidth / videoAspectRatio}px` : '100%';
 };
 
 /***/ }),

package/dist/interaction-areas.light.min.js

@@ -1,2 +1,2 @@
-(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404],{9017:(t,e,n)=>{"use strict";n.d(e,{F0:()=>r,Fg:()=>a,IT:()=>c,T$:()=>l,Vv:()=>d,Yx:()=>s,be:()=>i,q3:()=>u,sb:()=>o});const o="cld-ia-layout-state",i="vp-ia",a="interaction-areas-container",r={PORTRAIT:"portrait",LANDSCAPE:"landscape",All:"all",CENTER:"center"},c={PULSING:"pulsing",SHADOWED:"shadowed"},s={[r.PORTRAIT]:"https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt",[r.LANDSCAPE]:"https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt",[r.All]:"https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt",[r.CENTER]:"https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt"},l="https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg",d=4500,u=250},1066:(t,e,n)=>{"use strict";n.d(e,{interactionAreasService:()=>j});var o=n(6673),i=n.n(o),a=n(2832),r=n.n(a),c=n(2858),s=n.n(c),l=n(5114),d=n.n(l),u=n(9017),v=n(7134),p=n(4500);const h=t=>{let{text:e,onClick:n,theme:o="",loadingDelay:i=0}=t;return(0,v.It)({tag:"button",attr:{class:"vp-theme-button theme-".concat(o)},onClick:n,children:[{tag:"div",attr:{class:"vp-loading-bar"},style:{"animation-duration":"".concat(i,"ms")}},{tag:"div",attr:{class:"content"},children:e}]})},f="transparent-white",m=(t,e)=>t.id||t.type||"id_".concat(e),g=(t,e,n,o,i)=>{let{playerOptions:a,videojsOptions:c}=t;const s=(0,p.w)(c),l=a&&a.colors?a.colors.accent:s.accent,d=r()(c,"interactionDisplay.theme.template",u.IT.PULSING);return(0,v.It)({tag:"div",attr:{class:"".concat(u.be,"-item theme-").concat(d),"data-id":m(e,n)},style:{left:"".concat(e.left,"%"),top:"".concat(e.top,"%"),width:"".concat(e.width,"%"),height:"".concat(e.height,"%"),transitionDuration:"".concat(o,"ms")},event:{name:"click",callback:i},children:[{tag:"div",attr:{class:"".concat(u.be,"-area-marker")},children:[{tag:"div",attr:{class:"".concat(u.be,"-marker-shadow")},style:{[d===u.IT.SHADOWED?"backgroundColor":"borderColor"]:l}},{tag:"div",attr:{class:"".concat(u.be,"-marker-main")},style:{borderColor:l}}]}]})},y=(t,e)=>t/(100/+e),b=(t,e)=>{const n=E(t);n?n.replaceWith(e):t.el().appendChild(e)},T=(t,e,n)=>t.querySelector("[data-id=".concat(m(e,n),"]")),x=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},E=t=>t.el().querySelector(".".concat(u.Fg)),w=t=>{const e=E(t);e&&e.parentNode.removeChild(e)};var k=n(8838),C=n(1104);const j=(t,e,n)=>{let o=!1,a=null,c=null,l=d();const p=()=>{return t=n.interactionDisplay,r()(t,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb);var t},j=()=>{const t=I();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime};function A(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=I();return t||e&&e.enable}function D(){c&&t.videojs.removeRemoteTextTrack(c);const e=A(),n=I();if(!e||o)return null;if(Array.isArray(n.template))M(n.template),R();else{const e=n.vttUrl||u.Yx[n.template];e&&(c=(0,k.eo)(t.videojs,e),function(e){if(!e)return;let n=null;e.addEventListener("cuechange",(()=>{const o=e.activeCues&&e.activeCues[0];if(o){const t=Math.max(Math.floor(1e3*(o.endTime-o.startTime)),u.q3),e=JSON.parse(o.text);M(e,n,t),!n&&R(),n=e}else w(t.videojs),n=null}))}(c))}}function I(){const{cldSrc:t}=a;return t&&t.getInteractionAreas()}function S(){w(t.videojs),D(),t.play()}function O(){if(A())if(p()){let e=null;const o=r()(n,"interactionDisplay.layout.showAgain",!1);t.pause(),function(t,e){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=!1;const i="checkbox_".concat(Math.round(1e4*Math.random())),a=(0,v.It)({tag:"div",attr:{class:"".concat(u.Fg," ").concat(u.be,"-layout-message ").concat(n?"":"clickable")},onClick:n?null:()=>x(o,e),children:[{tag:"img",attr:{class:"".concat(u.be,"-layout-icon"),src:u.T$}},{tag:"h3",attr:{class:"".concat(u.be,"-layout-message-title")},children:"Tap on dots to zoom for a product."},h({text:"Got it",theme:f,loadingDelay:n?0:u.Vv,onClick:n?()=>x(o,e):null}),n&&{tag:"div",attr:{class:"".concat(u.be,"-layout-message-do-not-show")},children:[{tag:"input",attr:{type:"checkbox",class:"".concat(u.be,"-layout-message-checkbox"),id:i},event:{name:"input",callback:t=>{o=t.target.checked}}},{tag:"label",attr:{class:"".concat(u.be,"-layout-message-checkbox-title"),for:i},children:"Don׳t show it again"}]}].filter((t=>t))});b(t,a)}(t.videojs,(()=>{clearTimeout(e),S()}),o),o||(e=setTimeout(S,u.Vv))}else S()}function N(e,n,r){const c=t.currentTime(),s=j(),{cldSrc:d}=a,p=d.getInitOptions(),h=n||{transformation:p.transformation},f=!e&&((t,e)=>{const{videoHeight:n,videoWidth:o}=t,i=y(o,e.left),a=y(n,e.top),r=y(o,e.width),c=y(n,e.height),s=o/n,l=r/c,d=Math.round(l>1||s>1?c*l:r),u=Math.round(d/s),v=Math.round(i-(d-r)/2),p=Math.round(a-(u-c)/2);return{width:d,height:u,x:Math.min(Math.max(v,0),o-d),y:Math.min(Math.max(p,0),n-u),crop:"crop"}})(t.videoElement,r),m=f?i().obj.merge({transformation:f},h):h,g=d.isRawUrl?a.src:{publicId:d.publicId()};t.source(f?{publicId:d.publicId()}:e,m).play(),s&&t.currentTime(c),o=!0,function(){const e=(0,v.n)("div",{class:"go-back-button"});e.addEventListener("click",(()=>{l()}),!1);const n=(0,v.n)("div",{class:u.Fg},e);b(t.videojs,n)}(),l=()=>{if(o){o=!1;const e=t.currentTime(),n=t.duration();t.source(g,p).play(),s&&e<n&&t.currentTime(e),D()}}}function L(t){let{event:e,item:n,index:o}=t;const i=I();i.onClick&&i.onClick({item:n,index:o,event:e,zoom:(t,e)=>{N(t,e,n)}})}function M(o,i){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r={playerOptions:e,videojsOptions:n};if(i)((t,e,n,o,i,a)=>{const r=E(t);n.forEach(((t,n)=>{const c=T(r,t,n),s=m(t),l=o.some((t=>m(t)===s));l&&c?(0,v.cu)(c,{left:"".concat(t.left,"%"),top:"".concat(t.top,"%"),width:"".concat(t.width,"%"),height:"".concat(t.height,"%"),transitionDuration:"".concat(i,"ms")}):l||c||r.appendChild(g(e,t,n,i,(e=>{a({event:e,item:t,index:n})})))})),o.forEach(((t,e)=>{const o=T(r,t,e),i=m(t),a=!n.some((t=>m(t)===i));o&&a&&o.parentNode.removeChild(o)}))})(t.videojs,r,o,i,a,L);else{const e=o.map(((t,e)=>g(r,t,e,a,(n=>{L({event:n,item:t,index:e})}))));b(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function R(){A()&&((t,e)=>{const n=E(t);if(!n)return;const{videoHeight:o,videoWidth:i}=e,a=i/o,r=a*e.clientHeight;n.style.width="".concat(e.clientWidth<r?"100%":r,"px"),n.style.height=e.clientWidth<r?"".concat(e.clientWidth/a,"px"):"100%"})(t.videojs,t.videoElement)}!function(){if(a=a||t.videojs.currentSource(),A()){t.videojs.el().classList.add("interaction-areas"),t.videojs.one(C.f.PLAY,(()=>{"object"==typeof t.videojs.ima?t.on("adsready",(()=>{t.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,O)})):O()}));const e=s()(R,100);t.videojs.on(C.f.FULL_SCREEN_CHANGE,(()=>{setTimeout(e,100)}));const n=(0,v.q2)(window,"resize",R,!1);t.videojs.on(C.f.DISPOSE,n)}t.videojs.on(C.f.ENDED,(()=>{l()})),t.videojs.on(C.f.ERROR,(()=>{t.pause()}))}()}},8812:(t,e,n)=>{var o=n(2140),i=/^\s+/;t.exports=function(t){return t?t.slice(0,o(t)+1).replace(i,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var n=t.length;n--&&e.test(t.charAt(n)););return n}},6177:(t,e,n)=>{var o=n(8953),i=n(3664),a=n(5378),r=Math.max,c=Math.min;t.exports=function(t,e,n){var s,l,d,u,v,p,h=0,f=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=s,o=l;return s=l=void 0,h=e,u=t.apply(o,n)}function b(t){var n=t-p;return void 0===p||n>=e||n<0||m&&t-h>=d}function T(){var t=i();if(b(t))return x(t);v=setTimeout(T,function(t){var n=e-(t-p);return m?c(n,d-(t-h)):n}(t))}function x(t){return v=void 0,g&&s?y(t):(s=l=void 0,u)}function E(){var t=i(),n=b(t);if(s=arguments,l=this,p=t,n){if(void 0===v)return function(t){return h=t,v=setTimeout(T,e),f?y(t):u}(p);if(m)return clearTimeout(v),v=setTimeout(T,e),y(p)}return void 0===v&&(v=setTimeout(T,e)),u}return e=a(e)||0,o(n)&&(f=!!n.leading,d=(m="maxWait"in n)?r(a(n.maxWait)||0,e):d,g="trailing"in n?!!n.trailing:g),E.cancel=function(){void 0!==v&&clearTimeout(v),h=0,s=p=l=v=void 0},E.flush=function(){return void 0===v?u:x(i())},E}},5114:t=>{t.exports=function(){}},3664:(t,e,n)=>{var o=n(1433);t.exports=function(){return o.Date.now()}},2858:(t,e,n)=>{var o=n(6177),i=n(8953);t.exports=function(t,e,n){var a=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return i(n)&&(a="leading"in n?!!n.leading:a,r="trailing"in n?!!n.trailing:r),o(t,e,{leading:a,maxWait:e,trailing:r})}},5378:(t,e,n)=>{var o=n(8812),i=n(8953),a=n(5414),r=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,s=/^0o[0-7]+$/i,l=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return NaN;if(i(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=i(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=o(t);var n=c.test(t);return n||s.test(t)?l(t.slice(2),n?2:8):r.test(t)?NaN:+t}}}]);
+(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404],{9017:(t,e,n)=>{"use strict";n.d(e,{F0:()=>r,Fg:()=>a,IT:()=>s,T$:()=>l,Vv:()=>d,Yx:()=>c,be:()=>o,q3:()=>u,sb:()=>i});const i="cld-ia-layout-state",o="vp-ia",a="interaction-areas-container",r={PORTRAIT:"portrait",LANDSCAPE:"landscape",All:"all",CENTER:"center"},s={PULSING:"pulsing",SHADOWED:"shadowed"},c={[r.PORTRAIT]:"https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt",[r.LANDSCAPE]:"https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt",[r.All]:"https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt",[r.CENTER]:"https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt"},l="https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg",d=4500,u=250},1066:(t,e,n)=>{"use strict";n.d(e,{interactionAreasService:()=>C});var i=n(6673),o=n.n(i),a=n(2832),r=n.n(a),s=n(2858),c=n.n(s),l=n(5114),d=n.n(l),u=n(9017),v=n(7134),p=n(4500);const h=t=>{let{text:e,onClick:n,theme:i="",loadingDelay:o=0}=t;return(0,v.It)({tag:"button",attr:{class:`vp-theme-button theme-${i}`},onClick:n,children:[{tag:"div",attr:{class:"vp-loading-bar"},style:{"animation-duration":`${o}ms`}},{tag:"div",attr:{class:"content"},children:e}]})},f="transparent-white",m=(t,e)=>t.id||t.type||`id_${e}`,g=(t,e,n,i,o)=>{let{playerOptions:a,videojsOptions:s}=t;const c=(0,p.w)(s),l=a&&a.colors?a.colors.accent:c.accent,d=r()(s,"interactionDisplay.theme.template",u.IT.PULSING);return(0,v.It)({tag:"div",attr:{class:`${u.be}-item theme-${d}`,"data-id":m(e,n)},style:{left:`${e.left}%`,top:`${e.top}%`,width:`${e.width}%`,height:`${e.height}%`,transitionDuration:`${i}ms`},event:{name:"click",callback:o},children:[{tag:"div",attr:{class:`${u.be}-area-marker`},children:[{tag:"div",attr:{class:`${u.be}-marker-shadow`},style:{[d===u.IT.SHADOWED?"backgroundColor":"borderColor"]:l}},{tag:"div",attr:{class:`${u.be}-marker-main`},style:{borderColor:l}}]}]})},y=(t,e)=>t/(100/+e),b=(t,e)=>{const n=x(t);n?n.replaceWith(e):t.el().appendChild(e)},T=(t,e,n)=>t.querySelector(`[data-id=${m(e,n)}]`),$=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},x=t=>t.el().querySelector(`.${u.Fg}`),E=t=>{const e=x(t);e&&e.parentNode.removeChild(e)};var w=n(8838),k=n(1104);const C=(t,e,n)=>{let i=!1,a=null,s=null,l=d();const p=()=>{return t=n.interactionDisplay,r()(t,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb);var t},C=()=>{const t=D();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime};function j(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=D();return t||e&&e.enable}function A(){s&&t.videojs.removeRemoteTextTrack(s);const e=j(),n=D();if(!e||i)return null;if(Array.isArray(n.template))L(n.template),M();else{const e=n.vttUrl||u.Yx[n.template];e&&(s=(0,w.eo)(t.videojs,e),function(e){if(!e)return;let n=null;e.addEventListener("cuechange",(()=>{const i=e.activeCues&&e.activeCues[0];if(i){const t=Math.max(Math.floor(1e3*(i.endTime-i.startTime)),u.q3),e=JSON.parse(i.text);L(e,n,t),!n&&M(),n=e}else E(t.videojs),n=null}))}(s))}}function D(){const{cldSrc:t}=a;return t&&t.getInteractionAreas()}function I(){E(t.videojs),A(),t.play()}function S(){if(j())if(p()){let e=null;const i=r()(n,"interactionDisplay.layout.showAgain",!1);t.pause(),function(t,e){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!1;const o=`checkbox_${Math.round(1e4*Math.random())}`,a=(0,v.It)({tag:"div",attr:{class:`${u.Fg} ${u.be}-layout-message ${n?"":"clickable"}`},onClick:n?null:()=>$(i,e),children:[{tag:"img",attr:{class:`${u.be}-layout-icon`,src:u.T$}},{tag:"h3",attr:{class:`${u.be}-layout-message-title`},children:"Tap on dots to zoom for a product."},h({text:"Got it",theme:f,loadingDelay:n?0:u.Vv,onClick:n?()=>$(i,e):null}),n&&{tag:"div",attr:{class:`${u.be}-layout-message-do-not-show`},children:[{tag:"input",attr:{type:"checkbox",class:`${u.be}-layout-message-checkbox`,id:o},event:{name:"input",callback:t=>{i=t.target.checked}}},{tag:"label",attr:{class:`${u.be}-layout-message-checkbox-title`,for:o},children:"Don׳t show it again"}]}].filter((t=>t))});b(t,a)}(t.videojs,(()=>{clearTimeout(e),I()}),i),i||(e=setTimeout(I,u.Vv))}else I()}function O(e,n,r){const s=t.currentTime(),c=C(),{cldSrc:d}=a,p=d.getInitOptions(),h=n||{transformation:p.transformation},f=!e&&((t,e)=>{const{videoHeight:n,videoWidth:i}=t,o=y(i,e.left),a=y(n,e.top),r=y(i,e.width),s=y(n,e.height),c=i/n,l=r/s,d=Math.round(l>1||c>1?s*l:r),u=Math.round(d/c),v=Math.round(o-(d-r)/2),p=Math.round(a-(u-s)/2);return{width:d,height:u,x:Math.min(Math.max(v,0),i-d),y:Math.min(Math.max(p,0),n-u),crop:"crop"}})(t.videoElement,r),m=f?o().obj.merge({transformation:f},h):h,g=d.isRawUrl?a.src:{publicId:d.publicId()};t.source(f?{publicId:d.publicId()}:e,m).play(),c&&t.currentTime(s),i=!0,function(){const e=(0,v.n)("div",{class:"go-back-button"});e.addEventListener("click",(()=>{l()}),!1);const n=(0,v.n)("div",{class:u.Fg},e);b(t.videojs,n)}(),l=()=>{if(i){i=!1;const e=t.currentTime(),n=t.duration();t.source(g,p).play(),c&&e<n&&t.currentTime(e),A()}}}function N(t){let{event:e,item:n,index:i}=t;const o=D();o.onClick&&o.onClick({item:n,index:i,event:e,zoom:(t,e)=>{O(t,e,n)}})}function L(i,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r={playerOptions:e,videojsOptions:n};if(o)((t,e,n,i,o,a)=>{const r=x(t);n.forEach(((t,n)=>{const s=T(r,t,n),c=m(t),l=i.some((t=>m(t)===c));l&&s?(0,v.cu)(s,{left:`${t.left}%`,top:`${t.top}%`,width:`${t.width}%`,height:`${t.height}%`,transitionDuration:`${o}ms`}):l||s||r.appendChild(g(e,t,n,o,(e=>{a({event:e,item:t,index:n})})))})),i.forEach(((t,e)=>{const i=T(r,t,e),o=m(t),a=!n.some((t=>m(t)===o));i&&a&&i.parentNode.removeChild(i)}))})(t.videojs,r,i,o,a,N);else{const e=i.map(((t,e)=>g(r,t,e,a,(n=>{N({event:n,item:t,index:e})}))));b(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function M(){j()&&((t,e)=>{const n=x(t);if(!n)return;const{videoHeight:i,videoWidth:o}=e,a=o/i,r=a*e.clientHeight;n.style.width=`${e.clientWidth<r?"100%":r}px`,n.style.height=e.clientWidth<r?e.clientWidth/a+"px":"100%"})(t.videojs,t.videoElement)}!function(){if(a=a||t.videojs.currentSource(),j()){t.videojs.el().classList.add("interaction-areas"),t.videojs.one(k.f.PLAY,(()=>{"object"==typeof t.videojs.ima?t.on("adsready",(()=>{t.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,S)})):S()}));const e=c()(M,100);t.videojs.on(k.f.FULL_SCREEN_CHANGE,(()=>{setTimeout(e,100)}));const n=(0,v.q2)(window,"resize",M,!1);t.videojs.on(k.f.DISPOSE,n)}t.videojs.on(k.f.ENDED,(()=>{l()})),t.videojs.on(k.f.ERROR,(()=>{t.pause()}))}()}},8812:(t,e,n)=>{var i=n(2140),o=/^\s+/;t.exports=function(t){return t?t.slice(0,i(t)+1).replace(o,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var n=t.length;n--&&e.test(t.charAt(n)););return n}},6177:(t,e,n)=>{var i=n(8953),o=n(3664),a=n(5378),r=Math.max,s=Math.min;t.exports=function(t,e,n){var c,l,d,u,v,p,h=0,f=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=c,i=l;return c=l=void 0,h=e,u=t.apply(i,n)}function b(t){var n=t-p;return void 0===p||n>=e||n<0||m&&t-h>=d}function T(){var t=o();if(b(t))return $(t);v=setTimeout(T,function(t){var n=e-(t-p);return m?s(n,d-(t-h)):n}(t))}function $(t){return v=void 0,g&&c?y(t):(c=l=void 0,u)}function x(){var t=o(),n=b(t);if(c=arguments,l=this,p=t,n){if(void 0===v)return function(t){return h=t,v=setTimeout(T,e),f?y(t):u}(p);if(m)return clearTimeout(v),v=setTimeout(T,e),y(p)}return void 0===v&&(v=setTimeout(T,e)),u}return e=a(e)||0,i(n)&&(f=!!n.leading,d=(m="maxWait"in n)?r(a(n.maxWait)||0,e):d,g="trailing"in n?!!n.trailing:g),x.cancel=function(){void 0!==v&&clearTimeout(v),h=0,c=p=l=v=void 0},x.flush=function(){return void 0===v?u:$(o())},x}},5114:t=>{t.exports=function(){}},3664:(t,e,n)=>{var i=n(1433);t.exports=function(){return i.Date.now()}},2858:(t,e,n)=>{var i=n(6177),o=n(8953);t.exports=function(t,e,n){var a=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return o(n)&&(a="leading"in n?!!n.leading:a,r="trailing"in n?!!n.trailing:r),i(t,e,{leading:a,maxWait:e,trailing:r})}},5378:(t,e,n)=>{var i=n(8812),o=n(8953),a=n(5414),r=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,c=/^0o[0-7]+$/i,l=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return NaN;if(o(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=i(t);var n=s.test(t);return n||c.test(t)?l(t.slice(2),n?2:8):r.test(t)?NaN:+t}}}]);
 //# sourceMappingURL=interaction-areas.light.min.js.map

package/dist/interaction-areas.min.js

@@ -1,2 +1,2 @@
-(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404],{9017:(t,e,n)=>{"use strict";n.d(e,{F0:()=>r,Fg:()=>a,IT:()=>c,T$:()=>l,Vv:()=>d,Yx:()=>s,be:()=>i,q3:()=>u,sb:()=>o});const o="cld-ia-layout-state",i="vp-ia",a="interaction-areas-container",r={PORTRAIT:"portrait",LANDSCAPE:"landscape",All:"all",CENTER:"center"},c={PULSING:"pulsing",SHADOWED:"shadowed"},s={[r.PORTRAIT]:"https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt",[r.LANDSCAPE]:"https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt",[r.All]:"https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt",[r.CENTER]:"https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt"},l="https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg",d=4500,u=250},1066:(t,e,n)=>{"use strict";n.d(e,{interactionAreasService:()=>j});var o=n(7938),i=n.n(o),a=n(2832),r=n.n(a),c=n(2858),s=n.n(c),l=n(5114),d=n.n(l),u=n(9017),v=n(7134),p=n(4500);const h=t=>{let{text:e,onClick:n,theme:o="",loadingDelay:i=0}=t;return(0,v.It)({tag:"button",attr:{class:"vp-theme-button theme-".concat(o)},onClick:n,children:[{tag:"div",attr:{class:"vp-loading-bar"},style:{"animation-duration":"".concat(i,"ms")}},{tag:"div",attr:{class:"content"},children:e}]})},f="transparent-white",m=(t,e)=>t.id||t.type||"id_".concat(e),g=(t,e,n,o,i)=>{let{playerOptions:a,videojsOptions:c}=t;const s=(0,p.w)(c),l=a&&a.colors?a.colors.accent:s.accent,d=r()(c,"interactionDisplay.theme.template",u.IT.PULSING);return(0,v.It)({tag:"div",attr:{class:"".concat(u.be,"-item theme-").concat(d),"data-id":m(e,n)},style:{left:"".concat(e.left,"%"),top:"".concat(e.top,"%"),width:"".concat(e.width,"%"),height:"".concat(e.height,"%"),transitionDuration:"".concat(o,"ms")},event:{name:"click",callback:i},children:[{tag:"div",attr:{class:"".concat(u.be,"-area-marker")},children:[{tag:"div",attr:{class:"".concat(u.be,"-marker-shadow")},style:{[d===u.IT.SHADOWED?"backgroundColor":"borderColor"]:l}},{tag:"div",attr:{class:"".concat(u.be,"-marker-main")},style:{borderColor:l}}]}]})},y=(t,e)=>t/(100/+e),b=(t,e)=>{const n=E(t);n?n.replaceWith(e):t.el().appendChild(e)},T=(t,e,n)=>t.querySelector("[data-id=".concat(m(e,n),"]")),x=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},E=t=>t.el().querySelector(".".concat(u.Fg)),w=t=>{const e=E(t);e&&e.parentNode.removeChild(e)};var k=n(8838),C=n(1104);const j=(t,e,n)=>{let o=!1,a=null,c=null,l=d();const p=()=>{return t=n.interactionDisplay,r()(t,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb);var t},j=()=>{const t=I();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime};function A(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=I();return t||e&&e.enable}function D(){c&&t.videojs.removeRemoteTextTrack(c);const e=A(),n=I();if(!e||o)return null;if(Array.isArray(n.template))M(n.template),R();else{const e=n.vttUrl||u.Yx[n.template];e&&(c=(0,k.eo)(t.videojs,e),function(e){if(!e)return;let n=null;e.addEventListener("cuechange",(()=>{const o=e.activeCues&&e.activeCues[0];if(o){const t=Math.max(Math.floor(1e3*(o.endTime-o.startTime)),u.q3),e=JSON.parse(o.text);M(e,n,t),!n&&R(),n=e}else w(t.videojs),n=null}))}(c))}}function I(){const{cldSrc:t}=a;return t&&t.getInteractionAreas()}function S(){w(t.videojs),D(),t.play()}function O(){if(A())if(p()){let e=null;const o=r()(n,"interactionDisplay.layout.showAgain",!1);t.pause(),function(t,e){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=!1;const i="checkbox_".concat(Math.round(1e4*Math.random())),a=(0,v.It)({tag:"div",attr:{class:"".concat(u.Fg," ").concat(u.be,"-layout-message ").concat(n?"":"clickable")},onClick:n?null:()=>x(o,e),children:[{tag:"img",attr:{class:"".concat(u.be,"-layout-icon"),src:u.T$}},{tag:"h3",attr:{class:"".concat(u.be,"-layout-message-title")},children:"Tap on dots to zoom for a product."},h({text:"Got it",theme:f,loadingDelay:n?0:u.Vv,onClick:n?()=>x(o,e):null}),n&&{tag:"div",attr:{class:"".concat(u.be,"-layout-message-do-not-show")},children:[{tag:"input",attr:{type:"checkbox",class:"".concat(u.be,"-layout-message-checkbox"),id:i},event:{name:"input",callback:t=>{o=t.target.checked}}},{tag:"label",attr:{class:"".concat(u.be,"-layout-message-checkbox-title"),for:i},children:"Don׳t show it again"}]}].filter((t=>t))});b(t,a)}(t.videojs,(()=>{clearTimeout(e),S()}),o),o||(e=setTimeout(S,u.Vv))}else S()}function N(e,n,r){const c=t.currentTime(),s=j(),{cldSrc:d}=a,p=d.getInitOptions(),h=n||{transformation:p.transformation},f=!e&&((t,e)=>{const{videoHeight:n,videoWidth:o}=t,i=y(o,e.left),a=y(n,e.top),r=y(o,e.width),c=y(n,e.height),s=o/n,l=r/c,d=Math.round(l>1||s>1?c*l:r),u=Math.round(d/s),v=Math.round(i-(d-r)/2),p=Math.round(a-(u-c)/2);return{width:d,height:u,x:Math.min(Math.max(v,0),o-d),y:Math.min(Math.max(p,0),n-u),crop:"crop"}})(t.videoElement,r),m=f?i().obj.merge({transformation:f},h):h,g=d.isRawUrl?a.src:{publicId:d.publicId()};t.source(f?{publicId:d.publicId()}:e,m).play(),s&&t.currentTime(c),o=!0,function(){const e=(0,v.n)("div",{class:"go-back-button"});e.addEventListener("click",(()=>{l()}),!1);const n=(0,v.n)("div",{class:u.Fg},e);b(t.videojs,n)}(),l=()=>{if(o){o=!1;const e=t.currentTime(),n=t.duration();t.source(g,p).play(),s&&e<n&&t.currentTime(e),D()}}}function L(t){let{event:e,item:n,index:o}=t;const i=I();i.onClick&&i.onClick({item:n,index:o,event:e,zoom:(t,e)=>{N(t,e,n)}})}function M(o,i){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r={playerOptions:e,videojsOptions:n};if(i)((t,e,n,o,i,a)=>{const r=E(t);n.forEach(((t,n)=>{const c=T(r,t,n),s=m(t),l=o.some((t=>m(t)===s));l&&c?(0,v.cu)(c,{left:"".concat(t.left,"%"),top:"".concat(t.top,"%"),width:"".concat(t.width,"%"),height:"".concat(t.height,"%"),transitionDuration:"".concat(i,"ms")}):l||c||r.appendChild(g(e,t,n,i,(e=>{a({event:e,item:t,index:n})})))})),o.forEach(((t,e)=>{const o=T(r,t,e),i=m(t),a=!n.some((t=>m(t)===i));o&&a&&o.parentNode.removeChild(o)}))})(t.videojs,r,o,i,a,L);else{const e=o.map(((t,e)=>g(r,t,e,a,(n=>{L({event:n,item:t,index:e})}))));b(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function R(){A()&&((t,e)=>{const n=E(t);if(!n)return;const{videoHeight:o,videoWidth:i}=e,a=i/o,r=a*e.clientHeight;n.style.width="".concat(e.clientWidth<r?"100%":r,"px"),n.style.height=e.clientWidth<r?"".concat(e.clientWidth/a,"px"):"100%"})(t.videojs,t.videoElement)}!function(){if(a=a||t.videojs.currentSource(),A()){t.videojs.el().classList.add("interaction-areas"),t.videojs.one(C.f.PLAY,(()=>{"object"==typeof t.videojs.ima?t.on("adsready",(()=>{t.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,O)})):O()}));const e=s()(R,100);t.videojs.on(C.f.FULL_SCREEN_CHANGE,(()=>{setTimeout(e,100)}));const n=(0,v.q2)(window,"resize",R,!1);t.videojs.on(C.f.DISPOSE,n)}t.videojs.on(C.f.ENDED,(()=>{l()})),t.videojs.on(C.f.ERROR,(()=>{t.pause()}))}()}},8812:(t,e,n)=>{var o=n(2140),i=/^\s+/;t.exports=function(t){return t?t.slice(0,o(t)+1).replace(i,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var n=t.length;n--&&e.test(t.charAt(n)););return n}},6177:(t,e,n)=>{var o=n(8953),i=n(3664),a=n(5378),r=Math.max,c=Math.min;t.exports=function(t,e,n){var s,l,d,u,v,p,h=0,f=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=s,o=l;return s=l=void 0,h=e,u=t.apply(o,n)}function b(t){var n=t-p;return void 0===p||n>=e||n<0||m&&t-h>=d}function T(){var t=i();if(b(t))return x(t);v=setTimeout(T,function(t){var n=e-(t-p);return m?c(n,d-(t-h)):n}(t))}function x(t){return v=void 0,g&&s?y(t):(s=l=void 0,u)}function E(){var t=i(),n=b(t);if(s=arguments,l=this,p=t,n){if(void 0===v)return function(t){return h=t,v=setTimeout(T,e),f?y(t):u}(p);if(m)return clearTimeout(v),v=setTimeout(T,e),y(p)}return void 0===v&&(v=setTimeout(T,e)),u}return e=a(e)||0,o(n)&&(f=!!n.leading,d=(m="maxWait"in n)?r(a(n.maxWait)||0,e):d,g="trailing"in n?!!n.trailing:g),E.cancel=function(){void 0!==v&&clearTimeout(v),h=0,s=p=l=v=void 0},E.flush=function(){return void 0===v?u:x(i())},E}},5114:t=>{t.exports=function(){}},3664:(t,e,n)=>{var o=n(1433);t.exports=function(){return o.Date.now()}},2858:(t,e,n)=>{var o=n(6177),i=n(8953);t.exports=function(t,e,n){var a=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return i(n)&&(a="leading"in n?!!n.leading:a,r="trailing"in n?!!n.trailing:r),o(t,e,{leading:a,maxWait:e,trailing:r})}},5378:(t,e,n)=>{var o=n(8812),i=n(8953),a=n(5414),r=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,s=/^0o[0-7]+$/i,l=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return NaN;if(i(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=i(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=o(t);var n=c.test(t);return n||s.test(t)?l(t.slice(2),n?2:8):r.test(t)?NaN:+t}}}]);
+(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404],{9017:(t,e,n)=>{"use strict";n.d(e,{F0:()=>r,Fg:()=>a,IT:()=>s,T$:()=>l,Vv:()=>d,Yx:()=>c,be:()=>o,q3:()=>u,sb:()=>i});const i="cld-ia-layout-state",o="vp-ia",a="interaction-areas-container",r={PORTRAIT:"portrait",LANDSCAPE:"landscape",All:"all",CENTER:"center"},s={PULSING:"pulsing",SHADOWED:"shadowed"},c={[r.PORTRAIT]:"https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt",[r.LANDSCAPE]:"https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt",[r.All]:"https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt",[r.CENTER]:"https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt"},l="https://res.cloudinary.com/prod/image/upload/v1626764643/video-player/interaction-area-hand.svg",d=4500,u=250},1066:(t,e,n)=>{"use strict";n.d(e,{interactionAreasService:()=>C});var i=n(7938),o=n.n(i),a=n(2832),r=n.n(a),s=n(2858),c=n.n(s),l=n(5114),d=n.n(l),u=n(9017),v=n(7134),p=n(4500);const h=t=>{let{text:e,onClick:n,theme:i="",loadingDelay:o=0}=t;return(0,v.It)({tag:"button",attr:{class:`vp-theme-button theme-${i}`},onClick:n,children:[{tag:"div",attr:{class:"vp-loading-bar"},style:{"animation-duration":`${o}ms`}},{tag:"div",attr:{class:"content"},children:e}]})},f="transparent-white",m=(t,e)=>t.id||t.type||`id_${e}`,g=(t,e,n,i,o)=>{let{playerOptions:a,videojsOptions:s}=t;const c=(0,p.w)(s),l=a&&a.colors?a.colors.accent:c.accent,d=r()(s,"interactionDisplay.theme.template",u.IT.PULSING);return(0,v.It)({tag:"div",attr:{class:`${u.be}-item theme-${d}`,"data-id":m(e,n)},style:{left:`${e.left}%`,top:`${e.top}%`,width:`${e.width}%`,height:`${e.height}%`,transitionDuration:`${i}ms`},event:{name:"click",callback:o},children:[{tag:"div",attr:{class:`${u.be}-area-marker`},children:[{tag:"div",attr:{class:`${u.be}-marker-shadow`},style:{[d===u.IT.SHADOWED?"backgroundColor":"borderColor"]:l}},{tag:"div",attr:{class:`${u.be}-marker-main`},style:{borderColor:l}}]}]})},y=(t,e)=>t/(100/+e),b=(t,e)=>{const n=x(t);n?n.replaceWith(e):t.el().appendChild(e)},T=(t,e,n)=>t.querySelector(`[data-id=${m(e,n)}]`),$=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},x=t=>t.el().querySelector(`.${u.Fg}`),E=t=>{const e=x(t);e&&e.parentNode.removeChild(e)};var w=n(8838),k=n(1104);const C=(t,e,n)=>{let i=!1,a=null,s=null,l=d();const p=()=>{return t=n.interactionDisplay,r()(t,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb);var t},C=()=>{const t=D();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime};function j(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=D();return t||e&&e.enable}function A(){s&&t.videojs.removeRemoteTextTrack(s);const e=j(),n=D();if(!e||i)return null;if(Array.isArray(n.template))L(n.template),M();else{const e=n.vttUrl||u.Yx[n.template];e&&(s=(0,w.eo)(t.videojs,e),function(e){if(!e)return;let n=null;e.addEventListener("cuechange",(()=>{const i=e.activeCues&&e.activeCues[0];if(i){const t=Math.max(Math.floor(1e3*(i.endTime-i.startTime)),u.q3),e=JSON.parse(i.text);L(e,n,t),!n&&M(),n=e}else E(t.videojs),n=null}))}(s))}}function D(){const{cldSrc:t}=a;return t&&t.getInteractionAreas()}function I(){E(t.videojs),A(),t.play()}function S(){if(j())if(p()){let e=null;const i=r()(n,"interactionDisplay.layout.showAgain",!1);t.pause(),function(t,e){let n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=!1;const o=`checkbox_${Math.round(1e4*Math.random())}`,a=(0,v.It)({tag:"div",attr:{class:`${u.Fg} ${u.be}-layout-message ${n?"":"clickable"}`},onClick:n?null:()=>$(i,e),children:[{tag:"img",attr:{class:`${u.be}-layout-icon`,src:u.T$}},{tag:"h3",attr:{class:`${u.be}-layout-message-title`},children:"Tap on dots to zoom for a product."},h({text:"Got it",theme:f,loadingDelay:n?0:u.Vv,onClick:n?()=>$(i,e):null}),n&&{tag:"div",attr:{class:`${u.be}-layout-message-do-not-show`},children:[{tag:"input",attr:{type:"checkbox",class:`${u.be}-layout-message-checkbox`,id:o},event:{name:"input",callback:t=>{i=t.target.checked}}},{tag:"label",attr:{class:`${u.be}-layout-message-checkbox-title`,for:o},children:"Don׳t show it again"}]}].filter((t=>t))});b(t,a)}(t.videojs,(()=>{clearTimeout(e),I()}),i),i||(e=setTimeout(I,u.Vv))}else I()}function O(e,n,r){const s=t.currentTime(),c=C(),{cldSrc:d}=a,p=d.getInitOptions(),h=n||{transformation:p.transformation},f=!e&&((t,e)=>{const{videoHeight:n,videoWidth:i}=t,o=y(i,e.left),a=y(n,e.top),r=y(i,e.width),s=y(n,e.height),c=i/n,l=r/s,d=Math.round(l>1||c>1?s*l:r),u=Math.round(d/c),v=Math.round(o-(d-r)/2),p=Math.round(a-(u-s)/2);return{width:d,height:u,x:Math.min(Math.max(v,0),i-d),y:Math.min(Math.max(p,0),n-u),crop:"crop"}})(t.videoElement,r),m=f?o().obj.merge({transformation:f},h):h,g=d.isRawUrl?a.src:{publicId:d.publicId()};t.source(f?{publicId:d.publicId()}:e,m).play(),c&&t.currentTime(s),i=!0,function(){const e=(0,v.n)("div",{class:"go-back-button"});e.addEventListener("click",(()=>{l()}),!1);const n=(0,v.n)("div",{class:u.Fg},e);b(t.videojs,n)}(),l=()=>{if(i){i=!1;const e=t.currentTime(),n=t.duration();t.source(g,p).play(),c&&e<n&&t.currentTime(e),A()}}}function N(t){let{event:e,item:n,index:i}=t;const o=D();o.onClick&&o.onClick({item:n,index:i,event:e,zoom:(t,e)=>{O(t,e,n)}})}function L(i,o){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r={playerOptions:e,videojsOptions:n};if(o)((t,e,n,i,o,a)=>{const r=x(t);n.forEach(((t,n)=>{const s=T(r,t,n),c=m(t),l=i.some((t=>m(t)===c));l&&s?(0,v.cu)(s,{left:`${t.left}%`,top:`${t.top}%`,width:`${t.width}%`,height:`${t.height}%`,transitionDuration:`${o}ms`}):l||s||r.appendChild(g(e,t,n,o,(e=>{a({event:e,item:t,index:n})})))})),i.forEach(((t,e)=>{const i=T(r,t,e),o=m(t),a=!n.some((t=>m(t)===o));i&&a&&i.parentNode.removeChild(i)}))})(t.videojs,r,i,o,a,N);else{const e=i.map(((t,e)=>g(r,t,e,a,(n=>{N({event:n,item:t,index:e})}))));b(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function M(){j()&&((t,e)=>{const n=x(t);if(!n)return;const{videoHeight:i,videoWidth:o}=e,a=o/i,r=a*e.clientHeight;n.style.width=`${e.clientWidth<r?"100%":r}px`,n.style.height=e.clientWidth<r?e.clientWidth/a+"px":"100%"})(t.videojs,t.videoElement)}!function(){if(a=a||t.videojs.currentSource(),j()){t.videojs.el().classList.add("interaction-areas"),t.videojs.one(k.f.PLAY,(()=>{"object"==typeof t.videojs.ima?t.on("adsready",(()=>{t.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,S)})):S()}));const e=c()(M,100);t.videojs.on(k.f.FULL_SCREEN_CHANGE,(()=>{setTimeout(e,100)}));const n=(0,v.q2)(window,"resize",M,!1);t.videojs.on(k.f.DISPOSE,n)}t.videojs.on(k.f.ENDED,(()=>{l()})),t.videojs.on(k.f.ERROR,(()=>{t.pause()}))}()}},8812:(t,e,n)=>{var i=n(2140),o=/^\s+/;t.exports=function(t){return t?t.slice(0,i(t)+1).replace(o,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var n=t.length;n--&&e.test(t.charAt(n)););return n}},6177:(t,e,n)=>{var i=n(8953),o=n(3664),a=n(5378),r=Math.max,s=Math.min;t.exports=function(t,e,n){var c,l,d,u,v,p,h=0,f=!1,m=!1,g=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var n=c,i=l;return c=l=void 0,h=e,u=t.apply(i,n)}function b(t){var n=t-p;return void 0===p||n>=e||n<0||m&&t-h>=d}function T(){var t=o();if(b(t))return $(t);v=setTimeout(T,function(t){var n=e-(t-p);return m?s(n,d-(t-h)):n}(t))}function $(t){return v=void 0,g&&c?y(t):(c=l=void 0,u)}function x(){var t=o(),n=b(t);if(c=arguments,l=this,p=t,n){if(void 0===v)return function(t){return h=t,v=setTimeout(T,e),f?y(t):u}(p);if(m)return clearTimeout(v),v=setTimeout(T,e),y(p)}return void 0===v&&(v=setTimeout(T,e)),u}return e=a(e)||0,i(n)&&(f=!!n.leading,d=(m="maxWait"in n)?r(a(n.maxWait)||0,e):d,g="trailing"in n?!!n.trailing:g),x.cancel=function(){void 0!==v&&clearTimeout(v),h=0,c=p=l=v=void 0},x.flush=function(){return void 0===v?u:$(o())},x}},5114:t=>{t.exports=function(){}},3664:(t,e,n)=>{var i=n(1433);t.exports=function(){return i.Date.now()}},2858:(t,e,n)=>{var i=n(6177),o=n(8953);t.exports=function(t,e,n){var a=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return o(n)&&(a="leading"in n?!!n.leading:a,r="trailing"in n?!!n.trailing:r),i(t,e,{leading:a,maxWait:e,trailing:r})}},5378:(t,e,n)=>{var i=n(8812),o=n(8953),a=n(5414),r=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,c=/^0o[0-7]+$/i,l=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(a(t))return NaN;if(o(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=i(t);var n=s.test(t);return n||c.test(t)?l(t.slice(2),n?2:8):r.test(t)?NaN:+t}}}]);
 //# sourceMappingURL=interaction-areas.min.js.map