cloudinary-video-player/dist/interaction-areas.min.js

Cloudinary Video Player

/*!
 * Cloudinary Video Player v3.6.3
 * Built on 2026-01-04T09:23:52.701Z
 * https://github.com/cloudinary/cloudinary-video-player
 */
(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404,691],{9454:(t,e,o)=>{"use strict";o.d(e,{default:()=>a,w:()=>r});var n=o(7764);const i={colorsDark:{base:"#000000",accent:"#0D9AFF",text:"#FFFFFF"},colorsLight:{base:"#FFFFFF",accent:"#0D9AFF",text:"#000000"}},r=t=>(0,n.T4)(t)?i.colorsLight:i.colorsDark,a=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=r(t.options_);e.colors=Object.assign({},o,e.colors);const n=t.el();return e.colors.base&&n.style.setProperty("--color-base",e.colors.base),e.colors.accent&&n.style.setProperty("--color-accent",e.colors.accent),e.colors.text&&n.style.setProperty("--color-text",e.colors.text),{updateColors:t=>{const o=Object.assign({},e.colors,t);o.base&&n.style.setProperty("--color-base",o.base),o.accent&&n.style.setProperty("--color-accent",o.accent),o.text&&n.style.setProperty("--color-text",o.text),e.colors=o},getColors:()=>e.colors}}},9017:(t,e,o)=>{"use strict";o.d(e,{F0:()=>a,Fg:()=>r,IT:()=>s,T$:()=>l,Vv:()=>d,Yx:()=>c,be:()=>i,q3:()=>u,sb:()=>n});const n="cld-ia-layout-state",i="vp-ia",r="interaction-areas-container",a={PORTRAIT:"portrait",LANDSCAPE:"landscape",All:"all",CENTER:"center"},s={PULSING:"pulsing",SHADOWED:"shadowed"},c={[a.PORTRAIT]:"https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt",[a.LANDSCAPE]:"https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt",[a.All]:"https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt",[a.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,o)=>{"use strict";o.d(e,{interactionAreasService:()=>C});var n=o(6673),i=o.n(n),r=o(2832),a=o.n(r),s=o(2858),c=o.n(s),l=o(5114),d=o.n(l),u=o(9017),v=o(7134),p=o(9454);const h=t=>{let{text:e,onClick:o,theme:n="",loadingDelay:i=0}=t;return(0,v.It)({tag:"button",attr:{class:`vp-theme-button theme-${n}`},onClick:o,children:[{tag:"div",attr:{class:"vp-loading-bar"},style:{"animation-duration":`${i}ms`}},{tag:"div",attr:{class:"content"},children:e}]})},f="transparent-white",m=(t,e)=>t.id||t.type||`id_${e}`,g=(t,e,o,n,i)=>{let{playerOptions:r,videojsOptions:s}=t;const c=(0,p.w)(s),l=r&&r.colors?r.colors.accent:c.accent,d=a()(s,"interactionDisplay.theme.template",u.IT.PULSING);return(0,v.It)({tag:"div",attr:{class:`${u.be}-item theme-${d}`,"data-id":m(e,o)},style:{left:`${e.left}%`,top:`${e.top}%`,width:`${e.width}%`,height:`${e.height}%`,transitionDuration:`${n}ms`},event:{name:"click",callback:i},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 o=$(t);o?o.replaceWith(e):t.el().appendChild(e)},x=(t,e,o)=>t.querySelector(`[data-id=${m(e,o)}]`),T=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},$=t=>t.el().querySelector(`.${u.Fg}`),w=t=>{const e=$(t);e&&e.parentNode.removeChild(e)};var E=o(7764),k=o(1104);const C=(t,e,o)=>{let n=!1,r=null,s=null,l=d();const p=()=>{return t=o.interactionDisplay,a()(t,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb);var t};function C(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=D();return t||e&&e.enable}function j(){s&&t.videojs.removeRemoteTextTrack(s);const e=C(),o=D();if(!e||n)return null;if(Array.isArray(o.template))I(o.template),L();else{const e=o.vttUrl||u.Yx[o.template];e&&(s=(0,E.eo)(t.videojs,e),function(e){if(!e)return;let o=null;e.addEventListener("cuechange",()=>{const n=e.activeCues&&e.activeCues[0];if(n){const t=Math.max(Math.floor(1e3*(n.endTime-n.startTime)),u.q3),e=JSON.parse(n.text);I(e,o,t),!o&&L(),o=e}else w(t.videojs),o=null})}(s))}}function D(){const{cldSrc:t}=r;return t&&t.interactionAreas()}function A(){w(t.videojs),j(),t.play()}function F(){if(C())if(p()){let e=null;const n=a()(o,"interactionDisplay.layout.showAgain",!1);t.pause(),function(t,e){let o=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n=!1;const i=`checkbox_${Math.round(1e4*Math.random())}`,r=(0,v.It)({tag:"div",attr:{class:`${u.Fg} ${u.be}-layout-message ${o?"":"clickable"}`},onClick:o?null:()=>T(n,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:o?0:u.Vv,onClick:o?()=>T(n,e):null}),o&&{tag:"div",attr:{class:`${u.be}-layout-message-do-not-show`},children:[{tag:"input",attr:{type:"checkbox",class:`${u.be}-layout-message-checkbox`,id:i},event:{name:"input",callback:t=>{n=t.target.checked}}},{tag:"label",attr:{class:`${u.be}-layout-message-checkbox-title`,for:i},children:"Don׳t show it again"}]}].filter(t=>t)});b(t,r)}(t.videojs,()=>{clearTimeout(e),A()},n),n||(e=setTimeout(A,u.Vv))}else A()}function O(e,o,a){const s=t.currentTime(),c=(()=>{const t=D();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime})(),{cldSrc:d}=r,p=d.getInitOptions(),h=o||{transformation:p.transformation},f=!e&&((t,e)=>{const{videoHeight:o,videoWidth:n}=t,i=y(n,e.left),r=y(o,e.top),a=y(n,e.width),s=y(o,e.height),c=n/o,l=a/s,d=Math.round(l>1||c>1?s*l:a),u=Math.round(d/c),v=Math.round(i-(d-a)/2),p=Math.round(r-(u-s)/2);return{width:d,height:u,x:Math.min(Math.max(v,0),n-d),y:Math.min(Math.max(p,0),o-u),crop:"crop"}})(t.videoElement,a),m=f?i().obj.merge({transformation:f},h):h,g=d.isRawUrl?r.src:{publicId:d.publicId()};t.source(f?{publicId:d.publicId()}:e,m).play(),c&&t.currentTime(s),n=!0,function(){const e=(0,v.n)("div",{class:"go-back-button"});e.addEventListener("click",()=>{l()},!1);const o=(0,v.n)("div",{class:u.Fg},e);b(t.videojs,o)}(),l=()=>{if(n){n=!1;const e=t.currentTime(),o=t.duration();t.source(g,p).play(),c&&e<o&&t.currentTime(e),j()}}}function S(t){let{event:e,item:o,index:n}=t;const i=D();i.onClick&&i.onClick({item:o,index:n,event:e,zoom:(t,e)=>{O(t,e,o)}})}function I(n,i){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const a={playerOptions:e,videojsOptions:o};if(i)((t,e,o,n,i,r)=>{const a=$(t);o.forEach((t,o)=>{const s=x(a,t,o),c=m(t),l=n.some(t=>m(t)===c);l&&s?(0,v.cu)(s,{left:`${t.left}%`,top:`${t.top}%`,width:`${t.width}%`,height:`${t.height}%`,transitionDuration:`${i}ms`}):l||s||a.appendChild(g(e,t,o,i,e=>{r({event:e,item:t,index:o})}))}),n.forEach((t,e)=>{const n=x(a,t,e),i=m(t),r=!o.some(t=>m(t)===i);n&&r&&n.parentNode.removeChild(n)})})(t.videojs,a,n,i,r,S);else{const e=n.map((t,e)=>g(a,t,e,r,o=>{S({event:o,item:t,index:e})}));b(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function L(){C()&&((t,e)=>{const o=$(t);if(!o)return;const{videoHeight:n,videoWidth:i}=e,r=i/n,a=r*e.clientHeight;o.style.width=`${e.clientWidth<a?"100%":a}px`,o.style.height=e.clientWidth<a?e.clientWidth/r+"px":"100%"})(t.videojs,t.videoElement)}!function(){if(r=r||t.videojs.currentSource(),C()){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,F)}):F()});const e=c()(L,100);t.videojs.on(k.f.FULL_SCREEN_CHANGE,()=>{setTimeout(e,100)});const o=(0,v.q2)(window,"resize",L,!1);t.videojs.on(k.f.DISPOSE,o)}t.videojs.on(k.f.ENDED,()=>{l()}),t.videojs.on(k.f.ERROR,()=>{t.pause()})}()}},8812:(t,e,o)=>{var n=o(2140),i=/^\s+/;t.exports=function(t){return t?t.slice(0,n(t)+1).replace(i,""):t}},2140:t=>{var e=/\s/;t.exports=function(t){for(var o=t.length;o--&&e.test(t.charAt(o)););return o}},6177:(t,e,o)=>{var n=o(8953),i=o(3664),r=o(5378),a=Math.max,s=Math.min;t.exports=function(t,e,o){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 o=c,n=l;return c=l=void 0,h=e,u=t.apply(n,o)}function b(t){var o=t-p;return void 0===p||o>=e||o<0||m&&t-h>=d}function x(){var t=i();if(b(t))return T(t);v=setTimeout(x,function(t){var o=e-(t-p);return m?s(o,d-(t-h)):o}(t))}function T(t){return v=void 0,g&&c?y(t):(c=l=void 0,u)}function $(){var t=i(),o=b(t);if(c=arguments,l=this,p=t,o){if(void 0===v)return function(t){return h=t,v=setTimeout(x,e),f?y(t):u}(p);if(m)return clearTimeout(v),v=setTimeout(x,e),y(p)}return void 0===v&&(v=setTimeout(x,e)),u}return e=r(e)||0,n(o)&&(f=!!o.leading,d=(m="maxWait"in o)?a(r(o.maxWait)||0,e):d,g="trailing"in o?!!o.trailing:g),$.cancel=function(){void 0!==v&&clearTimeout(v),h=0,c=p=l=v=void 0},$.flush=function(){return void 0===v?u:T(i())},$}},5114:t=>{t.exports=function(){}},3664:(t,e,o)=>{var n=o(1433);t.exports=function(){return n.Date.now()}},2858:(t,e,o)=>{var n=o(6177),i=o(8953);t.exports=function(t,e,o){var r=!0,a=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return i(o)&&(r="leading"in o?!!o.leading:r,a="trailing"in o?!!o.trailing:a),n(t,e,{leading:r,maxWait:e,trailing:a})}},5378:(t,e,o)=>{var n=o(8812),i=o(8953),r=o(5414),a=/^[-+]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(r(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=n(t);var o=s.test(t);return o||c.test(t)?l(t.slice(2),o?2:8):a.test(t)?NaN:+t}}}]);