https://upnorthdigital.ai/_next/static/chunks/2182.c2eda92f1763bd43.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2182],{2182:(e,r,t)=>{t.r(r),t.d(r,{GifExportModal:()=>l});var n=t(95155),a=t(12115);function l(e){let{isOpen:r,onClose:t,onCapture:l}=e,s=(0,a.useRef)(null),[o,d]=(0,a.useState)("idle"),[i,c]=(0,a.useState)(0),[u,x]=(0,a.useState)(null),m=(0,a.useRef)({cancelled:!1}),g="capturing"===o||"encoding"===o;(0,a.useEffect)(()=>{let e=s.current;e&&(r&&!e.open?e.showModal():!r&&e.open&&e.close())},[r]),(0,a.useEffect)(()=>{r&&(d("idle"),c(0),x(null),m.current={cancelled:!1})},[r]),(0,a.useEffect)(()=>{let e=s.current;if(!e)return;let r=()=>{if(g){m.current.cancelled=!0,e.open||e.showModal();return}t()};return e.addEventListener("close",r),()=>e.removeEventListener("close",r)},[t,g]),(0,a.useEffect)(()=>{let e=s.current;if(!e)return;let r=e=>{g&&(e.preventDefault(),m.current.cancelled=!0)};return e.addEventListener("cancel",r),()=>e.removeEventListener("cancel",r)},[g]);let b=(0,a.useCallback)((e,r)=>{c(e),d("capture"===r?"capturing":"encoding")},[]),h=(0,a.useCallback)(async()=>{m.current={cancelled:!1},d("capturing"),c(0),x(null);try{let e=await l(b,m.current);e.ok?(d("done"),c(1)):"Cancelled"===e.reason?(d("idle"),c(0)):(d("error"),x(e.reason))}catch(e){d("error"),x(e instanceof Error?e.message:String(e))}},[l,b]),p=()=>{m.current.cancelled=!0},y=Math.round(90*i),f=Math.round(100*i);return(0,n.jsxs)("dialog",{ref:s,className:"bg-gray-950 text-white border border-gray-800 rounded-lg p-0 backdrop:bg-black/80 max-w-md w-[90vw]",onClick:e=>{e.target!==s.current||g||t()},children:[(0,n.jsxs)("div",{className:"sticky top-0 bg-gray-950 border-b border-gray-800 px-6 py-4 flex items-center justify-between z-10",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("h2",{className:"text-lg font-medium",children:"Export animated GIF"}),(0,n.jsx)("div",{className:"text-xs text-gray-400 mt-1",children:"3-second clip, downscaled to 256\xd7256."})]}),(0,n.jsx)("button",{type:"button",onClick:()=>{if(g){m.current.cancelled=!0;return}t()},className:"text-gray-400 hover:text-white text-2xl leading-none px-2 min-h-9","aria-label":g?"Cancel capture":"Close GIF exp

1ort modal",children:"\xd7"})]}),(0,n.jsxs)("div",{className:"px-6 py-4 space-y-4",children:["idle"===o&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{className:"text-sm text-gray-300 leading-relaxed",children:["Capture a 3-second animated GIF of your simulation. The GIF will be downscaled to 256\xd7256 and downloaded as a"," ",(0,n.jsx)("code",{className:"text-xs text-gray-400",children:".gif"})," file."]}),(0,n.jsx)("p",{className:"text-xs text-gray-500",children:"The simulation may briefly stutter during capture — this is expected. The 3-second window captures 90 frames at 30fps."}),(0,n.jsx)("button",{type:"button",onClick:h,className:"w-full px-4 py-2 rounded text-sm font-medium bg-blue-900/50 border border-blue-700 text-blue-100 hover:bg-blue-900/70 transition-colors min-h-11 sm:min-h-9",children:"\uD83C\uDF9E️ Start Capture"})]}),"capturing"===o&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{className:"text-sm text-gray-300",children:["Capturing ",y," / ",90," frames…"]}),(0,n.jsx)("div",{className:"w-full h-2 bg-gray-800 rounded overflow-hidden",role:"progressbar","aria-valuemin":0,"aria-valuemax":90,"aria-valuenow":y,"aria-label":"Capture progress",children:(0,n.jsx)("div",{className:"h-full bg-blue-500 transition-all duration-75",style:{width:"".concat(f,"%")}})}),(0,n.jsx)("button",{type:"button",onClick:p,className:"w-full px-4 py-2 rounded text-sm font-medium bg-gray-800 border border-gray-700 text-gray-200 hover:bg-gray-700 transition-colors min-h-11 sm:min-h-9",children:"Cancel"})]}),"encoding"===o&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("p",{className:"text-sm text-gray-300",children:"Encoding GIF…"}),(0,n.jsx)("div",{className:"w-full h-2 bg-gray-800 rounded overflow-hidden",role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":f,"aria-label":"Encoding progress",children:(0,n.jsx)("div",{className:"h-full bg-blue-500 transition-all duration-150",style:{width:"".concat(Math.max(10,f),"%")}})}),(0,n.jsx)("button",{type:"button",onClick:p,className:"w-full px-4 py-2 rounded text-sm font-medium bg-gray-800 border border-gray-700 text-gray-200 hover:bg-gray-700 transition-colors min-h-11 sm:min-h-9",children:"Cancel"})]}),"done"===o&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"bg-green-900/30 border border-green-800 text-green-200 text-sm px-3 py-3 rounded",children:"✓ GIF downloaded!"}),(0,n.jsxs)("div",{className:"flex gap-2",children:[(0,n.jsx)("button",{type:"button",onClick:()=>{d("idle"),c(0),x(null)},className:"flex-1 px-4 py-2 rounded text-sm font-medium bg-gray-800 border border-gray-700 text-gray-200 hover:bg-gray-700 transition-colors min-h-11 sm:min-h-9",children:"Capture Another"}),(0,n.jsx)("button",{type:"button",onClick:t,className:"flex-1 px-4 py-2 rounded text-sm font-medium bg-blue-900/50 border border-blue-700 text-blue-100 hover:bg-blue-900/70 transition-colors min-h-11 sm:min-h-9",children:"Close"})]})]}),"error"===o&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:"bg-red-900/30 border border-red-800 text-red-200 text-xs px-3 py-2 rounded",children:["GIF export failed: ",null!=u?u:"Unknown error"]}),(0,n.jsx)("button",{type:"button",onClick:()=>{d("idle"),c(0),x(null)},className:"w-full px-4 py-2 rounded text-sm font-medium bg-gray-800 border border-gray-700 text-gray-200 hover:bg-gray-700 transition-colors min-h-11 sm:min-h-9",children:"Try Again"})]})]})]})}}}]);