@lalalic/markcut 3.2.14 → 3.2.16

package/src/mcp/remotion-app.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {createRoot} from 'react-dom/client';
+import {createPortal} from 'react-dom';
+import type {PlayerRef} from '@remotion/player';
+import {SharedPlayer} from '../player/SharedPlayer';
+import {SceneThumbnails} from '../player/components/SceneThumbnails';
+import {useWebAudioPreview} from './web-audio-preview';
+import {useBrowserSpeechPreview} from './browser-speech-preview';
+const PLAYER_VERSION='v24';
+function App(){
+ const [revision,setRevision]=React.useState<any>(()=>(window as any).__markcutRevision||null);
+ const ref=React.useRef<PlayerRef|null>(null);
+ const [currentTime,setCurrentTime]=React.useState(0);
+ const [browserTts,setBrowserTts]=React.useState(true);
+ React.useEffect(()=>{const receive=(e:Event)=>setRevision((e as CustomEvent).detail);window.addEventListener('markcut:revision',receive);return ()=>window.removeEventListener('markcut:revision',receive)},[]);
+ const data=revision?.compiled?.root||revision?.compiled;
+ const useBrowserTts=browserTts&&Boolean(data?.subtitle?.src);
+ const {playbackRoot:generatedRoot,status}=useWebAudioPreview(useBrowserTts?null:data,ref);
+ const playbackRoot=React.useMemo(()=>{
+  if(!useBrowserTts)return generatedRoot;
+  const strip=(n:any):any=>{
+   if(!n||typeof n!=="object")return n;
+   if(n.type==="audio")return null;
+   return {...n,...(Array.isArray(n.children)?{children:n.children.map(strip).filter(Boolean)}:{})};
+  };
+  return {...strip(data),subtitle:undefined};
+ },[data,generatedRoot,useBrowserTts]);
+ const {caption}=useBrowserSpeechPreview(data,ref,useBrowserTts);
+ const fps=data?.fps||30;
+ const scenes=React.useMemo(()=>{
+  const children=(data?.children||[]).filter((x:any)=>x.type==='scene'&&x.visible!==false);
+  const overlap=Math.max(0,Number(data?.transitionTime)||0);
+  let start=0;
+  return children.map((scene:any,index:number)=>{
+   const duration=Math.max(0,Number(scene.durationInSeconds)||0);
+   const entry={name:String(scene.name||'Scene '+(index+1)),start,end:start+duration,id:scene.id};
+   start+=Math.max(0,duration-(index<children.length-1?overlap:0));
+   return entry;
+  });
+ },[data]);
+ React.useEffect(()=>{
+  const player=ref.current;if(!player)return;
+  const listener=(e:any)=>{if(typeof e.detail?.frame==='number')setCurrentTime(e.detail.frame/fps);};
+  player.addEventListener('frameupdate',listener);
+  return ()=>player.removeEventListener('frameupdate',listener);
+ },[revision?.revisionId,playbackRoot,fps]);
+ React.useEffect(()=>{
+  const active=[...scenes].reverse().find(scene=>currentTime>=scene.start);
+  (window as any).__markcutPlaybackContext={
+   sceneId:active?.id||null,sceneName:active?.name||null,
+   timeSeconds:Math.round(currentTime*10)/10
+  };
+ },[scenes,currentTime]);
+ if(!revision)return <div id="remotion-waiting">Player {PLAYER_VERSION} · Waiting for compiled scenes…</div>;
+ if(!data)return <div>Missing compiled scene tree</div>;
+ const videoName=String(revision.title||revision.videoTitle||revision.path?.split('/').pop()?.replace(/\.md$/i,'').replace(/[-_]+/g,' ')||'Video');
+ return <div id="remotion-preview" data-revision={revision.revisionId}>
+  {document.getElementById("header-tts")&&createPortal(
+   <label style={{display:"flex",gap:5,alignItems:"center",fontSize:12,whiteSpace:"nowrap",cursor:"pointer"}} title="Use browser narration with captions from the script">
+    <input type="checkbox" checked={useBrowserTts} disabled={!data?.subtitle?.src} onChange={e=>setBrowserTts(e.target.checked)}/>
+    Browser TTS
+   </label>,document.getElementById("header-tts")!)}
+  <div id="remotion-canvas" style={{width:'100%',aspectRatio:`${data.width||1080}/${data.height||1920}`,maxHeight:'65vh',margin:'auto'}}>
+   <SharedPlayer key={revision.revisionId} root={playbackRoot} playerRef={ref} numberOfSharedAudioTags={0} style={{width:'100%',height:'100%'}} />
+  </div>
+  {useBrowserTts&&caption&&<div role="status" style={{textAlign:"center",padding:"6px 12px",fontSize:13}}>{caption}</div>}
+  <SceneThumbnails sceneData={scenes} currentTime={currentTime} onSeek={t=>{ref.current?.seekTo(Math.round(t*fps));setCurrentTime(t);}} />
+  {status && !/initializing|ready|paused/i.test(status) && <div id="preview-audio-status" role="status" style={{fontSize:12,padding:'4px 0'}}>{status.replace(/^Web Audio /,'Audio ')}</div>}
+ </div>;
+}
+const el=document.getElementById('remotion-root');
+if(el)createRoot(el).render(<App/>);

package/src/mcp/server.mjs

@@ -3,63 +3,64 @@ import { McpServer } from "@modelcontextprotocol/server";
 import { StdioServerTransport } from "@modelcontextprotocol/server/stdio";
 import { registerAppResource, registerAppTool } from "@modelcontextprotocol/ext-apps/server";
 import { z } from "zod";
+import {publishPreviewRevision} from "./remote-assets.mjs";
+import {startCompileOperation} from "./compile-operation.mjs";
 import {
-  TOOL_NAME, SUBMIT_TOOL_NAME, RESOURCE_URI, PLAYER_ORIGIN, buildPreviewResourceResult, ensureVideoPreview, reviewResult,
+  TOOL_NAME, RESOURCE_URI, LEGACY_RESOURCE_URIS, buildPreviewResourceResult, previewCsp, getPreviewMedia, ensureVideoPreview, stopManagedVideoPreview,
 } from "./preview.mjs";
 
 const server = new McpServer({ name: "markcut", version: "3.2.0" });
+process.once("exit", stopManagedVideoPreview);
+// Stdio clients commonly terminate the server via SIGTERM rather than EOF.
+// Node's default signal termination does not reliably run exit handlers.
+for (const signal of ["SIGTERM", "SIGINT"]) {
+  process.once(signal, () => { stopManagedVideoPreview(); process.exit(0); });
+}
+process.stdin.once("end", stopManagedVideoPreview);
+process.stdin.once("close", stopManagedVideoPreview);
 
-registerAppTool(
-  server,
-  TOOL_NAME,
+// Discoverable at federation startup: unlike dynamically added resource URIs,
+// an app-only tool remains routable for every independently identified preview.
+server.registerTool(
+  "markcut.preview.media",
   {
-    description: "Show the Markcut video player for a Markdown video definition and ask a human to approve it or request changes.",
-    inputSchema: z.object({
-      path: z.string().describe("Absolute path to a .md file"),
-    }),
-    _meta: {
-      ui: { resourceUri: RESOURCE_URI },
-    },
+    description: "Read compiled Remotion scene data for an existing Markcut preview revision.",
+    inputSchema: z.object({contentHash:z.string().regex(/^[a-f0-9]{64}$/)}),
+    _meta: { ui: { visibility: ["app"] } },
   },
-  async ({ path }) => {
+  async ({contentHash}) => {
     try {
-      const preview = await ensureVideoPreview(path);
-      return {
-        content: [{ type: "text", text: `Video ready for review: ${preview.path}` }],
-        structuredContent: { ...preview, resourceUri: RESOURCE_URI },
-        _meta: {
-          ui: { resourceUri: RESOURCE_URI, props: preview },
-          "ui/resourceUri": RESOURCE_URI,
-        },
-      };
+      return {content:[{type:"text",text:"Preview media ready"}], structuredContent:getPreviewMedia(contentHash)};
     } catch (error) {
-      return {
-        isError: true,
-        content: [{ type: "text", text: error instanceof Error ? error.message : String(error) }],
-      };
+      return {isError:true,content:[{type:"text",text:error.message||String(error)}]};
     }
   },
 );
 
 registerAppTool(
   server,
-  SUBMIT_TOOL_NAME,
+  TOOL_NAME,
   {
-    description: "Submit the review decision from the Markcut video preview UI.",
+    description: "Show the Markcut video player for a Markdown video definition and ask a human to approve it or request changes. When a review ui/message arrives with decision=changes_requested, edit the supplied path using feedback and call markcut.preview again with the same path; do not consider it approved. When decision=approved, treat only that contentHash/revisionId as approved and stop the review loop. Never approve a newer revision from an older message.",
     inputSchema: z.object({
-      decision: z.enum(["approved", "changes_requested"]),
-      feedback: z.string().optional(),
+      path: z.string().describe("Absolute .md path or NeoY HTTPS mounted file URL"),
+      relay: z.object({jobId:z.string(),taskId:z.union([z.string(),z.number()]),executionId:z.string().optional()}).optional().describe("Optional Agents Relay task correlation. No Relay dependency for standalone ChatGPT/Work reviews."),
     }),
     _meta: {
-      ui: { visibility: ["app"] },
+      ui: { resourceUri: RESOURCE_URI },
     },
   },
-  async ({ decision, feedback }) => {
+  async ({ path, relay }) => {
     try {
-      const result = reviewResult(decision, feedback);
+      const operation=startCompileOperation(path,relay);
+      const payload={...operation,...(relay ? {relay} : {})};
       return {
-        content: [{ type: "text", text: JSON.stringify(result) }],
-        structuredContent: result,
+        content: [{ type: "text", text: `Compilation started: ${operation.path}` }],
+        structuredContent: payload,
+        _meta: {
+          ui: { resourceUri: RESOURCE_URI, props: payload },
+          "ui/resourceUri": RESOURCE_URI,
+        },
       };
     } catch (error) {
       return {
@@ -70,19 +71,23 @@ registerAppTool(
   },
 );
 
-registerAppResource(
-  server,
-  "Markcut video review",
-  RESOURCE_URI,
-  {
-    _meta: {
-      ui: {
-        prefersBorder: true,
-        csp: { connectDomains: [PLAYER_ORIGIN], resourceDomains: [], frameDomains: [PLAYER_ORIGIN] },
+// All historical static entrypoints resolve to the latest bridge/player HTML.
+// Register at startup so federation can discover every alias.
+for (const uri of [RESOURCE_URI, ...LEGACY_RESOURCE_URIS]) {
+  registerAppResource(
+    server,
+    `Markcut video review (latest; alias ${uri})`,
+    uri,
+    {
+      _meta: {
+        ui: {
+          prefersBorder: true,
+          csp: previewCsp(),
+        },
       },
     },
-  },
-  async () => buildPreviewResourceResult(),
-);
+    async () => buildPreviewResourceResult(uri),
+  );
+}
 
 await server.connect(new StdioServerTransport());

package/src/mcp/web-audio-preview.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type {PlayerRef} from '@remotion/player';
+
+export function useWebAudioPreview(root:any, playerRef:React.RefObject<PlayerRef|null>) {
+ const [status,setStatus]=React.useState('');
+ const {audio,playbackRoot}=React.useMemo(()=>{
+  let audio:any=null;
+  const strip=(node:any):any=>{
+   if(!node||typeof node!=='object')return node;
+   if(node.type==='audio'&&String(node.src).startsWith('https://')){audio??=node;return null;}
+   return {...node,...(Array.isArray(node.children)?{children:node.children.map(strip).filter(Boolean)}:{})};
+  };
+  return {audio,playbackRoot:strip(root)};
+ },[root]);
+ React.useEffect(()=>{
+  if(!audio)return;
+  const ctx=new AudioContext();
+  let buffer:AudioBuffer|null=null,source:AudioBufferSourceNode|null=null,gain:GainNode|null=null,disposed=false;
+  let generation=0;
+  const stop=()=>{generation++;if(source){source.onended=null;try{source.stop()}catch{}source.disconnect();source=null;}gain?.disconnect();gain=null;};
+  fetch(audio.src,{mode:'cors'}).then(response=>{if(!response.ok)throw new Error('HTTP '+response.status);return response.arrayBuffer();})
+  .then(bytes=>ctx.decodeAudioData(bytes)).then(b=>{buffer=b;if(!disposed)setStatus(`Web Audio ready · ${b.duration.toFixed(2)}s`);}).catch(e=>setStatus('Decode failed: '+String(e)));
+  const play=async()=>{
+   const ticket=++generation;
+   try{
+    await ctx.resume();
+    if(ticket!==generation||disposed)return;
+    if(!buffer){setStatus('Audio decoding; retry Play');return;}
+    const player=playerRef.current;if(!player)return;
+    const offset=player.getCurrentFrame()/(root.fps||30);
+    if(offset>=buffer.duration)return;
+    if(source){source.onended=null;try{source.stop()}catch{}source.disconnect();}
+    const s=ctx.createBufferSource();const g=ctx.createGain();s.buffer=buffer;
+    g.gain.value=player.isMuted()?0:player.getVolume();
+    s.connect(g);g.connect(ctx.destination);s.start(0,Math.max(0,offset));
+    source=s;gain=g;setStatus(`Web Audio playing · ${offset.toFixed(2)}s · volume ${g.gain.value}`);
+   }catch(e){setStatus('Playback failed: '+String(e));}
+  };
+  const pause=()=>{stop();setStatus('Web Audio paused');};
+  const seek=()=>{stop();if(playerRef.current?.isPlaying())void play();};
+  const volume=()=>{if(gain&&playerRef.current)gain.gain.value=playerRef.current.isMuted()?0:playerRef.current.getVolume();};
+  let player:PlayerRef|null=null;
+  const attach=()=>{if(player)return;const p=playerRef.current;if(!p)return;player=p;
+   p.addEventListener('play',play);p.addEventListener('pause',pause);p.addEventListener('ended',pause);
+   p.addEventListener('seeked',seek);p.addEventListener('volumechange',volume);p.addEventListener('mutechange',volume);
+  };
+  attach();const poll=setInterval(attach,100);
+  return()=>{disposed=true;clearInterval(poll);if(player){player.removeEventListener('play',play);player.removeEventListener('pause',pause);player.removeEventListener('ended',pause);player.removeEventListener('seeked',seek);player.removeEventListener('volumechange',volume);player.removeEventListener('mutechange',volume);}stop();void ctx.close();};
+ },[audio,playerRef,root]);
+ return {playbackRoot,status};
+}

package/src/player/SharedPlayer.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {Player} from '@remotion/player';
+import {MarkCut, getDurationInSeconds} from '../entry';
+
+// Shared Remotion composition, controls, and native MarkCut audio tree.
+export function SharedPlayer({root, playerRef, ...props}: {root:any;playerRef?:React.Ref<any>;[key:string]:any}) {
+ const fps=root?.fps||30;
+ const durationInFrames=Math.max(1,Math.ceil((getDurationInSeconds(root,true)||5)*fps));
+ const inputProps=React.useMemo(()=>({root,compose:{}}),[root]);
+ return <Player ref={playerRef as any} component={MarkCut} inputProps={inputProps}
+  durationInFrames={durationInFrames} fps={fps}
+  compositionWidth={root?.width||1080} compositionHeight={root?.height||1920}
+  controls={true} showPlaybackRateControl={true} allowFullscreen={true}
+  clickToPlay={false} doubleClickToFullscreen={true} autoPlay={false} {...props}/>;
+}

package/src/player/browser.tsx

@@ -13,6 +13,7 @@ import { createRoot } from "react-dom/client";
 import * as ReactDOM from "react-dom";
 import * as Remotion from "remotion";
 import { Player } from "@remotion/player";
+import { SharedPlayer } from "./SharedPlayer";
 import { MarkCut, getDurationInSeconds } from "../entry";
 import { HeaderBar, EditControls, EditMessagePanel, LabelControls, SceneThumbnails, VariantBar } from "./components/index";
 import type { EditEntry } from "./components/EditMessagePanel";
@@ -528,22 +529,7 @@ function PlayerApp() {
 
       {/* ── Player frame ── */}
       <div id="player-frame" style={{ flex: 1, width: "100%", maxWidth: 480, minHeight: 0 }}>
-        <Player
-          ref={playerRef}
-          component={MarkCut}
-          inputProps={inputProps}
-          durationInFrames={durationInFrames}
-          fps={fps}
-          compositionWidth={width}
-          compositionHeight={height}
-          style={{ width: "100%", height: "100%" }}
-          controls={true}
-          showPlaybackRateControl={true}
-          allowFullscreen={true}
-          clickToPlay={false}
-          doubleClickToFullscreen={true}
-          autoPlay={autoPlay}
-        />
+        <SharedPlayer root={data} playerRef={playerRef} style={{ width: "100%", height: "100%" }} autoPlay={autoPlay} />
 
         {/* ── Edit message overlay (shown while waiting, then auto-hides) ── */}
         {mode === "edit" && showEditOverlay && (