@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/timeline/AudioFxButton.tsx

@@ -0,0 +1,290 @@
+// CLIP EFFECTS, from the bar (schema v49): the chain's popover, beside the
+// duck's and built like it, a button visible at rest that reads as armed when
+// the clip has effects (its title is the chain in words).
+//
+// A SLIDER COMMITS ON RELEASE. Each setting names a new processed file, which
+// the host renders from the whole source, so a drag edits a local draft and
+// the document changes once, when the pointer lets go: one undo step and one
+// file per gesture, not one per pixel. Keys commit once they rest
+// (`KEYS_SETTLE_MS`), or when the popover closes, so a run of arrow presses
+// is one setting too. A release that changes nothing (a click on a thumb, a
+// Tab into a slider, a key at a slider's end) is no edit at all.
+//
+// "Processing…" is the processed file being made: the popover asks for it
+// (the preview's own GET, which makes it on both hosts), so it is ready before
+// the next play, and says so.
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { AUDIO_FX_DEFAULTS, AUDIO_REVERB_ROOMS, audioFxCode, audioFxSummary, audioPlayPath } from "@dailies-studio/shot/doc";
+import type { AudioClipRef, AudioEffects3D, AudioReverbRoom, ShotAsset } from "@dailies-studio/shot/doc";
+import type { useStore } from "../../state/context.js";
+
+/** What a stage starts at when it is switched on. */
+const START: Required<Pick<AudioEffects3D, "highPassHz" | "compressor" | "delay" | "reverb">> = {
+  highPassHz: 80,
+  compressor: { thresholdDb: -18, ratio: 3 },
+  delay: { ms: 250, feedback: 0.3, mix: 0.2 },
+  reverb: { room: "room", mix: 0.2 },
+};
+
+/** `fx` without a stage at its no-op setting, the shape the document keeps. */
+function pruned(fx: AudioEffects3D): AudioEffects3D {
+  const out: AudioEffects3D = { ...fx };
+  if (out.eq !== undefined) {
+    const eq = Object.fromEntries(Object.entries(out.eq).filter(([key, value]) => key === "midHz" || value !== 0));
+    if (eq["midDb"] === undefined) delete eq["midHz"];
+    if (Object.keys(eq).length === 0) delete out.eq;
+    else out.eq = eq;
+  }
+  return out;
+}
+
+type Made = "idle" | "working" | "ready" | "failed";
+
+/** How long the keys rest before a keyboard change is written. */
+export const KEYS_SETTLE_MS = 600;
+
+export function AudioFxButton({
+  clip,
+  asset,
+  store,
+}: {
+  clip: AudioClipRef;
+  asset: ShotAsset | undefined;
+  store: ReturnType<typeof useStore>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState<AudioEffects3D>(clip.effects ?? {});
+  /** The draft as of the last event, for a commit a timer runs. */
+  const latest = useRef(draft);
+  const keep = (next: AudioEffects3D): void => {
+    latest.current = next;
+    setDraft(next);
+  };
+  // Undo, an agent's edit, another tab: the document wins over a draft. Not
+  // this popover's own write, which leaves the draft as the author set it: a
+  // "Mid at" moved while Mid is 0 dB is pruned from the document, not from
+  // the slider. Nor the same chain in a new object (a reload), which would
+  // drop a key edit still settling.
+  const seen = useRef(audioFxCode(clip.effects ?? {}));
+  useEffect(() => {
+    const doc = clip.effects ?? {};
+    const code = audioFxCode(doc);
+    if (code === seen.current) return;
+    seen.current = code;
+    if (audioFxCode(pruned(latest.current)) !== code) keep(doc);
+  }, [clip.effects]);
+  const on = clip.effects !== undefined && audioFxCode(clip.effects) !== "";
+
+  const file = asset === undefined ? null : audioPlayPath(clip, asset);
+  const [made, setMade] = useState<Made>("idle");
+  useEffect(() => {
+    if (!open || asset === undefined || file === null || file === asset.path) {
+      setMade("idle");
+      return;
+    }
+    let live = true;
+    setMade("working");
+    void (async () => {
+      // A 503 is the hosted Service Worker's "still being made": ask again.
+      for (let tries = 0; live && tries < 30; tries++) {
+        const response = await fetch(`/studio/assets/${encodeURIComponent(file)}`).catch(() => null);
+        if (response?.status === 503) {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          continue;
+        }
+        if (response?.ok === true) await response.blob();
+        if (live) setMade(response?.ok === true ? "ready" : "failed");
+        return;
+      }
+      if (live) setMade("failed");
+    })();
+    return () => {
+      live = false;
+    };
+  }, [open, file, asset]);
+
+  const settle = useRef<ReturnType<typeof setTimeout> | null>(null);
+  /** The draft to the document, when it changes the chain the clip plays. */
+  const commit = (next: AudioEffects3D = latest.current): void => {
+    if (settle.current !== null) clearTimeout(settle.current);
+    settle.current = null;
+    const clean = pruned(next);
+    if (audioFxCode(clean) === audioFxCode(clip.effects ?? {})) return;
+    store.setAudioEffects(clip.id, audioFxCode(clean) === "" ? null : clean);
+  };
+  // Closing keeps a key edit still settling; leaving the lane drops it.
+  useEffect(() => {
+    if (!open && settle.current !== null) commit();
+  }, [open]);
+  useEffect(
+    () => () => {
+      if (settle.current !== null) clearTimeout(settle.current);
+    },
+    [],
+  );
+  /** Draft only: a slider moving. */
+  const edit = (next: AudioEffects3D): void => keep(next);
+  /** Draft and document: a switch, a pick, a slider let go. */
+  const set = (next: AudioEffects3D): void => {
+    keep(next);
+    commit(next);
+  };
+  const release = {
+    onPointerUp: () => commit(),
+    onKeyUp: () => {
+      if (settle.current !== null) clearTimeout(settle.current);
+      settle.current = setTimeout(() => commit(), KEYS_SETTLE_MS);
+    },
+  };
+
+  const toggle = <K extends keyof typeof START>(key: K, enabled: boolean): void => {
+    const next = { ...draft };
+    if (enabled) next[key] = START[key] as AudioEffects3D[K];
+    else delete next[key];
+    set(next);
+  };
+
+  const slider = (
+    label: string,
+    value: number,
+    range: { min: number; max: number; step: number },
+    shown: string,
+    change: (value: number) => AudioEffects3D,
+  ): ReactNode => (
+    <label className="audio-duck-row audio-fx-slider">
+      <span className="audio-fx-label">{label}</span>
+      <input
+        type="range"
+        aria-label={label}
+        min={range.min}
+        max={range.max}
+        step={range.step}
+        value={value}
+        onChange={(e) => edit(change(Number(e.currentTarget.value)))}
+        {...release}
+      />
+      <span className="audio-duck-db">{shown}</span>
+    </label>
+  );
+  const db = (v: number): string => `${v > 0 ? "+" : ""}${v} dB`;
+  const pct = (v: number): string => `${Math.round(v * 100)}%`;
+
+  const eq = draft.eq ?? {};
+  const comp = draft.compressor;
+  const echo = draft.delay;
+  const verb = draft.reverb;
+
+  return (
+    <span className="audio-duck">
+      <button
+        type="button"
+        className="audio-clip-btn audio-fx-btn"
+        aria-label={on ? "Effects" : "Add effects"}
+        aria-pressed={on}
+        aria-expanded={open}
+        data-testid={`audio-fx-${clip.id}`}
+        title={on ? `Effects: ${audioFxSummary(clip.effects!)}` : "Effects: EQ, compressor, echo, reverb"}
+        onPointerDown={(e) => e.stopPropagation()}
+        onClick={() => setOpen((v) => !v)}
+      >
+        FX
+      </button>
+      {open && (
+        <div className="audio-duck-pop audio-fx-pop" data-testid={`audio-fx-pop-${clip.id}`} onPointerDown={(e) => e.stopPropagation()}>
+          <label className="audio-duck-row">
+            <input type="checkbox" checked={draft.highPassHz !== undefined} onChange={(e) => toggle("highPassHz", e.currentTarget.checked)} />
+            <span className="audio-fx-label">High-pass</span>
+          </label>
+          {draft.highPassHz === undefined
+            ? null
+            : slider("Cut below", draft.highPassHz, { min: 20, max: 1000, step: 5 }, `${draft.highPassHz} Hz`, (v) => ({ ...draft, highPassHz: v }))}
+
+          <p className="audio-duck-title audio-fx-stage">EQ</p>
+          {slider("Low", eq.lowDb ?? 0, { min: -12, max: 12, step: 0.5 }, db(eq.lowDb ?? 0), (v) => ({ ...draft, eq: { ...eq, lowDb: v } }))}
+          {slider("Mid", eq.midDb ?? 0, { min: -12, max: 12, step: 0.5 }, db(eq.midDb ?? 0), (v) => ({ ...draft, eq: { ...eq, midDb: v } }))}
+          {slider(
+            "Mid at",
+            eq.midHz ?? AUDIO_FX_DEFAULTS.midHz,
+            { min: 200, max: 8000, step: 10 },
+            `${eq.midHz ?? AUDIO_FX_DEFAULTS.midHz} Hz`,
+            (v) => ({ ...draft, eq: { ...eq, midHz: v } }),
+          )}
+          {slider("High", eq.highDb ?? 0, { min: -12, max: 12, step: 0.5 }, db(eq.highDb ?? 0), (v) => ({ ...draft, eq: { ...eq, highDb: v } }))}
+
+          <label className="audio-duck-row audio-fx-stage">
+            <input type="checkbox" checked={comp !== undefined} onChange={(e) => toggle("compressor", e.currentTarget.checked)} />
+            <span className="audio-fx-label">Compressor</span>
+          </label>
+          {comp === undefined ? null : (
+            <>
+              {slider("Threshold", comp.thresholdDb, { min: -48, max: 0, step: 1 }, `${comp.thresholdDb} dB`, (v) => ({
+                ...draft,
+                compressor: { ...comp, thresholdDb: v },
+              }))}
+              {slider("Ratio", comp.ratio, { min: 1, max: 10, step: 0.5 }, `${comp.ratio}:1`, (v) => ({ ...draft, compressor: { ...comp, ratio: v } }))}
+              {slider("Make-up", comp.makeupDb ?? 0, { min: 0, max: 12, step: 0.5 }, db(comp.makeupDb ?? 0), (v) => ({
+                ...draft,
+                compressor: { ...comp, makeupDb: v },
+              }))}
+            </>
+          )}
+
+          <label className="audio-duck-row audio-fx-stage">
+            <input type="checkbox" checked={echo !== undefined} onChange={(e) => toggle("delay", e.currentTarget.checked)} />
+            <span className="audio-fx-label">Echo</span>
+          </label>
+          {echo === undefined ? null : (
+            <>
+              {slider("Time", echo.ms, { min: 20, max: 1000, step: 10 }, `${echo.ms} ms`, (v) => ({ ...draft, delay: { ...echo, ms: v } }))}
+              {slider("Repeats", echo.feedback ?? 0, { min: 0, max: 0.9, step: 0.01 }, pct(echo.feedback ?? 0), (v) => ({
+                ...draft,
+                delay: { ...echo, feedback: v },
+              }))}
+              {slider("Mix", echo.mix, { min: 0.01, max: 1, step: 0.01 }, pct(echo.mix), (v) => ({ ...draft, delay: { ...echo, mix: v } }))}
+            </>
+          )}
+
+          <label className="audio-duck-row audio-fx-stage">
+            <input type="checkbox" checked={verb !== undefined} onChange={(e) => toggle("reverb", e.currentTarget.checked)} />
+            <span className="audio-fx-label">Reverb</span>
+            {verb === undefined ? null : (
+              <select
+                className="select is-quiet audio-fx-room"
+                aria-label="Room"
+                value={verb.room}
+                onChange={(e) => set({ ...draft, reverb: { ...verb, room: e.currentTarget.value as AudioReverbRoom } })}
+              >
+                {AUDIO_REVERB_ROOMS.map((room) => (
+                  <option key={room} value={room}>
+                    {room[0]!.toUpperCase() + room.slice(1)}
+                  </option>
+                ))}
+              </select>
+            )}
+          </label>
+          {verb === undefined
+            ? null
+            : slider("Mix", verb.mix, { min: 0.01, max: 1, step: 0.01 }, pct(verb.mix), (v) => ({ ...draft, reverb: { ...verb, mix: v } }))}
+
+          <div className="audio-fx-foot">
+            <span className="audio-duck-empty" role="status" data-testid={`audio-fx-state-${clip.id}`}>
+              {made === "working"
+                ? "Processing…"
+                : made === "failed"
+                  ? "This sound could not be processed. Re-import it."
+                  : made === "ready"
+                    ? "Ready: preview and export play this."
+                    : ""}
+            </span>
+            {on ? (
+              <button type="button" className="btn is-outline is-sm" onClick={() => set({})}>
+                Remove
+              </button>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </span>
+  );
+}