@lalalic/markcut 1.2.0 → 2.0.0

package/src/player/components/EditControls.tsx

@@ -0,0 +1,92 @@
+/**
+ * EditControls — edit mode controls for the bottom bar.
+ *
+ * Renders the edit input + submit button.
+ * SSE connection is managed by the app shell (browser.tsx).
+ * This component toggles suppressReloadRef during edit to prevent
+ * auto-reload from racing with the AI edit output.
+ */
+import * as React from "react";
+
+interface EditControlsProps {
+  /** Called whenever the edit status changes (for HeaderBar) */
+  onStatusChange?: (status: string) => void;
+  /** Ref shared with app shell — set true during edit to suppress SSE-triggered reload */
+  suppressReloadRef?: React.MutableRefObject<boolean>;
+  /** Current player time in seconds (sent with edit request for context) */
+  currentTime?: number;
+  /** Active scene name (sent with edit request for context) */
+  activeScene?: string;
+}
+
+export function EditControls({ onStatusChange, suppressReloadRef, currentTime, activeScene }: EditControlsProps) {
+  const [busy, setBusy] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // ── Edit submit ──────────────────────────────────────────────────────
+  const handleApplyEdit = React.useCallback(
+    async (text: string) => {
+      if (!text || busy) return;
+      setBusy(true);
+      onStatusChange?.("\u231B editing...");
+      if (inputRef.current) inputRef.current.value = "";
+      if (suppressReloadRef) suppressReloadRef.current = true;
+
+      try {
+        const res = await fetch("/api/edit", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ text, currentTime, activeScene }),
+        });
+        const data = await res.json();
+        if (res.ok) {
+          const summary = (data.output || "done").split("\n")[0].slice(0, 65);
+          onStatusChange?.(summary);
+          setTimeout(() => {
+            if (suppressReloadRef) suppressReloadRef.current = false;
+            window.dispatchEvent(new Event("refresh-player"));
+          }, 4000);
+        } else {
+          onStatusChange?.("\u274C " + (data.error || "failed"));
+          if (suppressReloadRef) suppressReloadRef.current = false;
+        }
+      } catch {
+        onStatusChange?.("\u274C error");
+        if (suppressReloadRef) suppressReloadRef.current = false;
+      }
+      setBusy(false);
+    },
+    [busy, onStatusChange, suppressReloadRef]
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleApplyEdit((e.target as HTMLInputElement).value);
+      }
+    },
+    [handleApplyEdit]
+  );
+
+  // ── Render ───────────────────────────────────────────────────────────
+  return (
+    <div id="bottom-bar">
+      <input
+        ref={inputRef}
+        id="edit-input"
+        placeholder="What should change? e.g. make text bigger"
+        onKeyDown={handleKeyDown}
+      />
+      <button
+        id="edit-btn"
+        title="Apply edit"
+        disabled={busy}
+        onClick={() => handleApplyEdit(inputRef.current?.value || "")}
+      >
+        ✨
+      </button>
+    </div>
+  );
+}
+

package/src/player/components/HeaderBar.tsx

@@ -0,0 +1,60 @@
+/**
+ * HeaderBar — shared header for all modes.
+ *
+ * Always renders the close button (→ /api/shutdown).
+ * Edit mode: shows SSE connection status + edit result feedback.
+ * Label mode: shows current scene name + time.
+ */
+import * as React from "react";
+
+interface HeaderBarProps {
+  /** "preview" | "edit" | "label" */
+  mode: string;
+  /** Label mode scene info text (e.g. "slide1 (1.2s)") */
+  sceneInfo?: string;
+  /** Edit mode status text (e.g. "✅ done", "⏳ editing...") */
+  editStatus?: string;
+  /** Edit mode: whether SSE is connected */
+  sseConnected?: boolean;
+}
+
+export function HeaderBar({ mode, sceneInfo, editStatus, sseConnected }: HeaderBarProps) {
+  const handleClose = React.useCallback(() => {
+    navigator.sendBeacon("/api/shutdown", "{}");
+    document.body.innerHTML =
+      "<div style='display:flex;align-items:center;justify-content:center;height:100vh;background:#0a0a0a;color:#555;font-family:sans-serif;font-size:16px'>\u2B61 player closed \u2014 return to terminal</div>";
+  }, []);
+
+  return (
+    <div id="header">
+      {/* Left: mode-specific info */}
+      <span style={{ flex: 1, display: "flex", alignItems: "center", gap: 8 }}>
+        {mode === "label" && sceneInfo && (
+          <span id="scene-info">{sceneInfo}</span>
+        )}
+        {mode === "edit" && editStatus && (
+          <span id="edit-status">{editStatus}</span>
+        )}
+        {/* SSE indicator — shown in all modes */}
+        <span
+          id="sse-indicator"
+          title={sseConnected ? "Connected — auto-reload ready" : "Disconnected"}
+          style={{
+            display: "inline-block",
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: sseConnected ? "#4ade80" : "#555",
+            flexShrink: 0,
+          }}
+        />
+      </span>
+      {/* Right: close button */}
+      <div id="header-actions">
+        <button id="close-btn" title="Close player and return to terminal" onClick={handleClose}>
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/player/components/LabelControls.tsx

@@ -0,0 +1,367 @@
+/**
+ * LabelControls — label mode controls.
+ *
+ * Renders:
+ * - Thumbnail strip with label badges (between header and player)
+ * - Timed labels list with delete (below player)
+ * - Bottom input bar with save button
+ *
+ * Scene/time info is pushed up via onSceneChange for HeaderBar.
+ */
+import * as React from "react";
+
+// ── Types ────────────────────────────────────────────────────────────────
+interface Scene {
+  name: string;
+  start: number;
+  end: number;
+  duration: number;
+  src: string;
+  mediaType: string;
+}
+
+interface LabelEntry {
+  overall: string;
+  timed: Record<string, string>;
+}
+
+interface VideoInfo {
+  scenes: Scene[];
+  totalDuration: number;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+const VIDEO_EXT: Record<string, number> = {
+  ".mov": 1, ".mp4": 1, ".avi": 1, ".mkv": 1, ".webm": 1, ".m4v": 1, ".wmv": 1,
+};
+
+function escHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function formatTime(sec: number): string {
+  const mm = Math.floor(sec / 60);
+  const ss = Math.floor(sec % 60);
+  return mm + ":" + String(ss).padStart(2, "0");
+}
+
+// ── Component ────────────────────────────────────────────────────────────
+interface LabelControlsProps {
+  playerRef: React.RefObject<any>;
+  /** Current player time in seconds (from onFrameUpdate, no polling needed) */
+  currentTime: number;
+  /** Called when scene/time changes, for HeaderBar */
+  onSceneChange?: (sceneInfo: string) => void;
+}
+
+export function LabelControls({ playerRef, currentTime, onSceneChange }: LabelControlsProps) {
+  const [videoInfo, setVideoInfo] = React.useState<VideoInfo | null>(null);
+  const [labelData, setLabelData] = React.useState<Record<number, LabelEntry>>({});
+  const [currentSceneIdx, setCurrentSceneIdx] = React.useState(0);
+  const [selectedOverride, setSelectedOverride] = React.useState(-1);
+  const [inputText, setInputText] = React.useState("");
+  const [saving, setSaving] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // ── Load video info and existing labels ──────────────────────────────
+  React.useEffect(() => {
+    fetch("/api/video-info")
+      .then((r) => r.json())
+      .then((info) => {
+        setVideoInfo(info);
+        if (info.scenes?.[0]) {
+          onSceneChange?.(info.scenes[0].name + " (0.0s)");
+        }
+      })
+      .catch(() => {});
+
+    fetch("/api/labels")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((tree) => {
+        if (!tree) return;
+        const root = tree.root || tree;
+        const children = root.children || [];
+        const loaded: Record<number, LabelEntry> = {};
+        for (let i = 0; i < children.length; i++) {
+          const media = (children[i].children || [])[0];
+          if (media && media.userHints) {
+            loaded[i] = {
+              overall: media.userHints.overall || "",
+              timed: media.userHints.timed || {},
+            };
+          } else if (media && media.description) {
+            loaded[i] = { overall: media.description, timed: {} };
+          }
+        }
+        setLabelData(loaded);
+      })
+      .catch(() => {});
+  }, [onSceneChange]);
+
+  // ── Compute current scene from time ──────────────────────────────────
+  const scenes = videoInfo?.scenes || [];
+  const effectiveIdx =
+    selectedOverride >= 0 ? selectedOverride : currentSceneIdx;
+  const currentScene = scenes[effectiveIdx];
+
+  // Update current scene index from player time (pushed by parent via onFrameUpdate)
+  React.useEffect(() => {
+    if (selectedOverride >= 0) return;
+    for (let i = 0; i < scenes.length; i++) {
+      if (currentTime >= scenes[i].start && currentTime < scenes[i].end) {
+        setCurrentSceneIdx(i);
+        break;
+      }
+    }
+  }, [currentTime, scenes, selectedOverride]);
+
+  // Clear override when player moves away
+  React.useEffect(() => {
+    if (selectedOverride >= 0 && currentScene) {
+      const scene = scenes[selectedOverride];
+      if (scene && (currentTime < scene.start || currentTime >= scene.end)) {
+        setSelectedOverride(-1);
+      }
+    }
+  }, [currentTime, selectedOverride, scenes, currentScene]);
+
+  // Push scene info to header
+  React.useEffect(() => {
+    if (!currentScene) {
+      onSceneChange?.(currentTime.toFixed(1) + "s");
+    } else if (selectedOverride >= 0) {
+      onSceneChange?.(currentScene.name + " (selected)");
+    } else {
+      onSceneChange?.(currentScene.name + " (" + currentTime.toFixed(1) + "s)");
+    }
+  }, [currentScene, currentTime, selectedOverride, onSceneChange]);
+
+  // ── Seek to scene ────────────────────────────────────────────────────
+  const seekToScene = React.useCallback(
+    (index: number) => {
+      setSelectedOverride(index);
+      setCurrentSceneIdx(index);
+      const scene = scenes[index];
+      if (scene && playerRef.current) {
+        const frame = Math.round(scene.start * 30);
+        playerRef.current.seekTo(frame);
+      }
+    },
+    [scenes, playerRef]
+  );
+
+  // ── Update input when scene changes ──────────────────────────────────
+  React.useEffect(() => {
+    const entry = labelData[effectiveIdx];
+    setInputText((entry && entry.overall) || "");
+  }, [effectiveIdx, labelData]);
+
+  // ── Save label ───────────────────────────────────────────────────────
+  const saveLabel = React.useCallback(() => {
+    const text = inputText.trim();
+    if (!text || saving) return;
+    setSaving(true);
+
+    const sceneIdx = effectiveIdx;
+    const timeMs = Math.round(currentTime * 1000);
+    const scene = scenes[sceneIdx];
+    const isImage = scene && scene.mediaType === "image";
+    const sceneStart = scene ? scene.start * 1000 : 0;
+    const isOverall = isImage || timeMs - sceneStart < 1000;
+
+    // Update local state
+    setLabelData((prev) => {
+      const next = { ...prev };
+      if (!next[sceneIdx]) next[sceneIdx] = { overall: "", timed: {} };
+      if (isOverall) {
+        next[sceneIdx] = { ...next[sceneIdx], overall: text };
+      } else {
+        next[sceneIdx] = {
+          ...next[sceneIdx],
+          timed: { ...next[sceneIdx].timed, ["at_" + timeMs]: text },
+        };
+      }
+      return next;
+    });
+
+    // Save to server
+    fetch("/api/labels", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        sceneIndex: sceneIdx,
+        description: text,
+        time: currentTime,
+        overall: isOverall || undefined,
+      }),
+    })
+      .then(() => {
+        setInputText("");
+        // Show toast
+        const toast = document.getElementById("saved-toast");
+        if (toast) {
+          toast.classList.add("show");
+          setTimeout(() => toast.classList.remove("show"), 2000);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setSaving(false));
+  }, [inputText, saving, effectiveIdx, currentTime, scenes]);
+
+  // ── Delete timed label ───────────────────────────────────────────────
+  const deleteTimed = React.useCallback(
+    (key: string) => {
+      const sceneIdx = effectiveIdx;
+      setLabelData((prev) => {
+        const entry = prev[sceneIdx];
+        if (!entry || !entry.timed[key]) return prev;
+        const next = { ...prev };
+        const nextEntry = { ...entry, timed: { ...entry.timed } };
+        delete nextEntry.timed[key];
+        next[sceneIdx] = nextEntry;
+        return next;
+      });
+
+      fetch("/api/labels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sceneIndex: sceneIdx,
+          description: "",
+          removeTimed: key,
+        }),
+      }).catch(() => {});
+    },
+    [effectiveIdx]
+  );
+
+  // ── Render thumbnail strip ───────────────────────────────────────────
+  const renderThumbnails = () => {
+    return (
+      <div id="thumbnails">
+        {scenes.map((scene, i) => {
+          const isActive = i === effectiveIdx;
+          const entry = labelData[i];
+          const hasLabel =
+            entry && (entry.overall || Object.keys(entry.timed).length > 0);
+
+          let thumbContent: React.ReactNode;
+          const ext = scene.src.substring(scene.src.lastIndexOf(".")).toLowerCase();
+          const isVideo = !!VIDEO_EXT[ext];
+
+          if (scene.src && !isVideo) {
+            thumbContent = <img src={scene.src} alt="" loading="lazy" />;
+          } else if (scene.src && isVideo) {
+            thumbContent = (
+              <video
+                src={scene.src}
+                muted
+                preload="metadata"
+                style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              />
+            );
+          } else {
+            thumbContent = (
+              <div
+                style={{
+                  width: "100%", height: "100%", display: "flex",
+                  alignItems: "center", justifyContent: "center",
+                  background: "rgba(255,255,255,.08)",
+                  color: "rgba(255,255,255,.3)",
+                  fontSize: 16, fontWeight: 600,
+                }}
+              >
+                {(scene.name || "S" + (i + 1)).slice(0, 2).toUpperCase()}
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={i}
+              className={"thumb-item" + (isActive ? " active" : "")}
+              data-index={i}
+              onClick={() => seekToScene(i)}
+            >
+              {thumbContent}
+              <div className={"thumb-badge" + (hasLabel ? " has-label" : "")} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  // ── Render timed labels list ─────────────────────────────────────────
+  const renderTimedLabels = () => {
+    const entry = labelData[effectiveIdx];
+    const timed = (entry && entry.timed) || {};
+    const keys = Object.keys(timed).sort();
+
+    return (
+      <div id="timed-labels">
+        {keys.map((k) => {
+          const sec = parseInt(k.replace("at_", "")) / 1000;
+          return (
+            <div key={k} className="timed-label" data-key={k}>
+              <span className="tl-time">{formatTime(sec)}</span>
+              <span className="tl-text" dangerouslySetInnerHTML={{ __html: escHtml(timed[k]) }} />
+              <button className="tl-del" title="Remove" onClick={() => deleteTimed(k)}>
+                ×
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  // ── Scene info text ──────────────────────────────────────────────────
+  let sceneInfoText = currentTime.toFixed(1) + "s";
+  if (currentScene) {
+    if (selectedOverride >= 0) {
+      sceneInfoText = currentScene.name + " (selected)";
+    } else {
+      sceneInfoText = currentScene.name + " (" + currentTime.toFixed(1) + "s)";
+    }
+  }
+
+  // ── Render ───────────────────────────────────────────────────────────
+  return (
+    <>
+      {/* Thumbnail strip */}
+      {renderThumbnails()}
+
+      {/* Timed labels list */}
+      {renderTimedLabels()}
+
+      {/* Saved toast */}
+      <div id="saved-toast">✓ Label saved</div>
+
+      {/* Bottom input bar */}
+      <div id="bottom-bar">
+        <input
+          ref={inputRef}
+          id="label-input"
+          placeholder="Add label for current scene…"
+          value={inputText}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputText(e.target.value)}
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              saveLabel();
+            }
+          }}
+        />
+        <button
+          id="label-btn"
+          title="Save label"
+          disabled={saving || !inputText.trim()}
+          onClick={saveLabel}
+        >
+          📝
+        </button>
+      </div>
+    </>
+  );
+}

package/src/player/components/SceneThumbnails.tsx

@@ -0,0 +1,87 @@
+/**
+ * SceneThumbnails — horizontal scene selector for all modes.
+ *
+ * Fetches scene info from /api/video-info and renders clickable thumbnails
+ * with scene names. Active scene is highlighted based on currentTime.
+ *
+ * Layout: supported in edit and preview modes (label mode has its own).
+ */
+import * as React from "react";
+
+interface Scene {
+  name: string;
+  start: number;
+  end: number;
+  duration: number;
+  src: string;
+  mediaType: string;
+}
+
+const VIDEO_EXT: Record<string, number> = {
+  ".mov": 1, ".mp4": 1, ".avi": 1, ".mkv": 1, ".webm": 1, ".m4v": 1, ".wmv": 1,
+};
+
+interface SceneThumbnailsProps {
+  /** Current player time in seconds — used to highlight active scene */
+  currentTime: number;
+  /** Called when a thumbnail is clicked; receives scene start time in seconds */
+  onSeek?: (timeSeconds: number) => void;
+}
+
+export function SceneThumbnails({ currentTime, onSeek }: SceneThumbnailsProps) {
+  const [scenes, setScenes] = React.useState<Scene[]>([]);
+
+  React.useEffect(() => {
+    fetch("/api/video-info")
+      .then((r) => r.json())
+      .then((info) => {
+        if (info.scenes) setScenes(info.scenes);
+      })
+      .catch(() => {});
+  }, []);
+
+  if (scenes.length === 0) return null;
+
+  // Determine active scene index from currentTime
+  let activeIdx = -1;
+  for (let i = 0; i < scenes.length; i++) {
+    if (currentTime >= scenes[i].start && currentTime < scenes[i].end) {
+      activeIdx = i;
+      break;
+    }
+  }
+
+  return (
+    <div id="scene-thumbnails">
+      {scenes.map((scene, i) => {
+        const isActive = i === activeIdx;
+        const ext = scene.src.substring(scene.src.lastIndexOf(".")).toLowerCase();
+        const isVideo = !!VIDEO_EXT[ext];
+        const hasMedia = !!scene.src;
+
+        return (
+          <div
+            key={i}
+            className={"sthumb-item" + (isActive ? " active" : "")}
+            onClick={() => onSeek?.(scene.start)}
+          >
+            <div className="sthumb-media">
+              {hasMedia && !isVideo && (
+                <img src={scene.src} alt="" loading="lazy" />
+              )}
+              {hasMedia && isVideo && (
+                <video src={scene.src} muted preload="metadata" />
+              )}
+              {!hasMedia && (
+                <span className="sthumb-fallback">
+                  {(scene.name || "S" + (i + 1)).slice(0, 2).toUpperCase()}
+                </span>
+              )}
+            </div>
+            <span className="sthumb-name">{scene.name || "Scene " + (i + 1)}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/player/components/VariantBar.tsx

@@ -0,0 +1,39 @@
+/**
+ * VariantBar — variant switcher bar for the markcut player.
+ *
+ * Reads available variants from /api/video-info and renders clickable links.
+ * Highlights the current variant based on window.VARIANT.
+ */
+import * as React from "react";
+
+export function VariantBar() {
+  const [variants, setVariants] = React.useState<string[]>([]);
+  const currentVariant = (typeof window !== "undefined" ? (window as any).VARIANT : null) || "default";
+
+  React.useEffect(() => {
+    fetch("/api/video-info")
+      .then((r) => r.json())
+      .then((info) => {
+        if (info.variants && info.variants.length > 1) {
+          setVariants(info.variants);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  if (variants.length <= 1) return null;
+
+  return (
+    <div id="variant-bar">
+      {variants.map((v) => (
+        <a
+          key={v}
+          href={`/${v === "default" ? "" : v}`}
+          className={"variant-link" + (v === currentVariant ? " active" : "")}
+        >
+          {v}
+        </a>
+      ))}
+    </div>
+  );
+}

package/src/player/components/index.ts

@@ -0,0 +1,5 @@
+export { HeaderBar } from "./HeaderBar";
+export { EditControls } from "./EditControls";
+export { LabelControls } from "./LabelControls";
+export { SceneThumbnails } from "./SceneThumbnails";
+export { VariantBar } from "./VariantBar";