@ethora/chat-component-rn 26.10.9 → 26.10.11

package/lib/module/components/VideoCalls/GroupCallView.js

@@ -0,0 +1,275 @@
+"use strict";
+
+import React from 'react';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
+import { CallVideo } from './CallVideo';
+import { CallControlBar } from './CallControlBar';
+import { MicOffIcon, MinimizeIcon } from './CallIcons';
+import { dismissCallDeviceError } from './callSessionController';
+import { gridColumns, pickVideoTiles, speakingNames } from './groupLayout';
+import { formatCallDuration, useSharedCallElapsed } from './callElapsed';
+import { useT } from '../../i18n/useT';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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;
+const ParticipantTile = ({
+  participant,
+  width,
+  height,
+  showVideo,
+  primaryColor,
+  youLabel,
+  fallbackName,
+  micOffLabel
+}) => {
+  const name = participant.isLocal ? youLabel : participant.name || fallbackName;
+  return /*#__PURE__*/_jsxs(View, {
+    testID: "group-call-tile",
+    accessibilityLabel: name,
+    style: [styles.tile, {
+      width,
+      height
+    }, participant.speaking ? [styles.tileSpeaking, {
+      borderColor: primaryColor
+    }] : styles.tileIdle],
+    children: [showVideo && participant.video ? /*#__PURE__*/_jsx(CallVideo, {
+      source: participant.video,
+      style: StyleSheet.absoluteFill,
+      objectFit: "cover"
+      // Mirror our own camera like every call app.
+      ,
+      mirror: participant.isLocal,
+      zOrder: 0
+    }) : /*#__PURE__*/_jsx(ProfileImagePlaceholder, {
+      name: name,
+      size: Math.max(48, Math.min(96, Math.round(width * 0.4)))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.nameTag,
+      children: [participant.micMuted && /*#__PURE__*/_jsx(View, {
+        accessibilityLabel: micOffLabel,
+        style: styles.micOffBadge,
+        children: /*#__PURE__*/_jsx(MicOffIcon, {
+          color: TEXT_ON_DARK,
+          size: 11
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.nameText,
+        numberOfLines: 1,
+        children: name
+      })]
+    })]
+  });
+};
+
+/**
+ * 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 = ({
+  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();
+  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 /*#__PURE__*/_jsxs(View, {
+    style: styles.canvas,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.header, {
+        paddingTop: 14 + insets.top
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        numberOfLines: 1,
+        children: heading
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.headerStatus,
+        numberOfLines: 1,
+        children: status
+      }), speaking.length > 0 && /*#__PURE__*/_jsx(Text, {
+        style: styles.headerSpeaking,
+        numberOfLines: 1,
+        children: t('call.status.speaking', {
+          names: speaking.join(', ')
+        })
+      })]
+    }), onToggleMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
+      accessibilityRole: "button",
+      accessibilityLabel: t('call.action.minimize'),
+      onPress: onToggleMinimize,
+      style: [styles.minimizeButton, {
+        top: 12 + insets.top
+      }],
+      children: /*#__PURE__*/_jsx(MinimizeIcon, {
+        color: TEXT_ON_DARK,
+        size: 20
+      })
+    }), !!deviceError && /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.deviceErrorBanner,
+      onPress: dismissCallDeviceError,
+      accessibilityRole: "button",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.deviceErrorText,
+        numberOfLines: 2,
+        children: deviceError
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      testID: "group-call-grid",
+      style: styles.scroll,
+      contentContainerStyle: styles.grid,
+      children: participants.map(participant => /*#__PURE__*/_jsx(ParticipantTile, {
+        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')
+      }, participant.identity || (participant.isLocal ? 'local' : participant.name)))
+    }), /*#__PURE__*/_jsx(CallControlBar, {
+      session: session,
+      isVideo: isVideo,
+      icons: icons,
+      onHangup: onHangup
+    })]
+  });
+};
+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;
+//# sourceMappingURL=GroupCallView.js.map

package/lib/module/components/VideoCalls/GroupCallView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollView","StyleSheet","Text","TouchableOpacity","useWindowDimensions","View","useSafeAreaInsets","ProfileImagePlaceholder","CallVideo","CallControlBar","MicOffIcon","MinimizeIcon","dismissCallDeviceError","gridColumns","pickVideoTiles","speakingNames","formatCallDuration","useSharedCallElapsed","useT","jsx","_jsx","jsxs","_jsxs","SURFACE_DARK","TILE_DARK","TEXT_ON_DARK","TEXT_MUTED","DANGER","GAP","PAD","ParticipantTile","participant","width","height","showVideo","primaryColor","youLabel","fallbackName","micOffLabel","name","isLocal","testID","accessibilityLabel","style","styles","tile","speaking","tileSpeaking","borderColor","tileIdle","children","video","source","absoluteFill","objectFit","mirror","zOrder","size","Math","max","min","round","nameTag","micMuted","micOffBadge","color","nameText","numberOfLines","GroupCallView","session","kind","title","icons","onToggleMinimize","onHangup","t","insets","elapsed","anchorAt","participants","deviceError","connected","isVideo","columns","length","tileWidth","floor","tileHeight","videoIds","Set","countLabel","count","status","heading","canvas","header","paddingTop","top","headerTitle","headerStatus","headerSpeaking","names","join","accessibilityRole","onPress","minimizeButton","deviceErrorBanner","deviceErrorText","scroll","contentContainerStyle","grid","map","has","identity","create","flex","backgroundColor","paddingHorizontal","paddingBottom","alignItems","gap","fontSize","fontWeight","fontVariant","position","left","borderRadius","justifyContent","zIndex","flexDirection","flexWrap","alignContent","overflow","borderWidth","bottom","maxWidth","paddingVertical","flexShrink","marginHorizontal","marginBottom","textAlign"],"sourceRoot":"../../../../src","sources":["components/VideoCalls/GroupCallView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/VideoCalls/P2PCallRunner.js

@@ -0,0 +1,147 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { 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 => {
+  const current = store.getState().call;
+  return current.phase !== 'idle' && current.callId === callId;
+};
+export const P2PCallRunner = () => {
+  const dispatch = useDispatch();
+  const call = useSelector(state => 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(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;
+};
+//# sourceMappingURL=P2PCallRunner.js.map

package/lib/module/components/VideoCalls/P2PCallRunner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useDispatch","useSelector","store","endCall","setCallError","setCallPhase","useChatSettingState","P2PCallController","remoteEndNotice","acquireP2PController","createNativeP2PDeps","p2pInbox","releaseP2PController","isP2PAvailable","reportCallConnected","reportCallDeclined","reportCallEnded","reportCallRinging","translateCallString","bindP2PSession","localizeP2PMessage","startP2PController","RN_OFFER_RESEND_MS","isCurrentCall","callId","current","getState","call","phase","P2PCallRunner","dispatch","state","config","videoCalls","enabled","isIncoming","direction","wantsController","mode","iceServers","shouldStart","optionsRef","startWithMicOn","startWithCameraOn","snapshot","peer","String","peerXmppUsername","trim","role","controller","peerLocal","split","kind","onNegotiated","onConnected","onRemoteEnd","reason","notice","onFailed","message","onDisposed","started","offerResendMs","unbind","detach","attach","signal","receive","ringingReportedRef"],"sourceRoot":"../../../../src","sources":["components/VideoCalls/P2PCallRunner.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/VideoCalls/VideoCallOverlay.js

@@ -9,7 +9,9 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { sendCallStateSignal } from '../../networking/callTokenStanza';
 import { useTheme } from '../../hooks/useTheme';
 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, CALL_BAR_MARGIN_TOP, CALL_BAR_MARGIN_X, CALL_BAR_RADIUS, DockedCallBar } from './ActiveCallBar';
 import { setCallMinimized, useCallUi } from './callUiStore';
@@ -142,7 +144,7 @@ const RingingCard = ({
         style: [styles.ringingName, {
           color: theme.text
         }],
-        children: roomName || (variant === 'incoming' ? t('call.unknownCaller') : t('call.title'))
+        children: roomName || (variant === 'incoming' ? t('call.incomingNeutral') : t('call.title'))
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.ringingSubtitleRow,
         children: [kind === 'audio' ? /*#__PURE__*/_jsx(AudioCallIcon, {
@@ -406,7 +408,10 @@ const VideoCallOverlayInner = () => {
   const t = useT();
   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';
 
@@ -423,7 +428,10 @@ const VideoCallOverlayInner = () => {
     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.
@@ -436,18 +444,19 @@ const VideoCallOverlayInner = () => {
   // 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) {
+    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(() => {
@@ -508,6 +517,9 @@ const VideoCallOverlayInner = () => {
   }, [isOpen, isMinimized, hangupCurrent]);
   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');
     }
     if (call.phase === 'requesting') {
@@ -520,19 +532,25 @@ const VideoCallOverlayInner = () => {
       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 t('call.connectingToRoom');
+      return isP2P ? t('call.connecting') : 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;
   }
@@ -545,6 +563,7 @@ const VideoCallOverlayInner = () => {
   }
   const renderSession = collapse => /*#__PURE__*/_jsx(VideoCallSession, {
     kind: call.kind,
+    isGroup: call.isGroup,
     peerName: call.roomName,
     primaryColor: primaryColor,
     icons: videoCallsConfig?.icons,
@@ -597,7 +616,7 @@ const VideoCallOverlayInner = () => {
         variant: "error",
         primaryColor: primaryColor,
         theme: theme,
-        errorMessage: call.error || (!livekitUrl ? t('call.error.missingLivekitUrl') : null),
+        errorMessage: call.error || (!livekitUrl && !isP2P ? t('call.error.missingLivekitUrl') : null),
         onDismiss: () => dispatch(resetCall())
       }) : /*#__PURE__*/_jsx(RingingCard, {
         title: ringingHeader,
@@ -615,9 +634,14 @@ const VideoCallOverlayInner = () => {
 };
 export const VideoCallOverlay = () => {
   const callId = useSelector(state => state.call.callId || String(state.call.startedAt || ''));
-  return /*#__PURE__*/_jsx(CallErrorBoundary, {
-    resetKey: callId,
-    children: /*#__PURE__*/_jsx(VideoCallOverlayInner, {})
+  // 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 /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(P2PCallRunner, {}), /*#__PURE__*/_jsx(CallErrorBoundary, {
+      resetKey: callId,
+      children: /*#__PURE__*/_jsx(VideoCallOverlayInner, {})
+    })]
   });
 };
 const styles = StyleSheet.create({