feat: VoIP freeswitch UI hooks

apps/meteor/client/providers/VoiceCallProvider.tsx → apps/meteor/client/providers/VoiceCallProvider/VoiceCallProvider.tsx

@@ -6,10 +6,10 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
-import type { VoiceCallContextValue } from '../contexts/VoiceCallContext';
-import { VoiceCallContext } from '../contexts/VoiceCallContext';
-import { useVoiceCallClient } from '../hooks/useVoiceCallClient';
-import { useVoipSounds } from './OmnichannelCallProvider/hooks/useVoipSounds';
+import type { VoiceCallContextValue } from '../../contexts/VoiceCallContext';
+import { VoiceCallContext } from '../../contexts/VoiceCallContext';
+import { useVoipSounds } from '../OmnichannelCallProvider/hooks/useVoipSounds';
+import { useVoiceCallClient } from './hooks/useVoiceCallClient';
 
 const VoiceCallProvider = ({ children }: { children: ReactNode }) => {
 	// Settings

apps/meteor/client/providers/VoiceCallProvider/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './useVoiceCall';
+export * from './useVoiceCallAPI';
+export * from './useVoiceCallClient';
+export * from './useVoiceCallDialer';
+export * from './useVoiceCallEvent';
+export * from './useVoiceCallSession';
+export * from './useVoiceCallState';

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCall.tsx

@@ -0,0 +1,25 @@
+import { useContext, useMemo } from 'react';
+
+import VoiceCallContext from '../../../contexts/VoiceCallContext';
+import useVoiceCallAPI from './useVoiceCallAPI';
+import useVoiceCallSession from './useVoiceCallSession';
+import useVoiceCallState from './useVoiceCallState';
+
+export const useVoiceCall = () => {
+	const { error } = useContext(VoiceCallContext);
+	const state = useVoiceCallState();
+	const session = useVoiceCallSession();
+	const api = useVoiceCallAPI();
+
+	return useMemo(
+		() => ({
+			...state,
+			...api,
+			session,
+			error,
+		}),
+		[state, api, session, error],
+	);
+};
+
+export default useVoiceCall;

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallAPI.tsx

@@ -0,0 +1,54 @@
+import { useContext, useMemo } from 'react';
+
+import type { VoiceCallContextReady } from '../../../contexts/VoiceCallContext';
+import { VoiceCallContext, isVoiceCallContextReady } from '../../../contexts/VoiceCallContext';
+
+type VoiceCallAPI = {
+	makeCall(calleeURI: string): void;
+	endCall(): void;
+	register(): Promise<void>;
+	unregister(): Promise<void>;
+	openDialer(): void;
+	closeDialer(): void;
+	transferCall(calleeURL: string): Promise<void>;
+	changeAudioOutputDevice: VoiceCallContextReady['changeAudioOutputDevice'];
+	changeAudioInputDevice: VoiceCallContextReady['changeAudioInputDevice'];
+};
+
+const NOOP = (..._args: any[]): any => undefined;
+
+export const useVoiceCallAPI = (): VoiceCallAPI => {
+	const context = useContext(VoiceCallContext);
+
+	return useMemo(() => {
+		if (!isVoiceCallContextReady(context)) {
+			return {
+				makeCall: NOOP,
+				endCall: NOOP,
+				register: NOOP,
+				unregister: NOOP,
+				openDialer: NOOP,
+				closeDialer: NOOP,
+				transferCall: NOOP,
+				changeAudioInputDevice: NOOP,
+				changeAudioOutputDevice: NOOP,
+			} as VoiceCallAPI;
+		}
+
+		const { voipClient, changeAudioInputDevice, changeAudioOutputDevice } = context;
+
+		return {
+			makeCall: voipClient.call,
+			endCall: voipClient.endCall,
+			register: voipClient.register,
+			unregister: voipClient.unregister,
+			transferCall: voipClient.transfer,
+			openDialer: () => voipClient.notifyDialer({ open: true }),
+			closeDialer: () => voipClient.notifyDialer({ open: false }),
+			changeAudioInputDevice,
+			changeAudioOutputDevice,
+		};
+	}, [context]);
+};
+
+export default useVoiceCallAPI;

apps/meteor/client/hooks/useVoiceCallClient.tsx → apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallClient.tsx

@@ -2,8 +2,8 @@ import { useUser, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 
-import VoIPClient from '../lib/voip/VoIPClient';
-import { useWebRtcServers } from '../providers/OmnichannelCallProvider/hooks/useWebRtcServers';
+import VoIPClient from '../../../lib/voip/VoIPClient';
+import { useWebRtcServers } from '../../OmnichannelCallProvider/hooks/useWebRtcServers';
 
 type VoiceCallClientParams = {
 	autoRegister?: boolean;

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallDialer.tsx

@@ -0,0 +1,15 @@
+import useVoiceCallAPI from './useVoiceCallAPI';
+import useVoiceCallEvent from './useVoiceCallEvent';
+
+export const useVoiceCallDialer = () => {
+	const { openDialer, closeDialer } = useVoiceCallAPI();
+	const { open } = useVoiceCallEvent('dialer', { open: false });
+
+	return {
+		open,
+		openDialer: openDialer || (() => undefined),
+		closeDialer: closeDialer || (() => undefined),
+	};
+};
+
+export default useVoiceCallDialer;

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallEffect.tsx

@@ -0,0 +1,32 @@
+import { useContext, useMemo, useRef } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import { VoiceCallContext } from '../../../contexts/VoiceCallContext';
+import type VoIPClient from '../../../lib/voip/VoIPClient';
+
+export const useVoiceCallEffect = <T,>(transform: (voipClient: VoIPClient) => T, initialValue: T) => {
+	const { voipClient } = useContext(VoiceCallContext);
+	const initValue = useRef<T>(initialValue);
+	const transformFn = useRef(transform);
+
+	const [subscribe, getSnapshot] = useMemo(() => {
+		let state: T = initValue.current;
+
+		const getSnapshot = (): T => state;
+		const subscribe = (cb: () => void) => {
+			if (!voipClient) return () => undefined;
+
+			state = transformFn.current(voipClient);
+			return voipClient.on('stateChanged', (): void => {
+				state = transformFn.current(voipClient);
+				cb();
+			});
+		};
+
+		return [subscribe, getSnapshot];
+	}, [voipClient]);
+
+	return useSyncExternalStore(subscribe, getSnapshot);
+};
+
+export default useVoiceCallEffect;

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallEvent.tsx

@@ -0,0 +1,30 @@
+import { useContext, useMemo, useRef } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import { VoiceCallContext } from '../../../contexts/VoiceCallContext';
+import type { VoiceCallEvents } from '../../../lib/voip/VoIPClient';
+
+export const useVoiceCallEvent = <E extends keyof VoiceCallEvents>(eventName: E, initialValue: VoiceCallEvents[E]) => {
+	const { voipClient } = useContext(VoiceCallContext);
+	const initValue = useRef(initialValue);
+
+	const [subscribe, getSnapshot] = useMemo(() => {
+		let state: VoiceCallEvents[E] = initValue.current;
+
+		const getSnapshot = (): VoiceCallEvents[E] => state;
+		const callback = (cb: () => void) => {
+			if (!voipClient) return () => undefined;
+
+			return voipClient.on(eventName, (event?: VoiceCallEvents[E]): void => {
+				state = event as VoiceCallEvents[E];
+				cb();
+			});
+		};
+
+		return [callback, getSnapshot];
+	}, [eventName, voipClient]);
+
+	return useSyncExternalStore(subscribe, getSnapshot);
+};
+
+export default useVoiceCallEvent;

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallSession.tsx

@@ -0,0 +1,8 @@
+import type { VoiceCallSession } from '../../../lib/voip/definitions';
+import useVoiceCallEffect from './useVoiceCallEffect';
+
+export const useVoiceCallSession = (): VoiceCallSession | null => {
+	return useVoiceCallEffect((client) => client.getSession(), null);
+};
+
+export default useVoiceCallSession;

apps/meteor/client/providers/VoiceCallProvider/hooks/useVoiceCallState.tsx

@@ -0,0 +1,45 @@
+import { useContext, useMemo } from 'react';
+
+import { VoiceCallContext } from '../../../contexts/VoiceCallContext';
+import useVoiceCallEffect from './useVoiceCallEffect';
+
+export type VoiceCallState = {
+	isEnabled: boolean;
+	isRegistered: boolean;
+	isReady: boolean;
+	isOnline: boolean;
+	isIncoming: boolean;
+	isOngoing: boolean;
+	isOutgoing: boolean;
+	isError: boolean;
+	error?: Error | null;
+};
+
+const DEFAULT_STATE = {
+	isRegistered: false,
+	isReady: false,
+	isInCall: false,
+	isOnline: false,
+	isIncoming: false,
+	isOngoing: false,
+	isOutgoing: false,
+	isError: false,
+};
+
+export const useVoiceCallState = (): VoiceCallState => {
+	const { isEnabled, error: clientError } = useContext(VoiceCallContext);
+
+	const callState = useVoiceCallEffect((client) => client.getState(), DEFAULT_STATE);
+
+	return useMemo(
+		() => ({
+			...callState,
+			clientError,
+			isEnabled,
+			isError: !!clientError || callState.isError,
+		}),
+		[clientError, isEnabled, callState],
+	);
+};
+
+export default useVoiceCallState;

apps/meteor/client/providers/VoiceCallProvider/index.ts

@@ -0,0 +1 @@
+export { default } from './VoiceCallProvider';