@ethora/chat-component-rn 26.5.21 → 26.6.10

package/src/components/VideoCalls/livekitRuntime.ts

@@ -0,0 +1,100 @@
+/**
+ * Optional-dependency bridge for the LiveKit React Native SDK.
+ *
+ * Calls are opt-in (`config.videoCalls.enabled`), and the LiveKit packages
+ * are NATIVE modules: they need a dev build, they cannot run in Expo Go,
+ * and they add camera/microphone entitlements to whatever app installs
+ * them. Most hosts embedding this chat SDK don't want calls at all, so
+ * `@livekit/react-native` and `@livekit/react-native-webrtc` are declared
+ * as OPTIONAL peer dependencies.
+ *
+ * That means a plain top-level `import ... from '@livekit/react-native'`
+ * is not allowed anywhere in the SDK: Metro resolves imports at bundle
+ * time, so a chat-only host would fail to build over a feature it never
+ * switched on. Everything call-related goes through `loadLiveKit()`, which
+ * requires the modules lazily at call time and returns null when they
+ * aren't installed. Callers surface that as a friendly config error rather
+ * than a redbox.
+ */
+
+export interface LiveKitRuntime {
+  /** livekit-client `Room` constructor. */
+  Room: any;
+  /** livekit-client `RoomEvent` enum. */
+  RoomEvent: any;
+  /** livekit-client `Track` enum (Track.Source.Camera etc). */
+  Track: any;
+  /** livekit-client `ConnectionState` enum. */
+  ConnectionState: any;
+  /** RN `<VideoTrack trackRef={...} />` renderer. */
+  VideoTrack: any;
+  /** Native audio session control (routing, speaker, focus). */
+  AudioSession: any;
+  /** Installs the WebRTC globals livekit-client expects. */
+  registerGlobals: () => void;
+}
+
+let cached: LiveKitRuntime | null | undefined;
+
+export const isLiveKitAvailable = (): boolean => loadLiveKit() !== null;
+
+/**
+ * Resolve the LiveKit runtime, or null when the optional native packages
+ * aren't installed in the host app. Result is memoised (including the
+ * failure) so a missing dependency doesn't re-throw on every render.
+ */
+export const loadLiveKit = (): LiveKitRuntime | null => {
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const rn = require('@livekit/react-native');
+    // `livekit-client` is a hard dependency of @livekit/react-native, so
+    // if the first require succeeded this one will too. Read the enums
+    // from it rather than from the RN wrapper: the wrapper re-exports a
+    // moving subset across versions, the core package does not.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const core = require('livekit-client');
+
+    cached = {
+      Room: core.Room,
+      RoomEvent: core.RoomEvent,
+      Track: core.Track,
+      ConnectionState: core.ConnectionState,
+      VideoTrack: rn.VideoTrack,
+      AudioSession: rn.AudioSession,
+      registerGlobals: rn.registerGlobals,
+    };
+  } catch {
+    cached = null;
+  }
+
+  return cached;
+};
+
+let globalsRegistered = false;
+
+/**
+ * `registerGlobals()` patches RTCPeerConnection / MediaStream / navigator
+ * .mediaDevices onto the JS global scope so livekit-client (written for
+ * browsers) works on React Native. It must run exactly once per JS
+ * context, before the first `new Room()`. Calling it repeatedly is
+ * harmless in current versions but has thrown in older ones, so guard it.
+ */
+export const ensureLiveKitGlobals = (runtime: LiveKitRuntime): void => {
+  if (globalsRegistered) {return;}
+  try {
+    runtime.registerGlobals?.();
+  } catch {
+    // Already registered by the host app (it may use LiveKit elsewhere).
+  }
+  globalsRegistered = true;
+};
+
+/** Reset memoised state. Test seam only. */
+export const __resetLiveKitRuntimeForTests = (): void => {
+  cached = undefined;
+  globalsRegistered = false;
+};

package/src/components/VideoCalls/useCallKeep.ts

@@ -0,0 +1,252 @@
+import { useEffect, useMemo, useRef } 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';
+
+/**
+ * Native incoming-call UI (Android ConnectionService / iOS CallKit) via
+ * the optional `react-native-callkeep` package.
+ *
+ * Why optional: CallKeep pulls a telecom-framework dependency into the
+ * host app and, on iOS, is only half a solution without PushKit. It is
+ * loaded lazily exactly like the LiveKit packages, so hosts that don't
+ * install it get the plain in-app ring screen and nothing breaks.
+ *
+ * Platform reality, stated plainly:
+ *  - Android: full value. A ConnectionService call shows the system
+ *    incoming-call screen over the lock screen.
+ *  - iOS: this only fires while the app is running. A CallKit screen from
+ *    a killed app requires a VoIP push over PushKit, which needs a
+ *    separate Apple VoIP certificate and a separate send path on the
+ *    backend (not FCM). Until that exists, iOS falls back to the regular
+ *    data push and the in-app ring screen.
+ */
+
+interface CallKeepModule {
+  setup: (options: any) => Promise<void>;
+  displayIncomingCall: (
+    uuid: string,
+    handle: string,
+    localizedCallerName?: string,
+    handleType?: string,
+    hasVideo?: boolean
+  ) => void;
+  endCall: (uuid: string) => void;
+  endAllCalls: () => void;
+  addEventListener: (event: string, handler: (payload: any) => void) => void;
+  removeEventListener: (event: string) => void;
+  setAvailable?: (available: boolean) => void;
+  backToForeground?: () => void;
+}
+
+let cachedCallKeep: CallKeepModule | null | undefined;
+
+export const loadCallKeep = (): CallKeepModule | null => {
+  if (cachedCallKeep !== undefined) {
+    return cachedCallKeep;
+  }
+  try {
+    // The JS package being installed does NOT mean the native side is
+    // linked: a host can `npm i react-native-callkeep` and skip
+    // `pod install`, or (very common in this repo) node_modules can carry
+    // it over from another branch whose build did link it. In that state
+    // requiring the package builds a `new NativeEventEmitter(null)` at
+    // module scope, which throws an invariant that RN surfaces as an
+    // uncaught redbox on every render of the call overlay — the whole app
+    // becomes unusable over a feature the host never switched on.
+    // Probing NativeModules first keeps the optional dependency genuinely
+    // optional: no native module => behave exactly as if it isn't installed.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { NativeModules } = require('react-native');
+    if (!NativeModules?.RNCallKeep) {
+      cachedCallKeep = null;
+      return cachedCallKeep;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('react-native-callkeep');
+    cachedCallKeep = (mod?.default || mod) as CallKeepModule;
+  } catch {
+    cachedCallKeep = null;
+  }
+  return cachedCallKeep;
+};
+
+// CallKeep identifies calls by UUID. Our callIds aren't UUIDs, so derive a
+// stable v4-shaped string from the callId: same call always maps to the
+// same UUID, which is what endCall() needs to dismiss the right screen.
+const toUuid = (seed: string): string => {
+  let hash = 0x811c9dc5;
+  const bytes: number[] = [];
+  for (let i = 0; i < 32; i++) {
+    const ch = seed.charCodeAt(i % Math.max(1, seed.length)) + i;
+    hash ^= ch;
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+    bytes.push(hash & 0xff);
+  }
+  const hex = bytes.map((b) => b.toString(16).padStart(2, '0')).join('');
+  return [
+    hex.slice(0, 8),
+    hex.slice(8, 12),
+    '4' + hex.slice(13, 16),
+    ((parseInt(hex[16], 16) & 0x3) | 0x8).toString(16) + hex.slice(17, 20),
+    hex.slice(20, 32),
+  ].join('-');
+};
+
+export const useCallKeep = (): void => {
+  const dispatch = useDispatch();
+  const call = useSelector((state: RootState) => state.call);
+  const callKeep = useMemo(() => loadCallKeep(), []);
+  const activeUuidRef = useRef<string | null>(null);
+  const readyRef = useRef(false);
+
+  // One-time native setup.
+  useEffect(() => {
+    if (!callKeep) {return;}
+    let cancelled = false;
+
+    (async () => {
+      try {
+        await callKeep.setup({
+          ios: {
+            appName: 'Ethora',
+            supportsVideo: true,
+          },
+          android: {
+            alertTitle: 'Permissions required',
+            alertDescription:
+              'This application needs to access your phone accounts to show incoming calls',
+            cancelButton: 'Cancel',
+            okButton: 'ok',
+            additionalPermissions: [],
+            foregroundService: {
+              channelId: 'com.ethora.chat.calls',
+              channelName: 'Incoming calls',
+              notificationTitle: 'Call in progress',
+            },
+          },
+        });
+        if (cancelled) {return;}
+        callKeep.setAvailable?.(true);
+        readyRef.current = true;
+      } catch {
+        // 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;
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [callKeep]);
+
+  // Bridge native answer/end actions back into Redux.
+  useEffect(() => {
+    if (!callKeep) {return;}
+
+    const onAnswer = () => {
+      // 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') {
+        dispatch(acceptIncomingCall());
+      }
+    };
+
+    const onEnd = () => {
+      const snapshot = store.getState().call;
+      if (snapshot.phase === 'idle') {return;}
+      if (
+        snapshot.direction === 'incoming' &&
+        snapshot.phase === 'ringing-incoming'
+      ) {
+        sendCallStateSignal('declined');
+        dispatch(declineIncomingCall());
+      }
+    };
+
+    callKeep.addEventListener('answerCall', onAnswer);
+    callKeep.addEventListener('endCall', onEnd);
+
+    return () => {
+      callKeep.removeEventListener('answerCall');
+      callKeep.removeEventListener('endCall');
+    };
+  }, [callKeep, dispatch]);
+
+  // Show / dismiss the native screen as the call state changes.
+  useEffect(() => {
+    if (!callKeep || !readyRef.current) {return;}
+
+    const isRinging =
+      call.direction === 'incoming' && call.phase === 'ringing-incoming';
+
+    if (isRinging && !activeUuidRef.current) {
+      const uuid = toUuid(call.callId || call.roomJid || String(Date.now()));
+      activeUuidRef.current = uuid;
+      try {
+        callKeep.displayIncomingCall(
+          uuid,
+          call.peerXmppUsername || call.roomName || 'Ethora',
+          call.roomName || undefined,
+          'generic',
+          call.kind === 'video'
+        );
+      } catch {
+        activeUuidRef.current = null;
+      }
+      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') {
+      try {
+        callKeep.endCall(activeUuidRef.current);
+      } catch {
+        // Screen already gone.
+      }
+      activeUuidRef.current = null;
+    }
+
+    if (call.phase === 'idle' && activeUuidRef.current) {
+      try {
+        callKeep.endCall(activeUuidRef.current);
+      } catch {
+        // noop
+      }
+      activeUuidRef.current = null;
+    }
+  }, [
+    callKeep,
+    call.direction,
+    call.phase,
+    call.callId,
+    call.roomJid,
+    call.roomName,
+    call.peerXmppUsername,
+    call.kind,
+  ]);
+
+  // Nothing to clean up on unmount beyond the active screen: this hook
+  // lives for the lifetime of the provider.
+  useEffect(
+    () => () => {
+      if (callKeep && activeUuidRef.current) {
+        try {
+          callKeep.endCall(activeUuidRef.current);
+        } catch {
+          // noop
+        }
+      }
+    },
+    [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/styled/AudioMessage.tsx

@@ -7,7 +7,12 @@ import {
   ActivityIndicator,
   Platform,
 } from 'react-native';
-import { Audio, AVPlaybackStatus } from 'expo-av';
+import {
+  createAudioPlayer,
+  setAudioModeAsync,
+  type AudioPlayer,
+  type AudioStatus,
+} from 'expo-audio';
 import * as FileSystem from 'expo-file-system/legacy';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { PauseIcon, PlayIcon } from '../../assets/icons';
@@ -196,11 +201,11 @@ const getContainerExtension = (container: AudioContainer) => {
   }
 };
 
-// AVFoundation (expo-av) and the iOS WKWebView <audio> element cannot
+// AVFoundation (expo-audio) and the iOS WKWebView <audio> element cannot
 // demux/decode WebM or Ogg Opus — only `AudioContext.decodeAudioData` can
 // on iOS. So on iOS those two containers go through the WebView decoder.
 // Everything else (mp3/m4a/aac/wav), and ALL of Android (ExoPlayer handles
-// Opus natively), plays straight through expo-av.
+// Opus natively), plays straight through expo-audio.
 const requiresWebAudioDecode = (container: AudioContainer) =>
   Platform.OS === 'ios' && (container === 'webm' || container === 'ogg');
 
@@ -213,7 +218,7 @@ const requiresWebAudioDecode = (container: AudioContainer) =>
 //     cannot supply, so both hang silently.
 // Therefore the page decodes Opus → PCM, re-encodes to a WAV blob, and ships
 // the bytes back to RN as base64. RN writes the WAV to cache and plays it
-// through expo-av (native, no gesture limits, real play/pause/seek).
+// through expo-audio (native, no gesture limits, real play/pause/seek).
 const WEB_DECODER_HTML = `<!doctype html>
 <html>
   <head>
@@ -314,7 +319,11 @@ const AudioMessage = ({
   originalName,
 }: AudioMessageProps) => {
   const { config } = useChatSettingState();
-  const soundRef = useRef<Audio.Sound | null>(null);
+  const soundRef = useRef<AudioPlayer | null>(null);
+  // expo-audio delivers progress through an event subscription instead of
+  // expo-av's `onPlaybackStatusUpdate` callback argument, so the handle has
+  // to be held and removed alongside the player itself.
+  const statusSubRef = useRef<{ remove: () => void } | null>(null);
   const webViewRef = useRef<WebView | null>(null);
   const preparedRef = useRef<PreparedSource | null>(null);
   const bridgeReadyRef = useRef(false);
@@ -338,6 +347,29 @@ const AudioMessage = ({
     }
   };
 
+  // expo-audio players are native shared objects: they are NOT garbage
+  // collected with the component, so every one we create has to be
+  // explicitly `remove()`d (expo-av's `unloadAsync` equivalent) and its
+  // status subscription torn down first.
+  const releasePlayer = () => {
+    statusSubRef.current?.remove();
+    statusSubRef.current = null;
+    const player = soundRef.current;
+    soundRef.current = null;
+    if (player) {
+      try {
+        player.pause();
+      } catch {
+        /* already released */
+      }
+      try {
+        player.remove();
+      } catch {
+        /* already released */
+      }
+    }
+  };
+
   const fail = (reason: unknown) => {
     clearLoadingGuard();
     if (unmountedRef.current) {
@@ -360,7 +392,7 @@ const AudioMessage = ({
   };
 
   // Hard ceiling on the loading spinner — whatever stalls (a hung network
-  // request, a WebView that never decodes, expo-av wedging on a bad file)
+  // request, a WebView that never decodes, a player that never loads)
   // the control resolves to an error state instead of spinning forever
   // (the customer-reported "stuck spinner").
   const armLoadingGuard = () => {
@@ -480,50 +512,70 @@ const AudioMessage = ({
     }
   };
 
-  const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+  // expo-audio reports times in SECONDS (expo-av used milliseconds); the
+  // whole UI below is millisecond-based, so convert at this boundary and
+  // nowhere else.
+  const onPlaybackStatusUpdate = (status: AudioStatus) => {
     if (!status.isLoaded) {
-      if (status.error) {
-        logAudioDebug('playback status error', { src, error: status.error });
-      }
       return;
     }
-    setPosition(status.positionMillis);
-    setDuration(status.durationMillis ?? 0);
-    setIsPlaying(status.isPlaying);
+    setPosition(Math.max(0, status.currentTime * 1000));
+    setDuration(status.duration > 0 ? status.duration * 1000 : 0);
+    setIsPlaying(status.playing);
     if (status.didJustFinish) {
       didFinishRef.current = true;
       setIsPlaying(false);
       setPosition(0);
-      void soundRef.current?.setStatusAsync({
-        shouldPlay: false,
-        positionMillis: 0,
-      });
+      const player = soundRef.current;
+      if (player) {
+        player.pause();
+        void player.seekTo(0);
+      }
     }
   };
 
   const startNativePlayback = async (localUri: string) => {
     try {
-      await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
+      await setAudioModeAsync({ playsInSilentMode: true });
     } catch {
       /* non-fatal — still plays through the ringer channel */
     }
-    const { sound } = await withTimeout<{
-      sound: Audio.Sound;
-      status: AVPlaybackStatus;
-    }>(
-      Audio.Sound.createAsync(
-        { uri: localUri },
-        { shouldPlay: true },
-        onPlaybackStatusUpdate
-      ),
-      12000,
-      'audio_create_timeout'
+    // expo-audio has no awaitable `createAsync`: the player is constructed
+    // synchronously and loads in the background, reporting `isLoaded` via
+    // the status event. Wait for that first loaded status (same 12s budget
+    // expo-av's createAsync had) so the spinner still resolves to either
+    // real playback or the error state, never to a silent dead button.
+    const player = createAudioPlayer({ uri: localUri }, { updateInterval: 250 });
+    let settleLoaded: (() => void) | null = null;
+    const loaded = new Promise<void>((resolve) => {
+      settleLoaded = resolve;
+    });
+    const subscription = player.addListener(
+      'playbackStatusUpdate',
+      (status: AudioStatus) => {
+        if (status.isLoaded && settleLoaded) {
+          settleLoaded();
+          settleLoaded = null;
+        }
+        onPlaybackStatusUpdate(status);
+      }
     );
+
+    try {
+      await withTimeout(loaded, 12000, 'audio_create_timeout');
+    } catch (error) {
+      subscription.remove();
+      player.remove();
+      throw error;
+    }
     if (unmountedRef.current) {
-      void sound.unloadAsync();
+      subscription.remove();
+      player.remove();
       return;
     }
-    soundRef.current = sound;
+    soundRef.current = player;
+    statusSubRef.current = subscription;
+    player.play();
     clearLoadingGuard();
     setIsLoading(false);
     setPlaybackError(false);
@@ -595,14 +647,21 @@ const AudioMessage = ({
     // decoded-WAV from the WebView path) → plain toggle.
     if (soundRef.current) {
       try {
+        // `play()` / `pause()` emit NO status event of their own (expo-av's
+        // playAsync/pauseAsync resolved with one). Playing state only ever
+        // reaches us through the periodic time observer, and that observer
+        // stops while paused — so without setting this here the button
+        // would latch on "pause" forever and never resume.
         if (isPlaying) {
-          await soundRef.current.pauseAsync();
+          soundRef.current.pause();
+          setIsPlaying(false);
         } else {
           if (didFinishRef.current) {
-            await soundRef.current.setPositionAsync(0);
+            await soundRef.current.seekTo(0);
             didFinishRef.current = false;
           }
-          await soundRef.current.playAsync();
+          soundRef.current.play();
+          setIsPlaying(true);
         }
       } catch (error) {
         fail(error);
@@ -643,7 +702,7 @@ const AudioMessage = ({
     return () => {
       unmountedRef.current = true;
       clearLoadingGuard();
-      soundRef.current?.unloadAsync();
+      releasePlayer();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -651,8 +710,7 @@ const AudioMessage = ({
   // Full reset whenever the source changes (component reused for a new
   // message / re-render with a different src).
   useEffect(() => {
-    soundRef.current?.unloadAsync();
-    soundRef.current = null;
+    releasePlayer();
     preparedRef.current = null;
     bridgeReadyRef.current = false;
     injectedRef.current = false;
@@ -693,6 +751,8 @@ const AudioMessage = ({
       ) : null}
       <View style={styles.container}>
         <TouchableOpacity
+          testID="audio-play-button"
+          accessibilityLabel="audio-play-button"
           style={[styles.playButton, { backgroundColor: primaryColor }]}
           onPress={togglePlayback}
           disabled={isLoading}

package/src/components/styled/RoomListComponents/index.tsx

@@ -68,12 +68,19 @@ export const ChatInfo = ({ children }: { children: React.ReactNode }) => (
 );
 
 // Chat name and last message display
+// One line, ellipsised. Without this a long room title (or a display name
+// that happens to be an email) wrapped to three or four lines and pushed
+// the whole row's height around.
 export const ChatName = ({ text }: { text: string }) => (
-  <Text style={styles.chatName}>{text}</Text>
+  <Text style={styles.chatName} numberOfLines={1} ellipsizeMode="tail">
+    {text}
+  </Text>
 );
 
 export const LastMessage = ({ children }: { children: React.ReactNode }) => (
-  <Text style={styles.lastMessage}>{children}</Text>
+  <Text style={styles.lastMessage} numberOfLines={1} ellipsizeMode="tail">
+    {children}
+  </Text>
 );
 
 // User count display for the chat
@@ -145,7 +152,12 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   chatInfo: {
-    maxWidth: '60%',
+    // `flexShrink` + `minWidth: 0` is what actually lets the child Text
+    // ellipsise: without them the row keeps its intrinsic width and the
+    // text wraps instead of truncating, whatever numberOfLines says.
+    flexShrink: 1,
+    minWidth: 0,
+    maxWidth: '80%',
   },
   chatName: {
     fontWeight: 'bold',