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);