@lalalic/markcut 2.8.0 → 3.0.0

package/src/player/browser.tsx

@@ -14,7 +14,8 @@ import * as ReactDOM from "react-dom";
 import * as Remotion from "remotion";
 import { Player } from "@remotion/player";
 import { MarkCut, getDurationInSeconds } from "../entry";
-import { HeaderBar, EditControls, LabelControls, SceneThumbnails, VariantBar } from "./components/index";
+import { HeaderBar, EditControls, EditMessagePanel, LabelControls, SceneThumbnails, VariantBar } from "./components/index";
+import type { EditEntry } from "./components/EditMessagePanel";
 import * as MarkcutComponents from "../components/index";
 
 /**
@@ -161,6 +162,13 @@ function PlayerApp() {
   const urlParams = new URLSearchParams(typeof window !== "undefined" ? window.location.search : "");
   const autoPlay = urlParams.get("autoplay") === "true";
   const startAt = parseFloat(urlParams.get("start") || urlParams.get("t") || "0") || 0;
+  const locale: "en" | "zh" = (() => {
+    const raw = (urlParams.get("lang") || "").toLowerCase();
+    if (raw === "zh" || raw.startsWith("zh-")) return "zh";
+    if (raw === "en" || raw.startsWith("en-")) return "en";
+    if (typeof navigator !== "undefined" && navigator.language.toLowerCase().startsWith("zh")) return "zh";
+    return "en";
+  })();
 
   // Derive player config from data early so effects can reference them safely.
   const fps = data?.fps ?? 30;
@@ -389,10 +397,30 @@ function PlayerApp() {
     (typeof window !== "undefined" ? (window as any).MODE : null) || "preview";
 
   // Shared state for header info
-  const [editStatus, setEditStatus] = React.useState("");
   const [sseConnected, setSseConnected] = React.useState(false);
   const [labelSceneInfo, setLabelSceneInfo] = React.useState("");
 
+  // ── Edit message panel state ─────────────────────────────────────────
+  const [editEntries, setEditEntries] = React.useState<EditEntry[]>([]);
+  const [showEditOverlay, setShowEditOverlay] = React.useState(false);
+  const nextEditIdRef = React.useRef(1);
+  const hideEditOverlayTimerRef = React.useRef<number | null>(null);
+
+  const clearHideOverlayTimer = React.useCallback(() => {
+    if (hideEditOverlayTimerRef.current !== null) {
+      window.clearTimeout(hideEditOverlayTimerRef.current);
+      hideEditOverlayTimerRef.current = null;
+    }
+  }, []);
+
+  const scheduleHideEditOverlay = React.useCallback(() => {
+    clearHideOverlayTimer();
+    hideEditOverlayTimerRef.current = window.setTimeout(() => {
+      setShowEditOverlay(false);
+      hideEditOverlayTimerRef.current = null;
+    }, 5000);
+  }, [clearHideOverlayTimer]);
+
   // SSE connection — shared across all modes as a server-liveness monitor
   // Edit mode also listens for "reload" messages (auto-refresh on file change)
   const suppressReloadRef = React.useRef(false);
@@ -404,8 +432,57 @@ function PlayerApp() {
       evtSource.onmessage = (e: MessageEvent) => {
         try {
           const msg = JSON.parse(e.data);
+
+          // Reload event (file changed on disk or agent finished editing)
           if (msg.type === "reload" && !suppressReloadRef.current) {
             window.dispatchEvent(new Event("refresh-player"));
+            return;
+          }
+
+          // Edit progress events (live from agent RPC)
+          if (msg.type === "edit:start") {
+            clearHideOverlayTimer();
+            setShowEditOverlay(true);
+            const id = nextEditIdRef.current++;
+            setEditEntries((prev) => [
+              ...prev,
+              { id, request: msg.request || "", progress: "", status: "thinking" },
+            ]);
+            return;
+          }
+          if (msg.type === "edit:progress") {
+            setEditEntries((prev) => {
+              const last = prev[prev.length - 1];
+              if (!last || last.status !== "thinking") return prev;
+              return prev.map((e) =>
+                e.id === last.id ? { ...e, progress: msg.text || "" } : e
+              );
+            });
+            return;
+          }
+          if (msg.type === "edit:done") {
+            setEditEntries((prev) => {
+              const last = prev[prev.length - 1];
+              if (!last) return prev;
+              return prev.map((e) =>
+                e.id === last.id
+                  ? { ...e, status: "done", progress: e.progress || msg.summary || "" }
+                  : e
+              );
+            });
+            scheduleHideEditOverlay();
+            return;
+          }
+          if (msg.type === "edit:error") {
+            setEditEntries((prev) => {
+              const last = prev[prev.length - 1];
+              if (!last) return prev;
+              return prev.map((e) =>
+                e.id === last.id ? { ...e, status: "error", error: msg.error } : e
+              );
+            });
+            scheduleHideEditOverlay();
+            return;
           }
         } catch {}
       };
@@ -414,10 +491,11 @@ function PlayerApp() {
       setSseConnected(false);
     }
     return () => {
+      clearHideOverlayTimer();
       evtSource?.close();
       setSseConnected(false);
     };
-  }, []);
+  }, [clearHideOverlayTimer, scheduleHideEditOverlay]);
 
   if (error) {
     return <div style={{ color: "red", padding: 40, fontFamily: "sans-serif" }}>Error: {error}</div>;
@@ -440,9 +518,9 @@ function PlayerApp() {
       {/* ── Header (close button + mode info) ── */}
       <HeaderBar
         mode={mode}
-        editStatus={editStatus}
         sseConnected={sseConnected}
         sceneInfo={mode === "label" ? labelSceneInfo : undefined}
+        locale={locale}
       />
 
       {/* ── Variant switcher ── */}
@@ -466,6 +544,18 @@ function PlayerApp() {
           doubleClickToFullscreen={true}
           autoPlay={autoPlay}
         />
+
+        {/* ── Edit message overlay (shown while waiting, then auto-hides) ── */}
+        {mode === "edit" && showEditOverlay && (
+          <div id="edit-message-overlay">
+            <EditMessagePanel
+              entries={editEntries}
+              minimized={false}
+              locale={locale}
+              onToggleMinimize={() => setShowEditOverlay(false)}
+            />
+          </div>
+        )}
       </div>
 
       {/* ── Scene thumbnails (shared across all modes) ── */}
@@ -483,10 +573,10 @@ function PlayerApp() {
       {/* ── Mode-specific controls ── */}
       {mode === "edit" && (
         <EditControls
-          onStatusChange={setEditStatus}
           suppressReloadRef={suppressReloadRef}
           currentTime={currentTime}
           activeScene={activeScene}
+          locale={locale}
         />
       )}
       {mode === "label" && (