fix: Video conference call again not working properly

.changeset/chilly-schools-guess.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where video conference popup not displaying properly when trying to call again in direct messages

apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useVideoConfMenuOptions.tsx

@@ -3,11 +3,15 @@ import { Box } from '@rocket.chat/fuselage';
 import { useEffectEvent, useStableArray } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
-import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '@rocket.chat/ui-video-conf';
+import {
+	useVideoConfDispatchOutgoing,
+	useVideoConfIsCalling,
+	useVideoConfIsRinging,
+	useVideoConfLoadCapabilities,
+} from '@rocket.chat/ui-video-conf';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { VideoConfManager } from '../../../lib/VideoConfManager';
 import { useRoom } from '../../../views/room/contexts/RoomContext';
 import type { RoomToolboxActionConfig } from '../../../views/room/contexts/RoomToolboxContext';
 import { useVideoConfWarning } from '../../../views/room/contextualBar/VideoConference/hooks/useVideoConfWarning';
@@ -25,6 +29,7 @@ const useVideoConfMenuOptions = () => {
 
 	const dispatchWarning = useVideoConfWarning();
 	const dispatchPopup = useVideoConfDispatchOutgoing();
+	const loadCapabilities = useVideoConfLoadCapabilities();
 	const isCalling = useVideoConfIsCalling();
 	const isRinging = useVideoConfIsRinging();
 
@@ -57,7 +62,7 @@ const useVideoConfMenuOptions = () => {
 		}
 
 		try {
-			await VideoConfManager.loadCapabilities();
+			await loadCapabilities();
 			dispatchPopup({ rid: room._id });
 		} catch (error: any) {
 			dispatchWarning(error.error);

apps/meteor/client/providers/VideoConfProvider.tsx

@@ -51,7 +51,7 @@ const VideoConfContextProvider = ({ children }: { children: ReactNode }): ReactE
 			rejectIncomingCall: (callId) => VideoConfManager.rejectIncomingCall(callId),
 			abortCall: () => VideoConfManager.abortCall(),
 			setPreferences: (prefs) => VideoConfManager.setPreferences(prefs),
-			loadCapabilities: VideoConfManager.loadCapabilities,
+			loadCapabilities: () => VideoConfManager.loadCapabilities(),
 			queryIncomingCalls: () => [(cb) => VideoConfManager.on('incoming/changed', cb), () => VideoConfManager.getIncomingDirectCalls()],
 			queryRinging: () => [(cb) => VideoConfManager.on('ringing/changed', cb), () => VideoConfManager.isRinging()],
 			queryCalling: () => [(cb) => VideoConfManager.on('calling/changed', cb), () => VideoConfManager.isCalling()],

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx

@@ -17,6 +17,7 @@ import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import VideoConfPopupRoomInfo from './VideoConfPopupRoomInfo';
+import { useVideoConfRoomName } from '../../hooks/useVideoConfRoomName';
 
 type OutgoingPopupProps = {
 	id: string;
@@ -29,12 +30,13 @@ const OutgoingPopup = ({ room, onClose, id }: OutgoingPopupProps): ReactElement
 	const videoConfPreferences = useVideoConfPreferences();
 	const { controllersConfig } = useVideoConfControllers(videoConfPreferences);
 	const capabilities = useVideoConfCapabilities();
+	const roomName = useVideoConfRoomName(room);
 
 	const showCam = !!capabilities.cam;
 	const showMic = !!capabilities.mic;
 
 	return (
-		<VideoConfPopup>
+		<VideoConfPopup aria-label={t('Calling__roomName__', { roomName })}>
 			<VideoConfPopupHeader>
 				<VideoConfPopupTitle text={t('Calling')} counter />
 				{(showCam || showMic) && (

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useVideoCallAction.tsx

@@ -1,10 +1,14 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import { useTranslation, useUserRoom, useUserId, useUserSubscriptionByName, useSetting, usePermission } from '@rocket.chat/ui-contexts';
-import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '@rocket.chat/ui-video-conf';
+import {
+	useVideoConfDispatchOutgoing,
+	useVideoConfIsCalling,
+	useVideoConfIsRinging,
+	useVideoConfLoadCapabilities,
+} from '@rocket.chat/ui-video-conf';
 import { useMemo } from 'react';
 
-import { VideoConfManager } from '../../../../../lib/VideoConfManager';
 import { useUserCard } from '../../../contexts/UserCardContext';
 import { useVideoConfWarning } from '../../../contextualBar/VideoConference/hooks/useVideoConfWarning';
 import type { UserInfoAction } from '../useUserInfoActions';
@@ -15,6 +19,7 @@ export const useVideoCallAction = (user: Pick<IUser, '_id' | 'username'>): UserI
 	const room = useUserRoom(usernameSubscription?.rid || '');
 	const { closeUserCard } = useUserCard();
 
+	const loadCapabilities = useVideoConfLoadCapabilities();
 	const dispatchWarning = useVideoConfWarning();
 	const dispatchPopup = useVideoConfDispatchOutgoing();
 	const isCalling = useVideoConfIsCalling();
@@ -31,7 +36,7 @@ export const useVideoCallAction = (user: Pick<IUser, '_id' | 'username'>): UserI
 			}
 
 			try {
-				await VideoConfManager.loadCapabilities();
+				await loadCapabilities();
 				closeUserCard();
 				dispatchPopup({ rid: room._id });
 			} catch (error: any) {
@@ -62,6 +67,7 @@ export const useVideoCallAction = (user: Pick<IUser, '_id' | 'username'>): UserI
 		dispatchPopup,
 		dispatchWarning,
 		closeUserCard,
+		loadCapabilities,
 	]);
 
 	return videoCallOption;

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -387,18 +387,14 @@ export class HomeContent {
 		return this.page.locator('#video-conf-root .rcx-button--primary.rcx-button >> text="Start call"');
 	}
 
-	getIncomingCallByName(name: string): Locator {
+	getVideoConfPopupByName(name: string): Locator {
 		return this.page.getByRole('dialog', { name });
 	}
 
 	get btnDeclineVideoCall(): Locator {
 		return this.page.locator('.rcx-button--secondary-danger.rcx-button >> text="Decline"');
 	}
 
-	videoConfRingCallText(text: string): Locator {
-		return this.page.locator(`#video-conf-root .rcx-box.rcx-box--full >> text="${text}"`);
-	}
-
 	get videoConfMessageBlock(): Locator {
 		return this.page.locator('.rcx-videoconf-message-block');
 	}

apps/meteor/tests/e2e/video-conference-ring.spec.ts

@@ -31,18 +31,25 @@ test.describe('video conference ringing', () => {
 		await auxContext.page.close();
 	});
 
-	test('should show call is ringing in direct', async () => {
+	test('should display call ringing in direct message', async () => {
 		await poHomeChannel.sidenav.openChat('user2');
 
 		await auxContext.poHomeChannel.sidenav.openChat('user1');
-		await poHomeChannel.content.btnCall.click();
-		await poHomeChannel.content.menuItemVideoCall.click();
-		await poHomeChannel.content.btnStartVideoCall.click();
+		await test.step('should user1 calls user2', async () => {
+			await poHomeChannel.content.btnCall.click();
+			await poHomeChannel.content.menuItemVideoCall.click();
+			await poHomeChannel.content.btnStartVideoCall.click();
 
-		await expect(poHomeChannel.content.videoConfRingCallText('Calling')).toBeVisible();
-		await expect(auxContext.poHomeChannel.content.videoConfRingCallText('Incoming call from')).toBeVisible();
+			await expect(poHomeChannel.content.getVideoConfPopupByName('Calling user2')).toBeVisible();
+			await expect(auxContext.poHomeChannel.content.getVideoConfPopupByName('Incoming call from user1')).toBeVisible();
 
-		await auxContext.poHomeChannel.content.btnDeclineVideoCall.click();
+			await auxContext.poHomeChannel.content.btnDeclineVideoCall.click();
+		});
+
+		await test.step('should user1 be able to call user2 again ', async () => {
+			await poHomeChannel.content.videoConfMessageBlock.last().getByRole('button', { name: 'Call again' }).click();
+			await expect(poHomeChannel.content.getVideoConfPopupByName('Start a call with user2')).toBeVisible();
+		});
 	});
 
 	const changeCallRingerVolumeFromHome = async (poHomeChannel: HomeChannel, poAccountProfile: AccountProfile, volume: string) => {
@@ -67,7 +74,7 @@ test.describe('video conference ringing', () => {
 		await poHomeChannel.content.menuItemVideoCall.click();
 		await poHomeChannel.content.btnStartVideoCall.click();
 
-		await expect(auxContext.poHomeChannel.content.getIncomingCallByName('user1')).toBeVisible();
+		await expect(auxContext.poHomeChannel.content.getVideoConfPopupByName('Incoming call from user1')).toBeVisible();
 
 		const dialToneVolume = await poHomeChannel.audioVideoConfDialtone.evaluate((el: HTMLAudioElement) => el.volume);
 		const ringToneVolume = await auxContext.poHomeChannel.audioVideoConfRingtone.evaluate((el: HTMLAudioElement) => el.volume);

packages/i18n/src/locales/en.i18n.json

@@ -826,6 +826,7 @@
   "Broadcasting_media_server_url": "Broadcasting Media Server URL",
   "Auto_Selection": "Auto Selection",
   "Browse_Files": "Browse Files",
+  "Calling__roomName__": "Calling {{roomName}}",
   "Calls_in_queue": "{{calls}} call in queue",
   "Bugsnag_api_key": "Bugsnag API Key",
   "Build_Environment": "Build Environment",