@ethora/chat-component-rn 26.10.10 → 26.10.11

package/src/components/VideoCalls/GroupCallView.tsx

@@ -0,0 +1,324 @@
+import React, { FC } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { VideoCallIcons } from '../../types/types';
+import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
+import { CallVideo } from './CallVideo';
+import { CallControlBar } from './CallControlBar';
+import { MicOffIcon, MinimizeIcon } from './CallIcons';
+import { dismissCallDeviceError } from './callSessionController';
+import type { CallParticipantView, CallSessionSnapshot } from './callSessionTypes';
+import { gridColumns, pickVideoTiles, speakingNames } from './groupLayout';
+import { formatCallDuration, useSharedCallElapsed } from './callElapsed';
+import { useT } from '../../i18n/useT';
+
+const SURFACE_DARK = '#0B1220';
+const TILE_DARK = '#111827';
+const TEXT_ON_DARK = '#FFFFFF';
+const TEXT_MUTED = 'rgba(255, 255, 255, 0.7)';
+const DANGER = '#E53935';
+const GAP = 8;
+const PAD = 12;
+
+interface GroupCallViewProps {
+  session: CallSessionSnapshot;
+  kind: 'audio' | 'video';
+  /** Room name; a neutral label is shown when it is empty. */
+  title?: string | null;
+  primaryColor: string;
+  icons?: VideoCallIcons;
+  onToggleMinimize?: () => void;
+  onHangup: () => void;
+}
+
+interface TileProps {
+  participant: CallParticipantView;
+  width: number;
+  height: number;
+  showVideo: boolean;
+  primaryColor: string;
+  youLabel: string;
+  fallbackName: string;
+  micOffLabel: string;
+}
+
+const ParticipantTile: FC<TileProps> = ({
+  participant,
+  width,
+  height,
+  showVideo,
+  primaryColor,
+  youLabel,
+  fallbackName,
+  micOffLabel,
+}) => {
+  const name = participant.isLocal
+    ? youLabel
+    : participant.name || fallbackName;
+  return (
+    <View
+      testID="group-call-tile"
+      accessibilityLabel={name}
+      style={[
+        styles.tile,
+        { width, height },
+        participant.speaking
+          ? [styles.tileSpeaking, { borderColor: primaryColor }]
+          : styles.tileIdle,
+      ]}
+    >
+      {showVideo && participant.video ? (
+        <CallVideo
+          source={participant.video}
+          style={StyleSheet.absoluteFill}
+          objectFit="cover"
+          // Mirror our own camera like every call app.
+          mirror={participant.isLocal}
+          zOrder={0}
+        />
+      ) : (
+        <ProfileImagePlaceholder
+          name={name}
+          size={Math.max(48, Math.min(96, Math.round(width * 0.4)))}
+        />
+      )}
+      <View style={styles.nameTag}>
+        {participant.micMuted && (
+          <View
+            accessibilityLabel={micOffLabel}
+            style={styles.micOffBadge}
+          >
+            <MicOffIcon color={TEXT_ON_DARK} size={11} />
+          </View>
+        )}
+        <Text style={styles.nameText} numberOfLines={1}>
+          {name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+/**
+ * The group call screen: everyone in the room as a grid of tiles, the person
+ * who is speaking outlined, a mic-off badge on anyone muted. Cameras are drawn
+ * for at most MAX_VIDEO_TILES people (speakers first). Nothing here assumes
+ * two people; the 1:1 layout stays in VideoCallSession.
+ */
+export const GroupCallView: FC<GroupCallViewProps> = ({
+  session,
+  kind,
+  title,
+  primaryColor,
+  icons,
+  onToggleMinimize,
+  onHangup,
+}) => {
+  const t = useT();
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  const elapsed = useSharedCallElapsed(session.anchorAt);
+  const { participants, deviceError, connected } = session;
+  const isVideo = kind === 'video';
+
+  const columns = gridColumns(participants.length, width > height);
+  const tileWidth = Math.floor(
+    (width - PAD * 2 - GAP * (columns - 1)) / columns
+  );
+  const tileHeight =
+    columns === 1
+      ? Math.round(tileWidth * 0.75)
+      : Math.round(tileWidth * (isVideo ? 1.15 : 0.85));
+  const videoIds = isVideo ? pickVideoTiles(participants) : new Set<string>();
+
+  const speaking = speakingNames(participants, t('call.participant.you'));
+  const countLabel = t('call.status.participants', { count: participants.length });
+  const status =
+    elapsed !== null
+      ? `${countLabel} · ${formatCallDuration(elapsed)}`
+      : !connected
+        ? t('call.status.connecting')
+        : t('call.status.waitingForOthers');
+  const heading =
+    title || (isVideo ? t('call.groupVideoCall') : t('call.groupAudioCall'));
+
+  return (
+    <View style={styles.canvas}>
+      <View style={[styles.header, { paddingTop: 14 + insets.top }]}>
+        <Text style={styles.headerTitle} numberOfLines={1}>
+          {heading}
+        </Text>
+        <Text style={styles.headerStatus} numberOfLines={1}>
+          {status}
+        </Text>
+        {speaking.length > 0 && (
+          <Text style={styles.headerSpeaking} numberOfLines={1}>
+            {t('call.status.speaking', { names: speaking.join(', ') })}
+          </Text>
+        )}
+      </View>
+
+      {onToggleMinimize && (
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={t('call.action.minimize')}
+          onPress={onToggleMinimize}
+          style={[styles.minimizeButton, { top: 12 + insets.top }]}
+        >
+          <MinimizeIcon color={TEXT_ON_DARK} size={20} />
+        </TouchableOpacity>
+      )}
+
+      {!!deviceError && (
+        <TouchableOpacity
+          style={styles.deviceErrorBanner}
+          onPress={dismissCallDeviceError}
+          accessibilityRole="button"
+        >
+          <Text style={styles.deviceErrorText} numberOfLines={2}>
+            {deviceError}
+          </Text>
+        </TouchableOpacity>
+      )}
+
+      <ScrollView
+        testID="group-call-grid"
+        style={styles.scroll}
+        contentContainerStyle={styles.grid}
+      >
+        {participants.map((participant) => (
+          <ParticipantTile
+            key={participant.identity || (participant.isLocal ? 'local' : participant.name)}
+            participant={participant}
+            width={tileWidth}
+            height={tileHeight}
+            showVideo={videoIds.has(participant.identity)}
+            primaryColor={primaryColor}
+            youLabel={t('call.participant.you')}
+            fallbackName={t('call.participant.default')}
+            micOffLabel={t('call.participant.micOff')}
+          />
+        ))}
+      </ScrollView>
+
+      <CallControlBar
+        session={session}
+        isVideo={isVideo}
+        icons={icons}
+        onHangup={onHangup}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  canvas: {
+    flex: 1,
+    backgroundColor: SURFACE_DARK,
+  },
+  header: {
+    paddingHorizontal: 64,
+    paddingBottom: 10,
+    alignItems: 'center',
+    gap: 2,
+  },
+  headerTitle: {
+    color: TEXT_ON_DARK,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  headerStatus: {
+    color: TEXT_MUTED,
+    fontSize: 13,
+    fontVariant: ['tabular-nums'],
+  },
+  headerSpeaking: {
+    color: TEXT_MUTED,
+    fontSize: 12,
+  },
+  minimizeButton: {
+    position: 'absolute',
+    left: 16,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.14)',
+    zIndex: 6,
+  },
+  scroll: {
+    flex: 1,
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignContent: 'flex-start',
+    gap: GAP,
+    paddingHorizontal: PAD,
+    paddingBottom: PAD,
+  },
+  tile: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: TILE_DARK,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileSpeaking: {
+    borderWidth: 3,
+  },
+  tileIdle: {
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.12)',
+  },
+  nameTag: {
+    position: 'absolute',
+    left: 8,
+    bottom: 8,
+    maxWidth: '90%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 999,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  nameText: {
+    color: TEXT_ON_DARK,
+    fontSize: 13,
+    flexShrink: 1,
+  },
+  micOffBadge: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: DANGER,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  deviceErrorBanner: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+    backgroundColor: 'rgba(229, 57, 53, 0.92)',
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+  },
+  deviceErrorText: {
+    color: TEXT_ON_DARK,
+    fontSize: 13,
+    textAlign: 'center',
+  },
+});
+
+export default GroupCallView;

package/src/components/VideoCalls/P2PCallRunner.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState, store } from '../../roomStore';
+import { endCall, setCallError, setCallPhase } from '../../roomStore/callSlice';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import {
+  P2PCallController,
+  remoteEndNotice,
+} from '../../calls/p2p/P2PCallController';
+import {
+  acquireP2PController,
+  createNativeP2PDeps,
+  p2pInbox,
+  releaseP2PController,
+} from '../../calls/p2p/p2pRuntime';
+import { isP2PAvailable } from '../../calls/p2p/webrtcRuntime';
+import {
+  reportCallConnected,
+  reportCallDeclined,
+  reportCallEnded,
+  reportCallRinging,
+} from '../../networking/api-requests/callState.api';
+import { translateCallString } from './callActions';
+import {
+  bindP2PSession,
+  localizeP2PMessage,
+  startP2PController,
+} from './p2pCallSession';
+
+// Headless owner of the p2p controller for the call in the redux call slice.
+// It builds the controller when a p2p call needs one, wires its events back
+// into the slice, and releases it on EVERY way a call can stop (the phase goes
+// idle or error, the call changes, the overlay unmounts), which is what keeps
+// camera, microphone and the peer connection from leaking.
+//
+//   caller: the controller exists from the moment the create response says
+//           `p2p` and starts at once (media, offer);
+//   callee: the controller exists while the incoming call rings, so the
+//           caller's offer / candidates / cancel are caught, but it only
+//           starts (media, answer) after the user accepts.
+//
+// RN specific: the call also rings from a VoIP push, with the app still
+// starting. The caller keeps re-sending its offer for the whole ring window
+// (longer than on web) because a cold-started callee may need several seconds
+// to bring the XMPP socket up.
+
+const RN_OFFER_RESEND_MS = [4_000, 10_000, 18_000, 26_000];
+
+const isCurrentCall = (callId: string): boolean => {
+  const current = store.getState().call;
+  return current.phase !== 'idle' && current.callId === callId;
+};
+
+export const P2PCallRunner: React.FC = () => {
+  const dispatch = useDispatch();
+  const call = useSelector((state: RootState) => state.call);
+  const { config } = useChatSettingState();
+  const videoCalls = config?.videoCalls;
+  const enabled = videoCalls?.enabled === true;
+
+  const callId = call.callId;
+  const isIncoming = call.direction === 'incoming';
+  const wantsController =
+    enabled &&
+    call.mode === 'p2p' &&
+    !!callId &&
+    (isIncoming
+      ? call.phase === 'ringing-incoming' ||
+        call.phase === 'connecting' ||
+        call.phase === 'in-call'
+      : call.direction === 'outgoing' &&
+        call.iceServers !== null &&
+        (call.phase === 'requesting' ||
+          call.phase === 'connecting' ||
+          call.phase === 'in-call'));
+  // The callee waits on the ring screen; everyone else starts right away.
+  const shouldStart = wantsController && !(isIncoming && call.phase === 'ringing-incoming');
+
+  // Latest config values for the controller without re-running the effect.
+  const optionsRef = useRef({
+    startWithMicOn: videoCalls?.startWithMicOn,
+    startWithCameraOn: videoCalls?.startWithCameraOn,
+  });
+  optionsRef.current = {
+    startWithMicOn: videoCalls?.startWithMicOn,
+    startWithCameraOn: videoCalls?.startWithCameraOn,
+  };
+
+  useEffect(() => {
+    if (!wantsController || !callId) return;
+
+    if (!isP2PAvailable()) {
+      // The WebRTC package is not in this build: nothing can carry the call.
+      // A callee also tells the caller instead of letting them ring on.
+      if (store.getState().call.direction === 'incoming') {
+        reportCallDeclined(callId);
+      }
+      dispatch(setCallError(translateCallString('call.error.sdkMissing')));
+      return;
+    }
+
+    const snapshot = store.getState().call;
+    const peer = String(snapshot.peerXmppUsername || '').trim();
+    const role = snapshot.direction === 'incoming' ? 'callee' : 'caller';
+    if (!peer) {
+      // Without the peer's address there is nobody to signal.
+      dispatch(setCallError(translateCallString('call.error.p2pNoPeer')));
+      return;
+    }
+
+    const controller = acquireP2PController(callId, () => {
+      const peerLocal = peer.split('@')[0];
+      return new P2PCallController(
+        {
+          callId,
+          role,
+          kind: snapshot.kind,
+          peerLocal,
+          iceServers: snapshot.iceServers || [],
+          startWithMicOn: optionsRef.current.startWithMicOn,
+          startWithCameraOn: optionsRef.current.startWithCameraOn,
+        },
+        createNativeP2PDeps({ callId, peerXmppUsername: peer }),
+        {
+          onNegotiated: () => {
+            if (
+              role === 'caller' &&
+              isCurrentCall(callId) &&
+              store.getState().call.phase === 'requesting'
+            ) {
+              dispatch(setCallPhase('connecting'));
+            }
+          },
+          onConnected: () => {
+            if (!isCurrentCall(callId)) return;
+            dispatch(setCallPhase('in-call'));
+            // One side is enough to start the server-side call timer.
+            if (role === 'caller') reportCallConnected(callId);
+          },
+          onRemoteEnd: (reason) => {
+            if (!isCurrentCall(callId)) return;
+            const notice = remoteEndNotice(reason);
+            dispatch(notice ? setCallError(localizeP2PMessage(notice)) : endCall());
+          },
+          onFailed: (message) => {
+            if (isCurrentCall(callId)) {
+              dispatch(setCallError(localizeP2PMessage(message)));
+            }
+          },
+          // Whatever ended it, tell the server the call is over (idempotent, so
+          // it does not matter that the peer reports it too). A callee that
+          // never accepted ends through the decline report instead.
+          onDisposed: ({ started }) => {
+            if (started) reportCallEnded(callId);
+          },
+        },
+        { offerResendMs: RN_OFFER_RESEND_MS }
+      );
+    });
+
+    const unbind = bindP2PSession(controller, snapshot.kind);
+    const detach = p2pInbox.attach(callId, (signal) =>
+      controller.receive(signal)
+    );
+    if (shouldStart) void startP2PController(controller, snapshot.kind);
+
+    return () => {
+      detach();
+      unbind();
+      releaseP2PController(callId);
+    };
+  }, [wantsController, shouldStart, callId, dispatch]);
+
+  // Callee: the incoming UI is on screen, let the server (and so the caller)
+  // know the phone is ringing. Once per call.
+  const ringingReportedRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (
+      enabled &&
+      call.mode === 'p2p' &&
+      isIncoming &&
+      call.phase === 'ringing-incoming' &&
+      callId &&
+      ringingReportedRef.current !== callId
+    ) {
+      ringingReportedRef.current = callId;
+      reportCallRinging(callId);
+    }
+  }, [enabled, call.mode, isIncoming, call.phase, callId]);
+
+  return null;
+};

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>
+    </>
   );
 };