https://studio.d-id.com/v0.1309.0/assets/TemplateGalleryModal-CrDEfuSd.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/UpdateTemplateMenuItem-BTspwJaD.js","assets/index-yQyqfSHr.js","assets/index-DwIRTzB6.css","assets/TemplateSearch-B61tJYr1.js","assets/chunk-DYjk1xqt.js","assets/index.esm-CTCUUizF.js","assets/index.esm-CE99IrRV.js","assets/Link-BaZu5utG.js","assets/Stop-B9ykNFD3.js","assets/store-D65qovwS.js","assets/ExpandMore-D2H5MG6g.js","assets/AltArrowDown-B4AQFyir.js","assets/s3-DDsDx53b.js","assets/lottie-react.esm-YB78zf8E.js","assets/templates-api-CkJe-EgJ.js","assets/Search-D9ieGNjT.js","assets/Clear-CCu_WLb3.js","assets/ColorPicker-DdCnev5f.js","assets/useGoogleFonts-CztLzzhU.js","assets/Autocomplete-BpPMFMH2.js","assets/chunk-Bd1qRqEj.js","assets/RadioGroup-CDUrvAiV.js","assets/Stack-Ckki6SWh.js","assets/styled-BlPcXvYz.js"])))=>i.map(i=>d[i]);
2import{j as p,e as t,i as n,r as o,V as Ie,B as Re,n as Le,o1 as _e,M as fe,aE as Be,a5 as qe,ar as J,ng as Oe,F as ee,aY as De,a9 as Fe,en as je,aG as Ve,m1 as ze,ah as Ge,bc as U,o as te,gT as be,cQ as oe,fa as Ne,bm as ye,cr as ve,dD as ne,kW as le,kU as ce,m as We,at as de,bi as $e,lg as pe,cq as Ue,hn as He,o2 as Ke,bN as Ye}from"./index-yQyqfSHr.js";import{C as S,ak as Qe,Y as ue,Z as Xe}from"./chunk-DYjk1xqt.js";import{T as Ze,V as G}from"./templates-api-CkJe-EgJ.js";import"./store-D65qovwS.js";import{b as Je,r as et,c as me,e as tt,S as ot,G as Se,h as nt,i as at,j as rt,T as st,f as it,p as he}from"./TemplateSearch-B61tJYr1.js";import{C as lt}from"./ChipFilter-BqU6hzTh.js";import{R as ct,a as K,F as Y}from"./RadioGroup-CDUrvAiV.js";import"./index.esm-CTCUUizF.js";import"./index.esm-CE99IrRV.js";import"./Link-BaZu5utG.js";import"./Stop-B9ykNFD3.js";import"./ExpandMore-D2H5MG6g.js";import"./AltArrowDown-B4AQFyir.js";import"./s3-DDsDx53b.js";import"./lottie-react.esm-YB78zf8E.js";import"./Search-D9ieGNjT.js";import"./Clear-CCu_WLb3.js";import"./Tabs-CwIPjB1_.js";import"./Stack-Ckki6SWh.js";import"./styled-BlPcXvYz.js";const Z={[S.Square]:1,[S.Vertical]:9/16,[S.Wide]:16/9},Q={LARGE:1e3,MEDIUM:750,SMALL:500},N={LARGE:4,MEDIUM:3,SMALL:2,XSMALL:1},$={BOTTOM_PADDING:24,TITLE_MARGIN_TOP:8},dt=n("div",{target:"e4npzfg0"})({name:"1gn240d",styles:"display:flex;flex-direction:column;gap:12px;.MuiTabs-root{min-height:unset;}.MuiTabs-flexContainer{gap:8px;flex-wrap:wrap;}"}),pt=({title:e,filter:r,options:a,onChange:b})=>p(dt,{children:[t(Qe,{children:e}),t(lt,{tabs:a,maxWidth:"392px",activeTab:r,onTabChange:b})]});function ut(e,{columns:r,...a}){return{...a,...et(e,a),columns:Je(r,e,[5,4,3,2],1)}}function we(e,r,a,b,s){const y=(b-r*(s-1)-2*a*s)/s;if(y<=0)return s>1?we(e,r,a,b,s-1):void 0;const l=[];for(let c=0;c<s;c+=1)l[c]=0;const u=e.reduce((c,h,g)=>{const m=l.reduce((v,T,k)=>T<l[v]-1?k:v,0);return l[m]=l[m]+y/me(h)+r+2*a,c[m].push({photo:h,index:g}),c},Array.from({length:s},()=>[]));return{spacing:r,padding:a,containerWidth:b,variables:{columns:s},tracks:u.map(c=>({photos:c.map(({photo:h,index:g})=>({photo:h,index:g,width:y,height:y/me(h)}))}))}}function mt({photos:e,breakpoints:r,defaultContainerWidth:a,...b},s){const{containerRef:y,containerWidth:l}=tt(s,r,a),{spacing:u,padding:c,columns:h,...g}=ut(l,{photos:e,...b}),m=o.useMemo(()=>l!==void 0&&u!==void 0&&c!==void 0&&h!==void 0?we(e,u,c,l,h):void 0,[e,u,c,l,h]);return Ie.jsx(ot,{layout:"masonry",ref:y,model:m,...g})}const ht=o.forwardRef(mt),gt=n("div",{target:"etoqewf1"})("display:flex;flex-direction:column;align-items:center;padding-top:100px;min-height:300px;gap:16px;color:",({theme:e})=>e.colors.black[600],";"),ge=n("p",{target:"etoqewf0"})({name:"11kzjvp",styles:"font-size:16px;margin:0;text-align:center;word-break:break-word"}),xt=({searchQuery:e})=>p(gt,{children:[t("img",{src:Se,alt:"",width:32,height:32}),e?p(ge,{children:["We couldn't find templates for ",p("b",{children:['"',e,'"']}),"."]}):t(ge,{children:"We couldn't find templates matching your search."})]}),ft=n("div",{target:"eje143d3"})("display:flex;flex-direction:column;align-items:center;padding-top:100px;min-height:300px;gap:16px;color:",({theme:e})=>e.colors.black[600],";"),bt=n("p",{target:"eje143d2"})({name:"x2ia8d",styles:"font-size:16px;margin:0;text-align:center"}),yt=n(Re,{target:"eje143d1"})({name:"kxbue8",styles:"text-transform:none"}),vt=n(yt,{target:"eje143d0"})(),St=({onRetry:e})=>p(ft,{children:[t("img",{src:Se,alt:"",width:32,height:32}),t(bt,{children:"We couldn't fetch templates. Check your connection and try again."}),t(vt,{variant:"text",color:"secondary",onClick:e,size:"medium",children:"Try again"})]}),wt=16/9,ke={width:250},Te=1,kt=n(qe,{target:"efyot921"})("border:",Te,"px solid ",({theme:e})=>e.colors.black[300],";border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background-color:",({theme:e})=>e.colors.chill.panelBg,";box-shadow:0px 4px 12px rgba(0, 0, 0, 0.025);

2cursor:pointer;margin-bottom:16px;width:",({$width:e})=>e,"px;height:",({$width:e})=>Math.round(e/wt),"px;&:hover{border-color:",({theme:e})=>e.colors.primary,";background-color:",({theme:e})=>e.colors.black[50],";box-shadow:0px 1.32px 1.32px 0px rgba(0, 0, 0, 0.05);}"),Tt=n(Be,{target:"efyot920"})("color:",({theme:e})=>e.colors.black[900],";");function Ct({onClick:e,width:r=ke.width}){const a=Le();return p(kt,{onClick:e,$width:r-Te*2,"data-testid":"templates-start-from-blank-button",children:[t(fe,{src:_e,color:a.colors.secondary[900],size:"24px"}),t(Tt,{variant:"body",weight:600,children:"Start from blank"})]})}const At=o.lazy(()=>Ge(()=>import("./UpdateTemplateMenuItem-BTspwJaD.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23])).then(e=>({default:e.UpdateTemplateMenuItem}))),Pt=n("img",{target:"e1dhvg1910"})({name:"ne4qi",styles:"width:100%;height:100%;object-fit:cover;box-shadow:0px 1.32px 1.32px 0px rgba(0, 0, 0, 0.1)"}),Et=n("video",{target:"e1dhvg199"})("position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:",({visible:e})=>e?1:0,";transition:opacity 0.2s ease-in-out;"),Mt=n("div",{target:"e1dhvg198"})("display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:36px;height:36px;border-radius:50%;background-color:",({theme:e})=>e.colors.black[100],";color:",({theme:e})=>e.colors.secondary.main,";pointer-events:none;z-index:1;"),It=n("div",{target:"e1dhvg197"})("display:flex;justify-content:center;align-items:center;position:absolute;bottom:8px;right:8px;padding:4px;border-radius:50%;background-color:",({theme:e})=>e.colors.black[100],";color:",({theme:e})=>e.colors.secondary.main,";pointer-events:none;z-index:1;"),Rt=n("div",{target:"e1dhvg196"})("display:flex;justify-content:center;align-items:center;position:absolute;bottom:8px;left:8px;padding:2px 8px;border-radius:4px;background-color:",({theme:e})=>e.colors.black[100],";color:",({theme:e})=>e.colors.secondary.main,";"),Lt=n("div",{target:"e1dhvg195"})("display:flex;justify-content:center;align-items:center;position:absolute;bottom:8px;left:75px;padding:2px 8px;border-radius:4px;background-color:",({visibility:e})=>e===Ze.SHOW?"#00C853":"#FF1744",";color:",({theme:e})=>e.colors.secondary.main,";"),_t=n("div",{target:"e1dhvg194"})("font-size:14px;color:",({theme:e})=>e.colors.secondary[900],";font-weight:500;"),Bt=n("div",{target:"e1dhvg193"})({name:"1qx26ym",styles:"display:flex;flex-direction:column;gap:8px;cursor:pointer;width:100%"}),qt=n("div",{target:"e1dhvg192"})("position:relative;width:100%;aspect-ratio:",({ratio:e})=>e,";border-radius:8px;border:1px solid #e0e0e0;overflow:hidden;"),Ot=n("div",{target:"e1dhvg191"})({name:"1mzme1z",styles:"position:absolute;right:12px;top:12px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:2"}),Dt=n(ze,{target:"e1dhvg190"})({name:"yqb4a0",styles:"padding:0;&:focus{outline:none;}"}),j=250,Ft=120,jt=3e4,Vt=300,zt=({template:e,setSelectedTemplate:r,onLayout:a,index:b})=>{const[s,y]=o.useState(!1),l=J("projects_template_admin",!1),u=o.useRef(null),[c,h]=o.useState(!1),[g,m]=o.useState(!1),[v,T]=o.useState(!1),[k,R]=o.useState(!1),d=o.useRef(),I=o.useRef(),w=o.useRef(),A=o.useRef(null),L=o.useCallback(()=>{window.clearTimeout(I.current),d.current=window.setTimeout(()=>{var f;m(!0),h(!0),(f=A.current)==null||f.play().catch(()=>{}),w.current=window.setTimeout(()=>R(!0),Vt)},Ft)},[]),E=o.useCallback(()=>{var f;window.clearTimeout(d.current),window.clearTimeout(w.current),h(!1),R(!1),(f=A.current)==null||f.pause(),I.current=window.setTimeout(()=>{m(!1),T(!1)},jt)},[]);o.useEffect(()=>()=>{window.clearTimeout(d.current),window.clearTimeout(I.current),window.clearTimeout(w.current)},[]);const _=o.useCallback(()=>{window.clearTimeout(w.current),T(!0),R(!1)},[]),q=o.useCallback(f=>{A.current=f,f&&f.readyState>=f.HAVE_CURRENT_DATA&&_()},[_]),B=o.useCallback(()=>{E(),y(!0)},[E]),M=()=>{r(e,b)},x=[{label:t(o.Suspense,{fallback:null,children:t(At,{template:e,closeMenu:()=>y(!1)})})}];return o.useEffect(()=>{if(!a||!u.current)return;const f=new ResizeObserver(O=>{const V=O[0].contentRect.width;a(V)});return f.observe(u.current),()=>f.disconnect()},[a]),p(Bt,{ref:u,onClick:M,"data-testid":"template-tile",onMouseEnter:L,onMouseLeave:E,children:[p(qt,{ratio:e.width/e.imageHeight,children:[t(De,{closed:!s,onOpen:B,onClose:()=>y(!1),trigger:l?t(Ot,{children:t(Oe,{"data-testid":`template-options-three-dots-circle-${e.name}`,isActive:s})}):t(ee,{}),items:x,renderMenuWrapper:f=>t(Dt,{children:f})}),t(Pt,{src:e.scenesThumbnailsUrls[0],alt:"",loading:"lazy",decoding:"async"}),g&&t(Et,{ref:q,visible:c&&v,src:e.previewUrl,onCanPlay:_,onLoadedData:_,autoPlay:!0,muted:!0,loop:!0,playsInl

2ine:!0}),c&&!v&&t(Mt,{"data-testid":"template-tile-play","aria-hidden":"true",children:t(Fe,{src:je,size:"16px"})}),c&&!v&&k&&t(It,{"data-testid":"template-tile-preview-loading",children:t(Ve,{size:"size-16","aria-label":"Loading preview"})}),t(Rt,{"data-testid":`template-tile-scenes-count-${e.scenesCount}`,children:`${e.scenesCount} ${e.scenesCount>1?"scenes":"scene"}`}),l&&t(Lt,{visibility:e.visibility,children:e.visibility})]}),t(_t,{"data-testid":"template-tile-name",children:e.name})]})},Gt=n("div",{target:"eidd82m2"})({name:"1o8iyyp",styles:"display:flex;flex-direction:column;gap:8px;width:100%"}),Nt=n(U,{shouldForwardProp:e=>e!=="$aspectRatio",target:"eidd82m1"})("width:100%;height:",({$aspectRatio:e})=>`${j/e}px`,";border-radius:8px;transform:none;"),Wt=n(U,{target:"eidd82m0"})({name:"1r5x4u3",styles:"width:30%;height:12.5px;transform:none;border-radius:7px"}),$t=({aspectRatio:e})=>p(Gt,{children:[t(Nt,{variant:"rectangular",$aspectRatio:e}),t(Wt,{variant:"text"})]}),Ut=()=>{const e=Object.values(Z);return Array.from({length:3},(r,a)=>{const b=e[a%e.length],s=j/b;return{key:`skeleton-${a}`,id:`skeleton-${a}`,src:"",width:j,height:s+$.BOTTOM_PADDING+$.TITLE_MARGIN_TOP,imageHeight:s,aspectRatio:b,isSkeleton:!0}})},Ht=n("div",{target:"e1vju67f0"})({name:"1h52ou4",styles:"overflow-y:auto;height:100%;padding:0 24px;scrollbar-gutter:stable"}),Kt=({isLoading:e,isError:r,photos:a,setSelectedTemplate:b,onStartFromBlank:s,searchQuery:y,onRetry:l})=>{const[u,c]=o.useState(0),h=o.useMemo(()=>e?Ut():a,[e,a]);return p(Ht,{children:[!e&&t(Ct,{onClick:s,width:u||ke.width}),t(ht,{componentsProps:{container:{style:{paddingBottom:"24px"}}},photos:h,spacing:16,columns:g=>g>Q.LARGE?N.LARGE:g>Q.MEDIUM?N.MEDIUM:g>Q.SMALL?N.SMALL:N.XSMALL,render:{photo:(g,{photo:m,index:v})=>{if("isSkeleton"in m)return t($t,{aspectRatio:m.aspectRatio},`skel-${v}`);const T=m;return t(zt,{index:v,template:T,setSelectedTemplate:b,onLayout:v===0?c:void 0},T.id)}}},e?"loading":"loaded"),!e&&!r&&h.length===0&&t(xt,{searchQuery:y}),r&&t(St,{onRetry:l})]})},Yt=n("div",{target:"e9pphdq6"})("display:flex;height:100%;width:100%;position:absolute;background:",({theme:e})=>e.colors.black[50],";"),Qt=n("div",{target:"e9pphdq5"})("width:280px;

2min-width:200px;max-width:280px;padding:24px;background:",({theme:e})=>e.colors.chill.panelBg,";border-right:1px solid ",({theme:e})=>e.colors.chill.border,";flex-shrink:1;display:flex;flex-direction:column;gap:24px;overflow-y:auto;"),Xt=n("div",{target:"e9pphdq4"})({name:"1wbfvtz",styles:"flex:1;display:flex;flex-direction:column;height:100%;min-height:600px;position:relative"}),Zt=n("div",{target:"e9pphdq3"})({name:"oxqo5s",styles:"position:relative;display:flex;align-items:center;justify-content:flex-end;padding:12px 24px;flex-shrink:0"}),Jt=n(ve,{target:"e9pphdq2"})({name:"8sosmc",styles:"font-weight:bold;padding:0!important;margin:0"}),eo=n(ne,{target:"e9pphdq1"})({name:"1de1cmf",styles:"position:absolute;right:24px;top:24px"}),to=n("div",{target:"e9pphdq0"})({name:"20lvz",styles:"padding:0 64px 0 24px;margin-bottom:24px;flex-shrink:0;flex-direction:row;display:flex"}),oo={all:void 0,youtube:S.Wide,"youtube-short":S.Vertical,facebook:S.Square,instagram:S.Vertical,tiktok:S.Vertical,linkedin:S.Square,landscape:S.Wide,portrait:S.Vertical,square:S.Square},no=({setSelectedTemplate:e,from:r,aspectRatio:a,setAspectRatio:b,search:s,setSearch:y,filter:l,setFilter:u})=>{const c=te(),h=J("projects_template_admin",!1),[g,m]=o.useState(G.VISIBLE),{data:v=[],isLoading:T,error:k,refetch:R}=nt({visibility:g}),{navigateToAdvancedEditor:d}=be(),{close:I}=oe(),{filteredTemplates:w}=at({templates:v,search:s,tagFilter:l,aspectRatio:a==="all"?void 0:oo[a]}),A=rt(v),L=o.useMemo(()=>A.map(x=>({id:x,label:x,active:x===l})),[A,l]),E=x=>{u(l===x?"":x)},_=async()=>{I(),c==null||c.track("templates-preview",{event:"click",componentType:"modal",templateName:"start from blank",templateId:"start from blank",aspectRatio:a,useCaseFilter:[l],textSearch:s,index:0}),await d({mixPanelFrom:"template-gallery-blank",options:{from:r}})},q=x=>{b(x.target.value)},B=ue.find(x=>x.value===a)||ue[0],M=o.useMemo(()=>w.map(x=>{const f=Z[x.cropMode]??Z[S.Wide],O=j/f;return{...x,key:x.id,src:x.scenesThumbnailsUrls[0],width:j,height:O+$.BOTTOM_PADDING+$.TITLE_MARGIN_TOP,imageHeight:O}}),[w]);return p(Yt,{children:[p(Qt,{children:[t(Jt,{children:"Create a video"}),t(Ne,{}),t(Xe,{title:"Aspect ratio",selectedAspectRatio:B,onAspectRatioChange:q}),L.length>0&&t(pt,{title:"Use case",filter:l,options:L,onChange:E})]}),p(Xt,{children:[t(Zt,{children:t(eo,{onClick:I,"aria-label":"close",children:t(ye,{color:"secondary",fontSize:"large"})})}),p(to,{children:[t(st,{search:s,setSearch:y,location:"modal"}),h&&p(ct,{row:!0,value:g,style:{marginLeft:"24px"},onChange:x=>m(x.target.value),children:[t(Y,{value:G.ALL,control:t(K,{}),label:"All"}),t(Y,{value:G.VISIBLE,control:t(K,{}),label:"Visible"}),t(Y,{value:G.HIDDEN,control:t(K,{}),label:"Hidden"})]})]}),t(Kt,{isLoading:T,isError:!!k,photos:M,setSelectedTemplate:e,onStartFromBlank:_,searchQuery:s,onRetry:R})]})]})},ao=n("div",{target:"e1a6fgtx0"})({name:"13iaqia",styles:"display:flex;flex-direction:column;gap:16px;height:100%"}),ro=n(U,{target:"e3mkh8b3"})("height:100%;border-radius:12px;transform:scale(1);aspect-ratio:",({cropMode:e})=>e===S.Wide?"16 / 9":e===S.Square?"1 / 1":"9 / 16",";background-color:",({theme:e})=>e.colors.black[300],";"),X=n(U,{target:"e3mkh8b2"})("height:100px;border-radius:8px;transform:scale(1);aspect-ratio:",({cropMode:e})=>e===S.Wide?"16 / 9":e===S.Square?"1 / 1":"9 / 16",";background-color:",({theme:e})=>e.colors.black[100],";"),so=n("div",{target:"e3mkh8b1"})("height:calc(100% - 170px - 48px);width:100%;display:flex;justify-content:center;border-radius:14px;padding:24px;background-color:",({theme:e})=>e.colors.black[100],";box-sizing:border-box;"),io=n("div",{target:"e3mkh8b0"})({name:"u9ajix",styles:"display:flex;gap:8px;padding:0px 24px;overflow:hidden"}),Ce=({cropMode:e})=>p(io,{children:[t(X,{cropMode:e}),t(X,{cropMode:e}),t(X,{cropMode:e})]}),lo=({cropMode:e})=>p(ee,{children:[t(so,{children:t(ro,{cropMode:e})}),t(Ce,{cropMode:e})]}),co=n("div",{target:"ewp45q411"})("height:100%;width:100%;position:absolute;background:",({theme:e})=>e.colors.black[50],";z-index:2;"),po=n("video",{target:"ewp45q410"})({name:"1vuoign",styles:"height:100%;border-radius:12px;::cue{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;}"}),uo=n("div",{target:"ewp45q49"})("height:calc(100% - 170px - 48px);width:100%;display:flex;justify-content:center;border-radius:14px;padding:24px;background-color:",({theme:e})=>e.colors.black[100],";box-sizing:border-box;"),mo=n(ao,{target:"ewp45q48"})({name:"lneokj",styles:"height:calc(100% - 88px)"}),ho=n("img",{target:"ewp45q47"})("height:100px;border:2px solid ",({isSelected:e,theme:r})=>e?r.colors.primary.main:r.colors.black[300],";border-radius:8px;

2cursor:pointer;"),go=n("div",{target:"ewp45q46"})({name:"lf6bl8",styles:"display:flex;justify-content:end;gap:16px;padding:0px 24px"}),xo=n($e,{target:"ewp45q45"})("padding:0px 24px;overflow:hidden;display:",({hidden:e})=>e?"none":"flex",";"),W=e=>e/1e3,fo=n(fe,{target:"ewp45q44"})("color:",({theme:e})=>e.colors.black[700],";"),bo=n("div",{target:"ewp45q43"})({name:"own8cr",styles:"position:relative;display:flex;align-items:start;justify-content:center;gap:16px;padding:24px"}),yo=n(ne,{target:"ewp45q42"})({name:"12txrhw",styles:"padding:0;border-radius:12px;height:40px"}),vo=n(ve,{target:"ewp45q41"})({name:"3l7bk6",styles:"text-align:center;font-weight:bold;padding:0.5rem 0 0!important"}),So=n(ne,{target:"ewp45q40"})({name:"1o3nkn",styles:"margin-left:auto"}),wo=({selectedTemplate:e,selectedTemplateIndex:r,onBack:a,from:b,aspectRatio:s,search:y,filter:l})=>{const u=te(),{navigateToAdvancedEditor:c,isLoading:h}=be(),{close:g}=oe(),[m,v]=o.useState(!0),T=J("projects_brandkit_enabled",!1),[k,R]=o.useState(null),[d,I]=o.useState(null),[w,A]=o.useState(null),[L,E]=o.useState(null),[_,q]=o.useState(!1),B=o.useRef(!1),M=o.useRef(null),x=o.useRef(null),f=o.useMemo(()=>{let i=0;return((d==null?void 0:d.pages)||[]).map((P,C)=>{const D={...P,startTime:C===0?0:i+.1,endTime:i+W(P.duration)};return i+=W(P.duration),D})},[d]);o.useEffect(()=>{v(!0),it(e).then(I).then(()=>v(!1)),u==null||u.track("template-preview",{event:"view",componentType:"modal",templateName:e.name,templateId:e.id,aspectRatio:s,useCaseFilter:[l],textSearch:y,index:r})},[e]),o.useEffect(()=>{if(m)return;q(!1);const i=f.map(C=>le(C,ce.thumbnail));if(!i.length)return;const P=i.map(C=>new Promise(D=>{const F=new Image;F.onload=D,F.onerror=D,F.src=C}));Promise.all(P).then(()=>{q(!0)})},[m]),o.useEffect(()=>{const i=M.current;let P;const C=()=>{F(),D(),P=requestAnimationFrame(C)},D=()=>{i&&w&&i.currentTime+.1>=w&&(i.pause(),V())},F=()=>{var ie;if(!i||!d)return;const re=i.currentTime,z=f.find(H=>re>=H.startTime&&re<H.startTime+W(H.duration));if(!z||z.id===k)return;R(z.id);const se=(ie=x.current)==null?void 0:ie.querySelector(`#page-tile-${z.id}`);se&&se.scrollIntoView({behavior:"smooth",block:"nearest"})};return P=requestAnimationFrame(C),()=>{cancelAnimationFrame(P)}},[M,d,f,w,k]);const O=()=>{if(B.current){B.current=!1;return}V()},V=()=>{A(null)},Ae=i=>{M.current&&(M.current.currentTime=i,B.current=!0)},Pe=i=>{M.current&&(Ae(i.startTime),A(i.startTime+W(i.duration)),M.current.play())},ae=i=>{u==null||u.track("templates-preview",{event:"click",componentType:"modal",action:i,templateName:e.name,templateId:e.id,aspectRatio:s,useCaseFilter:[l],textSearch:y,index:r})},Ee=async()=>{if(!d)return;E("multiple");const i=(d.pages||[]).map(C=>he(d,C,T)),P={...d,pages:i};await c({options:{template:P,from:b,initPanel:pe.TEMPLATES,selectedTemplate:e,selectedTemplateIndex:r,aspectRatio:s},mixPanelFrom:"template-all-scenes"}),ae("add-all-scenes"),g()},Me=async()=>{if(!d||!k)return;E("single");const i=(d.pages||[]).filter(C=>C.id===k).map(C=>he(d,C,T)),P={...d,pages:i};await c({options:{template:P,from:b,initPanel:pe.TEMPLATES,selectedTemplate:e,selectedTemplateIndex:r,aspectRatio:s},mixPanelFrom:"template-single-scene"}),ae("add-selected-scene"),g()};return p(co,{children:[p(bo,{children:[t(yo,{onClick:a,children:t(fo,{src:We,size:"32px"})}),t(vo,{children:e.name}),t(So,{onClick:g,children:t(ye,{color:"secondary",fontSize:"large"})})]}),p(mo,{ref:x,children:[!m&&p(ee,{children:[t(uo,{children:p(po,{ref:M,poster:e.scenesThumbnailsUrls[0],controlsList:"nodownload",controls:!0,playsInline:!0,autoPlay:!0,preload:"metadata",onSeeked:O,children:[t("source",{src:e.videoUrl||e.previewUrl,type:"video/mp4"}),"Your browser does not support the video tag."]})}),!_&&t(Ce,{cropMode:e.cropMode}),t(xo,{id:"template-preview-content-bar",scrollButtonPadding:16,hidden:!_,children:f.map(i=>t(ho,{id:`page-tile-${i.id}`,src:le(i,ce.thumbnail),isSelected:k===i.id,onClick:()=>Pe(i)},i.id))})]}),m&&t(lo,{cropMode:e.cropMode}),p(go,{children:[t(de,{"data-testid":"template-preview-add-selected-scene-button",disabled:!k||m,variant:"outlined",color:"secondary",onClick:Me,isLoading:L==="single"&&h,loadingText:"Add selected scene",children:"Add selected scene"}),t(de,{"data-testid":"template-preview-add-all-scenes-button",disabled:m,variant:"contained",color:"primary",onClick:Ee,isLoading:L==="multiple"&&h,loadingText:"Add all scenes",children:"Add all scenes"})]})]})]})},ko=n(Ye,{target:"e1nnvrx70"})({name:"1tp992u",styles:"& .MuiPaper-root{box-sizing:content-box;max-height:960px;max-width:1300px;border-radius:20px;height:90%;@media (max-height: 780px){margin:120px 0;}}"}),xe=2e3,Wo=Ue(({from:e})=>{const r=te(),{isOpen:a,close:b}

2=oe(),[s,y]=o.useState(null),[l,u]=o.useState(null),[c,h]=o.useState("all"),[g,m]=o.useState(""),[v,T]=o.useState(""),[k,R]=o.useState(!1);He(k);const d=o.useCallback(()=>{y(null),u(null)},[]),I=o.useCallback((w,A)=>{y(w),u(A)},[]);return o.useEffect(()=>{d()},[d,a]),o.useEffect(()=>{a&&(r==null||r.track("templates-gallery",{event:"view",componentType:"modal"}))},[a]),o.useEffect(()=>{if(!a)return;const w=()=>R(!0);if(typeof window.requestIdleCallback=="function"){const L=window.requestIdleCallback(w,{timeout:xe});return()=>{var E;return(E=window.cancelIdleCallback)==null?void 0:E.call(window,L)}}const A=window.setTimeout(w,xe);return()=>window.clearTimeout(A)},[a]),p(ko,{transitionDuration:Ke,width:"80%",maxWidth:"lg",open:a,onClose:b,children:[t(no,{setSelectedTemplate:I,aspectRatio:c,setAspectRatio:h,search:g,setSearch:m,filter:v,setFilter:T,from:e}),s&&l!==null&&t(wo,{selectedTemplate:s,onBack:d,aspectRatio:c,from:e,search:g,filter:v,selectedTemplateIndex:l})]})});export{Wo as TemplateGalleryModal};