cache improvements

This commit is contained in:
Half-Shot
2024-12-09 09:25:45 +00:00
parent d812830599
commit 431744ecab
2 changed files with 11 additions and 8 deletions

View File

@@ -24,7 +24,7 @@ import { useLatest } from "../useLatest";
export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8; export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
export const THROTTLE_SOUND_EFFECT_MS = 500; export const THROTTLE_SOUND_EFFECT_MS = 500;
const Sounds = prefetchSounds({ const sounds = prefetchSounds({
join: { join: {
mp3: joinCallSoundMp3, mp3: joinCallSoundMp3,
ogg: joinCallSoundOgg, ogg: joinCallSoundOgg,
@@ -45,7 +45,7 @@ export function CallEventAudioRenderer({
vm: CallViewModel; vm: CallViewModel;
}): ReactNode { }): ReactNode {
const audioEngineCtx = useAudioContext({ const audioEngineCtx = useAudioContext({
sounds: Sounds, sounds,
latencyHint: "interactive", latencyHint: "interactive",
}); });
const audioEngineRef = useLatest(audioEngineCtx); const audioEngineRef = useLatest(audioEngineCtx);

View File

@@ -21,24 +21,27 @@ const SoundMap = Object.fromEntries([
[GenericReaction.name, GenericReaction.sound], [GenericReaction.name, GenericReaction.sound],
]); ]);
let SoundCache: ReturnType<typeof prefetchSounds> | null = null;
export function ReactionsAudioRenderer(): ReactNode { export function ReactionsAudioRenderer(): ReactNode {
const { reactions } = useReactions(); const { reactions } = useReactions();
const [shouldPlay] = useSetting(playReactionsSound); const [shouldPlay] = useSetting(playReactionsSound);
const [soundCache, setSoundCache] = useState(SoundCache); const [soundCache, setSoundCache] = useState<ReturnType<
typeof prefetchSounds
> | null>(null);
const audioEngineCtx = useAudioContext({ const audioEngineCtx = useAudioContext({
sounds: soundCache, sounds: soundCache,
latencyHint: "interactive", latencyHint: "interactive",
}); });
const audioEngineRef = useLatest(audioEngineCtx); const audioEngineRef = useLatest(audioEngineCtx);
const oldReactions = useDeferredValue(reactions); const oldReactions = useDeferredValue(reactions);
useEffect(() => { useEffect(() => {
if (!shouldPlay || SoundCache) { if (!shouldPlay || soundCache) {
return; return;
} }
SoundCache = prefetchSounds(SoundMap); // This is fine even if we load the component multiple times,
setSoundCache(SoundCache); // as the browser's cache should ensure once the media is loaded
// once that future fetches come via the cache.
setSoundCache(prefetchSounds(SoundMap));
}, [shouldPlay]); }, [shouldPlay]);
useEffect(() => { useEffect(() => {