@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/components/VideoCalls/callUiStore.ts

@@ -16,11 +16,26 @@ import { store } from '../../roomStore';
 
 interface CallUiState {
   minimized: boolean;
+  /**
+   * iOS shows this incoming call in its own CallKit UI (banner / full
+   * screen), so the in-app ring card stays hidden instead of doubling it.
+   */
+  systemRinging: boolean;
   /** Id of the header that shows the strip, or null when none is mounted. */
   barHost: number | null;
+  /**
+   * Window y of the top of the strip slot under the hosting header, so the
+   * collapse animation can land exactly on the strip. Null: no header.
+   */
+  barAnchorY: number | null;
 }
 
-let state: CallUiState = { minimized: false, barHost: null };
+let state: CallUiState = {
+  minimized: false,
+  systemRinging: false,
+  barHost: null,
+  barAnchorY: null,
+};
 const hosts: number[] = [];
 let nextHostId = 1;
 const listeners = new Set<() => void>();
@@ -35,9 +50,13 @@ const emit = (patch: Partial<CallUiState>) => {
 const ensureStoreWatcher = () => {
   if (storeUnsubscribe) {return;}
   storeUnsubscribe = store.subscribe(() => {
-    if (state.minimized && store.getState().call.phase === 'idle') {
+    const phase = store.getState().call.phase;
+    if (state.minimized && phase === 'idle') {
       emit({ minimized: false });
     }
+    if (state.systemRinging && phase !== 'ringing-incoming') {
+      emit({ systemRinging: false });
+    }
   });
 };
 
@@ -61,6 +80,10 @@ export const setCallMinimized = (minimized: boolean): void => {
   if (state.minimized !== minimized) {emit({ minimized });}
 };
 
+export const setCallSystemRinging = (systemRinging: boolean): void => {
+  if (state.systemRinging !== systemRinging) {emit({ systemRinging });}
+};
+
 export const registerCallBarHost = (
   onId?: (id: number) => void
 ): (() => void) => {
@@ -71,6 +94,13 @@ export const registerCallBarHost = (
   return () => {
     const index = hosts.indexOf(id);
     if (index >= 0) {hosts.splice(index, 1);}
-    emit({ barHost: hosts.length ? hosts[hosts.length - 1] : null });
+    const next = hosts.length ? hosts[hosts.length - 1] : null;
+    emit({ barHost: next, barAnchorY: next === null ? null : state.barAnchorY });
   };
 };
+
+/** The hosting header reports where its strip slot is on screen. */
+export const setCallBarAnchor = (hostId: number, y: number): void => {
+  if (state.barHost !== hostId || state.barAnchorY === y) {return;}
+  emit({ barAnchorY: y });
+};

package/src/components/VideoCalls/livekitRuntime.ts

@@ -34,6 +34,11 @@ export interface LiveKitRuntime {
   AudioSession: any;
   /** Installs the WebRTC globals livekit-client expects. */
   registerGlobals: () => void;
+  /**
+   * `@livekit/react-native-webrtc` RTCAudioSession: tells WebRTC when
+   * CallKit activates/deactivates the iOS audio session.
+   */
+  RTCAudioSession: any;
 }
 
 let cached: LiveKitRuntime | null | undefined;
@@ -59,6 +64,13 @@ export const loadLiveKit = (): LiveKitRuntime | null => {
     // moving subset across versions, the core package does not.
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const core = require('livekit-client');
+    let webrtc: any = null;
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      webrtc = require('@livekit/react-native-webrtc');
+    } catch {
+      // Only needed for CallKit; calls work without it.
+    }
 
     cached = {
       Room: core.Room,
@@ -69,6 +81,7 @@ export const loadLiveKit = (): LiveKitRuntime | null => {
       VideoTrack: rn.VideoTrack,
       AudioSession: rn.AudioSession,
       registerGlobals: rn.registerGlobals,
+      RTCAudioSession: webrtc?.RTCAudioSession ?? null,
     };
   } catch {
     cached = null;

package/src/components/VideoCalls/useCallKeep.ts

@@ -1,9 +1,13 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState, store } from '../../roomStore';
 import { acceptIncomingCall, declineIncomingCall } from '../../roomStore/callSlice';
 import { sendCallStateSignal } from '../../networking/callTokenStanza';
+import { terminateActiveCall } from './callActions';
+import { setCallMicEnabled, useCallSession } from './callSessionController';
+import { loadLiveKit } from './livekitRuntime';
+import { setCallSystemRinging } from './callUiStore';
 
 /**
  * Native incoming-call UI (Android ConnectionService / iOS CallKit) via
@@ -14,6 +18,12 @@ import { sendCallStateSignal } from '../../networking/callTokenStanza';
  * loaded lazily exactly like the LiveKit packages, so hosts that don't
  * install it get the plain in-app ring screen and nothing breaks.
  *
+ * On iOS every call, incoming or outgoing, is also reported to CallKit for
+ * as long as it lasts. That is what puts it in the Dynamic Island / the
+ * green status-bar pill when the app is in the background, with the
+ * system's own mute and end buttons, and what keeps the call's audio
+ * running in the background.
+ *
  * Platform reality, stated plainly:
  *  - Android: full value. A ConnectionService call shows the system
  *    incoming-call screen over the lock screen.
@@ -35,6 +45,18 @@ interface CallKeepModule {
   ) => void;
   endCall: (uuid: string) => void;
   endAllCalls: () => void;
+  startCall?: (
+    uuid: string,
+    handle: string,
+    contactIdentifier?: string,
+    handleType?: string,
+    hasVideo?: boolean
+  ) => void;
+  answerIncomingCall?: (uuid: string) => void;
+  reportConnectingOutgoingCallWithUUID?: (uuid: string) => void;
+  reportConnectedOutgoingCallWithUUID?: (uuid: string) => void;
+  reportEndCallWithUUID?: (uuid: string, reason: number) => void;
+  setMutedCall?: (uuid: string, muted: boolean) => void;
   addEventListener: (event: string, handler: (payload: any) => void) => void;
   removeEventListener: (event: string) => void;
   setAvailable?: (available: boolean) => void;
@@ -95,16 +117,32 @@ const toUuid = (seed: string): string => {
   ].join('-');
 };
 
+const trace = (...args: unknown[]) => {
+  if (__DEV__) {console.log('[calls] CallKit:', ...args);}
+};
+
 export const useCallKeep = (): void => {
   const dispatch = useDispatch();
   const call = useSelector((state: RootState) => state.call);
+  const session = useCallSession();
   const callKeep = useMemo(() => loadCallKeep(), []);
+  const [ready, setReady] = useState(false);
   const activeUuidRef = useRef<string | null>(null);
-  const readyRef = useRef(false);
+  // The CallKit call has been answered (from the system screen or in-app).
+  const answeredRef = useRef(false);
+  const outgoingReportedRef = useRef<'none' | 'connecting' | 'connected'>('none');
+  const isIOS = Platform.OS === 'ios';
 
   // One-time native setup.
   useEffect(() => {
-    if (!callKeep) {return;}
+    if (!callKeep) {
+      if (isIOS) {
+        // The usual reason for "no Dynamic Island": the JS package is there
+        // but the binary was built without the RNCallKeep pod.
+        trace('unavailable (react-native-callkeep is not linked in this build)');
+      }
+      return;
+    }
     let cancelled = false;
 
     (async () => {
@@ -113,6 +151,11 @@ export const useCallKeep = (): void => {
           ios: {
             appName: 'Ethora',
             supportsVideo: true,
+            maximumCallGroups: '1',
+            maximumCallsPerCallGroup: '1',
+            // Our calls are not phone calls: keep them out of the Phone
+            // app's Recents, whose entries would dial back into nowhere.
+            includesCallsInRecents: false,
           },
           android: {
             alertTitle: 'Permissions required',
@@ -130,28 +173,35 @@ export const useCallKeep = (): void => {
         });
         if (cancelled) {return;}
         callKeep.setAvailable?.(true);
-        readyRef.current = true;
-      } catch {
+        trace('ready');
+        setReady(true);
+      } catch (error) {
+        trace('setup failed', error);
         // Host didn't grant phone-account permission, or the module isn't
         // linked. The in-app ring screen still works, so stay quiet.
-        readyRef.current = false;
+        setReady(false);
       }
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [callKeep]);
+  }, [callKeep, isIOS]);
 
-  // Bridge native answer/end actions back into Redux.
+  // Bridge native actions back into the call.
   useEffect(() => {
     if (!callKeep) {return;}
 
     const onAnswer = () => {
+      answeredRef.current = true;
       // The user answered from the system screen, which on Android may
       // mean the app was not even in the foreground.
       callKeep.backToForeground?.();
-      if (store.getState().call.direction === 'incoming') {
+      // Only from the ring: CallKit also reports the answer we make on its
+      // behalf after an in-app accept, and re-accepting then would drop an
+      // in-progress call back to 'connecting'.
+      const current = store.getState().call;
+      if (current.direction === 'incoming' && current.phase === 'ringing-incoming') {
         dispatch(acceptIncomingCall());
       }
     };
@@ -165,73 +215,198 @@ export const useCallKeep = (): void => {
       ) {
         sendCallStateSignal('declined');
         dispatch(declineIncomingCall());
+        return;
+      }
+      // Ended from the Dynamic Island, the lock screen or a headset.
+      if (snapshot.phase === 'error') {return;}
+      terminateActiveCall(snapshot.phase === 'requesting' ? 'cancelled' : 'ended');
+    };
+
+    // The system mute button (Dynamic Island, lock screen, CarPlay).
+    const onMuted = ({ muted }: { muted: boolean }) => {
+      void setCallMicEnabled(!muted);
+    };
+
+    // Another call (e.g. a phone call) put ours on hold: stop sending audio.
+    const onHold = ({ hold }: { hold: boolean }) => {
+      if (hold) {void setCallMicEnabled(false);}
+    };
+
+    // CallKit owns the iOS audio session: WebRTC may only start its audio
+    // unit once CallKit has activated the session.
+    const onAudioActivated = () => {
+      try {
+        loadLiveKit()?.RTCAudioSession?.audioSessionDidActivate?.();
+      } catch {
+        // Older webrtc builds manage the session on their own.
+      }
+    };
+    const onAudioDeactivated = () => {
+      try {
+        loadLiveKit()?.RTCAudioSession?.audioSessionDidDeactivate?.();
+      } catch {
+        // noop
       }
     };
 
     callKeep.addEventListener('answerCall', onAnswer);
     callKeep.addEventListener('endCall', onEnd);
+    callKeep.addEventListener('didPerformSetMutedCallAction', onMuted);
+    callKeep.addEventListener('didToggleHoldCallAction', onHold);
+    callKeep.addEventListener('didActivateAudioSession', onAudioActivated);
+    // CallKit rejected or dropped our calls (e.g. a build without the voip
+    // background mode): there is nothing to end any more.
+    const onReset = () => {
+      trace('provider reset');
+    };
+    callKeep.addEventListener('didResetProvider', onReset);
+    // The system's verdict on displayIncomingCall ("Unentitled" means the
+    // app lacks the voip background mode).
+    const onDisplayed = ({ error, errorCode }: { error?: string; errorCode?: string }) => {
+      trace('incoming call shown', error ? `failed: ${errorCode || ''} ${error}` : 'ok');
+      // CallKit refused it (Do Not Disturb, unentitled...): bring the
+      // in-app ring card back so the call can still be answered.
+      if (error) {setCallSystemRinging(false);}
+    };
+    callKeep.addEventListener('didDisplayIncomingCall', onDisplayed);
+    callKeep.addEventListener('didDeactivateAudioSession', onAudioDeactivated);
 
     return () => {
       callKeep.removeEventListener('answerCall');
       callKeep.removeEventListener('endCall');
+      callKeep.removeEventListener('didPerformSetMutedCallAction');
+      callKeep.removeEventListener('didToggleHoldCallAction');
+      callKeep.removeEventListener('didActivateAudioSession');
+      callKeep.removeEventListener('didDeactivateAudioSession');
+      callKeep.removeEventListener('didResetProvider');
+      callKeep.removeEventListener('didDisplayIncomingCall');
     };
   }, [callKeep, dispatch]);
 
-  // Show / dismiss the native screen as the call state changes.
+  const displayName = call.roomName || 'Ethora';
+  const isRinging =
+    call.direction === 'incoming' && call.phase === 'ringing-incoming';
+  const isLive = call.phase === 'connecting' || call.phase === 'in-call';
+  const isOutgoing = call.direction === 'outgoing';
+  const peerConnected = session.anchorAt !== null;
+
+  // Report the call to the system as its state changes.
   useEffect(() => {
-    if (!callKeep || !readyRef.current) {return;}
+    if (!callKeep || !ready) {return;}
 
-    const isRinging =
-      call.direction === 'incoming' && call.phase === 'ringing-incoming';
+    const release = () => {
+      if (!activeUuidRef.current) {return;}
+      try {
+        callKeep.endCall(activeUuidRef.current);
+      } catch {
+        // Screen already gone.
+      }
+      activeUuidRef.current = null;
+      answeredRef.current = false;
+      outgoingReportedRef.current = 'none';
+    };
 
-    if (isRinging && !activeUuidRef.current) {
+    if (call.phase === 'idle' || call.phase === 'error') {
+      release();
+      return;
+    }
+
+    if (isRinging) {
+      if (activeUuidRef.current) {return;}
       const uuid = toUuid(call.callId || call.roomJid || String(Date.now()));
       activeUuidRef.current = uuid;
+      answeredRef.current = false;
+      // iOS: the system banner is the ring UI (Telegram-style); the in-app
+      // card would only cover the screen under it.
+      if (isIOS) {setCallSystemRinging(true);}
       try {
         callKeep.displayIncomingCall(
           uuid,
-          call.peerXmppUsername || call.roomName || 'Ethora',
-          call.roomName || undefined,
+          displayName,
+          displayName,
           'generic',
           call.kind === 'video'
         );
       } catch {
         activeUuidRef.current = null;
+        setCallSystemRinging(false);
       }
       return;
     }
 
-    // Any exit from ringing (answered in-app, declined, peer cancelled)
-    // must tear the system screen down or it hangs around ringing.
-    if (!isRinging && activeUuidRef.current && call.phase !== 'connecting' && call.phase !== 'in-call') {
+    // iOS: an outgoing call is a CallKit call from the first ring, so it
+    // shows in the Dynamic Island even before the peer answers.
+    if (isIOS && isOutgoing && !activeUuidRef.current && callKeep.startCall) {
+      // Unique per call: CallKit refuses a UUID it has seen before, and
+      // the callId only arrives with the token.
+      const uuid = toUuid(`${call.roomJid || ''}|${call.startedAt || Date.now()}`);
+      activeUuidRef.current = uuid;
+      outgoingReportedRef.current = 'none';
+      trace('startCall', uuid);
       try {
-        callKeep.endCall(activeUuidRef.current);
+        callKeep.startCall(uuid, displayName, displayName, 'generic', call.kind === 'video');
       } catch {
-        // Screen already gone.
+        activeUuidRef.current = null;
       }
-      activeUuidRef.current = null;
+      return;
+    }
+
+    const uuid = activeUuidRef.current;
+    if (!uuid) {return;}
+
+    if (isIOS && isOutgoing) {
+      if (peerConnected && outgoingReportedRef.current !== 'connected') {
+        outgoingReportedRef.current = 'connected';
+        callKeep.reportConnectedOutgoingCallWithUUID?.(uuid);
+      } else if (
+        isLive &&
+        !peerConnected &&
+        outgoingReportedRef.current === 'none'
+      ) {
+        outgoingReportedRef.current = 'connecting';
+        callKeep.reportConnectingOutgoingCallWithUUID?.(uuid);
+      }
+      return;
     }
 
-    if (call.phase === 'idle' && activeUuidRef.current) {
+    // Incoming, accepted with the in-app button: tell CallKit, or its
+    // screen keeps ringing on top of the call.
+    if (isIOS && isLive && !answeredRef.current) {
+      answeredRef.current = true;
       try {
-        callKeep.endCall(activeUuidRef.current);
+        callKeep.answerIncomingCall?.(uuid);
       } catch {
         // noop
       }
-      activeUuidRef.current = null;
     }
   }, [
     callKeep,
-    call.direction,
+    ready,
+    isIOS,
+    isRinging,
+    isLive,
+    isOutgoing,
+    peerConnected,
+    displayName,
     call.phase,
     call.callId,
     call.roomJid,
-    call.roomName,
-    call.peerXmppUsername,
+    call.startedAt,
     call.kind,
   ]);
 
-  // Nothing to clean up on unmount beyond the active screen: this hook
+  // Keep the system mute button in step with ours.
+  useEffect(() => {
+    const uuid = activeUuidRef.current;
+    if (!callKeep || !ready || !isIOS || !uuid || !isLive) {return;}
+    try {
+      callKeep.setMutedCall?.(uuid, !session.micOn);
+    } catch {
+      // noop
+    }
+  }, [callKeep, ready, isIOS, isLive, session.micOn]);
+
+  // Nothing to clean up on unmount beyond the active call: this hook
   // lives for the lifetime of the provider.
   useEffect(
     () => () => {
@@ -245,8 +420,4 @@ export const useCallKeep = (): void => {
     },
     [callKeep]
   );
-
-  // iOS-only note kept as a runtime no-op so the import isn't unused when
-  // the platform check is tree-shaken in release builds.
-  void Platform.OS;
 };

package/src/components/VideoCalls/useOngoingCallNotification.ts

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { useT } from '../../i18n/useT';
+import type {
+  OngoingCallNotification,
+  OngoingCallNotificationAction,
+} from '../../types/types';
+import { terminateActiveCall } from './callActions';
+import { toggleCallCamera, toggleCallMic, useCallSession } from './callSessionController';
+import { setCallMinimized } from './callUiStore';
+
+/**
+ * Drives the host's ongoing-call notification (`videoCalls.
+ * ongoingCallNotification`, an Android foreground-service notification in
+ * the Ethora app): shown while a call is connecting or connected, updated
+ * when the mic, camera or timer anchor change, and its buttons act on the
+ * call like the in-app ones.
+ */
+export const useOngoingCallNotification = (
+  adapter: OngoingCallNotification | undefined
+): void => {
+  const t = useT();
+  const call = useSelector((state: RootState) => state.call);
+  const session = useCallSession();
+  const shownRef = useRef(false);
+
+  const live =
+    !!call.token && (call.phase === 'connecting' || call.phase === 'in-call');
+
+  useEffect(() => {
+    if (!adapter) {return;}
+    return adapter.addActionListener((action: OngoingCallNotificationAction) => {
+      switch (action) {
+        case 'hangUp':
+          terminateActiveCall('ended');
+          break;
+        case 'toggleMic':
+          void toggleCallMic();
+          break;
+        case 'toggleCamera':
+          void toggleCallCamera();
+          break;
+        case 'open':
+          // Back from the notification: show the call, not the strip.
+          setCallMinimized(false);
+          break;
+      }
+    });
+  }, [adapter]);
+
+  const isVideo = call.kind === 'video';
+  const connectedAt = session.anchorAt;
+  const text =
+    connectedAt !== null
+      ? isVideo
+        ? t('call.notification.ongoingVideo')
+        : t('call.notification.ongoing')
+      : !session.connected
+        ? t('call.status.connecting')
+        : t('call.status.waitingForPeer');
+
+  useEffect(() => {
+    if (!adapter) {return;}
+    if (!live) {
+      if (shownRef.current) {
+        shownRef.current = false;
+        adapter.hide();
+      }
+      return;
+    }
+    shownRef.current = true;
+    adapter.show({
+      callId: call.callId || call.roomJid || 'call',
+      title: call.roomName || t('call.unknownCaller'),
+      text,
+      kind: call.kind,
+      connectedAt,
+      micOn: session.micOn,
+      cameraOn: isVideo && session.cameraOn,
+      labels: {
+        hangUp: t('call.action.hangUp'),
+        mute: t('call.notification.mute'),
+        unmute: t('call.notification.unmute'),
+        cameraOn: t('call.notification.cameraOn'),
+        cameraOff: t('call.notification.cameraOff'),
+      },
+    });
+  }, [
+    adapter,
+    live,
+    t,
+    text,
+    connectedAt,
+    isVideo,
+    call.callId,
+    call.roomJid,
+    call.roomName,
+    call.kind,
+    session.micOn,
+    session.cameraOn,
+  ]);
+
+  useEffect(
+    () => () => {
+      if (adapter && shownRef.current) {
+        shownRef.current = false;
+        adapter.hide();
+      }
+    },
+    [adapter]
+  );
+};