@letscooee/web-sdk 11.4.0 → 11.5.1

package/dist/video-detail-dialog.component-EEIGSLHY.js

@@ -1,3 +0,0 @@
-import{A as Me,B as Re,a as _e,c as O,d as Ce,f as U,k as Q,q as R,r as De,s as be,t as Te,u as Ie,v as Ee,x as Se,y as ke,z as Pe}from"./chunk-TFHLHURZ.js";import{a as Oe,b as Ne}from"./chunk-DJQTENVX.js";import{c as we,e as fe,f as N,g as H,i as xe,j as Ve,k as ye,l as F}from"./chunk-JVXVRZDG.js";import"./chunk-74XS3G6Q.js";import{$a as me,Ba as g,D as Y,Da as a,E as f,Ga as $,Ha as j,I as T,Ia as W,Ja as ae,Ka as de,L as J,La as b,M as X,Ma as S,O as s,Ta as se,Ua as le,V as Z,Va as ce,X as w,Za as pe,ba as I,fb as ue,ga as E,ha as x,ia as V,ib as k,ja as ee,jb as P,ka as y,kb as M,la as D,lb as ge,ma as u,na as l,oa as d,pa as _,qa as te,ra as ie,sa as oe,sb as he,ta as ne,ua as re,ub as ve,v as m,va as B,x as c,y as p,za as v}from"./chunk-KHVPWQ5E.js";import"./chunk-V7UGKYBN.js";var z=class n{dialogState=P();dialog=m(ye);triggerData=m(fe)().triggerData;eventData=m(N);containerRef=m(Z);async share(t){t.stopPropagation(),t.preventDefault(),R()&&De()?await this.shareNative():await this.shareWithDialog()}async shareNative(){let t=Ne(this.triggerData,this.eventData.video,!1);await navigator.share(t),Oe(this.triggerData,this.eventData.video,this.eventData.index,"Native")}async shareWithDialog(){let t=await import("./share-dialog.component-GPFADLFY.js");this.dialogState.emit(!0),this.dialog.open(t.ShareDialogComponent,{viewContainerRef:this.containerRef}).closed.subscribe(()=>this.dialogState.emit(!1))}static \u0275fac=function(e){return new(e||n)};static \u0275cmp=w({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,i){e&1&&(l(0,"button",0),g("click",function(r){return i.share(r)}),_(1,"cooee-icon",1),d())},dependencies:[F],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 A=class n{video=M.required();progress=f(0);constructor(){k(t=>{let e=this.video(),i=()=>{this.progress.set(e.currentTime/e.duration*100)};e.addEventListener("timeupdate",i),t(()=>{e.removeEventListener("timeupdate",i)})})}static \u0275fac=function(e){return new(e||n)};static \u0275cmp=w({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,i){e&1&&(te(0,"div",0)(1,"div",1),oe(2,"div"),ie()()),e&2&&(s(),S("width",i.progress(),"%"),E("aria-valuenow",i.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 ze=["swiperContainer"],Ae=(n,t)=>t.id;function Le(n,t){if(n&1){let e=v();l(0,"div",3)(1,"cooee-item-card",4),g("buttonClick",function(o){c(e);let r=a();return p(r.onButtonClick(o))})("click",function(){let o=c(e).$implicit,r=a();return p(r.cardClick.emit(o))}),d()()}if(n&2){let e=t.$implicit;s(),u("item",e)}}var L=class n{items=M.required();cardClick=P();destroyRef=m(Y);elementRef=m(T);engagementService=m(U);swiperContainerRef=ge.required("swiperContainer");swiperInstance;constructor(){k(()=>{this.initSwiper()}),this.destroyRef.onDestroy(()=>{this.swiperInstance?.destroy()})}ngOnInit(){O(this.elementRef.nativeElement.shadowRoot)}onButtonClick(t){let e=_e.get().website?.canChangeVariantInCart;if(this.items()?.length>1||t.hasVariants()&&!e){this.cardClick.emit(t);return}this.engagementService.executeCTA(Ce.ADD_TO_CART,{item:t})}initSwiper(){this.swiperInstance=new window.CooeeSDK.Swiper(this.swiperContainerRef().nativeElement,{direction:"horizontal",effect:"slide",slidesPerView:1.2,nested:!0,centeredSlides:!0,spaceBetween:12,mousewheel:{enabled:!0,thresholdDelta:10,thresholdTime:200}})}static \u0275fac=function(e){return new(e||n)};static \u0275cmp=w({type:n,selectors:[["cooee-video-promoted-items"]],viewQuery:function(e,i){e&1&&ae(i.swiperContainerRef,ze,5),e&2&&de()},hostAttrs:[1,"letscooee-widget"],inputs:{items:[1,"items"]},outputs:{cardClick:"cardClick"},features:[me([U])],decls:5,vars:0,consts:[["swiperContainer",""],[1,"swiper-container"],[1,"swiper-wrapper"],[1,"swiper-slide"],["tabindex","0",3,"buttonClick","click","item"]],template:function(e,i){e&1&&(l(0,"div",1,0)(2,"div",2),y(3,Le,2,1,"div",3,Ae),d()()),e&2&&(s(3),D(i.items()))},dependencies:[Re],styles:[`:host{display:block;width:100%}cooee-item-card{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:rgba(var(--lc-card-bg-color));cursor:pointer;border-radius:var(--lc-card-radius)}
-`],encapsulation:3})};var Be=["swiperComp"],$e=["videoEl"],je=(n,t)=>t.url;function We(n,t){n&1&&(l(0,"div",11),_(1,"div",15),d())}function He(n,t){if(n&1&&_(0,"source",13),n&2){let e=t.$implicit;u("type",pe(e.mimeType))("src",e.url,J)}}function Ue(n,t){n&1&&B(0)}function Qe(n,t){if(n&1){let e=v();l(0,"cooee-video-promoted-items",24),g("cardClick",function(o){c(e);let r=a(2).$implicit,C=a();return p(C.productCardClicked(o,r))}),d()}if(n&2){let e=a(2).$implicit;u("items",e.items)}}function Ke(n,t){if(n&1&&_(0,"cooee-video-card",23),n&2){let e=a(2).$implicit;u("card",e.card)}}function qe(n,t){if(n&1){let e=v();_(0,"cooee-video-progress-bar",16),l(1,"div",17)(2,"cooee-mute-toggle",18),ce("mutedChange",function(o){c(e);let r=a(2);return le(r.muted,o)||(r.muted=o),p(o)}),g("toggled",function(){c(e);let o=a(2);return p(o.muteToggled())}),d(),I(3,Ue,1,0,"ng-container",8),d(),l(4,"div",19)(5,"cooee-share-button",20),g("dialogState",function(o){c(e);let r=a(2);return p(r.shareDialogOpen.set(o))}),d()(),l(6,"div",21),x(7,Qe,1,1,"cooee-video-promoted-items",22)(8,Ke,1,1,"cooee-video-card",23),d()}if(n&2){let e=a().$implicit,i=b(5),o=a(),r=b(9);u("video",i),s(2),se("muted",o.muted),u("videoEl",i),s(),u("ngTemplateOutlet",r),s(4),V(e.items.length&&o.footerContent===o.VideoConfigFooterContent.FIRST_ITEM?7:e.card&&o.footerContent===o.VideoConfigFooterContent.CARD?8:-1)}}function Ge(n,t){if(n&1){let e=v();l(0,"cooee-item-detail",25),g("closeClick",function(){c(e);let o=a(2);return p(o.productModalClosed())}),d()}if(n&2){let e=a(2);u("item",e.selectedItem)("similarItems",e.selectedVideo.items)}}function Ye(n,t){if(n&1){let e=v();l(0,"div",6)(1,"div",9)(2,"div",10),x(3,We,2,0,"div",11),l(4,"video",12,2),g("click",function(){let o=c(e).$index,r=a();return p(r.currentIndex===o&&r.toggleMute())})("ended",function(){c(e);let o=b(5),r=a();return p(r.onVideoEnded(o))})("loadstart",function(){let o=c(e).$index,r=a();return p(r.onVideoLoadStart(o))})("canplay",function(){let o=c(e).$index,r=a();return p(r.onVideoCanPlay(o))}),y(6,He,1,3,"source",13,je),d(),x(8,qe,9,5),d(),x(9,Ge,1,2,"cooee-item-detail",14),d()()}if(n&2){let e=t.$implicit,i=t.$index,o=a();s(2),S("background-image",e.thumbnail?"url("+e.thumbnail+")":null),s(),V(o.shouldShowVideoSpinner(i)?3:-1),s(),u("ngClass",o.viewTemplateClassName),E("preload",o.isVideoVisible(i)?"metadata":"none")("data-video-id",e.id)("autoplay",o.currentIndex===i||null)("muted",o.muted||null),s(2),D(e.sources),s(2),V(o.currentIndex===i?8:-1),s(),V(o.selectedItem&&o.currentIndex===i?9:-1)}}function Je(n,t){n&1&&B(0)}function Xe(n,t){if(n&1){let e=v();l(0,"button",26),g("click",function(){c(e);let o=a();return p(o.close())}),_(1,"cooee-icon",27),d()}}var Fe=class n{swiperComponent;videoElements;VideoConfigFooterContent=Se;currentIndex=0;muted=f(!1);selectedItem=null;selectedVideo;detailPopupTemplate;footerContent;viewTemplateClassName="lc-video-only-view";shareDialogOpen=f(!1);data=m(Ve);elementRef=m(T);eventData=m(N);dialogRef=m(xe);swiperInitialized=f(!1);swiperOptions=f(null);videos=[];triggerContext;engagementTrigger;isMobile=R();navigationConfig;cssLoadedPromise;resizeDebouncer=new be(this.onResize.bind(this));videoLoadingStates=new Map;constructor(){this.videos=this.data.videos,this.currentIndex=this.data.currentIndex,this.selectedVideo=this.videos[this.currentIndex],this.triggerContext=this.data.triggerContext,this.engagementTrigger=this.triggerContext.triggerData,this.navigationConfig=new Ee({enabled:!0,size:50,color:new Ie({h:"#000000"})}),this.cssLoadedPromise=O(this.elementRef.nativeElement.shadowRoot)}onKeyDown(t){t.preventDefault(),t.stopPropagation(),this.close()}async ngOnInit(){this.muted.set(await Q.get("muted",!1));let t=this.engagementTrigger?.content?.videoConfig;switch(this.detailPopupTemplate=t?.detailPopup.template??"VIDEO_ONLY_VIEW",this.footerContent=t?.footerContent??"FIRST_ITEM",this.detailPopupTemplate){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()}close(){let t=this.getCurrentVideoElement();this.dialogRef.close({lastVideo:this.videos[this.currentIndex],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}pauseAll(){this.videoElements.forEach(t=>t.nativeElement.pause())}toggleMute(){this.muted.update(t=>!t)}async muteToggled(){await Q.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(){this.pauseAll();let t=this.getCurrentVideoElement();t&&this.playVideo(t)}playVideo(t){t.currentTime=0,t.play().catch(e=>we.error(e))}onVideoEnded(t){if(this.currentIndex<this.videos.length-1)this.selectedItem||this.shareDialogOpen()?this.playVideo(t):this.moveToNextVideo();else{let e=this.getPreviousVideoDataForEvent(),i=["CE Last Video Ended",{previous:e},{triggerData:this.engagementTrigger}];window.CooeeSDK.events.push(i),this.playVideo(t)}}onSlideChange(t){let e=this.getPreviousVideoDataForEvent();this.currentIndex=t.realIndex,this.selectedVideo=this.videos[this.currentIndex],this.eventData.video=this.selectedVideo,this.eventData.index=this.currentIndex,this.playActiveVideo(),this.detailPopupTemplate==="PRODUCT_DETAIL_VIEW"?this.selectItemForDetailView():this.selectedItem=null;let i=this.currentVideoProps(),o={previous:e,current:i},r=new H("CE Video Changed",o,this.engagementTrigger);r.setVideos(this.videos[this.currentIndex]),window.CooeeSDK.sendEvent(r)}productCardClicked(t,e){let i={videoID:e.id,videoIndex:this.currentIndex},o=new H("CE More Item Info Clicked",{current:i},this.engagementTrigger);o.setVideos(e),window.CooeeSDK.sendEvent(o),this.selectedItem=t}onVideoLoadStart(t){this.videoLoadingStates.set(t,!0)}onVideoCanPlay(t){this.videoLoadingStates.set(t,!1)}shouldShowVideoSpinner(t){return this.swiperInitialized()?this.videoLoadingStates.get(t)===!0&&this.isVideoVisible(t):this.isVideoVisible(t)}isVideoVisible(t){let e=this.currentIndex-1,i=this.currentIndex+1;return t===this.currentIndex||t===e||t===i}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:!0,spaceBetween:e,coverflowEffect:{rotate:0,stretch:0,depth:400,modifier:1,slideShadows:!1},on:{init:i=>{this.swiperInitialized.set(!0),setTimeout(()=>{i.update()},100)}},mousewheel:{enabled:!this.isMobile,invert:!1,thresholdDelta:20}})}isProductDetailView(){return this.detailPopupTemplate==="PRODUCT_DETAIL_VIEW"}currentVideoProps(){return{videoID:this.videos[this.currentIndex].id,videoIndex:this.currentIndex}}getPreviousVideoDataForEvent(){let t=this.currentVideoProps(),e=this.videoElements.find(o=>o.nativeElement.dataset.videoId===this.videos[this.currentIndex].id)?.nativeElement;t.playedTillMS=Math.ceil(e?.currentTime*1e3);let i=e?.duration*1e3;return t.playedTillPercent=+(t.playedTillMS/i).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.videos.map(h=>h.sources?.[0]).filter(h=>h?.width&&h?.height).map(h=>({width:h.width,height:h.height,aspectRatio:h.width/h.height}));if(t.length===0)return null;let e=t[0],i=window.innerWidth*.9,o=window.innerHeight*.9,r=i/e.width,C=o/e.height,G=Math.min(r,C);return{width:Math.floor(e.width*G),height:Math.floor(e.height*G)}}setVideoContainerDimensions(t,e){let i=this.elementRef.nativeElement;i.style.setProperty("--video-container-width",`${t}px`),i.style.setProperty("--video-container-height",`${e}px`)}onResize(){this.applyOptimalVideoDimensions()}static \u0275fac=function(e){return new(e||n)};static \u0275cmp=w({type:n,selectors:[["cooee-video-detail-dialog"]],viewQuery:function(e,i){if(e&1&&($(Be,7),$($e,5)),e&2){let o;j(o=W())&&(i.swiperComponent=o.first),j(o=W())&&(i.videoElements=o)}},hostAttrs:[1,"letscooee-widget"],hostBindings:function(e,i){e&1&&g("keydown.escape",function(r){return i.onKeyDown(r)},X)},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"],[3,"src","type"],[1,"swiper-no-swiping","swiper-no-mousewheel",3,"item","similarItems"],[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","items"],[1,"swiper-no-swiping","swiper-no-mousewheel",3,"closeClick","item","similarItems"],["type","button","aria-label","Close",1,"lc-close-button",3,"click"],["name","close","aria-hidden","true"]],template:function(e,i){if(e&1){let o=v();l(0,"div",3)(1,"cooee-swiper",4,0),g("slideChange",function(C){return c(o),p(i.onSlideChange(C))}),ne(3,5),y(4,Ye,10,10,"div",6,ee),re(),d(),l(6,"div",7),I(7,Je,1,0,"ng-container",8),d()(),I(8,Xe,2,0,"ng-template",null,1,ue)}if(e&2){let o=b(9);u("ngClass",i.viewTemplateClassName),s(),u("options",i.swiperOptions())("navigationConfig",i.navigationConfig),s(3),D(i.videos),s(3),u("ngTemplateOutlet",o)}},dependencies:[L,Te,Me,z,A,ve,he,Pe,ke,F],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%}.lc-product-detail-view .video-swiper>.swiper-wrapper{align-items:center}@media (max-width: 768px){.video-swiper>.swiper-button-prev,.video-swiper>.swiper-button-next{display:none!important}}.video-slide{position:relative;display:flex;align-items:center;visibility:hidden}.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})};export{Fe as VideoDetailDialogComponent};