This commit is contained in:
Will Hunt
2024-12-02 13:35:40 +00:00
parent fa60790125
commit d8c0f10c06

View File

@@ -29,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) {
@@ -44,7 +44,7 @@ export function CallEventAudioRenderer({
), ),
) )
.subscribe(({ joined }) => { .subscribe(({ joined }) => {
const availablePlayer = callEntered.current.find(v => v?.paused); const availablePlayer = callEntered.current.find((v) => v?.paused);
void availablePlayer?.play(); void availablePlayer?.play();
}); });
@@ -56,7 +56,7 @@ export function CallEventAudioRenderer({
), ),
) )
.subscribe(() => { .subscribe(() => {
const availablePlayer = callLeft.current.find(v => v?.paused); const availablePlayer = callLeft.current.find((v) => v?.paused);
void availablePlayer?.play(); void availablePlayer?.play();
}); });
@@ -68,8 +68,16 @@ export function CallEventAudioRenderer({
// Set volume. // Set volume.
useEffect(() => { useEffect(() => {
callEntered.current.forEach(a => {if (a) {a.volume = effectSoundVolume}}); callEntered.current.forEach((a) => {
callLeft.current.forEach(a => {if (a) {a.volume = effectSoundVolume}}); if (a) {
a.volume = effectSoundVolume;
}
});
callLeft.current.forEach((a) => {
if (a) {
a.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
@@ -82,14 +90,28 @@ 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.
<> <>
{Array.from({length: CONCURRENT_AUDIO_CHANNELS}).map((_, index) => <audio key={index} ref={(r) => callEntered.current[index] = r} preload="auto" hidden> {Array.from({ length: CONCURRENT_AUDIO_CHANNELS }).map((_, index) => (
<source src={enterCallSoundOgg} type="audio/ogg; codecs=vorbis" /> <audio
<source src={enterCallSoundMp3} type="audio/mpeg" /> key={index}
</audio>)} ref={(r) => (callEntered.current[index] = r)}
{Array.from({length: CONCURRENT_AUDIO_CHANNELS}).map((_, index) => <audio key={index} ref={(r) => callLeft.current[index] = r} preload="auto" hidden> preload="auto"
<source src={leftCallSoundOgg} type="audio/ogg; codecs=vorbis" /> hidden
<source src={leftCallSoundMp3} type="audio/mpeg" /> >
</audio>)} <source src={enterCallSoundOgg} type="audio/ogg; codecs=vorbis" />
<source src={enterCallSoundMp3} type="audio/mpeg" />
</audio>
))}
{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={leftCallSoundMp3} type="audio/mpeg" />
</audio>
))}
</> </>
); );
} }