From d8128305990ae00457e2d43a92e0ff12feeadd1c Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Mon, 9 Dec 2024 09:22:53 +0000
Subject: [PATCH] Only load reaction sound effects if enabled.

---
 src/room/ReactionAudioRenderer.tsx | 14 +++++++++++---
 src/settings/SettingsModal.tsx     |  3 ---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/room/ReactionAudioRenderer.tsx b/src/room/ReactionAudioRenderer.tsx
index bf490178..3229581b 100644
--- a/src/room/ReactionAudioRenderer.tsx
+++ b/src/room/ReactionAudioRenderer.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useDeferredValue, useEffect } from "react";
+import { ReactNode, useDeferredValue, useEffect, useState } from "react";
 
 import { useReactions } from "../useReactions";
 import { playReactionsSound, useSetting } from "../settings/settings";
@@ -21,17 +21,25 @@ const SoundMap = Object.fromEntries([
   [GenericReaction.name, GenericReaction.sound],
 ]);
 
-const Sounds = prefetchSounds(SoundMap);
+let SoundCache: ReturnType<typeof prefetchSounds> | null = null;
 
 export function ReactionsAudioRenderer(): ReactNode {
   const { reactions } = useReactions();
   const [shouldPlay] = useSetting(playReactionsSound);
+  const [soundCache, setSoundCache] = useState(SoundCache);
   const audioEngineCtx = useAudioContext({
-    sounds: Sounds,
+    sounds: soundCache,
     latencyHint: "interactive",
   });
   const audioEngineRef = useLatest(audioEngineCtx);
   const oldReactions = useDeferredValue(reactions);
+  useEffect(() => {
+    if (!shouldPlay || SoundCache) {
+      return;
+    }
+    SoundCache = prefetchSounds(SoundMap);
+    setSoundCache(SoundCache);
+  }, [shouldPlay]);
 
   useEffect(() => {
     if (!shouldPlay || !audioEngineRef.current) {
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 65642ece..c4066a5e 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -86,9 +86,6 @@ export const SettingsModal: FC<Props> = ({
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
   const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
 
-  // Debounce saving the sound volume as it triggers certain components to reload.
-  useEffect(() => {});
-
   const audioTab: Tab<SettingsTab> = {
     key: "audio",
     name: t("common.audio"),