https://ximagineai.com/_next/static/chunks/35248-8814ffe14220b68f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[35248],{35248:(e,t,s)=>{s.r(t),s.d(t,{VideoPreview:()=>p});var l=s(43592),a=s(74340),r=s(28411),n=s(88719),i=s(71357),c=s(67422),u=s(58057),o=s(27652),m=s(91405),d=s(33226),x=s(11948),h=s(67702),f=s(52786);function p(e){let{activeTab:t,startImageData:s,betweenImagesData:p,referenceImagesData:g,generatedVideo:v,templateVideo:j,isGenerating:w,generationId:b,onVideoGenerated:N,onError:y,templates:k,onTemplateSelect:I}=e,_=(0,d.useRouter)(),{status:S,isPolling:C,error:A}=function(e){let{generationId:t,pollInterval:s=3e3,onStatusChange:l,onCompleted:r,onError:n}=e,[i,c]=(0,a.useState)(null),[u,o]=(0,a.useState)(!1),[m,d]=(0,a.useState)(null),x=(0,a.useRef)(null),h=(0,a.useRef)(l),f=(0,a.useRef)(r),p=(0,a.useRef)(n);(0,a.useEffect)(()=>{h.current=l,f.current=r,p.current=n},[l,r,n]);let g=(0,a.useCallback)(async()=>{var e,s,l,a;if(t)try{let a=await fetch("/api/generate/video/state/".concat(t)),r=await a.json();if(r.success&&r.data){let t=r.data;if(c(t),d(null),null===(e=h.current)||void 0===e||e.call(h,t),"completed"===t.status&&t.video_url)null===(s=f.current)||void 0===s||s.call(f,t.video_url),o(!1);else if("failed"===t.status){let e=t.error_message||"Video generation failed";d(e),null===(l=p.current)||void 0===l||l.call(p,e),o(!1)}}else throw Error(r.error||"Failed to fetch status")}catch(t){console.error("Error fetching video status:",t);let e=t.message||"Failed to fetch video status";d(e),null===(a=p.current)||void 0===a||a.call(p,e),o(!1)}},[t]),v=(0,a.useCallback)(()=>{t&&(x.current&&clearInterval(x.current),o(!0),d(null),g(),x.current=setInterval(g,s))},[t,g,s]),j=(0,a.useCallback)(()=>{o(!1),x.current&&(clearInterval(x.current),x.current=null)},[]);return(0,a.useEffect)(()=>(t?v():(x.current&&(clearInterval(x.current),x.current=null),o(!1),c(null),d(null)),()=>{x.current&&(clearInterval(x.current),x.current=null),o(!1)}),[t]),(0,a.useEffect)(()=>{i&&("completed"===i.status||"failed"===i.status)&&(x.current&&(clearInterval(x.current),x.current=null),o(!1))},[i]),{status:i,isPolling:u,error:m,startPolling:v,stopPolling:j,refetch:g}}({generationId:b||null,onCompleted:N,onError:y}),D=v||(null==S?void 0:S.video_url)||(w||b?null:j),[E,F]=(0,a.useState)(0),[R,P]=(0,a.useState)(!0),z=(0,a.useRef)(0),T=(0,a.useRef)(0),V=()=>{k&&0!==k.length&&(P(!1),F(e=>{let t=0===e?k.length-1:e-1;return I&&k[t]&&I(k[t],t),t}))},G=()=>{k&&0!==k.length&&(P(!1),F(e=>{let t=(e+1)%k.length;return I&&k[t]&&I(k[t],t),t}))};(0,a.useEffect)(()=>{if(!k||0===k.length||v||w||!R)return;let e=setInterval(()=>{F(e=>{let t=(e+1)%k.length;return I&&k[t]&&I(k[t],t),t})},5e3);return()=>clearInterval(e)},[k,v,w,R,I]),(0,a.useEffect)(()=>{if(!R&&!v&&!w){let e=setTimeout(()=>{P(!0)},1e4);return()=>clearTimeout(e)}},[R,E,v,w]);let[H,q]=(0,a.useState)(0),M=(0,a.useRef)(null),X=(0,a.useRef)(null),L=(0,a.useRef)(null);(0,a.useEffect)(()=>(b||w?L.current||(console.log("Starting progress simulation..."),L.current=Date.now(),q(1),M.current=setInterval(()=>{let e,t=(Date.now()-(L.current||0))/1e3;q(Math.min(t<=30?1+t/30*49:t<=60?50+(t-30)/30*25:t<=90?75+(t-60)/30*15:t<=120?90+(t-90)/30*9:99,99))},200)):(console.log("Cleaning up progress simulation..."),M.current&&(clearInterval(M.current),M.current=null),X.current&&(clearInterval(X.current),X.current=null),L.current=null,q(0)),()=>{M.current&&clearInterval(M.current),X.current&&clearInterval(X.current)}),[b,w]),(0,a.useEffect)(()=>{(null==S?void 0:S.status)==="completed"&&(null==S?void 0:S.video_url)&&(q(100),M.current&&(clearInterval(M.current),M.current=null),X.current&&(clearInterval(X.current),X.current=null))},[null==S?void 0:S.status,null==S?void 0:S.video_url]);let Q=e=>{let{progress:t}=e;return(0,l.jsxs)("div",{className:"w-full space-y-3 px-2 sm:px-0",children:[(0,l.jsxs)("div",{className:"relative",children:[(0,l.jsx)("div",{className:"w-full bg-neutral-900 rounded-none h-1 sm:h-1.5 overflow-hidden",children:(0,l.jsxs)("div",{className:"bg-white h-1 sm:h-1.5 rounded-none transition-all duration-300 ease-out relative overflow-hidden",style:{width:"".concat(t,"%")},children:[(0,l.jsx)("div",{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"}),t>0&&(0,l.jsx)("div",{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent w-1/3 animate-shine"})]})}),t>0&&(0,l.jsx)("div",{className:"absolute inset-0 bg-white/20 rounded-none blur-sm -z-10",style:{width:"".concat(t,"%")}})]}),(0,l.jsxs)("div",{className:"text-center",children:[(0,l.jsxs)("div",{className:"text-base sm:text-lg lg:text-xl font-semibold text-white mb-2 shadow-sm",children:[(0,l.jsxs)("span",{className:"inline-block transition-all duration-300",children:[t.toFixed(1),"%"]}),(0,l.jsx)("span",{className:"text-gray-400 text-xs sm:text-sm ml-2 font-normal",children:"complete"})]}),(0,l.jsxs)("div",{className:"text-xs sm:text-sm text-gray-300 transition-all duration-500",children:[t<10&&(0,l.jsxs)("div",{className:"flex items-center justify-center space-x-1.5 sm:space-x-2",children:[(0,l.jsx)("div",{className:"animate-pulse text-base sm:text-lg",children:"\uD83D\uDE80"}),(0,l.jsx)("span",{children:"Initializing generation..."})]}),t>=10&&t<30&&(0,l.jsxs)("div",{className:"flex items-center justify-center space-x-1.5 sm:space-x-2",children:[(0,l.jsx)("div",{className:"animate-spin text-base sm:text-lg",children:"⚙️"}),(0,l.jsx)("span",{children:"Processing your request..."})]}),t>=30&&t<60&&(0,l.jsxs)("div",{className:"flex items-center justify-center space-x-1.5 sm:space-x-2",children:[(0,l.jsx)("div",{className:"animate-bounce text-base sm:text-lg",children:"\uD83C\uDFAC"}),(0,l.jsx)("span",{children:"Creating your video..."})]}),t>=60&&t<85&&(0,l.jsxs)("div",{className:"flex items-center justify-center space-x-1.5 sm:space-x-2",children:[(0,l.jsx)("div",{className:"animate-pulse text-base sm:text-lg",children:"✨"}),(0,l.jsx)("span",{children:"Adding final touches..."})]}),t>=85&&t<99&&(0,l.jsxs)("div",{className:"flex items-center justify-center space-x-1.5 sm:space-x-2",children:[(0,l.jsx)("div",{className:"animate-bounce text-base sm:text-lg",children:"\uD83C\uDFA8"}),(0,l.jsx)("span",{children:"Polishing your masterpiece..."})]}),t>=99&&t<100&&(0,l.jsxs)("div",{className:"flex items-center justify-center space-x-1.5 sm:space-x-2",children:[(0,l.jsx)("div",{className:"animate-spin text-base sm:text-lg",children:"⭐"}),(0,l.jsx)("span",{className:"text-yellow-400",children:"Almost ready! Finalizing..."})]})]})]}),t>0&&t<100&&(0,l.jsxs)("div",{className:"flex justify-center space-x-1",children:[(0,l.jsx)("div",{className:"w-1.5 h-1.5 sm:w-2 sm:h-2 bg-white rounded-full animate-bounce",style:{animationDelay:"0ms"}}),(0,l.jsx)("div",{className:"w-1.5 h-1.5 sm:w-2 sm:h-2 bg-white/70 rounded-full animate-bounce",style:{animationDelay:"150ms"}}),(0,l.jsx)("div",{className:"w-1.5 h-1.5 sm:w-2 sm:h-2 bg-white/40 rounded-full animate-bounce",style:{animationDelay:"300ms"}})]})]})},W=k&&k.length>1&&!v&&!w&&!b;return(0,l.jsxs)("div",{className:"h-full p-4 lg:p-6 overflow-hidden flex flex-col touch-p

1an-y",children:[(0,l.jsxs)("div",{className:"mb-3 lg:mb-4 flex items-center justify-between gap-2 flex-shrink-0",children:[(0,l.jsx)("p",{className:"text-sm sm:text-base lg:text-lg font-bold text-white tracking-tight truncate",children:"Video Preview"}),(0,l.jsxs)("div",{className:"flex items-center gap-2 sm:gap-3 flex-shrink-0",children:[(0,l.jsx)(f.Y,{url:D,type:"video",compact:!0,className:"flex items-center gap-1.5 border border-white/10 px-2 py-1.5 text-xs font-medium text-white hover:bg-white/5 sm:px-3 sm:py-2"}),W&&(0,l.jsxs)("div",{className:"text-xs text-gray-400 hidden sm:block",children:[E+1," / ",k.length]}),(0,l.jsxs)("button",{onClick:()=>_.push("/my-creations"),className:"group flex items-center justify-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 bg-transparent hover:bg-white/5 active:bg-white/10 border border-white/10 text-white transition-all duration-300 backdrop-blur-md rounded-none touch-manipulation uppercase text-[10px] tracking-wider font-semibold","aria-label":"View history",title:"View history",children:[(0,l.jsx)(u.A,{className:"w-4 h-4 sm:w-5 sm:h-5 transition-transform duration-300 group-hover:-rotate-12"}),(0,l.jsx)("span",{className:"hidden sm:inline text-sm font-medium",children:"History"})]})]})]}),(0,l.jsxs)("div",{className:"flex-1 flex flex-col w-full mx-auto relative overflow-hidden",style:{minHeight:0},children:[W&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("button",{onClick:V,className:"hidden sm:block absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 z-20 p-3 sm:p-4 rounded-full bg-black/40 hover:bg-black/60 active:bg-black/70 text-white backdrop-blur-md border border-white/10 shadow-lg transition-all duration-200 hover:scale-105 active:scale-95 group touch-manipulation","aria-label":"Previous template",children:(0,l.jsx)(o.A,{className:"w-5 h-5 sm:w-6 sm:h-6 text-white/80 group-hover:text-white"})}),(0,l.jsx)("button",{onClick:G,className:"hidden sm:block absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 z-20 p-3 sm:p-4 rounded-full bg-black/40 hover:bg-black/60 active:bg-black/70 text-white backdrop-blur-md border border-white/10 shadow-lg transition-all duration-200 hover:scale-105 active:scale-95 group touch-manipulation","aria-label":"Next template",children:(0,l.jsx)(m.A,{className:"w-5 h-5 sm:w-6 sm:h-6 text-white/80 group-hover:text-white"})})]}),(0,l.jsx)("div",{className:"w-full flex-1 bg-black rounded-lg flex items-center justify-center relative overflow-hidden",style:{minHeight:0},onTouchStart:e=>{z.current=e.touches[0].clientX},onTouchMove:e=>{T.current=e.touches[0].clientX},onTouchEnd:()=>{if(!W)return;let e=z.current-T.current;Math.abs(e)>50&&(e>0?G():V())},children:(()=>{if(v||(null==S?void 0:S.video_url)){let e=v||(null==S?void 0:S.video_url);if(e)return(0,l.jsx)("video",{src:e,controls:!0,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,className:"w-full h-full rounded-lg object-contain"})}if(b&&(w||C||S))return(0,l.jsxs)("div",{className:"flex flex-col items-center justify-center text-gray-400 space-y-3 sm:space-y-4 p-4 sm:p-6",children:[(0,l.jsxs)("div",{className:"flex flex-col items-center space-y-2 sm:space-y-3",children:[(null==S?void 0:S.status)==="pending"&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r.A,{className:"w-10 h-10 sm:w-12 sm:h-12 text-yellow-400"}),(0,l.jsx)("span",{className:"text-base sm:text-lg font-medium text-center",children:"Queued for processing..."})]}),(null==S?void 0:S.status)==="processing"&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.A,{className:"w-10 h-10 sm:w-12 sm:h-12 animate-spin text-blue-400"}),(0,l.jsx)("span",{className:"text-base sm:text-lg font-medium text-center",children:"Generating video..."})]}),(null==S?void 0:S.status)==="completed"&&!S.video_url&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i.A,{className:"w-10 h-10 sm:w-12 sm:h-12 text-green-400"}),(0,l.jsx)("span",{className:"text-base sm:text-lg font-medium text-center",children:"Video completed, processing..."})]}),(null==S?void 0:S.status)==="failed"&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(c.A,{className:"w-10 h-10 sm:w-12 sm:h-12 text-red-400"}),(0,l.jsx)("span",{className:"text-base sm:text-lg font-medium text-center",children:"Generation failed"}),(A||S.error_message)&&(0,l.jsx)("span",{className:"text-xs sm:text-sm text-red-300 text-center max-w-xs px-4",children:A||S.error_message})]}),!S&&w&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.A,{className:"w-10 h-10 sm:w-12 sm:h-12 animate-spin"}),(0,l.jsx)("span",{className:"text-base sm:text-lg font-medium text-center",children:"Submitting request..."})]})]}),((null==S?void 0:S.status)==="pending"||(null==S?void 0:S.status)==="processing"||!S&&w)&&(0,l.jsx)("div",{className:"w-full max-w-lg px-2 sm:px-0",children:(0,l.jsx)(Q,{progress:H})}),S&&(0,l.jsxs)("div",{className:"text-xs text-gray-500 text-center space-y-0.5 sm:space-y-1 mt-2 sm:mt-4 px-4",children:[(0,l.jsxs)("p",{children:["Generation ID: ",S.id.slice(0,8),"..."]}),(0,l.jsxs)("p",{children:["Status: ",(0,l.jsx)("span",{className:"capitalize",children:S.status})]}),S.created_at&&(0,l.jsxs)("p",{children:["Started: ",new Date(S.created_at).toLocaleTimeString()]})]})]});if(w)return(0,l.jsxs)("div",{className:"flex flex-col items-center justify-center text-gray-400 space-y-3 sm:space-y-4 p-4 sm:p-6",children:[(0,l.jsxs)("div",{className:"flex flex-col items-center space-y-2 sm:space-y-3",children:[(0,l.jsx)(n.A,{className:"w-10 h-10 sm:w-12 sm:h-12 animate-spin"}),(0,l.jsx)("span",{className:"text-base sm:text-lg font-medium text-center",children:"Submitting request..."})]}),b&&(0,l.jsx)("div",{className:"w-full max-w-lg px-2 sm:px-0",children:(0,l.jsx)(Q,{progress:H})})]});if(j)return(0,l.jsx)(x.N,{mode:"wait",children:(0,l.jsx)(h.P.video,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.5},src:j,controls:!0,autoPlay:!0,loop:!0,muted:!0,playsInline:!0,className:"w-full h-full object-contain"},j)});switch(t){case"start_image":if(s.image)return(0,l.jsx)("img",{src:s.image.preview,alt:"Start image preview",className:"w-auto h-full object-cover rounded-lg"});break;case"between_images":if(p.startImage&&p.endImage)return(0,l.jsxs)("div",{className:"w-full h-full flex rounded-lg overflow-hidden",children:[(0,l.jsx)("img",{src:p.startImage.preview,alt:"Start image",className:"w-1/2 h-full max-w-1/2 object-cover"}),(0,l.jsx)("img",{src:p.endImage.preview,alt:"End image",className:"w-1/2 h-full max-w-1/2 object-cover"})]});if(p.startImage)return(0,l.jsx)("img",{src:p.startImage.preview,alt:"Start image preview",className:"w-auto h-full max-w-1/2 object-cover rounded-lg"});break;case"reference_images":if(g.referenceImages.length>0)return(0,l.jsx)("div",{className:"w-full h-full grid grid-cols-2 gap-2 rounded-lg overflow-hidden",children:g.referenceImages.slice(0,4).map((e,t)=>(0,l.jsx)("img",{src:e.preview,alt:"Reference ".concat(t+1),className:"w-full h-full object-cover"},t))})}return(0,l.jsx)("div",{className:"w-full h-full bg-neutral-900 rounded-none flex items-center justify-center border border-white/5",children:(0,l.jsxs)("div",{className:"flex flex-col items-center justify-center text-neutral-600 gap-2",children:[(0,l.jsx)("div",{className:"w-12 h-12 border border-neutral-700/50 rounded-full flex items-center justify-center",children:(0,l.jsx)("div",{className:"w-4 h-4 bg-neutral-700/50 rounded-sm"})}),(0,l.jsx)("span",{className:"text-xs font-medium uppercase tracking-widest text-neutral-500",children:"Preview Area"})]})})})()}),W&&(0,l.jsx)("div",{className:"flex justify-center items-center gap-2 mt-3 sm:mt-4",children:k.map((e,t)=>(0,l.jsx)("button",{style:{minHeight:44,minWidth:44},onClick:()=>{P(!1),F(t),I&&k[t]&&I(k[t],t)},className:"flex items-center justify-center cursor-pointer touch-manipulation group","aria-label":"Go to template ".concat(t+1),children:(0,l.jsx)("div",{className:"transition-all duration-500 rounded-full ".concat(t===E?"w-6 sm:w-8 h-1.5 sm:h-2 bg-white shadow-[0_0_10px_rgba(255,255,255,0.4)]":"w-1.5 h-1.5 sm:w-2 sm:h-2 bg-white/20 group-hover:bg-white/40")})},t))})]})]})}}}]);