feat: Media call notifications on desktop app (#37492)

Co-authored-by: Jean Brito <[email protected]>
Co-authored-by: Tasso Evangelista <[email protected]>

Author: 3 people

.changeset/sixty-numbers-tan.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/i18n": minor
+"@rocket.chat/ui-voip": minor
+---
+
+Introduces native desktop notifications for voice calls when using the desktop app.

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

@@ -2560,6 +2560,7 @@
   "Incoming_Livechats": "Queued chats",
   "Incoming_WebHook": "Incoming WebHook",
   "Incoming_call": "Incoming call",
+  "Incoming_call_ellipsis": "Incoming call...",
   "Incoming_call_from": "Incoming call from",
   "Incoming_call_from__roomName__": "Incoming call from {{roomName}}",
   "Incoming_call_transfer": "Incoming call transfer",

packages/ui-voip/package.json

@@ -19,6 +19,7 @@
 		"typecheck": "tsc --noEmit --skipLibCheck -p tsconfig.json"
 	},
 	"dependencies": {
+		"@rocket.chat/desktop-api": "workspace:^",
 		"@rocket.chat/emitter": "~0.31.25",
 		"@rocket.chat/media-signaling": "workspace:~",
 		"@tanstack/react-query": "~5.65.1",

packages/ui-voip/src/global.d.ts

@@ -0,0 +1,7 @@
+import type { IRocketChatDesktop } from '@rocket.chat/desktop-api';
+
+declare global {
+	interface Window {
+		RocketChatDesktop?: IRocketChatDesktop;
+	}
+}

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

@@ -11,21 +11,26 @@ import {
 	useToastMessageDispatch,
 	useSetting,
 } from '@rocket.chat/ui-contexts';
-import { useCallback, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
 import MediaCallContext, { PeerInfo } from './MediaCallContext';
 import MediaCallWidget from './MediaCallWidget';
 import TransferModal from './TransferModal';
 import { useCallSounds } from './useCallSounds';
+import { useDesktopNotifications } from './useDesktopNotifications';
 import { getExtensionFromPeerInfo, useMediaSession } from './useMediaSession';
 import { useMediaSessionInstance } from './useMediaSessionInstance';
 import useMediaStream from './useMediaStream';
 import { isValidTone, useTonePlayer } from './useTonePlayer';
 import { stopTracks, useDevicePermissionPrompt2, PermissionRequestCancelledCallRejectedError } from '../hooks/useDevicePermissionPrompt';
 
-const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
+type MediaCallProviderProps = {
+	children: ReactNode;
+};
+
+const MediaCallProvider = ({ children }: MediaCallProviderProps) => {
 	const user = useUser();
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -37,6 +42,8 @@ const MediaCallProvider = ({ children }: { children: React.ReactNode }) => {
 	const instance = useMediaSessionInstance(userId ?? undefined);
 	const session = useMediaSession(instance);
 
+	useDesktopNotifications(session);
+
 	const [remoteStreamRefCallback, audioElement] = useMediaStream(instance);
 
 	const setOutputMediaDevice = useSetOutputMediaDevice();

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

@@ -4,7 +4,7 @@ import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import { useMediaCallContext } from './MediaCallContext';
 import MediaCallWidget from './MediaCallWidget';
-import MediaCallProviderMock from './MockedMediaCallProvider';
+import MockedMediaCallProvider from './MockedMediaCallProvider';
 
 const mockedContexts = mockAppRoot()
 	.withTranslations('en', 'core', {
@@ -26,9 +26,9 @@ const meta = {
 	decorators: [
 		mockedContexts,
 		(Story, options) => (
-			<MediaCallProviderMock {...options.args}>
+			<MockedMediaCallProvider {...options.args}>
 				<Story />
-			</MediaCallProviderMock>
+			</MockedMediaCallProvider>
 		),
 	],
 } satisfies Meta<typeof MediaCallWidget>;

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

@@ -1,29 +1,31 @@
 import { UserStatus } from '@rocket.chat/core-typings';
-import { useState } from 'react';
+import { ReactNode, 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 = ({
+type MockedMediaCallProviderProps = {
+	children: ReactNode;
+	state?: State;
+	transferredBy?: string;
+	remoteMuted?: boolean;
+	remoteHeld?: boolean;
+	muted?: boolean;
+	held?: boolean;
+};
+
+const MockedMediaCallProvider = ({
 	children,
 	state = 'closed',
 	transferredBy = undefined,
 	remoteMuted = false,
 	remoteHeld = false,
 	muted = false,
 	held = false,
-}: {
-	children: React.ReactNode;
-	state?: State;
-	transferredBy?: string;
-	remoteMuted?: boolean;
-	remoteHeld?: boolean;
-	muted?: boolean;
-	held?: boolean;
-}) => {
+}: MockedMediaCallProviderProps) => {
 	const [peerInfo, setPeerInfo] = useState<PeerInfo | undefined>({
 		displayName: 'John Doe',
 		userId: '1234567890',
@@ -147,4 +149,4 @@ const MediaCallProviderMock = ({
 	return <MediaCallContext.Provider value={contextValue}>{children}</MediaCallContext.Provider>;
 };
 
-export default MediaCallProviderMock;
+export default MockedMediaCallProvider;

packages/ui-voip/src/v2/components/Widget/Widget.tsx

@@ -1,6 +1,6 @@
 import { Palette } from '@rocket.chat/fuselage';
 import styled from '@rocket.chat/styled';
-import { ComponentProps, useLayoutEffect } from 'react';
+import { ComponentProps, ReactNode, useLayoutEffect } from 'react';
 import { FocusScope } from 'react-aria';
 
 import { DragContext } from './WidgetDraggableContext';
@@ -28,7 +28,7 @@ const WidgetBase = styled('article')`
 `;
 
 type WidgetProps = {
-	children: React.ReactNode;
+	children: ReactNode;
 } & ComponentProps<typeof WidgetBase>;
 
 const Widget = ({ children, ...props }: WidgetProps) => {

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

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PeerInfo } from './MediaCallContext';
+import { SessionInfo } from './useMediaSessionInstance';
+import { convertAvatarUrlToPng } from './utils/convertAvatarUrlToPng';
+
+const getDisplayInfo = (peerInfo?: PeerInfo) => {
+	if (!peerInfo) {
+		return undefined;
+	}
+
+	if ('number' in peerInfo) {
+		return { title: peerInfo.number };
+	}
+	if ('displayName' in peerInfo) {
+		return { title: peerInfo.displayName, avatar: peerInfo.avatarUrl };
+	}
+	return undefined;
+};
+
+export const useDesktopNotifications = (sessionInfo: SessionInfo) => {
+	const previousCallId = useRef<string | undefined>(undefined);
+	const { t } = useTranslation();
+
+	const displayInfo = getDisplayInfo(sessionInfo.peerInfo);
+	useEffect(() => {
+		if (
+			typeof window.RocketChatDesktop?.dispatchCustomNotification !== 'function' ||
+			typeof window.RocketChatDesktop?.closeCustomNotification !== 'function'
+		) {
+			return;
+		}
+
+		let isMounted = true;
+
+		if (sessionInfo.state !== 'ringing') {
+			if (previousCallId.current) {
+				window.RocketChatDesktop.closeCustomNotification(previousCallId.current);
+				previousCallId.current = undefined;
+			}
+			return;
+		}
+
+		if (!displayInfo?.title) {
+			return;
+		}
+
+		const notifyDesktop = async () => {
+			const avatarAsPng = await convertAvatarUrlToPng(displayInfo.avatar);
+
+			if (!isMounted) {
+				return;
+			}
+
+			window.RocketChatDesktop?.dispatchCustomNotification({
+				type: 'voice',
+				id: sessionInfo.callId,
+				payload: {
+					title: displayInfo.title,
+					body: t('Incoming_call_ellipsis'),
+					avatar: avatarAsPng || undefined,
+					requireInteraction: true,
+				},
+			});
+		};
+
+		notifyDesktop();
+		previousCallId.current = sessionInfo.callId;
+
+		return () => {
+			isMounted = false;
+		};
+	}, [displayInfo?.avatar, displayInfo?.title, sessionInfo.callId, sessionInfo.state, t]);
+};

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

@@ -1,11 +1,11 @@
 import { Divider, Box, TextInput, Field, FieldRow } from '@rocket.chat/fuselage';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Keypad } from './components';
 
 type UseKeypad = {
-	element: React.ReactNode;
+	element: ReactNode;
 	buttonProps: {
 		title: string;
 		onClick: () => void;