@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,21 @@
+/* The effects row: the plan's effects in edited time, each on the first lane where it doesn't
+   touch the previous one. */
+
+import { LANE_HEIGHT } from "../../../../lib/sound-timeline";
+import { EffectItem } from "./EffectItem";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+export function EffectsRow({ st, geo }: { st: SoundTimelineState; geo: TimelineGeometry }) {
+  const { editedItems, laneCount } = st;
+  return (
+    <div
+      className={`sound-row sound-effects${st.mix.muted.effects ? " silenced" : ""}`}
+      style={{ height: laneCount * LANE_HEIGHT + 6 }}
+    >
+      {editedItems.map(it => (
+        <EffectItem key={it.id} st={st} geo={geo} it={it} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+/* A labelled slider of the sound panels (dB by default), with a mark at 0 when the range crosses it. */
+
+import { Slider } from "../../../../components/ui/slider";
+
+export function Lane({
+  name,
+  value,
+  onChange,
+  min,
+  max,
+  step = 0.5,
+  suffix = "dB",
+}: {
+  name: string;
+  value: number;
+  onChange: (n: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  suffix?: string;
+}) {
+  return (
+    <label className="sound-field wide">
+      <span>{name}</span>
+      <Slider
+        variant="fill"
+        aria-label={name}
+        min={min}
+        max={max}
+        step={step}
+        value={[value]}
+        markValue={min < 0 && max > 0 ? 0 : undefined}
+        snapToMark
+        label={`${value > 0 ? "+" : ""}${value} ${suffix}`}
+        onValueChange={([n]) => onChange(n)}
+      />
+    </label>
+  );
+}

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

@@ -0,0 +1,40 @@
+/* The beat and transition diamonds (▲ is a scene change): click to choose its sound, or to put one
+   when it has none; a place inside a cut or in a deleted animation piece doesn't show. */
+
+import { isCut } from "../../../../../../tools/cuts.mjs";
+import { placeKey, round2 } from "../../../../lib/sound-timeline";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Draft, Place } from "./types";
+
+export function MarkerRow({
+  st,
+  geo,
+  draft,
+  selPlace,
+}: {
+  st: SoundTimelineState;
+  geo: TimelineGeometry;
+  draft: Draft;
+  selPlace: Place | null;
+}) {
+  const { instantOf, cuts, dropTarget, setSel, addSound } = st;
+  const { x, E } = geo;
+  return (
+    <div className="sound-row sound-markers">
+      {draft.places.map((l, i) => {
+        const inst = instantOf(l);
+        return inst == null || isCut(inst, cuts) ? null : (
+          <button
+            key={placeKey(l)}
+            data-place={i}
+            className={`sound-marker ${l.type}${l.sounds.length ? " has-sound" : ""}${selPlace === l ? " sel" : ""}${dropTarget === `${i}:` ? " target" : ""}`}
+            style={{ left: x(E(inst)) }}
+            title={`${l.scene} · ${l.type === "transition" ? "Troca de cena" : l.element} · ${round2(E(inst))}${l.sounds.length ? ` · ${l.sounds.map(s => s.name).join(" + ")}` : " · sem som (clique para pôr)"}`}
+            onClick={() => (l.sounds.length ? setSel({ place: i, layer: 0 }) : addSound(i))}
+          />
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+/* A row's speaker in the timeline sidebar: mutes all its sounds, only for listening here (the export doesn't change). */
+
+import type React from "react";
+import { VolumeHigh, VolumeOff } from "../../../../components/icons";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { AudioRow } from "./types";
+
+export function MuteButton({
+  st,
+  row,
+  name,
+  cls,
+  style,
+}: {
+  st: SoundTimelineState;
+  row: AudioRow;
+  name: string;
+  cls: string;
+  style?: React.CSSProperties;
+}) {
+  const { muted, setMuted } = st.mix;
+  const isMuted = muted[row];
+  return (
+    <div className={`sound-row ${cls} sound-sidebar-cell`} style={style}>
+      <button
+        className={`sound-mute${isMuted ? " active" : ""}`}
+        aria-pressed={isMuted}
+        aria-label={`${isMuted ? "Reativar" : "Mutar"} ${name}`}
+        title={`${isMuted ? "Reativar" : "Mutar"} ${name}: ${isMuted ? "volta a tocar" : "silencia todos os sons desta linha"} (só na escuta daqui; o export não muda)`}
+        onClick={() => setMuted(m => ({ ...m, [row]: !m[row] }))}
+      >
+        {isMuted ? <VolumeOff className="ic" /> : <VolumeHigh className="ic" />}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+/* A labelled number field of the sound panels (seconds, multipliers…). */
+
+export function NumberInput({
+  name,
+  value,
+  onChange,
+  step = 0.01,
+  min,
+  max,
+  suffix,
+}: {
+  name: string;
+  value: number;
+  onChange: (n: number) => void;
+  step?: number;
+  min?: number;
+  max?: number;
+  suffix?: string;
+}) {
+  return (
+    <label className="sound-field">
+      <span>{name}</span>
+      <input
+        type="number"
+        step={step}
+        min={min}
+        max={max}
+        value={Number.isFinite(value) ? value : 0}
+        onChange={e => {
+          const n = Number(e.target.value);
+          if (Number.isFinite(n)) onChange(n);
+        }}
+      />
+      {suffix && <span className="subtle">{suffix}</span>}
+    </label>
+  );
+}

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

@@ -0,0 +1,19 @@
+/* The plan's error and warnings, and the notice of provisional times. */
+
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { SoundData } from "./types";
+
+export function PlanWarnings({ st, data }: { st: SoundTimelineState; data: SoundData }) {
+  const { planError, plan } = st;
+  return (
+    <>
+      {planError && <p className="response error">{planError}</p>}
+      {plan?.warnings.map(a => (
+        <p key={a} className="hint warning">
+          ⚠ {a}
+        </p>
+      ))}
+      {data.provisional && <p className="hint warning">Tempos provisórios: a voz ou o tempo ainda não rodaram</p>}
+    </>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* The handle on the vertical player's left edge: dragging changes the player width (the left
+   column shrinks, down to 480 px); double click returns to automatic; ← and → nudge it. */
+
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+export function PlayerResizeHandle({
+  st,
+  playerWidth,
+  clampWidth,
+}: {
+  st: SoundTimelineState;
+  playerWidth: number;
+  clampWidth: (w: number) => number;
+}) {
+  const { widthDrag, setManualWidth } = st;
+  return (
+    <div
+      className="sound-resize"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Largura do player"
+      tabIndex={0}
+      aria-valuenow={playerWidth}
+      title="Arraste para mudar a largura do player · duplo clique volta ao automático"
+      onPointerDown={e => {
+        widthDrag.current = { x0: e.clientX, w0: playerWidth };
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        document.body.classList.add("dragging-width");
+      }}
+      onPointerMove={e => {
+        const a = widthDrag.current;
+        if (a) setManualWidth(clampWidth(a.w0 + (a.x0 - e.clientX)));
+      }}
+      onPointerUp={() => {
+        widthDrag.current = null;
+        document.body.classList.remove("dragging-width");
+      }}
+      onPointerCancel={() => {
+        widthDrag.current = null;
+        document.body.classList.remove("dragging-width");
+      }}
+      onDoubleClick={() => setManualWidth(null)}
+      onKeyDown={e => {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+        e.preventDefault();
+        setManualWidth(clampWidth(playerWidth + (e.key === "ArrowLeft" ? 20 : -20) * (e.shiftKey ? 3 : 1)));
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,51 @@
+/* The controls floating over the preview: play and pause, and the narration volume (only for
+   listening here; the export keeps the voice at its level). */
+
+import { Pause, Play, VolumeHigh, VolumeOff } from "../../../../components/icons";
+import { Slider } from "../../../../components/ui/slider";
+import type { SoundTimelineState } from "./useSoundTimeline";
+
+export function PreviewControls({ st }: { st: SoundTimelineState }) {
+  const { plan, playing, stop, play, t, editedTotal, rendering } = st;
+  const { voiceVolume, setVoiceVolume, volumeBefore } = st.mix;
+  return (
+    <div className="sound-floating">
+      <button
+        className="sound-play"
+        disabled={!plan || rendering}
+        title={playing ? "pausar (espaço)" : "Tocar (espaço)"}
+        onClick={() => (playing ? stop() : play(t >= editedTotal - 0.05 ? 0 : t))}
+      >
+        {playing ? <Pause weight="fill" /> : <Play weight="fill" />}
+      </button>
+      <div
+        className={`sound-float-voice${voiceVolume === 0 ? " muted" : ""}`}
+        title="Volume da narração só na escuta daqui (o export continua com a voz no nível dela)"
+      >
+        <button
+          className="sound-float-mute"
+          aria-label={voiceVolume === 0 ? "Reativar a narração" : "Silenciar a narração"}
+          aria-pressed={voiceVolume === 0}
+          onClick={() => {
+            if (voiceVolume > 0) {
+              volumeBefore.current = voiceVolume;
+              setVoiceVolume(0);
+            } else setVoiceVolume(volumeBefore.current || 100);
+          }}
+        >
+          {voiceVolume === 0 ? <VolumeOff className="ic" /> : <VolumeHigh className="ic" />}
+        </button>
+        <Slider
+          variant="fill"
+          min={0}
+          max={150}
+          step={5}
+          value={[voiceVolume]}
+          aria-label="volume da narração"
+          label={`${voiceVolume}%`}
+          onValueChange={([n]) => setVoiceVolume(n)}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+/* The animation track: where the picture freezes on a frame (gap between animations) and each
+   scene's clips, the one that starts last on top. */
+
+import { videoTrack } from "../../../../../../tools/soundtrack.mjs";
+import { ClipBlock } from "./ClipBlock";
+import type { TimelineGeometry } from "./timelineGeometry";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { SoundData } from "./types";
+
+export function SceneRow({ st, geo, data }: { st: SoundTimelineState; geo: TimelineGeometry; data: SoundData }) {
+  const { animScenes, clipDragOffset } = st;
+  const { boxOf, fps } = geo;
+  return (
+    <div className="sound-row sound-scenes">
+      {/* where the picture freezes on the last frame (gap between animations) */}
+      {videoTrack(animScenes, data.total, fps)
+        .filter((sg: { frozen: boolean }) => sg.frozen)
+        .map((sg: { i: number; from: number; frames: number; since: number }) => (
+          <span
+            key={`p${sg.from}`}
+            className="sound-stopped"
+            style={boxOf(sg.from / fps, (sg.from + sg.frames) / fps)}
+            title={`${animScenes[sg.i].id} parada no ${sg.since ? "último" : "primeiro"} quadro`}
+          />
+        ))}
+      {animScenes
+        .flatMap(c => c.clips.map((cl, k) => ({ c, cl, k })))
+        .map(p => ({
+          ...p,
+          offset:
+            clipDragOffset?.kind === "video" && clipDragOffset.id === p.c.id && clipDragOffset.k === p.k
+              ? clipDragOffset.offset
+              : p.cl.offset,
+        }))
+        .sort((a, b) => a.c.start + a.cl.from + a.offset - (b.c.start + b.cl.from + b.offset))
+        .map(({ c, cl, k, offset }, z) => (
+          <ClipBlock
+            key={`video:${c.id}:${k}`}
+            st={st}
+            geo={geo}
+            kind="video"
+            id={c.id}
+            k={k}
+            cl={cl}
+            offset={offset}
+            base={c.start}
+            z={z}
+            label={`${c.id}${c.clips.length > 1 ? `·${k + 1}` : ""}`}
+            title={c.title ?? c.id}
+          />
+        ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+/* The Ajustes tab: the multi-selection notice and the settings of what is chosen (a clip, the
+   background music or an effect), or a hint when nothing is. */
+
+import { BedPanel } from "./BedPanel";
+import { ClipPanel } from "./ClipPanel";
+import { EffectPanel } from "./EffectPanel";
+import { SpeedPanel } from "./SpeedPanel";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { Draft, Place, SoundData } from "./types";
+
+export function SettingsPanel({
+  st,
+  data,
+  draft,
+  selPlace,
+  E,
+  fps,
+}: {
+  st: SoundTimelineState;
+  data: SoundData;
+  draft: Draft;
+  selPlace: Place | null;
+  E: (o: number) => number;
+  fps: number;
+}) {
+  const { sel, multi, setMulti, clipSel } = st;
+  const selSound = selPlace && sel !== "bed" && sel ? selPlace.sounds[sel.layer] : null;
+  /* the background music's panel or the effect's: shown when what they need is chosen */
+  const bed = sel === "bed" ? draft.bed : null;
+  const layerSel = selPlace && selSound && sel && sel !== "bed" ? sel : null;
+  return (
+    <>
+      {multi.length > 1 && (
+        <p className="sound-multi">
+          <b>{multi.length} efeitos selecionados</b> · arraste para mover juntos, Shift + arraste duplica, Delete tira ·{" "}
+          <button
+            className="mini-button"
+            onClick={() => setMulti(sel && sel !== "bed" ? [`${sel.place}:${sel.layer}`] : [])}
+          >
+            Só este
+          </button>
+        </p>
+      )}
+      {clipSel && <ClipPanel st={st} data={data} clipSel={clipSel} E={E} fps={fps} />}
+      {bed ? <BedPanel st={st} data={data} bed={bed} /> : null}
+      {layerSel && selPlace && selSound ? (
+        <EffectPanel
+          st={st}
+          data={data}
+          place={layerSel.place}
+          layer={layerSel.layer}
+          selPlace={selPlace}
+          selSound={selSound}
+          E={E}
+        />
+      ) : null}
+      <SpeedPanel st={st} />
+      {!clipSel && !bed && !layerSel && (
+        <p className="hint sound-no-selection">
+          Selecione um efeito na timeline para ajustar aqui, ou pegue um som abaixo e solte na timeline.
+        </p>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,99 @@
+/* The library: the video's and the kit's sounds, to drag onto the timeline or pick with a click
+   (then click the timeline); ▶ listens to the file. */
+
+import { useState } from "react";
+import { Play } from "../../../../components/icons";
+import { previewFile } from "../../../../lib/sound-audio";
+import { effectSrc, roleLabel, round2 } from "../../../../lib/sound-timeline";
+import { AddSound } from "./AddSound";
+import type { EffectInfo, SoundCatalog } from "./types";
+
+export function SoundLibrary({
+  catalog,
+  slug,
+  armed,
+  onArm,
+  onDrag,
+  onAdd,
+}: {
+  catalog: SoundCatalog;
+  slug: string;
+  armed: string | null;
+  onArm: (n: string | null) => void;
+  onDrag: (n: string | null) => void;
+  onAdd: (name: string | null) => void;
+}) {
+  const [filter, setFilter] = useState("");
+  const f = filter.trim().toLowerCase();
+  const passes = (e: EffectInfo) =>
+    !f || `${e.name} ${e.title} ${e.role ?? ""} ${e.music ? "música de fundo cama" : ""}`.toLowerCase().includes(f);
+  const groups: [string, EffectInfo[]][] = [
+    ["deste vídeo", catalog.video.filter(passes)],
+    ...Object.keys(catalog.roles).map(
+      p => [`kit · ${roleLabel(p)}`, catalog.kit.filter(e => e.role === p && passes(e))] as [string, EffectInfo[]],
+    ),
+  ];
+  return (
+    <section className="sound-library">
+      <header>
+        <h4>Sons</h4>
+        <input
+          type="search"
+          placeholder="Buscar (nome, papel)"
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+        />
+      </header>
+      <p className="hint">Arraste para a timeline, ou clique num som e depois na timeline. ▶ ouve o arquivo.</p>
+      <AddSound slug={slug} onAdd={onAdd} />
+      <div className="sound-library-list">
+        {groups
+          .filter(([, l]) => l.length)
+          .map(([name, l]) => (
+            <div key={name} className="sound-group">
+              <h5>
+                {name} <span className="subtle">{l.length}</span>
+              </h5>
+              <div className="sound-cards">
+                {l.map(e => (
+                  <div
+                    key={`${e.origin}:${e.name}`}
+                    className={`sound-item role-${e.role ?? "video"}${armed === e.name ? " armed" : ""}`}
+                    draggable
+                    title={`${e.title || e.name}${e.volume_lufs != null ? ` · volume ${e.volume_lufs} LUFS` : ""}`}
+                    onDragStart={ev => {
+                      ev.dataTransfer.setData("text/plain", e.name);
+                      ev.dataTransfer.effectAllowed = "copy";
+                      onDrag(e.name);
+                    }}
+                    onDragEnd={() => onDrag(null)}
+                    onClick={() => onArm(armed === e.name ? null : e.name)}
+                  >
+                    <span className="sound-item-top">
+                      <button
+                        className="sound-listen"
+                        title="ouvir"
+                        onClick={ev => {
+                          ev.stopPropagation();
+                          previewFile(effectSrc(slug, e));
+                        }}
+                      >
+                        <Play weight="fill" />
+                      </button>
+                      <span className="subtle mono">
+                        {e.music
+                          ? `${Math.round(e.duration)}s · música de fundo`
+                          : round2(e.useful_end_s ?? e.duration)}
+                      </span>
+                    </span>
+                    <span className="sound-item-name">{e.name.replace(/\.mp3$/, "")}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        {groups.every(([, l]) => !l.length) && <p className="empty">Nenhum som{f ? " com esse filtro" : ""}</p>}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,82 @@
+/* The picture: the export (muted, only for the picture) while it has the draft's animation
+   arrangement; otherwise the scene MP4s one over the other (no captions); with neither, just the sound. */
+
+import { chosenCover, mediaUrl } from "../../../../lib/media";
+import { mediaSrc } from "../../../../lib/sound-timeline";
+import type { CaptionEditor } from "../CaptionPositionEditor/captionEditor";
+import { CaptionOverlay } from "./CaptionOverlay";
+import { PreviewControls } from "./PreviewControls";
+import type { SoundTimelineState } from "./useSoundTimeline";
+import type { SoundData } from "./types";
+
+export function SoundPreview({
+  st,
+  data,
+  captions,
+}: {
+  st: SoundTimelineState;
+  data: SoundData;
+  captions?: CaptionEditor | null;
+}) {
+  const { video, showExport, sped, videoRef, sceneVideos, playing, seekPictureRef, t, rendering, tab } = st;
+  /* the render at the chosen speed, with its sound, once it matches the edit; else the base, muted */
+  const shown = sped ?? data.export;
+  const onCaptions = tab === "captions" && !!captions;
+  return (
+    <div className="sound-preview">
+      {showExport ? (
+        <video
+          ref={videoRef}
+          className="sound-video"
+          src={`${mediaSrc(video.slug, shown!.path, shown!.mtime)}#t=0.1`}
+          poster={mediaUrl(video, chosenCover(video)) ?? undefined}
+          muted={!sped}
+          playsInline
+          preload="auto"
+          /* the source switched (base ↔ the sped render): the frame comes back to the playhead */
+          onLoadedData={() => {
+            if (!playing) seekPictureRef.current(t, false, true);
+          }}
+        />
+      ) : data.scenes.some(c => c.mp4) ? (
+        /* the new animation arrangement, before rendering: the scene MP4s, one over the other */
+        <div className="sound-video sound-video-scenes" style={{ aspectRatio: `${data.format.w} / ${data.format.h}` }}>
+          {data.scenes.map(
+            c =>
+              c.mp4 && (
+                <video
+                  key={c.id}
+                  ref={el => {
+                    sceneVideos.current[c.id] = el;
+                  }}
+                  src={mediaSrc(video.slug, c.mp4.path, c.mp4.mtime)}
+                  muted
+                  playsInline
+                  preload="auto"
+                  style={{ opacity: 0 }}
+                  onLoadedData={() => {
+                    if (!playing) seekPictureRef.current(t, false, true);
+                  }}
+                />
+              ),
+          )}
+          {onCaptions && <CaptionOverlay editor={captions} />}
+          {!onCaptions && (
+            <span className="sound-video-notice">
+              Animações no arranjo novo, sem legenda · Renderizar para ver o export
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="sound-video empty">Sem export: só o som</div>
+      )}
+      {rendering && (
+        <div className="sound-updating" role="status">
+          <span className="sound-spinner" aria-hidden="true" />
+          Atualizando o preview…
+        </div>
+      )}
+      <PreviewControls st={st} />
+    </div>
+  );
+}