feat: Media Call UI (RocketChat#36594)

Author: gabriellsh

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

@@ -1953,6 +1953,7 @@
   "Enter_the_code_provided_by_your_authentication_app_to_continue": "Enter the code provided by your authentication app to continue. You can also use one of your backup codes.",
   "Enter_the_code_we_just_emailed_you": "Enter the code we just emailed you.",
   "Enter_to": "Enter to",
+  "Enter_username_or_number": "Enter username or number",
   "Enter_your_E2E_password": "Enter your E2E password",
   "Enter_your_E2E_password_to_access": "Enter your end-to-end encryption password to access",
   "Enter_your_password_to_delete_your_account": "Enter your password to delete your account. This cannot be undone.",

packages/ui-voip/src/v2/MediaCallContext.ts

@@ -0,0 +1,147 @@
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { createContext, useContext, useState } from 'react';
+
+import type { PeerAutocompleteOptions } from './components';
+
+type InternalPeerInfo = {
+	name: string;
+	avatarUrl: string;
+	identifier: string;
+};
+
+type ExternalPeerInfo = {
+	number: string;
+};
+
+export type PeerInfo = InternalPeerInfo | ExternalPeerInfo;
+
+export type State = 'closed' | 'new' | 'calling' | 'ringing' | 'ongoing';
+
+type MediaCallContextType = {
+	state: State;
+
+	peerInfo: PeerInfo | undefined;
+
+	muted: boolean;
+	held: boolean;
+	onMute: () => void;
+	onHold: () => void;
+
+	onDeviceChange: (device: string) => void;
+	onForward: () => void;
+	onTone: (tone: string) => void;
+
+	// onCall and onEndCall are used to start/accept and reject/end a call
+	onEndCall: () => void;
+	// TODO: Not sure if we need to pass the peerId to the callback, or if it should be a state stored somewhere else in the context.
+	onCall: (peerId?: string) => void;
+
+	onToggleWidget: () => void;
+
+	getAutocompleteOptions: (filter: string) => Promise<PeerAutocompleteOptions[]>;
+	// This is used to get the peer info from the server in case it's not available in the autocomplete options.
+	getPeerInfo: (id: string) => Promise<PeerInfo | undefined>;
+};
+
+const MediaCallContext = createContext<MediaCallContextType>({
+	state: 'closed',
+
+	peerInfo: undefined,
+
+	muted: false,
+	held: false,
+	onMute: () => undefined,
+	onHold: () => undefined,
+
+	onDeviceChange: () => undefined,
+	onForward: () => undefined,
+	onTone: () => undefined,
+
+	onEndCall: () => undefined,
+	onCall: () => undefined,
+
+	onToggleWidget: () => undefined,
+
+	getAutocompleteOptions: () => Promise.resolve([]),
+	getPeerInfo: () => Promise.resolve(undefined),
+});
+
+export const useMediaCallContext = (): MediaCallContextType => {
+	return useContext(MediaCallContext);
+};
+
+const PREFIX_FIRST_OPTION = 'rcx-first-option-';
+
+export const isFirstPeerAutocompleteOption = (value: string) => {
+	return value.startsWith(PREFIX_FIRST_OPTION);
+};
+
+const getFirstOption = (filter: string): PeerAutocompleteOptions => {
+	return { value: `${PREFIX_FIRST_OPTION}${filter}`, label: filter, avatarUrl: '' };
+};
+
+export const usePeerAutocomplete = () => {
+	const { getAutocompleteOptions, getPeerInfo } = useMediaCallContext();
+	const [selected, setSelected] = useState<string | undefined>();
+	const [filter, setFilter] = useState('');
+
+	const debouncedFilter = useDebouncedValue(filter, 400);
+
+	const { data: options } = useQuery({
+		queryKey: ['mediaCall/peerAutocomplete', debouncedFilter],
+		queryFn: async () => {
+			const options = await getAutocompleteOptions(debouncedFilter);
+
+			if (debouncedFilter.length > 0) {
+				return [getFirstOption(debouncedFilter), ...options];
+			}
+
+			return options;
+		},
+		placeholderData: keepPreviousData,
+		initialData: [],
+	});
+
+	const { data: peerInfo } = useQuery({
+		queryKey: ['mediaCall/peerInfo', selected],
+		queryFn: async () => {
+			if (!selected) {
+				return undefined;
+			}
+
+			const localInfo = options.find((option) => option.value === selected);
+
+			if (localInfo) {
+				return {
+					name: localInfo.label,
+					avatarUrl: localInfo.avatarUrl || '',
+					identifier: localInfo.value,
+				};
+			}
+
+			const peerInfo = await getPeerInfo(selected);
+
+			return peerInfo;
+		},
+		enabled: !!selected,
+	});
+
+	return {
+		options,
+		peerInfo,
+		onChangeFilter: setFilter,
+		onChangeValue: (value: string | string[]) => {
+			if (Array.isArray(value)) {
+				return;
+			}
+
+			setSelected(value);
+		},
+		value: selected,
+		filter,
+		onKeypadPress: (key: string) => setFilter((filter) => filter + key),
+	};
+};
+
+export default MediaCallContext;

packages/ui-voip/src/v2/MediaCallWidget.spec.tsx

@@ -0,0 +1,20 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './MediaCallWidget.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />, { wrapper: mockAppRoot().build() });
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

packages/ui-voip/src/v2/MediaCallWidget.stories.tsx

@@ -0,0 +1,76 @@
+import { Button } from '@rocket.chat/fuselage';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import { useMediaCallContext } from './MediaCallContext';
+import MediaCallWidget from './MediaCallWidget';
+import MediaCallProviderMock from './MockedMediaCallProvider';
+
+const mockedContexts = mockAppRoot()
+	.withTranslations('en', 'core', {
+		New_Call: 'New Call',
+		Incoming_call: 'Incoming Call',
+		Enter_username_or_number: 'Enter username or number',
+		Call: 'Call',
+		Calling: 'Calling',
+		Cancel: 'Cancel',
+	})
+	.buildStoryDecorator();
+
+const meta = {
+	title: 'V2/MediaCallWidget',
+	component: MediaCallWidget,
+	args: {
+		state: 'closed',
+	},
+	decorators: [
+		mockedContexts,
+		(Story, options) => (
+			<MediaCallProviderMock {...options.args}>
+				<Story />
+			</MediaCallProviderMock>
+		),
+	],
+} satisfies Meta<typeof MediaCallWidget>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MediaCallWidgetManualTesting: StoryFn<typeof MediaCallWidget> = () => {
+	const { onToggleWidget, onCall, state } = useMediaCallContext();
+	return (
+		<>
+			<Button onClick={onToggleWidget} disabled={state !== 'new' && state !== 'closed'} mie={8}>
+				Toggle widget
+			</Button>
+			<Button onClick={() => onCall()} disabled={state !== 'closed'}>
+				Receive call
+			</Button>
+			<MediaCallWidget />
+		</>
+	);
+};
+
+export const NewCall: Story = {
+	args: {
+		state: 'new',
+	},
+};
+
+export const IncomingCall: Story = {
+	args: {
+		state: 'ringing',
+	},
+};
+
+export const Calling: Story = {
+	args: {
+		state: 'calling',
+	},
+};
+
+export const OngoingCall: Story = {
+	args: {
+		state: 'ongoing',
+	},
+};

packages/ui-voip/src/v2/MediaCallWidget.tsx

@@ -0,0 +1,22 @@
+import { useMediaCallContext } from './MediaCallContext';
+import { OngoingCall, NewCall, IncomingCall, OutgoingCall } from './views';
+
+const MediaCallWidget = () => {
+	const { state } = useMediaCallContext();
+
+	switch (state) {
+		case 'ongoing':
+			return <OngoingCall />;
+		case 'new':
+			return <NewCall />;
+		case 'ringing':
+			return <IncomingCall />;
+		case 'calling':
+			return <OutgoingCall />;
+		case 'closed':
+		default:
+			return null;
+	}
+};
+
+export default MediaCallWidget;

packages/ui-voip/src/v2/MockedMediaCallProvider.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import MediaCallContext from './MediaCallContext';
+import type { State, PeerInfo } from './MediaCallContext';
+
+const avatarUrl = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z`;
+const myData: any[] = Array.from({ length: 100 }, (_, i) => ({ value: `user-${i}`, label: `User ${i}`, identifier: `000${i}`, avatarUrl }));
+
+const MediaCallProviderMock = ({ children, state = 'closed' }: { children: React.ReactNode; state?: State }) => {
+	const [peerInfo, setPeerInfo] = useState<PeerInfo | undefined>({
+		name: 'John Doe',
+		avatarUrl,
+		identifier: '1234567890',
+	});
+	const [widgetState, setWidgetState] = useState<State>(state);
+	const [muted, setMuted] = useState(false);
+	const [held, setHeld] = useState(false);
+
+	const onMute = () => setMuted((prev) => !prev);
+	const onHold = () => setHeld((prev) => !prev);
+
+	const clearState = () => {
+		setMuted(false);
+		setHeld(false);
+	};
+
+	const onDeviceChange = (device: string) => {
+		console.log('device', device);
+	};
+
+	const onForward = () => {
+		console.log('forward');
+		clearState();
+		setWidgetState('closed');
+	};
+
+	const onTone = (tone: string) => {
+		console.log('tone', tone);
+	};
+
+	const onEndCall = () => {
+		clearState();
+		setWidgetState('closed');
+	};
+
+	const getAutocompleteOptions = (filter: string) =>
+		Promise.resolve(myData.filter((item) => item.label.toLowerCase().includes(filter.toLowerCase())));
+
+	const getPeerInfo = (id: string) => {
+		const peerInfo = myData.find((item) => item.value === id);
+		if (!peerInfo) {
+			return Promise.resolve(undefined);
+		}
+
+		return Promise.resolve({
+			name: peerInfo.label,
+			avatarUrl: peerInfo.avatarUrl,
+			identifier: peerInfo.value,
+		});
+	};
+
+	const onCall = async (id?: string) => {
+		if (id) {
+			setPeerInfo(await getPeerInfo(id));
+		}
+
+		switch (widgetState) {
+			case 'closed':
+				setWidgetState('ringing');
+				break;
+			case 'ringing':
+				setWidgetState('ongoing');
+				break;
+			case 'new':
+				setWidgetState('calling');
+				setTimeout(() => {
+					setWidgetState('ongoing');
+				}, 1000);
+				break;
+			case 'calling':
+				setWidgetState('closed');
+				break;
+		}
+	};
+
+	const onToggleWidget = () => {
+		switch (widgetState) {
+			case 'closed':
+				setWidgetState('new');
+				break;
+			case 'new':
+				setWidgetState('closed');
+				break;
+		}
+	};
+
+	const contextValue = {
+		state: widgetState,
+		peerInfo,
+		muted,
+		held,
+		onMute,
+		onHold,
+		onDeviceChange,
+		onForward,
+		onTone,
+		onEndCall,
+		onCall,
+		onToggleWidget,
+		getAutocompleteOptions,
+		getPeerInfo,
+	};
+
+	return <MediaCallContext.Provider value={contextValue}>{children}</MediaCallContext.Provider>;
+};
+
+export default MediaCallProviderMock;