cloudinary-video-player/lib/interaction-areas.js

Cloudinary Video Player

(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[404,691],{9454:(t,e,o)=>{o.d(e,{default:()=>a,w:()=>r});var n=o(8838);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)=>{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)=>{o.d(e,{interactionAreasService:()=>k});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=(t,e)=>t.id||t.type||`id_${e}`,m=(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":f(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}}]}]})},g=(t,e)=>t/(100/+e),y=(t,e)=>{const o=T(t);o?o.replaceWith(e):t.el().appendChild(e)},b=(t,e,o)=>t.querySelector(`[data-id=${f(e,o)}]`),x=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d();localStorage.setItem(u.sb,JSON.parse(t)),e()},T=t=>t.el().querySelector(`.${u.Fg}`),$=t=>{const e=T(t);e&&e.parentNode.removeChild(e)};var w=o(8838),E=o(1104);const k=(t,e,o)=>{let n=!1,r=null,s=null,l=d();const p=()=>{const t=j();return!(!t||void 0===t.syncOffsetTime)&&t.syncOffsetTime};function k(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const e=j();return t||e&&e.enable}function C(){s&&t.videojs.removeRemoteTextTrack(s);const e=k(),o=j();if(!e||n)return null;if(Array.isArray(o.template))O(o.template),S();else{const e=o.vttUrl||u.Yx[o.template];e&&(s=(0,w.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);O(e,o,t),!o&&S(),o=e}else $(t.videojs),o=null}))}(s))}}function j(){const{cldSrc:t}=r;return t&&t.interactionAreas()}function D(){$(t.videojs),C(),t.play()}function A(){if(k())if(e=o.interactionDisplay,a()(e,"layout.enable",!0)&&"true"!==localStorage.getItem(u.sb)){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:()=>x(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:"transparent-white",loadingDelay:o?0:u.Vv,onClick:o?()=>x(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))});y(t,r)}(t.videojs,(()=>{clearTimeout(e),D()}),n),n||(e=setTimeout(D,u.Vv))}else D();var e}function F(e){let{event:o,item:a,index:s}=e;const c=j();c.onClick&&c.onClick({item:a,index:s,event:o,zoom:(e,o)=>{!function(e,o,a){const s=t.currentTime(),c=p(),{cldSrc:d}=r,h=d.getInitOptions(),f=o||{transformation:h.transformation},m=!e&&((t,e)=>{const{videoHeight:o,videoWidth:n}=t,i=g(n,e.left),r=g(o,e.top),a=g(n,e.width),s=g(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),b=m?i().obj.merge({transformation:m},f):f,x=d.isRawUrl?r.src:{publicId:d.publicId()};t.source(m?{publicId:d.publicId()}:e,b).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);y(t.videojs,o)}(),l=()=>{if(n){n=!1;const e=t.currentTime(),o=t.duration();t.source(x,h).play(),c&&e<o&&t.currentTime(e),C()}}}(e,o,a)}})}function O(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(t);o.forEach(((t,o)=>{const s=b(a,t,o),c=f(t),l=n.some((t=>f(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(m(e,t,o,i,(e=>{r({event:e,item:t,index:o})})))})),n.forEach(((t,e)=>{const n=b(a,t,e),i=f(t),r=!o.some((t=>f(t)===i));n&&r&&n.parentNode.removeChild(n)}))})(t.videojs,a,n,i,r,F);else{const e=n.map(((t,e)=>m(a,t,e,r,(o=>{F({event:o,item:t,index:e})}))));y(t.videojs,(0,v.n)("div",{class:u.Fg},e))}}function S(){k()&&((t,e)=>{const o=T(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(),k()){t.videojs.el().classList.add("interaction-areas"),t.videojs.one(E.f.PLAY,(()=>{"object"==typeof t.videojs.ima?t.on("adsready",(()=>{t.videojs.ima.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED,A)})):A()}));const e=c()(S,100);t.videojs.on(E.f.FULL_SCREEN_CHANGE,(()=>{setTimeout(e,100)}));const o=(0,v.q2)(window,"resize",S,!1);t.videojs.on(E.f.DISPOSE,o)}t.videojs.on(E.f.ENDED,(()=>{l()})),t.videojs.on(E.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}}}]);
//# sourceMappingURL=interaction-areas.js.map