@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/pages/VideoPage/components/CaptionPositionEditor/PositionControls.tsx

@@ -0,0 +1,140 @@
+/* The controls column: the safe-area margins (only for all captions), the anchor on the 3×3 grid
+   and x/y of the chosen scope, the color, outline and shadow, and saving or discarding. */
+
+import { ArrowCounterClockwise, ANCHOR_ARROW } from "../../../../components/icons";
+import { SAFE_AREA_LABEL, SIDE_LABEL } from "../../../../lib/caption-position";
+import { AxisField } from "./AxisField";
+import { CaptionMargins } from "./CaptionMargins";
+import { CaptionStyleFields } from "./CaptionStyleFields";
+import type { CaptionEditor } from "./captionEditor";
+
+export function PositionControls({ editor }: { editor: CaptionEditor }) {
+  const {
+    data,
+    scope,
+    current,
+    own,
+    change,
+    w,
+    h,
+    sceneId,
+    inherited,
+    several,
+    caption,
+    targetCaptions,
+    sel,
+    hasOverride,
+    clearOverride,
+    draft,
+    changeGeneral,
+    box,
+  } = editor;
+  return (
+    <div className="position-controls">
+      {data.captions_in_motion && (
+        <p className="hint warning">
+          Este vídeo tem <code>captions_in_motion</code>: a legenda já está no motion e o montar não queima esta camada
+          (só com <code>--captions</code>).
+        </p>
+      )}
+      {/* the safe area and the style apply to the whole video, whatever the scope */}
+      <div className="field-row">
+        <span>Safe area</span>
+        <div className="segmented small">
+          {Object.keys(data.safes).map(p => (
+            <button
+              key={p}
+              className={draft.platform === p ? "active" : ""}
+              onClick={() => changeGeneral("platform", p)}
+            >
+              {SAFE_AREA_LABEL[p] ?? p}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="field-row">
+        <span>Estilo</span>
+        <div className="segmented small">
+          {data.styles.map(s => (
+            <button key={s} className={draft.style === s ? "active" : ""} onClick={() => changeGeneral("style", s)}>
+              {s}
+            </button>
+          ))}
+        </div>
+      </div>
+      {scope === "video" && <CaptionMargins editor={editor} />}
+
+      <div className="field-row tall">
+        <span>Posição</span>
+        <div className="matrix" role="radiogroup" aria-label="âncora">
+          {data.anchors.map(a => (
+            <button
+              key={a}
+              title={a}
+              className={`${current.anchor === a ? "active" : ""}${own.anchor == null && scope !== "video" && current.anchor === a ? " inherited" : ""}`}
+              onClick={() => change("anchor", a)}
+            >
+              {ANCHOR_ARROW[a] ?? "·"}
+            </button>
+          ))}
+        </div>
+      </div>
+      <AxisField
+        name="X"
+        value={current.x}
+        inherited={scope !== "video" && own.x == null}
+        limit={Math.round(w / 2)}
+        onChange={n => change("x", n)}
+      />
+      <AxisField
+        name="Y"
+        value={current.y}
+        inherited={scope !== "video" && own.y == null}
+        limit={Math.round(h / 2)}
+        onChange={n => change("y", n)}
+      />
+      <p className="hint">
+        {scope === "video" && "Vale para todas as legendas, menos as que têm ajuste de cena ou próprio."}
+        {scope === "scene" && (
+          <>
+            Só as legendas da {sceneId}. O que estiver apagado vem de Todas ({inherited.anchor}, x {inherited.x}, y{" "}
+            {inherited.y}).
+          </>
+        )}
+        {scope === "caption" && !several && (
+          <>
+            Só “{caption?.text}”. O que estiver apagado vem da {sceneId ? `cena ${sceneId}` : "posição geral"}.
+          </>
+        )}
+        {scope === "caption" && several && (
+          <>
+            As {targetCaptions.length} legendas marcadas ({targetCaptions.join(", ")}). Os valores mostrados são os da{" "}
+            {sel}; o que você mexer vale igual para todas.
+          </>
+        )}{" "}
+        X positivo vai para a direita; Y positivo, para baixo. Arraste a legenda no preview do editor para mover.
+      </p>
+      {scope !== "video" && hasOverride(scope) && (
+        <button className="button" onClick={clearOverride}>
+          <ArrowCounterClockwise className="ic" /> Tirar o ajuste{" "}
+          {scope === "scene" ? "da cena" : several ? `das ${targetCaptions.length} marcadas` : "desta legenda"}
+        </button>
+      )}
+
+      <CaptionStyleFields editor={editor} />
+
+      {box && (
+        <p className={`hint${box.outside ? " warning" : ""}`}>
+          {box.outside && (
+            <>
+              ⚠ fora da safe area (
+              {(box.sides ?? []).map(sd => `${SIDE_LABEL[sd.side].toLowerCase()} ${sd.px} px`).join(", ")}
+              ): a interface da plataforma pode cobrir ·{" "}
+            </>
+          )}
+          caixa em x {box.x}, y {box.y} · {box.w}×{box.h} px
+        </p>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/CaptionPositionEditor/captionEditor.ts

@@ -0,0 +1,215 @@
+/* What the loaded editor shows and does: the values of the chosen scope (with what it inherits)
+   and the handlers that edit the draft, save the position and save a caption's text. Built on
+   every render from useCaptionPosition's state, once the data and the draft exist. */
+
+import { send } from "../../../../lib/api";
+import {
+  chooseCaption,
+  effectiveStyle,
+  pick,
+  saveRequests,
+  targetCaptionsOf,
+  withCaptionsShown,
+  withChange,
+  withGeneral,
+  withMargin,
+  withoutField,
+  withoutOverride,
+  type CaptionItem,
+  type CaptionOverride,
+  type CaptionPosition,
+  type CaptionsData,
+  type Scope,
+  type Side,
+} from "../../../../lib/caption-position";
+import type { CaptionPositionState } from "./useCaptionPosition";
+
+/* `afterSave`: what runs once the position is saved (the editor renders the export again) */
+export function captionEditor(
+  s: CaptionPositionState,
+  data: CaptionsData,
+  draft: CaptionPosition,
+  afterSave?: () => Promise<void> | void,
+) {
+  const {
+    base,
+    captionsApi,
+    param,
+    sel,
+    setSel,
+    checked,
+    setChecked,
+    rangeStart,
+    scope,
+    setScope,
+    setDraft,
+    setSaving,
+    setMessage,
+    editing,
+    setEditing,
+    newText,
+    setNewText,
+    setSavingText,
+    setTextMessage,
+    setVersion,
+    query,
+    width,
+    caption,
+    t,
+    version,
+  } = s;
+  const { w, h } = data.format;
+  const k = width / w;
+  const sceneId = caption?.scene ?? null;
+  /* in the "caption" scope, what you change applies the same to all checked ones; the values shown are sel's */
+  const targetCaptions = targetCaptionsOf(sel, checked);
+  const several = targetCaptions.length > 1;
+  const targets = scope === "scene" ? (sceneId ? [sceneId] : []) : targetCaptions;
+  const inheritedFrom: Scope = scope === "caption" ? "scene" : "video";
+  const current = effectiveStyle(draft, caption, scope);
+  const inherited = effectiveStyle(draft, caption, inheritedFrom);
+  const own: CaptionOverride =
+    scope === "video"
+      ? pick(draft)
+      : scope === "scene"
+        ? pick(sceneId ? draft.scenes?.[sceneId] : undefined)
+        : pick(sel ? draft.individual?.[sel] : undefined);
+  const hasOverride = (s: Scope) =>
+    s === "scene"
+      ? !!(sceneId && Object.keys(pick(draft.scenes?.[sceneId])).length)
+      : s === "caption"
+        ? targetCaptions.some(id => Object.keys(pick(draft.individual?.[id])).length)
+        : false;
+
+  const change = (field: keyof CaptionOverride, value: string | number) => {
+    setDraft(r => withChange(r!, scope, targets, field, value));
+  };
+  /* removes the key from this level only: back to the level above or to the style default */
+  const remove = (field: keyof CaptionOverride) => {
+    setDraft(r => withoutField(r!, scope, targets, field));
+  };
+  const clearOverride = () => {
+    setDraft(r => withoutOverride(r!, scope, targets));
+  };
+  /* click in the list: alone picks one; shift checks the range; ⌘/ctrl checks or unchecks one */
+  const choose = (id: string, e: React.MouseEvent) => {
+    const next = chooseCaption(
+      data.captions.map(c => c.id),
+      { sel, checked, rangeStart: rangeStart.current },
+      id,
+      { shift: e.shiftKey, toggle: e.metaKey || e.ctrlKey },
+    );
+    if (!next) return;
+    if (next.checked) setChecked(next.checked);
+    if (next.sel !== undefined) setSel(next.sel);
+    if (next.rangeStart !== undefined) rangeStart.current = next.rangeStart;
+    if (next.scope) setScope(next.scope);
+  };
+  /* turns the caption (and all checked ones) on or off in the video; on is the default, so only off is saved */
+  const showCaption = (on: boolean) => setDraft(r => withCaptionsShown(r!, targetCaptions, on));
+  const selOn = targetCaptions.every(id => !draft.individual?.[id]?.hidden);
+  /* switching the platform restarts from it: the margin overrides were about the previous one */
+  const changeGeneral = (field: "platform" | "style", value: string) => setDraft(r => withGeneral(r!, field, value));
+  const changeMargin = (side: Side, value: number) => setDraft(r => withMargin(r!, data.safes, side, value));
+
+  /* dragging the caption in the preview changes the chosen scope's x/y */
+  const drag = (e: React.PointerEvent) => {
+    const x0 = e.clientX,
+      y0 = e.clientY,
+      ax = current.x,
+      ay = current.y;
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    const move = (m: PointerEvent) => {
+      change("x", Math.round(ax + (m.clientX - x0) / k));
+      change("y", Math.round(ay + (m.clientY - y0) / k));
+    };
+    const release = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", release);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", release);
+  };
+
+  /* saves each level that changed */
+  const save = async () => {
+    setSaving(true);
+    setMessage(null);
+    const requests = saveRequests(data.position, draft);
+    for (const p of requests) {
+      const r = await send(captionsApi.position.$post({ param, json: p }));
+      if (!r.ok) {
+        setMessage({ ok: false, text: r.error ?? "Não gravou" });
+        setSaving(false);
+        return;
+      }
+    }
+    setMessage({ ok: true, text: "Legenda salva" });
+    setSaving(false);
+    /* scenes.json changed: the video event changes the marker, which reloads the data */
+    await afterSave?.();
+  };
+
+  /* a caption's text: saved right away, to captions.srt (applies on the next assembly) */
+  const editText = (c: CaptionItem) => {
+    setEditing(c.id);
+    setNewText(c.text);
+    setTextMessage(null);
+  };
+  const saveText = async (text = newText) => {
+    if (!editing) return;
+    setSavingText(true);
+    const r = await send(captionsApi.text.$post({ param, json: { id: editing, text } }));
+    setSavingText(false);
+    setTextMessage(
+      r.ok ? { ok: true, text: r.output ?? "Texto gravado" } : { ok: false, text: r.error ?? "Não gravou" },
+    );
+    if (!r.ok) return;
+    setEditing(null);
+    setVersion(n => n + 1);
+    await query.refetch();
+  };
+
+  const index = data.captions.findIndex(c => c.id === sel);
+  const go = (d: number) => {
+    const id = data.captions[Math.min(Math.max(index + d, 0), data.captions.length - 1)]?.id ?? sel;
+    setSel(id);
+    setChecked(id ? [id] : []);
+    rangeStart.current = id;
+  };
+  /* the instant goes by postMessage: the page does not reload as it moves */
+  const src = `${base}/page?preview=1&v=${version}`;
+
+  return {
+    ...s,
+    data,
+    draft,
+    w,
+    h,
+    k,
+    sceneId,
+    targetCaptions,
+    several,
+    current,
+    inherited,
+    own,
+    hasOverride,
+    change,
+    remove,
+    clearOverride,
+    choose,
+    showCaption,
+    selOn,
+    changeGeneral,
+    changeMargin,
+    drag,
+    save,
+    editText,
+    saveText,
+    index,
+    go,
+    src,
+  };
+}
+
+export type CaptionEditor = ReturnType<typeof captionEditor>;

package/studio/web/pages/VideoPage/components/CaptionPositionEditor/useCaptionPosition.ts

@@ -0,0 +1,154 @@
+/* The caption editor's state: the captions data (TanStack Query), the position draft, the
+   selection in the list, the text being edited and the preview iframe's messages. */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { api, enc, errorText, read } from "../../../../lib/api";
+import {
+  clone,
+  type CaptionBox,
+  type CaptionPosition,
+  type CaptionsData,
+  type Message,
+  type Scope,
+} from "../../../../lib/caption-position";
+import type { VideoDetail } from "../../../../types/api";
+
+/* `timeOverride`: the instant (video time) the preview shows, when something else drives it (the
+   editor's playhead); without it, the middle of the chosen caption */
+export function useCaptionPosition(video: VideoDetail, timeOverride: number | null = null) {
+  const slug = video.slug;
+  const base = `/api/videos/${encodeURIComponent(slug)}/captions`;
+  const captionsApi = api.videos[":slug"].captions;
+  const param = { slug: enc(slug) };
+  const [error, setError] = useState<string | null>(null);
+  const [draft, setDraft] = useState<CaptionPosition | null>(null);
+  const [sel, setSel] = useState<string | null>(null);
+  /* captions checked in the list (shift: range, ⌘/ctrl: one by one); always includes sel */
+  const [checked, setChecked] = useState<string[]>([]);
+  const rangeStart = useRef<string | null>(null);
+  const [scope, setScope] = useState<Scope>("video");
+  const [box, setBox] = useState<CaptionBox>(null);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<Message>(null);
+  const frame = useRef<HTMLIFrameElement>(null);
+  const canvas = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(300);
+  /* text being edited in the list; `version` reloads the preview, which brings the texts from captions.srt */
+  const [editing, setEditing] = useState<string | null>(null);
+  const [newText, setNewText] = useState("");
+  const [savingText, setSavingText] = useState(false);
+  const [textMessage, setTextMessage] = useState<Message>(null);
+  const [version, setVersion] = useState(0);
+  const savedPosition = useRef("");
+
+  /* reloads when scenes.json or captions.srt change (the marker is part of the key);
+     gcTime 0: coming back to the stage always reads fresh data */
+  const marker = JSON.stringify([
+    video.scenes?.captions ?? null,
+    video.texts.captions ?? null,
+    video.status?.total_duration ?? null,
+  ]);
+  const query = useQuery({
+    queryKey: ["captions", slug, marker],
+    queryFn: async () => {
+      const d: CaptionsData = await read(captionsApi.$get({ param }));
+      return d;
+    },
+    gcTime: 0,
+    placeholderData: keepPreviousData,
+  });
+  const data = query.data && !query.data.error ? query.data : null;
+  useEffect(() => {
+    const d = query.data;
+    if (!d) return;
+    if (d.error) {
+      setError(d.error);
+      return;
+    }
+    /* only a saved position that changed restarts the draft: saving a text doesn't discard what you are editing */
+    const saved = slug + JSON.stringify(d.position);
+    if (saved !== savedPosition.current) {
+      savedPosition.current = saved;
+      setDraft(clone(d.position));
+    }
+    const exists = (id: string | null) => !!id && d.captions.some(c => c.id === id);
+    setSel(s => (exists(s) ? s : (d.captions[0]?.id ?? null)));
+    setChecked(m => m.filter(exists));
+    setEditing(e => (exists(e) ? e : null));
+    setError(null);
+  }, [query.data, slug]);
+  useEffect(() => {
+    if (query.error) setError(errorText(query.error));
+  }, [query.error]);
+
+  useEffect(() => {
+    const el = canvas.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setWidth(el.clientWidth));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [data]);
+
+  const caption = data?.captions.find(c => c.id === sel);
+  const t = timeOverride != null ? +timeOverride.toFixed(3) : caption ? +((caption.s + caption.e) / 2).toFixed(3) : 0;
+
+  /* the draft and the instant go to the preview on every change */
+  const sendPreview = () => frame.current?.contentWindow?.postMessage({ position: draft, style: draft?.style, t }, "*");
+  useEffect(sendPreview, [draft, t]);
+  useEffect(() => {
+    const listen = (e: MessageEvent) => {
+      if (e.source === frame.current?.contentWindow && e.data?.type === "caption") setBox(e.data.box);
+    };
+    window.addEventListener("message", listen);
+    return () => window.removeEventListener("message", listen);
+  }, []);
+
+  const changed = useMemo(
+    () => !!data && !!draft && JSON.stringify(data.position) !== JSON.stringify(draft),
+    [data, draft],
+  );
+
+  return {
+    base,
+    captionsApi,
+    param,
+    error,
+    draft,
+    setDraft,
+    sel,
+    setSel,
+    checked,
+    setChecked,
+    rangeStart,
+    scope,
+    setScope,
+    box,
+    saving,
+    setSaving,
+    message,
+    setMessage,
+    frame,
+    canvas,
+    width,
+    setWidth,
+    editing,
+    setEditing,
+    newText,
+    setNewText,
+    savingText,
+    setSavingText,
+    textMessage,
+    setTextMessage,
+    version,
+    setVersion,
+    query,
+    data,
+    caption,
+    t,
+    sendPreview,
+    changed,
+  };
+}
+
+export type CaptionPositionState = ReturnType<typeof useCaptionPosition>;

package/studio/web/pages/VideoPage/components/CarouselChangeRequest.tsx

@@ -0,0 +1,72 @@
+/* Ask the agent for a change: on one slide, or on the whole carousel. */
+
+import { useState } from "react";
+import { api, enc, send as sendRequest } from "../../../lib/api";
+import { PaperPlane, Pencil, X } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+
+export function CarouselChangeRequest({
+  video,
+  slide,
+  stage,
+  label = "Pedir alteração",
+}: {
+  video: VideoDetail;
+  slide?: string;
+  stage: "script" | "composition";
+  label?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [request, setRequest] = useState("");
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
+  const send = async () => {
+    setSending(true);
+    const r = await sendRequest(
+      api.videos[":slug"].carousel.adjust.$post({ param: { slug: enc(video.slug) }, json: { slide, request, stage } }),
+    );
+    setSending(false);
+    setResult({ ok: r.ok, text: r.ok ? "Enviado ao agente" : (r.error ?? "Não deu para enviar") });
+    if (r.ok) {
+      setRequest("");
+      setOpen(false);
+    }
+  };
+  if (!open) {
+    return (
+      <div className="request-change">
+        <button
+          type="button"
+          className="button small"
+          onClick={() => {
+            setOpen(true);
+            setResult(null);
+          }}
+        >
+          <Pencil className="ic" /> {label}
+        </button>
+        {result && <span className={`response ${result.ok ? "ok" : "error"}`}>{result.text}</span>}
+      </div>
+    );
+  }
+  return (
+    <div className="request-change open">
+      <textarea
+        rows={2}
+        autoFocus
+        value={request}
+        onChange={e => setRequest(e.target.value)}
+        placeholder={slide ? `O que mudar no ${slide}` : "O que mudar no carrossel"}
+      />
+      <div className="actions">
+        <button type="button" className="button small" onClick={() => setOpen(false)}>
+          <X className="ic" /> Cancelar
+        </button>
+        <button type="button" className="button small primary" disabled={sending || !request.trim()} onClick={send}>
+          <PaperPlane className="ic" /> {sending ? "Enviando…" : "Enviar ao agente"}
+        </button>
+      </div>
+      {result && !result.ok && <p className="response error">{result.text}</p>}
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/CarouselCompositionStage.tsx

@@ -0,0 +1,80 @@
+/* --- carousel 2: composition ----------------------------------------------------------------- */
+
+import { useState } from "react";
+import { Markdown } from "../../../components/Markdown";
+import { openLightbox } from "../../../components/Lightbox";
+import { mediaUrl } from "../../../lib/media";
+import type { StageResultProps } from "./StageResult";
+import { CarouselMissing } from "./CarouselMissing";
+import { CarouselChangeRequest } from "./CarouselChangeRequest";
+import { CarouselSlideCard } from "./CarouselSlideCard";
+
+export function CarouselCompositionStage({ video, stage }: StageResultProps) {
+  const c = video.carousel;
+  const [tab, setTab] = useState<"slides" | "sheet" | "composition">("slides");
+  if (!c) return <CarouselMissing video={video} stage={stage} />;
+  if (!c.slide_list.some(s => s.png)) {
+    return <p className="empty result-empty">Os slides ainda não foram compostos. Quem faz: {stage.owner}.</p>;
+  }
+  const sheet = mediaUrl(video, c.sheet);
+  return (
+    <div className="ig-carousel-composition">
+      <div className="ig-carousel-top">
+        <div className="segmented" role="tablist" aria-label="Composição">
+          <button
+            role="tab"
+            aria-selected={tab === "slides"}
+            className={tab === "slides" ? "active" : ""}
+            onClick={() => setTab("slides")}
+          >
+            Slides
+          </button>
+          <button
+            role="tab"
+            aria-selected={tab === "sheet"}
+            className={tab === "sheet" ? "active" : ""}
+            onClick={() => setTab("sheet")}
+            disabled={!c.sheet}
+          >
+            Folha
+          </button>
+          <button
+            role="tab"
+            aria-selected={tab === "composition"}
+            className={tab === "composition" ? "active" : ""}
+            onClick={() => setTab("composition")}
+            disabled={!c.texts.composition}
+          >
+            composition.md
+          </button>
+        </div>
+        <span className="subtle">
+          {c.slides} slides · {c.format?.ratio} {c.format?.w}×{c.format?.h}
+          {!!c.references.length && <> · Estilo visual: {c.references.join(", ")}</>}
+        </span>
+      </div>
+      {tab === "slides" && (
+        <div className="slides-strip">
+          {c.slide_list.map(s => (
+            <CarouselSlideCard key={s.id} video={video} slide={s} carousel={c} />
+          ))}
+        </div>
+      )}
+      {tab === "sheet" && sheet && (
+        <button
+          type="button"
+          className="image ig-carousel-sheet"
+          onClick={() => openLightbox(sheet, "Folha do carrossel")}
+        >
+          <img src={sheet} alt="Folha do carrossel" />
+        </button>
+      )}
+      {tab === "composition" && c.texts.composition && (
+        <div className="texts">
+          <Markdown text={c.texts.composition} />
+        </div>
+      )}
+      <CarouselChangeRequest video={video} stage="composition" label="Pedir alteração no carrossel inteiro" />
+    </div>
+  );
+}