diff --git a/.changeset/chilly-schools-guess.md b/.changeset/chilly-schools-guess.md new file mode 100644 index 0000000000000..6c543162c9f1a --- /dev/null +++ b/.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 diff --git a/apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useVideoConfMenuOptions.tsx b/apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useVideoConfMenuOptions.tsx index aeae81dd8efe2..2281e02bbac71 100644 --- a/apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useVideoConfMenuOptions.tsx +++ b/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); diff --git a/apps/meteor/client/providers/VideoConfProvider.tsx b/apps/meteor/client/providers/VideoConfProvider.tsx index be6385a4a68fa..407a48cac2134 100644 --- a/apps/meteor/client/providers/VideoConfProvider.tsx +++ b/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()], diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx index 21ecbfa86e72a..b2a19fbe47fb5 100644 --- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx +++ b/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 ( - + {(showCam || showMic) && ( diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useVideoCallAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useVideoCallAction.tsx index 626effa7b81b7..8282f558caf3c 100644 --- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useVideoCallAction.tsx +++ b/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): 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): UserI } try { - await VideoConfManager.loadCapabilities(); + await loadCapabilities(); closeUserCard(); dispatchPopup({ rid: room._id }); } catch (error: any) { @@ -62,6 +67,7 @@ export const useVideoCallAction = (user: Pick): UserI dispatchPopup, dispatchWarning, closeUserCard, + loadCapabilities, ]); return videoCallOption; diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts index 8840e246d7b13..9fae2918d0660 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts @@ -387,7 +387,7 @@ 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 }); } @@ -395,10 +395,6 @@ export class HomeContent { 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'); } diff --git a/apps/meteor/tests/e2e/video-conference-ring.spec.ts b/apps/meteor/tests/e2e/video-conference-ring.spec.ts index cd117b9adb834..d5072b00b5cca 100644 --- a/apps/meteor/tests/e2e/video-conference-ring.spec.ts +++ b/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); diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index ae5c18e3a4b20..b47f90547c219 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/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",