import { useCallback, useEffect, useRef } from 'react'; import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership'; import { CallEmbed } from '../plugins/call'; import { useSetting } from '../state/hooks/settings'; import { settingsAtom } from '../state/settings'; import { useMatrixClient } from './useMatrixClient'; import { useCallMembersChange, useCallSession } from './useCall'; import { useCallJoined } from './useCallEmbed'; import { playCallJoinSound, playCallLeaveSound } from '../utils/callSounds'; const membershipKey = (m: CallMembership): string => `${m.sender}|${m.deviceId}`; /** * Plays a local sound effect when another participant joins or leaves * the call you are in. Style (or off) is configured in Settings → Calls. */ export function useCallJoinLeaveSounds(embed: CallEmbed): void { const mx = useMatrixClient(); const [style] = useSetting(settingsAtom, 'callJoinLeaveSound'); const joined = useCallJoined(embed); const session = useCallSession(embed.room); const prevKeysRef = useRef | null>(null); // Snapshot current members when the session (re)starts so we never play // sounds for participants who were already present. useEffect(() => { prevKeysRef.current = new Set(session.memberships.map(membershipKey)); }, [session]); useCallMembersChange( session, useCallback( (members: CallMembership[]) => { const next = new Set(members.map(membershipKey)); const prev = prevKeysRef.current ?? next; prevKeysRef.current = next; if (!joined || style === 'off') return; const myPrefix = `${mx.getSafeUserId()}|`; let someoneJoined = false; let someoneLeft = false; next.forEach((key) => { if (!prev.has(key) && !key.startsWith(myPrefix)) someoneJoined = true; }); prev.forEach((key) => { if (!next.has(key) && !key.startsWith(myPrefix)) someoneLeft = true; }); if (someoneJoined) playCallJoinSound(style); if (someoneLeft) playCallLeaveSound(style); }, [joined, style, mx], ), ); }