https://mstudio.ai/build/assets/PreviewPanel.DJ9O7shr.js

1import{r as O}from"./rolldown-runtime.C1f3BsDW.js";import"./inertia.BE4YqsTM.js";import"./http.DWpeO7Ui.js";import{B as le,Ln as ce,Nr as de,Qr as me,V as ue,d as he,f as xe,gt as pe,i as ge,ut as fe}from"./icons.ChOq_Y4q.js";import{t as ve}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import"./state.L8kQliOB.js";import{It as H,Nt as we,Ot as be,bt as R,j as S,jt as B,zt as X}from"./entry-client.DX3aUoe5.js";import"./segmented.DHcH2lTJ.js";import"./badge.CK53iWwP.js";import"./switch.D3Vh3rjF.js";import"./projectStore.B74RetxK.js";import{c as ye,i as je,u as Ne}from"./shotMedium.DYKLpru1.js";import{t as ke}from"./AnimationShotParts.B3fNwJfT.js";import{t as Me}from"./VidstackPlayer.CObwjGn4.js";import{r as _e}from"./sceneAudio.Do-Wp-E3.js";import{o as Se}from"./transitionConfig.CdUOd4v5.js";import{n as Ie,t as Ee}from"./useFrameTransition.CCyvsxSP.js";var n=O(me(),1),e=O(ve(),1),Te={short:1,medium:2,long:3};function Ce(a,c,o,g){const f=Math.min(g,a?.length??0);if(f<=1||o<=0)return 0;const v=(a??[]).slice(0,f).map(s=>s.seconds&&s.seconds>0?s.seconds:Te[s.time_hint??"medium"]??2),y=v.reduce((s,d)=>s+d,0),h=Math.max(0,Math.min(.999,c/o));let x=0;for(let s=0;s<v.length;s++)if(x+=v[s]/y,h<x)return s;return v.length-1}function Fe({frame:a,imageUrl:c,offsetSeconds:o,playing:g,alt:f,splitGrid:v=!1}){const y=a.active_version?.data,h=y?.storyboard_layout,x=y?.panels,s=Math.max(1,h?.cols??1),d=Math.max(1,h?.rows??1),j=Math.min(s*d,x?.length??h?.scene_count??1),u=y?.image_kind==="storyboard"&&s*d>1&&j>1,[I,k]=(0,n.useState)(16/9),w=(0,n.useMemo)(()=>u?Ce(x,o,a.duration_seconds,j):0,[u,x,o,a.duration_seconds,j]);if(!u||!g||!v)return(0,e.jsx)("img",{src:c,alt:f,className:"max-w-full max-h-full object-contain",onLoad:M=>{const b=M.currentTarget;b.naturalWidth&&b.naturalHeight&&k(b.naturalWidth/b.naturalHeight)}});const W=w%s,E=Math.floor(w/s),p=1.025,T=(1/(2*s*p)-(W+.5)/s)*100,C=(1/(2*d*p)-(E+.5)/d)*100;return(0,e.jsxs)("div",{className:"relative max-w-full max-h-full w-full overflow-hidden",style:{aspectRatio:`${I*d/s}`},"data-animatic-panel":w+1,children:[(0,e.jsx)("img",{src:c,decoding:"async",alt:`${f}, panel ${w+1}`,className:B("absolute left-0 top-0 h-full w-full max-w-none object-cover","transition-transform duration-150 ease-out motion-reduce:transition-none"),style:{width:`${s*p*100}%`,height:`${d*p*100}%`,transform:`translate(${T}%, ${C}%)`}}),(0,e.jsxs)("span",{className:"absolute bottom-2 right-2 rounded bg-black/60 px-1.5 py-0.5 font-mono text-[10px] text-white/80",children:[w+1," / ",j]})]})}var q=280,V=800,L=420,Y="storyboard-preview-panel-width",K="storyboard-preview-split-grid",Le=()=>{if(typeof window>"u")return L;const a=R.getItem(Y);if(!a)return L;const c=parseInt(a,10);return isNaN(c)?L:Math.max(q,Math.min(V,c))},Re=()=>R.getItem(K)==="1";const Ze=({frames:a,currentTime:c,isPlaying:o,totalDuration:g,masterVolume:f,onPlay:v,onPause:y,onTimeChange:h,onMasterVolumeChange:x,onVideoBuffering:s,onClose:d,gradeFilter:j}

1)=>{const u=(0,n.useRef)(null),I=(0,n.useRef)(-1),[k,w]=(0,n.useState)(L),[W,E]=(0,n.useState)(!0),p=(0,n.useRef)(!1),T=(0,n.useRef)(0),C=(0,n.useRef)(0),M=(0,n.useRef)(k);M.current=k,(0,n.useEffect)(()=>{if(typeof window>"u")return;w(Le()),E(window.innerWidth>=1024);const t=window.matchMedia("(min-width: 1024px)"),r=m=>E(m.matches);return t.addEventListener("change",r),()=>t.removeEventListener("change",r)},[]);const{frameStartTimes:b}=(0,n.useMemo)(()=>be(a),[a]),i=(0,n.useMemo)(()=>we(a,c),[a,c]),N=Ee(a,i);(0,n.useEffect)(()=>{if(!o)return;const t=a[i+1];if(!t)return;const{imageUrl:r}=X(t);if(!r)return;const m=new Image;return m.decoding="async",m.src=r,m.decode?.().catch(()=>{}),()=>{m.src=""}},[a,i,o]);const l=a[i]??null,{hasVideo:_,hasImage:Q,videoUrl:G,imageUrl:U,videoTrimStartMs:$}=X(l),D=$/1e3,z=c-(b[i]??0);(0,n.useEffect)(()=>{!_||!u.current||(o?u.current.play():u.current.pause())},[o,_,i]),(0,n.useEffect)(()=>{if(!_||!u.current)return;const t=I.current!==i;I.current=i,(t||!o)&&u.current.seek(D+z)},[i,_,D,z,o]);const J=(0,n.useCallback)(t=>{t.preventDefault(),t.stopPropagation(),p.current=!0,T.current=t.clientX,C.current=M.current,document.body.style.cursor="col-resize",document.body.style.userSelect="none"},[]);(0,n.useEffect)(()=>{const t=m=>{if(!p.current)return;const ie=T.current-m.clientX;w(Math.max(q,Math.min(V,C.current+ie)))},r=()=>{p.current&&(p.current=!1,document.body.style.cursor="",document.body.style.userSelect="",R.setItem(Y,String(Math.round(M.current))))};return window.addEventListener("mousemove",t),window.addEventListener("mouseup",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",r)}},[]);const Z=()=>{h(b[Math.max(0,i-1)]??0)},ee=()=>{h(b[Math.min(a.length-1,i+1)]??0)},te=t=>{const r=t.currentTarget.getBoundingClientRect();h(Math.max(0,Math.min(1,(t.clientX-r.left)/r.width))*g)},F=f===0,se=()=>{x?.(F?1:0)},ae=(0,n.useMemo)(()=>a.some(t=>{const r=t.active_version?.data,m=r?.storyboard_layout;return r?.image_kind==="storyboard"&&(m?.cols??1)*(m?.rows??1)>1}),[a]),[A,re]=(0,n.useState)(Re),ne=t=>{const r=t.target.checked;re(r),R.setItem(K,r?"1":"0")},oe=t=>{x?.(parseFloat(t.target.value))},P=g>0?c/g*100:0;return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"fixed inset-0 bg-black/50 z-40 lg:hidden",onClick:d}),(0,e.jsxs)("div",{className:"fixed bottom-14 right-2 left-2 z-50 rounded-xl overflow-hidden shadow-2xl max-h-[60vh] sm:left-auto sm:right-3 sm:bottom-14 sm:w-[340px] lg:relative lg:bottom-auto lg:right-auto lg:left-auto lg:z-auto lg:rounded-none lg:shadow-none lg:max-h-none bg-black flex shrink-0 min-h-0",style:W?{width:k}:void 0,children:[(0,e.jsxs)("div",{onMouseDown:J,className:"absolute left-0 top-0 bottom-0 w-2 z-20 cursor-col-resize group hidden lg:block",children:[(0,e.jsx)("div",{className:"absolute left-0 top-0 bottom-0 w-px bg-border group-hover:bg-primary transition-colors duration-150"}),(0,e.jsxs)("div",{className:"absolute left-0.5 top-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",children:[(0,e.jsx)("div",{className:"w-1 h-1 rounded-full bg-white/40"}),(0,e.jsx)("div",{className:"w-1 h-1 rounded-full bg-white/40"}),(0,e.jsx)("div",{className:"w-1 h-1 rounded-full bg-white/40"})]})]}),(0,e.jsxs)("div",{className:"flex-1 flex flex-col min-h-0 min-w-0 overflow-hidden",children:[(0,e.jsxs)("div",{className:"flex-1 relative min-h-0 flex items-center justify-center bg-black group/panel",style:j?{filter:j}:void 0,children:[l&&Ne(l)?(0,e.jsx)("div",{className:"relative aspect-video max-h-full w-full overflow-hidden",children:(0,e.jsx)(ke,{size:"panel",briefLine:je(l),isMaking:!!l.generating_video,failure:ye(l)})}):_&&G?(0,e.jsx)(Me,{ref:u,src:G,muted:F||_e(l),autoPlay:o,loop:!1,preload:"auto",showLoadingOverlay:!0,trimStartMs:$,onWaiting:()=>s?.(!0),onCanPlay:()=>s?.(!1),onPlaying:()=>s?.(!1),className:"w-full h-full"}):Q&&U&&l?(0,e.jsx)(Fe,{frame:l,imageUrl:U,offsetSeconds:z,playing:o,splitGrid:A,alt:`Shot ${i+1}`}):(0,e.jsxs)("div",{className:"flex max-w-xs flex-col items-center gap-2 px-6 text-center",children:[(0,e.jsx)(ce,{className:"h-10 w-10 text-white/15","aria-hidden":"true"}),(0,e.jsx)("span",{className:"text-sm font-medium text-white/40",children:"Nothing to play yet"}),(0,e.jsx)("span",{className:"text-xs leading-relaxed text-white/25",children:"Your shots play here once they are drawn. Pick a shot to see it on its own."})]}),N.isActive&&(0,e.jsx)(Ie,{transitionType:N.transitionType,durationMs:N.durationMs,outgoingImageUrl:N.outgoingImageUrl,incomingImageUrl:N.incomingImageUrl},N.key),(0,e.jsx)(S,{variant:"overlay",size:"icon-sm",onClick:d,className:"absolute top-2 right-2 opacity-0 group-hover/panel:opacity-100 focus-visible:opacity-100","aria-label":"Close preview panel",icon:(0,e.jsx)(ge,{className:"h-3 w-3"})}),o&&l&&(()=>{const t=l.active_version?.data,r=t?.dialogue?.trim()||t?.audio_scene?.narration?.trim()||"";return r?(0,e.jsx)("div",{className:"pointer-events-none absolute inset-x-3 bottom-8 flex justify-center",children:(0,e.jsx)("p",{className:B("max-w-[90%] rounded bg-black/65 px-3 py-1.5 text-center text-[13px] leading-snug text-white/95 backdrop-blur-sm",!t?.dialogue?.trim()&&"italic text-white/80"),style:{textWrap:"balance"},children:r})}):null})(),(0,e.jsxs)("div",{className:"absolute top-2 left-3 flex items-center gap-1.5",children:[(0,e.jsx)("div",{className:"px-2.5 py-1 rounded bg-black/60 backdrop-blur-sm",children:(0,e.jsxs)("span",{className:"text-[11px] font-medium font-mono text-white/90 tabular-nums tracking-tight",children:[i+1," / ",a.length]})}),l?.transition_type&&l.transition_type!=="cut"&&(0,e.jsxs)("div",{className:"flex items-center gap-1 px-2 py-1 rounded bg-primary/20 backdrop-blur-sm border border-amber-500/30",children:[(0,e.jsx)(de,{className:"h-3 w-3 text-primary"}),(0,e.jsx)("span",{className:"text-[10px] font-medium text-primary",children:Se(l.transition_type)})]})]})]}),(0,e.jsxs)("div",{className:"shrink-0 bg-neutral-900 border-t border-white/5",children:[(0,e.jsxs)("div",{className:"relative h-[2px] hover:h-1 bg-white/10 cursor-pointer group/progress transition-all duration-150 ease-out",onClick:te,children:[(0,e.jsx)("div",{className:"h-full bg-primary transition-[width] duration-75",style:{width:`${P}%`}}),(0,e.jsx)("div",{className:"absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-2.5 h-2.5 rounded-full bg-white shadow-sm opacity-0 group-hover/progress:opacity-100 transition-opacity duration-150 pointer-events-none",style:{left:`${P}%`}})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1 px-2 py-1",children:[(0,e.jsx)("span",{className:"text-[10px] font-mono text-white/50 tabular-nums w-10",children:H(c)}),(0,e.jsxs)("div",{className:"flex items-center gap-0.5 mx-auto",children:[(0,e.jsx)(S,{size:"icon-sm",onClick:Z,disabled:i===0,className:"text-white/60 hover:bg-white/10 hover:text-white active:bg-white/15 disabled:opacity-20","aria-label":"Previous shot",icon:(0,e.jsx)(ue,{className:"h-3.5 w-3.5"})}),(0,e.jsx)(S,{variant:"overlay",size:"icon-sm",onClick:o?y:v,className:"h-8 w-8 rounded-full text-white","aria-label":o?"Pause":"Play",icon:o?(0,e.jsx)(pe,{className:"h-4 w-4"}):(0,e.jsx)(fe,{className:"h-4 w-4"})}),(0,e.jsx)(S,{size:"icon-sm",onClick:ee,disabled:i===a.length-1,className:"text-white/60 hover:bg-white/10 hover:text-white active:bg-white/15 disabled:opacity-20","aria-label":"Next shot",icon:(0,e.jsx)(le,{className:"h-3.5 w-3.5"})})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1 group/vol",children:[(0,e.jsx)(S,{size:"icon-sm",onClick:se,className:"text-white/60 hover:bg-white/10 hover:text-white active:bg-white/15 disabled:opacity-20","aria-label":F?"Unmute":"Mute",icon:F?(0,e.jsx)(he,{className:"h-3.5 w-3.5"}):(0,e.jsx)(xe,{className:"h-3.5 w-3.5"})}

1),(0,e.jsx)("input",{type:"range",min:0,max:1,step:.05,value:f,onChange:oe,className:"w-14 h-0.5 group-hover/vol:h-1 accent-white cursor-pointer transition-all duration-150 ease-out","aria-label":"Volume"})]}),(0,e.jsx)("span",{className:"text-[10px] font-mono text-white/50 tabular-nums w-10 text-right",children:H(g)})]}),ae&&(0,e.jsx)("div",{className:"flex items-center px-2 pb-1.5",children:(0,e.jsxs)("label",{className:"flex items-center gap-1.5 cursor-pointer text-[10px] text-white/50 hover:text-white/80 transition-colors duration-150 ease-out",children:[(0,e.jsx)("input",{type:"checkbox",checked:A,onChange:ne,className:"h-3 w-3 shrink-0 cursor-pointer rounded-sm border-white/20 bg-white/5 accent-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-violet-500"}),(0,e.jsx)("span",{children:"Split grid into panels"}),(0,e.jsx)("span",{className:"text-white/25",children:A?"one panel at a time":"full storyboard"})]})})]})]})]})]})};export{Ze as PreviewPanel};