@letscooee/web-sdk 14.8.7 → 14.8.8

package/dist/video-detail-dialog.component-Be1TGq0U-DmeTyU9p.js

@@ -0,0 +1,14 @@
+import { I as Ir, V as Ve, H as He, s as se, M, t, D as Dr, l as l$1, O, a as Hi, c as ce, Y, b as V } from './main.min.js';
+import { L as Lt, m as g, p as Ye, S as Se$1, G as Ge, W, c as cf, r as Wt, s as Gt, z as zt, x as xE, u as AE, $ as $t, U as Ut, y as ye, X as Xa, o as Nf, v as nc, N as ND, w as Yo, n as ec, B as pf, D as zD, E as Ef, f as fd, e as AD, H as oc, I as kf, J as Ff, O as oN, P as Ro, K as Ke, Q as zt$1, C as Cf, i as iN, T as ws, q as qo, t as tc, Z as Zo, V as ic, _ as vf, a0 as FD, a1 as TD, a2 as gu, a3 as mu, a4 as VD, a5 as SD, a6 as wf, a7 as Cv, a8 as Kf, a9 as Qf, aa as Dv, ab as xv, ac as rm } from './widgets-BWtmfMEz-TevHiqz5.js';
+
+var f=(t,e,o,r)=>{if(!e)return;let i=new Ir(`CE Video Shared`,{current:{videoID:e.id,videoIndex:o},platform:r},t);window.CooeeSDK.sendEvent(i);},l=(t,e,o=true)=>{let r=o?encodeURIComponent(m(t,e)):m(t,e),n=`Hey! Check out this video for an amazing product -`;return {url:r,text:o?encodeURIComponent(n):n}},m=(t,e)=>{return Ve(He(window.location.href,t),e)};
+
+var S=class n{video=iN.required();progress=Lt(0);constructor(){ws(t=>{let e=this.video(),o=()=>{this.progress.set(e.currentTime/e.duration*100);};e.addEventListener(`timeupdate`,o),t(()=>{e.removeEventListener(`timeupdate`,o);});});}static ɵfac=function(e){return new(e||n)};static ɵcmp=cf({type:n,selectors:[[`cooee-video-progress-bar`]],inputs:{video:[1,`video`]},decls:3,vars:3,consts:[[1,`video-untracked-path`],[`role`,`progressbar`,1,`video-tracked-path`]],template:function(e,o){e&1&&(qo(0,`div`,0)(1,`div`,1),tc(2,`div`),Zo()()),e&2&&(fd(),ic(`width`,o.progress(),`%`),vf(`aria-valuenow`,o.progress()));},styles:[`[_nghost-%COMP%]{display:block;width:100%;position:absolute;z-index:10;top:4px;padding-inline:8px;box-sizing:border-box}.video-untracked-path[_ngcontent-%COMP%], .video-tracked-path[_ngcontent-%COMP%]{height:4px;border-radius:var(--lc-video-progress-bar-radius)}.video-untracked-path[_ngcontent-%COMP%]{background-color:rgba(var(--lc-video-progress-bar-bg-color));width:100%;margin-bottom:2px}.video-tracked-path[_ngcontent-%COMP%]{background-color:rgba(var(--lc-video-progress-bar-color));transition:width .5s ease-in-out}@media(prefers-reduced-motion:reduce){.video-tracked-path[_ngcontent-%COMP%]{transition:none}}`]})};var P=class n{dialogState=oN();dialog=g(Ro);triggerData=g(Ke)().triggerData;eventData=g(Ge);containerRef=g(zt$1);async share(t){t.stopPropagation(),t.preventDefault(),M()&&V()?await this.shareNative():await this.shareWithDialog();}async shareNative(){let t=l(this.triggerData,this.eventData.video,false);await navigator.share(t),f(this.triggerData,this.eventData.video,this.eventData.index,`Native`);}async shareWithDialog(){let t=await import('./share-dialog.component-foe7d65x-BNSjT4D1.js');this.dialogState.emit(true),this.dialog.open(t.ShareDialogComponent,{viewContainerRef:this.containerRef}).closed.subscribe(()=>this.dialogState.emit(false));}static ɵfac=function(e){return new(e||n)};static ɵcmp=cf({type:n,selectors:[[`cooee-share-button`]],outputs:{dialogState:`dialogState`},decls:2,vars:0,consts:[[`type`,`button`,`aria-label`,`Share video`,3,`click`],[`name`,`share`]],template:function(e,o){e&1&&(Xa(0,`button`,0),Nf(`click`,function(r){return o.share(r)}),Cf(1,`cooee-icon`,1),ec());},dependencies:[ye],styles:[`button[_ngcontent-%COMP%]{width:var(--lc-icon-button-size, 44px);height:var(--lc-icon-button-size, 44px);display:flex;justify-content:center;align-items:center;border:none;border-radius:100%;background:#00000080;background:color-mix(in oklab,#000 50%,transparent)}button[_ngcontent-%COMP%]   cooee-icon[name=share][_ngcontent-%COMP%]{color:#fff}`]})};var Te=[`swiperComp`],Ie=[`videoEl`],Se=(n,t)=>t.video.id,Pe=(n,t)=>t.url;function ke(n,t){n&1&&(Xa(0,`div`,11),Cf(1,`div`,15),ec());}function Me(n,t){if(n&1&&Cf(0,`source`,13),n&2){let e=t.$implicit;Ef(`type`,Cv(e.mimeType))(`src`,e.url);}}function Oe(n,t){n&1&&wf(0);}function Ne(n,t){if(n&1){let e=FD();Xa(0,`cooee-video-promoted-items`,24),Nf(`cardClick`,function(i){gu(e);let r=VD(2).$implicit;return mu(VD().productCardClicked(i,r.video))})(`atcSuccess`,function(){gu(e);return mu(VD(3).onAtcSuccess())}),ec();}if(n&2){let e=VD(2).$implicit;Ef(`items`,e.video.items);}}function Fe(n,t){if(n&1&&Cf(0,`cooee-video-card`,23),n&2){let e=VD(2).$implicit;Ef(`card`,e.video.card);}}function ze(n,t){if(n&1){let e=FD();Cf(0,`cooee-video-progress-bar`,16),Xa(1,`div`,17)(2,`cooee-mute-toggle`,18),Kf(`mutedChange`,function(i){gu(e);let r=VD(2);return Dv(r.muted,i)||(r.muted=i),mu(i)}),Nf(`toggled`,function(){gu(e);return mu(VD(2).muteToggled())}),ec(),pf(3,Oe,1,0,`ng-container`,8),ec(),Xa(4,`div`,19)(5,`cooee-share-button`,20),Nf(`dialogState`,function(i){gu(e);return mu(VD(2).shareDialogOpen.set(i))}),ec()(),Xa(6,`div`,21),TD(7,Ne,1,1,`cooee-video-promoted-items`,22)(8,Fe,1,1,`cooee-video-card`,23),ec();}if(n&2){let e=VD().$implicit,o=zD(5),i=VD(),r=zD(9);Ef(`video`,o),fd(2),Qf(`muted`,i.muted),Ef(`videoEl`,o),fd(),Ef(`ngTemplateOutlet`,r),fd(4),SD(e.video.items.length&&i.videoConfig.showItems()?7:e.video.card&&i.videoConfig.footerContent===i.VideoConfigFooterContent.CARD?8:-1);}}function Le(n,t){if(n&1){let e=FD();Xa(0,`cooee-item-detail`,25),Nf(`closeClick`,function(){gu(e);return mu(VD(2).productModalClosed())})(`atcSuccess`,function(){gu(e);return mu(VD(2).onAtcSuccess())}),ec();}if(n&2){let e=VD(2);Ef(`item`,e.selectedItem)(`similarItems`,e.selectedVideo.items)(`template`,e.videoConfig.itemDetailConfig.template);}}function Ae(n,t){if(n&1){let e=FD();Xa(0,`div`,6)(1,`div`,9)(2,`div`,10),TD(3,ke,2,0,`div`,11),Xa(4,`video`,12,2),Nf(`click`,function(){let i=gu(e).$index,r=VD();return mu(r.currentIndex===i&&r.toggleMute())})(`ended`,function(){gu(e);let i=zD(5);return mu(VD().onVideoEnded(i))})(`loadstart`,function(){let i=gu(e).$index;return mu(VD().onVideoLoadStart(i))})(`canplay`,function(){let i=gu(e).$index;return mu(VD().onVideoCanPlay(i))}),ND(6,Me,1,3,`source`,13,Pe),ec(),TD(8,ze,9,5),ec(),TD(9,Le,1,3,`cooee-item-detail`,14),ec()();}if(n&2){let e=t.$implicit,o=t.$index,i=VD();fd(2),ic(`background-image`,e.video.thumbnail?`url(`+e.video.thumbnail+`)`:null),fd(),SD(i.shouldShowVideoSpinner(o)?3:-1),fd(),Ef(`ngClass`,i.viewTemplateClassName)(`muted`,true),vf(`preload`,i.isVideoVisible(o)?`metadata`:`none`)(`data-video-id`,e.video.id)(`autoplay`,null),fd(2),AD(e.video.sources),fd(2),SD(i.currentIndex===o?8:-1),fd(),SD(i.selectedItem&&i.currentIndex===o?9:-1);}}function Re(n,t){n&1&&wf(0);}function Be(n,t){if(n&1){let e=FD();Xa(0,`button`,26),Nf(`click`,function(){gu(e);return mu(VD().close())}),Cf(1,`cooee-icon`,27),ec();}}var Ee=class n{swiperComponent;videoElements;VideoConfigFooterContent=se;currentIndex=0;muted=Lt(false);selectedItem=null;selectedVideo;detailPopupTemplate;viewTemplateClassName=`lc-video-only-view`;shareDialogOpen=Lt(false);data=g(Ye);elementRef=g(Se$1);eventData=g(Ge);dialogRef=g(W);swiperInitialized=Lt(false);swiperOptions=Lt(null);videoEntries=[];videoConfig;triggerContext;engagementTrigger;isMobile=M();navigationConfig;cssLoadedPromise;resizeDebouncer=new t(this.onResize.bind(this));videoLoadingStates=new Map;constructor(){this.videoEntries=this.data.videoEntries,this.currentIndex=this.data.currentIndex,this.selectedItem=this.data.selectedItem??null,this.selectedVideo=this.videoEntries[this.currentIndex]?.video,this.triggerContext=this.data.triggerContext,this.engagementTrigger=this.triggerContext.triggerData,this.videoConfig=this.engagementTrigger?.content?.videoConfig??new Dr,this.navigationConfig=new l$1({enabled:true,size:50,color:new O({h:`#000000`})}),this.cssLoadedPromise=Hi(this.elementRef.nativeElement.shadowRoot);}onKeyDown(t){t.preventDefault(),t.stopPropagation(),this.close();}async ngOnInit(){switch(this.muted.set(await ce.get(`muted`,false)),this.videoConfig.detailPopup.template){case `PRODUCT_DETAIL_VIEW`:this.selectItemForDetailView(),this.viewTemplateClassName=`lc-product-detail-view`;break;case `VIDEO_ONLY_VIEW`:this.viewTemplateClassName=`lc-video-only-view`;break}}ngAfterViewInit(){this.initializeSwiperWithVideoDimensions();}ngOnDestroy(){this.resizeDebouncer?.destroy();}initializeSwiperWithVideoDimensions(){this.applyOptimalVideoDimensions(),this.initSwiperOptions(),this.playActiveVideo(false);}close(){let t=this.getCurrentVideoElement();this.dialogRef.close({lastVideo:this.videoEntries[this.currentIndex].video,lastVideoIndex:this.currentIndex,lastVideoDuration:t?.currentTime});}getCurrentVideoElement(){return this.videoElements.get(this.currentIndex)?.nativeElement}moveToNextVideo(){this.swiperComponent.swiper.slideTo(this.currentIndex+1);}productModalClosed(){this.selectedItem=null;}onAtcSuccess(){this.videoConfig.detailPopup.closeDialogOnAtc&&this.close();}pauseAll(){this.videoElements.forEach(t=>t.nativeElement.pause());}toggleMute(){this.muted.update(t=>!t);}async muteToggled(){await ce.set(`muted`,this.muted());let e=[this.muted()?`CE Video Muted`:`CE Video Unmuted`,{current:this.currentVideoProps()},{triggerData:this.engagementTrigger}];window.CooeeSDK.events.push(e);}playActiveVideo(t=true){t&&this.pauseAll();let e=this.getCurrentVideoElement();e&&this.playVideo(e);}playVideo(t){t.currentTime=0,t.play().catch(e=>Y.error(e));}onVideoEnded(t){if(this.currentIndex<this.videoEntries.length-1)this.selectedItem||this.shareDialogOpen()?this.playVideo(t):this.moveToNextVideo();else {let o=[`CE Last Video Ended`,{previous:this.getPreviousVideoDataForEvent()},{triggerData:this.engagementTrigger}];window.CooeeSDK.events.push(o),this.playVideo(t);}}onSlideChange(t){let e=this.getPreviousVideoDataForEvent();this.currentIndex=t.realIndex,this.selectedVideo=this.videoEntries[this.currentIndex].video,this.eventData.video=this.selectedVideo,this.eventData.index=this.currentIndex,this.playActiveVideo(),this.isProductDetailView()?this.selectItemForDetailView():this.selectedItem=null;let r=new Ir(`CE Video Changed`,{previous:e,current:this.currentVideoProps()},this.engagementTrigger);r.setVideos(this.videoEntries[this.currentIndex].video),window.CooeeSDK.sendEvent(r);}productCardClicked(t,e){let i=new Ir(`CE More Item Info Clicked`,{current:{videoID:e.id,videoIndex:this.currentIndex}},this.engagementTrigger);i.setVideos(e),window.CooeeSDK.sendEvent(i),this.selectedItem=t;}onVideoLoadStart(t){this.videoLoadingStates.set(t,true);}onVideoCanPlay(t){this.videoLoadingStates.set(t,false);}shouldShowVideoSpinner(t){return this.swiperInitialized()?this.videoLoadingStates.get(t)===true&&this.isVideoVisible(t):this.isVideoVisible(t)}isVideoVisible(t){let e=this.currentIndex-1,o=this.currentIndex+1;return t===this.currentIndex||t===e||t===o}async initSwiperOptions(){await this.cssLoadedPromise;let t=this.isMobile?1:`auto`,e=0;this.isProductDetailView()&&(t=`auto`,e=10),this.swiperOptions.set({direction:this.isMobile?`vertical`:`horizontal`,effect:this.isMobile?`slide`:`coverflow`,slidesPerView:t,initialSlide:this.currentIndex,centeredSlides:true,spaceBetween:e,coverflowEffect:{rotate:0,stretch:0,depth:400,modifier:1,slideShadows:false},on:{init:o=>{this.swiperInitialized.set(true),setTimeout(()=>{o.update();},100);}},mousewheel:{enabled:!this.isMobile,invert:false,thresholdDelta:20}});}isProductDetailView(){return this.videoConfig.detailPopup.template===`PRODUCT_DETAIL_VIEW`}currentVideoProps(){return {videoID:this.videoEntries[this.currentIndex].video.id,videoIndex:this.currentIndex}}getPreviousVideoDataForEvent(){let t=this.currentVideoProps(),e=this.videoElements.find(i=>i.nativeElement.dataset.videoId===this.videoEntries[this.currentIndex].video.id)?.nativeElement;t.playedTillMS=Math.ceil(e?.currentTime*1e3);let o=e?.duration*1e3;return t.playedTillPercent=+(t.playedTillMS/o).toFixed(4),t}selectItemForDetailView(){this.selectedItem=this.isMobile?null:this.selectedVideo?.items?.[0]??null;}applyOptimalVideoDimensions(){if(this.isMobile||this.isProductDetailView())return;let t=this.calculateOptimalVideoDimensions();t&&this.setVideoContainerDimensions(t.width,t.height);}calculateOptimalVideoDimensions(){let t=this.videoEntries.map(v=>v.video.sources?.[0]).filter(v=>v?.width&&v?.height).map(v=>({width:v.width,height:v.height,aspectRatio:v.width/v.height}));if(t.length===0)return null;let e=t[0],o=window.innerWidth*.9,i=window.innerHeight*.9,r=o/e.width,k=i/e.height,R=Math.min(r,k);return {width:Math.floor(e.width*R),height:Math.floor(e.height*R)}}setVideoContainerDimensions(t,e){let o=this.elementRef.nativeElement;o.style.setProperty(`--video-container-width`,`${t}px`),o.style.setProperty(`--video-container-height`,`${e}px`);}onResize(){this.applyOptimalVideoDimensions();}static ɵfac=function(e){return new(e||n)};static ɵcmp=cf({type:n,selectors:[[`cooee-video-detail-dialog`]],viewQuery:function(e,o){if(e&1&&oc(Te,7)(Ie,5),e&2){let i;kf(i=Ff())&&(o.swiperComponent=i.first),kf(i=Ff())&&(o.videoElements=i);}},hostAttrs:[1,`letscooee-widget`],hostBindings:function(e,o){e&1&&Nf(`keydown.escape`,function(r){return o.onKeyDown(r)},rm);},decls:10,vars:4,consts:[[`swiperComp`,``],[`closeButtonTemplate`,``],[`videoEl`,``],[1,`lc-shadow-inner`,3,`ngClass`],[1,`video-swiper`,3,`slideChange`,`options`,`navigationConfig`],[`ngProjectAs`,`swiper-slides`,5,[`swiper-slides`]],[1,`swiper-slide`,`video-slide`],[1,`lc-desktop-controls`],[4,`ngTemplateOutlet`],[1,`lc-video-modal-row`],[1,`lc-video-container`],[1,`video-loading-overlay`],[`playsinline`,``,1,`lc-video-el`,3,`click`,`ended`,`loadstart`,`canplay`,`ngClass`,`muted`],[3,`src`,`type`],[1,`swiper-no-swiping`,`swiper-no-mousewheel`,3,`item`,`similarItems`,`template`],[1,`loading-spinner`],[3,`video`],[1,`lc-video-controls`],[3,`mutedChange`,`toggled`,`muted`,`videoEl`],[1,`share-controls`],[3,`dialogState`],[1,`lc-card-container`],[3,`items`],[3,`card`],[3,`cardClick`,`atcSuccess`,`items`],[1,`swiper-no-swiping`,`swiper-no-mousewheel`,3,`closeClick`,`atcSuccess`,`item`,`similarItems`,`template`],[`type`,`button`,`aria-label`,`Close`,1,`lc-close-button`,3,`click`],[`name`,`close`,`aria-hidden`,`true`]],template:function(e,o){if(e&1&&(Xa(0,`div`,3)(1,`cooee-swiper`,4,0),Nf(`slideChange`,function(r){return o.onSlideChange(r)}),nc(3,5),ND(4,Ae,10,10,`div`,6,Se),Yo(),ec(),Xa(6,`div`,7),pf(7,Re,1,0,`ng-container`,8),ec()(),pf(8,Be,2,0,`ng-template`,null,1,xv)),e&2){let i=zD(9);Ef(`ngClass`,o.viewTemplateClassName),fd(),Ef(`options`,o.swiperOptions())(`navigationConfig`,o.navigationConfig),fd(3),AD(o.videoEntries),fd(3),Ef(`ngTemplateOutlet`,i);}},dependencies:[Wt,Gt,zt,P,S,xE,AE,$t,Ut,ye],styles:[`:host{display:flex}.lc-shadow-inner{position:relative;width:100vw;height:100vh;display:flex}@media(min-width:768px){.lc-shadow-inner{background-color:color-mix(in oklab,#000 70%,transparent);justify-content:center;align-items:center}}.video-swiper{--swiper-navigation-size: 50px;--swiper-navigation-color: white;width:100dvw;height:100dvh}.lc-product-detail-view .video-swiper{align-items:center}@media(min-width:768px){.video-swiper{width:100%;height:100%;max-width:90vw;max-height:90vh}}.video-swiper>.swiper-wrapper{max-height:100%;pointer-events:none}.lc-product-detail-view .video-swiper>.swiper-wrapper{align-items:center}@media(max-width:768px){.video-swiper>.swiper-button-prev{display:none!important}}@media(max-width:768px){.video-swiper>.swiper-button-next{display:var(--lc-next-video-button-display)!important;width:var(--lc-icon-button-size, 44px);height:var(--lc-icon-button-size, 44px);display:flex;justify-content:center;align-items:center;border:none;border-radius:100%;background:#00000080;background:color-mix(in oklab,#000 50%,transparent);color:#fff;inset:auto auto 12px 50%;transform:translate(-50%) rotate(90deg)}.video-swiper>.swiper-button-next:after{color:#fff;font-weight:900}}.video-swiper:has(cooee-item-detail)>.swiper-button-next{display:none!important}.video-slide{position:relative;display:flex;align-items:center;visibility:hidden;pointer-events:auto}.lc-product-detail-view .video-slide{width:40vw!important;height:70vh!important}@media(min-width:768px){.lc-product-detail-view .video-slide{min-width:650px!important}}@media(max-width:768px){.lc-product-detail-view .video-slide{width:100%!important;height:100%!important}}@media(min-width:768px){.lc-video-only-view .video-slide{width:fit-content!important}}@media(min-width:768px){.video-slide{border-radius:var(--lc-media-radius);overflow:hidden}}.video-slide.swiper-slide-active,.video-slide.swiper-slide-prev,.video-slide.swiper-slide-next{visibility:visible}video{width:100%;height:100%;object-fit:cover;position:relative;z-index:3}.lc-desktop-controls{position:absolute;top:2rem;right:4rem;z-index:10;display:flex;gap:.5rem}@media(max-width:768px){.lc-desktop-controls{display:none}}.lc-video-controls{position:absolute;top:1rem;z-index:10;right:.5rem;display:flex;gap:.25rem}@media(min-width:768px){.lc-video-controls .lc-close-button{display:none}}.share-controls{position:absolute;bottom:30%;right:.5rem;z-index:10;display:flex;gap:.25rem;flex-direction:column;justify-content:center;align-items:center}.lc-close-button{width:var(--lc-icon-button-size, 44px);height:var(--lc-icon-button-size, 44px);display:flex;justify-content:center;align-items:center;border:none;border-radius:100%;background:#00000080;background:color-mix(in oklab,#000 50%,transparent)}.lc-video-container{position:relative;height:100%;width:100%;background:#000000b3 no-repeat center;background-size:cover}@media(min-width:768px){.lc-product-detail-view .lc-video-container{width:50%}}@media(min-width:768px){.lc-video-only-view .lc-video-container{width:var(--video-container-width, 100%);height:var(--video-container-height, 100%)}}.lc-card-container{position:absolute;bottom:12px;z-index:10;width:100%;padding-inline:12px;box-sizing:border-box}.lc-product-detail-view .lc-card-container{display:none}@media(max-width:768px){.lc-product-detail-view .lc-card-container{display:block}}.lc-product-detail-view .lc-video-modal-row{display:flex;justify-content:center;height:100%;width:100%}.lc-video-only-view .lc-video-modal-row{display:block;height:100%}.lc-product-detail-view cooee-item-detail{--header-display: none;width:50%;flex:1}@media(max-width:768px){.lc-product-detail-view cooee-item-detail{--header-display: flex;width:100%;height:70dvh;position:absolute;bottom:0;z-index:2147483646}}.lc-video-only-view cooee-item-detail{width:100%;height:70dvh;z-index:2147483646;bottom:0;position:absolute;border-radius:var(--lc-card-radius) var(--lc-card-radius) 0 0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.video-loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#0000004d;z-index:2}.video-loading-overlay .loading-spinner{width:30px;height:30px;border:3px solid rgba(255,255,255,.3);border-top:3px solid #fff;border-radius:50%;animation:spin 1s linear infinite}
+`],encapsulation:3})};
+
+var videoDetailDialog_componentBe1TGq0U = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	VideoDetailDialogComponent: Ee
+});
+
+export { f, l, videoDetailDialog_componentBe1TGq0U as v };