ea6f2952af
* Add renderer for call joined / left * lint * Add new sounds * Updates sounds in renderer * lint * move import * pad sounds with silence * lint * tidy * Drop autoplay since we now subscribe correctly. * Comitting test files I am going to be going to lunch so will tidy up in a little while. * finish up tests * Add support for multiple channels per sound. * lint
118 lines
3.3 KiB
TypeScript
118 lines
3.3 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 { ReactNode, useEffect, useRef } from "react";
|
|
import { filter } from "rxjs";
|
|
|
|
import {
|
|
soundEffectVolumeSetting as effectSoundVolumeSetting,
|
|
useSetting,
|
|
} from "../settings/settings";
|
|
import { CallViewModel } from "../state/CallViewModel";
|
|
import enterCallSoundMp3 from "../sound/join_call.mp3";
|
|
import enterCallSoundOgg from "../sound/join_call.ogg";
|
|
import leftCallSoundMp3 from "../sound/left_call.mp3";
|
|
import leftCallSoundOgg from "../sound/left_call.ogg";
|
|
|
|
// Do not play any sounds if the participant count has exceeded this
|
|
// number.
|
|
export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
|
|
export const CONCURRENT_AUDIO_CHANNELS = 2;
|
|
|
|
export function CallEventAudioRenderer({
|
|
vm,
|
|
}: {
|
|
vm: CallViewModel;
|
|
}): ReactNode {
|
|
const [effectSoundVolume] = useSetting(effectSoundVolumeSetting);
|
|
const callEntered = useRef<(HTMLAudioElement | null)[]>([]);
|
|
const callLeft = useRef<(HTMLAudioElement | null)[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (effectSoundVolume === 0) {
|
|
return;
|
|
}
|
|
const joinSub = vm.memberChanges
|
|
.pipe(
|
|
filter(
|
|
({ joined, ids }) =>
|
|
ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && joined.length > 0,
|
|
),
|
|
)
|
|
.subscribe(({ joined }) => {
|
|
const availablePlayer = callEntered.current.find((v) => v?.paused);
|
|
void availablePlayer?.play();
|
|
});
|
|
|
|
const leftSub = vm.memberChanges
|
|
.pipe(
|
|
filter(
|
|
({ ids, left }) =>
|
|
ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && left.length > 0,
|
|
),
|
|
)
|
|
.subscribe(() => {
|
|
const availablePlayer = callLeft.current.find((v) => v?.paused);
|
|
void availablePlayer?.play();
|
|
});
|
|
|
|
return (): void => {
|
|
joinSub.unsubscribe();
|
|
leftSub.unsubscribe();
|
|
};
|
|
}, [effectSoundVolume, callEntered, callLeft, vm]);
|
|
|
|
// Set volume.
|
|
useEffect(() => {
|
|
callEntered.current.forEach((a) => {
|
|
if (a) {
|
|
a.volume = effectSoundVolume;
|
|
}
|
|
});
|
|
callLeft.current.forEach((a) => {
|
|
if (a) {
|
|
a.volume = effectSoundVolume;
|
|
}
|
|
});
|
|
}, [callEntered, callLeft, effectSoundVolume]);
|
|
|
|
// Do not render any audio elements if playback is disabled. Will save
|
|
// audio file fetches.
|
|
if (effectSoundVolume === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
// Will play as soon as it's mounted, which is what we want as this will
|
|
// 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
|
|
>
|
|
<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>
|
|
))}
|
|
</>
|
|
);
|
|
}
|