Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-08 20:09:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add support for multiple channels per sound.

Browse Source
This commit is contained in:
Will Hunt
2024-12-02 13:34:48 +00:00
parent 7b4241585b
commit fa60790125
1 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/room/CallEventAudioRenderer.tsx
View File

@@ -21,6 +21,7 @@ import leftCallSoundOgg from "../sound/left_call.ogg";
// Do not play any sounds if the participant count has exceeded this // Do not play any sounds if the participant count has exceeded this
// number. // number.
export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8; export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
export const CONCURRENT_AUDIO_CHANNELS = 2;
export function CallEventAudioRenderer({ export function CallEventAudioRenderer({
vm, vm,
@@ -28,8 +29,8 @@ export function CallEventAudioRenderer({
vm: CallViewModel; vm: CallViewModel;
}): ReactNode { }): ReactNode {
const [effectSoundVolume] = useSetting(effectSoundVolumeSetting); const [effectSoundVolume] = useSetting(effectSoundVolumeSetting);
const callEntered = useRef<HTMLAudioElement>(null); const callEntered = useRef<(HTMLAudioElement|null)[]>([]);
const callLeft = useRef<HTMLAudioElement>(null); const callLeft = useRef<(HTMLAudioElement|null)[]>([]);
useEffect(() => { useEffect(() => {
if (effectSoundVolume === 0) { if (effectSoundVolume === 0) {
@@ -43,9 +44,8 @@ export function CallEventAudioRenderer({
), ),
) )
.subscribe(({ joined }) => { .subscribe(({ joined }) => {
if (callEntered.current?.paused) { const availablePlayer = callEntered.current.find(v => v?.paused);
void callEntered.current.play(); void availablePlayer?.play();
}
}); });
const leftSub = vm.memberChanges const leftSub = vm.memberChanges
@@ -56,9 +56,8 @@ export function CallEventAudioRenderer({
), ),
) )
.subscribe(() => { .subscribe(() => {
if (callLeft.current?.paused) { const availablePlayer = callLeft.current.find(v => v?.paused);
void callLeft.current.play(); void availablePlayer?.play();
}
}); });
return (): void => { return (): void => {
@@ -69,13 +68,8 @@ export function CallEventAudioRenderer({
// Set volume. // Set volume.
useEffect(() => { useEffect(() => {
if (callEntered.current) { callEntered.current.forEach(a => {if (a) {a.volume = effectSoundVolume}});
callEntered.current.volume = effectSoundVolume; callLeft.current.forEach(a => {if (a) {a.volume = effectSoundVolume}});
}
if (callLeft.current) {
callLeft.current.volume = effectSoundVolume;
}
}, [callEntered, callLeft, effectSoundVolume]); }, [callEntered, callLeft, effectSoundVolume]);
// Do not render any audio elements if playback is disabled. Will save // Do not render any audio elements if playback is disabled. Will save
@@ -88,14 +82,14 @@ export function CallEventAudioRenderer({
// Will play as soon as it's mounted, which is what we want as this will // Will play as soon as it's mounted, which is what we want as this will
// play when the call is entered. // play when the call is entered.
<> <>
<audio ref={callEntered} preload="auto" hidden> {Array.from({length: CONCURRENT_AUDIO_CHANNELS}).map((_, index) => <audio key={index} ref={(r) => callEntered.current[index] = r} preload="auto" hidden>
<source src={enterCallSoundOgg} type="audio/ogg; codecs=vorbis" /> <source src={enterCallSoundOgg} type="audio/ogg; codecs=vorbis" />
<source src={enterCallSoundMp3} type="audio/mpeg" /> <source src={enterCallSoundMp3} type="audio/mpeg" />
</audio> </audio>)}
<audio ref={callLeft} preload="auto" hidden> {Array.from({length: CONCURRENT_AUDIO_CHANNELS}).map((_, index) => <audio key={index} ref={(r) => callLeft.current[index] = r} preload="auto" hidden>
<source src={leftCallSoundOgg} type="audio/ogg; codecs=vorbis" /> <source src={leftCallSoundOgg} type="audio/ogg; codecs=vorbis" />
<source src={leftCallSoundMp3} type="audio/mpeg" /> <source src={leftCallSoundMp3} type="audio/mpeg" />
</audio> </audio>)}
</> </>
); );
} }