mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-08 20:09:19 +00:00
cache improvements
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user