[FCE-3435] Add call signaling handshake, native timeouts, hold, call waiting and Recents redial to VoIP calls

examples/mobile-client/voip-call/app/App.tsx

@@ -5,7 +5,7 @@ import {
   useSandbox,
 } from '@fishjam-cloud/react-native-client';
 import { StatusBar } from 'expo-status-bar';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef, type MutableRefObject } from 'react';
 import {
   ActivityIndicator,
   PermissionsAndroid,
@@ -15,11 +15,13 @@ import {
 } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+import type { VoipIncomingPayload } from '@fishjam-cloud/react-native-client';
 import type { PropsWithChildren } from 'react';
-import { DirectoryScreen } from './src/screens/DirectoryScreen';
 import { InCallScreen } from './src/screens/InCallScreen';
 import { LoginScreen } from './src/screens/LoginScreen';
 import { OutgoingCallScreen } from './src/screens/OutgoingCallScreen';
+import { UsersScreen } from './src/screens/UsersScreen';
+import { useCallSignaling } from './src/signaling/useCallSignaling';
 import { BrandColors } from './src/theme/colors';
 import { UserProvider, useUser } from './src/user';
 import { VoipProvider, useVoip } from './src/voip';
@@ -28,8 +30,35 @@ const SERVER_URL =
   process.env.EXPO_PUBLIC_VOIP_SERVER_URL ?? 'http://localhost:4400';
 const SANDBOX_API_URL = process.env.EXPO_PUBLIC_SANDBOX_API_URL ?? '';
 
+// Thin wrapper that calls the signaling hook.
+// Must be inside VoipProvider so useCallSignaling can access useVoip().
+function CallSignaling({
+  username,
+  sendSignalRef,
+}: {
+  username: string | null;
+  sendSignalRef: MutableRefObject<
+    ((msg: Record<string, unknown>) => void) | undefined
+  >;
+}) {
+  useCallSignaling({ serverUrl: SERVER_URL, username, sendSignalRef });
+  return null;
+}
+
 function VoipWrapper({ children }: PropsWithChildren) {
   const { username } = useUser();
+  const sendSignalRef = useRef<
+    ((msg: Record<string, unknown>) => void) | undefined
+  >(undefined);
+
+  const onWaitingCallDeclined = useCallback((payload: VoipIncomingPayload) => {
+    sendSignalRef.current?.({
+      type: 'call-rejected',
+      to: payload.handle,
+      roomName: payload.roomName,
+    });
+  }, []);
+
   const { getSandboxPeerToken } = useSandbox({
     sandboxApiUrl: SANDBOX_API_URL,
   });
@@ -64,13 +93,31 @@ function VoipWrapper({ children }: PropsWithChildren) {
     <VoipProvider
       getPeerToken={getPeerToken}
       requestCall={requestCall}
-      isVideo={true}>
+      onWaitingCallDeclined={onWaitingCallDeclined}
+      isVideo={true}
+      canStartOutgoingCall={Boolean(username)}>
       <DeviceRegistration />
+      <CallEndedLogger />
+      <CallSignaling username={username} sendSignalRef={sendSignalRef} />
       {children}
     </VoipProvider>
   );
 }
 
+function CallEndedLogger() {
+  const { lastEndedReason } = useVoip();
+  const { username } = useUser();
+
+  useEffect(() => {
+    if (!lastEndedReason) return;
+    console.log(
+      `On user: ${username}, [VoIP] Call ended — reason: ${lastEndedReason}`,
+    );
+  }, [lastEndedReason, username]);
+
+  return null;
+}
+
 function DeviceRegistration() {
   const { username } = useUser();
   const { voipToken } = useVoip();
@@ -136,7 +183,7 @@ function AppScreens() {
     return <InCallScreen />;
   }
 
-  return <DirectoryScreen />;
+  return <UsersScreen />;
 }
 
 const App = () => (
@@ -145,7 +192,7 @@ const App = () => (
       <UserProvider>
         <VoipWrapper>
           <View style={styles.root}>
-            <StatusBar style="auto" />
+            <StatusBar style="dark" />
             <AppScreens />
           </View>
         </VoipWrapper>

examples/mobile-client/voip-call/app/app.json

@@ -4,6 +4,7 @@
     "slug": "voip-call",
     "version": "1.0.0",
     "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
     "scheme": "voipcall",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
@@ -19,6 +20,11 @@
     "android": {
       "package": "io.fishjam.example.voipcall",
       "googleServicesFile": "./google-services.json",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "monochromeImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#F1FAFE"
+      },
       "edgeToEdgeEnabled": true,
       "permissions": [
         "android.permission.CAMERA",
@@ -28,6 +34,9 @@
         "android.permission.ACCESS_WIFI_STATE"
       ]
     },
+    "web": {
+      "favicon": "./assets/images/favicon.png"
+    },
     "plugins": [
       [
         "@fishjam-cloud/react-native-client",
@@ -37,8 +46,20 @@
           },
           "ios": {
             "enableVoIPBackgroundMode": true
+          },
+          "voip": {
+            "incomingCallTimeout": 20,
+            "outgoingCallTimeout": 20
           }
         }
+      ],
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash.png",
+          "resizeMode": "contain",
+          "backgroundColor": "#F1FAFE"
+        }
       ]
     ]
   }

examples/mobile-client/voip-call/app/package.json

@@ -13,6 +13,7 @@
     "@fishjam-cloud/react-native-client": "workspace:*",
     "@react-native-async-storage/async-storage": "^3.1.1",
     "expo": "~54.0.30",
+    "expo-splash-screen": "~31.0.13",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-native": "0.81.5",

examples/mobile-client/voip-call/app/src/components/Avatar.tsx

@@ -1,15 +1,22 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
 
 import { BrandColors, TextColors } from '../theme/colors';
 
 type AvatarProps = {
   name: string;
+  /** Server-assigned avatar image; falls back to initials when null/absent or on error. */
+  avatarUrl?: string | null;
   size?: number;
   speaking?: boolean;
 };
 
-export function Avatar({ name, size = 96, speaking = false }: AvatarProps) {
+export function Avatar({ name, avatarUrl, size = 96, speaking = false }: AvatarProps) {
   const initial = name.trim()[0]?.toUpperCase() ?? '?';
+  const [failed, setFailed] = useState(false);
+  // Reset the error state if the URL changes (e.g. list refresh).
+  useEffect(() => setFailed(false), [avatarUrl]);
+  const showImage = Boolean(avatarUrl) && !failed;
   return (
     <View
       style={[
@@ -21,7 +28,16 @@ export function Avatar({ name, size = 96, speaking = false }: AvatarProps) {
           borderWidth: speaking ? 3 : 0,
         },
       ]}>
+      {/* Initials sit underneath as the fallback while the image loads or if it fails. */}
       <Text style={[styles.text, { fontSize: size * 0.4 }]}>{initial}</Text>
+      {showImage && (
+        <Image
+          source={{ uri: avatarUrl! }}
+          style={[StyleSheet.absoluteFill, { borderRadius: size / 2 }]}
+          onError={() => setFailed(true)}
+          accessibilityIgnoresInvertColors
+        />
+      )}
     </View>
   );
 }
@@ -32,6 +48,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderColor: BrandColors.seaBlue80,
+    overflow: 'hidden',
   },
   text: {
     color: TextColors.white,

examples/mobile-client/voip-call/app/src/components/InCallButton.tsx

@@ -15,6 +15,7 @@ type InCallButtonProps = {
   onPress: (event: GestureResponderEvent) => void;
   iconName: keyof typeof MaterialCommunityIcons.glyphMap;
   accessibilityLabel?: string;
+  disabled?: boolean;
 };
 
 export function InCallButton({
@@ -23,6 +24,7 @@ export function InCallButton({
   onPress,
   iconName,
   accessibilityLabel,
+  disabled = false,
 }: InCallButtonProps) {
   const isDisconnect = type === 'disconnect';
   const filled = isDisconnect || active;
@@ -38,24 +40,31 @@ export function InCallButton({
   return (
     <TouchableOpacity
       onPress={onPress}
+      disabled={disabled}
       activeOpacity={0.8}
       accessibilityLabel={accessibilityLabel}
-      style={[styles.button, { backgroundColor }, !filled && styles.outline]}>
-      <MaterialCommunityIcons name={iconName} size={28} color={iconColor} />
+      style={[
+        styles.button,
+        { backgroundColor },
+        !filled && styles.outline,
+        disabled && styles.disabled,
+      ]}>
+      <MaterialCommunityIcons name={iconName} size={24} color={iconColor} />
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   button: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 52,
+    height: 52,
+    borderRadius: 26,
     justifyContent: 'center',
     alignItems: 'center',
   },
   outline: {
     borderWidth: 1,
     borderColor: BrandColors.darkBlue80,
   },
+  disabled: { opacity: 0.45 },
 });

examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx

@@ -16,10 +16,17 @@ function streamOf(track: Track | null | undefined) {
 
 type VideoCallViewProps = {
   remoteName: string;
+  remoteAvatarUrl?: string | null;
   localName: string;
+  localAvatarUrl?: string | null;
 };
 
-export function VideoCallView({ remoteName, localName }: VideoCallViewProps) {
+export function VideoCallView({
+  remoteName,
+  remoteAvatarUrl,
+  localName,
+  localAvatarUrl,
+}: VideoCallViewProps) {
   const insets = useSafeAreaInsets();
   const { remotePeers } = usePeers();
   const { cameraStream } = useCamera();
@@ -39,21 +46,22 @@ export function VideoCallView({ remoteName, localName }: VideoCallViewProps) {
         />
       ) : (
         <View style={styles.remoteNoVideo}>
-          <Avatar name={remoteName} size={132} />
+          <Avatar name={remoteName} avatarUrl={remoteAvatarUrl} size={132} />
         </View>
       )}
 
       <View style={[styles.pip, { top: insets.top + 12 }]}>
         {localStream ? (
           <RTCView
             mediaStream={localStream}
+            objectFit="cover"
             style={styles.pipVideo}
             mirror
             zOrder={1}
           />
         ) : (
           <View style={styles.pipNoVideo}>
-            <Avatar name={localName} size={44} />
+            <Avatar name={localName} avatarUrl={localAvatarUrl} size={44} />
           </View>
         )}
       </View>
@@ -75,8 +83,8 @@ const styles = StyleSheet.create({
     right: 16,
     width: 108,
     height: 156,
-    borderRadius: 16,
-    overflow: 'hidden',
+    // Square corners on purpose: RTCView is a SurfaceView on Android and cannot
+    // be clipped by borderRadius/overflow, so a rounded PiP overshoots there.
     backgroundColor: BrandColors.seaBlue60,
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.6)',