@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/components/VideoCalls/VideoCallOverlay.tsx

@@ -35,7 +35,9 @@ import { sendCallStateSignal } from '../../networking/callTokenStanza';
 import { useTheme } from '../../hooks/useTheme';
 import type { ChatTheme } from '../../theme/theme';
 import { VideoCallSession } from './VideoCallSession';
+import { P2PCallRunner } from './P2PCallRunner';
 import { startCallSession } from './callSessionController';
+import { callCanRenderSession } from './callLive';
 import { declineActiveCall, terminateActiveCall } from './callActions';
 import {
   CALL_BAR_HEIGHT,
@@ -197,7 +199,7 @@ const RingingCard: FC<RingingCardProps> = ({
       <View style={styles.ringingIdentity}>
         <Text style={[styles.ringingName, { color: theme.text }]}>
           {roomName ||
-            (variant === 'incoming' ? t('call.unknownCaller') : t('call.title'))}
+            (variant === 'incoming' ? t('call.incomingNeutral') : t('call.title'))}
         </Text>
         <View style={styles.ringingSubtitleRow}>
           {kind === 'audio' ? (
@@ -470,7 +472,14 @@ const VideoCallOverlayInner: FC = () => {
 
   const videoCallsConfig = config?.videoCalls;
   const enabled = videoCallsConfig?.enabled === true;
-  const livekitUrl = (videoCallsConfig?.livekitUrl || '').trim();
+  // The server's own LiveKit URL (call-token or create response) wins over
+  // the host config.
+  const livekitUrl = (
+    call.livekitUrl ||
+    videoCallsConfig?.livekitUrl ||
+    ''
+  ).trim();
+  const isP2P = call.mode === 'p2p';
   const primaryColor = theme.primary || config?.colors?.primary || DEFAULT_PRIMARY;
 
   const isOpen = enabled && call.phase !== 'idle';
@@ -486,10 +495,11 @@ const VideoCallOverlayInner: FC = () => {
   // Shared with the header strip (ActiveCallBar), which expands it again.
   const { minimized, systemRinging } = useCallUi();
 
-  const canRenderSession =
-    !!call.token &&
-    (call.phase === 'connecting' || call.phase === 'in-call') &&
-    !!livekitUrl;
+  // A p2p call has no LiveKit token or URL: the media is the peer connection
+  // owned by P2PCallRunner.
+  const canRenderSession = isP2P
+    ? callCanRenderSession(call)
+    : callCanRenderSession(call) && !!livekitUrl;
   const isMinimized = minimized && canRenderSession;
   // Expanding from the header strip slides the call down from the top
   // instead of fading it in.
@@ -502,16 +512,17 @@ const VideoCallOverlayInner: FC = () => {
   // Join the LiveKit room once the call has a token. Idempotent, and the
   // controller tears itself down when the call slice leaves these phases.
   useEffect(() => {
-    if (!enabled || !canRenderSession || !call.token) {return;}
+    if (!enabled || isP2P || !canRenderSession || !call.token) {return;}
     startCallSession({
       token: call.token,
       livekitUrl,
       kind: call.kind,
+      isGroup: call.isGroup,
       startWithMicOn: videoCallsConfig?.startWithMicOn,
       startWithCameraOn: videoCallsConfig?.startWithCameraOn,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, canRenderSession, call.token, livekitUrl, call.kind]);
+  }, [enabled, isP2P, canRenderSession, call.token, livekitUrl, call.kind, call.isGroup]);
 
   // Give up on an unanswered outgoing dial. Unlike web (which only shows
   useEffect(() => {
@@ -575,6 +586,11 @@ const VideoCallOverlayInner: FC = () => {
 
   const ringingHeader = useMemo(() => {
     if (call.direction === 'incoming') {
+      if (call.isGroup) {
+        return call.kind === 'audio'
+          ? t('call.incomingGroupAudio')
+          : t('call.incomingGroupVideo');
+      }
       return call.kind === 'audio'
         ? t('call.incomingAudio')
         : t('call.incomingVideo');
@@ -583,16 +599,38 @@ const VideoCallOverlayInner: FC = () => {
     if (call.phase === 'connecting') {return t('call.connecting');}
     if (call.phase === 'error') {return t('call.failed');}
     return t('call.title');
-  }, [call.direction, call.phase, call.kind, t]);
+  }, [call.direction, call.phase, call.kind, call.isGroup, t]);
 
   const ringingSubtitle = useMemo(() => {
+    // The card title is the room's name; make it clear it is a group ring.
+    const label = call.isGroup
+      ? call.kind === 'audio'
+        ? t('call.groupAudioCall')
+        : t('call.groupVideoCall')
+      : call.kind === 'audio'
+        ? t('call.audioCall')
+        : t('call.videoCall');
     if (call.direction === 'incoming') {
-      return call.kind === 'audio' ? t('call.audioCall') : t('call.videoCall');
+      // "<person> is calling in <room>" once both are known.
+      return call.isGroup && call.callerName && call.roomName
+        ? t('call.callingIn', { caller: call.callerName, room: call.roomName })
+        : label;
+    }
+    if (call.phase === 'connecting') {
+      return isP2P ? t('call.connecting') : t('call.connectingToRoom');
     }
-    if (call.phase === 'connecting') {return t('call.connectingToRoom');}
     if (call.phase === 'error') {return t('call.tryAgainLater');}
-    return call.kind === 'audio' ? t('call.audioCall') : t('call.videoCall');
-  }, [call.direction, call.kind, call.phase, t]);
+    return label;
+  }, [
+    call.direction,
+    call.kind,
+    call.phase,
+    call.isGroup,
+    call.callerName,
+    call.roomName,
+    isP2P,
+    t,
+  ]);
 
   if (!isOpen) {
     return null;
@@ -610,6 +648,7 @@ const VideoCallOverlayInner: FC = () => {
   const renderSession = (collapse: () => void) => (
     <VideoCallSession
       kind={call.kind}
+      isGroup={call.isGroup}
       peerName={call.roomName}
       primaryColor={primaryColor}
       icons={videoCallsConfig?.icons}
@@ -670,7 +709,7 @@ const VideoCallOverlayInner: FC = () => {
               theme={theme}
               errorMessage={
                 call.error ||
-                (!livekitUrl ? t('call.error.missingLivekitUrl') : null)
+                (!livekitUrl && !isP2P ? t('call.error.missingLivekitUrl') : null)
               }
               onDismiss={() => dispatch(resetCall())}
             />
@@ -697,10 +736,16 @@ export const VideoCallOverlay: FC = () => {
   const callId = useSelector(
     (state: RootState) => state.call.callId || String(state.call.startedAt || '')
   );
+  // The runner is headless and owns the p2p controller. It sits beside the
+  // boundary, not inside it: a crash in the call UI blanks the screen, it
+  // must not tear the call down.
   return (
-    <CallErrorBoundary resetKey={callId}>
-      <VideoCallOverlayInner />
-    </CallErrorBoundary>
+    <>
+      <P2PCallRunner />
+      <CallErrorBoundary resetKey={callId}>
+        <VideoCallOverlayInner />
+      </CallErrorBoundary>
+    </>
   );
 };
 

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useState } from 'react';
 import {
   ActivityIndicator,
   Animated,
@@ -12,27 +12,18 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { VideoCallIcons } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
-  CameraOffIcon,
-  CameraOnIcon,
   FillVideoIcon,
   FitVideoIcon,
-  HangUpIcon,
   MicOffIcon,
-  MicOnIcon,
   MinimizeIcon,
-  SpeakerIcon,
-  SpeakerOffIcon,
-  SwitchCameraIcon,
 } from './CallIcons';
 import { loadLiveKit } from './livekitRuntime';
-import {
-  dismissCallDeviceError,
-  switchCallCamera,
-  toggleCallCamera,
-  toggleCallMic,
-  toggleCallSpeaker,
-  useCallSession,
-} from './callSessionController';
+import { loadWebRTC } from '../../calls/p2p/webrtcRuntime';
+import { dismissCallDeviceError, useCallSession } from './callSessionController';
+import { CallVideo } from './CallVideo';
+import { CallControlBar } from './CallControlBar';
+import { GroupCallView } from './GroupCallView';
+import { formatCallDuration, useSharedCallElapsed } from './callElapsed';
 import { usePipTile } from './usePipTile';
 import { useT } from '../../i18n/useT';
 
@@ -40,11 +31,15 @@ const DEFAULT_PRIMARY = '#0052CD';
 const SURFACE_DARK = '#0B1220';
 const TEXT_ON_DARK = '#FFFFFF';
 const TEXT_MUTED = '#9AA4B2';
-const DANGER = '#E53935';
 const CONTROL_IDLE = 'rgba(255, 255, 255, 0.16)';
 
+// Re-exported for the header strip, which shares the timer with this screen.
+export { formatCallDuration, useSharedCallElapsed };
+
 export interface VideoCallSessionProps {
   kind?: 'audio' | 'video';
+  /** Group room call: everyone in a grid, instead of the 1:1 stage. */
+  isGroup?: boolean;
   /** Display name of the peer, shown until LiveKit reports theirs. */
   peerName?: string | null;
   primaryColor?: string;
@@ -55,42 +50,18 @@ export interface VideoCallSessionProps {
 }
 
 /**
- * Seconds since the call truly connected, counted from the server-set
- * `joinedAt` anchor so both sides show the same time (web's
- * useSharedCallElapsed). Null until the peer is in.
- */
-export const useSharedCallElapsed = (anchorAt: number | null): number | null => {
-  const [, tick] = useState(0);
-  useEffect(() => {
-    if (anchorAt === null) {return;}
-    const id = setInterval(() => tick((n) => n + 1), 1000);
-    return () => clearInterval(id);
-  }, [anchorAt]);
-  if (anchorAt === null) {return null;}
-  return Math.max(0, Math.floor((Date.now() - anchorAt) / 1000));
-};
-
-export const formatCallDuration = (totalSeconds: number): string => {
-  const safe = Math.max(0, Math.floor(totalSeconds));
-  const hours = Math.floor(safe / 3600);
-  const minutes = Math.floor((safe % 3600) / 60);
-  const seconds = safe % 60;
-  const mm = String(minutes).padStart(2, '0');
-  const ss = String(seconds).padStart(2, '0');
-  return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`;
-};
-
-/**
- * The call screen, React Native edition. Pure view over the LiveKit session
- * owned by callSessionController.ts: it can unmount and remount (minimize,
- * leaving the chat screen) without touching the connection.
+ * The call screen, React Native edition. Pure view over the media session
+ * of the call (the LiveKit room in callSessionController.ts, or the peer to
+ * peer connection in p2pCallSession.ts): it can unmount and remount
+ * (minimize, leaving the chat screen) without touching the connection.
  *
  * The web SDK builds this on `@livekit/components-react` hooks, which
- * assume a DOM. Only the video surface comes from `@livekit/react-native`
- * (`<VideoTrack />`, `trackRef` prop, >= 2.7).
+ * assume a DOM. Only the video surfaces come from the native packages
+ * (`<CallVideo />`: LiveKit's `<VideoTrack />` or the fork's `<RTCView />`).
  */
 export const VideoCallSession: FC<VideoCallSessionProps> = ({
   kind = 'video',
+  isGroup = false,
   peerName,
   primaryColor = DEFAULT_PRIMARY,
   icons,
@@ -99,7 +70,8 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
 }) => {
   const t = useT();
   const insets = useSafeAreaInsets();
-  const runtime = loadLiveKit();
+  // A p2p call needs the WebRTC package only, a LiveKit call the LiveKit one.
+  const hasMedia = !!loadLiveKit() || !!loadWebRTC();
   const session = useCallSession();
   const pipTile = usePipTile({ topInset: insets.top });
   const elapsed = useSharedCallElapsed(session.anchorAt);
@@ -110,7 +82,7 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   // minimize stretches it to fill (the old behaviour) and back.
   const [fillRemote, setFillRemote] = useState(false);
 
-  if (!runtime) {
+  if (!hasMedia) {
     return (
       <View style={[styles.canvas, styles.centered]}>
         <Text style={styles.errorText}>{t('call.error.sdkMissing')}</Text>
@@ -118,7 +90,20 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     );
   }
 
-  const { VideoTrack } = runtime;
+  if (isGroup) {
+    return (
+      <GroupCallView
+        session={session}
+        kind={kind}
+        title={peerName}
+        primaryColor={primaryColor}
+        icons={icons}
+        onToggleMinimize={onToggleMinimize}
+        onHangup={onHangup}
+      />
+    );
+  }
+
   const {
     connected,
     remoteJoined,
@@ -126,11 +111,11 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     localVideo,
     micOn,
     cameraOn,
-    speakerOn,
     deviceError,
     remoteMicMuted,
     facingMode,
     localVideoEpoch,
+    reconnecting,
   } = session;
   // The call slice's name (the chat title) first, as web does: LiveKit's
   // participant name is often just the opaque xmpp identity.
@@ -150,11 +135,16 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   const selfMirror = facingMode === 'user';
   // The local view remounts when the camera is re-acquired (switching
   // front/back), so it never keeps rendering the stopped stream.
+  // A p2p stream handle also carries its track ids (`key`), so a track that
+  // arrives or is replaced remounts the view.
   const videoKey = (ref: any) =>
-    ref === localVideo ? `local-${localVideoEpoch}` : 'remote';
+    `${ref === localVideo ? `local-${localVideoEpoch}` : 'remote'}${
+      ref?.key ? `:${ref.key}` : ''
+    }`;
 
-  const statusText =
-    elapsed !== null
+  const statusText = reconnecting
+    ? t('call.status.reconnecting')
+    : elapsed !== null
       ? formatCallDuration(elapsed)
       : !connected
         ? t('call.status.connecting')
@@ -169,9 +159,9 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
       {/* Stage */}
       <View style={styles.stage} onLayout={pipTile.onStageLayout}>
         {mainVideo ? (
-          <VideoTrack
+          <CallVideo
             key={videoKey(mainVideo)}
-            trackRef={mainVideo}
+            source={mainVideo}
             style={styles.remoteVideo}
             objectFit={mainFit}
             mirror={isSwapped && selfMirror}
@@ -232,9 +222,9 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
               accessibilityRole="button"
               accessibilityLabel={t('call.action.swapVideo')}
             >
-              <VideoTrack
+              <CallVideo
                 key={videoKey(pipVideo)}
-                trackRef={pipVideo}
+                source={pipVideo}
                 style={styles.pipVideo}
                 objectFit="cover"
                 mirror={!isSwapped && selfMirror}
@@ -286,62 +276,12 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
       </View>
 
       {/* Control bar */}
-      <View style={[styles.controls, { paddingBottom: 20 + insets.bottom }]}>
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessibilityLabel={micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
-          onPress={toggleCallMic}
-          style={[styles.controlButton, { backgroundColor: micOn ? CONTROL_IDLE : DANGER }]}
-        >
-          {micOn
-            ? (icons?.micOn ?? <MicOnIcon color={TEXT_ON_DARK} />)
-            : (icons?.micOff ?? <MicOffIcon color={TEXT_ON_DARK} />)}
-        </TouchableOpacity>
-
-        {isVideo && (
-          <TouchableOpacity
-            accessibilityRole="button"
-            accessibilityLabel={
-              cameraOn ? t('call.action.stopCamera') : t('call.action.startCamera')
-            }
-            onPress={toggleCallCamera}
-            style={[styles.controlButton, { backgroundColor: cameraOn ? CONTROL_IDLE : DANGER }]}
-          >
-            {cameraOn
-              ? (icons?.cameraOn ?? <CameraOnIcon color={TEXT_ON_DARK} />)
-              : (icons?.cameraOff ?? <CameraOffIcon color={TEXT_ON_DARK} />)}
-          </TouchableOpacity>
-        )}
-
-        {isVideo && cameraOn && (
-          <TouchableOpacity
-            accessibilityRole="button"
-            accessibilityLabel={t('call.action.switchCamera')}
-            onPress={switchCallCamera}
-            style={[styles.controlButton, { backgroundColor: CONTROL_IDLE }]}
-          >
-            <SwitchCameraIcon color={TEXT_ON_DARK} />
-          </TouchableOpacity>
-        )}
-
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessibilityLabel={speakerOn ? t('call.action.speakerOff') : t('call.action.speakerOn')}
-          onPress={toggleCallSpeaker}
-          style={[styles.controlButton, { backgroundColor: CONTROL_IDLE }]}
-        >
-          {speakerOn ? <SpeakerIcon color={TEXT_ON_DARK} /> : <SpeakerOffIcon color={TEXT_ON_DARK} />}
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessibilityLabel={t('call.action.hangUp')}
-          onPress={onHangup}
-          style={[styles.controlButton, styles.hangupButton]}
-        >
-          {icons?.hangup ?? <HangUpIcon color={TEXT_ON_DARK} />}
-        </TouchableOpacity>
-      </View>
+      <CallControlBar
+        session={session}
+        isVideo={isVideo}
+        icons={icons}
+        onHangup={onHangup}
+      />
     </View>
   );
 };
@@ -454,24 +394,6 @@ const styles = StyleSheet.create({
   fitButton: {
     left: 60,
   },
-  controls: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 16,
-    paddingTop: 20,
-    paddingHorizontal: 16,
-  },
-  controlButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  hangupButton: {
-    backgroundColor: DANGER,
-  },
   errorText: {
     color: TEXT_ON_DARK,
     fontSize: 14,

package/src/components/VideoCalls/callActions.ts

@@ -8,6 +8,7 @@ import {
 } from '../../networking/callTokenStanza';
 import { translateKey } from '../../i18n/strings';
 import { getGlobalXmppClient } from '../../utils/clientRegistry';
+import { reportDeclineIfP2P } from '../../calls/declineReport';
 
 /**
  * Call teardown that doesn't need a mounted component.
@@ -48,6 +49,7 @@ export const terminateActiveCall = (state: CallSignalState): void => {
 };
 
 export const declineActiveCall = (): void => {
+  reportDeclineIfP2P(store.getState().call);
   sendCallStateSignal('declined');
   store.dispatch(declineIncomingCall());
 };
@@ -62,6 +64,7 @@ const DECLINE_SIGNAL_POLL_MS = 500;
  */
 export const declineActiveCallWhenOnline = (): void => {
   const call = store.getState().call;
+  reportDeclineIfP2P(call);
   const signal = {
     peerXmppUsername: call.peerXmppUsername,
     callId: call.callId,

package/src/components/VideoCalls/callElapsed.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Seconds since the call truly connected, counted from the server-set
+ * `joinedAt` anchor so both sides show the same time (web's
+ * useSharedCallElapsed). Null until the peer is in.
+ */
+export const useSharedCallElapsed = (anchorAt: number | null): number | null => {
+  const [, tick] = useState(0);
+  useEffect(() => {
+    if (anchorAt === null) {return;}
+    const id = setInterval(() => tick((n) => n + 1), 1000);
+    return () => clearInterval(id);
+  }, [anchorAt]);
+  if (anchorAt === null) {return null;}
+  return Math.max(0, Math.floor((Date.now() - anchorAt) / 1000));
+};
+
+export const formatCallDuration = (totalSeconds: number): string => {
+  const safe = Math.max(0, Math.floor(totalSeconds));
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  const mm = String(minutes).padStart(2, '0');
+  const ss = String(seconds).padStart(2, '0');
+  return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`;
+};

package/src/components/VideoCalls/callLive.ts

@@ -0,0 +1,13 @@
+import type { CallState } from '../../roomStore/callSlice';
+
+/**
+ * True while a call is far enough along to have a media session: connecting
+ * or in the call. A LiveKit call also needs its token (that is what the room
+ * is joined with); a peer to peer call has none, its media is the peer
+ * connection, so the phase alone decides.
+ */
+export const callCanRenderSession = (
+  call: Pick<CallState, 'phase' | 'mode' | 'token'>
+): boolean =>
+  (call.phase === 'connecting' || call.phase === 'in-call') &&
+  (call.mode === 'p2p' || !!call.token);