feat: Voice support

__mocks__/react-native-callkeep.js

@@ -0,0 +1,10 @@
+export default {
+	setup: jest.fn(),
+	canMakeMultipleCalls: jest.fn(),
+	displayIncomingCall: jest.fn(),
+	endCall: jest.fn(),
+	setCurrentCallActive: jest.fn(),
+	addEventListener: jest.fn((event, callback) => ({
+		remove: jest.fn()
+	}))
+};

android/app/src/main/AndroidManifest.xml

@@ -13,6 +13,17 @@
     <!-- permissions related to jitsi call -->
     <uses-permission android:name="android.permission.BLUETOOTH" />
 
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
+    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
+    <uses-permission android:name="android.permission.BIND_TELECOM_CONNECTION_SERVICE" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
+    <!-- <uses-permission android:name="android.permission.MANAGE_OWN_CALLS" /> -->
+    <!-- <uses-permission android:name="android.permission.CALL_PHONE" /> -->
+    <uses-feature android:name="android.hardware.audio.output" />
+    <uses-feature android:name="android.hardware.microphone" />
+
     <!-- android 13 notifications -->
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
 
@@ -104,6 +115,19 @@
         <meta-data
             android:name="com.bugsnag.android.API_KEY"
             android:value="${BugsnagAPIKey}" />
+
+        <service android:name="io.wazo.callkeep.VoiceConnectionService"
+            android:label="Wazo"
+            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE"
+            android:exported="true"
+            android:foregroundServiceType="microphone"
+            >
+            <intent-filter>
+                <action android:name="android.telecom.ConnectionService" />
+            </intent-filter>
+        </service>
+
+        <service android:name="io.wazo.callkeep.RNCallKeepBackgroundMessagingService" />
     </application>
 
     <queries>

app/AppContainer.tsx

@@ -19,6 +19,7 @@ import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
 import { themes } from './lib/constants/colors';
 import { emitter } from './lib/methods/helpers';
+import CallHeader from './containers/CallHeader/CallHeader';
 
 const createStackNavigator = createNativeStackNavigator;
 
@@ -34,6 +35,7 @@ const SetUsernameStack = () => (
 const Stack = createStackNavigator<StackParamList>();
 const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: boolean }) => {
 	const { theme } = useContext(ThemeContext);
+
 	useEffect(() => {
 		if (root) {
 			const state = Navigation.navigationRef.current?.getRootState();
@@ -50,35 +52,39 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 	const navTheme = navigationTheme(theme);
 
 	return (
-		<NavigationContainer
-			theme={navTheme}
-			ref={Navigation.navigationRef}
-			onReady={() => {
-				emitter.emit('navigationReady');
-			}}
-			onStateChange={state => {
-				const previousRouteName = Navigation.routeNameRef.current;
-				const currentRouteName = getActiveRouteName(state);
-				if (previousRouteName !== currentRouteName) {
-					setCurrentScreen(currentRouteName);
-				}
-				Navigation.routeNameRef.current = currentRouteName;
-			}}>
-			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none', navigationBarColor: themes[theme].surfaceLight }}>
-				{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
-					<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
-				) : null}
-				{root === RootEnum.ROOT_OUTSIDE ? <Stack.Screen name='OutsideStack' component={OutsideStack} /> : null}
-				{root === RootEnum.ROOT_INSIDE && isMasterDetail ? (
-					<Stack.Screen name='MasterDetailStack' component={MasterDetailStack} />
-				) : null}
-				{root === RootEnum.ROOT_INSIDE && !isMasterDetail ? <Stack.Screen name='InsideStack' component={InsideStack} /> : null}
-				{root === RootEnum.ROOT_SET_USERNAME ? <Stack.Screen name='SetUsernameStack' component={SetUsernameStack} /> : null}
-				{root === RootEnum.ROOT_SHARE_EXTENSION ? (
-					<Stack.Screen name='ShareExtensionStack' component={ShareExtensionStack} />
-				) : null}
-			</Stack.Navigator>
-		</NavigationContainer>
+		<>
+			<CallHeader />
+			<NavigationContainer
+				theme={navTheme}
+				ref={Navigation.navigationRef}
+				onReady={() => {
+					emitter.emit('navigationReady');
+				}}
+				onStateChange={state => {
+					const previousRouteName = Navigation.routeNameRef.current;
+					const currentRouteName = getActiveRouteName(state);
+					if (previousRouteName !== currentRouteName) {
+						setCurrentScreen(currentRouteName);
+					}
+					Navigation.routeNameRef.current = currentRouteName;
+				}}>
+				<Stack.Navigator
+					screenOptions={{ headerShown: false, animation: 'none', navigationBarColor: themes[theme].surfaceLight }}>
+					{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
+						<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
+					) : null}
+					{root === RootEnum.ROOT_OUTSIDE ? <Stack.Screen name='OutsideStack' component={OutsideStack} /> : null}
+					{root === RootEnum.ROOT_INSIDE && isMasterDetail ? (
+						<Stack.Screen name='MasterDetailStack' component={MasterDetailStack} />
+					) : null}
+					{root === RootEnum.ROOT_INSIDE && !isMasterDetail ? <Stack.Screen name='InsideStack' component={InsideStack} /> : null}
+					{root === RootEnum.ROOT_SET_USERNAME ? <Stack.Screen name='SetUsernameStack' component={SetUsernameStack} /> : null}
+					{root === RootEnum.ROOT_SHARE_EXTENSION ? (
+						<Stack.Screen name='ShareExtensionStack' component={ShareExtensionStack} />
+					) : null}
+				</Stack.Navigator>
+			</NavigationContainer>
+		</>
 	);
 });
 const mapStateToProps = (state: any) => ({

app/actions/actionsTypes.ts

@@ -59,7 +59,7 @@ export const METEOR = createRequestTypes('METEOR_CONNECT', [...defaultTypes, 'DI
 export const LOGOUT = 'LOGOUT'; // logout is always success
 export const DELETE_ACCOUNT = 'DELETE_ACCOUNT';
 export const SNIPPETED_MESSAGES = createRequestTypes('SNIPPETED_MESSAGES', ['OPEN', 'READY', 'CLOSE', 'MESSAGES_RECEIVED']);
-export const DEEP_LINKING = createRequestTypes('DEEP_LINKING', ['OPEN', 'OPEN_VIDEO_CONF']);
+export const DEEP_LINKING = createRequestTypes('DEEP_LINKING', ['OPEN', 'OPEN_VIDEO_CONF', 'VOIP_CALL']);
 export const SORT_PREFERENCES = createRequestTypes('SORT_PREFERENCES', ['SET_ALL', 'SET']);
 export const SET_CUSTOM_EMOJIS = 'SET_CUSTOM_EMOJIS';
 export const ACTIVE_USERS = createRequestTypes('ACTIVE_USERS', ['SET', 'CLEAR']);

app/actions/deepLinking.ts

@@ -16,6 +16,16 @@ interface IDeepLinkingOpen extends Action {
 	params: Partial<IParams>;
 }
 
+interface IVoipCallParams {
+	callId: string;
+	callUUID: string;
+	host: string;
+}
+
+interface IVoipCallOpen extends Action {
+	params: IVoipCallParams;
+}
+
 export function deepLinkingOpen(params: Partial<IParams>): IDeepLinkingOpen {
 	return {
 		type: DEEP_LINKING.OPEN,
@@ -29,3 +39,14 @@ export function deepLinkingClickCallPush(params: any): IDeepLinkingOpen {
 		params
 	};
 }
+
+/**
+ * Action to handle VoIP call from push notification.
+ * Triggers server switching if needed and processes the incoming call.
+ */
+export function voipCallOpen(params: IVoipCallParams): IVoipCallOpen {
+	return {
+		type: DEEP_LINKING.VOIP_CALL,
+		params
+	};
+}

app/containers/CallHeader/CallHeader.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../../theme';
+import Collapse from './components/Collapse';
+import Title from './components/Title';
+import EndCall from './components/EndCall';
+import { useCallStore } from '../../lib/services/voip/useCallStore';
+
+const styles = StyleSheet.create({
+	header: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		paddingHorizontal: 12,
+		paddingBottom: 4,
+		borderBottomWidth: StyleSheet.hairlineWidth
+	}
+});
+
+const CallHeader = () => {
+	'use memo';
+
+	const { colors } = useTheme();
+	const insets = useSafeAreaInsets();
+
+	const defaultHeaderStyle = {
+		backgroundColor: colors.surfaceNeutral,
+		paddingTop: insets.top
+	};
+
+	const call = useCallStore(state => state.call);
+	if (!call) {
+		return <View style={defaultHeaderStyle} />;
+	}
+
+	return (
+		<View style={[styles.header, { ...defaultHeaderStyle, borderBottomColor: colors.strokeLight }]}>
+			<Collapse />
+			<Title />
+			<EndCall />
+		</View>
+	);
+};
+
+export default CallHeader;

app/containers/CallHeader/components/Collapse.tsx

@@ -0,0 +1,24 @@
+import I18n from '../../../i18n';
+import { useTheme } from '../../../theme';
+import { useCallStore } from '../../../lib/services/voip/useCallStore';
+import * as HeaderButton from '../../Header/components/HeaderButton';
+
+const Collapse = () => {
+	'use memo';
+
+	const { colors } = useTheme();
+	const focused = useCallStore(state => state.focused);
+	const toggleFocus = useCallStore(state => state.toggleFocus);
+	return (
+		<HeaderButton.Container left>
+			<HeaderButton.Item
+				accessibilityLabel={I18n.t('Minimize')}
+				onPress={toggleFocus}
+				iconName={focused ? 'arrow-collapse' : 'arrow-expand'}
+				color={colors.fontDefault}
+			/>
+		</HeaderButton.Container>
+	);
+};
+
+export default Collapse;

app/containers/CallHeader/components/EndCall.tsx

@@ -0,0 +1,18 @@
+import I18n from '../../../i18n';
+import { useTheme } from '../../../theme';
+import { useCallStore } from '../../../lib/services/voip/useCallStore';
+import * as HeaderButton from '../../Header/components/HeaderButton';
+
+const EndCall = () => {
+	'use memo';
+
+	const { colors } = useTheme();
+	const endCall = useCallStore(state => state.endCall);
+	return (
+		<HeaderButton.Container>
+			<HeaderButton.Item accessibilityLabel={I18n.t('End')} onPress={endCall} iconName='phone-end' color={colors.fontDanger} />
+		</HeaderButton.Container>
+	);
+};
+
+export default EndCall;

app/containers/CallHeader/components/Timer.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { Text } from 'react-native';
+
+import { useCallStore } from '../../../lib/services/voip/useCallStore';
+
+const formatDuration = (seconds: number): string => {
+	const hours = Math.floor(seconds / 3600);
+	const mins = Math.floor((seconds % 3600) / 60);
+	const secs = seconds % 60;
+	const hoursStr = hours > 0 ? `${hours.toString().padStart(2, '0')}:` : '';
+	return `${hoursStr}${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+};
+
+const Timer = () => {
+	'use memo';
+
+	const callStartTime = useCallStore(state => state.callStartTime);
+	const [duration, setDuration] = useState(callStartTime ? Math.floor((new Date().getTime() - callStartTime) / 1000) : 0);
+
+	useEffect(() => {
+		if (!callStartTime) {
+			return;
+		}
+		const updateDuration = () => {
+			setDuration(Math.floor((Date.now() - callStartTime) / 1000));
+		};
+		updateDuration();
+		const interval = setInterval(updateDuration, 1000);
+		return () => clearInterval(interval);
+	}, [callStartTime]);
+
+	return <Text>{formatDuration(duration)}</Text>;
+};
+
+export default Timer;

app/containers/CallHeader/components/Title.tsx

@@ -0,0 +1,47 @@
+import { StyleSheet, Text } from 'react-native';
+
+import { useTheme } from '../../../theme';
+import { useCallStore } from '../../../lib/services/voip/useCallStore';
+import I18n from '../../../i18n';
+import sharedStyles from '../../../views/Styles';
+import Timer from './Timer';
+
+const styles = StyleSheet.create({
+	headerTitle: {
+		...sharedStyles.textSemibold,
+		fontSize: 16,
+		lineHeight: 24
+	}
+});
+
+const Title = () => {
+	'use memo';
+
+	const { colors } = useTheme();
+	const callState = useCallStore(state => state.callState);
+	const callStartTime = useCallStore(state => state.callStartTime);
+	const contact = useCallStore(state => state.contact);
+
+	const callerName = contact.displayName || contact.username || I18n.t('Unknown');
+	const isConnecting = callState === 'none' || callState === 'ringing' || callState === 'accepted';
+	const isConnected = callState === 'active';
+
+	const getHeaderTitle = () => {
+		if (isConnecting) {
+			return I18n.t('Connecting');
+		}
+		if (isConnected && callStartTime) {
+			return `${callerName} – `;
+		}
+		return callerName;
+	};
+
+	return (
+		<Text style={[styles.headerTitle, { color: colors.fontDefault }]} testID='call-view-header-title'>
+			{getHeaderTitle()}
+			<Timer />
+		</Text>
+	);
+};
+
+export default Title;

app/containers/CustomIcon/mappedIcons.js

@@ -157,6 +157,7 @@ export const mappedIcons = {
 	'pause': 59803,
 	'pause-filled': 59802,
 	'pause-shape-filled': 59843,
+	'pause-shape-unfilled': 59879,
 	'percentage': 59777,
 	'phone': 59806,
 	'phone-disabled': 59804,