@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/pages/VideoPage/components/SoundTimeline/SpeedPanel.tsx

@@ -0,0 +1,128 @@
+/* The speed, in the Ajustes tab, of what is selected. Nothing selected: the whole video (picture, voice
+   and effects together, the voice keeps its pitch; the background music doesn't change), the export's
+   `speed`. A piece of animation or voice: only that piece, which lasts less and starts at the same
+   place (tools/soundtrack.mjs). The background music: only it. One effect, or several selected: only
+   them (a speed undoes "Esticar para durar"). Everything is saved in the draft and goes out on the next
+   render; the preview here plays a piece at its speed (the voice changes pitch here, not in the export). */
+
+import { clipLength, clipSpeed } from "../../../../../../tools/soundtrack.mjs";
+import { Slider } from "../../../../components/ui/slider";
+import { round2 } from "../../../../lib/sound-timeline";
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+type Target = {
+  title: string;
+  hint: string;
+  value: number;
+  /* percent */
+  range: [number, number];
+  set: (v: number) => void;
+  /* before → after, in seconds */
+  length?: [number, number];
+};
+
+export function SpeedPanel({ st }: { st: SoundTimelineState }) {
+  const target = speedTarget(st);
+  if (!target) return null;
+  const pct = Math.round(target.value * 100);
+  return (
+    <section className="sound-panel sound-speed">
+      <header>
+        <b>Velocidade · {target.title}</b>
+        <span className="subtle">{target.hint}</span>
+      </header>
+      <div className="speed-row">
+        <Slider
+          variant="fill"
+          min={target.range[0]}
+          max={target.range[1]}
+          step={1}
+          value={[pct]}
+          aria-label={`Velocidade: ${target.title}`}
+          label={`${pct}%`}
+          onValueChange={([n]) => target.set(n / 100)}
+        />
+        {target.length && (
+          <span className="subtle mono">
+            {round2(target.length[0])} → {round2(target.length[1])}
+          </span>
+        )}
+      </div>
+    </section>
+  );
+}
+
+/* what the control acts on: the selection first, the whole video when nothing is selected */
+function speedTarget(st: SoundTimelineState): Target | null {
+  const { draft, changeDraft, editedTotal, clipSel, sel, multi, changeSound, clipsOf } = st;
+  if (!draft) return null;
+
+  if (clipSel) {
+    const { kind, id, k } = clipSel;
+    const cl = clipsOf(kind, id)[k];
+    if (!cl) return null;
+    return {
+      title: `${kind === "video" ? "animação" : "voz"} ${id}${clipsOf(kind, id).length > 1 ? `, pedaço ${k + 1}` : ""}`,
+      hint: "só este pedaço: dura menos e começa no mesmo lugar",
+      value: clipSpeed(cl),
+      range: [50, 200],
+      set: v =>
+        changeDraft(r => {
+          const list = kind === "video" ? r.scene_clips[id] : r.line_clips[id];
+          const c = list?.[k];
+          if (!c) return;
+          if (Math.abs(v - 1) < 1e-3) delete c.speed;
+          else c.speed = v;
+        }),
+      length: [cl.to - cl.from, clipLength({ ...cl, speed: clipSpeed(cl) })],
+    };
+  }
+
+  if (sel === "bed" && draft.bed) {
+    const bed = draft.bed;
+    return {
+      title: "música de fundo",
+      hint: "só a música, sem mudar o tom",
+      value: bed.speed ?? 1,
+      range: [50, 200],
+      set: v =>
+        changeDraft(r => {
+          if (!r.bed) return;
+          if (Math.abs(v - 1) < 1e-3) delete r.bed.speed;
+          else r.bed.speed = v;
+        }),
+    };
+  }
+
+  /* one effect, or every selected one (keys "place:layer") */
+  const keys = multi.length > 1 ? multi : sel && sel !== "bed" ? [`${sel.place}:${sel.layer}`] : [];
+  const layers = keys
+    .map(key => key.split(":").map(Number) as [number, number])
+    .filter(([p, l]) => draft.places[p]?.sounds[l]);
+  if (layers.length) {
+    const [p0, l0] = layers[0];
+    return {
+      title: layers.length > 1 ? `${layers.length} efeitos` : (draft.places[p0].sounds[l0].name ?? "efeito"),
+      hint: layers.length > 1 ? "só os efeitos selecionados" : "só este efeito",
+      value: draft.places[p0].sounds[l0].speed ?? 1,
+      range: [25, 400],
+      set: v => {
+        for (const [p, l] of layers)
+          changeSound(p, l, { speed: Math.abs(v - 1) < 1e-3 ? undefined : v, dur: undefined });
+      },
+    };
+  }
+
+  const speed = draft.speed ?? 1;
+  return {
+    title: "vídeo inteiro",
+    hint: "voz, efeitos e animação · a música de fundo não muda · selecione algo para acelerar só ele",
+    value: speed,
+    range: [100, 150],
+    set: v =>
+      changeDraft(r => {
+        r.speed = v;
+      }),
+    length: [editedTotal, editedTotal / speed],
+  };
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/TimelineDock.tsx

@@ -0,0 +1,56 @@
+/* The timeline dock: locked while the agent edits, the toolbar, the "placing a sound" notice, the
+   tracks and the footer. */
+
+import { AgentWalking } from "../../../../components/AgentWalking";
+import { TimelineFooter } from "./TimelineFooter";
+import { TimelineToolbar } from "./TimelineToolbar";
+import { TimelineTracks } from "./TimelineTracks";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Draft, Place, SoundData } from "./types";
+
+export function TimelineDock({
+  st,
+  geo,
+  data,
+  draft,
+  selPlace,
+}: {
+  st: SoundTimelineState;
+  geo: TimelineGeometry;
+  data: SoundData;
+  draft: Draft;
+  selPlace: Place | null;
+}) {
+  const { agentEditing, rendering, armed, setArmed } = st;
+  const locked = agentEditing || rendering;
+  return (
+    <div className={`sound-dock${locked ? " locked" : ""}`} inert={locked}>
+      {agentEditing && (
+        <p className="sound-locked">
+          <AgentWalking className="in-corner" /> O agente está editando: a timeline volta com as mudanças quando ele
+          terminar
+        </p>
+      )}
+      {rendering && !agentEditing && (
+        <p className="sound-locked">
+          <span className="sound-spinner" aria-hidden="true" /> Renderizando o export: a timeline volta quando o preview
+          atualizar
+        </p>
+      )}
+      <TimelineToolbar st={st} data={data} />
+      {armed && (
+        <p className="sound-armed">
+          Colocando <b>{armed}</b>: clique na timeline (num losango vira camada; num efeito, troca o som; na linha da
+          música de fundo, vira a música de fundo) ·{" "}
+          <button className="mini-button" onClick={() => setArmed(null)}>
+            Cancelar
+          </button>{" "}
+          <span className="subtle">Esc</span>
+        </p>
+      )}
+      <TimelineTracks st={st} geo={geo} data={data} draft={draft} selPlace={selPlace} />
+      <TimelineFooter st={st} />
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/TimelineFooter.tsx

@@ -0,0 +1,26 @@
+/* Under the timeline: the save status (autosave 5 s after the last edit) and the last action's response. */
+
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+export function TimelineFooter({ st }: { st: SoundTimelineState }) {
+  const { pending, dirty, rendering, saving, planError, savedAt, response } = st;
+  return (
+    <div className="sound-footer">
+      <span className={`sound-saved${dirty ? " waiting" : ""}`}>
+        {planError
+          ? "Não salvo: corrija o erro do plano"
+          : saving
+            ? "Salvando…"
+            : dirty
+              ? "Edição não salva · salva sozinha em 5 s"
+              : savedAt
+                ? `Salvo no scenes.json às ${savedAt.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`
+                : "Tudo salvo"}
+        {!dirty && !saving && pending && !rendering && " · o export ainda não tem esse som"}
+      </span>
+      {response && (
+        <p className={`response ${response.ok ? "ok" : "error"}`}>{response.ok ? response.output : response.error}</p>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/TimelineSkeleton.tsx

@@ -0,0 +1,21 @@
+/* The timeline grid while the data loads: preview and ruler + lanes on the left, the sound panel on the right. */
+
+import { Skeleton } from "../../../../components/ui/skeleton";
+
+export function TimelineSkeleton() {
+  return (
+    <div className="sound-timeline" aria-busy="true" aria-label="Carregando a timeline de som">
+      <div className="sound-main">
+        <Skeleton style={{ flex: "1 1 auto", minHeight: 220, borderRadius: "var(--radius)" }} />
+        <Skeleton style={{ height: 22, width: "100%" }} />
+        {Array.from({ length: 4 }, (_, i) => (
+          <Skeleton key={i} style={{ height: 24, width: `${96 - i * 14}%` }} />
+        ))}
+      </div>
+      <div className="sound-side" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Skeleton style={{ height: 36, width: "100%" }} />
+        <Skeleton style={{ height: 120, width: "100%", borderRadius: "var(--radius)" }} />
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/TimelineToolbar.tsx

@@ -0,0 +1,160 @@
+/* The timeline's toolbar: the player (play/pause and the playhead time), undo and redo, the tools
+   (Seleção V, Corte B, Corte de área C) with the area cut's controls, and on the right the help,
+   the cuts total and the zoom. */
+
+import {
+  ArrowClockwise,
+  ArrowCounterClockwise,
+  Cursor,
+  Pause,
+  Play,
+  Scissors,
+  SelectionArea,
+} from "../../../../components/icons";
+import { Slider } from "../../../../components/ui/slider";
+import { removedDuration } from "../../../../../../tools/cuts.mjs";
+import { minSeconds, round2 } from "../../../../lib/sound-timeline";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { SoundData } from "./types";
+
+export function TimelineToolbar({ st, data }: { st: SoundTimelineState; data: SoundData }) {
+  const {
+    plan,
+    playing,
+    stop,
+    play,
+    t,
+    editedTotal,
+    draft,
+    stacks,
+    step,
+    tool,
+    chooseTool,
+    area,
+    setArea,
+    cutArea,
+    planning,
+    cuts,
+    zoom,
+    setZoom,
+  } = st;
+  return (
+    <div className="sound-tools" role="toolbar" aria-label="Ferramentas da timeline">
+      {/* timeline player: play and pause, and where the playhead is */}
+      <span className="sound-bar-player">
+        <button
+          className="sound-bar-play"
+          disabled={!plan}
+          title={playing ? "Pausar (espaço)" : "Tocar (espaço)"}
+          aria-label={playing ? "Pausar" : "Tocar"}
+          onClick={() => (playing ? stop() : play(t >= editedTotal - 0.05 ? 0 : t))}
+        >
+          {playing ? <Pause weight="fill" /> : <Play weight="fill" />}
+        </button>
+        <span className="mono sound-bar-time">
+          {minSeconds(t)} <span className="subtle">/ {minSeconds(editedTotal)}</span>
+          {(draft?.speed ?? 1) !== 1 && (
+            <span className="subtle" title="Duração do export na velocidade escolhida">
+              {" "}
+              · {Math.round((draft?.speed ?? 1) * 100)}% → {minSeconds(editedTotal / (draft?.speed ?? 1))}
+            </span>
+          )}
+        </span>
+      </span>
+      <span className="sound-divider" aria-hidden="true" />
+      <span className="sound-undo">
+        <button
+          className="mini-button"
+          disabled={!stacks.undo}
+          title="Desfazer (Ctrl/Cmd + Z)"
+          aria-label="Desfazer"
+          onClick={() => step("undo")}
+        >
+          <ArrowCounterClockwise className="ic" />
+        </button>
+        <button
+          className="mini-button"
+          disabled={!stacks.redo}
+          title="Refazer (Ctrl/Cmd + Shift + Z)"
+          aria-label="Refazer"
+          onClick={() => step("redo")}
+        >
+          <ArrowClockwise className="ic" />
+        </button>
+      </span>
+      <span className="segmented small">
+        <button
+          className={tool === "select" ? "active" : ""}
+          title="Seleção (V): mexer nos efeitos"
+          onClick={() => chooseTool("select")}
+        >
+          <Cursor className="ic" /> Seleção
+        </button>
+        <button
+          className={tool === "razor" ? "active" : ""}
+          title="Corte (B): clique numa animação ou numa fala para quebrar em dois clips ali"
+          onClick={() => chooseTool("razor")}
+        >
+          <Scissors className="ic" /> Corte
+        </button>
+        <button
+          className={tool === "cut" ? "active" : ""}
+          title="Corte de área (C): marcar um trecho e tirar do vídeo"
+          onClick={() => chooseTool("cut")}
+        >
+          <SelectionArea className="ic" /> Corte de área
+        </button>
+      </span>
+      {tool === "cut" &&
+        (area ? (
+          <>
+            <span className="mono">
+              {round2(area[0])} → {round2(area[1])} · <b>{round2(area[1] - area[0])}</b>
+            </span>
+            <button className="button small primary" onClick={cutArea} title="Delete, Backspace ou Enter">
+              <Scissors className="ic" /> Cortar e fechar o buraco
+            </button>
+            <button className="mini-button" onClick={() => setArea(null)}>
+              Desmarcar
+            </button>{" "}
+            <span className="subtle">Esc</span>
+          </>
+        ) : (
+          <span className="subtle">Arraste na timeline para marcar o trecho que sai (gruda nas falas; Alt solta)</span>
+        ))}
+      {tool === "razor" && (
+        <span className="subtle">
+          Clique numa animação ou numa fala para quebrar ali (gruda na cabeça; Alt solta). Depois, em Seleção, arraste
+          ou apague cada pedaço
+        </span>
+      )}
+      {/* right side of the bar: the cuts total and the timeline zoom */}
+      <span className="sound-tools-right">
+        <span
+          className="sound-float-info"
+          title={`${plan ? `Voz ${plan.voice.lufs} LUFS${plan.voice.measured ? "" : " (padrão)"} · efeitos ${data.catalog.level_db} dB abaixo · ducking ${plan.ducking.db} dB\n\n` : ""}Espaço toca e pausa. Losango vazio: clique para pôr um som no beat (▲ é troca de cena). Arraste um efeito para mudar o em; com Shift, duplica. Ctrl/Cmd + clique seleciona vários (arrastam e duplicam juntos). Delete ou Backspace tira o que estiver selecionado. Sons da biblioteca: arraste para a timeline, ou clique no som e depois na timeline. Mudou algo tocando, recomeça do mesmo ponto.\n\nFerramentas: V seleciona; C é o corte de área: arraste na timeline para marcar (a borda gruda nas falas e nas cenas; Alt solta), ajuste pelas bordas e corte com Delete, Backspace ou Enter. O que estiver dentro sai do export; o que atravessa perde só a parte de dentro. Esc desmarca.\n\nAnimação e voz são trilhas separadas: arraste uma cena na trilha Animação para mover só a imagem (a voz fica; os efeitos dos beats vão junto). ← e → empurram a cena escolhida um quadro, com Shift dez.`}
+        >
+          {planning ? "…" : "?"}
+        </span>
+        {cuts.length > 0 && (
+          <span className="subtle">
+            {cuts.length} {cuts.length === 1 ? "corte" : "cortes"} · {round2(removedDuration(cuts))} fora
+          </span>
+        )}
+        <label className="sound-float-zoom" title="Zoom da timeline">
+          <span>Zoom</span>
+          <Slider
+            variant="fill"
+            min={20}
+            max={240}
+            step={10}
+            value={[zoom]}
+            aria-label="zoom da timeline"
+            label={`${zoom}`}
+            onValueChange={([n]) => setZoom(n)}
+          />
+        </label>
+      </span>
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/TimelineTracks.tsx

@@ -0,0 +1,121 @@
+/* The scrolling timeline: the sidebar and the tracks (ruler, animation, voice, beat diamonds,
+   effects, background music), the cut joins, the area cut, the razor line and the playhead. The
+   tracks receive library sounds (dropped, or clicked while armed). */
+
+import { minSeconds, round2 } from "../../../../lib/sound-timeline";
+import { AreaSelection } from "./AreaSelection";
+import { BedRow } from "./BedRow";
+import { EffectsRow } from "./EffectsRow";
+import { MarkerRow } from "./MarkerRow";
+import { SceneRow } from "./SceneRow";
+import { TrackSidebar } from "./TrackSidebar";
+import { VoiceRow } from "./VoiceRow";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Draft, Place, SoundData } from "./types";
+
+export function TimelineTracks({
+  st,
+  geo,
+  data,
+  draft,
+  selPlace,
+}: {
+  st: SoundTimelineState;
+  geo: TimelineGeometry;
+  data: SoundData;
+  draft: Draft;
+  selPlace: Place | null;
+}) {
+  const {
+    scroller,
+    tracks,
+    armed,
+    setArmed,
+    draggingSound,
+    setDraggingSound,
+    setDropTarget,
+    placeSound,
+    tool,
+    setRazorT,
+    razorT,
+    seek,
+    zoom,
+    editedTotal,
+    cuts,
+    t,
+  } = st;
+  const { width, x, E, razorTime } = geo;
+  return (
+    <div ref={scroller} className="sound-scroll">
+      <div className="sound-frame">
+        {/* sidebar: one icon per row. Video only indicates; each audio row has the speaker that mutes all its sounds (only for listening here) */}
+        <TrackSidebar st={st} />
+        <div
+          ref={tracks}
+          className={`sound-tracks${armed || draggingSound ? " receiving" : ""}`}
+          style={{ width }}
+          onDragOver={e => {
+            if (!draggingSound) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            const el = (e.target as HTMLElement).closest<HTMLElement>("[data-layer], [data-place], [data-bed]");
+            setDropTarget(
+              el ? (el.dataset.bed != null ? "bed" : `${el.dataset.place}:${el.dataset.layer ?? ""}`) : null,
+            );
+          }}
+          onDragLeave={e => {
+            if (e.currentTarget === e.target) setDropTarget(null);
+          }}
+          onDrop={e => {
+            e.preventDefault();
+            const name = e.dataTransfer.getData("text/plain") || draggingSound;
+            setDraggingSound(null);
+            setDropTarget(null);
+            if (name) placeSound(name, e.target as HTMLElement, e.clientX);
+          }}
+          onPointerMove={e => {
+            if (tool !== "razor") return;
+            setRazorT(razorTime(e));
+          }}
+          onPointerLeave={() => setRazorT(null)}
+          onClickCapture={e => {
+            if (!armed) return;
+            e.stopPropagation();
+            e.preventDefault();
+            placeSound(armed, e.target as HTMLElement, e.clientX);
+            setArmed(null);
+          }}
+        >
+          <div
+            className="sound-ruler"
+            onClick={e => seek((e.clientX - e.currentTarget.getBoundingClientRect().left) / zoom)}
+          >
+            {Array.from({ length: Math.floor(editedTotal) + 1 }, (_, s) => (
+              <span key={s} className={`sound-tick${s % 5 === 0 ? " strong" : ""}`} style={{ left: x(s) }}>
+                {s % 5 === 0 ? minSeconds(s) : ""}
+              </span>
+            ))}
+          </div>
+          <SceneRow st={st} geo={geo} data={data} />
+          <VoiceRow st={st} geo={geo} data={data} draft={draft} />
+          <MarkerRow st={st} geo={geo} draft={draft} selPlace={selPlace} />
+          <EffectsRow st={st} geo={geo} />
+          <BedRow st={st} geo={geo} data={data} />
+          {/* where each cut joined the video */}
+          {cuts.map((c, i) => (
+            <span
+              key={`${c.from}-${c.to}`}
+              className="sound-cut-marker"
+              style={{ left: x(E(c.from)) }}
+              title={`corte ${i + 1}: ${round2(c.to - c.from)} fora (de ${round2(c.from)} a ${round2(c.to)} do vídeo sem cortes)`}
+            />
+          ))}
+          <AreaSelection st={st} geo={geo} />
+          {tool === "razor" && razorT != null && <span className="sound-razor" style={{ left: x(razorT) }} />}
+          <span className="sound-header" style={{ left: x(t) }} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/TrackSidebar.tsx

@@ -0,0 +1,30 @@
+/* The timeline sidebar: one icon per row. Video only indicates; each audio row has the speaker
+   that mutes all its sounds (only for listening here). */
+
+import { VideoCamera } from "../../../../components/icons";
+import { LANE_HEIGHT } from "../../../../lib/sound-timeline";
+import { MuteButton } from "./MuteButton";
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+export function TrackSidebar({ st }: { st: SoundTimelineState }) {
+  return (
+    <aside className="sound-sidebar" aria-label="Linhas da timeline">
+      <div className="sound-sidebar-ruler" />
+      <div className="sound-row sound-sidebar-cell">
+        <span className="sound-sidebar-ic" title="Animação (vídeo)">
+          <VideoCamera className="ic" />
+        </span>
+      </div>
+      <MuteButton st={st} row="voice" name="voz" cls="sound-voice" />
+      <div className="sound-row sound-markers sound-sidebar-cell" />
+      <MuteButton
+        st={st}
+        row="effects"
+        name="efeitos"
+        cls="sound-effects"
+        style={{ height: st.laneCount * LANE_HEIGHT + 6 }}
+      />
+      <MuteButton st={st} row="bed" name="música de fundo" cls="sound-bed-row" />
+    </aside>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/VoiceRow.tsx

@@ -0,0 +1,53 @@
+/* The voice track: the ducking spans under it and each line's clips. */
+
+import { ClipBlock } from "./ClipBlock";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Draft, SoundData } from "./types";
+
+export function VoiceRow({
+  st,
+  geo,
+  data,
+  draft,
+}: {
+  st: SoundTimelineState;
+  geo: TimelineGeometry;
+  data: SoundData;
+  draft: Draft;
+}) {
+  const { plan, clipDragOffset } = st;
+  const { boxOf } = geo;
+  return (
+    <div className="sound-row sound-voice">
+      {(plan?.ducking.segments ?? []).map(([a, b], i) => (
+        <span key={i} className="sound-duck" style={boxOf(a, b)} />
+      ))}
+      {data.lines.flatMap(f =>
+        (draft.line_clips[f.id] ?? f.clips).map((cl, k, all) => {
+          const offset =
+            clipDragOffset?.kind === "voice" && clipDragOffset.id === f.id && clipDragOffset.k === k
+              ? clipDragOffset.offset
+              : cl.offset;
+          return (
+            <ClipBlock
+              key={`voice:${f.id}:${k}`}
+              st={st}
+              geo={geo}
+              kind="voice"
+              id={f.id}
+              k={k}
+              cl={cl}
+              offset={offset}
+              base={f.start}
+              z={0}
+              label={`${f.id}${all.length > 1 ? `·${k + 1}` : ""}`}
+              title={f.text}
+              line={f}
+            />
+          );
+        }),
+      )}
+    </div>
+  );
+}