https://static.lightxeditor.com/web/5692.93d07b22efbd00f0.js

1"use strict";(self.webpackChunklightx=self.webpackChunklightx||[]).push([[5692],{83311:(ne,P,l)=>{l.d(P,{d:()=>te});var E=l(10467),e=l(54438),x=l(20999),f=l(16478),v=l(60177),h=l(93552),c=l(49969),T=l(55918),C=l(31151),k=l(16471),g=l(45312),M=l(33391),O=l(32764),y=l(68010),b=l(74710),R=l(24045),A=l(22154),S=l(68287),U=l(84301),V=l(90013),L=l(68064),j=l(77616);const F=i=>({"container-fluid p-ltrt home-content":i}),B=()=>["/"],D=()=>["/video-templates"],G=i=>["/video-templates/",i],Y=i=>({search:i});function $(i,o){if(1&i){const t=e.RV6();e.qex(0),e.nrm(1,"pi",35),e.j41(2,"a",34),e.bIt("click",function(){e.eBV(t);const s=e.XpG(3);return e.Njj(s.activeModal.dismiss("ok"))}),e.EFF(3),e.k0s(),e.bVm()}if(2&i){const t=e.XpG(3);e.R7$(2),e.Y8G("routerLink",e.eq3(2,G,t.templateDetail.productAlias)),e.R7$(),e.SpI("",t.templateDetail.productDisplayName," Templates")}}function X(i,o){if(1&i){const t=e.RV6();e.j41(0,"div",32)(1,"div",33)(2,"a",34),e.bIt("click",function(){e.eBV(t);const s=e.XpG(2);return e.Njj(s.activeModal.dismiss("ok"))}),e.EFF(3,"Home"),e.k0s(),e.nrm(4,"pi",35),e.j41(5,"a",34),e.bIt("click",function(){e.eBV(t);const s=e.XpG(2);return e.Njj(s.activeModal.dismiss("ok"))}),e.EFF(6,"Video Templates"),e.k0s(),e.DNE(7,$,4,4,"ng-container",36),e.nrm(8,"pi",35),e.j41(9,"span",37),e.EFF(10),e.k0s()()()}if(2&i){const t=e.XpG(2);e.R7$(2),e.Y8G("routerLink",e.lJ4(4,B)),e.R7$(3),e.Y8G("routerLink",e.lJ4(5,D)),e.R7$(2),e.Y8G("ngIf",t.templateDetail&&t.templateDetail.productDisplayName),e.R7$(3),e.JRh(null==t.templateDetail?null:t.templateDetail.displayName)}}function N(i,o){if(1&i){const t=e.RV6();e.j41(0,"div",38)(1,"button",39),e.bIt("click",function(){e.eBV(t);const s=e.XpG(2);return e.Njj(s.close())}),e.nrm(2,"pi",40),e.k0s()()}}function W(i,o){1&i&&(e.j41(0,"div",41)(1,"span",42),e.EFF(2,"Loading..."),e.k0s()())}function K(i,o){1&i&&(e.j41(0,"div",43),e.nrm(1,"pi",44),e.k0s())}function z(i,o){if(1&i&&(e.j41(0,"h1",45),e.EFF(1),e.k0s()),2&i){const t=e.XpG(2);e.R7$(),e.JRh(null==t.templateDetail?null:t.templateDetail.displayName)}}function w(i,o){1&i&&e.nrm(0,"div",46)}function J(i,o){if(1&i&&(e.j41(0,"h3",47),e.EFF(1),e.k0s()),2&i){const t=e.XpG(2);e.R7$(),e.Lme("",null==t.mainProductSize?null:t.mainProductSize.width," x ",null==t.mainProductSize?null:t.mainProductSize.height," px ")}}function Z(i,o){1&i&&e.nrm(0,"div",48)}function H(i,o){1&i&&e.nrm(0,"div",49)}function Q(i,o){if(1&i){const t=e.RV6();e.j41(0,"a",50),e.bIt("click",function(){e.eBV(t);const s=e.XpG(2);return e.Njj(s.activeModal.close())}),e.EFF(1),e.k0s()}if(2&i){const t=o.$implicit;e.Y8G("routerLink",e.lJ4(3,D))("queryParams",e.eq3(4,Y,t)),e.R7$(),e.JRh(t)}}function q(i,o){if(1&i){const t=e.RV6();e.j41(0,"div",2),e.DNE(1,X,11,6,"div",3)(2,N,3,0,"div",4),e.j41(3,"div",5)(4,"div",6)(5,"div",7)(6,"div",8)(7,"div",9)(8,"picture",10),e.nrm(9,"source",11),e.nI1(10,"imgwebp"),e.nrm(11,"img",12),e.k0s(),e.DNE(12,W,3,0,"div",13),e.nrm(13,"canvas",14),e.k0s()(),e.j41(14,"div",15),e.DNE(15,K,2,0,"div",16)(16,z,2,1,"h1",17)(17,w,1,0,"div",18),e.j41(18,"h2",19),e.EFF(19),e.k0s(),e.DNE(20,J,2,2,"h3",20)(21,Z,1,0,"div",21),e.j41(22,"div",22)(23,"button",23),e.bIt("click",function(){e.eBV(t);const s=e.XpG();return e.Njj(s.imageOnClick(s.templateDetail))}),e.EFF(24,"Customize this template"),e.k0s()(),e.j41(25,"div",24),e.EFF(26,"Explore More"),e.k0s(),e.j41(27,"div",25),e.DNE(28,H,1,0,"div",26)(29,Q,2,6,"a",27),e.k0s(),e.j41(30,"div",28)(31,"div",29),e.bIt("click",function(){e.eBV(t);const s=e.XpG();return e.Njj(s.close())}),e.nrm(32,"pi",30),e.k0s(),e.j41(33,"button",31),e.bIt("click",function(){e.eBV(t);const s=e.XpG();return e.Njj(s.imageOnClick(s.templateDetail))}),e.EFF(34,"Customize this template"),e.k0s()()()()()()()}if(2&i){const t=e.XpG();e.Y8G("ngClass",e.eq3(23,F,!t.isDialog&&t.isLoaded)),e.R7$(),e.Y8G("ngIf",!t.isDialog),e.R7$(),e.Y8G("ngIf",t.isDialog),e.R7$(7),e.FS9("srcset",e.bMT(10,21,null==t.templateDetail?null:t.templateDetail.thumbUrl)),e.R7$(2),e.FS9("srcset",null==t.templateDetail?null:t.templateDetail.thumbUrl),e.FS9("alt",null==t.templateDetail?null:t.templateDetail.displayName),e.Y8G("@showhide",!0===t.playVideo?"out":"in"),e.R7$(),e.Y8G("ngIf",t.inProgress),e.R7$(),e.Y8G("@showhide",!0===t.playVideo?"in":"out"),e.R7$(2),e.Y8G("ngIf",!t.isSubscribed&&t.templateDetail&&t.templateDetail.pro),e.R7$(),e.Y8G("ngIf",t.isLoaded),e.R7$(),e.Y8G("ngIf",!t.isLoaded),e.R7$(2),e.JRh(null==t.templateDetail?null:t.templateDetail.socialPlatform),e.R7$(),e.Y8G("ngIf",t.isLoaded),e.R7$(),e.Y8G("ngIf",!t.isLoaded),e.R7$(),e.Y8G("ngClass",t.isDialog?"d-none":"d-flex"),e.R7$(),e.Y8G("disabled",!t.isLoaded),e.R7$(5),e.Y8G("ngIf",!t.isLoaded),e.R7$(),e.Y8G("ngForOf",null==t.templateDetail?null:t.templateDetail.tagList),e.R7$(),e.Y8G("ngClass",t.isDialog?"d-flex":"d-none"),e.R7$(3),e.Y8G("disabled",!t.isLoaded)}}function ee(i,o){1&i&&e.nrm(0,"app-not-found",51),2&i&&e.Y8G("header","false")}let te=(()=>{var i;class o extends C.Y{constructor(n,s,d,a,u,m,r,_,p,I,ie,ae,se){super(n),this.activeModal=n,this.templateService=s,this.createProjectService=d,this.authService=a,this.router=u,this.location=m,this.route=r,this.seoService=_,this.document=p,this.zone=I,this.configService=ie,this.envService=ae,this.sceneParser=se,this.inProgress=!1,this.isPlaying=!1,this.playVideo=!1,this.inOver=!1,this.productId="",this.clickTemplateImage=new e.bkB,this.isLoaded=!1,this.isDialog=!1,this.isCu

1stomize=!1,this.isFound=!0,this.user=this.authService.currentUser(),this.isSubscribed=!!this.user&&this.user.subscribed,this.configService.settings||this.configService.readSettings(),this.seoService.updatePageMeta("robots","index, follow, max-image-preview:large")}ngOnDestroy(){this.mouseLeave(),this.isCustomize||this.location.replaceState(this.router.url)}close(){this.activeModal.dismiss("ok")}loadData(){if(!this.isDialog){let d=this.route.snapshot.paramMap.get("product_slug");d&&(this.imageAlias=d)}if(!this.imageAlias)return this.activeModal.dismiss("ok"),void this.notFound();this.imageAlias&&this.getNewTemplateByProductImageAlias(this.productAlias,this.imageAlias,d=>{this.mouseEnter()})}notFound(){this.isFound=!1}ngOnInit(){this.loadData()}imageOnClick(n){this.envService.isMobileView?this.envService.openPlayStoreUrl():(this.activeModal.dismiss("ok"),this.isCustomize=!0,this.createProjectService.openVideoProject(n,this.productId))}getNewTemplateByProductImageAlias(n,s,d=null){var a=this;this.templateService.getTemplatesByProductImageAlias({format:0,productAlias:n,tagId:this.selectedTag?this.selectedTag.tagId:null,ImageAlias:s},function(){var m=(0,E.A)(function*(r){if(!r||!r.storeProductImage)return a.activeModal.dismiss("ok"),void a.notFound();{let _=r.storeProductImage;a.templateDetail=_,yield a.configService.waitForSettings();let p=a.configService.settings?.[k.jn.SocialFormat]?.[_.socialPlatformId];if(a.mainProductSize=p,a.templateDetail&&(a.seoService.updatePageTitle(f.b.seo.templatesIndividual.titlePrefix+a.templateDetail.displayName+f.b.seo.templatesIndividual.titlePostfix),a.seoService.updatePageMeta("description",f.b.seo.templatesIndividual.descPrefix+a.templateDetail.displayName+f.b.seo.templatesIndividual.descPostfix),a.seoService.updatePageImage(a.templateDetail.thumbUrl)),a.seoService.updateCanonicalUrl(g.c.siteUrl+"/video-templates/"+a.templateDetail.productAlias+"/"),a.isLoaded=!0,a.imageAlias&&a.isDialog)history.pushState("","",a.router.url),a.location.replaceState("/video-template/"+a.imageAlias+"/");else try{let I=a.seoService.generateBreadcrumbSchema([{name:"Home",url:g.c.siteUrl+"/"},{name:"Video Templates",url:g.c.siteUrl+"/video-templates/"},{name:a.templateDetail.productDisplayName+"Templates",url:g.c.siteUrl+"/design-templates/"+a.templateDetail.productAlias+"/"},{name:a.templateDetail?.displayName,url:g.c.siteUrl+a.router.url}]);a.seoService.addBreadcrumbSchemaToDOM(I)}catch{}d&&d()}});return function(r){return m.apply(this,arguments)}}(),m=>{this.activeModal.dismiss("ok"),this.notFound()})}render(n){const s=this.document.getElementById("canvas"),d=this.document.getElementById("img");this.fabricCanvas=new h.fabric.StaticCanvas(s),this.fabricCanvas.setWidth(d.width),this.fabricCanvas.setHeight(d.height),this._timeline&&this._timeline.kill(),this._timeline=T.os.timeline({paused:!0}),this._timeline.vars.onComplete=()=>{this.mouseLeave()};const a=this.sceneParser?this.sceneParser:this.inputSceneParser;a.parseProject(n,this.fabricCanvas,!1).then(u=>{this.inProgress=!1;const m=[];u.forEach((r,_)=>{r.addToCanvas(this.fabricCanvas),this.isPlaying=!0,a.parseAnimation(r),m[_]=r.getSceneAnimation().configureTimeline(this.fabricCanvas)}),Promise.all(m).then(()=>{u.forEach((r,_)=>{const p=r.getSceneAnimation().getTimeLine();p.vars.onStart=()=>{this.fabricCanvas.clear(),r.getSceneAnimation().addToCanvas(this.fabricCanvas)},p.play(),this._timeline.add(p,"+=0")})}),this._timeline.play()}),this.zone.runOutsideAngular(()=>this.animationRenderAll(this.fabricCanvas))}animationRenderAll(n){const s=()=>{n.renderAll(),this.req=h.fabric.util.requestAnimFrame(s)};h.fabric.util.requestAnimFrame(s)}mouseLeave(){h.fabric.util.cancelAnimFrame(this.req),this.playVideo=!1,this.inOver=!1,this.inProgress=!1,this._timeline&&this._timeline.kill(),this.fabricCanvas&&this.fabricCanvas.clear()}mouseEnter(){this.inOver=!0,setTimeout(()=>{this.inOver&&(this.inProgress=!0,this.templateService.getTemplateByContentUrl(this.templateDetail.contentUrl,n=>{this.playVideo=!0,this.render(n)},n=>{}))},500)}}return(i=o).\u0275fac=function(n){return new(n||i)(e.rXU(M.Lw),e.rXU(O.I),e.rXU(x.Zg),e.rXU(y.u),e.rXU(b.Ix),e.rXU(v.aZ),e.rXU(b.nX),e.rXU(R.F),e.rXU(v.qQ),e.rXU(e.SKi),e.rXU(A.w),e.rXU(S.L),e.rXU(U.q,8))},i.\u0275cmp=e.VBU({type:i,selectors:[["app-templates-individual"]],inputs:{productAlias:"productAlias",imageAlias:"imageAlias",productId:"productId",inputSceneParser:"inputSceneParser",isDialog:"isDialog"},outputs:{clickTemplateImage:"clickTemplateImage"},features:[e.Jv_([x.Zg]),e.Vt3],decls:2,vars:2,consts:[[3,"ngClass",4,"ngIf"],[3,"header",4,"ngIf"],[3,"ngClass"],["class","row g-0",4,"ngIf"],["class","modal-header border-0 p-0 d-none d-lg-block d-md-block",4,"ngIf"],[1,"modal-body","p-12"],[1,""],[1,"row","no-margin"],[1,"col-xl-5","col-lg-5","me-auto","p-0","text-center"],[1,"position-relative",2,"width","fit-content","height","fit-content","margin","auto"],["loading","lazy"],["loading","lazy","type","image/webp",3,"srcset"],["id","img","onerror","errImage(this)","loading","lazy",1,"responsive","border-radius-8",3,"srcset","alt"],["class","spinner-border spinner-border-lg","role","status","style","position: absolute;\n                top: calc(50% - 1rem);left: calc(50% - 1rem);",4,"ngIf"],["id","canvas",1,"video","template-page-canvas"],[1,"col-xl-6","col-lg-6","p-0","ms-auto"],["class","mt-3 mb-2 mt-lg-0",4,"ngIf"],["class","text-24 text-bold text-black text-capitalize lh-p1 mt-3 mt-lg-0  mb-0",4,"ngIf"],["class","text-24 text-bold text-black text-capitalize lh-p1 text-loader",4,"ngIf"],[1,"text-xxxl","grey-500","text-capitalize","lh-140","text-bold","mt-2"],["class","text-lg grey-300 text-semi lh-p3 mb-0 mt-2",4,"ngIf"],["class","text-lg grey-300 text-semi lh-p3 mt-2 text-loader",4,"ngIf"],[1,"mt-12","d-lg-block","d-md-block",3,"ngClass"],["type","button","tabindex","0",1,"btn","btn-primary","btn-temp",3,"click","disabled"],[1,"text-lg","text-black","text-semi","lh-p3","mt-12"],[1,"mt-8"],["class","text-loader",4,"ngIf"],["rel","nofollow","class","badge badge-temp me-2 mb-2",3,"routerLink","queryParams","click",4,"ngFor","ngForOf"],[1,"position-sticky","d-lg-none","d-md-none","bg-white","align-items-center","justify-content-center",2,"bottom","0","height","114px",3,"ngClass"],[1,"cross-btn",3,"click"],["name","closelogin",1,"f-30"],["type","button","tabindex","0",1,"btn","btn-primary","btn-temp","ms-3",3,"click","disabled"],[1,"row","g-0"],[1,"text-normal"],[1,"text-semi","text-primary","text-capitalize",3,"click","routerLink"],["name","frame",1,"f-24"],[4,"ngIf"],[1,"text-dark"],[1,"modal-header","border-0","p-0","d-none","d-lg-block","d-md-block"],["type","button","aria-hidden","close",1,"close",3,"click"],["name","close",1,"f-30"],["role","status",1,"spinner-border","spinner-border-lg",2,"position","absolute","top","calc(50% - 1rem)","left","calc(50% - 1rem)"],[1,"sr-only","text-nowrap","border-0","position-absolute","overflow-hidden"],[1,"mt-3","mb-2","mt-lg-0"],["name","probadge"],[1,"text-24","text-bold","text-black","text-capitalize","lh-p1","mt-3","mt-lg-0","mb-0"],[1,"text-24","text-bold","text-black","text-capitalize","lh-p1","text-loader"],[1,"text-lg","grey-300","text-semi","lh-p3","mb-0","mt-2"],[1,"text-lg","grey-300","text-semi","lh-p3","mt-2","text-loader"],[1,"text-loader"],["rel","nofollow",1,"badge","badge-temp","me-2","mb-2",3,"click","routerLink","queryParams"],[3,"header"]],template:function(n,s){1&n&&e.DNE(0,q,35,25,"div",0)(1,ee,1,1,"app-not-found",1),2&n&&(e.Y8G("ngIf",s.isFound),e.R7$(),e.Y8G("ngIf",!s.isFound))},dependencies:[v.YU,v.Sq,v.bT,V.X,b.Wk,L.b,j.m],styles:[".btn-temp[_ngcontent-%COMP%]{width:256px;height:48px}.responsive[_ngcontent-%COMP%]{max-height:calc(100vh - 125px);max-width:100%}.template-page-canvas[_ngcontent-%COMP%]{position:absolute;top:0;display:flex}.cross-btn[_ngcontent-%COMP%]{background:#626adf1a;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px}.cross-btn[_ngcontent-%COMP%]:hover{background:#626adf26}"],data:{animation:[(0,c.hZ)("showhide",[(0,c.wk)("in",(0,c.iF)({opacity:1})),(0,c.wk)("out",(0,c.iF)({opacity:0}

1)),(0,c.kY)("in=>out",(0,c.i0)("300ms")),(0,c.kY)("out=>in",(0,c.i0)("1000ms"))])]}}),o})()}}]);