mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
feat(studio): two faces, and the shared frequency ruler (#3186)
* fix(studio): close the typecheck and fallow gaps wa-18b-reschedule opened useAutomationLanes.ts's write() assumed gesture-scoped coalescing and a preview-only commit that useDomEditAttributeCommits.ts never grew — backported that option support from its own later commit so the two sides of the API agree. The paste path and its tests were missing the box selection's v0/v1 bounds a sibling commit added to AutomationSelection. The FX panel's carve controls still edited the six mechanism numbers (maxCutDb, bands, intelligibilityBias) after carveProfile() collapsed authoring to one Strength knob, so those fields no longer existed on HfCarveSettings; UI now edits strength, and analyseCarveBands is called with carveProfile(strength). Also closes fallow's complexity, dead-code and duplication findings on this PR's diff: extracted automationLaneDragMath.ts (pure group/point-move math) and useAutomationRangeDrag.ts (the marquee-select gesture) out of useAutomationLaneGestures.ts, pulled a couple of render-loop ternaries and a resolver into named functions, dropped an export nothing outside its file used, and shared a step-simplifier between audioCarve's two envelope builders. The edge-stretch vs. box-select priority test in TimelineAutomationLane.test was still pinning the pre-box-select rule (edge wins over a point sitting on it) that a sibling commit deliberately reversed — a point inside the box is now selected content, so grabbing it drags the group instead. Updated the test to the shipped rule instead of the old one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(core): cap the via conic's weight so an edge-clamped via point can't NaN A via point pulled out past the segment (viaX: 5, viaY: -3) clamps to (0.999, 0.001) — exactly on the steady region's edge, where edge - viaX is 0. viaConic divided by that zero to get an infinite weight, and shapeVia turned Infinity into NaN a few steps later (Infinity - Infinity in the quadratic coefficient). NaN reaching setValueCurveAtTime silences the automated parameter for the rest of the render. Capped the weight at 1e6 instead of leaving it unbounded — past that point the arc already reads as touching the via point, so nothing visible is lost. Also hardened shapeVia's existing denominator guard (`<= 0`) to `!(> 0)`, since NaN fails the original comparison and fell through it. Review by Miga (PR #3208). * fix(studio-server): fingerprint the proactive waveform cache key too The route already keys the waveform cache on the asset's size and mtime as well as its path, so a rebuilt-in-place file gets fresh peaks instead of stale ones. generateWaveformCache — the proactive path that runs on upload — still called buildWaveformCacheKey with the path alone, so it wrote to a different key than the route reads from (making the pre-generated cache never found) and kept the exact collision bug this fingerprint exists to fix on its own path. Review by Miga (PR #3211). * style(docs): run oxfmt on the /hyperframes-audio skill docs Table column widths had drifted out of alignment with oxfmt's own rules, failing format:check and blocking the Preflight gate every downstream branch inherits. Whitespace only, no content change. * fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration \b treats `_` as a word character, so \bbed\b never matched bed_01, music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap — an underscore-separated bed classified as "unknown" and could end up offered as its own carve source. Replaced the short hints with a boundary that actually excludes letters and digits on both sides. clipsOverlap computed end = start + duration without guarding sign, so a negative duration put end before start — an interval that does not describe anything, and one specific case showed it silently dropping a real overlap (a shorter, earlier broken end rejected a clip that genuinely contained the point). Duration clamps to zero instead: a clip cannot un-play time, and a zero-length clip at its start is the sane reading of "duration nobody wrote down as positive." Review by Miga (PR #3212). * fix(studio): widen PropertyPanel's resetModules render timeout again The 20s margin (already once widened for the same reason) is timing out in CI's full-monorepo Test run — the resetModules()+fresh-import render this test needs is uncached and competes with every other package's test suite for the same worker pool, and the same test passes in well under 2s standalone. Went to 45s rather than re-tuning to whatever number happens to clear the current CI load, since that number moves every time CI gains a package. * fix(studio): stop the single-candidate auto-apply carve firing twice Two auto-apply effects both fire when sourceOptions.length === 1: the multi-candidate effect only guards length === 0, so a single candidate passes it too, and the single-candidate effect passes its own guard right after — both compute the same sources list and both call setCarve, so the common case (one narrator, one bed) triggered two decodes, two FFT runs, and two concurrent attribute writes for one decision. The multi-candidate effect now defers to its sibling for exactly one candidate, which already has its own detailed handling for that case. Review by Miga (PR #3213). * feat(core): carve against every voice over a bed, always (#3212) * feat(core): carve against every voice over a bed, always dynamically A bed usually runs under a whole sequence — a narrator, an interview answer, a second presenter — and carving against one of them left the others fighting it. `source` becomes `sources`, and `mixCarveSources` sums every voice onto the BED's clock before anything is measured. That is what keeps one analysis sufficient: the chain is fixed, so there is no per-voice filter to switch between, and bands drawn from all the speech there is with envelopes that rise wherever any of it happens answer the actual question — where and when is speech masking this bed. Summed rather than averaged: two people talking at once mask more than either alone. Audio before the bed starts is dropped rather than folded in at zero, since it plays over nothing and shifting it would put a cut where there is no voice. `dynamic` is gone. A fixed depth thins the bed through every pause, and once both have been heard there is no reason to want it, so every carve follows the speech. Two helpers the panel and the headless script now share instead of each carrying a copy — two definitions of "what does this name suggest" drift, and then the two disagree about which track is the voice: - `classifyAudioName` reads a track's kind from its id and filename together. `unknown` is deliberately common: treating an unrecognised name as "not a voice" would hide the one track somebody needs to pick. - `clipsOverlap` keeps out a voice that never plays while the bed does. An unwritten duration counts as unbounded, not zero — refusing a clip whose length the composition leaves to the media would drop the commonest case there is. Files written before this still load: a single `source` reads as a one-voice list, a stored `dynamic` is ignored, and an absent attribute means the defaults whole. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration \b treats `_` as a word character, so \bbed\b never matched bed_01, music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap — an underscore-separated bed classified as "unknown" and could end up offered as its own carve source. Replaced the short hints with a boundary that actually excludes letters and digits on both sides. clipsOverlap computed end = start + duration without guarding sign, so a negative duration put end before start — an interval that does not describe anything, and one specific case showed it silently dropping a real overlap (a shorter, earlier broken end rejected a clip that genuinely contained the point). Duration clamps to zero instead: a clip cannot un-play time, and a zero-length clip at its start is the sane reading of "duration nobody wrote down as positive." Review by Miga (PR #3212). --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(studio): port the carve UI off the removed source/dynamic fields #3212 (accidentally squash-merged into this branch instead of main) changed HfCarveSettings from a single `source` + `dynamic` toggle to a `sources` list with dynamic mode removed outright — the multi-voice UI consumer that goes with that shape lands in the very next PR, so this branch was left with a type that no longer matched its own code. Minimal port, not the multi-voice redesign that PR does properly: the "Listen to" picker and analyse() treat sources[0] as the one voice this UI still understands, and every dynamic-mode branch (the automated envelope lanes, the toggle, the checkbox) is gone along with the field — a carve is now always the static value the analysis computes, matching what the type change made permanent. Test suite trimmed the same way: the automation-lane and toggle tests covered behavior that no longer exists. --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
31fa523b7e
commit
96fd4d061e
@@ -1,7 +1,7 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { defaultAudioFxParams, HF_AUDIO_FX } from "./audioFx.js";
|
||||
import { HF_AUDIO_FX_PRESETS } from "./audioFxPresets.js";
|
||||
import { BANDS, EFFECT_COPY, PRESET_PROBLEM, SUMMARY } from "./audioFxCopy.js";
|
||||
import { audioBandAt, BANDS, EFFECT_COPY, PRESET_PROBLEM, SUMMARY } from "./audioFxCopy.js";
|
||||
|
||||
/**
|
||||
* The copy layer is only worth having if it covers everything that ships. A gap
|
||||
@@ -73,3 +73,33 @@ it("covers the spectrum without a gap or an overlap", () => {
|
||||
expect(BANDS[i]?.from, `gap or overlap before ${BANDS[i]?.name}`).toBe(BANDS[i - 1]?.to);
|
||||
}
|
||||
});
|
||||
|
||||
describe("audioBandAt", () => {
|
||||
it("names the range a frequency sits in", () => {
|
||||
expect(audioBandAt(50)?.name).toBe("Rumble");
|
||||
expect(audioBandAt(250)?.name).toBe("Mud");
|
||||
expect(audioBandAt(3000)?.name).toBe("Presence");
|
||||
expect(audioBandAt(12000)?.name).toBe("Air");
|
||||
});
|
||||
|
||||
it("puts a boundary in the band it opens, not the one it closes", () => {
|
||||
// Off by one here means a filter at exactly 250 Hz reads as "Weight" while
|
||||
// the ruler beside it highlights Mud.
|
||||
for (let i = 1; i < BANDS.length; i++) {
|
||||
const edge = BANDS[i]?.from;
|
||||
if (edge === undefined) continue;
|
||||
expect(audioBandAt(edge)?.name).toBe(BANDS[i]?.name);
|
||||
}
|
||||
});
|
||||
|
||||
it("clamps past both ends rather than going nameless", () => {
|
||||
// A filter parked at the edge of its range still has to say where it works.
|
||||
expect(audioBandAt(5)?.name).toBe(BANDS[0]?.name);
|
||||
expect(audioBandAt(30000)?.name).toBe(BANDS.at(-1)?.name);
|
||||
expect(audioBandAt(20000)?.name).toBe(BANDS.at(-1)?.name);
|
||||
});
|
||||
|
||||
it("has no answer for a value that is not a frequency", () => {
|
||||
expect(audioBandAt(Number.NaN)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -294,6 +294,24 @@ export const BANDS: { from: number; to: number; name: string; says: string }[] =
|
||||
{ from: 10000, to: 20000, name: "Air", says: "sparkle, openness" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Which named range a frequency falls in.
|
||||
*
|
||||
* The whole point of `BANDS` is that the words get taught, and they only get
|
||||
* taught if a module can say which one it is working in. Below the first band
|
||||
* and above the last both clamp rather than returning nothing: 15 Hz is still
|
||||
* rumble to anybody who can hear it, and the alternative is a filter at the edge
|
||||
* of its range having no name at all.
|
||||
*/
|
||||
export function audioBandAt(hz: number): (typeof BANDS)[number] | undefined {
|
||||
if (!Number.isFinite(hz)) return undefined;
|
||||
const first = BANDS[0];
|
||||
const last = BANDS.at(-1);
|
||||
if (first && hz < first.from) return first;
|
||||
if (last && hz >= last.to) return last;
|
||||
return BANDS.find((band) => hz >= band.from && hz < band.to);
|
||||
}
|
||||
|
||||
/** Which everyday complaint each preset answers. Presets ARE the product here. */
|
||||
export const PRESET_PROBLEM: Record<string, string> = {
|
||||
"voice-clean": "My voice sounds amateur",
|
||||
|
||||
@@ -64,6 +64,17 @@ function audioSelection(
|
||||
return { dataAttributes, id: "bed", element: bed } as unknown as DomEditSelection;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open a module's Details, where every control that is not the primary one now
|
||||
* lives — a module opens on one knob and the rest is one click away.
|
||||
*/
|
||||
function openDetails(host: HTMLElement, index = 0): void {
|
||||
const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>(".hf-fx-node-details"));
|
||||
const button = buttons[index];
|
||||
if (!button) throw new Error("no Details disclosure to open");
|
||||
act(() => button.click());
|
||||
}
|
||||
|
||||
/** A button found by the text it contains, since several now read as sentences. */
|
||||
function byTextButton(host: HTMLElement, text: string): HTMLButtonElement | undefined {
|
||||
return Array.from(host.querySelectorAll("button")).find((b) => b.textContent?.includes(text));
|
||||
@@ -111,7 +122,11 @@ const writeTo = (calls: unknown[][], attr: string): unknown[] | undefined =>
|
||||
describe("AudioFxGroup automation", () => {
|
||||
it("renders the chain's parameters", () => {
|
||||
const { host } = mount({ "fx-chain": CHAIN });
|
||||
// The one knob that carries the module is on the open face; the rest are one
|
||||
// click away, which is what Details is.
|
||||
expect(rowFor(host, plainLabel("lowpass", "frequency"))).toBeTruthy();
|
||||
expect(rowFor(host, plainLabel("lowpass", "q"))).toBeNull();
|
||||
openDetails(host);
|
||||
expect(rowFor(host, plainLabel("lowpass", "q"))).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -139,6 +154,7 @@ describe("AudioFxGroup automation", () => {
|
||||
lanes: [{ target: "volume", points: [{ t: 0, v: 0.5 }] }],
|
||||
}),
|
||||
});
|
||||
openDetails(host);
|
||||
act(() =>
|
||||
(
|
||||
rowFor(host, plainLabel("lowpass", "q"))!.querySelector(
|
||||
@@ -164,6 +180,7 @@ describe("AudioFxGroup automation", () => {
|
||||
const cutoff = rowFor(host, plainLabel("lowpass", "frequency"))!;
|
||||
expect(cutoff.querySelector<HTMLInputElement>('input[type="range"]')?.disabled).toBe(true);
|
||||
expect(cutoff.hasAttribute("data-automated")).toBe(true);
|
||||
openDetails(host);
|
||||
expect(
|
||||
rowFor(host, plainLabel("lowpass", "q"))!.querySelector<HTMLInputElement>(
|
||||
'input[type="range"]',
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* The shared frequency ruler.
|
||||
*
|
||||
* Frequencies mean nothing to somebody who has not been taught them, and the
|
||||
* rack speaks entirely in them. `BANDS` names the ranges in the words the same
|
||||
* person would use unprompted — rumble, weight, mud, middle, presence, edge,
|
||||
* air — and every spectral module shows where it acts on this one ruler, so
|
||||
* naming them once teaches them everywhere they appear.
|
||||
*
|
||||
* Two things at once, deliberately. The bar says where this module works
|
||||
* relative to everything else, which is the spatial fact; the caption under it
|
||||
* names the range and what lives there, which is the vocabulary. A bar alone
|
||||
* would be decoration and a caption alone would not teach the shape.
|
||||
*
|
||||
* Log-spaced, because hearing is: 20–200 Hz is as much of the range to an ear as
|
||||
* 2–20 kHz, and a linear ruler would crush six of the seven bands into a corner.
|
||||
*/
|
||||
|
||||
import { audioBandAt, BANDS } from "@hyperframes/core/audio-fx-copy";
|
||||
|
||||
const LOW = BANDS[0]?.from ?? 20;
|
||||
const HIGH = BANDS.at(-1)?.to ?? 20000;
|
||||
|
||||
/** Where a frequency sits across the ruler, 0..1. */
|
||||
function positionOf(hz: number): number {
|
||||
const span = Math.log10(HIGH) - Math.log10(LOW);
|
||||
const at = (Math.log10(Math.min(HIGH, Math.max(LOW, hz))) - Math.log10(LOW)) / span;
|
||||
return Math.min(1, Math.max(0, at));
|
||||
}
|
||||
|
||||
export interface FxBandRulerProps {
|
||||
/** The range this effect can act over, from its copy. */
|
||||
band: readonly [number, number];
|
||||
/** Where it is acting right now. */
|
||||
at: number;
|
||||
}
|
||||
|
||||
export function FxBandRuler({ band, at }: FxBandRulerProps) {
|
||||
const here = audioBandAt(at);
|
||||
if (!here) return null;
|
||||
const [from, to] = band;
|
||||
return (
|
||||
<div className="hf-fx-ruler px-1.5 pb-1" data-band={here.name}>
|
||||
<div className="hf-fx-ruler-bar relative flex h-1 w-full overflow-hidden rounded-[1px]">
|
||||
{BANDS.map((range) => {
|
||||
// Reachable at all, and where it is now: a module that can only work in
|
||||
// the bottom three bands should not look like it could move anywhere.
|
||||
const reachable = range.to > from && range.from < to;
|
||||
return (
|
||||
<span
|
||||
key={range.name}
|
||||
title={`${range.name} — ${range.says}`}
|
||||
className={
|
||||
range.name === here.name
|
||||
? "hf-fx-ruler-band bg-panel-accent"
|
||||
: reachable
|
||||
? "hf-fx-ruler-band bg-panel-text-4/50"
|
||||
: "hf-fx-ruler-band bg-panel-text-4/15"
|
||||
}
|
||||
style={{
|
||||
width: `${(positionOf(range.to) - positionOf(range.from)) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="hf-fx-ruler-label truncate pt-0.5 text-[9px] text-panel-text-4">
|
||||
<span className="hf-fx-ruler-name text-panel-text-1">{here.name}</span> — {here.says}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
* with the mechanism. See `plans/audio-fx-ux/README.md` §Decided.
|
||||
*/
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
defaultAudioFxParams,
|
||||
getAudioFxDef,
|
||||
@@ -21,6 +21,30 @@ import {
|
||||
import { EFFECT_COPY, SUMMARY } from "@hyperframes/core/audio-fx-copy";
|
||||
import { fxAutomationTarget } from "@hyperframes/core/audio-automation";
|
||||
import { FxParams } from "./propertyPanelFxControls.js";
|
||||
import { FxBandRuler } from "./propertyPanelFxBandRuler.js";
|
||||
|
||||
/**
|
||||
* The one control that carries the module, if it has one.
|
||||
*
|
||||
* "Two faces": a module opens on its name, a line about what it is for, and one
|
||||
* knob — the rest is one click away and never in the way. Nothing is hidden; it
|
||||
* is ordered.
|
||||
*
|
||||
* `primary` is either a real parameter key or the string "strength", which means
|
||||
* the module wants a single DERIVED control over several parameters — the
|
||||
* `PROFILES` idea, whose figures are proposed rather than measured and which has
|
||||
* not shipped. Until it does, those five effects (compressor, gate, saturate,
|
||||
* reverb, bitcrush) open on all of their controls, which is honest: the one knob
|
||||
* they want does not exist yet, and inventing one would be a knob that lies.
|
||||
*/
|
||||
function primaryParamOf(def: HfAudioFxDef): string | null {
|
||||
const primary = EFFECT_COPY[def.id]?.primary;
|
||||
// "strength" names no parameter, which is exactly what makes this work: the
|
||||
// day `PROFILES` ships and a derived `strength` knob really is in the
|
||||
// registry, this starts using it without being told.
|
||||
if (!primary) return null;
|
||||
return def.params.some((p) => p.key === primary) ? primary : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The registry's definition with the plain names written over it.
|
||||
@@ -250,7 +274,17 @@ export function FxNodeRow({
|
||||
}: FxNodeRowProps) {
|
||||
const registryDef = getAudioFxDef(node.type);
|
||||
const def = useMemo(() => (registryDef ? plainDef(registryDef) : null), [registryDef]);
|
||||
if (!registryDef || !def) return null;
|
||||
const primary = registryDef ? primaryParamOf(registryDef) : null;
|
||||
/** The same def cut down to the one knob, so the open face reuses every wire. */
|
||||
const onlyPrimary = useMemo(
|
||||
() => (def && primary ? { ...def, params: def.params.filter((p) => p.key === primary) } : def),
|
||||
[def, primary],
|
||||
);
|
||||
// Local, because nothing outside the row needs to know. Keyed by node id like
|
||||
// the row itself, so it stays with its effect across a reorder.
|
||||
const [details, setDetails] = useState(false);
|
||||
if (!registryDef || !def || !onlyPrimary) return null;
|
||||
const copy = EFFECT_COPY[node.type];
|
||||
const bypassed = node.enabled === false;
|
||||
const params = node.params ?? defaultAudioFxParams(node.type);
|
||||
// What this effect is doing to the sound, as a sentence. The rack is read top
|
||||
@@ -285,24 +319,74 @@ export function FxNodeRow({
|
||||
) : null}
|
||||
{open ? (
|
||||
<>
|
||||
{/* The DSP name, once, where the mechanism is. An author who wants to
|
||||
know what "Remove Rumble" really is finds out by opening it; one who
|
||||
does not never has to meet the word. */}
|
||||
<p className="hf-fx-node-mechanism border-t border-panel-border-input px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
|
||||
Details — {registryDef.label}
|
||||
</p>
|
||||
<FxNodeParams
|
||||
node={node}
|
||||
def={def}
|
||||
index={index}
|
||||
disabled={Boolean(disabled) || bypassed}
|
||||
automatedTargets={automatedTargets}
|
||||
liveAutomationValues={liveAutomationValues}
|
||||
onUpdate={onUpdate}
|
||||
onPreview={onPreview}
|
||||
onAutomateParam={onAutomateParam}
|
||||
onRemoveParamAutomation={onRemoveParamAutomation}
|
||||
/>
|
||||
{/* What it is for, before what it is made of. */}
|
||||
{copy?.does ? (
|
||||
<p className="hf-fx-node-does border-t border-panel-border-input px-1.5 py-1 text-[10px] text-panel-text-4">
|
||||
{copy.does}
|
||||
</p>
|
||||
) : null}
|
||||
{primary && !details ? (
|
||||
<>
|
||||
<FxNodeParams
|
||||
node={node}
|
||||
def={onlyPrimary}
|
||||
index={index}
|
||||
disabled={Boolean(disabled) || bypassed}
|
||||
automatedTargets={automatedTargets}
|
||||
liveAutomationValues={liveAutomationValues}
|
||||
onUpdate={onUpdate}
|
||||
onPreview={onPreview}
|
||||
onAutomateParam={onAutomateParam}
|
||||
onRemoveParamAutomation={onRemoveParamAutomation}
|
||||
/>
|
||||
{/* What the two ends of that knob sound like. A number tells an
|
||||
author where the control is; this tells them which way to move
|
||||
it, which is the question they actually have. */}
|
||||
{copy?.primaryEnds ? (
|
||||
<p className="hf-fx-node-ends flex justify-between gap-2 px-1.5 pb-1 text-[9px] text-panel-text-4">
|
||||
<span className="truncate">{copy.primaryEnds.low}</span>
|
||||
<span className="truncate text-right">{copy.primaryEnds.high}</span>
|
||||
</p>
|
||||
) : null}
|
||||
{/* Where it is working, in the words the rack shares. Only for a
|
||||
module that acts on a range at all — there is nothing spectral
|
||||
about a limiter, and a ruler under one would be noise. */}
|
||||
{copy?.band && typeof params.frequency === "number" ? (
|
||||
<FxBandRuler band={copy.band} at={params.frequency} />
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
{/* The DSP name lives on the disclosure, so it is read at the moment
|
||||
the author asks what this really is — and never before. */}
|
||||
{primary ? (
|
||||
<button
|
||||
type="button"
|
||||
className="hf-fx-node-details flex w-full items-center gap-1 border-t border-panel-border-input px-1.5 py-1 text-left font-mono text-[9px] uppercase tracking-wide text-panel-text-4 hover:text-panel-text-0"
|
||||
aria-expanded={details}
|
||||
onClick={() => setDetails((was) => !was)}
|
||||
>
|
||||
<span aria-hidden="true">{details ? "\u25BE" : "\u25B8"}</span>
|
||||
Details — {registryDef.label}
|
||||
</button>
|
||||
) : (
|
||||
<p className="hf-fx-node-mechanism border-t border-panel-border-input px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-4">
|
||||
Details — {registryDef.label}
|
||||
</p>
|
||||
)}
|
||||
{details || !primary ? (
|
||||
<FxNodeParams
|
||||
node={node}
|
||||
def={def}
|
||||
index={index}
|
||||
disabled={Boolean(disabled) || bypassed}
|
||||
automatedTargets={automatedTargets}
|
||||
liveAutomationValues={liveAutomationValues}
|
||||
onUpdate={onUpdate}
|
||||
onPreview={onPreview}
|
||||
onAutomateParam={onAutomateParam}
|
||||
onRemoveParamAutomation={onRemoveParamAutomation}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
type HfAudioFxChain,
|
||||
} from "@hyperframes/core/audio-fx";
|
||||
import { DEFAULT_CARVE } from "@hyperframes/core/audio-carve";
|
||||
import { EFFECT_COPY, PRESET_PROBLEM } from "@hyperframes/core/audio-fx-copy";
|
||||
import { BANDS, EFFECT_COPY, PRESET_PROBLEM } from "@hyperframes/core/audio-fx-copy";
|
||||
import { HF_AUDIO_FX_JOBS, HF_AUDIO_FX_JOB_TYPES } from "@hyperframes/core/audio-fx-jobs";
|
||||
import { getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
|
||||
|
||||
@@ -102,6 +102,17 @@ const click = (el: Element | null | undefined) => {
|
||||
(el as HTMLElement).click();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* Open a module's Details, where every control that is not the primary one now
|
||||
* lives — a module opens on one knob and the rest is one click away.
|
||||
*/
|
||||
function openDetails(host: HTMLElement, index = 0): void {
|
||||
const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>(".hf-fx-node-details"));
|
||||
const button = buttons[index];
|
||||
if (!button) throw new Error("no Details disclosure to open");
|
||||
act(() => button.click());
|
||||
}
|
||||
|
||||
const byText = (host: HTMLElement, sel: string, text: string) =>
|
||||
Array.from(host.querySelectorAll(sel)).find((e) => e.textContent?.trim() === text);
|
||||
|
||||
@@ -286,6 +297,9 @@ describe("FxSection chain", () => {
|
||||
});
|
||||
|
||||
render(chainOfNodes(a, b));
|
||||
// Frequency is behind Details for a peaking node — the module opens on how
|
||||
// much, now that picking the module is what picks the range.
|
||||
openDetails(host);
|
||||
// Only the first card is open, which is the one being edited.
|
||||
const openFrequency = (): HTMLInputElement =>
|
||||
host.querySelector<HTMLInputElement>(".hf-fx-node .hf-fx-number")!;
|
||||
@@ -297,6 +311,9 @@ describe("FxSection chain", () => {
|
||||
// The author moves that effect down; the other one takes the open slot.
|
||||
render(chainOfNodes(b, a));
|
||||
|
||||
// Its own Details, not the one that was open: the disclosure is per module,
|
||||
// so the effect arriving in the slot arrives closed like any other.
|
||||
openDetails(host);
|
||||
expect(openFrequency().value).toBe("1600");
|
||||
});
|
||||
|
||||
@@ -333,9 +350,60 @@ describe("FxSection chain", () => {
|
||||
expect(name).not.toBe(getAudioFxDef("highpass")?.label);
|
||||
// And a sentence under it, so the rack reads top to bottom.
|
||||
expect(node.querySelector(".hf-fx-node-summary")?.textContent).toContain("Cutting everything");
|
||||
// The first node is open by default, which is where the DSP name lives.
|
||||
expect(node.querySelector(".hf-fx-node-mechanism")?.textContent).toContain(
|
||||
getAudioFxDef("highpass")?.label,
|
||||
// Open, it says what it is for and offers ONE knob — the rest is behind a
|
||||
// disclosure, which is also the only place the DSP name appears.
|
||||
expect(node.querySelector(".hf-fx-node-does")?.textContent).toBe(EFFECT_COPY.highpass?.does);
|
||||
expect(node.querySelectorAll(".hf-fx-row")).toHaveLength(1);
|
||||
const details = node.querySelector(".hf-fx-node-details");
|
||||
expect(details?.textContent).toContain(getAudioFxDef("highpass")?.label);
|
||||
expect(details?.getAttribute("aria-expanded")).toBe("false");
|
||||
|
||||
openDetails(host);
|
||||
expect(node.querySelectorAll(".hf-fx-row").length).toBe(
|
||||
getAudioFxDef("highpass")?.params.length,
|
||||
);
|
||||
});
|
||||
|
||||
it("says where a filter is working, in the words the rack shares", () => {
|
||||
// Frequencies mean nothing to somebody who has not been taught them, and the
|
||||
// rack speaks entirely in them. The ruler is where they get taught.
|
||||
const { host } = mount({
|
||||
chain: {
|
||||
version: 1,
|
||||
nodes: [{ type: "highpass", params: { frequency: 250, q: 0.707, poles: "2" } }],
|
||||
} as unknown as HfAudioFxChain,
|
||||
});
|
||||
const ruler = fxCard(host).querySelector(".hf-fx-ruler");
|
||||
expect(ruler?.getAttribute("data-band")).toBe("Mud");
|
||||
expect(ruler?.querySelector(".hf-fx-ruler-name")?.textContent).toBe("Mud");
|
||||
// Every named range is on the bar, or it is not a shared ruler.
|
||||
const segments = Array.from(ruler?.querySelectorAll<HTMLElement>(".hf-fx-ruler-band") ?? []);
|
||||
expect(segments).toHaveLength(BANDS.length);
|
||||
// Log-spaced, because hearing is. Rumble is 20-80 Hz — three tenths of one
|
||||
// percent of the range linearly, and a fifth of it by ear. Laid out linearly
|
||||
// the bottom six bands collapse into a sliver and the ruler teaches nothing.
|
||||
const rumble = Number.parseFloat(segments[0]?.style.width ?? "0");
|
||||
expect(rumble).toBeGreaterThan(10);
|
||||
});
|
||||
|
||||
it("puts no ruler under an effect that does not act on a range", () => {
|
||||
// A limiter has no frequency to place, and a bar under one would be a
|
||||
// decoration claiming to be information.
|
||||
const { host } = mount({ chain: chainOf("limiter") });
|
||||
expect(fxCard(host).querySelector(".hf-fx-ruler")).toBeNull();
|
||||
});
|
||||
|
||||
it("opens a module on all of its controls when its one knob does not exist yet", () => {
|
||||
// Five effects want a single DERIVED control over several parameters — the
|
||||
// `PROFILES` idea, whose figures are proposed rather than measured. Until it
|
||||
// ships they open on everything, which is honest: inventing one knob for
|
||||
// them now would be a knob that lies about what it sets.
|
||||
const { host } = mount({ chain: chainOf("compressor") });
|
||||
const node = fxCard(host);
|
||||
expect(EFFECT_COPY.compressor?.primary).toBe("strength");
|
||||
expect(node.querySelector(".hf-fx-node-details")).toBeNull();
|
||||
expect(node.querySelectorAll(".hf-fx-row").length).toBe(
|
||||
getAudioFxDef("compressor")?.params.length,
|
||||
);
|
||||
});
|
||||
|
||||
@@ -656,6 +724,9 @@ describe("FxSection chain", () => {
|
||||
// Persisting on every input event refreshes the preview, which reloads the
|
||||
// composition and restarts audio — that is what made playback stutter.
|
||||
const { host, onChainChange, onChainPreview } = mount({ chain: chainOf("peaking") });
|
||||
// Details, because this is about the drag mechanics on a real control and
|
||||
// the frequency it asserts on is not the one knob the module opens with.
|
||||
openDetails(host);
|
||||
const slider = fxCard(host).querySelector<HTMLInputElement>(".hf-fx-slider")!;
|
||||
act(() => slider.dispatchEvent(new Event("pointerdown", { bubbles: true })));
|
||||
for (const v of ["5000", "10000", "15000"]) {
|
||||
@@ -707,6 +778,7 @@ describe("FxSection chain", () => {
|
||||
sourceOptions: [{ id: "vo", label: "Voiceover" }],
|
||||
};
|
||||
const { host, root } = renderInto(<FxSection {...shared} chain={chainOf("peaking")} />);
|
||||
openDetails(host);
|
||||
const slider = fxCard(host).querySelector<HTMLInputElement>(".hf-fx-slider")!;
|
||||
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
|
||||
act(() => slider.dispatchEvent(new Event("pointerdown", { bubbles: true })));
|
||||
@@ -749,6 +821,7 @@ describe("FxSection chain", () => {
|
||||
|
||||
it("clamps a typed value into the renderable range", () => {
|
||||
const { host, onChainChange } = mount({ chain: chainOf("peaking") });
|
||||
openDetails(host);
|
||||
const input = fxCard(host).querySelector<HTMLInputElement>(".hf-fx-number")!;
|
||||
typeInto(input, "999999");
|
||||
// React delegates onBlur through focusout, which is the event that bubbles.
|
||||
@@ -1023,7 +1096,9 @@ describe("automation in the panel", () => {
|
||||
expect(row.querySelector<HTMLInputElement>('input[type="range"]')?.disabled).toBe(true);
|
||||
expect(row.querySelector<HTMLInputElement>('input[type="number"]')?.disabled).toBe(true);
|
||||
expect(row.hasAttribute("data-automated")).toBe(true);
|
||||
// A sibling parameter on the same effect stays editable.
|
||||
// A sibling parameter on the same effect stays editable — one click in,
|
||||
// which is where every control that is not the primary one lives.
|
||||
openDetails(host);
|
||||
const q = rowFor(host, plainLabel("lowpass", "q"))!;
|
||||
expect(q.querySelector<HTMLInputElement>('input[type="range"]')?.disabled).toBe(false);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user