@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,113 @@
+/* The player of one voice take: the native <audio> has no place for the provider logo, so the
+   control is ours (play, Slider track and time) and, at the end, the provider (logo before the
+   name) and, right of it, the voice (profile) that spoke the line.
+   Only one plays at a time: starting a take pauses the one that was playing. */
+
+import { useEffect, useRef, useState } from "react";
+import { Pause, Play } from "../../../components/icons";
+import { ProviderLogo } from "../../../components/ProviderLogo";
+import { VoiceAvatar } from "../../../components/VoiceAvatar";
+import { Slider } from "../../../components/ui/slider";
+import { claimAudio, releaseAudio } from "../../../lib/audio";
+
+export const mmss = (s: number) => {
+  const t = Math.max(0, Math.round(s));
+  return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
+};
+
+export function AudioPlayer({
+  src,
+  provider,
+  providerName,
+  profile,
+  duration,
+  name,
+}: {
+  src: string;
+  provider?: string | null;
+  providerName?: string | null;
+  /* the voice (profile) used: the avatar and the name */
+  profile?: { name: string; seed: string; inferred?: boolean } | null;
+  duration?: number | null;
+  name: string;
+}) {
+  const audio = useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const [t, setT] = useState(0);
+  const [dur, setDur] = useState(duration ?? 0);
+  useEffect(() => () => releaseAudio(audio.current), []);
+
+  const toggle = () => {
+    const a = audio.current;
+    if (!a) return;
+    if (a.paused) a.play().catch(() => setPlaying(false));
+    else a.pause();
+  };
+  const seek = (n: number) => {
+    if (audio.current) audio.current.currentTime = n;
+    setT(n);
+  };
+
+  return (
+    <div className="audio-player">
+      <audio
+        ref={audio}
+        src={src}
+        preload="none"
+        onPlay={e => {
+          claimAudio(e.currentTarget);
+          setPlaying(true);
+        }}
+        onPause={() => setPlaying(false)}
+        onEnded={() => {
+          setPlaying(false);
+          setT(0);
+        }}
+        onTimeUpdate={e => setT(e.currentTarget.currentTime)}
+        onDurationChange={e => {
+          if (Number.isFinite(e.currentTarget.duration)) setDur(e.currentTarget.duration);
+        }}
+      />
+      <button
+        type="button"
+        className="audio-player-button"
+        onClick={toggle}
+        aria-label={`${playing ? "Pausar" : "Ouvir"} ${name}`}
+      >
+        {playing ? <Pause weight="fill" /> : <Play weight="fill" />}
+      </button>
+      <Slider
+        variant="line"
+        aria-label={`Posição de ${name}`}
+        min={0}
+        max={dur || 1}
+        step={0.01}
+        value={[Math.min(t, dur || 1)]}
+        disabled={!dur}
+        onValueChange={([n]) => seek(n)}
+      />
+      <span className="audio-player-time mono">
+        {mmss(t)} / {mmss(dur)}
+      </span>
+      {provider && (
+        <span className="audio-player-provider">
+          <ProviderLogo id={provider} size={20} />
+          {providerName ?? provider}
+        </span>
+      )}
+      {profile && (
+        <span
+          className={`audio-player-profile${profile.inferred ? " inferred" : ""}`}
+          title={
+            profile.inferred
+              ? `Voz de agora do vídeo (${profile.name}): esta leitura é de antes de o perfil ser guardado, então pode ter saído em outra`
+              : `Voz: ${profile.name}`
+          }
+        >
+          <VoiceAvatar seed={profile.seed} size={20} />
+          {profile.name}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* one x/y offset in px, with ±10 and zero; dimmed while it comes from the level above */
+
+import { Slider } from "../../../../components/ui/slider";
+
+export function AxisField({
+  name,
+  value,
+  inherited,
+  limit,
+  onChange,
+}: {
+  name: string;
+  value: number;
+  inherited: boolean;
+  limit: number;
+  onChange: (n: number) => void;
+}) {
+  return (
+    <label className={`axis${inherited ? " inherited" : ""}`}>
+      <span>{name}</span>
+      <Slider
+        variant="fill"
+        aria-label={name}
+        min={-limit}
+        max={limit}
+        step={1}
+        value={[value]}
+        markValue={0}
+        snapToMark
+        onValueChange={([n]) => onChange(n)}
+      />
+      <input
+        type="number"
+        className="mono"
+        step={1}
+        value={value}
+        onChange={e => onChange(Math.round(+e.target.value || 0))}
+      />
+      <button type="button" className="mini-button" onClick={() => onChange(value - 10)} title="−10 px">
+        −
+      </button>
+      <button type="button" className="mini-button" onClick={() => onChange(value + 10)} title="+10 px">
+        +
+      </button>
+      <button type="button" className="mini-button" onClick={() => onChange(0)} title="zerar" disabled={value === 0}>
+        0
+      </button>
+    </label>
+  );
+}

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

@@ -0,0 +1,56 @@
+/* The caption list column: what to change (all, the scene or the checked captions), turning the
+   checked captions on or off, and the list itself (each caption's text edits in place). */
+
+import { Switch } from "../../../../components/ui/switch";
+import { CaptionListItem } from "./CaptionListItem";
+
+import type { CaptionEditor } from "./captionEditor";
+
+export function CaptionList({ editor }: { editor: CaptionEditor }) {
+  const { data, scope, setScope, sceneId, hasOverride, several, targetCaptions, sel, selOn, showCaption, textMessage } =
+    editor;
+  return (
+    <div className="captions-position">
+      {/* what to change: all, the scene or the checked captions, and turning the caption on/off */}
+      <div className="segmented" role="tablist" aria-label="O que mexer">
+        <button className={scope === "video" ? "active" : ""} onClick={() => setScope("video")}>
+          Todas
+        </button>
+        <button className={scope === "scene" ? "active" : ""} onClick={() => setScope("scene")} disabled={!sceneId}>
+          Cena {sceneId}
+          {hasOverride("scene") && <i className="override-dot" />}
+        </button>
+        <button className={scope === "caption" ? "active" : ""} onClick={() => setScope("caption")}>
+          {several ? `Só as ${targetCaptions.length} marcadas` : `Só ${sel}`}
+          {hasOverride("caption") && <i className="override-dot" />}
+        </button>
+      </div>
+
+      {scope === "caption" && sel && (
+        <label className={`caption-toggle${selOn ? "" : " off"}`}>
+          <Switch
+            checked={selOn}
+            onCheckedChange={showCaption}
+            aria-label={several ? "Mostrar as legendas marcadas" : `Mostrar a legenda ${sel}`}
+          />
+          <span>
+            {several ? `Mostrar as ${targetCaptions.length} marcadas no vídeo` : "Mostrar esta legenda no vídeo"}
+          </span>
+          <small className="subtle">
+            {selOn ? "Ligada" : "Desligada: não é queimada na montagem; a prévia a mostra esmaecida"}
+          </small>
+        </label>
+      )}
+      <p className="hint">
+        Shift+clique marca um intervalo de legendas; ⌘/Ctrl+clique marca ou desmarca uma. Com várias marcadas, “Só as
+        marcadas” edita todas de uma vez. Duplo clique (ou o lápis) edita o texto.
+      </p>
+      <ol className="position-list">
+        {data.captions.map(c => (
+          <CaptionListItem key={c.id} editor={editor} caption={c} />
+        ))}
+      </ol>
+      {textMessage && <p className={`response ${textMessage.ok ? "ok" : "error"}`}>{textMessage.text}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+/* One caption in the list: click picks or checks it (CaptionEditor.choose), double click or the
+   pencil edits its text, and the marks say where its position comes from. */
+
+import { Pencil } from "../../../../components/icons";
+import { pick, type CaptionItem } from "../../../../lib/caption-position";
+import { CaptionTextForm } from "./CaptionTextForm";
+import type { CaptionEditor } from "./captionEditor";
+
+export function CaptionListItem({ editor, caption: c }: { editor: CaptionEditor; caption: CaptionItem }) {
+  const {
+    data,
+    draft,
+    several,
+    targetCaptions,
+    editing,
+    newText,
+    setNewText,
+    savingText,
+    saveText,
+    setEditing,
+    sel,
+    choose,
+    editText,
+  } = editor;
+  const sceneOverride = !!(c.scene && Object.keys(pick(draft.scenes?.[c.scene])).length);
+  const ownOverride = !!Object.keys(pick({ ...draft.individual?.[c.id], hidden: undefined })).length;
+  const off = !!draft.individual?.[c.id]?.hidden;
+  const isChecked = several && targetCaptions.includes(c.id);
+  if (c.id === editing) {
+    return (
+      <li className="current editing" onClick={e => e.stopPropagation()}>
+        <span className="mono subtle">{c.id}</span>
+        <CaptionTextForm
+          caption={c}
+          newText={newText}
+          setNewText={setNewText}
+          savingText={savingText}
+          maxChars={data.max_chars}
+          saveText={saveText}
+          setEditing={setEditing}
+        />
+      </li>
+    );
+  }
+  return (
+    <li
+      className={`${c.id === sel ? "current" : ""}${isChecked ? " checked" : ""}${off ? " off" : ""}`}
+      onClick={e => choose(c.id, e)}
+      onDoubleClick={e => {
+        if (!e.shiftKey && !e.metaKey && !e.ctrlKey) editText(c);
+      }}
+      onMouseDown={e => {
+        if (e.shiftKey) e.preventDefault();
+      }}
+    >
+      <span className="mono subtle">{c.id}</span>
+      <span>{c.text}</span>
+      {c.original && (
+        <span className="override-mark" title={`Texto editado. A fala gerou: “${c.original}”`}>
+          Editada
+        </span>
+      )}
+      {sceneOverride && (
+        <span className="override-mark" title={`A ${c.scene} tem ajuste`}>
+          Cena
+        </span>
+      )}
+      {ownOverride && (
+        <span className="override-mark own" title="Ajuste próprio">
+          Própria
+        </span>
+      )}
+      {off && (
+        <span className="override-mark" title="Não é queimada no vídeo">
+          Desligada
+        </span>
+      )}
+      <button
+        type="button"
+        className="mini-button edit-text"
+        onClick={e => {
+          e.stopPropagation();
+          editText(c);
+        }}
+        title="Editar o texto"
+        aria-label={`Editar o texto da legenda ${c.id}`}
+      >
+        <Pencil />
+      </button>
+    </li>
+  );
+}

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

@@ -0,0 +1,57 @@
+/* The safe-area margins (only in the "all captions" scope): one field per side, in % of the frame,
+   each kept at least 10 % away from the opposite one; back to the platform's in one click. */
+
+import { ArrowCounterClockwise } from "../../../../components/icons";
+import { clone, marginMax, OPPOSITE_SIDE, SAFE_AREA_LABEL, SIDE_LABEL, SIDES } from "../../../../lib/caption-position";
+import { MarginField } from "./MarginField";
+import type { CaptionEditor } from "./captionEditor";
+
+export function CaptionMargins({ editor }: { editor: CaptionEditor }) {
+  const { data, draft, setDraft, changeMargin, w, h } = editor;
+  return (
+    <>
+      <div className="field-row tall">
+        <span>Margens</span>
+        <div style={{ flex: 1, display: "grid", gap: 6 }}>
+          {SIDES.map(side => {
+            const opposite = OPPOSITE_SIDE[side];
+            const platformValue = data.safes[draft.platform]?.[side] ?? 0;
+            const value = draft.safe?.[side] ?? platformValue;
+            const oppositeValue = draft.safe?.[opposite] ?? data.safes[draft.platform]?.[opposite] ?? 0;
+            return (
+              <MarginField
+                key={side}
+                name={SIDE_LABEL[side]}
+                value={value}
+                platformValue={platformValue}
+                max={marginMax(oppositeValue)}
+                px={side === "top" || side === "bottom" ? h : w}
+                onChange={n => changeMargin(side, n)}
+              />
+            );
+          })}
+          {draft.safe && (
+            <button
+              className="button"
+              style={{ justifySelf: "start" }}
+              onClick={() =>
+                setDraft(r => {
+                  const n = clone(r!);
+                  delete n.safe;
+                  return n;
+                })
+              }
+            >
+              <ArrowCounterClockwise className="ic" /> Voltar à safe area de{" "}
+              {SAFE_AREA_LABEL[draft.platform] ?? draft.platform}
+            </button>
+          )}
+        </div>
+      </div>
+      <p className="hint">
+        As margens são o quanto a interface da plataforma cobre, em % do quadro (a área vermelha na prévia). Vale para
+        este vídeo. A legenda pode ficar fora: aparece o aviso, não trava.
+      </p>
+    </>
+  );
+}

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

@@ -0,0 +1,70 @@
+/* The caption's color, outline and shadow on the chosen scope: each field shows the effective
+   value (own, inherited or the style default) and goes back to what comes from above. */
+
+import type { CaptionStyle, ColorStyleKey, NumericStyleKey } from "../../../../lib/caption-position";
+import { ColorField } from "./ColorField";
+import { NumberField } from "./NumberField";
+import type { CaptionEditor } from "./captionEditor";
+
+export function CaptionStyleFields({ editor }: { editor: CaptionEditor }) {
+  const { data, draft, own, current, change, remove, scope } = editor;
+
+  const defaults = data.defaults[draft.style] ?? data.defaults.pill ?? ({} as Required<CaptionStyle>);
+  const has = (key: keyof CaptionStyle) => own[key] != null;
+  const color = (key: ColorStyleKey, name: string) => (
+    <ColorField
+      name={name}
+      value={(current[key] ?? defaults[key]) as string}
+      own={has(key)}
+      onChange={c => change(key, c)}
+      onRemove={() => remove(key)}
+    />
+  );
+  const num = (
+    key: NumericStyleKey,
+    name: string,
+    min: number,
+    max: number,
+    step: number,
+    unit: string,
+    pct = false,
+  ) => (
+    <NumberField
+      name={name}
+      value={(current[key] ?? defaults[key]) as number}
+      own={has(key)}
+      min={min}
+      max={max}
+      step={step}
+      unit={unit}
+      pct={pct}
+      onChange={n => change(key, n)}
+      onRemove={() => remove(key)}
+    />
+  );
+  return (
+    <>
+      <h4 className="sub-controls">Cor, contorno e sombra</h4>
+      {color("color", "Texto")}
+      {draft.style === "pill" && (
+        <>
+          {color("background", "Fundo")}
+          {num("background_opacity", "Opac.", 0, 1, 0.01, "%", true)}
+        </>
+      )}
+      {color("outline_color", "Contorno")}
+      {num("outline", "Largura", 0, 20, 1, "px")}
+      {color("shadow_color", "Sombra")}
+      {num("shadow_opacity", "Opac.", 0, 1, 0.01, "%", true)}
+      {num("shadow_blur", "Desfoque", 0, 60, 1, "px")}
+      {num("shadow_x", "Sombra X", -40, 40, 1, "px")}
+      {num("shadow_y", "Sombra Y", -40, 40, 1, "px")}
+      <p className="hint">
+        {draft.style === "pill" ? "A sombra é da pill. " : "A sombra é do texto. "}
+        Contorno com largura 0 não desenha. Mexer em qualquer valor da sombra troca a sombra do estilo por uma camada
+        só.
+        {scope !== "video" && " O que está apagado vem de Todas (ou da cena)."}
+      </p>
+    </>
+  );
+}

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

@@ -0,0 +1,87 @@
+/* A caption's text being edited in the list: Enter saves to captions.srt, Esc cancels, and an
+   edited text can go back to the line's own. */
+
+import { ArrowCounterClockwise, Check, X } from "../../../../components/icons";
+import type { CaptionItem } from "../../../../lib/caption-position";
+
+export function CaptionTextForm({
+  caption: c,
+  newText,
+  setNewText,
+  savingText,
+  maxChars,
+  saveText,
+  setEditing,
+}: {
+  caption: CaptionItem;
+  newText: string;
+  setNewText: (text: string) => void;
+  savingText: boolean;
+  maxChars: number | null;
+  saveText: (text?: string) => void;
+  setEditing: (id: string | null) => void;
+}) {
+  const n = newText.trim().length;
+  const tooLong = maxChars != null && n > maxChars;
+  return (
+    <form
+      className="caption-text"
+      onSubmit={e => {
+        e.preventDefault();
+        saveText();
+      }}
+    >
+      <input
+        autoFocus
+        value={newText}
+        onChange={e => setNewText(e.target.value)}
+        disabled={savingText}
+        aria-label={`Texto da legenda ${c.id}`}
+        onKeyDown={e => {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            setEditing(null);
+          }
+        }}
+      />
+      <span
+        className={`mono${tooLong ? " warning" : " subtle"}`}
+        title={tooLong ? "Passa do limite: a legenda quebra em duas linhas" : "caracteres / limite"}
+      >
+        {n}
+        {maxChars != null && `/${maxChars}`}
+      </span>
+      <button
+        type="submit"
+        className="mini-button"
+        disabled={savingText || !newText.trim() || newText.trim() === c.text}
+        title="Gravar (Enter)"
+        aria-label="Gravar o texto"
+      >
+        <Check weight="bold" />
+      </button>
+      <button
+        type="button"
+        className="mini-button"
+        onClick={() => setEditing(null)}
+        disabled={savingText}
+        title="Cancelar (Esc)"
+        aria-label="Cancelar"
+      >
+        <X weight="bold" />
+      </button>
+      {c.original && (
+        <button
+          type="button"
+          className="mini-button"
+          onClick={() => saveText(c.original)}
+          disabled={savingText}
+          title={`Volta ao texto da fala: “${c.original}”`}
+          aria-label="Voltar ao texto da fala"
+        >
+          <ArrowCounterClockwise weight="bold" />
+        </button>
+      )}
+    </form>
+  );
+}

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

@@ -0,0 +1,37 @@
+/* one style color; dimmed while it comes from the default or the level above */
+
+export function ColorField({
+  name,
+  value,
+  own,
+  onChange,
+  onRemove,
+}: {
+  name: string;
+  value: string;
+  own: boolean;
+  onChange: (c: string) => void;
+  onRemove: () => void;
+}) {
+  return (
+    <label className={`axis${own ? "" : " inherited"}`}>
+      <span>{name}</span>
+      <input type="color" value={value} onChange={e => onChange(e.target.value)} />
+      <input
+        type="text"
+        className="mono"
+        value={value}
+        maxLength={7}
+        spellCheck={false}
+        onChange={e => {
+          const t = e.target.value.trim();
+          if (/^#[0-9a-fA-F]{6}$/.test(t)) onChange(t.toLowerCase());
+        }}
+      />
+      <span style={{ flex: 1 }} />
+      <button type="button" className="mini-button" onClick={onRemove} disabled={!own} title="volta ao que vem de cima">
+        ↺
+      </button>
+    </label>
+  );
+}

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

@@ -0,0 +1,59 @@
+/* one safe-area margin, in % of the frame; dimmed while it comes from the platform */
+
+import { Slider } from "../../../../components/ui/slider";
+
+export function MarginField({
+  name,
+  value,
+  platformValue,
+  max,
+  px,
+  onChange,
+}: {
+  name: string;
+  value: number;
+  platformValue: number;
+  max: number;
+  px: number;
+  onChange: (n: number) => void;
+}) {
+  const pct = (n: number) => Math.round(n * 1000) / 10;
+  const changed = value !== platformValue;
+  return (
+    <label className={`axis${changed ? "" : " inherited"}`}>
+      <span>{name}</span>
+      <Slider
+        variant="fill"
+        aria-label={name}
+        min={0}
+        max={max}
+        step={0.005}
+        value={[value]}
+        markValue={platformValue}
+        snapToMark
+        onValueChange={([n]) => onChange(n)}
+      />
+      <input
+        type="number"
+        className="mono"
+        step={0.5}
+        min={0}
+        value={pct(value)}
+        onChange={e => onChange(Math.min(Math.max((+e.target.value || 0) / 100, 0), max))}
+        title="% do quadro"
+      />
+      <span className="mono subtle" style={{ width: 56 }}>
+        {Math.round(value * px)} px
+      </span>
+      <button
+        type="button"
+        className="mini-button"
+        onClick={() => onChange(platformValue)}
+        title={`Volta ao da plataforma (${pct(platformValue)} %)`}
+        disabled={!changed}
+      >
+        ↺
+      </button>
+    </label>
+  );
+}

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

@@ -0,0 +1,57 @@
+/* one style number; in % when it is an opacity */
+
+import { Slider } from "../../../../components/ui/slider";
+
+export function NumberField({
+  name,
+  value,
+  own,
+  min,
+  max,
+  step,
+  unit,
+  pct,
+  onChange,
+  onRemove,
+}: {
+  name: string;
+  value: number;
+  own: boolean;
+  min: number;
+  max: number;
+  step: number;
+  unit: string;
+  pct?: boolean;
+  onChange: (n: number) => void;
+  onRemove: () => void;
+}) {
+  const shown = pct ? Math.round(value * 100) : value;
+  const fromInput = (n: number) => Math.min(Math.max(pct ? n / 100 : n, min), max);
+  return (
+    <label className={`axis${own ? "" : " inherited"}`}>
+      <span>{name}</span>
+      <Slider
+        variant="fill"
+        aria-label={name}
+        min={min}
+        max={max}
+        step={step}
+        value={[value]}
+        onValueChange={([n]) => onChange(n)}
+      />
+      <input
+        type="number"
+        className="mono"
+        step={pct ? 1 : step}
+        value={shown}
+        onChange={e => onChange(fromInput(+e.target.value || 0))}
+      />
+      <span className="mono subtle" style={{ width: 22 }}>
+        {unit}
+      </span>
+      <button type="button" className="mini-button" onClick={onRemove} disabled={!own} title="volta ao que vem de cima">
+        ↺
+      </button>
+    </label>
+  );
+}