diff --git a/src/components/MicrophoneLevelMeter.stories.tsx b/src/components/MicrophoneLevelMeter.stories.tsx index 19aaa34dc..933fa1866 100644 --- a/src/components/MicrophoneLevelMeter.stories.tsx +++ b/src/components/MicrophoneLevelMeter.stories.tsx @@ -42,18 +42,18 @@ type Story = StoryObj; /** A quiet room: hiss below the noise floor lights nothing. */ export const Silent: Story = { - args: { state: { type: "level", level: constant(0) } }, + args: { state: { type: "level", level$: constant(0) } }, play: async ({ canvasElement }) => { await expect(litSegments(canvasElement)).toBe(0); }, }; export const QuietSpeech: Story = { - args: { state: { type: "level", level: constant(5) } }, + args: { state: { type: "level", level$: constant(5) } }, }; export const NormalSpeech: Story = { - args: { state: { type: "level", level: constant(12) } }, + args: { state: { type: "level", level$: constant(12) } }, play: async ({ canvasElement }) => { // A floor, not a count: the count follows from the design's bar and gap sizes. await expect( @@ -63,18 +63,18 @@ export const NormalSpeech: Story = { }; export const LoudSpeech: Story = { - args: { state: { type: "level", level: constant(LEVEL_SCALE) } }, + args: { state: { type: "level", level$: constant(LEVEL_SCALE) } }, }; /** The three volumes differ in how many bars are lit, not only in colour. */ export const VolumesAreDistinguishable: Story = { - args: { state: { type: "level", level: constant(5) } }, + args: { state: { type: "level", level$: constant(5) } }, play: async ({ canvasElement, mount }) => { const lit: number[] = []; for (const level of [5, 12, LEVEL_SCALE]) { await mount( , ); lit.push(litSegments(canvasElement)); @@ -121,7 +121,7 @@ export const NoDevice: Story = { /** The same meter at two widths: the bars keep their size and only their count changes. */ export const ShapeStaysTheSameAtAnyWidth: Story = { - args: { state: { type: "level", level: constant(12) } }, + args: { state: { type: "level", level$: constant(12) } }, play: async ({ mount, args }) => { const narrow = await measureAt(mount, args, 180); const wide = await measureAt(mount, args, 400); diff --git a/src/components/MicrophoneLevelMeter.test.tsx b/src/components/MicrophoneLevelMeter.test.tsx index 3e4960540..171f208c1 100644 --- a/src/components/MicrophoneLevelMeter.test.tsx +++ b/src/components/MicrophoneLevelMeter.test.tsx @@ -15,7 +15,7 @@ import { constant } from "../state/Behavior"; describe("MicrophoneLevelMeter", () => { test("announces the level rather than relying on hue", () => { render( - , + , ); const meter = screen.getByRole("meter", { name: "Microphone level" }); diff --git a/src/components/MicrophoneLevelMeter.tsx b/src/components/MicrophoneLevelMeter.tsx index fc274a34c..6b21491a4 100644 --- a/src/components/MicrophoneLevelMeter.tsx +++ b/src/components/MicrophoneLevelMeter.tsx @@ -88,7 +88,7 @@ export const MicrophoneLevelMeter: FC = ({ useLayoutEffect(() => { const element = segments.current; if (state.type !== "level" || element === null) return; - const subscription = state.level.subscribe((level) => { + const subscription = state.level$.subscribe((level) => { element.setAttribute("aria-valuenow", String(level)); element.setAttribute( "aria-valuetext", @@ -121,9 +121,9 @@ export const MicrophoneLevelMeter: FC = ({ aria-valuemin={0} aria-valuemax={LEVEL_SCALE} // The first paint's value; the effect above keeps it current. - aria-valuenow={state.level.value} + aria-valuenow={state.level$.value} aria-valuetext={t("microphone_level.value", { - level: state.level.value, + level: state.level$.value, max: LEVEL_SCALE, })} > diff --git a/src/components/useMicrophoneLevel.test.tsx b/src/components/useMicrophoneLevel.test.tsx index cef896a78..47b33b996 100644 --- a/src/components/useMicrophoneLevel.test.tsx +++ b/src/components/useMicrophoneLevel.test.tsx @@ -36,6 +36,6 @@ describe("useMicrophoneLevel", () => { // No level carried over from the previous device. const state = result.current; - expect(state.type === "level" ? state.level.value : state.type).toBe(0); + expect(state.type === "level" ? state.level$.value : state.type).toBe(0); }); }); diff --git a/src/components/useMicrophoneLevel.ts b/src/components/useMicrophoneLevel.ts index b2c17e012..a787a23d5 100644 --- a/src/components/useMicrophoneLevel.ts +++ b/src/components/useMicrophoneLevel.ts @@ -13,7 +13,7 @@ import { } from "../state/MicrophoneLevel"; import { constant } from "../state/Behavior"; -const IDLE: MicrophoneState = { type: "level", level: constant(0) }; +const IDLE: MicrophoneState = { type: "level", level$: constant(0) }; /** The live level of a microphone, captured only while `active`. */ export function useMicrophoneLevel( diff --git a/src/state/MicrophoneLevel.test.ts b/src/state/MicrophoneLevel.test.ts index 69d7c8a7b..e8f684845 100644 --- a/src/state/MicrophoneLevel.test.ts +++ b/src/state/MicrophoneLevel.test.ts @@ -161,7 +161,7 @@ describe("observeMicrophoneState$", () => { let levels = 0; const subscription = observeMicrophoneState$("mic1").subscribe((state) => { states.push(state.type); - if (state.type === "level") state.level.subscribe(() => levels++); + if (state.type === "level") state.level$.subscribe(() => levels++); }); capture.grant(); await vi.waitFor(() => expect(levels).toBe(1)); diff --git a/src/state/MicrophoneLevel.ts b/src/state/MicrophoneLevel.ts index 70f61790b..390f2b3f8 100644 --- a/src/state/MicrophoneLevel.ts +++ b/src/state/MicrophoneLevel.ts @@ -67,7 +67,7 @@ export function observeMicrophoneState$( let previousFrame = performance.now(); const current = new BehaviorSubject(0); level = current; - subscriber.next({ type: "level", level: current }); + subscriber.next({ type: "level", level$: current }); const read = (): void => { analyser.getByteTimeDomainData(samples);