@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,146 @@
+/* Hear the video's lines one after the other, in scene order, to hear the whole narration as it
+   will be. One <audio> only: when a line ends the next comes in. The track is the sum of the lines
+   (without the motion cuts). */
+
+import { useEffect, useRef, useState } from "react";
+import { Pause, Play } from "../../../components/icons";
+import { Slider } from "../../../components/ui/slider";
+import { claimAudio, releaseAudio } from "../../../lib/audio";
+import { mmss } from "./AudioPlayer";
+
+export type SequenceTrack = { id: string; scene: string; text: string; src: string; dur?: number | null };
+
+export function SequencePlayer({ tracks }: { tracks: SequenceTrack[] }) {
+  const audio = useRef<HTMLAudioElement>(null);
+  const [i, setI] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [t, setT] = useState(0);
+  /* measured duration of each file; until it arrives, the line's own counts */
+  const [measured, setMeasured] = useState<Record<string, number>>({});
+  /* wants to play the next one as soon as it loads; and where to land when jumping on the bar */
+  const wants = useRef(false);
+  const jump = useRef<number | null>(null);
+
+  const n = tracks.length;
+  const current = tracks[Math.min(i, n - 1)];
+  const dur = (f: SequenceTrack) => measured[f.src] ?? f.dur ?? 0;
+  const starts = tracks.reduce<number[]>((acc, f, k) => (acc.push(k ? acc[k - 1] + dur(tracks[k - 1]) : 0), acc), []);
+  const total = starts[n - 1] + dur(tracks[n - 1]);
+  const position = starts[Math.min(i, n - 1)] + t;
+
+  /* the list changed underneath (lines regenerated, one less): back to the start instead of pointing at nothing */
+  useEffect(() => {
+    if (i >= n) {
+      setI(0);
+      setT(0);
+    }
+  }, [n]);
+  useEffect(() => () => releaseAudio(audio.current), []);
+  useEffect(() => {
+    const a = audio.current;
+    if (!a) return;
+    if (jump.current != null) {
+      a.currentTime = jump.current;
+      jump.current = null;
+    }
+    if (wants.current) a.play().catch(() => setPlaying(false));
+  }, [i]);
+
+  const toggle = () => {
+    const a = audio.current;
+    if (!a) return;
+    if (a.paused) {
+      wants.current = true;
+      a.play().catch(() => {
+        wants.current = false;
+        setPlaying(false);
+      });
+    } else {
+      wants.current = false;
+      a.pause();
+    }
+  };
+  const seek = (s: number) => {
+    let k = n - 1;
+    for (let j = 0; j < n; j++)
+      if (s < starts[j] + dur(tracks[j])) {
+        k = j;
+        break;
+      }
+    const inside = Math.max(0, s - starts[k]);
+    if (k === i) {
+      if (audio.current) audio.current.currentTime = inside;
+      setT(inside);
+    } else {
+      jump.current = inside;
+      setT(inside);
+      setI(k);
+    }
+  };
+  const ended = () => {
+    if (i < n - 1) {
+      wants.current = true;
+      setT(0);
+      setI(i + 1);
+    } else {
+      wants.current = false;
+      setPlaying(false);
+      setT(0);
+      setI(0);
+    }
+  };
+
+  if (!n) return null;
+  return (
+    <div className="sequence-player">
+      <div className="sequence-player-title">
+        <b>Ouvir tudo junto</b>
+        <span className="subtle">
+          fala {Math.min(i, n - 1) + 1} de {n} · {current.scene} · {current.id}
+        </span>
+      </div>
+      <div className="audio-player">
+        <audio
+          ref={audio}
+          src={current.src}
+          preload="none"
+          onPlay={e => {
+            claimAudio(e.currentTarget);
+            setPlaying(true);
+          }}
+          onPause={e => {
+            if (!e.currentTarget.ended) setPlaying(false);
+          }}
+          onEnded={ended}
+          onTimeUpdate={e => setT(e.currentTarget.currentTime)}
+          onDurationChange={e => {
+            const d = e.currentTarget.duration;
+            if (Number.isFinite(d)) setMeasured(m => (m[current.src] === d ? m : { ...m, [current.src]: d }));
+          }}
+        />
+        <button
+          type="button"
+          className="audio-player-button"
+          onClick={toggle}
+          aria-label={playing ? "Pausar a narração inteira" : "Ouvir a narração inteira"}
+        >
+          {playing ? <Pause weight="fill" /> : <Play weight="fill" />}
+        </button>
+        <Slider
+          variant="line"
+          aria-label="Posição na narração inteira"
+          min={0}
+          max={total || 1}
+          step={0.01}
+          value={[Math.min(position, total || 1)]}
+          disabled={!total}
+          onValueChange={([s]) => seek(s)}
+        />
+        <span className="audio-player-time mono">
+          {mmss(position)} / {mmss(total)}
+        </span>
+      </div>
+      <p className="sequence-player-text">{current.text}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,117 @@
+/* "Adicionar som": an Epidemic URL captured in the player becomes an MP3 in the video's sfx/. */
+
+import { useState } from "react";
+import { api, enc, send as sendRequest } from "../../../../lib/api";
+import { Plus } from "../../../../components/icons";
+import { useOmniHandle } from "../../../../lib/omni-ui";
+
+/* adds an Epidemic effect: the URL captured in the player becomes an MP3 in the video's sfx/ */
+export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string | null) => void }) {
+  const [open, setOpen] = useState(false);
+  const [epidemicUrl, setEpidemicUrl] = useState("");
+  const [name, setName] = useState("");
+  const [downloading, setDownloading] = useState(false);
+  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
+  /* a direct MP3 (audiocdn…/lqmp3/<id>.mp3) downloads at once; any other Epidemic page (playlist,
+     theme, search) goes to the agent, which opens it in Chrome, plays and captures the MP3 */
+  const pageUrl = (u: string) => !/audiocdn\.epidemicsound\.com\/lqmp3\//.test(u);
+  const isPage = pageUrl(epidemicUrl);
+  /* Omni fills the box and presses the button in one go: the values come as arguments then */
+  const send = async (url = epidemicUrl, file = name): Promise<{ ok: boolean; output?: string; error?: string }> => {
+    if (!url.trim() || downloading) return { ok: false, error: downloading ? "já está baixando" : "falta o link" };
+    const isPage = pageUrl(url);
+    setDownloading(true);
+    setMsg(null);
+    const param = { slug: enc(slug) };
+    const json = { url: url.trim(), name: file.trim() };
+    const r = await sendRequest(
+      isPage
+        ? api.videos[":slug"].sound.capture.$post({ param, json })
+        : api.videos[":slug"].sound.download.$post({ param, json }),
+    );
+    setDownloading(false);
+    if (!r.ok) {
+      setMsg({ ok: false, text: r.error ?? "Não consegui baixar" });
+      return { ok: false, error: r.error ?? "não consegui baixar" };
+    }
+    if (isPage) {
+      /* the agent works in the background; the timeline reloads when it stops */
+      setMsg({
+        ok: true,
+        text: "O agente abriu a página no Chrome e vai baixar a faixa. A lista atualiza quando ele terminar.",
+      });
+      setEpidemicUrl("");
+      setName("");
+      return { ok: true, output: "o agente do editor abriu a página no Chrome e vai baixar a faixa" };
+    }
+    setMsg({ ok: true, text: r.output ?? "Adicionado" });
+    setEpidemicUrl("");
+    setName("");
+    onAdd(r.output?.split(" ←")[0] ?? null);
+    return { ok: true, output: r.output ?? "adicionado" };
+  };
+  useOmniHandle(`soundbox:${slug}`, {
+    fill: (url: string, file: string) => {
+      setOpen(true);
+      setEpidemicUrl(url);
+      setName(file);
+      setMsg(null);
+    },
+    submit: (url: string, file: string) => send(url, file),
+  });
+  if (!open)
+    return (
+      <button className="button small" onClick={() => setOpen(true)}>
+        <Plus className="ic" /> Adicionar som
+      </button>
+    );
+  return (
+    <div className="sound-add">
+      <input
+        type="url"
+        placeholder="Link da Epidemic: página (música, playlist) ou MP3 do player"
+        value={epidemicUrl}
+        autoFocus
+        onChange={e => setEpidemicUrl(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Enter") send();
+        }}
+      />
+      <input
+        type="text"
+        placeholder="Nome (opcional), ex.: whoosh-curto"
+        value={name}
+        onChange={e => setName(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Enter") send();
+        }}
+      />
+      <span className="actions">
+        <button className="button small primary" disabled={!epidemicUrl.trim() || downloading} onClick={() => send()}>
+          {downloading
+            ? isPage
+              ? "Chamando o agente…"
+              : "Baixando…"
+            : isPage
+              ? "Capturar com o agente"
+              : "Baixar para o vídeo"}
+        </button>
+        <button
+          className="button small"
+          onClick={() => {
+            setOpen(false);
+            setMsg(null);
+          }}
+        >
+          Fechar
+        </button>
+      </span>
+      <p className="hint">
+        Cole o link de uma página da Epidemic (ex.: music/themes/tutorials/software-tutorial/): o agente abre no Chrome,
+        dá play e pega a primeira faixa que o vídeo ainda não tem. Ou cole direto o MP3 do player
+        (audiocdn…/lqmp3/….mp3). O arquivo vai para o sfx/ deste vídeo, com a origem registrada.
+      </p>
+      {msg && <p className={`response ${msg.ok ? "ok" : "error"}`}>{msg.text}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+/* The area cut on the tracks: with the tool on, a layer takes the pointer over the lanes (the
+   ruler still seeks) to mark the area; the marked area has edge handles that grow or shrink it.
+   A click without dragging just takes the playhead there; less than a frame is not an area. */
+
+import type React from "react";
+import { round2 } from "../../../../lib/sound-timeline";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+export function AreaSelection({ st, geo }: { st: SoundTimelineState; geo: TimelineGeometry }) {
+  const { tool, area, setArea, areaDrag, seek } = st;
+  const { x, fps, pointerTime } = geo;
+  /* the area goes from the anchor (the click point, or the edge that stayed put) to the pointer */
+  const moveArea = (e: React.PointerEvent) => {
+    const a = areaDrag.current;
+    if (!a) return;
+    const s = pointerTime(e);
+    setArea([Math.min(a.anchor, s), Math.max(a.anchor, s)]);
+  };
+  /* smaller than a frame is not an area */
+  const releaseArea = () => setArea(ar => (ar && ar[1] - ar[0] >= 1 / fps ? ar : null));
+  return (
+    <>
+      {/* area cut: the layer takes the pointer over the lanes (the ruler still seeks) */}
+      {tool === "cut" && (
+        <div
+          className="sound-area-capture"
+          onPointerDown={e => {
+            const s = pointerTime(e);
+            areaDrag.current = { anchor: s, x0: e.clientX };
+            setArea([s, s]);
+            (e.target as HTMLElement).setPointerCapture(e.pointerId);
+          }}
+          onPointerMove={moveArea}
+          onPointerUp={e => {
+            const a = areaDrag.current;
+            areaDrag.current = null;
+            if (!a) return;
+            /* click without dragging: just takes the playhead there */
+            if (Math.abs(e.clientX - a.x0) <= 3) {
+              setArea(null);
+              seek(pointerTime(e));
+              return;
+            }
+            releaseArea();
+          }}
+        />
+      )}
+      {area && (
+        <div className="sound-area" style={{ left: x(area[0]), width: x(area[1] - area[0]) }}>
+          <span className="sound-area-label mono">{round2(area[1] - area[0])}</span>
+          {/* edge handles: dragging grows or shrinks the area; the other edge stays put */}
+          {([0, 1] as const).map(k => (
+            <span
+              key={k}
+              className={`sound-area-edge ${k ? "end" : "start"}`}
+              title={`Arraste para mover o ${k ? "fim" : "início"} da área`}
+              onPointerDown={e => {
+                e.stopPropagation();
+                areaDrag.current = { anchor: area[1 - k], x0: e.clientX };
+                (e.target as HTMLElement).setPointerCapture(e.pointerId);
+              }}
+              onPointerMove={moveArea}
+              onPointerUp={() => {
+                areaDrag.current = null;
+                releaseArea();
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,94 @@
+/* The background music's settings: sound, volume, span, fades, loop and ducking under the voice. */
+
+import { Play, Trash } from "../../../../components/icons";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { EffectChoice } from "./EffectChoice";
+import { Lane } from "./Lane";
+import { NumberInput } from "./NumberInput";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Bed, SoundData } from "./types";
+
+export function BedPanel({ st, data, bed }: { st: SoundTimelineState; data: SoundData; bed: NonNullable<Bed> }) {
+  const { plan, play, changeDraft, setSel } = st;
+  const c = bed;
+  const changeBed = (m: Partial<NonNullable<Bed>>) =>
+    changeDraft(r => {
+      r.bed = { ...r.bed!, ...m };
+    });
+  return (
+    <section className="sound-panel">
+      <header>
+        <b>Música de fundo</b>
+        <span className="subtle">
+          {data.catalog.bed.level_db} dB abaixo da voz · ducking {data.catalog.bed.ducking_db} dB
+        </span>
+        <span className="actions">
+          {plan?.bed && (
+            <button className="button small" onClick={() => play(Math.max(0, plan.bed!.start))}>
+              <Play className="ic" /> Ouvir
+            </button>
+          )}
+          <button
+            className="button small"
+            onClick={() => {
+              changeDraft(r => {
+                r.bed = null;
+              });
+              setSel(null);
+            }}
+          >
+            <Trash className="ic" /> Tirar a música de fundo
+          </button>
+        </span>
+      </header>
+      <div className="sound-fields">
+        <label className="sound-field wide">
+          <span>Som</span>
+          <EffectChoice catalog={data.catalog} value={c.name} bed onChange={name => changeBed({ name })} />
+        </label>
+        <Lane name="Volume" value={c.db ?? 0} min={-24} max={12} onChange={db => changeBed({ db })} />
+        <NumberInput
+          name="De"
+          value={c.from ?? 0}
+          min={0}
+          max={data.total}
+          suffix="s"
+          onChange={from => changeBed({ from })}
+        />
+        <NumberInput
+          name="Até"
+          value={c.to ?? data.total}
+          min={0}
+          max={data.total}
+          suffix="s"
+          onChange={to => changeBed({ to })}
+        />
+        <NumberInput
+          name="Fade entra"
+          value={c.fade?.[0] ?? data.catalog.bed.fade[0]}
+          min={0}
+          max={30}
+          step={0.1}
+          suffix="s"
+          onChange={n => changeBed({ fade: [n, c.fade?.[1] ?? data.catalog.bed.fade[1]] })}
+        />
+        <NumberInput
+          name="Fade sai"
+          value={c.fade?.[1] ?? data.catalog.bed.fade[1]}
+          min={0}
+          max={30}
+          step={0.1}
+          suffix="s"
+          onChange={n => changeBed({ fade: [c.fade?.[0] ?? data.catalog.bed.fade[0], n] })}
+        />
+        <label className="sound-field">
+          <Checkbox checked={!!c.loop} onCheckedChange={v => changeBed({ loop: v })} /> <span>Repetir (textura)</span>
+        </label>
+        <label className="sound-field">
+          <Checkbox checked={c.duck !== false} onCheckedChange={v => changeBed({ duck: v ? undefined : false })} />{" "}
+          <span>Abaixar sob a voz</span>
+        </label>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,45 @@
+/* The background music row: the planned bed (click to choose it), or the button that adds one
+   (the kit's texture or bed, or a music captured for the video). */
+
+import { defaultBedName } from "../../../../lib/sound-timeline";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { SoundData } from "./types";
+
+export function BedRow({ st, geo, data }: { st: SoundTimelineState; geo: TimelineGeometry; data: SoundData }) {
+  const { plan, sel, setSel, dropTarget, changeDraft } = st;
+  const { x } = geo;
+  return (
+    <div
+      className={`sound-row sound-bed-row${dropTarget === "bed" ? " target" : ""}${st.mix.muted.bed ? " silenced" : ""}`}
+      data-bed=""
+    >
+      {plan?.bed ? (
+        <div
+          className={`sound-effect role-bed${sel === "bed" ? " sel" : ""}`}
+          style={{ left: x(plan.bed.start), width: x(plan.bed.duration), top: 3 }}
+          onClick={() => setSel("bed")}
+        >
+          <span className="sound-name">
+            Música de fundo · {plan.bed.name.replace(/\.mp3$/, "")} · {plan.bed.gain_db} dB
+          </span>
+        </div>
+      ) : (
+        <button
+          className="mini-button sound-no-bed"
+          onClick={() => {
+            const name = defaultBedName(data.catalog);
+            if (name) {
+              changeDraft(r => {
+                r.bed = { name };
+              });
+              setSel("bed");
+            }
+          }}
+        >
+          + música de fundo
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+/* Over the editor's picture while the Legenda tab is open: templates/captions.html in preview mode
+   (the safe area in red and the caption, which gets the draft and the playhead's instant by
+   postMessage) and the handle that drags the caption. It sits inside the picture's box, so it has
+   the same size and the scale is the box's width over the frame's. */
+
+import { useEffect, useRef } from "react";
+import type { CaptionEditor } from "../CaptionPositionEditor/captionEditor";
+
+export function CaptionOverlay({ editor }: { editor: CaptionEditor }) {
+  const { w, h, k, frame, src, sendPreview, box, drag, setWidth } = editor;
+  const area = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = area.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setWidth(el.clientWidth));
+    ro.observe(el);
+    setWidth(el.clientWidth);
+    return () => ro.disconnect();
+  }, [setWidth]);
+  return (
+    <div className="caption-overlay" ref={area}>
+      <iframe
+        ref={frame}
+        src={src}
+        title="prévia da legenda"
+        onLoad={sendPreview}
+        style={{ width: w, height: h, transform: `scale(${k})` }}
+      />
+      {box && (
+        <div
+          className="caption-handle"
+          onPointerDown={drag}
+          title="Arraste para mover"
+          style={{
+            left: box.x * k,
+            top: box.y * k,
+            width: box.w * k,
+            height: box.h * k,
+          }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+/* Floats at the bottom right of the Legenda box (it sticks as the box scrolls) once the caption has an unsaved change: Salvar legenda saves the
+   position and renders the export again; Descartar goes back to what is saved. */
+
+import { ArrowCounterClockwise, FloppyDisk } from "../../../../components/icons";
+import { clone } from "../../../../lib/caption-position";
+import type { CaptionEditor } from "../CaptionPositionEditor/captionEditor";
+
+export function CaptionSaveBar({ editor, busy }: { editor: CaptionEditor | null; busy: boolean }) {
+  if (!editor) return null;
+  const { changed, saving, save, setDraft, data, message } = editor;
+  if (!changed && !(message && !message.ok)) return null;
+  return (
+    <div className="caption-save-bar" role="region" aria-label="Salvar legenda">
+      {message && !message.ok && <p className="response error">{message.text}</p>}
+      {changed && (
+        <div className="actions">
+          <button className="button" disabled={saving} onClick={() => setDraft(clone(data.position))}>
+            <ArrowCounterClockwise className="ic" /> Descartar
+          </button>
+          <button
+            className="button primary"
+            disabled={saving || busy}
+            onClick={save}
+            title="Salva a posição e o estilo e renderiza o export de novo"
+          >
+            <FloppyDisk className="ic" /> {saving ? "Salvando…" : "Salvar legenda"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+/* The Legenda tab: two columns, the captions (what to change, the list, each text edits in place)
+   and the adjustments (safe area, style, position, color). The picture is the editor's own preview,
+   which shows the safe area and the captions while this tab is open (CaptionOverlay). Saving is the
+   button that floats at the bottom right of this box (CaptionSaveBar). */
+
+import { CaptionList } from "../CaptionPositionEditor/CaptionList";
+import { CaptionSaveBar } from "./CaptionSaveBar";
+import { PositionControls } from "../CaptionPositionEditor/PositionControls";
+import type { CaptionEditor } from "../CaptionPositionEditor/captionEditor";
+
+export function CaptionsPanel({ editor, busy }: { editor: CaptionEditor | null; busy: boolean }) {
+  if (!editor) return <p className="hint sound-no-selection">Carregando a legenda…</p>;
+  if (!editor.data.captions.length)
+    return <p className="hint sound-no-selection">Ainda sem legenda: ela sai do áudio de cada fala.</p>;
+  return (
+    <div className="sound-captions">
+      <CaptionList editor={editor} />
+      <PositionControls editor={editor} />
+      <CaptionSaveBar editor={editor} busy={busy} />
+    </div>
+  );
+}