@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,111 @@
+/* A clip on the track (animation or voice): in Select it drags (changes the `offset`, snapping to
+   the other clips' edges and to the playhead) and selects; with the Razor, splits in two there. */
+
+import { toOriginal } from "../../../../../../tools/cuts.mjs";
+import { clipLength } from "../../../../../../tools/soundtrack.mjs";
+import { dragOffsetAt, snapClipStart } from "../../../../lib/sound-timeline";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Clip, ClipKind, SoundLine } from "./types";
+
+export function ClipBlock({
+  st,
+  geo,
+  kind,
+  id,
+  k,
+  cl,
+  offset,
+  base,
+  z,
+  label,
+  title,
+  line,
+}: {
+  st: SoundTimelineState;
+  geo: TimelineGeometry;
+  kind: ClipKind;
+  id: string;
+  k: number;
+  cl: Clip;
+  offset: number;
+  base: number;
+  z: number;
+  label: string;
+  title: string;
+  line?: SoundLine;
+}) {
+  const { clipSel, setClipSel, tool, razorCut, cuts, clipDrag, clipDragOffset, setClipDragOffset, moveClip, stepOf } =
+    st;
+  const { zoom, t } = st;
+  const { voiceVolume, muted } = st.mix;
+  const { boxOf, E, razorTime, clipEdges } = geo;
+  const ini = base + cl.from + offset;
+  /* a sped piece is shorter on the track */
+  const bx = boxOf(ini, ini + clipLength(cl));
+  if (bx.width < 0.5) return null;
+  const chosen = clipSel?.kind === kind && clipSel.id === id && clipSel.k === k;
+  const cls =
+    kind === "video"
+      ? "sound-scene"
+      : `sound-line${line?.wav ? "" : " unset"}${voiceVolume === 0 || muted.voice ? " muted" : ""}`;
+  const style =
+    kind === "video"
+      ? { ...bx, zIndex: 1 + z }
+      : { ...bx, opacity: voiceVolume === 0 ? undefined : Math.min(1, 0.35 + 0.65 * (voiceVolume / 100)) };
+  const same = (a: { kind: ClipKind; id: string; k: number } | null) =>
+    !!a && a.kind === kind && a.id === id && a.k === k;
+  return (
+    <span
+      className={`${cls} clip${offset ? " shifted" : ""}${chosen ? " sel" : ""}${tool === "select" ? " movable" : ""}${tool === "razor" ? " razorable" : ""}`}
+      style={style}
+      title={`${title}${offset ? ` · ${offset > 0 ? "+" : ""}${offset.toFixed(2)}s do lugar` : ""} · ${tool === "razor" ? "clique para quebrar aqui" : "arraste para mover (Alt solta o ímã), Delete apaga"}`}
+      onPointerDown={e => {
+        if (tool === "razor") {
+          e.stopPropagation();
+          razorCut(kind, id, k, toOriginal(razorTime(e), cuts));
+          return;
+        }
+        if (tool !== "select") return;
+        clipDrag.current = { kind, id, k, x0: e.clientX, offset0: cl.offset, moved: false };
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+      }}
+      onPointerMove={e => {
+        const a = clipDrag.current;
+        if (!same(a)) return;
+        const dxp = e.clientX - a!.x0;
+        if (!a!.moved && Math.abs(dxp) < 3) return;
+        a!.moved = true;
+        /* new start in edited time, snapping to the other clips' edges and to the playhead */
+        const ed = snapClipStart(
+          E(base + cl.from + a!.offset0) + dxp / zoom,
+          clipLength(cl),
+          e.altKey ? null : [0, t, ...clipEdges(kind, id, k)],
+          zoom,
+        );
+        setClipDragOffset({ kind, id, k, offset: dragOffsetAt(ed, { cuts, base, from: cl.from, step: stepOf(kind) }) });
+      }}
+      onPointerUp={() => {
+        const a = clipDrag.current;
+        clipDrag.current = null;
+        const end = clipDragOffset;
+        setClipDragOffset(null);
+        if (!same(a)) return;
+        if (!a!.moved) {
+          setClipSel({ kind, id, k });
+          return;
+        }
+        if (same(end)) moveClip(kind, id, k, end!.offset);
+        setClipSel({ kind, id, k });
+      }}
+    >
+      {label}
+      {offset ? (
+        <b className="sound-scene-at">
+          {offset > 0 ? "+" : ""}
+          {offset.toFixed(2)}s
+        </b>
+      ) : null}
+    </span>
+  );
+}

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

@@ -0,0 +1,76 @@
+/* The chosen clip (a piece of animation or of voice): watch or listen, back to its place, delete,
+   and its shift from where it belongs. */
+
+import { Play, Trash } from "../../../../components/icons";
+import { clipSpeed } from "../../../../../../tools/soundtrack.mjs";
+import { round2 } from "../../../../lib/sound-timeline";
+import { NumberInput } from "./NumberInput";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { ClipSelection, SoundData } from "./types";
+
+export function ClipPanel({
+  st,
+  data,
+  clipSel,
+  E,
+  fps,
+}: {
+  st: SoundTimelineState;
+  data: SoundData;
+  clipSel: ClipSelection;
+  E: (o: number) => number;
+  fps: number;
+}) {
+  const { clipsOf, baseOf, animScenes, play, moveClip, deleteClip } = st;
+  const { kind, id, k } = clipSel;
+  const all = clipsOf(kind, id),
+    cl = all[k];
+  if (!cl) return null;
+  const base = baseOf(kind, id);
+  const title = kind === "video" ? animScenes.find(x => x.id === id)?.title : data.lines.find(f => f.id === id)?.text;
+  return (
+    <section className="sound-panel">
+      <header>
+        <b>
+          {kind === "video" ? "Animação" : "Voz"} {id}
+          {all.length > 1 ? ` · pedaço ${k + 1} de ${all.length}` : ""}
+        </b>
+        <span className="subtle">
+          {round2(cl.from)}–{round2(cl.to)} do {kind === "video" ? "MP4" : "áudio"}
+          {clipSpeed(cl) !== 1 ? ` · ${Math.round(clipSpeed(cl) * 100)}%` : ""}
+          {title ? ` · ${title}` : ""}
+        </span>
+        <span className="actions">
+          <button className="button small" onClick={() => play(Math.max(0, E(base + cl.from + cl.offset) - 0.8))}>
+            <Play className="ic" /> {kind === "video" ? "Ver" : "Ouvir"}
+          </button>
+          {cl.offset !== 0 && (
+            <button className="button small" onClick={() => moveClip(kind, id, k, 0)}>
+              Voltar ao lugar
+            </button>
+          )}
+          <button className="button small" onClick={() => deleteClip(kind, id, k)}>
+            <Trash className="ic" /> Apagar
+          </button>
+        </span>
+      </header>
+      <div className="sound-fields">
+        <NumberInput
+          name="Deslocamento"
+          value={+cl.offset.toFixed(kind === "video" ? 2 : 3)}
+          min={-30}
+          max={30}
+          step={kind === "video" ? 1 / fps : 0.01}
+          suffix={`s ${cl.offset > 0 ? "depois do" : cl.offset < 0 ? "antes do" : "no"} lugar`}
+          onChange={n => moveClip(kind, id, k, n)}
+        />
+      </div>
+      <p className="hint">
+        {kind === "video"
+          ? "Só a imagem anda: a voz e a legenda ficam, e os efeitos dos beats deste pedaço vão junto. Onde dois pedaços se cobrem, aparece o que começa por último; num buraco, a imagem para no último quadro."
+          : "Só esta voz anda; a legenda e o abaixar da música vão junto. Apagado, o trecho fica em silêncio."}{" "}
+        ← e → empurram um quadro (Shift: dez), Delete apaga. O Corte (B) quebra um clip em dois.
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,44 @@
+/* The cut list: how much is out, whether the export has these cuts yet, and per cut where it is
+   (go there), its length, its span in the uncut video and undo. */
+
+import { removedDuration } from "../../../../../../tools/cuts.mjs";
+import { round2 } from "../../../../lib/sound-timeline";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { SoundData } from "./types";
+
+export function CutsPanel({ st, data, E }: { st: SoundTimelineState; data: SoundData; E: (o: number) => number }) {
+  const { cuts, editedTotal, seek, undoCut } = st;
+  return cuts.length === 0 ? (
+    <p className="hint sound-no-selection">
+      Nenhum corte. Use a ferramenta Corte de área na timeline para tirar um trecho do vídeo.
+    </p>
+  ) : (
+    <section className="sound-panel sound-cuts">
+      <header>
+        <b>Cortes</b>
+        <span className="subtle">
+          {round2(removedDuration(cuts))} fora · {round2(data.total)} → {round2(editedTotal)}
+        </span>
+        {data.export && JSON.stringify(data.export.cuts) !== JSON.stringify(cuts) && (
+          <span className="hint warning">o export ainda não tem estes cortes: Renderizar</span>
+        )}
+      </header>
+      <ol>
+        {cuts.map((c, i) => (
+          <li key={`${c.from}-${c.to}`}>
+            <button className="mini-button" title="Ir até o corte" onClick={() => seek(E(c.from))}>
+              em {round2(E(c.from))}
+            </button>
+            <span className="mono">{round2(c.to - c.from)}</span>
+            <span className="subtle mono">
+              {round2(c.from)}–{round2(c.to)} sem cortes
+            </span>
+            <button className="mini-button" onClick={() => undoCut(i)}>
+              Desfazer
+            </button>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

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

@@ -0,0 +1,73 @@
+/* The top panel's tabs (one at a time): the agent (the mark becomes the animation while it works),
+   the settings of the selection, the sound library, the cut list and, when given, the scene
+   renders; the stage drawer button at the end. */
+
+import type React from "react";
+import { AgentMark } from "../../../../components/AgentMark";
+import { AgentWalking } from "../../../../components/AgentWalking";
+import {
+  FilmStrip,
+  SelectionArea,
+  SlidersHorizontal,
+  Subtitles,
+  VideoCamera,
+  VolumeHigh,
+} from "../../../../components/icons";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { EditorTab } from "./types";
+
+export function EditorTabBar({
+  st,
+  hasScenes,
+  drawerButton,
+}: {
+  st: SoundTimelineState;
+  hasScenes: boolean;
+  drawerButton?: React.ReactNode;
+}) {
+  const { agentEditing, cuts, tab, setTab, pending, dirty, rendering, saving, planError, render, video } = st;
+  const exportOutdated = !!video.status?.stages.find(e => e.id === "export")?.outdated;
+  const tabs: { id: EditorTab; name: string; icon: React.ReactNode; n?: number }[] = [
+    /* the agent at work: the mark becomes the animation */
+    {
+      id: "agent",
+      name: "Agente",
+      icon: agentEditing ? <AgentWalking className="in-corner" /> : <AgentMark className="ic" />,
+    },
+    { id: "settings", name: "Ajustes", icon: <SlidersHorizontal className="ic" /> },
+    { id: "sounds", name: "Sons", icon: <VolumeHigh className="ic" /> },
+    { id: "captions", name: "Legenda", icon: <Subtitles className="ic" /> },
+    { id: "cuts", name: "Cortes", icon: <SelectionArea className="ic" />, n: cuts.length },
+    ...(hasScenes ? [{ id: "scenes" as const, name: "Cenas", icon: <FilmStrip className="ic" /> }] : []),
+  ];
+  return (
+    <div className="sound-tabs">
+      <div className="segmented" role="tablist" aria-label="Painel do editor">
+        {tabs.map(a => (
+          <button
+            key={a.id}
+            role="tab"
+            aria-selected={tab === a.id}
+            className={tab === a.id ? "active" : ""}
+            onClick={() => setTab(a.id)}
+          >
+            {a.icon}
+            {a.name}
+            {a.n ? <span className="tab-count">{a.n}</span> : null}
+          </button>
+        ))}
+      </div>
+      <span className="sound-tabs-end">
+        {drawerButton}
+        <button
+          className="button primary"
+          disabled={!(pending || dirty || exportOutdated) || rendering || saving || !!planError}
+          onClick={render}
+          title="Remonta o export (assemble.mjs, pela fila) com o som, a legenda e a velocidade salvos"
+        >
+          <VideoCamera className="ic" /> {rendering ? "Renderizando…" : "Renderizar"}
+        </button>
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+/* The sound picker: the kit grouped by role and the sounds captured for this video (music only for the bed). */
+
+import { Picker } from "../../../../components/ui/picker";
+import { roleLabel, round2 } from "../../../../lib/sound-timeline";
+import type { EffectInfo, SoundCatalog } from "./types";
+
+export function EffectChoice({
+  catalog,
+  value,
+  onChange,
+  bed = false,
+}: {
+  catalog: SoundCatalog;
+  value: string;
+  onChange: (n: string) => void;
+  bed?: boolean;
+}) {
+  const fits = (e: EffectInfo) => (bed ? true : !e.music);
+  const roles = Object.keys(catalog.roles);
+  const desc = (e: EffectInfo) =>
+    `${e.name} · ${e.music ? `${Math.round(e.duration)}s trilha` : round2(e.useful_end_s ?? e.duration)}`;
+  return (
+    <Picker
+      aria-label="Som"
+      value={value}
+      onChange={onChange}
+      placeholder="Escolha um som"
+      options={[
+        ...roles.flatMap(p => {
+          const ofRole = catalog.kit.filter(e => e.role === p && fits(e));
+          return ofRole.length
+            ? [{ group: `kit · ${roleLabel(p)}`, options: ofRole.map(e => ({ value: e.name, label: desc(e) })) }]
+            : [];
+        }),
+        ...(catalog.video.filter(fits).length > 0
+          ? [
+              {
+                group: "Capturados para este vídeo",
+                options: catalog.video.filter(fits).map(e => ({ value: e.name, label: desc(e) })),
+              },
+            ]
+          : []),
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,89 @@
+/* One effect on the effects row: drag moves it (with the others selected), Shift + drag duplicates,
+   Ctrl/Cmd + click adds it to or removes it from the selection. */
+
+import { Fragment } from "react";
+import { LANE_HEIGHT, round2 } from "../../../../lib/sound-timeline";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { PlanItem } from "./types";
+
+export function EffectItem({ st, geo, it }: { st: SoundTimelineState; geo: TimelineGeometry; it: PlanItem }) {
+  const {
+    placeIndex,
+    dragOffset,
+    setDragOffset,
+    multi,
+    setMulti,
+    sel,
+    setSel,
+    itemLanes,
+    dropTarget,
+    drag,
+    duplicate,
+    move,
+    zoom,
+  } = st;
+  const { x } = geo;
+  const i = placeIndex(it);
+  const key = `${i}:${it.layer}`;
+  const moving = dragOffset?.keys.includes(key) ? dragOffset : null;
+  const shift = moving ? moving.dx : 0;
+  const active = multi.includes(key) || (sel && sel !== "bed" && sel.place === i && sel.layer === it.layer);
+  const box = { width: Math.max(4, x(it.duration)), top: 3 + (itemLanes.get(it.id) ?? 0) * LANE_HEIGHT };
+  return (
+    <Fragment>
+      {/* with Shift the original stays put and what moves is the copy */}
+      {moving?.copy && Math.abs(shift) > 2 && (
+        <div className={`sound-effect role-${it.role ?? "video"} ghost`} style={{ left: x(it.start), ...box }}>
+          <span className="sound-name">{it.name.replace(/\.mp3$/, "")}</span>
+        </div>
+      )}
+      <div
+        data-place={i}
+        data-layer={it.layer}
+        className={`sound-effect role-${it.role ?? "video"}${active ? " sel" : ""}${dropTarget === `${i}:${it.layer}` ? " target" : ""}${moving?.copy ? " copying" : ""}`}
+        style={{ left: x(it.start) + shift, ...box }}
+        title={`${it.id} · ${it.name} · começa ${round2(it.start)} · ${it.gain_db > 0 ? "+" : ""}${it.gain_db} dB · arraste para mover, Shift + arraste para duplicar, Ctrl/Cmd + clique para selecionar vários`}
+        onContextMenu={e => e.preventDefault()}
+        onPointerDown={e => {
+          if (i < 0) return;
+          /* Ctrl or Cmd + click: adds to or removes from the selection, without dragging */
+          if (e.ctrlKey || e.metaKey) {
+            const rest = multi.filter(k => k !== key);
+            if (multi.includes(key)) {
+              setMulti(rest);
+              const last = rest.at(-1);
+              setSel(last ? { place: +last.split(":")[0], layer: +last.split(":")[1] } : null);
+            } else {
+              setMulti([...multi, key]);
+              setSel({ place: i, layer: it.layer });
+            }
+            return;
+          }
+          const group = multi.includes(key) && multi.length > 1 ? multi : [key];
+          drag.current = { x0: e.clientX, dx: 0, copy: e.shiftKey, keys: group };
+          (e.target as HTMLElement).setPointerCapture(e.pointerId);
+          if (group.length === 1) setSel({ place: i, layer: it.layer });
+        }}
+        onPointerMove={e => {
+          const a = drag.current;
+          if (!a || !a.keys.includes(key)) return;
+          a.dx = e.clientX - a.x0;
+          a.copy = a.copy || e.shiftKey;
+          setDragOffset({ keys: a.keys, dx: a.dx, copy: a.copy });
+        }}
+        onPointerUp={e => {
+          const a = drag.current;
+          drag.current = null;
+          setDragOffset(null);
+          if (!a || Math.abs(a.dx) <= 2) return;
+          if (a.copy || e.shiftKey) duplicate(a.keys, a.dx / zoom);
+          else move(a.keys, a.dx / zoom);
+        }}
+      >
+        <span className="sound-peak" style={{ left: x(it.peak - it.start) }} />
+        <span className="sound-name">{it.name.replace(/\.mp3$/, "")}</span>
+      </div>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,232 @@
+/* The chosen effect's settings: its layers, the sound, where it lands (peak or start, `offset`),
+   volume, the file span (waveform with draggable trim), fades, stretch or speed, pitch and ducking. */
+
+import { Play, Plus, Trash } from "../../../../components/icons";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { isCut } from "../../../../../../tools/cuts.mjs";
+import { SMALL_ROLES, effectSrc, findPlanItem, round2 } from "../../../../lib/sound-timeline";
+import { EffectChoice } from "./EffectChoice";
+import { Lane } from "./Lane";
+import { NumberInput } from "./NumberInput";
+import { Waveform } from "./Waveform";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Place, Sound, SoundData } from "./types";
+
+export function EffectPanel({
+  st,
+  data,
+  place,
+  layer,
+  selPlace,
+  selSound,
+  E,
+}: {
+  st: SoundTimelineState;
+  data: SoundData;
+  place: number;
+  layer: number;
+  selPlace: Place;
+  selSound: Sound;
+  E: (o: number) => number;
+}) {
+  const { video, plan, play, changeDraft, changeSound, setSel, defaultSound, effectOf, instantOf, cuts } = st;
+  const selItem = findPlanItem(plan?.items ?? [], selPlace, layer);
+  const selEffect = effectOf(selSound.name);
+  const dur = selEffect?.duration ?? 1;
+  const trim: [number, number] = [selSound.trim?.[0] ?? 0, selSound.trim?.[1] ?? selEffect?.useful_end_s ?? dur];
+  const role = selEffect?.role ? data.catalog.roles[selEffect.role] : null;
+  const instant = instantOf(selPlace);
+  return (
+    <section className="sound-panel">
+      <header>
+        <b>
+          {selPlace.scene} · {selPlace.type === "transition" ? "Troca de cena" : selPlace.element}
+        </b>
+        <span className="subtle">
+          Instante {instant != null ? round2(E(instant)) : "?"}
+          {instant != null && isCut(instant, cuts) ? " (num corte: não entra no export)" : ""}
+          {selPlace.sounds.length > 1 ? ` · camada ${layer + 1} de ${selPlace.sounds.length}` : ""}
+        </span>
+        {selPlace.sounds.length > 1 && (
+          <span className="segmented small">
+            {selPlace.sounds.map((_, k) => (
+              <button key={k} className={k === layer ? "active" : ""} onClick={() => setSel({ place, layer: k })}>
+                {k + 1}
+              </button>
+            ))}
+          </span>
+        )}
+        <span className="actions">
+          {selItem && (
+            <button className="button small" onClick={() => play(Math.max(0, E(selItem.start) - 0.8))}>
+              <Play className="ic" /> Ouvir
+            </button>
+          )}
+          <button
+            className="button small"
+            onClick={() => {
+              changeDraft(r => {
+                r.places[place].sounds.push({ name: defaultSound(selPlace.type) });
+              });
+              setSel({ place, layer: selPlace.sounds.length });
+            }}
+          >
+            <Plus className="ic" /> Camada
+          </button>
+          <button
+            className="button small"
+            onClick={() => {
+              changeDraft(r => {
+                r.places[place].sounds.splice(layer, 1);
+              });
+              setSel(selPlace.sounds.length > 1 ? { place, layer: 0 } : null);
+            }}
+          >
+            <Trash className="ic" /> Remover
+          </button>
+        </span>
+      </header>
+      <div className="sound-fields">
+        <label className="sound-field wide">
+          <span>Som</span>
+          <EffectChoice
+            catalog={data.catalog}
+            value={selSound.name}
+            onChange={name =>
+              changeSound(place, layer, s => ({
+                name,
+                ...(s.anchor ? { anchor: s.anchor } : {}),
+                ...(s.offset != null ? { offset: s.offset } : {}),
+                ...(s.db != null ? { db: s.db } : {}),
+              }))
+            }
+          />
+        </label>
+        <span className="segmented small" title="Que ponto do efeito cai no instante">
+          <button
+            className={selSound.anchor !== "start" ? "active" : ""}
+            onClick={() => changeSound(place, layer, { anchor: undefined })}
+          >
+            Pico no instante
+          </button>
+          <button
+            className={selSound.anchor === "start" ? "active" : ""}
+            onClick={() => changeSound(place, layer, { anchor: "start" })}
+          >
+            Começa no instante
+          </button>
+        </span>
+        <NumberInput
+          name="Em"
+          value={selSound.offset ?? 0}
+          min={-10}
+          max={10}
+          suffix="s"
+          onChange={offset => changeSound(place, layer, { offset })}
+        />
+        <Lane
+          name={`volume${role ? ` (papel ${role.db} dB)` : ""}`}
+          value={selSound.db ?? 0}
+          min={-24}
+          max={12}
+          onChange={db => changeSound(place, layer, { db })}
+        />
+      </div>
+      <div className="sound-trim">
+        <span className="subtle">Trecho do arquivo: arraste as bordas verdes</span>
+        <Waveform
+          url={effectSrc(video.slug, selEffect)}
+          duration={dur}
+          trim={trim}
+          onChange={tr => changeSound(place, layer, { trim: tr })}
+        />
+        <div className="sound-fields">
+          <NumberInput
+            name="De"
+            value={trim[0]}
+            min={0}
+            max={dur}
+            suffix="s"
+            onChange={n => changeSound(place, layer, { trim: [n, selSound.trim?.[1] ?? null] })}
+          />
+          <NumberInput
+            name="Até"
+            value={trim[1]}
+            min={0}
+            max={dur}
+            suffix="s"
+            onChange={n => changeSound(place, layer, { trim: [trim[0], n] })}
+          />
+          <button className="mini-button" onClick={() => changeSound(place, layer, { trim: undefined })}>
+            Arquivo todo
+          </button>
+          <NumberInput
+            name="Fade entra"
+            value={selSound.fade?.[0] ?? 0}
+            min={0}
+            max={10}
+            suffix="s"
+            onChange={n => changeSound(place, layer, { fade: [n, selSound.fade?.[1] ?? 0.05] })}
+          />
+          <NumberInput
+            name="Fade sai"
+            value={selSound.fade?.[1] ?? 0.05}
+            min={0}
+            max={10}
+            suffix="s"
+            onChange={n => changeSound(place, layer, { fade: [selSound.fade?.[0] ?? 0, n] })}
+          />
+        </div>
+      </div>
+      <div className="sound-fields">
+        <label className="sound-field">
+          <Checkbox
+            checked={selSound.dur != null}
+            onCheckedChange={v =>
+              changeSound(place, layer, {
+                dur: v ? +(trim[1] - trim[0]).toFixed(2) : undefined,
+                speed: undefined,
+              })
+            }
+          />
+          <span>Esticar para durar</span>
+        </label>
+        {selSound.dur != null ? (
+          <NumberInput
+            name=""
+            value={selSound.dur}
+            min={0.05}
+            max={60}
+            suffix={`s${role && !role.stretchable ? " · ⚠ esse papel não costuma esticar" : ""}`}
+            onChange={n => changeSound(place, layer, { dur: n })}
+          />
+        ) : null}
+        <Lane
+          name="tom"
+          value={selSound.pitch ?? 0}
+          min={-12}
+          max={12}
+          step={1}
+          suffix="st"
+          onChange={pitch => changeSound(place, layer, { pitch })}
+        />
+        <label className="sound-field">
+          <Checkbox
+            checked={selSound.duck !== false}
+            onCheckedChange={v => changeSound(place, layer, { duck: v ? undefined : false })}
+          />{" "}
+          <span>Abaixar sob a voz</span>
+        </label>
+      </div>
+      {selItem && (
+        <p className="hint mono">
+          começa {round2(E(selItem.start))} · dura {round2(selItem.duration)} · pico {round2(E(selItem.peak))} · ganho{" "}
+          {selItem.gain_db > 0 ? "+" : ""}
+          {selItem.gain_db} dB · volume medido {selItem.volume_lufs} LUFS
+          {selItem.duck_db ? ` · ducking ${selItem.duck_db} dB` : ""}
+          {SMALL_ROLES.has(selItem.role ?? "") ? " · som pequeno" : ""}
+        </p>
+      )}
+    </section>
+  );
+}