feat: Media Call Client

.changeset/sweet-ghosts-teach.md

@@ -0,0 +1,7 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+"@rocket.chat/ui-voip": minor
+---
+
+Introduces a new voice call architecture along with a new and improved call widget experience.

apps/meteor/client/NavBarV2/NavBarVoipGroup/NavBarVoipGroup.tsx

@@ -1,25 +1,19 @@
-import { NavBarDivider, NavBarGroup } from '@rocket.chat/fuselage';
-import { useVoipState } from '@rocket.chat/ui-voip';
+import { NavBarDivider, NavBarGroup, NavBarItem } from '@rocket.chat/fuselage';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
 import { useTranslation } from 'react-i18next';
 
-import NavBarItemVoipDialer from './NavBarItemVoipDialer';
-import NavBarItemVoipToggler from './NavBarItemVoipToggler';
-import { useIsCallEnabled } from '../../contexts/CallContext';
-
 const NavBarVoipGroup = () => {
 	const { t } = useTranslation();
-	const { isEnabled: showVoip } = useVoipState();
-	const isCallEnabled = useIsCallEnabled();
 
-	if (!showVoip) {
+	const callAction = useMediaCallAction();
+	if (!callAction) {
 		return null;
 	}
 
 	return (
 		<>
 			<NavBarGroup aria-label={t('Voice_Call')}>
-				<NavBarItemVoipDialer primary={isCallEnabled} />
-				<NavBarItemVoipToggler />
+				<NavBarItem title={callAction.title} icon={callAction.icon} onClick={() => callAction.action()} />;
 			</NavBarGroup>
 			<NavBarDivider />
 		</>

apps/meteor/client/hooks/roomActions/useMediaCallRoomAction.ts

@@ -0,0 +1,71 @@
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useUserAvatarPath, useUserId } from '@rocket.chat/ui-contexts';
+import type { PeerInfo } from '@rocket.chat/ui-voip';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
+import { useMemo } from 'react';
+
+import { useRoom, useRoomSubscription } from '../../views/room/contexts/RoomContext';
+import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';
+import { useUserInfoQuery } from '../useUserInfoQuery';
+
+const getPeerId = (uids: string[], ownUserId: string | null) => {
+	if (!ownUserId) {
+		return undefined;
+	}
+
+	const otherIds = uids.filter((uid) => uid !== ownUserId);
+
+	// If no id, it's an one user DM. If more than one, it's a group dm. Both are not supported as of now.
+	if (otherIds.length === 0 || otherIds.length > 1) {
+		return undefined;
+	}
+
+	return otherIds[0];
+};
+
+export const useMediaCallRoomAction = () => {
+	const { uids = [] } = useRoom();
+	const subscription = useRoomSubscription();
+	const ownUserId = useUserId();
+
+	const getAvatarUrl = useUserAvatarPath();
+
+	const peerId = getPeerId(uids, ownUserId);
+
+	const { data } = useUserInfoQuery({ userId: peerId as string }, { enabled: !!peerId });
+
+	const peerInfo = useMemo<PeerInfo | undefined>(() => {
+		if (!data?.user?._id) {
+			return undefined;
+		}
+
+		return {
+			userId: data.user._id,
+			displayName: data.user.name || data.user.username || '',
+			avatarUrl: data.user.username
+				? getAvatarUrl({ username: data.user.username, etag: data.user.avatarETag })
+				: getAvatarUrl({ userId: data.user._id }),
+		};
+	}, [data, getAvatarUrl]);
+
+	const callAction = useMediaCallAction(peerInfo);
+
+	const blocked = subscription?.blocked || subscription?.blocker;
+
+	return useMemo((): RoomToolboxActionConfig | undefined => {
+		if (!peerId || !callAction || blocked) {
+			return undefined;
+		}
+
+		const { action, title, icon } = callAction;
+
+		return {
+			id: 'start-voice-call',
+			title: title as TranslationKey,
+			icon,
+			featured: true,
+			action: () => action(),
+			groups: ['direct'] as const,
+		};
+	}, [peerId, callAction, blocked]);
+};

apps/meteor/client/providers/MediaCallProvider.tsx

@@ -0,0 +1,48 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { MediaCallProvider as MediaCallProviderBase, MediaCallContext } from '@rocket.chat/ui-voip';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import { useHasLicenseModule } from '../hooks/useHasLicenseModule';
+import { useVoipWarningModal } from '../hooks/useVoipWarningModal';
+
+const MediaCallProvider = ({ children }: { children: ReactNode }) => {
+	const dispatchWarning = useVoipWarningModal();
+
+	const canMakeInternalCall = usePermission('allow-internal-voice-calls');
+	const canMakeExternalCall = usePermission('allow-external-voice-calls');
+
+	const hasModule = useHasLicenseModule('teams-voip');
+
+	const unauthorizedContextValue = useMemo(
+		() => ({
+			state: 'unauthorized' as const,
+			onToggleWidget: undefined,
+			onEndCall: undefined,
+			peerInfo: undefined,
+		}),
+		[],
+	);
+
+	const unlicensedContextValue = useMemo(
+		() => ({
+			state: 'unlicensed' as const,
+			onToggleWidget: dispatchWarning,
+			onEndCall: undefined,
+			peerInfo: undefined,
+		}),
+		[dispatchWarning],
+	);
+
+	if (!hasModule) {
+		return <MediaCallContext.Provider value={unlicensedContextValue}>{children}</MediaCallContext.Provider>;
+	}
+
+	if (!canMakeInternalCall && !canMakeExternalCall) {
+		return <MediaCallContext.Provider value={unauthorizedContextValue}>{children}</MediaCallContext.Provider>;
+	}
+
+	return <MediaCallProviderBase>{children}</MediaCallProviderBase>;
+};
+
+export default MediaCallProvider;

apps/meteor/client/providers/MeteorProvider.tsx

@@ -1,5 +1,4 @@
 import { ModalProvider } from '@rocket.chat/ui-client';
-import { VoipProvider } from '@rocket.chat/ui-voip';
 import type { ReactNode } from 'react';
 
 import ActionManagerProvider from './ActionManagerProvider';
@@ -11,6 +10,7 @@ import CustomSoundProvider from './CustomSoundProvider';
 import { DeviceProvider } from './DeviceProvider/DeviceProvider';
 import EmojiPickerProvider from './EmojiPickerProvider';
 import LayoutProvider from './LayoutProvider';
+import MediaCallProvider from './MediaCallProvider';
 import OmnichannelProvider from './OmnichannelProvider';
 import RouterProvider from './RouterProvider';
 import ServerProvider from './ServerProvider';
@@ -49,11 +49,11 @@ const MeteorProvider = ({ children }: MeteorProviderProps) => (
 																		<UserPresenceProvider>
 																			<ActionManagerProvider>
 																				<VideoConfProvider>
-																					<VoipProvider>
+																					<MediaCallProvider>
 																						<OmnichannelCallProvider>
 																							<OmnichannelProvider>{children}</OmnichannelProvider>
 																						</OmnichannelCallProvider>
-																					</VoipProvider>
+																					</MediaCallProvider>
 																				</VideoConfProvider>
 																			</ActionManagerProvider>
 																		</UserPresenceProvider>

apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx

@@ -2,19 +2,20 @@ import type { IUser } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useLogout } from '@rocket.chat/ui-contexts';
+import { useMediaCallAction } from '@rocket.chat/ui-voip';
 import { useTranslation } from 'react-i18next';
 
 import UserMenuHeader from '../UserMenuHeader';
 import { useAccountItems } from './useAccountItems';
 import { useStatusItems } from './useStatusItems';
-import { useVoipItemsSection } from './useVoipItemsSection';
 
 export const useUserMenu = (user: IUser) => {
 	const { t } = useTranslation();
 
 	const statusItems = useStatusItems();
 	const accountItems = useAccountItems();
-	const voipItemsSection = useVoipItemsSection();
+
+	const mediaCallAction = useMediaCallAction();
 
 	const logout = useLogout();
 	const handleLogout = useEffectEvent(() => {
@@ -28,6 +29,15 @@ export const useUserMenu = (user: IUser) => {
 		onClick: handleLogout,
 	};
 
+	const mediaCallItem = mediaCallAction
+		? {
+				id: 'voice-call',
+				icon: mediaCallAction.icon,
+				content: mediaCallAction.title,
+				onClick: () => mediaCallAction.action(),
+			}
+		: undefined;
+
 	return [
 		{
 			title: <UserMenuHeader user={user} />,
@@ -37,7 +47,11 @@ export const useUserMenu = (user: IUser) => {
 			title: t('Status'),
 			items: statusItems,
 		},
-		voipItemsSection,
+		mediaCallItem
+			? {
+					items: [mediaCallItem],
+				}
+			: undefined,
 		{
 			title: t('Account'),
 			items: accountItems,

apps/meteor/client/ui.ts

@@ -15,6 +15,7 @@ import { useE2EERoomAction } from './hooks/roomActions/useE2EERoomAction';
 import { useExportMessagesRoomAction } from './hooks/roomActions/useExportMessagesRoomAction';
 import { useGameCenterRoomAction } from './hooks/roomActions/useGameCenterRoomAction';
 import { useKeyboardShortcutListRoomAction } from './hooks/roomActions/useKeyboardShortcutListRoomAction';
+import { useMediaCallRoomAction } from './hooks/roomActions/useMediaCallRoomAction';
 import { useMembersListRoomAction } from './hooks/roomActions/useMembersListRoomAction';
 import { useMentionsRoomAction } from './hooks/roomActions/useMentionsRoomAction';
 import { useOTRRoomAction } from './hooks/roomActions/useOTRRoomAction';
@@ -33,7 +34,6 @@ import { useUserInfoGroupRoomAction } from './hooks/roomActions/useUserInfoGroup
 import { useUserInfoRoomAction } from './hooks/roomActions/useUserInfoRoomAction';
 import { useVideoCallRoomAction } from './hooks/roomActions/useVideoCallRoomAction';
 import { useVoIPRoomInfoRoomAction } from './hooks/roomActions/useVoIPRoomInfoRoomAction';
-import { useVoiceCallRoomAction } from './hooks/roomActions/useVoiceCallRoomAction';
 import { useWebRTCVideoRoomAction } from './hooks/roomActions/useWebRTCVideoRoomAction';
 import type { RoomToolboxActionConfig } from './views/room/contexts/RoomToolboxContext';
 import type { QuickActionsActionConfig } from './views/room/lib/quickActions';
@@ -70,7 +70,7 @@ export const roomActionHooks = [
 	useWebRTCVideoRoomAction,
 	useAppsRoomStarActions,
 	useVideoCallRoomAction,
-	useVoiceCallRoomAction,
+	useMediaCallRoomAction,
 ] satisfies (() => RoomToolboxActionConfig | undefined)[];
 
 export const quickActionHooks = [

apps/meteor/client/views/room/UserCard/UserCardWithData.tsx

@@ -90,8 +90,8 @@ const UserCardWithData = ({ username, rid, onOpenUserInfo, onClose }: UserCardWi
 	}, [menuOptions, onClose, t]);
 
 	const actions = useMemo(() => {
-		const mapAction = ([key, { content, title, icon, onClick }]: [string, UserInfoAction]): ReactElement => (
-			<UserCardAction key={key} label={content || title} aria-label={content || title} onClick={onClick} icon={icon!} />
+		const mapAction = ([key, { content, title, icon, onClick, disabled }]: [string, UserInfoAction]): ReactElement => (
+			<UserCardAction key={key} label={content || title} aria-label={content || title} onClick={onClick} icon={icon!} disabled={disabled} />
 		);
 
 		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useUserMediaCallAction.ts

@@ -0,0 +1,50 @@
+import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import { useUserAvatarPath, useUserId, useUserSubscription } from '@rocket.chat/ui-contexts';
+import { useMediaCallContext } from '@rocket.chat/ui-voip';
+import { useTranslation } from 'react-i18next';
+
+import { useUserCard } from '../../../contexts/UserCardContext';
+import type { UserInfoAction } from '../useUserInfoActions';
+
+export const useUserMediaCallAction = (user: Pick<IUser, '_id' | 'username' | 'name'>, rid: IRoom['_id']): UserInfoAction | undefined => {
+	const { t } = useTranslation();
+	const ownUserId = useUserId();
+	const { closeUserCard } = useUserCard();
+	const { state, onToggleWidget } = useMediaCallContext();
+	const getAvatarUrl = useUserAvatarPath();
+
+	const currentSubscription = useUserSubscription(rid);
+
+	const blocked = currentSubscription?.blocked || currentSubscription?.blocker;
+
+	if (state === 'unauthorized') {
+		return undefined;
+	}
+
+	if (blocked) {
+		return undefined;
+	}
+
+	const disabled = !['closed', 'new', 'unlicensed'].includes(state);
+
+	if (user._id === ownUserId) {
+		return undefined;
+	}
+
+	const avatarUrl = user.username ? getAvatarUrl({ username: user.username }) : getAvatarUrl({ userId: user._id });
+
+	return {
+		type: 'communication',
+		title: t('Voice_call__user_', { user: user.name || user.username || '' }),
+		icon: 'phone',
+		onClick: () => {
+			closeUserCard();
+			onToggleWidget({
+				userId: user._id,
+				displayName: user.name || user.username || '',
+				avatarUrl,
+			});
+		},
+		disabled,
+	};
+};

apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts

@@ -16,8 +16,8 @@ import { useMuteUserAction } from './actions/useMuteUserAction';
 import { useRedirectModerationConsole } from './actions/useRedirectModerationConsole';
 import { useRemoveUserAction } from './actions/useRemoveUserAction';
 import { useReportUser } from './actions/useReportUser';
+import { useUserMediaCallAction } from './actions/useUserMediaCallAction';
 import { useVideoCallAction } from './actions/useVideoCallAction';
-import { useVoipCallAction } from './actions/useVoipCallAction';
 import { useEmbeddedLayout } from '../../../../hooks/useEmbeddedLayout';
 
 export type UserInfoActionType = 'communication' | 'privileges' | 'management' | 'moderation';
@@ -29,6 +29,7 @@ type UserInfoActionWithOnlyIcon = {
 	title: string;
 	variant?: 'danger';
 	onClick: () => void;
+	disabled?: boolean;
 };
 
 type UserInfoActionWithContent = {
@@ -38,6 +39,7 @@ type UserInfoActionWithContent = {
 	title?: string;
 	variant?: 'danger';
 	onClick: () => void;
+	disabled?: boolean;
 };
 
 export type UserInfoAction = UserInfoActionWithContent | UserInfoActionWithOnlyIcon;
@@ -74,16 +76,16 @@ export const useUserInfoActions = ({
 	const muteUser = useMuteUserAction(user, rid);
 	const removeUser = useRemoveUserAction(user, rid, reload);
 	const videoCall = useVideoCallAction(user);
-	const voipCall = useVoipCallAction(user);
 	const reportUserOption = useReportUser(user);
 	const isLayoutEmbedded = useEmbeddedLayout();
 	const { userToolbox: hiddenActions } = useLayoutHiddenActions();
+	const userMediaCall = useUserMediaCallAction(user, rid);
 
 	const userinfoActions = useMemo(
 		() => ({
 			...(openDirectMessage && !isLayoutEmbedded && { openDirectMessage }),
 			...(videoCall && { videoCall }),
-			...(voipCall && { voipCall }),
+			...(userMediaCall && { userMediaCall }),
 			...(!isMember && addUser && { addUser }),
 			...(isMember && changeOwner && { changeOwner }),
 			...(isMember && changeLeader && { changeLeader }),
@@ -99,7 +101,7 @@ export const useUserInfoActions = ({
 			openDirectMessage,
 			isLayoutEmbedded,
 			videoCall,
-			voipCall,
+			userMediaCall,
 			changeOwner,
 			changeLeader,
 			changeModerator,