@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/components/VideoCalls/CallControlBar.tsx

@@ -0,0 +1,131 @@
+import React, { FC } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { VideoCallIcons } from '../../types/types';
+import {
+  CameraOffIcon,
+  CameraOnIcon,
+  HangUpIcon,
+  MicOffIcon,
+  MicOnIcon,
+  SpeakerIcon,
+  SpeakerOffIcon,
+  SwitchCameraIcon,
+} from './CallIcons';
+import {
+  switchCallCamera,
+  toggleCallCamera,
+  toggleCallMic,
+  toggleCallSpeaker,
+} from './callSessionController';
+import type { CallSessionSnapshot } from './callSessionTypes';
+import { useT } from '../../i18n/useT';
+
+const TEXT_ON_DARK = '#FFFFFF';
+const DANGER = '#E53935';
+const CONTROL_IDLE = 'rgba(255, 255, 255, 0.16)';
+
+interface CallControlBarProps {
+  session: Pick<CallSessionSnapshot, 'micOn' | 'cameraOn' | 'speakerOn'>;
+  isVideo: boolean;
+  icons?: VideoCallIcons;
+  onHangup: () => void;
+}
+
+/**
+ * The row of round buttons at the foot of the call screen: mic, camera (and
+ * its flip), speaker and hang up. Shared by the 1:1 and the group layout; the
+ * controls act on whichever transport carries the call.
+ */
+export const CallControlBar: FC<CallControlBarProps> = ({
+  session,
+  isVideo,
+  icons,
+  onHangup,
+}) => {
+  const t = useT();
+  const insets = useSafeAreaInsets();
+  const { micOn, cameraOn, speakerOn } = session;
+
+  return (
+    <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>
+  );
+};
+
+const styles = StyleSheet.create({
+  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,
+  },
+});
+
+export default CallControlBar;

package/src/components/VideoCalls/CallVideo.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { loadWebRTC } from '../../calls/p2p/webrtcRuntime';
+import { loadLiveKit } from './livekitRuntime';
+
+interface CallVideoProps {
+  /**
+   * What the session snapshot hands out: a LiveKit track reference
+   * (`{ participant, publication, source }`) or a p2p stream handle
+   * (`{ streamURL }`).
+   */
+  source: any;
+  style?: StyleProp<ViewStyle>;
+  objectFit?: 'contain' | 'cover';
+  mirror?: boolean;
+  zOrder?: number;
+}
+
+/**
+ * One video surface of a call, whichever transport it came from: LiveKit's
+ * `<VideoTrack />` for a room track, the fork's `<RTCView />` for the stream
+ * of a peer to peer connection. Renders nothing when the matching native
+ * package is missing.
+ */
+export const CallVideo: FC<CallVideoProps> = ({
+  source,
+  style,
+  objectFit,
+  mirror,
+  zOrder,
+}) => {
+  if (!source) {return null;}
+
+  if (typeof source.streamURL === 'string') {
+    const RTCView = loadWebRTC()?.RTCView;
+    return RTCView ? (
+      <RTCView
+        streamURL={source.streamURL}
+        style={style}
+        objectFit={objectFit}
+        mirror={mirror}
+        zOrder={zOrder}
+      />
+    ) : null;
+  }
+
+  const VideoTrack = loadLiveKit()?.VideoTrack;
+  return VideoTrack ? (
+    <VideoTrack
+      trackRef={source}
+      style={style}
+      objectFit={objectFit}
+      mirror={mirror}
+      zOrder={zOrder}
+    />
+  ) : null;
+};
+
+export default CallVideo;

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