https://vidmax.ai/assets/render-lab-hYCmXQKM.js

1import{kz as se,kF as re,iW as N,k5 as g,hZ as e,r as w,fg as R,iq as te,k9 as ae,i8 as ie,jS as L}from"./index-D04aio-r.js";import{a as ne,t as oe}from"./zod-geqXdhPU.js";import{C as de}from"./CustomHead-B5FxR42g.js";import{S as le}from"./SuperAdminLayout-BMj79Isy.js";import{H as ce}from"./history-BJdgJYLs.js";import{P as H}from"./play-Bto7UoTE.js";import{L as D}from"./loader-circle-BkB7gI4t.js";import{E as K}from"./external-link-B4CYbvjk.js";import{C as U}from"./circle-alert-WnyPIyXg.js";import{R as me}from"./rotate-ccw-DImrrVfl.js";import{C as xe}from"./circle-check-wUorRawK.js";import{a as S,b as l}from"./ShadcnToggleGroup-B8M4xRy_.js";import{C as V,d as Q,e as Y,a as G}from"./ShadcnCard-B1kp8rMd.js";import{S as m}from"./ShadcnSkeleton-DSmN0vHW.js";import{F as pe,c as k,d as A,e as y,a as M,f as T}from"./ShadcnForm-BNKupssf.js";import{I as z}from"./Input-DHyEO0-w.js";import{B as Z}from"./ShadcnBadge-bx-Pzfol.js";import{R as ue}from"./ReactVideoPlayer-C4T2ZAlc.js";import"./Logo-BWgbhxtJ.js";import"./AppLayout-Szr5jlpX.js";import"./index.min-DqM6n_B9.js";import"./GradientBackground-CE4URicP.js";import"./useScreenSize-BEPGl4iJ.js";import"./PageLoading-BBgE9Zdd.js";import"./ShadcnSidebar-CcFML6pV.js";import"./ShadcnSeparator-Cywnz346.js";import"./AixDrawerSwitcher-D41cYW5q.js";import"./_isIterateeCall-DtjUgCb3.js";import"./clock-CjwqgSVJ.js";import"./draftJotai-DQYuv8fM.js";import"./ShadcnCheckbox-92pAQifO.js";import"./check-B_z0h917.js";import"./ShadcnLabel-MragvuuG.js";import"./ShadcnDropDownMenu-CDosLHU_.js";import"./chevron-right-Dl6YQr4T.js";import"./index-CxeoeHDb.js";import"./index-CGdagJvn.js";import"./ShadcnTextarea-Cwm6ln5J.js";import"./TopUpModal-A-E0v9Cy.js";import"./subscription-C8Q96QLQ.js";import"./crypto-BX1xTAsC.js";import"./stripe.esm-dkXHr68O.js";import"./Tooltip-B1bz1H2k.js";import"./isNil-CHIgUVhi.js";import"./prismaTypings-DW8Hx9Vn.js";import"./chevron-down-i3Wj6aME.js";import"./find-CVDvtCjo.js";import"./send-Ct-BUx38.js";import"./index-CBMyeA0S.js";import"./ShadcnTabs-B9RDPswh.js";import"./ShadcnTable-D0ANkqxE.js";import"./index-DYvv3epU.js";import"./coerce-B8myVSW-.js";import"./index-CZkcpfv6.js";import"./index-CnJWVjh6.js";import"./index-Cl-odbD8.js";import"./index-DEbtbRBY.js";var o=(s=>(s.REMOTION="remotion",s.HYPERFRAMES="hyperframes",s))(o||{});const he=5e3,ge=te({headline:L().trim().min(1,"Add a product headline.").max(120),accentColor:L().trim().regex(/^#[0-9a-fA-F]{6}$/,"Use a six-digit hex color."),productImageKey:ae([ie(""),L().trim().min(1).max(1024)]).refine(s=>s===""||!s.includes("://")&&!s.startsWith("/")&&!s.split("/").some(a=>a==="."||a==="..")&&/^[A-Za-z0-9][A-Za-z0-9._/()'!-]*$/.test(s),"Enter a valid R2 object key.")}),fe={headline:"A better way to make product videos",accentColor:"#7C3AED",productImageKey:""},P={[o.HYPERFRAMES]:"HyperFrames",[o.REMOTION]:"Remotion"},C=s=>s.status==="RENDERING",W=s=>s.status==="RENDERED",O=s=>s.status==="RENDER_FAILED",je=s=>s.some(C),be=s=>C(s)?{Icon:D,label:"Rendering"}:O(s)?{Icon:U,label:"Render failed"}:W(s)?{Icon:xe,label:"Complete"}:{Icon:H,label:s.status},ve=s=>{const a=new Date(s);return Number.isNaN(a.getTime())?"Unknown time":new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(a)},Ne=s=>s==null||s<=0?null:`${(s/1024/1024).toFixed(1)} MB`,ye=s=>s==="both"?[o.HYPERFRAMES,o.REMOTION]:[s];function q({card:s}){const a=C(s),d=O(s),t=W(s),{Icon:n,label:x}=be(s);return e.jsxs(Z,{variant:"secondary",className:R("gap-1.5 font-medium",a&&"bg-muted text-foreground",d&&"bg-destructive/10 text-destructive",t&&"bg-primary/10 text-primary"),children:[e.jsx(n,{className:R("size-3.5",a&&"animate-spin")}),x]})}function we({card:s,onRetry:a,retrying:d}){const t=s.renderingMisc?.videoUrl,n=s.renderingMisc?.errors?.[0],x=Ne(s.renderingMisc?.fileSizeInBytes),p=s.renderingMisc?.videoDurationSec,u=O(s);return e.jsxs(V,{className:"overflow-hidden border-border/80 bg-card shadow-sm transition-shadow hover:shadow-md",children:[e.jsxs(Q,{className:"space-y-3 pb-4",children:[e.jsxs("div",{className:"flex items-start justify-between gap-3",children:[e.jsxs("div",{className:"space-y-1",children:[e.jsx(Y,{className:"font-heading text-lg tracking-tight",children:P[s.renderEngine]}),e.jsxs("p",{className:"text-xs text-muted-foreground",children:["Created ",ve(s.createdAt)]})]}),e.jsx(q,{card:s})]}),e.jsxs("div",{className:"flex flex-wrap gap-2 text-xs text-muted-foreground",children:[p!=null&&e.jsxs("span",{className:"rounded-full bg-muted px-2 py-1",children:[p.toFixed(1)," sec"]}),x&&e.jsx("span",{className:"rounded-full bg-muted px-2 py-1",children:x})]})]}),e.jsxs(G,{className:"space-y-4",children:[t?e.jsx("div",{className:"aspect-[9/16] overflow-hidden rounded-lg bg-muted",children:e.jsx(ue,{url:t,customControls:!0,className:"h-full w-full rounded-none bg-transparent shadow-none"})}):e.jsxs("div",{className:"flex aspect-[9/16] flex-col items-center justify-center gap-3 rounded-lg border border-dashed bg-muted/40 p-6 text-center",children:[u?e.jsx(U,{className:"size-8 text-destructive"}):e.jsx(D,{className:R("size-8 text-primary",C(s)&&"animate-spin")}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium",children:u?"This renderer stopped":"Saved MP4 will appear here"}),e.jsx("p",{className:"mt-1 text-xs leading-relaxed text-muted-foreground",children:u?"Retry this renderer without changing its persisted configuration.":"The page refreshes only while this comparison is active."})]})]}),n&&e.jsxs("div",{className:"rounded-lg border border-destructive/20 bg-destructive/5 p-3 text-sm text-destructive",children:[e.jsx("p",{className:"font-medium",children:"Render error"}),e.jsx("p",{className:"mt-1 break-words text-xs leading-relaxed",children:n})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[u&&e.jsxs(w,{type:"button",size:"sm",variant:"outline",loading:d,onClick:()=>

1a(s.id),children:[e.jsx(me,{className:"mr-1.5 size-3.5"}),"Retry"]}),t&&e.jsxs(e.Fragment,{children:[e.jsx(w,{type:"button",size:"sm",variant:"outline",asChild:!0,children:e.jsxs("a",{href:t,target:"_blank",rel:"noreferrer",children:[e.jsx(K,{className:"mr-1.5 size-3.5"}),"Open"]})}),e.jsx(w,{type:"button",size:"sm",variant:"secondary",asChild:!0,children:e.jsx("a",{href:t,download:!0,children:"Download MP4"})})]})]})]})]})}function Re({cards:s,onRetry:a,retrying:d}){return s.length===0?e.jsx("p",{className:"rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground",children:"No renderer rows returned."}):e.jsx("div",{className:"grid grid-cols-1 gap-4 lg:grid-cols-2",children:s.map(t=>e.jsx(we,{card:t,onRetry:a,retrying:d},t.id))})}function Ce(){const s=se(),a=re({from:"/admin/render-lab"}),d=a.view??"create",t=a.comparisonId,[n,x]=N.useState("both"),[p,u]=N.useState("all"),b=g.adminRenderLab.templates.useQuery(),h=g.adminRenderLab.getComparison.useQuery({comparisonId:t??""},{enabled:t!=null}),f=g.adminRenderLab.list.useQuery(p==="all"?{}:{engine:p}),E=g.useUtils(),j=g.adminRenderLab.create.useMutation({onSuccess:({comparisonId:r})=>{E.adminRenderLab.list.invalidate(),s({to:"/admin/render-lab",search:{view:"create",comparisonId:r}})}}),B=g.adminRenderLab.retry.useMutation({onSuccess:()=>{E.adminRenderLab.getComparison.invalidate(),E.adminRenderLab.list.invalidate()}}),c=ne({resolver:oe(ge),defaultValues:fe}),i=b.data?.templates[0],_=h.data?.videos??[],I=je(_);N.useEffect(()=>{i&&c.reset({headline:i.defaults.headline,accentColor:i.defaults.accentColor,productImageKey:i.defaults.productImageKey??""})},[c,i]),N.useEffect(()=>{if(!I)return;const r=window.setInterval(()=>{h.refetch()},he);return()=>window.clearInterval(r)},[h.refetch,I]);const J=r=>{s({to:"/admin/render-lab",search:F=>({...F,view:r})})},X=r=>{s({to:"/admin/render-lab",search:{view:"history",comparisonId:r}})},ee=r=>{i&&j.mutate({templateId:i.id,engines:ye(n),headline:r.headline,accentColor:r.accentColor,productImageKey:r.productImageKey||void 0})};return e.jsxs(le,{children:[e.jsx(de,{title:"Renderer Lab"}),e.jsx("main",{className:"h-full overflow-auto bg-background",children:e.jsxs("div",{className:"mx-auto flex w-full max-w-7xl flex-col gap-6 p-4 sm:p-6 lg:p-8",children:[e.jsxs("header",{className:"flex flex-col gap-4 border-b pb-6 sm:flex-row sm:items-end sm:justify-between",children:[e.jsxs("div",{className:"max-w-2xl space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2 text-sm font-medium text-primary",children:[e.jsx(ce,{className:"size-4"}),"Admin development"]}),e.jsx("h1",{className:"font-heading text-3xl font-semibold tracking-tight",children:"Renderer Lab"}),e.jsx("p",{className:"leading-relaxed text-muted-foreground",children:"Render one deterministic product fixture through HyperFrames, Remotion, or both—then compare the saved MP4s."})]}),e.jsxs(S,{type:"single",variant:"outline",value:d,onValueChange:r=>r&&J(r),children:[e.jsx(l,{value:"create",className:"px-4",children:"Create"}),e.jsx(l,{value:"history",className:"px-4",children:"History"})]})]}),d==="create"?e.jsxs("div",{className:"grid items-start gap-6 xl:grid-cols-[minmax(0,360px)_minmax(0,1fr)]",children:[e.jsxs(V,{className:"border-border/80 shadow-sm",children:[e.jsxs(Q,{children:[e.jsx(Y,{className:"font-heading text-xl tracking-tight",children:"Fixture settings"}),e.jsx("p",{className:"text-sm leading-relaxed text-muted-foreground",children:i?`${i.label} · ${i.width}×${i.height} · ${i.fps} fps`:"Loading the versioned fixture…"})]}),e.jsx(G,{children:b.isLoading?e.jsxs("div",{className:"space-y-4",children:[e.jsx(m,{className:"h-9 w-full"}),e.jsx(m,{className:"h-9 w-full"}),e.jsx(m,{className:"h-9 w-full"})]}):b.isError?e.jsxs("div",{className:"rounded-lg border border-destructive/20 bg-destructive/5 p-4 text-sm text-destructive",children:[e.jsx("p",{className:"font-medium",children:"Fixture unavailable"}),e.jsx("p",{className:"mt-1 text-xs leading-relaxed",children:b.error.message})]}):e.jsx(pe,{...c,children:e.jsxs("form",{className:"space-y-5",onSubmit:c.handleSubmit(ee),children:[e.jsx(k,{control:c.control,name:"headline",render:({field:r})=>e.jsxs(A,{children:[e.jsx(y,{children:"Headline"}),e.jsx(M,{children:e.jsx(z,{placeholder:"Product headline",maxLength:120,...r})}),e.jsx(T,{})]})}),e.jsx(k,{control:c.control,name:"accentColor",render:({field:r})=>e.jsxs(A,{children:[e.jsx(y,{children:"Accent color"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(M,{children:e.jsx(z,{className:"font-mono",placeholder:"#7C3AED",...r})}),e.jsx("input",{"aria-label":"Accent color picker",className:"h-10 w-12 shrink-0 cursor-pointer rounded-md border bg-background p-1",type:"color",value:r.value,onChange:r.onChange})]}),e.jsx(T,{})]})}),e.jsx(k,{control:c.control,name:"productImageKey",render:({field:r})=>e.jsxs(A,{children:[e.jsxs(y,{children:["Product image R2 key ",e.jsx("span",{className:"text-muted-foreground",children:"(optional)"})]}),e.jsx(M,{children:e.jsx(z,{placeholder:"products/example.png",...r})}),e.jsx(T,{})]})}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(y,{children:"Renderer"}),e.jsxs(S,{type:"single",variant:"outline",value:n,className:"grid w-full grid-cols-3",onValueChange:r=>r&&x(r),children:[e.jsx(l,{value:"both",children:"Both"}),e.jsx(l,{value:o.HYPERFRAMES,children:"HyperFrames"}),e.jsx(l,{value:o.REMOTION,children:"Remotion"})]})]}),j.isError&&e.jsx("div",{className:"rounded-lg border border-destructive/20 bg-destructive/5 p-3 text-sm text-destructive",children:j.error.message}),e.jsxs(w,{type:"submit",className:"w-full",loading:j.isLoading,disabled:!i||j.isLoading,children:[e.jsx(H,{className:"mr-1.5 size-4"}),"Render ",n==="both"?"both engines":P[n]]})]})})})]}),e.jsxs("section",{className:"space-y-4","aria-live":"polite",children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"font-heading text-xl font-semibold tracking-tight",children:"Comparison output"}),e.jsx("p",{className:"mt-1 text-sm text-muted-foreground",children:t?`Comparison ${t}`:"Submit a fixture to start a comparison."})]}),I&&e.jsxs(Z,{variant:"secondary",className:"gap-1.5 bg-primary/10 text-primary",children:[e.jsx(D,{className:"size-3.5 animate-spin"}),"Refreshing every 5 seconds"]})]}),t?h.isLoading?e.jsxs("div",{className:"grid grid-cols-1 gap-4 lg:grid-cols-2",children:[e.jsx(m,{className:"h-[520px]"}),e.jsx(m,{className:"h-[520px]"})]}):h.isError?e.jsxs("div",{className:"rounded-xl border border-destructive/20 bg-destructive/5 p-5 text-sm text-destructive",children:[e.jsx("p",{className:"font-medium",children:"Could not load this comparison"}),e.jsx("p",{className:"mt-1 text-xs leading-relaxed",children:h.error.message})]}):e.jsx(Re,{cards:_,onRetry:r=>B.mutate({videoId:r}),retrying:B.isLoading}):e.jsxs("div",{className:"flex min-h-[340px] flex-col items-center justify-center rounded-xl border border-dashed bg-muted/20 p-8 text-center",children:[e.jsx(H,{className:"size-9 text-primary"}),e.jsx("h3",{className:"mt-4 font-heading text-lg font-semibold",children:"Choose a renderer path"}),e.jsx("p",{className:"mt-2 max-w-sm text-sm leading-relaxed text-muted-foreground",children:"Both creates two independent rows, so one failure never hides the other renderer’s saved output."})]})]})]}):e.jsxs("section",{className:"space-y-5",children:[e.jsxs("div",{className:"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"font-heading text-2xl font-semibold tracking-tight",children:"Recent comparisons"}),e.jsx("p",{className:"mt-1 text-sm text-muted-foreground",children:"Choose a group to load its current renderer state."})]}),e.jsxs(S,{type:"single",variant:"outline",value:p,onValueChange:r=>r&&u(r),children:[e.jsx(l,{value:"all",children:"All"}),e.jsx(l,{value:o.HYPERFRAMES,children:"HyperFrames"}),e.jsx(l,{value:o.REMOTION,children:"Remotion"})]})]}),f.isLoading?e.jsxs("div",{className:"space-y-3",children:[e.jsx(m,{className:"h-20 w-full"}),e.jsx(m,{className:"h-20 w-full"})]}):f.isError?e.jsx("div",{className:"rounded-xl border border-destructive/20 bg-destructive/5 p-5 text-sm text-destructive",children:f.error.message}):f.data?.comparisons.length===0?e.jsx("div",{className:"rounded-xl border border-dashed bg-muted/20 p-10 text-center text-sm text-muted-foreground",children:"No comparisons match this filter yet."}):e.jsx("div",{className:"space-y-3",children:f.data?.comparisons.map(r=>{const F=r.comparisonId===t,$=r.videos;return e.jsxs("button",{type:"button",onClick:()=>

1X(r.comparisonId),className:R("flex w-full flex-col gap-4 rounded-xl border bg-card p-4 text-left shadow-sm transition sm:flex-row sm:items-center sm:justify-between",F?"border-primary ring-1 ring-primary":"border-border/80 hover:border-primary/50 hover:shadow-md"),children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:"truncate font-mono text-sm font-medium",children:r.comparisonId}),e.jsx("p",{className:"mt-1 text-sm text-muted-foreground",children:$.map(v=>P[v.renderEngine]).join(" · ")})]}),e.jsxs("div",{className:"flex shrink-0 flex-wrap items-center gap-2",children:[$.map(v=>e.jsx(q,{card:v},v.id)),e.jsx(K,{className:"ml-1 size-4 text-muted-foreground"})]})]},r.comparisonId)})})]})]})})]})}const Ls=Ce;export{Ls as component};
2//# sourceMappingURL=render-lab-hYCmXQKM.js.map