From 431744ecabb667ecc3266e86495f95fae8bd9c06 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Mon, 9 Dec 2024 09:25:45 +0000
Subject: [PATCH] cache improvements

---
 src/room/CallEventAudioRenderer.tsx |  4 ++--
 src/room/ReactionAudioRenderer.tsx  | 15 +++++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/room/CallEventAudioRenderer.tsx b/src/room/CallEventAudioRenderer.tsx
index 0e410ffb..ba70765c 100644
--- a/src/room/CallEventAudioRenderer.tsx
+++ b/src/room/CallEventAudioRenderer.tsx
@@ -24,7 +24,7 @@ import { useLatest } from "../useLatest";
 export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
 export const THROTTLE_SOUND_EFFECT_MS = 500;
 
-const Sounds = prefetchSounds({
+const sounds = prefetchSounds({
   join: {
     mp3: joinCallSoundMp3,
     ogg: joinCallSoundOgg,
@@ -45,7 +45,7 @@ export function CallEventAudioRenderer({
   vm: CallViewModel;
 }): ReactNode {
   const audioEngineCtx = useAudioContext({
-    sounds: Sounds,
+    sounds,
     latencyHint: "interactive",
   });
   const audioEngineRef = useLatest(audioEngineCtx);
diff --git a/src/room/ReactionAudioRenderer.tsx b/src/room/ReactionAudioRenderer.tsx
index 3229581b..e6ca8758 100644
--- a/src/room/ReactionAudioRenderer.tsx
+++ b/src/room/ReactionAudioRenderer.tsx
@@ -21,24 +21,27 @@ const SoundMap = Object.fromEntries([
   [GenericReaction.name, GenericReaction.sound],
 ]);
 
-let SoundCache: ReturnType<typeof prefetchSounds> | null = null;
-
 export function ReactionsAudioRenderer(): ReactNode {
   const { reactions } = useReactions();
   const [shouldPlay] = useSetting(playReactionsSound);
-  const [soundCache, setSoundCache] = useState(SoundCache);
+  const [soundCache, setSoundCache] = useState<ReturnType<
+    typeof prefetchSounds
+  > | null>(null);
   const audioEngineCtx = useAudioContext({
     sounds: soundCache,
     latencyHint: "interactive",
   });
   const audioEngineRef = useLatest(audioEngineCtx);
   const oldReactions = useDeferredValue(reactions);
+
   useEffect(() => {
-    if (!shouldPlay || SoundCache) {
+    if (!shouldPlay || soundCache) {
       return;
     }
-    SoundCache = prefetchSounds(SoundMap);
-    setSoundCache(SoundCache);
+    // This is fine even if we load the component multiple times,
+    // as the browser's cache should ensure once the media is loaded
+    // once that future fetches come via the cache.
+    setSoundCache(prefetchSounds(SoundMap));
   }, [shouldPlay]);
 
   useEffect(() => {