@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,387 @@
+/* --- publish (publish.mjs) -------------------------------------------------------------------- */
+
+import { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useAccounts } from "../../../hooks/useAccounts";
+import { api, enc, send as sendRequest, type ActionResult } from "../../../lib/api";
+import { formatDayTime, timeAgo } from "../../../lib/format";
+import { PLATFORMS, formatPlatformList, type PlatformId } from "../../../lib/platforms";
+import { deletePublishDraft, readPublishDraft, savePublishDraft } from "../../../lib/publish-draft";
+import { PlatformCard } from "../../../components/PlatformCard";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { CalendarBlank, ChatsCircle, Check, UploadSimple, X } from "../../../components/icons";
+import type { FileEntry, VideoDetail } from "../../../types/api";
+import { ScheduledInfo } from "./ScheduledInfo";
+import { CoverPicker } from "./CoverPicker";
+import { PublishText, type PublishTextFields } from "./PublishText";
+
+export function PublishForm({ video, current }: { video: VideoDetail; current: FileEntry }) {
+  const pub = video.publication ?? {};
+  const scheduled = pub.schedule;
+  const navigate = useNavigate();
+  const { accounts } = useAccounts();
+  /* back from the Schedule: everything as it was, with the day picked there */
+  const [draft] = useState(() => readPublishDraft(video.slug));
+  const [mode, setMode] = useState<"now" | "schedule">(draft?.when ? "schedule" : "now");
+  const [whenLocal, setWhenLocal] = useState<string | null>(draft?.when ?? null);
+  const [text, setText] = useState<PublishTextFields>(
+    draft?.text ?? {
+      title: pub.title ?? "",
+      description: pub.description ?? "",
+      caption: pub.caption ?? pub.caption_instagram ?? "",
+    },
+  );
+  const [writing, setWriting] = useState(false);
+  const [textNotice, setTextNotice] = useState<ActionResult>(null);
+  const [privacy, setPrivacy] = useState<string | null>(draft?.privacy ?? null);
+  const [tiktokPrivacy, setTiktokPrivacy] = useState<string | null>(draft?.privacyTiktok ?? null);
+  const [checked, setChecked] = useState<Record<string, boolean>>(draft?.checked ?? {});
+  /* "Republicar": the user deleted or archived the post by hand, so the platform is open to go up again */
+  const [released, setReleased] = useState<Record<string, boolean>>(draft?.released ?? {});
+  const isUp = (id: PlatformId) => !!pub[id]?.id && !released[id];
+  const whenRef = useRef<HTMLDivElement>(null);
+  const [confirm, setConfirm] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const preChecked = useRef(false);
+
+  /* comes checked where the account is ready and the video is not up yet (the draft already brings its own) */
+  useEffect(() => {
+    if (!accounts || preChecked.current) return;
+    preChecked.current = true;
+    if (!draft) setChecked(Object.fromEntries(PLATFORMS.map(({ id }) => [id, !!accounts[id]?.ready && !pub[id]?.id])));
+  }, [accounts]);
+
+  useEffect(() => {
+    /* no text yet: title, description and caption come from the script */
+    if (!draft && !pub.title?.trim() && !pub.description?.trim()) write(false);
+    /* back from the Schedule with the day: the choice stays in view */
+    if (draft?.when) whenRef.current?.scrollIntoView({ block: "center" });
+  }, []);
+
+  /* scheduling with a day picked: the draft follows the screen, to change the day in the Schedule without losing anything */
+  useEffect(() => {
+    if (mode === "schedule" && whenLocal)
+      savePublishDraft({
+        slug: video.slug,
+        title: video.title,
+        text,
+        checked,
+        released,
+        privacy,
+        privacyTiktok: tiktokPrivacy,
+        when: whenLocal,
+        picking: false,
+      });
+    else deletePublishDraft(video.slug);
+  }, [mode, whenLocal, text, checked, released, privacy, tiktokPrivacy]);
+
+  /* the day and time are picked in the Schedule: takes everything on screen and comes back with the day */
+  const pickInSchedule = () => {
+    savePublishDraft({
+      slug: video.slug,
+      title: video.title,
+      text,
+      checked,
+      released,
+      privacy,
+      privacyTiktok: tiktokPrivacy,
+      when: whenLocal,
+      picking: true,
+    });
+    navigate({ to: "/schedule" });
+  };
+
+  /* `publish.mjs text`: Claude writes from the script; redo replaces what is in the fields */
+  const write = async (redo: boolean) => {
+    setWriting(true);
+    setTextNotice(null);
+    const r = await sendRequest(
+      api.videos[":slug"].publish.text.$post({ param: { slug: enc(video.slug) }, json: { redo } }),
+    );
+    setWriting(false);
+    setTextNotice(r);
+    /* the text publish.mjs wrote: a field it didn't write keeps what is there */
+    const t = r.ok && r.text && typeof r.text === "object" && !Array.isArray(r.text) ? r.text : null;
+    if (t) {
+      const pick = (v: unknown, current: string) => (typeof v === "string" ? v : current);
+      setText(s => ({
+        title: pick(t.title, s.title),
+        description: pick(t.description, s.description),
+        caption: pick(t.caption, s.caption),
+      }));
+    } else setText(s => ({ ...s, title: s.title || video.title }));
+    setConfirm(false);
+  };
+
+  const chosen = PLATFORMS.filter(({ id }) => checked[id] && !isUp(id)).map(({ id }) => id);
+  const republishing = chosen.filter(id => released[id]);
+  const priv = privacy ?? accounts?.youtube?.privacy ?? "public";
+  const privTt = tiktokPrivacy ?? accounts?.tiktok?.privacy ?? "PUBLIC_TO_EVERYONE";
+  const field = (k: keyof PublishTextFields, value: string) => {
+    setText(s => ({ ...s, [k]: value }));
+    setConfirm(false);
+  };
+  const check = (id: string, yes: boolean) => {
+    setChecked(m => ({ ...m, [id]: yes }));
+    setConfirm(false);
+  };
+  /* frees (or takes back) a platform that already has the video: the post of before no longer exists there */
+  const release = (id: string, yes: boolean) => {
+    setReleased(m => ({ ...m, [id]: yes }));
+    setChecked(m => ({ ...m, [id]: yes }));
+    setConfirm(false);
+  };
+  const busy = sending || writing || scheduled?.state === "publishing";
+  const scheduling = mode === "schedule";
+  const whenMs = whenLocal ? Date.parse(whenLocal) : NaN;
+  const whenOk = Number.isFinite(whenMs) && whenMs > Date.now() + 60_000;
+  const send = async () => {
+    setSending(true);
+    setResponse(null);
+    const body = {
+      ...text,
+      privacy: priv,
+      tiktok_privacy: privTt,
+      youtube: chosen.includes("youtube"),
+      instagram: chosen.includes("instagram"),
+      tiktok: chosen.includes("tiktok"),
+      republish: republishing.length > 0,
+    };
+    /* the day and time are this machine's; sent as ISO */
+    const publish = api.videos[":slug"].publish;
+    const param = { slug: enc(video.slug) };
+    const r = scheduling
+      ? await sendRequest(publish.schedule.$post({ param, json: { ...body, when: new Date(whenMs).toISOString() } }))
+      : await sendRequest(publish.$post({ param, json: body }));
+    setSending(false);
+    setConfirm(false);
+    setResponse(r);
+    if (r.ok) {
+      setChecked({});
+      setReleased({});
+      setMode("now");
+      setWhenLocal(null);
+    }
+  };
+
+  return (
+    <section className="publish">
+      {accounts?.error && <p className="warning">⚠ contas: {accounts.error}</p>}
+      {accounts?.auto?.approved && (
+        <p className="note">
+          Publicação automática ligada: no fim do pipeline o agente publica sozinho{" "}
+          {formatPlatformList(accounts.auto.platforms)}.
+        </p>
+      )}
+      {scheduled && <ScheduledInfo video={video} post={scheduled} agent={accounts?.scheduler} />}
+      <div className="platform-cards" role="group" aria-label="Onde publicar">
+        {PLATFORMS.map(({ id }) => {
+          const account = accounts?.[id];
+          const done = pub[id];
+          const failed = done?.last_error && (!done.published_at || done.last_error.at > done.published_at);
+          return (
+            <PlatformCard
+              key={id}
+              id={id}
+              account={account}
+              loading={!accounts}
+              checked={!!checked[id]}
+              onChange={yes => check(id, yes)}
+              disabled={sending}
+              published={isUp(id)}
+            >
+              {done?.id && released[id] && (
+                <p className="subtle">
+                  Liberado para republicar. O link de {timeAgo(done.published_at)} fica guardado em{" "}
+                  <code>previous</code>.{" "}
+                  <button className="subtle-link" disabled={sending} onClick={() => release(id, false)}>
+                    Desfazer
+                  </button>
+                </p>
+              )}
+              {done?.id && isUp(id) && (
+                <p className="subtle">
+                  {done.draft ? "Na caixa de entrada do app" : "Publicado"} {timeAgo(done.published_at)}
+                  {(done.url ?? done.studio) && (
+                    <>
+                      {" "}
+                      ·{" "}
+                      <a className="link" href={done.url ?? done.studio} target="_blank" rel="noreferrer">
+                        Abrir
+                      </a>
+                    </>
+                  )}
+                  {done.mp4_mtime != null && done.mp4_mtime !== current.mtime && (
+                    <span className="warning"> · o export mudou depois</span>
+                  )}
+                </p>
+              )}
+              {done?.id &&
+                isUp(id) &&
+                done.cover &&
+                (done.cover.applied ? (
+                  <p className="subtle">Capa: thumbnail {done.cover.version}</p>
+                ) : (
+                  <p className="warning">
+                    A capa {done.cover.version} não foi: {done.cover.error}
+                  </p>
+                ))}
+              {done?.id && isUp(id) && (
+                <button
+                  className="subtle-link"
+                  disabled={sending || scheduled?.state === "publishing"}
+                  title="Para quando você apagou, arquivou ou desfez o post nessa plataforma: libera o card para publicar de novo"
+                  onClick={() => release(id, true)}
+                >
+                  Republicar
+                </button>
+              )}
+              {failed && (
+                <p className="warning">
+                  A última tentativa falhou {timeAgo(done!.last_error!.at)}: {done!.last_error!.message}
+                </p>
+              )}
+              {account && !account.ready && (
+                <p className="hint" title={account.reason}>
+                  {/venceu|revogado/.test(account.reason ?? "") ? "O login venceu" : "Conecte a conta"} em{" "}
+                  <Link to="/settings/$category" params={{ category: "platforms" }} className="link">
+                    Configurações
+                  </Link>
+                </p>
+              )}
+            </PlatformCard>
+          );
+        })}
+      </div>
+
+      {textNotice && (!textNotice.ok || /não escreveu/.test(textNotice.output ?? "")) && (
+        <p className="response error">{textNotice.ok ? textNotice.output : textNotice.error}</p>
+      )}
+      <PublishText
+        text={text}
+        onField={field}
+        writing={writing}
+        busy={busy}
+        onRewrite={() => write(true)}
+        publication={pub}
+        accounts={accounts}
+        checked={checked}
+        privacy={priv}
+        onPrivacy={v => {
+          setPrivacy(v);
+          setConfirm(false);
+        }}
+        tiktokPrivacy={privTt}
+        onTiktokPrivacy={v => {
+          setTiktokPrivacy(v);
+          setConfirm(false);
+        }}
+      />
+
+      <div className="field publish-when" ref={whenRef}>
+        <span>Quando publicar</span>
+        <div className="profiles-strip" role="radiogroup" aria-label="Quando publicar">
+          <button
+            type="button"
+            className={`voice-profile${!scheduling ? " chosen" : ""}`}
+            aria-pressed={!scheduling}
+            disabled={busy}
+            onClick={() => {
+              setMode("now");
+              setConfirm(false);
+            }}
+          >
+            <span className="format-tile when-tile">
+              <UploadSimple />
+            </span>
+            <b>Agora</b>
+            <small>Sobe ao confirmar</small>
+          </button>
+          <button
+            type="button"
+            className={`voice-profile${scheduling ? " chosen" : ""}`}
+            aria-pressed={scheduling}
+            disabled={busy}
+            onClick={pickInSchedule}
+            title={scheduling && whenLocal ? "Trocar o dia e a hora na Agenda" : "Escolher o dia e a hora na Agenda"}
+          >
+            <span className="format-tile when-tile">
+              <CalendarBlank />
+            </span>
+            <b>Agendar</b>
+            <small>{scheduling && whenLocal ? formatDayTime(whenMs) : "Escolher na agenda"}</small>
+          </button>
+        </div>
+      </div>
+      {republishing.length > 0 && (
+        <p className="hint">
+          Republicar em {formatPlatformList(republishing)} presume que o post anterior foi apagado ou arquivado lá: o
+          Omni não apaga nada, só sobe outra vez e passa a apontar para o novo link.
+        </p>
+      )}
+      <CoverPicker video={video} platforms={chosen} />
+      {scheduling && (
+        <p className="hint">
+          {whenOk ? `Sobe ${formatDayTime(whenMs)}, hora deste Mac.` : "Essa hora já passou: escolha outra na agenda."}{" "}
+          <button className="subtle-link" disabled={busy} onClick={pickInSchedule}>
+            Trocar dia e hora
+          </button>{" "}
+          O agente da agenda confere a cada minuto, com o studio aberto ou não; o Mac precisa estar ligado e acordado.
+          {scheduled && " Substitui o agendamento de cima."}
+        </p>
+      )}
+
+      <div className="actions">
+        {/* the video's Omnichat lives on its own screen, never here */}
+        {!confirm && (
+          <Link to="/omnichat/$kind/$id" params={{ kind: "video", id: video.slug }} className="button outlined">
+            <ChatsCircle className="ic" /> Configurar Omnichat para este vídeo
+          </Link>
+        )}
+        {!confirm ? (
+          <button
+            className="button primary"
+            disabled={!chosen.length || !text.title.trim() || busy || (scheduling && !whenOk)}
+            onClick={() => setConfirm(true)}
+          >
+            {scheduling ? <CalendarBlank className="ic" /> : <UploadSimple className="ic" />}
+            {sending ? (scheduling ? "Agendando…" : "Publicando…") : scheduling ? "Agendar" : "Publicar"}
+          </button>
+        ) : (
+          <>
+            <button className="button approve" disabled={sending} onClick={send}>
+              <Check className="ic" />
+              {sending
+                ? scheduling
+                  ? "Agendando…"
+                  : "Publicando…"
+                : scheduling
+                  ? `Confirmar: publicar ${formatPlatformList(chosen)} ${formatDayTime(whenMs)}`
+                  : `Confirmar: publicar ${formatPlatformList(chosen)}`}
+            </button>
+            {!sending && (
+              <button className="button" onClick={() => setConfirm(false)}>
+                <X className="ic" /> Cancelar
+              </button>
+            )}
+          </>
+        )}
+      </div>
+      {sending && !scheduling && (
+        <p className="hint">
+          Subindo
+          {checked.instagram || checked.tiktok
+            ? ` e esperando ${checked.instagram && checked.tiktok ? "o Instagram e o TikTok processarem" : checked.instagram ? "o Instagram processar" : "o TikTok processar"}`
+            : ""}
+          : leva alguns minutos. O resultado fica no publication.json mesmo se você sair da tela.
+        </p>
+      )}
+      <ResultMessage result={response} />
+      <p className="hint">
+        Roda <code>publish.mjs</code>, que sobe o MP4 acima e grava o link em <code>publication.json</code>. Conectar as
+        contas: Configurações → Plataformas.
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,76 @@
+/* --- 9: publish -------------------------------------------------------------------------------- */
+
+import { useState, type ReactNode } from "react";
+import { ImageSquare, VideoCamera } from "../../../components/icons";
+import { currentExport } from "../../../lib/export";
+import { useOmniHandle } from "../../../lib/omni-ui";
+import { stageTabsKey } from "../../../../shared/omni-screens";
+import { mediaUrl } from "../../../lib/media";
+import { formatBytes, formatWhen } from "../../../lib/format";
+import { EmptyResult, type StageResultProps } from "./StageResult";
+import { VideoPlayer } from "./VideoPlayer";
+import { PublishForm } from "./PublishForm";
+import { ThumbnailPanel } from "./ThumbnailPanel";
+
+export function PublishStage({ video, stage }: StageResultProps) {
+  const [tab, setTab] = useState("info");
+  /* Omni opens the tabs (navigate with stage publish and tab) */
+  useOmniHandle(stageTabsKey(video.slug, "publish"), { openTab: setTab });
+  const current = currentExport(video);
+  if (!current) return <EmptyResult stage={stage} text="Ainda não há vídeo exportado para publicar." />;
+  const exp = video.status?.stages.find(e => e.id === "export");
+  const tabs: [string, string, ReactNode][] = [
+    ["info", "Informações do vídeo", <VideoCamera className="ic" />],
+    ["thumbnail", "Thumbnail", <ImageSquare className="ic" />],
+  ];
+  const vertical = !video.format || video.format.h > video.format.w;
+  /* the preview sits alone on the left and does not leave the screen; the tabs and what they show,
+     on the right. Both stay mounted: switching tabs loses neither typed text nor form choices. The
+     video's Omnichat is set up on its own screen (/omnichat/video/<slug>), from the button beside
+     Publicar */
+  return (
+    <div className={`side-by-side publish-layout ${vertical ? "vertical" : "horizontal"}`}>
+      <div className="publish-preview">
+        <VideoPlayer video={video} src={mediaUrl(video, current)!} />
+      </div>
+      <div className="publish-column">
+        <div className="segmented page-tabs" role="tablist" aria-label="Publicar">
+          {tabs.map(([k, name, icon]) => (
+            <button
+              key={k}
+              role="tab"
+              aria-selected={k === tab}
+              className={k === tab ? "active" : ""}
+              onClick={() => setTab(k)}
+            >
+              {icon}
+              {name}
+            </button>
+          ))}
+        </div>
+        <div role="tabpanel" hidden={tab !== "info"}>
+          <dl className="data">
+            <dt>Sobe</dt>
+            <dd className="mono">{current.path}</dd>
+            <dt>Montado</dt>
+            <dd>
+              {formatWhen(video.assembly?.assembled_at ?? current.mtime)} · {formatBytes(current.size)}
+            </dd>
+            {exp?.outdated && (
+              <>
+                <dt>Atenção</dt>
+                <dd className="warning">
+                  Cenas, voz ou legenda mudaram depois da montagem: monte de novo antes de publicar
+                </dd>
+              </>
+            )}
+          </dl>
+          <PublishForm key={video.slug} video={video} current={current} />
+        </div>
+        <div role="tabpanel" hidden={tab !== "thumbnail"}>
+          <ThumbnailPanel key={`thumb-${video.slug}`} video={video} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,149 @@
+/* The publish form's accordion: title, description, caption and the privacy of each platform */
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { Picker } from "../../../components/ui/picker";
+import type { PlatformAccounts, Publication } from "../../../types/api";
+
+export type PublishTextFields = { title: string; description: string; caption: string };
+
+const PRIVACY_OPTIONS = [
+  ["private", "Privado"],
+  ["unlisted", "Não listado"],
+  ["public", "Público"],
+] as const;
+const TIKTOK_PRIVACY_OPTIONS = [
+  ["SELF_ONLY", "Só eu"],
+  ["MUTUAL_FOLLOW_FRIENDS", "Amigos"],
+  ["FOLLOWER_OF_CREATOR", "Seguidores"],
+  ["PUBLIC_TO_EVERYONE", "Todo mundo"],
+] as const;
+
+export function PublishText({
+  text,
+  onField,
+  writing,
+  busy,
+  onRewrite,
+  publication,
+  accounts,
+  checked,
+  privacy,
+  onPrivacy,
+  tiktokPrivacy,
+  onTiktokPrivacy,
+}: {
+  text: PublishTextFields;
+  onField: (k: keyof PublishTextFields, value: string) => void;
+  writing: boolean;
+  busy: boolean;
+  onRewrite: () => void;
+  publication: Publication;
+  accounts: PlatformAccounts | null;
+  checked: Record<string, boolean>;
+  privacy: string;
+  onPrivacy: (v: string) => void;
+  tiktokPrivacy: string;
+  onTiktokPrivacy: (v: string) => void;
+}) {
+  const tt = accounts?.tiktok;
+  const tiktokDraft = tt?.mode === "draft";
+  return (
+    <Accordion type="single" collapsible className="publish-accordion">
+      <AccordionItem value="text">
+        <AccordionTrigger>
+          <span>Título, descrição e configuração</span>
+          <span className="subtle publish-accordion-summary">
+            {writing ? "Escrevendo a partir do roteiro…" : text.title.trim() || "Sem título: obrigatório para publicar"}
+          </span>
+        </AccordionTrigger>
+        <AccordionContent className="publish-accordion-fields">
+          <div className="publish-text-header">
+            <span className="hint">
+              {writing
+                ? "Escrevendo título, descrição e legenda a partir do roteiro…"
+                : publication.text_generated
+                  ? `Texto ${publication.text_generated.by === "claude" ? "Escrito pelo agente" : "tirado"} a partir do roteiro: edite à vontade.`
+                  : "Título, descrição e legenda deste vídeo."}
+            </span>
+            <button className="subtle-link" disabled={busy} onClick={onRewrite}>
+              {writing ? "Escrevendo…" : "Escrever de novo a partir do roteiro"}
+            </button>
+          </div>
+          <label className="field">
+            <span>
+              Título <em>YouTube · {text.title.length}/100</em>
+            </span>
+            <input
+              value={text.title}
+              maxLength={100}
+              disabled={busy}
+              placeholder={writing ? "Escrevendo…" : ""}
+              onChange={e => onField("title", e.target.value)}
+            />
+          </label>
+          <label className="field">
+            <span>
+              Descrição <em>YouTube</em>
+            </span>
+            <textarea
+              rows={4}
+              value={text.description}
+              disabled={busy}
+              placeholder={writing ? "Escrevendo…" : ""}
+              onChange={e => onField("description", e.target.value)}
+            />
+          </label>
+          <label className="field">
+            <span>
+              Legenda <em>Instagram e TikTok · vazia = título e descrição</em>
+            </span>
+            <textarea
+              rows={3}
+              value={text.caption}
+              disabled={busy}
+              placeholder={writing ? "Escrevendo…" : [text.title, text.description].filter(Boolean).join("\n\n")}
+              onChange={e => onField("caption", e.target.value)}
+            />
+          </label>
+          {checked.youtube && (
+            <label className="field">
+              <span>Privacidade no YouTube</span>
+              <Picker
+                aria-label="Privacidade no YouTube"
+                value={privacy}
+                disabled={busy}
+                onChange={onPrivacy}
+                options={PRIVACY_OPTIONS.map(([k, name]) => ({ value: k, label: name }))}
+              />
+              {privacy !== "private" && accounts?.youtube && !accounts.youtube.audited && (
+                <small>
+                  Sem a auditoria do Google, o YouTube trava o vídeo como privado: troque no YouTube Studio depois.
+                </small>
+              )}
+            </label>
+          )}
+          {checked.tiktok &&
+            (tiktokDraft ? (
+              <p className="hint">
+                TikTok em modo rascunho: o vídeo vai para a caixa de entrada do app, e você termina a postagem lá.
+              </p>
+            ) : (
+              <label className="field">
+                <span>Quem vê no TikTok</span>
+                <Picker
+                  aria-label="Quem vê no TikTok"
+                  value={tiktokPrivacy}
+                  disabled={busy}
+                  onChange={onTiktokPrivacy}
+                  options={TIKTOK_PRIVACY_OPTIONS.map(([k, name]) => ({ value: k, label: name }))}
+                />
+                {tiktokPrivacy !== "SELF_ONLY" && tt && !tt.audited && (
+                  <small>Sem a auditoria do TikTok, o app só publica como "Só eu": mude no app depois.</small>
+                )}
+              </label>
+            ))}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}