cache improvements

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

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(() => {