https://mstudio.ai/build/assets/PreviewModal.DPdhlJFJ.js

1import{r as Ie}from"./rolldown-runtime.C1f3BsDW.js";import"./inertia.BE4YqsTM.js";import"./http.DWpeO7Ui.js";import{B as Xe,Bn as Ee,Ht as Ge,Lr as Qe,Nr as Ke,Qn as Ze,Qr as Je,Sr as Ce,V as Ye,Xt as Oe,d as et,f as tt,gt as st,jt as at,ut as rt,xr as Te}from"./icons.ChOq_Y4q.js";import{t as it}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import"./state.L8kQliOB.js";import{$t as nt,A as lt,Ht as ot,It as _e,Ot as ct,Zt as dt,en as Me,i as ut,j as Ae,jt as W,k as g,zt as mt}from"./entry-client.DX3aUoe5.js";import"./segmented.DHcH2lTJ.js";import{t as ft}from"./badge.CK53iWwP.js";import"./switch.D3Vh3rjF.js";import{t as ht}from"./projectStore.B74RetxK.js";import{c as Fe,i as gt,u as Pe}from"./shotMedium.DYKLpru1.js";import{t as xt}from"./AnimationShotParts.B3fNwJfT.js";import{t as pt}from"./clipLevelling.DXCqATC4.js";import{t as vt}from"./useBeatAligned.B5qIIZyh.js";import{i as wt,n as yt,r as bt}from"./sceneAudio.Do-Wp-E3.js";import{t as jt}from"./filmProgress.BMWLABZx.js";import{o as Nt}from"./transitionConfig.CdUOd4v5.js";import{n as St,t as kt}from"./useFrameTransition.CCyvsxSP.js";import{t as Et}from"./useSceneAudio.CcvzsUuI.js";var a=Ie(Je(),1),t=Ie(it(),1);function Ct(r){const c=mt(r),d=Pe(r);return{video:c.hasVideo&&!d?c.videoUrl:null,image:c.hasImage?c.imageUrl:null,trimStartSec:c.videoTrimStartMs/1e3,trimEndSec:c.videoOriginalDurationMs&&c.videoTrimEndMs>0?(c.videoOriginalDurationMs-c.videoTrimEndMs)/1e3:null,durationSec:r?.duration_seconds||5}}var Tt=({clock:r})=>(0,t.jsx)(t.Fragment,{children:_e((0,a.useSyncExternalStore)(r.subscribe,()=>Math.floor(r.get())))}),Mt=({clock:r,totalDuration:c})=>{const d=(0,a.useRef)(null);return(0,a.useEffect)(()=>{const S=()=>{if(d.current){const R=c>0?r.get()/c:0;d.current.style.width=`${Math.min(100,R*100)}%`}};return S(),r.subscribe(S)},[r,c]),(0,t.jsx)("div",{ref:d,className:"h-full bg-primary rounded-full relative transition-smooth group-hover:h-2",children:(0,t.jsx)("div",{className:"absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"})})};const Yt=({frames:r,audioTracks:c,isOpen:d,onClose:S,initialFrameIndex:R=0,gradeFilter:ie,onOpenShot:T,onExport:ne})=>{const Re=ut(e=>e.user?.is_impersonating),J=(0,a.useRef)(null),le=(0,a.useRef)(new Map),H=(0,a.useRef)(!1),k=(0,a.useRef)(new Map),L=(0,a.useRef)(0),X=(0,a.useRef)(0),[E]=(0,a.useState)(nt),[w,z]=(0,a.useState)(!1),[B,Le]=(0,a.useState)(!1),[M,oe]=(0,a.useState)(!1),{sceneAudioEnabled:G,toggleSceneAudio:ze}=Et(),[Q,ce]=(0,a.useState)(!0),[i,Y]=(0,a.useState)(R),[U,b]=(0,a.useState)(!0),[O,Be]=(0,a.useState)(!1),[Ue,$e]=(0,a.useState)(()=>new Set),de=(0,a.useCallback)(e=>{$e(s=>s.has(e)?s:new Set(s).add(e))},[]),[De,$]=(0,a.useState)(!1),C=(0,a.useMemo)(()=>jt(r),[r]),A=kt(r,i),f=r[i],ue=f?.active_version?.data,me=ue?.script||ue?.dialogue||"",j=(0,a.useMemo)(()=>r.map(Ct),[r]),fe=j[i],he=!!fe?.video,D=fe?.image??null,ge=!!D,{totalDuration:ee,frameStartTimes:N}=(0,a.useMemo)(()=>ct(r),[r]),te=(0,a.useMemo)(()=>Me(r.length,i).flatMap(e=>{const s=j[e]?.video;return s?[{index:e,url:s}]:[]}),[r.length,i,j]),xe=(0,a.useMemo)(()=>yt(r),[r]),pe=vt(),ve=N[i+1]!==void 0?N[i+1]-N[i]:ot(f?.duration_seconds),V=(0,a.useRef)(null);(0,a.useEffect)(()=>{V.current=null},[i]);const x=(0,a.useRef)({currentFrameIndex:i,isPlaying:w,mediaLoading:U,isMuted:M,sceneAudioEnabled:G,audioTracks:c,speakingVideoFrameIds:xe,media:j,frameStartTimes:N,frameCount:r.length,beatAligned:pe,slotSeconds:ve});x.current={currentFrameIndex:i,isPlaying:w,mediaLoading:U,isMuted:M,sceneAudioEnabled:G,audioTracks:c,speakingVideoFrameIds:xe,media:j,frameStartTimes:N,frameCount:r.length,beatAligned:pe,slotSeconds:ve};const we=ht(e=>e.currentProject?.uuid);(0,a.useEffect)(()=>{d&&pt(we,r)},[d,we,r]);const ye=(0,a.useRef)((e,s)=>{const{media:n,frameStartTimes:o}=x.current,p=n[e];E.set((o[e]??0)+s),X.current=s;const h=k.current.get(e);if(p?.video&&h&&h.readyState>=1){const y=p.trimStartSec+s;Math.abs(h.currentTime-y)>.05&&(h.currentTime=y)}}),F=(0,a.useCallback)((e,s=0)=>{L.current=s,e===x.current.currentFrameIndex?ye.current(e,s):Y(e)},[]);(0,a.useEffect)(()=>{d&&(L.current=0,Y(R),z(!1),$(!1))},[d,R]),(0,a.useEffect)(()=>{w&&$(!1)},[w]),(0,a.useEffect)(()=>{$(!1)},[i]),(0,a.useEffect)(()=>{const e=()=>{Le(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",e),()=>document.removeEventListener("fullscreenchange",e)},[]);const be=async()=>{J.current&&(document.fullscreenElement?await document.exitFullscreen():await J.current.requestFullscreen())};(0,a.useEffect)(()=>

1{if(H.current=!1,ye.current(i,L.current),L.current=0,he){const e=k.current.get(i);b(!e||e.readyState<3);return}if(ge&&D){const e=new window.Image;e.src=D,e.complete?b(!1):(b(!0),e.onload=()=>b(!1),e.onerror=()=>b(!1))}else b(!1)},[i]),(0,a.useEffect)(()=>{k.current.forEach((e,s)=>{s===i?w?e.play().catch(()=>{}):e.pause():e.paused||e.pause()})},[w,i,te]),(0,a.useEffect)(()=>{U||Be(!0)},[U]),(0,a.useEffect)(()=>{H.current=!1},[w]);const K=(0,a.useCallback)(()=>{if(H.current)return;H.current=!0;const{currentFrameIndex:e,frameCount:s}=x.current;e<s-1?(L.current=0,Y(e+1)):(z(!1),$(!0))},[]);(0,a.useEffect)(()=>{if(!d||!O)return;const e=Me(r.length,i).map(s=>j[s]?.image).filter(s=>!!s).map(s=>{const n=new Image;return n.decoding="async",n.src=s,n});return()=>e.forEach(s=>s.removeAttribute("src"))},[d,O,i,r.length,j]);const je=(0,a.useCallback)(e=>{const{audioTracks:s,isPlaying:n,mediaLoading:o,isMuted:p,sceneAudioEnabled:h,speakingVideoFrameIds:y}=x.current,I=e*1e3,_=s.some(m=>m.is_solo),q=le.current;s.forEach(m=>{const P=m.s3_url||m.generated_audio_url;let l=q.get(m.id);const v=m.is_muted||!P||_&&!m.is_solo||p||m.track_type==="scene"&&!h||wt(m,y),u=dt(m,I);if(v||!u.load){l&&(l.pause(),u.load||(l.removeAttribute("src"),l.load(),q.delete(m.id)));return}if(l||(l=new Audio,l.preload="auto",l.src=P,q.set(m.id,l)),!u.active||!n||o){l.paused||l.pause();return}l.volume=u.volume,Math.abs(l.currentTime-u.position)>.1&&(l.currentTime=u.position),l.paused&&l.play().catch(console.warn)})},[]);(0,a.useEffect)(()=>{if(!d)return;let e=0,s=performance.now();const n=o=>{const p=(o-s)/1e3;s=o;const{currentFrameIndex:h,isPlaying:y,mediaLoading:I,media:_,frameStartTimes:q,beatAligned:m,slotSeconds:P}=x.current,l=_[h];let v=X.current;if(l?.video){const u=k.current.get(h);u&&u.readyState>=1&&(v=Math.max(0,u.currentTime-l.trimStartSec),y&&l.trimEndSec!==null&&u.currentTime>=l.trimEndSec&&(u.pause(),K())),y&&l.trimEndSec===null&&m?(u&&u.ended&&v<P-.05?(V.current??=o,v=Math.min(P,v+(o-V.current)/1e3)):(!u||!u.ended)&&(V.current=null),v>=P&&(u?.pause(),K())):m||(V.current=null)}else l&&y&&!I&&(v=X.current+p,X.current=v,v>=l.durationSec&&(v=l.durationSec,K()));E.set((q[h]??0)+v),je(E.get()),e=window.requestAnimationFrame(n)};return e=window.requestAnimationFrame(n),()=>window.cancelAnimationFrame(e)},[d,K,je,E]),(0,a.useEffect)(()=>{const e=le.current,s=k.current;return()=>{e.forEach(n=>{n.pause(),n.removeAttribute("src"),n.load()}),e.clear(),s.clear()}},[]);const Ne=(0,a.useRef)(new Map),Ve=e=>{let s=Ne.current.get(e);return s||(s=n=>{const o=k.current;if(n){o.set(e,n);return}const p=o.get(e);p&&(p.pause(),p.removeAttribute("src"),p.load(),o.delete(e))},Ne.current.set(e,s)),s};(0,a.useEffect)(()=>{if(!d)return;const e=s=>{s.key===" "?(s.preventDefault(),z(n=>!n)):s.key==="Escape"&&!document.fullscreenElement?S():s.key==="f"?be():s.key==="ArrowLeft"?se():s.key==="ArrowRight"?ae():s.key==="m"?oe(n=>!n):s.key==="t"&&ce(n=>!n)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[d,S]);const se=()=>{const e=x.current.currentFrameIndex;e>0&&F(e-1)},ae=()=>{const e=x.current.currentFrameIndex;e<x.current.frameCount-1&&F(e+1)},qe=()=>{z(e=>!e)},We=()=>{F(0),$(!1),z(!0)},re=C.step==="finish",Se=C.shots-C.withClip,Z=C.step==="pictures"?C.firstShotNeedingPicture:C.firstShotNeedingClip,ke=Z===null?0:r.findIndex(e=>e.id===Z)+1,He=e=>{const s=e.currentTarget.getBoundingClientRect(),n=(e.clientX-s.left)/s.width*ee;for(let o=r.length-1;o>=0;o--)if(n>=N[o]){F(o,n-N[o]);return}};return d?(0,t.jsx)("div",{className:W("fixed inset-x-0 bottom-0 z-[100] bg-black",Re?"top-10":"top-0"),children:(0,t.jsxs)("div",{ref:J,className:"w-full h-full flex flex-col",children:[(0,t.jsx)("div",{className:W("absolute top-0 left-0 right-0 z-20 p-3 sm:p-4 bg-gradient-to-b from-black/80 to-transparent","transition-opacity duration-300",B?"opacity-0 hover:opacity-100":"opacity-100"),children:(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsxs)("div",{className:"flex items-center gap-3",children:[(0,t.jsx)("h2",{className:"text-white font-semibold text-base sm:text-lg",children:"Watch"}),(0,t.jsxs)("span",{className:"hidden sm:inline text-white/60 text-sm",children:["Shot ",i+1," of ",r.length]}),r[i]?.transition_type&&r[i].transition_type!=="cut"&&(0,t.jsxs)(ft,{variant:"primary",className:"hidden sm:inline-flex bg-primary/20",children:[(0,t.jsx)(Ke,{}),Nt(r[i].transition_type)]})]}),(0,t.jsx)(lt,{variant:"overlay",size:"icon",onClick:S,className:"text-white/80 hover:text-white"})]})}),(0,t.jsxs)("div",{className:"flex-1 flex flex-col lg:flex-row items-center lg:items-stretch justify-center relative min-h-0",children:[(0,t.jsxs)("div",{className:W("relative max-h-full max-w-full w-full flex items-center justify-center px-2 sm:px-4 lg:px-6",Q?"lg:w-3/4":"lg:w-full"),style:ie?{filter:ie}:void 0,children:[te.map(({index:e,url:s},n)=>{const o=e===i,p=o||O&&te.slice(0,n).every(h=>Ue.has(h.url));return(0,t.jsx)("video",{ref:Ve(e),src:p?s:void 0,preload:"auto",playsInl

1ine:!0,muted:M||!o||bt(r[e]),"aria-hidden":!o,className:W("max-h-[60dvh] sm:max-h-[70dvh] lg:max-h-[80dvh] max-w-full object-contain rounded-lg",!o&&"absolute opacity-0 pointer-events-none"),onLoadedMetadata:h=>{const y=j[e],I=h.currentTarget,_=(y?.trimStartSec??0)+(o?E.get()-N[e]:0);Math.abs(I.currentTime-_)>.05&&(I.currentTime=Math.max(0,_))},onCanPlay:()=>{e===x.current.currentFrameIndex&&(b(!1),x.current.isPlaying&&k.current.get(e)?.play().catch(()=>{}))},onWaiting:()=>{e===x.current.currentFrameIndex&&b(!0)},onPlaying:()=>{e===x.current.currentFrameIndex&&b(!1)},onCanPlayThrough:()=>de(s),onEnded:()=>de(s)},`${e}:${s}`)}),f&&Pe(f)?(0,t.jsx)("div",{className:"relative aspect-video w-full max-w-[640px] overflow-hidden rounded-lg",children:(0,t.jsx)(xt,{size:"panel",briefLine:gt(f),isMaking:!!f.generating_video,failure:Fe(f),action:T&&!f.generating_video?(0,t.jsx)(g,{size:"sm",onClick:()=>T(f.id),children:Fe(f)?"Try again":"Create animation"}):void 0})}):he?null:ge&&D?(0,t.jsx)("img",{src:D,alt:`Shot ${i+1}`,width:1600,height:900,className:"max-h-[60dvh] sm:max-h-[70dvh] lg:max-h-[80dvh] max-w-full object-contain rounded-lg"}):(0,t.jsxs)("div",{className:"w-full max-w-[640px] aspect-video bg-secondary/20 rounded-lg flex flex-col items-center justify-center gap-3 px-4",children:[(0,t.jsx)("span",{className:"text-white/70 text-sm sm:text-lg text-center",children:f?.generating_image?`The storyboard picture for shot ${i+1} is being drawn.`:`Shot ${i+1} has no storyboard picture yet.`}),T&&f&&!f.generating_image&&(0,t.jsx)(g,{size:"sm",onClick:()=>T(f.id),children:"Draw storyboard"})]}),A.isActive&&(0,t.jsx)(St,{transitionType:A.transitionType,durationMs:A.durationMs,outgoingImageUrl:A.outgoingImageUrl,incomingImageUrl:A.incomingImageUrl},A.key),De&&(0,t.jsx)("div",{className:"absolute inset-0 z-10 flex items-center justify-center bg-black/85 px-4",role:"status",children:(0,t.jsxs)("div",{className:"flex max-w-md flex-col items-center gap-4 text-center",children:[(0,t.jsx)("p",{className:"text-white text-base sm:text-lg font-medium",children:re?"That's your film.":`${Se} ${Se===1?"shot still needs":"shots still need"} a video clip.`}),(0,t.jsxs)("div",{className:"flex flex-wrap items-center justify-center gap-2",children:[re&&ne&&(0,t.jsxs)(g,{onClick:ne,children:[(0,t.jsx)(Ze,{className:"h-4 w-4","aria-hidden":"true"}),"Export film"]}),!re&&T&&Z!==null&&(0,t.jsx)(g,{onClick:()=>T(Z),children:C.step==="pictures"?`Draw the storyboard for shot ${ke}`:`Make the video clip for shot ${ke}`}),(0,t.jsx)(g,{variant:"secondary",onClick:We,children:"Watch again"}),(0,t.jsx)(g,{variant:"ghost",className:"text-white",onClick:S,children:"Close"})]})]})}),U&&(0,t.jsx)("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none z-10",children:(0,t.jsxs)("div",{className:"flex flex-col items-center gap-2 bg-black/60 backdrop-blur-sm rounded-xl px-5 py-4",children:[(0,t.jsx)(Oe,{className:"w-7 h-7 text-white animate-spin","aria-hidden":"true"}),(0,t.jsx)("span",{className:"text-white text-xs font-medium",children:"Loading…"})]})}),i>0&&(0,t.jsx)(Ae,{variant:"overlay",onClick:se,className:"absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 rounded-full text-white sm:h-12 sm:w-12","aria-label":"Previous shot",icon:(0,t.jsx)(Ce,{className:"h-5 w-5 sm:h-6 sm:w-6","aria-hidden":"true"})}),i<r.length-1&&(0,t.jsx)(Ae,{variant:"overlay",onClick:ae,className:"absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 rounded-full text-white sm:h-12 sm:w-12","aria-label":"Next shot",icon:(0,t.jsx)(Te,{className:"h-5 w-5 sm:h-6 sm:w-6","aria-hidden":"true"})})]}),Q&&me&&(0,t.jsxs)("div",{className:"w-full lg:w-1/4 h-[32dvh] lg:h-full p-4 sm:p-6 overflow-y-auto bg-black/40 border-t border-white/10 lg:border-t-0 lg:border-l lg:border-white/10",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2 mb-4",children:[(0,t.jsx)(Ee,{className:"h-4 w-4 text-white/60","aria-hidden":"true"}),(0,t.jsx)("h3",{className:"text-white/80 font-medium text-sm",children:"Script"})]}),(0,t.jsx)("p",{className:"text-white/90 text-sm sm:text-base leading-relaxed whitespace-pre-wrap",children:me})]})]}),(0,t.jsxs)("div",{className:W("absolute bottom-0 left-0 right-0 z-20 p-3 sm:p-4 bg-gradient-to-t from-black/80 to-transparent","transition-opacity duration-300",B?"opacity-0 hover:opacity-100":"opacity-100"),children:[(0,t.jsx)("div",{className:"w-full h-1.5 bg-white/20 rounded-full cursor-pointer mb-3 sm:mb-4 group",onClick:He,children:(0,t.jsx)(Mt,{clock:E,totalDuration:ee})}),(0,t.jsxs)("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",children:[(0,t.jsxs)("div",{className:"flex items-center gap-1 sm:gap-2 flex-wrap",children:[(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:()=>F(0),className:"hidden sm:inline-flex","aria-label":"Go to the first shot",children:(0,t.jsx)(Ye,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:se,disabled:i===0,className:"disabled:opacity-30","aria-label":"Previous shot",children:(0,t.jsx)(Ce,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsx)("button",{onClick:qe,className:"p-2.5 sm:p-3 rounded-full bg-white text-black hover:bg-white/90 transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50","aria-label":w?"Pause":"Play","aria-pressed":w,children:w?(0,t.jsx)(st,{className:"h-5 w-5 sm:h-6 sm:w-6","aria-hidden":"true"}):(0,t.jsx)(rt,{className:"h-5 w-5 sm:h-6 sm:w-6 ml-0.5","aria-hidden":"true"})}),(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:ae,disabled:i===r.length-1,className:"disabled:opacity-30","aria-label":"Next shot",children:(0,t.jsx)(Te,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:()=>F(r.length-1),className:"hidden sm:inline-flex","aria-label":"Go to the last shot",children:(0,t.jsx)(Xe,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsxs)("span",{className:"text-white/80 text-xs sm:text-sm font-mono ml-1 sm:ml-2",children:[(0,t.jsx)(Tt,{clock:E})," / ",_e(ee)]})]}

1),(0,t.jsxs)("div",{className:"flex items-center gap-2 self-end sm:self-auto",children:[c.some(e=>e.track_type==="scene")&&(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:ze,title:G?"Turn off narration, sound effects and score":"Turn on narration, sound effects and score","aria-label":"Toggle scene audio","aria-pressed":G,children:(0,t.jsx)(Qe,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:()=>oe(e=>!e),title:"Toggle mute (M)","aria-label":M?"Unmute audio":"Mute audio","aria-pressed":M,children:M?(0,t.jsx)(et,{className:"h-5 w-5","aria-hidden":"true"}):(0,t.jsx)(tt,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:()=>ce(e=>!e),title:"Toggle transcript (T)","aria-label":Q?"Hide transcript":"Show transcript","aria-pressed":Q,children:(0,t.jsx)(Ee,{className:"h-5 w-5","aria-hidden":"true"})}),(0,t.jsx)(g,{variant:"overlay",size:"icon",onClick:be,title:"Toggle fullscreen (F)","aria-label":B?"Exit fullscreen":"Enter fullscreen","aria-pressed":B,children:B?(0,t.jsx)(at,{className:"h-5 w-5","aria-hidden":"true"}):(0,t.jsx)(Ge,{className:"h-5 w-5","aria-hidden":"true"})})]})]})]})]})}):null};export{Yt as PreviewModal};