Ensure call sound effects are played over the correct sink (#2863)

* Refactor to use AudioContext * Remove unused audio format. * Reduce update frequency for volume * Port to useAudioContext * Port reactionaudiorenderer to useAudioContext * Integrate raise hand sound into call event renderer. * Simplify reaction sounds * only play one sound per reaction type * Start to build out tests * fixup tests / comments * Fix reaction sound * remove console line * Remove another debug line. * fix lint * Use testing library click * lint * fix a few things * Change the way we as unknown the mock RTC session. * Lint * Fix types for MockRTCSession * value change should always be set * Update volume slider description. * Only load reaction sound effects if enabled. * cache improvements * lowercase soundMap * lint * move prefetch sounds to fix hot reload * correct docs * add a header * Wording change --------- Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
2024-12-09 11:39:16 +00:00
parent 9d4cd211ed
commit a8a95c3f00
17 changed files with 575 additions and 446 deletions
--- a/src/useAudioContext.test.tsx
+++ b/src/useAudioContext.test.tsx
@@ -0,0 +1,129 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test, vitest } from "vitest";
+import { FC } from "react";
+import { render } from "@testing-library/react";
+import { afterEach } from "node:test";
+import userEvent from "@testing-library/user-event";
+
+import { deviceStub, MediaDevicesContext } from "./livekit/MediaDevicesContext";
+import { useAudioContext } from "./useAudioContext";
+import { soundEffectVolumeSetting } from "./settings/settings";
+
+const staticSounds = Promise.resolve({
+  aSound: new ArrayBuffer(0),
+});
+
+const TestComponent: FC = () => {
+  const audioCtx = useAudioContext({
+    sounds: staticSounds,
+    latencyHint: "balanced",
+  });
+  if (!audioCtx) {
+    return null;
+  }
+  return (
+    <>
+      <button onClick={() => audioCtx.playSound("aSound")}>Valid sound</button>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
+      <button onClick={() => audioCtx.playSound("not-valid" as any)}>
+        Invalid sound
+      </button>
+    </>
+  );
+};
+
+class MockAudioContext {
+  public static testContext: MockAudioContext;
+
+  public constructor() {
+    MockAudioContext.testContext = this;
+  }
+
+  public gain = vitest.mocked(
+    {
+      connect: () => {},
+      gain: {
+        setValueAtTime: vitest.fn(),
+      },
+    },
+    true,
+  );
+
+  public setSinkId = vitest.fn().mockResolvedValue(undefined);
+  public decodeAudioData = vitest.fn().mockReturnValue(1);
+  public createBufferSource = vitest.fn().mockReturnValue(
+    vitest.mocked({
+      connect: (v: unknown) => v,
+      start: () => {},
+    }),
+  );
+  public createGain = vitest.fn().mockReturnValue(this.gain);
+  public close = vitest.fn().mockResolvedValue(undefined);
+}
+
+afterEach(() => {
+  vitest.unstubAllGlobals();
+});
+
+test("can play a single sound", async () => {
+  const user = userEvent.setup();
+  vitest.stubGlobal("AudioContext", MockAudioContext);
+  const { findByText } = render(<TestComponent />);
+  await user.click(await findByText("Valid sound"));
+  expect(
+    MockAudioContext.testContext.createBufferSource,
+  ).toHaveBeenCalledOnce();
+});
+test("will ignore sounds that are not registered", async () => {
+  const user = userEvent.setup();
+  vitest.stubGlobal("AudioContext", MockAudioContext);
+  const { findByText } = render(<TestComponent />);
+  await user.click(await findByText("Invalid sound"));
+  expect(
+    MockAudioContext.testContext.createBufferSource,
+  ).not.toHaveBeenCalled();
+});
+
+test("will use the correct device", () => {
+  vitest.stubGlobal("AudioContext", MockAudioContext);
+  render(
+    <MediaDevicesContext.Provider
+      value={{
+        audioInput: deviceStub,
+        audioOutput: {
+          selectedId: "chosen-device",
+          available: [],
+          select: () => {},
+        },
+        videoInput: deviceStub,
+        startUsingDeviceNames: () => {},
+        stopUsingDeviceNames: () => {},
+      }}
+    >
+      <TestComponent />
+    </MediaDevicesContext.Provider>,
+  );
+  expect(
+    MockAudioContext.testContext.createBufferSource,
+  ).not.toHaveBeenCalled();
+  expect(MockAudioContext.testContext.setSinkId).toHaveBeenCalledWith(
+    "chosen-device",
+  );
+});
+
+test("will use the correct volume level", async () => {
+  const user = userEvent.setup();
+  vitest.stubGlobal("AudioContext", MockAudioContext);
+  soundEffectVolumeSetting.setValue(0.33);
+  const { findByText } = render(<TestComponent />);
+  await user.click(await findByText("Valid sound"));
+  expect(
+    MockAudioContext.testContext.gain.gain.setValueAtTime,
+  ).toHaveBeenCalledWith(0.33, 0);
+});