Add test

src/room/ReactionAudioRenderer.test.tsx

@@ -17,7 +17,10 @@ import {
 } from "../utils/testReactions";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { GenericReaction, ReactionSet } from "../reactions";
-import { playReactionsSound } from "../settings/settings";
+import {
+  playReactionsSound,
+  soundEffectVolumeSetting,
+} from "../settings/settings";
 
 const memberUserIdAlice = "@alice:example.org";
 const memberUserIdBob = "@bob:example.org";
@@ -49,6 +52,7 @@ function TestComponent({
 const originalPlayFn = window.HTMLMediaElement.prototype.play;
 afterAll(() => {
   playReactionsSound.setValue(playReactionsSound.defaultValue);
+  soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
   window.HTMLMediaElement.prototype.play = originalPlayFn;
 });
 
@@ -125,6 +129,28 @@ test("will play the generic audio sound when there is soundless reaction", () =>
   expect(audioIsPlaying[0]).toContain(GenericReaction.sound?.ogg);
 });
 
+test("will play an audio sound with the correct volume", () => {
+  playReactionsSound.setValue(true);
+  soundEffectVolumeSetting.setValue(0.5);
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByTestId } = render(<TestComponent rtcSession={rtcSession} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !!r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    room.testSendReaction(memberEventAlice, chosenReaction, membership);
+  });
+  expect((getByTestId(chosenReaction.name) as HTMLAudioElement).volume).toEqual(
+    0.5,
+  );
+});
+
 test("will play multiple audio sounds when there are multiple different reactions", () => {
   const audioIsPlaying: string[] = [];
   window.HTMLMediaElement.prototype.play = async function (): Promise<void> {

src/room/ReactionAudioRenderer.tsx

@@ -10,7 +10,7 @@ import { ReactNode, useEffect, useRef } from "react";
 import { useReactions } from "../useReactions";
 import {
   playReactionsSound,
-  effectSoundVolume as effectSoundVolumeSetting,
+  soundEffectVolumeSetting as effectSoundVolumeSetting,
   useSetting,
 } from "../settings/settings";
 import { GenericReaction, ReactionSet } from "../reactions";

src/settings/SettingsModal.tsx

@@ -28,7 +28,7 @@ import {
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
   useOptInAnalytics,
-  effectSoundVolume,
+  soundEffectVolumeSetting,
 } from "./settings";
 import { isFirefox } from "../Platform";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
@@ -118,7 +118,7 @@ export const SettingsModal: FC<Props> = ({
   const devices = useMediaDevices();
   useMediaDeviceNames(devices, open);
 
-  const [soundVolume, setSoundVolume] = useSetting(effectSoundVolume);
+  const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
 
   const audioTab: Tab<SettingsTab> = {
     key: "audio",

src/settings/settings.ts

@@ -100,6 +100,9 @@ export const playReactionsSound = new Setting<boolean>(
   true,
 );
 
-export const effectSoundVolume = new Setting<number>("effects-sound-volume", 1);
+export const soundEffectVolumeSetting = new Setting<number>(
+  "sound-effect-volume",
+  1,
+);
 
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);