fix: DM showing voip calls that are happening on different session - #41282

Author: pierre-lehnen-rc

apps/meteor/client/views/room/body/MediaCallRoom.tsx

@@ -2,7 +2,12 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { isDirectMessageRoom } from '@rocket.chat/core-typings';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { PeerInfo } from '@rocket.chat/ui-voip';
-import { MediaCallRoomActivity, usePeekMediaSessionState, usePeekMediaSessionPeerInfo } from '@rocket.chat/ui-voip';
+import {
+	MediaCallRoomActivity,
+	usePeekMediaSessionState,
+	usePeekMediaSessionPeerInfo,
+	usePeekMediaSessionHidden,
+} from '@rocket.chat/ui-voip';
 import type { ReactNode } from 'react';
 import { memo } from 'react';
 
@@ -42,11 +47,12 @@ export type MediaCallRoomProps = {
 
 const MediaCallRoom = ({ children }: MediaCallRoomProps) => {
 	const state = usePeekMediaSessionState();
+	const hidden = usePeekMediaSessionHidden();
 	const peerInfo = usePeekMediaSessionPeerInfo();
 	const userId = useUserId();
 	const room = useRoom();
 
-	if (state !== 'ongoing' || !isMediaCallRoom(room, peerInfo, userId)) {
+	if (hidden || state !== 'ongoing' || !isMediaCallRoom(room, peerInfo, userId)) {
 		return children;
 	}
 

packages/media-signaling/src/definition/call/callStates/ITempMediaCallData.ts

@@ -3,6 +3,7 @@ import type { IClientMediaCallLocalParticipant } from '../IClientMediaCallPartic
 
 export interface ITempMediaCallData {
 	readonly confirmed: false;
+	readonly hidden: boolean;
 	readonly tempCallId: string;
 
 	readonly state: CallState;

packages/media-signaling/src/lib/Call.ts

@@ -280,6 +280,7 @@ export class ClientMediaCall implements IClientMediaCall {
 
 			return {
 				confirmed: false,
+				hidden: this.hidden,
 				tempCallId: this.tempCallId,
 				state: this.state,
 				title: this.contact.displayName || number || 'unknown',

packages/ui-voip/src/context/index.ts

@@ -5,6 +5,7 @@ export { usePeerAutocomplete, isFirstPeerAutocompleteOption } from './usePeerAut
 export { useWidgetExternalControls } from './useWidgetExternalControls';
 export { usePeekMediaSessionState } from './usePeekMediaSessionState';
 export { usePeekMediaSessionCallId } from './usePeekMediaSessionCallId';
+export { usePeekMediaSessionHidden } from './usePeekMediaSessionHidden';
 export { usePeekMediaSessionPeerInfo } from './usePeekMediaSessionPeerInfo';
 export { usePeekMediaSessionFeatures } from './usePeekMediaSessionFeatures';
 export type { PeekMediaSessionStateReturn } from './usePeekMediaSessionState';

packages/ui-voip/src/context/usePeekMediaSessionHidden.ts

@@ -0,0 +1,34 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+import { useMediaCallInstance } from './MediaCallInstanceContext';
+
+export const usePeekMediaSessionHidden = (): boolean => {
+	const { instance } = useMediaCallInstance();
+
+	const subscribe = useCallback(
+		(onStoreChange: () => void): (() => void) => {
+			if (!instance) {
+				return () => undefined;
+			}
+
+			const offCbs = [instance.on('sessionStateChange', onStoreChange), instance.on('hiddenCall', onStoreChange)];
+
+			return () => {
+				offCbs.forEach((offCb) => offCb());
+			};
+		},
+		[instance],
+	);
+
+	const getSnapshot = useCallback(() => {
+		if (!instance) {
+			return false;
+		}
+
+		const instanceState = instance.getState();
+
+		return instanceState?.hidden ?? false;
+	}, [instance]);
+
+	return useSyncExternalStore(subscribe, getSnapshot);
+};

packages/ui-voip/src/index.ts

@@ -7,6 +7,7 @@ export {
 	usePeekMediaSessionState,
 	usePeekMediaSessionPeerInfo,
 	usePeekMediaSessionFeatures,
+	usePeekMediaSessionHidden,
 } from './context';
 export type { PeekMediaSessionStateReturn } from './context';
 export type { PeerInfo } from './context';