refactor: Media Call client data structure and rendering

apps/meteor/client/providers/MediaCallProvider.tsx

@@ -1,5 +1,6 @@
+import { Emitter } from '@rocket.chat/emitter';
 import { usePermission } from '@rocket.chat/ui-contexts';
-import { MediaCallProvider as MediaCallProviderBase, MediaCallContext } from '@rocket.chat/ui-voip';
+import { MediaCallProvider as MediaCallProviderBase, MediaCallInstanceContext } from '@rocket.chat/ui-voip';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
@@ -13,17 +14,18 @@ const MediaCallProvider = ({ children }: { children: ReactNode }) => {
 
 	const unauthorizedContextValue = useMemo(
 		() => ({
-			state: 'unauthorized' as const,
-			onToggleWidget: undefined,
-			onEndCall: undefined,
-			peerInfo: undefined,
-			setOpenRoomId: undefined,
+			instance: undefined,
+			signalEmitter: new Emitter<any>(),
+			audioElement: undefined,
+			openRoomId: undefined,
+			setOpenRoomId: () => undefined,
+			getAutocompleteOptions: () => Promise.resolve([]),
 		}),
 		[],
 	);
 
 	if (!hasModule || (!canMakeInternalCall && !canMakeExternalCall)) {
-		return <MediaCallContext.Provider value={unauthorizedContextValue}>{children}</MediaCallContext.Provider>;
+		return <MediaCallInstanceContext.Provider value={unauthorizedContextValue}>{children}</MediaCallInstanceContext.Provider>;
 	}
 
 	return <MediaCallProviderBase>{children}</MediaCallProviderBase>;

apps/meteor/client/views/mediaCallHistory/CallHistoryRowExternalUser.tsx

@@ -1,6 +1,6 @@
 import { GenericMenu } from '@rocket.chat/ui-client';
 import type { CallHistoryTableExternalContact, CallHistoryTableRowProps } from '@rocket.chat/ui-voip';
-import { CallHistoryTableRow, useMediaCallContext, isCallingBlocked } from '@rocket.chat/ui-voip';
+import { CallHistoryTableRow, usePeekMediaSessionState, useWidgetExternalControls } from '@rocket.chat/ui-voip';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,27 +11,29 @@ type CallHistoryRowExternalUserProps = Omit<CallHistoryTableRowProps<CallHistory
 const CallHistoryRowExternalUser = ({ _id, contact, type, status, duration, timestamp, onClick }: CallHistoryRowExternalUserProps) => {
 	const { t } = useTranslation();
 
-	const { onToggleWidget, state } = useMediaCallContext();
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
 
 	const handleClick = useCallback(() => {
 		onClick(_id);
 	}, [onClick, _id]);
 
 	const actions = useMemo(() => {
-		if (state === 'unauthorized' || state === 'unlicensed' || !onToggleWidget) {
+		if (state === 'unavailable') {
 			return [];
 		}
+		const disabled = state !== 'available';
 		return [
 			{
 				id: 'voiceCall',
 				icon: 'phone',
 				content: t('Voice_call'),
-				disabled: isCallingBlocked(state),
-				tooltip: isCallingBlocked(state) ? t('Call_in_progress') : undefined,
-				onClick: () => onToggleWidget({ number: contact.number }),
+				disabled,
+				tooltip: disabled ? t('Call_in_progress') : undefined,
+				onClick: () => toggleWidget({ number: contact.number }),
 			} as const,
 		];
-	}, [contact, onToggleWidget, t, state]);
+	}, [contact, toggleWidget, t, state]);
 
 	return (
 		<CallHistoryTableRow

apps/meteor/client/views/mediaCallHistory/CallHistoryRowInternalUser.tsx

@@ -1,7 +1,7 @@
 import type { Keys as IconName } from '@rocket.chat/icons';
 import { GenericMenu } from '@rocket.chat/ui-client';
-import type { CallHistoryTableRowProps, CallHistoryTableInternalContact, MediaCallState } from '@rocket.chat/ui-voip';
-import { CallHistoryTableRow, useMediaCallContext, isCallingBlocked } from '@rocket.chat/ui-voip';
+import { CallHistoryTableRow, usePeekMediaSessionState } from '@rocket.chat/ui-voip';
+import type { CallHistoryTableRowProps, CallHistoryTableInternalContact, PeekMediaSessionStateReturn } from '@rocket.chat/ui-voip';
 import type { TFunction } from 'i18next';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,11 +37,11 @@ const i18nDictionary: Record<HistoryActions, string> = {
 	userInfo: 'User_info',
 } as const;
 
-const getItems = (actions: HistoryActionCallbacks, t: TFunction, state: MediaCallState) => {
+const getItems = (actions: HistoryActionCallbacks, t: TFunction, state: PeekMediaSessionStateReturn) => {
 	return (Object.entries(actions) as [HistoryActions, () => void][])
 		.filter(([_, callback]) => callback)
 		.map(([action, callback]) => {
-			const disabled = action === 'voiceCall' && isCallingBlocked(state);
+			const disabled = action === 'voiceCall' && state !== 'available';
 			return {
 				id: action,
 				icon: iconDictionary[action],
@@ -66,7 +66,7 @@ const CallHistoryRowInternalUser = ({
 	onClick,
 }: CallHistoryRowInternalUserProps) => {
 	const { t } = useTranslation();
-	const { state } = useMediaCallContext();
+	const state = usePeekMediaSessionState();
 	const actions = useMediaCallInternalHistoryActions({
 		contact: {
 			_id: contact._id,

apps/meteor/client/views/mediaCallHistory/MediaCallHistoryExternal.tsx

@@ -1,5 +1,5 @@
 import type { CallHistoryItem, IExternalMediaCallHistoryItem, IMediaCall, Serialized } from '@rocket.chat/core-typings';
-import { CallHistoryContextualBar, useMediaCallContext } from '@rocket.chat/ui-voip';
+import { CallHistoryContextualBar, useWidgetExternalControls, usePeekMediaSessionState } from '@rocket.chat/ui-voip';
 import { useMemo } from 'react';
 
 type ExternalCallEndpointData = Serialized<{
@@ -33,16 +33,17 @@ const MediaCallHistoryExternal = ({ data, onClose }: MediaCallHistoryExternalPro
 			state: data.item.state,
 		};
 	}, [data]);
-	const { onToggleWidget } = useMediaCallContext();
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
 
 	const actions = useMemo(() => {
-		if (!onToggleWidget) {
+		if (state !== 'available') {
 			return {};
 		}
 		return {
-			voiceCall: () => onToggleWidget(contact),
+			voiceCall: () => toggleWidget(contact),
 		};
-	}, [contact, onToggleWidget]);
+	}, [contact, state, toggleWidget]);
 
 	return <CallHistoryContextualBar onClose={onClose} actions={actions} contact={contact} data={historyData} />;
 };

apps/meteor/client/views/mediaCallHistory/useMediaCallInternalHistoryActions.ts

@@ -1,7 +1,7 @@
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useGoToDirectMessage } from '@rocket.chat/ui-client';
 import { useRouter, useUserAvatarPath } from '@rocket.chat/ui-contexts';
-import { useMediaCallContext } from '@rocket.chat/ui-voip';
+import { useWidgetExternalControls, usePeekMediaSessionState } from '@rocket.chat/ui-voip';
 import { useMemo } from 'react';
 
 export type InternalCallHistoryContact = {
@@ -28,17 +28,18 @@ export const useMediaCallInternalHistoryActions = ({
 	messageRoomId,
 	openUserInfo,
 }: UseMediaCallInternalHistoryActionsBaseOptions) => {
-	const { onToggleWidget, state } = useMediaCallContext();
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
 	const router = useRouter();
 
 	const getAvatarUrl = useUserAvatarPath();
 
 	const voiceCall = useEffectEvent(() => {
-		if (state === 'unauthorized' || state === 'unlicensed' || !onToggleWidget) {
+		if (state !== 'available') {
 			return;
 		}
 
-		onToggleWidget({
+		toggleWidget({
 			userId: contact._id,
 			displayName: contact.displayName ?? '',
 			username: contact.username,

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useUserMediaCallAction.spec.tsx

@@ -1,10 +1,12 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { useMediaCallContext } from '@rocket.chat/ui-voip';
 import { act, renderHook } from '@testing-library/react';
 
 import { useUserMediaCallAction } from './useUserMediaCallAction';
 import { createFakeRoom, createFakeSubscription, createFakeUser } from '../../../../../../tests/mocks/data';
 
+const usePeekMediaSessionStateMock = jest.fn().mockReturnValue('available');
+const toggleWidgetMock = jest.fn();
+
 jest.mock('@rocket.chat/ui-contexts', () => ({
 	...jest.requireActual('@rocket.chat/ui-contexts'),
 	useUserAvatarPath: jest.fn().mockReturnValue((_args: any) => 'avatar-url'),
@@ -13,14 +15,10 @@ jest.mock('@rocket.chat/ui-contexts', () => ({
 
 jest.mock('@rocket.chat/ui-voip', () => ({
 	...jest.requireActual('@rocket.chat/ui-voip'),
-	useMediaCallContext: jest.fn().mockImplementation(() => ({
-		state: 'closed',
-		onToggleWidget: jest.fn(),
-	})),
+	useWidgetExternalControls: jest.fn().mockReturnValue({ toggleWidget: (...args: any[]) => toggleWidgetMock(...args) }),
+	usePeekMediaSessionState: () => usePeekMediaSessionStateMock(),
 }));
 
-const useMediaCallContextMocked = jest.mocked(useMediaCallContext);
-
 describe('useUserMediaCallAction', () => {
 	const fakeUser = createFakeUser({ _id: 'own-uid' });
 	const mockRid = 'room-id';
@@ -29,6 +27,10 @@ describe('useUserMediaCallAction', () => {
 		jest.clearAllMocks();
 	});
 
+	beforeEach(() => {
+		usePeekMediaSessionStateMock.mockReturnValue('available');
+	});
+
 	it('should return undefined if room is federated', () => {
 		const { result } = renderHook(() => useUserMediaCallAction(fakeUser, mockRid), {
 			wrapper: mockAppRoot()
@@ -41,13 +43,7 @@ describe('useUserMediaCallAction', () => {
 	});
 
 	it('should return undefined if state is unauthorized', () => {
-		useMediaCallContextMocked.mockReturnValueOnce({
-			state: 'unauthorized',
-			onToggleWidget: undefined,
-			onEndCall: undefined,
-			peerInfo: undefined,
-			setOpenRoomId: undefined,
-		});
+		usePeekMediaSessionStateMock.mockReturnValueOnce('unavailable');
 
 		const { result } = renderHook(() => useUserMediaCallAction(fakeUser, mockRid), { wrapper: mockAppRoot().build() });
 		expect(result.current).toBeUndefined();
@@ -109,34 +105,21 @@ describe('useUserMediaCallAction', () => {
 	});
 
 	it('should call onClick handler correctly', () => {
-		const mockOnToggleWidget = jest.fn();
-		useMediaCallContextMocked.mockReturnValueOnce({
-			state: 'closed',
-			onToggleWidget: mockOnToggleWidget,
-			peerInfo: undefined,
-			onEndCall: () => undefined,
-			setOpenRoomId: () => undefined,
-		});
+		usePeekMediaSessionStateMock.mockReturnValueOnce('available');
 
 		const { result } = renderHook(() => useUserMediaCallAction(fakeUser, mockRid));
 
 		act(() => result.current?.onClick());
 
-		expect(mockOnToggleWidget).toHaveBeenCalledWith({
+		expect(toggleWidgetMock).toHaveBeenCalledWith({
 			userId: fakeUser._id,
 			displayName: fakeUser.name,
 			avatarUrl: 'avatar-url',
 		});
 	});
 
 	it('should be disabled if state is not closed, new, or unlicensed', () => {
-		useMediaCallContextMocked.mockReturnValueOnce({
-			state: 'calling',
-			onToggleWidget: jest.fn(),
-			peerInfo: undefined,
-			onEndCall: () => undefined,
-			setOpenRoomId: () => undefined,
-		});
+		usePeekMediaSessionStateMock.mockReturnValueOnce('calling');
 
 		const { result } = renderHook(() => useUserMediaCallAction(fakeUser, mockRid));
 

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

@@ -1,7 +1,7 @@
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import { useUserAvatarPath, useUserId, useUserSubscription, useUserCard, useUserRoom } from '@rocket.chat/ui-contexts';
-import { useMediaCallContext } from '@rocket.chat/ui-voip';
+import { usePeekMediaSessionState, useWidgetExternalControls } from '@rocket.chat/ui-voip';
 import { useTranslation } from 'react-i18next';
 
 import type { UserInfoAction } from '../useUserInfoActions';
@@ -10,7 +10,8 @@ export const useUserMediaCallAction = (user: Pick<IUser, '_id' | 'username' | 'n
 	const { t } = useTranslation();
 	const ownUserId = useUserId();
 	const { closeUserCard } = useUserCard();
-	const { state, onToggleWidget } = useMediaCallContext();
+	const state = usePeekMediaSessionState();
+	const { toggleWidget } = useWidgetExternalControls();
 	const getAvatarUrl = useUserAvatarPath();
 
 	const currentSubscription = useUserSubscription(rid);
@@ -22,15 +23,15 @@ export const useUserMediaCallAction = (user: Pick<IUser, '_id' | 'username' | 'n
 		return undefined;
 	}
 
-	if (state === 'unauthorized') {
+	if (state === 'unavailable') {
 		return undefined;
 	}
 
 	if (blocked) {
 		return undefined;
 	}
 
-	const disabled = !['closed', 'new', 'unlicensed'].includes(state);
+	const disabled = state !== 'available';
 
 	if (user._id === ownUserId) {
 		return undefined;
@@ -44,7 +45,7 @@ export const useUserMediaCallAction = (user: Pick<IUser, '_id' | 'username' | 'n
 		icon: 'phone',
 		onClick: () => {
 			closeUserCard();
-			onToggleWidget({
+			toggleWidget({
 				userId: user._id,
 				displayName: user.name || user.username || '',
 				avatarUrl,

packages/ui-voip/src/components/DevicePicker.tsx

@@ -8,7 +8,7 @@ import { forwardRef, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ActionButton } from '.';
-import { useMediaCallContext } from '../context';
+import { useMediaCallView } from '../context/MediaCallViewContext';
 import { useDevicePermissionPrompt2, stopTracks } from '../hooks/useDevicePermissionPrompt';
 
 type DevicePickerButtonProps = {
@@ -39,7 +39,7 @@ const getDefaultDeviceItem = (label: string, type: 'input' | 'output') => ({
 const DevicePicker = ({ secondary = false }: { secondary?: boolean }) => {
 	const { t } = useTranslation();
 
-	const { onDeviceChange } = useMediaCallContext();
+	const { onDeviceChange } = useMediaCallView();
 
 	const availableDevices = useAvailableDevices();
 	const selectedAudioDevices = useSelectedDevices();

packages/ui-voip/src/components/Keypad/Keypad.spec.tsx

@@ -0,0 +1,21 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './Keypad.stories';
+
+const testCases = Object.values(composeStories(stories))
+	.filter((Story) => !Story.tags?.includes('skip'))
+	.map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />);
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

packages/ui-voip/src/components/Keypad/Keypad.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import Keypad from './Keypad';
-import { useTonePlayer } from '../../context/useTonePlayer';
+import { useTonePlayer } from '../../hooks/useTonePlayer';
 
 export default {
 	title: 'V2/Components/Keypad',
@@ -13,3 +13,5 @@ export const KeypadStoryWithTone: StoryFn<typeof Keypad> = () => {
 	const playTone = useTonePlayer();
 	return <Keypad onKeyPress={(key) => playTone(key as any)} />;
 };
+
+KeypadStoryWithTone.tags = ['skip'];