77facd01e4
* Refactor to use AudioContext * Remove unused audio format. * Reduce update frequency for volume * Port to useAudioContext * Port reactionaudiorenderer to useAudioContext * Integrate raise hand sound into call event renderer. * Simplify reaction sounds * only play one sound per reaction type * Start to build out tests * fixup tests / comments * Fix reaction sound * remove console line * Remove another debug line. * fix lint * Use testing library click * lint * Add support for playing a sound when the user exits a call. * Port GroupCallView to useAudioContext * Remove debug bits. * asyncify * lint * lint * lint * tidy * Add test for group call view * Test widget mode too. * fix ?. * Format * Lint * Lint --------- Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { type ReactNode, useDeferredValue, useEffect, useState } from "react";
|
|
|
|
import { useReactions } from "../useReactions";
|
|
import { playReactionsSound, useSetting } from "../settings/settings";
|
|
import { GenericReaction, ReactionSet } from "../reactions";
|
|
import { useAudioContext } from "../useAudioContext";
|
|
import { prefetchSounds } from "../soundUtils";
|
|
import { useLatest } from "../useLatest";
|
|
|
|
const soundMap = Object.fromEntries([
|
|
...ReactionSet.filter((v) => v.sound !== undefined).map((v) => [
|
|
v.name,
|
|
v.sound!,
|
|
]),
|
|
[GenericReaction.name, GenericReaction.sound],
|
|
]);
|
|
|
|
export function ReactionsAudioRenderer(): ReactNode {
|
|
const { reactions } = useReactions();
|
|
const [shouldPlay] = useSetting(playReactionsSound);
|
|
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) {
|
|
return;
|
|
}
|
|
// 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));
|
|
}, [soundCache, shouldPlay]);
|
|
|
|
useEffect(() => {
|
|
if (!shouldPlay || !audioEngineRef.current) {
|
|
return;
|
|
}
|
|
const oldReactionSet = new Set(
|
|
Object.values(oldReactions).map((r) => r.name),
|
|
);
|
|
for (const reactionName of new Set(
|
|
Object.values(reactions).map((r) => r.name),
|
|
)) {
|
|
if (oldReactionSet.has(reactionName)) {
|
|
// Don't replay old reactions
|
|
return;
|
|
}
|
|
if (soundMap[reactionName]) {
|
|
void audioEngineRef.current.playSound(reactionName);
|
|
} else {
|
|
// Fallback sounds.
|
|
void audioEngineRef.current.playSound("generic");
|
|
}
|
|
}
|
|
}, [audioEngineRef, shouldPlay, oldReactions, reactions]);
|
|
return null;
|
|
}
|