42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
|
|
import { useCallState } from '../contexts/CallProvider';
|
|
import { useSoundLoader } from './useSoundLoader';
|
|
|
|
/**
|
|
* Convenience hook to play `join.mp3` when first other participants joins.
|
|
*/
|
|
export const useJoinSound = () => {
|
|
const { callObject: daily } = useCallState();
|
|
const { joinSound } = useSoundLoader();
|
|
const [playJoinSound, setPlayJoinSound] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!daily) return;
|
|
/**
|
|
* We don't want to immediately play a joined sound, when the user joins the meeting:
|
|
* Upon joining all other participants, that were already in-call, will emit a
|
|
* participant-joined event.
|
|
* In waiting 2 seconds we make sure, that the sound is only played when the user
|
|
* is **really** the first participant.
|
|
*/
|
|
setTimeout(() => {
|
|
setPlayJoinSound(true);
|
|
}, 2000);
|
|
}, [daily]);
|
|
|
|
useEffect(() => {
|
|
if (!daily) return;
|
|
const handleParticipantJoined = () => {
|
|
// first other participant joined --> play sound
|
|
if (!playJoinSound || Object.keys(daily.participants()).length !== 2)
|
|
return;
|
|
joinSound.play();
|
|
};
|
|
|
|
daily.on('participant-joined', handleParticipantJoined);
|
|
return () => {
|
|
daily.off('participant-joined', handleParticipantJoined);
|
|
};
|
|
}, [daily, joinSound, playJoinSound]);
|
|
}; |