@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,160 @@
+/* --- the takes of a line (omnivideo.py voice --regenerate / --use) ------------------------------
+   The take in use is voice/<line>.wav; the others are the ones history/voice/<line>/ kept. */
+
+import { useEffect, useState } from "react";
+import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
+import type { VideoVoice } from "../../../hooks/useVideoVoice";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { findFile, mediaUrl } from "../../../lib/media";
+import { PROVIDER_NAME } from "../../../lib/providers";
+import { formatSeconds, formatWhen } from "../../../lib/format";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { ArrowClockwise, Check } from "../../../components/icons";
+import type { Line, VideoDetail } from "../../../types/api";
+import { AudioPlayer } from "./AudioPlayer";
+import { LineVoicePicker } from "./LineVoicePicker";
+
+type TakeMeta = { text?: string; instruct?: string | null; dur?: number; provider?: string; profile?: string | null };
+
+export function LineTakes({ video, line, voice }: { video: VideoDetail; line: Line; voice: VideoVoice }) {
+  const { providers, current: videoProvider, profiles, currentProfile } = voice;
+  const running = useVoiceRunning(video);
+  /* the voice (profile) that spoke the take. A take from before the profile was kept does not say
+     which: the video's current voice counts, marked as assumed (`inferred`) */
+  const profileOf = (id?: string | null) => {
+    const real = id || null;
+    const used = real ?? (currentProfile || null);
+    if (!used) return null;
+    const p = profiles?.find(x => x.id === used);
+    return { name: p?.name ?? used, seed: p?.avatar || used, inferred: !real };
+  };
+  const [requested, setRequested] = useState(false);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [response, setResponse] = useState<ActionResult>(null);
+  /* this line's own provider: the one chosen before, or the video's */
+  const [choice, setChoice] = useState<string | null>(null);
+  const chosen = choice ?? (line.provider_pinned && line.provider ? line.provider : videoProvider);
+  const inUse = findFile(video, line.wav);
+  const kept = video.history
+    .filter(h => h.stage === "voice" && h.key === line.id)
+    .map(h => {
+      const wav = h.files.find(f => f.path.endsWith(".wav")) ?? null;
+      const meta = h.data[`${line.id}.json`] as TakeMeta | undefined;
+      const sameText = !!meta && meta.text === line.text && (meta.instruct ?? null) === (line.instruct ?? null);
+      return { h, wav, meta, sameText, version: wav?.path.split("/").at(-2) ?? "" };
+    })
+    .filter(x => x.wav);
+  /* the requested take arrived when the active wav changes */
+  useEffect(() => setRequested(false), [inUse?.mtime]);
+  const generating = requested || !!running;
+
+  const regenerate = async () => {
+    setBusy("regenerate");
+    setResponse(null);
+    const r = await send(
+      api.videos[":slug"].voice.regenerate.$post({
+        param: { slug: enc(video.slug) },
+        json: { line: line.id, ...(chosen !== videoProvider ? { provider: chosen } : {}) },
+      }),
+    );
+    setBusy(null);
+    setResponse(r);
+    if (r.ok) setRequested(true);
+  };
+  const use = async (version: string) => {
+    setBusy(version);
+    setResponse(null);
+    const r = await send(
+      api.videos[":slug"].voice.use.$post({ param: { slug: enc(video.slug) }, json: { line: line.id, version } }),
+    );
+    setBusy(null);
+    setResponse(r);
+  };
+
+  return (
+    <Accordion type="single" collapsible className="takes">
+      <AccordionItem value="voices">
+        <AccordionTrigger>
+          Vozes <span className="count">{kept.length + (inUse ? 1 : 0)}</span>
+          {generating && (
+            <span className="warning"> · gerando outra{running?.effective === "waiting" ? " (na fila)" : ""}…</span>
+          )}
+        </AccordionTrigger>
+        <AccordionContent>
+          <ul>
+            {inUse && (
+              <li className="in-use">
+                <span className="take-header">
+                  <b>Em uso</b> {line.dur != null && formatSeconds(line.dur, 2)}
+                </span>
+                <AudioPlayer
+                  src={mediaUrl(video, inUse)!}
+                  provider={line.provider ?? "voicestudio"}
+                  providerName={PROVIDER_NAME[line.provider ?? "voicestudio"]}
+                  profile={profileOf(line.voice_profile)}
+                  duration={line.dur}
+                  name={`${line.id}, em uso`}
+                />
+              </li>
+            )}
+            {kept.map(({ h, wav, meta, sameText, version }) => (
+              <li key={version}>
+                <span className="take-header">
+                  {formatWhen(h.at)}
+                  {meta?.dur != null && <> · {formatSeconds(meta.dur, 2)}</>}
+                  {!sameText && (
+                    <span className="subtle" title={meta?.text ?? ""}>
+                      {" "}
+                      · {meta ? "Diz outro texto" : "Sem o texto guardado"}
+                    </span>
+                  )}
+                </span>
+                <AudioPlayer
+                  src={mediaUrl(video, wav!)!}
+                  provider={meta?.provider}
+                  providerName={meta?.provider ? PROVIDER_NAME[meta.provider] : null}
+                  profile={profileOf(meta?.profile)}
+                  duration={meta?.dur}
+                  name={`${line.id}, ${formatWhen(h.at)}`}
+                />
+                <button
+                  className="button small"
+                  disabled={!sameText || !!busy || generating}
+                  onClick={() => use(version)}
+                  title={
+                    sameText
+                      ? "Esta leitura passa a ser a do vídeo; a de agora fica guardada"
+                      : "Só vale leitura do texto de agora"
+                  }
+                >
+                  <Check className="ic" /> {busy === version ? "Trocando…" : "Usar esta"}
+                </button>
+              </li>
+            ))}
+          </ul>
+          <div className="actions">
+            <LineVoicePicker
+              lineId={line.id}
+              providers={providers}
+              videoProvider={videoProvider}
+              value={chosen}
+              onChange={setChoice}
+              disabled={!!busy || generating}
+            />
+            <button className="button small" disabled={!!busy || generating} onClick={regenerate}>
+              <ArrowClockwise className="ic" /> {busy === "regenerate" ? "Pedindo…" : "Gerar outra fala"}
+            </button>
+            <span className="hint">
+              {chosen !== videoProvider
+                ? `Só esta fala sai em ${PROVIDER_NAME[chosen] ?? chosen}; o vídeo segue em ${PROVIDER_NAME[videoProvider] ?? videoProvider}. `
+                : ""}
+              A nova entra em uso; a de agora fica guardada aqui (as últimas 5 de cada fala).
+            </span>
+          </div>
+          <ResultMessage result={response} />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

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

@@ -0,0 +1,124 @@
+/* A line's text, editable: with a voice, saving already makes the take of the new text. Removing
+   takes the line out of the narration (a sentence split in two that becomes one) and the agent
+   redoes the video from timing on; the scene's only line does not go */
+
+import { useState } from "react";
+import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { FloppyDisk, X } from "../../../components/icons";
+import type { Line, VideoDetail } from "../../../types/api";
+
+export function LineTextEditor({ video, line, only }: { video: VideoDetail; line: Line; only: boolean }) {
+  const running = useVoiceRunning(video);
+  const [editing, setEditing] = useState(false);
+  const [text, setText] = useState(line.text);
+  const [sending, setSending] = useState(false);
+  const [confirm, setConfirm] = useState(false);
+  const [removing, setRemoving] = useState(false);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+  const changed = text.replace(/\s+/g, " ").trim() !== line.text;
+  const open = () => {
+    setText(line.text);
+    setResponse(null);
+    setEditing(true);
+  };
+  const save = async () => {
+    setSending(true);
+    setResponse(null);
+    const r = await send(
+      api.videos[":slug"].line.text.$post({ param: { slug: enc(video.slug) }, json: { line: line.id, text } }),
+    );
+    setSending(false);
+    setResponse(r);
+    if (r.ok) setEditing(false);
+  };
+  /* taking it out of the narration cannot be undone from the screen: asks for a second click */
+  const remove = async () => {
+    if (!confirm) {
+      setConfirm(true);
+      return;
+    }
+    setConfirm(false);
+    setRemoving(true);
+    setResponse(null);
+    setResponse(
+      await send(api.videos[":slug"].line.remove.$post({ param: { slug: enc(video.slug) }, json: { line: line.id } })),
+    );
+    setRemoving(false);
+  };
+
+  if (!editing) {
+    return (
+      <>
+        <p className="line-text">
+          <span className="mono subtle">{line.id}</span> {line.text}{" "}
+          <button
+            className="subtle-link"
+            onClick={open}
+            disabled={!!running || removing}
+            title={running ? "a voz deste vídeo está sendo gerada" : ""}
+          >
+            Editar
+          </button>{" "}
+          <button
+            className={`subtle-link${confirm ? " warning" : ""}`}
+            onClick={remove}
+            onBlur={() => setConfirm(false)}
+            disabled={!!running || removing || only}
+            title={
+              running
+                ? "a voz deste vídeo está sendo gerada"
+                : only
+                  ? "é a única fala da cena: para tirar a cena, peça ao agente"
+                  : "Tira esta fala da narração; o agente ajusta os beats e refaz tempo, render, legenda e montagem"
+            }
+          >
+            {removing ? "Removendo…" : confirm ? "Remover da narração?" : "Remover"}
+          </button>
+        </p>
+        <ResultMessage result={response} />
+      </>
+    );
+  }
+  return (
+    <div className="edit-line">
+      <span className="mono subtle">{line.id}</span>
+      <textarea
+        aria-label={`Texto da fala ${line.id}`}
+        rows={2}
+        value={text}
+        disabled={sending}
+        autoFocus
+        onChange={e => setText(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Escape") setEditing(false);
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && changed) save();
+        }}
+      />
+      <div className="actions">
+        <button
+          className="button primary small"
+          disabled={sending || !text.trim() || (!changed && !line.wav)}
+          onClick={save}
+        >
+          <FloppyDisk className="ic" />{" "}
+          {sending ? "Gravando…" : line.wav ? (changed ? "Gravar e gerar a voz" : "Gerar outra fala") : "Gravar texto"}
+        </button>
+        <button className="button small" disabled={sending} onClick={() => setEditing(false)}>
+          <X className="ic" /> Cancelar
+        </button>
+        <span className={words > 22 ? "warning" : "subtle"}>
+          {words} palavras{words > 22 ? " · a narração pede até 22" : ""}
+        </span>
+      </div>
+      <p className="hint">
+        {line.wav ? "A leitura de agora fica guardada em Vozes. " : ""}
+        Se o texto tirar a palavra em que um beat entra, o agente grava a fala e muda o beat junto. Escreva como se
+        fala: número por extenso quando a voz pode errar.
+      </p>
+      {response && !response.ok && <p className="response error">{response.error}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+/* The provider of one line only, next to its "Gerar outra fala": the one chosen before, or the
+   video's; equal to the video's, the line follows the video again */
+
+import { Picker } from "../../../components/ui/picker";
+import type { VideoVoice } from "../../../hooks/useVideoVoice";
+import { WithLogo } from "./WithLogo";
+
+export function LineVoicePicker({
+  lineId,
+  providers,
+  videoProvider,
+  value,
+  onChange,
+  disabled,
+}: {
+  lineId: string;
+  providers: VideoVoice["providers"];
+  videoProvider: string;
+  value: string;
+  onChange: (id: string) => void;
+  disabled?: boolean;
+}) {
+  if (providers.length <= 1) return null;
+  return (
+    <Picker
+      aria-label={`Provider da fala ${lineId}`}
+      className="line-picker"
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      options={providers.map(p => ({
+        value: p.id,
+        label: <WithLogo id={p.id}>{`${p.name}${p.id === videoProvider ? " (do vídeo)" : ""}`}</WithLogo>,
+      }))}
+    />
+  );
+}

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

@@ -0,0 +1,25 @@
+import { openLightbox } from "../../../components/Lightbox";
+import { mediaUrl } from "../../../lib/media";
+import type { FileEntry, VideoDetail } from "../../../types/api";
+
+/* an image of the video that opens large on click */
+export function MediaImage({
+  video,
+  file,
+  title,
+  className = "",
+}: {
+  video: VideoDetail;
+  file: FileEntry | null;
+  title: string;
+  className?: string;
+}) {
+  if (!file) return null;
+  const src = mediaUrl(video, file)!;
+  return (
+    <button className={`image ${className}`} onClick={() => openLightbox(src, title)} title={title}>
+      <img src={src} alt={title} loading="lazy" />
+      <span>{title}</span>
+    </button>
+  );
+}

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

@@ -0,0 +1,39 @@
+/* --- 2: motion script ------------------------------------------------------------------- */
+
+import { EmptyResult, ResultTabs, scenesOf, type StageResultProps } from "./StageResult";
+import { ScenesApprovalPanel } from "./ScenesApprovalPanel";
+import { SwapReference } from "./SwapReference";
+
+export function MotionScriptStage({ video, stage }: StageResultProps) {
+  const scenes = scenesOf(video);
+  if (!video.texts.motion && !scenes.length) return <EmptyResult stage={stage} />;
+  return (
+    <>
+      {video.texts.motion && video.scenes && <SwapReference video={video} />}
+      {video.scenes_approval && <ScenesApprovalPanel video={video} />}
+      {!video.scenes_approval && !!scenes.length && (
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Cena</th>
+              <th>Título</th>
+              <th>Herói</th>
+              <th>Objetivo</th>
+            </tr>
+          </thead>
+          <tbody>
+            {scenes.map(c => (
+              <tr key={c.id}>
+                <td className="mono">{c.id}</td>
+                <td>{c.title}</td>
+                <td className="subtle">{c.hero}</td>
+                <td className="subtle">{c.goal}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {video.texts.motion && <ResultTabs tabs={[["motion", "motion.md", video.texts.motion]]} />}
+    </>
+  );
+}

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

@@ -0,0 +1,70 @@
+/* --- 4 and 5: narration, voice and timing (one step on screen) ----------------------------------
+   Per line: the text (editable), what the voice did with it and the takes; per scene, the beats and
+   the line that triggers each. Below, where each line and scene fell in time. */
+
+import { useVideoVoice } from "../../../hooks/useVideoVoice";
+import { EmptyResult, scenesOf, type StageResultProps } from "./StageResult";
+import { VideoVoicePicker } from "./VideoVoicePicker";
+import { VoicePauseBanner } from "./VoicePauseBanner";
+import { ChangedVoices } from "./ChangedVoices";
+import { LineTextEditor } from "./LineTextEditor";
+import { VideoVoiceInfo } from "./VideoVoiceInfo";
+import { LineTakes } from "./LineTakes";
+import { TimingPanel } from "./TimingPanel";
+
+export function NarrationStage({ video, stage }: StageResultProps) {
+  const voice = useVideoVoice(video);
+  const scenes = scenesOf(video);
+  if (!scenes.some(c => c.lines?.length))
+    return (
+      <>
+        <VideoVoicePicker video={video} voice={voice} />
+        <EmptyResult stage={stage} text="Nenhuma fala escrita ainda." />
+      </>
+    );
+  return (
+    <>
+      <VideoVoicePicker video={video} voice={voice} />
+      <div className="scene-list">
+        <VoicePauseBanner video={video} />
+        <ChangedVoices video={video} />
+        {scenes.map(c => (
+          <section key={c.id} className="scene-row">
+            <header>
+              <span className="mono">{c.id}</span> {c.title}
+            </header>
+            {c.lines?.length ? (
+              c.lines.map(f => (
+                <div key={f.id} className="narration-line">
+                  <LineTextEditor video={video} line={f} only={c.lines!.length === 1} />
+                  {f.wav ? (
+                    <>
+                      <VideoVoiceInfo line={f} />
+                      <LineTakes video={video} line={f} voice={voice} />
+                    </>
+                  ) : (
+                    <span className="empty">Sem voz ainda</span>
+                  )}
+                </div>
+              ))
+            ) : (
+              <p className="empty">Sem fala ainda</p>
+            )}
+            {!!c.beats?.length && (
+              <p className="beats-row">
+                {c.beats.map(b => (
+                  <span key={b.element}>
+                    <b>{b.element}</b>{" "}
+                    {b.enters_with ? `← ${b.enters_with}` : <span className="warning">Sem enters_with</span>}
+                  </span>
+                ))}
+              </p>
+            )}
+          </section>
+        ))}
+      </div>
+      <h3>Tempo</h3>
+      <TimingPanel video={video} stage={stage} />
+    </>
+  );
+}