diff --git a/src/room/ReactionAudioRenderer.test.tsx b/src/room/ReactionAudioRenderer.test.tsx
index 371054b4..cf9d7fad 100644
--- a/src/room/ReactionAudioRenderer.test.tsx
+++ b/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();
+
+ // 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 {
diff --git a/src/room/ReactionAudioRenderer.tsx b/src/room/ReactionAudioRenderer.tsx
index 4b42cb25..cc0b4a57 100644
--- a/src/room/ReactionAudioRenderer.tsx
+++ b/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";
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 8679d739..07ca5753 100644
--- a/src/settings/SettingsModal.tsx
+++ b/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 = ({
const devices = useMediaDevices();
useMediaDeviceNames(devices, open);
- const [soundVolume, setSoundVolume] = useSetting(effectSoundVolume);
+ const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
const audioTab: Tab = {
key: "audio",
diff --git a/src/settings/settings.ts b/src/settings/settings.ts
index 5f23beb8..f2f7980b 100644
--- a/src/settings/settings.ts
+++ b/src/settings/settings.ts
@@ -100,6 +100,9 @@ export const playReactionsSound = new Setting(
true,
);
-export const effectSoundVolume = new Setting("effects-sound-volume", 1);
+export const soundEffectVolumeSetting = new Setting(
+ "sound-effect-volume",
+ 1,
+);
export const alwaysShowSelf = new Setting("always-show-self", true);