@ethora/chat-component-rn 26.10.10 → 26.10.11

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);

package/src/components/VideoCalls/callSessionController.ts

@@ -4,6 +4,21 @@ import { store } from '../../roomStore';
 import { setCallError, setCallPhase } from '../../roomStore/callSlice';
 import { ensureLiveKitGlobals, loadLiveKit } from './livekitRuntime';
 import { terminateActiveCall, translateCallString } from './callActions';
+import {
+  getP2PSessionSnapshot,
+  isP2PSessionActive,
+  setP2PMicEnabled,
+  switchP2PCamera,
+  toggleP2PCamera,
+  toggleP2PSpeaker,
+  dismissP2PDeviceError,
+  useP2PSession,
+} from './p2pCallSession';
+import {
+  CallParticipantView,
+  CallSessionSnapshot,
+  IDLE_SESSION,
+} from './callSessionTypes';
 
 /**
  * The LiveKit connection of the current call, owned outside React.
@@ -22,64 +37,20 @@ import { terminateActiveCall, translateCallString } from './callActions';
  * only read the snapshot and call the controls.
  */
 
-export interface CallSessionSnapshot {
-  /** A LiveKit room exists for the current call. */
-  active: boolean;
-  connected: boolean;
-  /** Translated, dismissible camera/mic problem. Never fails the call. */
-  deviceError: string | null;
-  micOn: boolean;
-  cameraOn: boolean;
-  speakerOn: boolean;
-  /** Which camera the local video comes from; only the front one is mirrored. */
-  facingMode: 'user' | 'environment';
-  /**
-   * Bumped whenever the local camera track is re-acquired, so the self view
-   * can remount onto the new stream instead of holding the stopped one.
-   */
-  localVideoEpoch: number;
-  /** `{ participant, publication, source }` for `<VideoTrack />`, live and unmuted only. */
-  remoteVideo: any;
-  localVideo: any;
-  remoteName: string | null;
-  remoteJoined: boolean;
-  /** Peer joined but has no live microphone. */
-  remoteMicMuted: boolean;
-  /**
-   * When the call truly connected: the later of the two LiveKit `joinedAt`
-   * stamps. The server sets them, so both sides count from the same moment
-   * (web's useSharedCallElapsed). Null until the peer is in.
-   */
-  anchorAt: number | null;
-}
-
-const IDLE: CallSessionSnapshot = {
-  active: false,
-  connected: false,
-  deviceError: null,
-  micOn: true,
-  cameraOn: false,
-  speakerOn: false,
-  facingMode: 'user',
-  localVideoEpoch: 0,
-  remoteVideo: null,
-  localVideo: null,
-  remoteName: null,
-  remoteJoined: false,
-  remoteMicMuted: false,
-  anchorAt: null,
-};
+export type { CallParticipantView, CallSessionSnapshot } from './callSessionTypes';
 
 interface Session {
   key: string;
   room: any;
   kind: 'audio' | 'video';
+  /** Group room call: many participants, the call outlives any one leaving. */
+  isGroup: boolean;
   disposed: boolean;
   everJoined: boolean;
 }
 
 let session: Session | null = null;
-let snapshot: CallSessionSnapshot = IDLE;
+let snapshot: CallSessionSnapshot = IDLE_SESSION;
 const listeners = new Set<() => void>();
 let storeUnsubscribe: (() => void) | null = null;
 
@@ -97,9 +68,20 @@ const subscribe = (listener: () => void) => {
 
 const getSnapshot = () => snapshot;
 
-export const useCallSession = (): CallSessionSnapshot =>
+const useLiveKitSession = (): CallSessionSnapshot =>
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
+/**
+ * The media session of the current call, whichever transport carries it: a
+ * peer to peer connection (p2pCallSession.ts) when one is bound, else the
+ * LiveKit room. Callers never need to tell them apart.
+ */
+export const useCallSession = (): CallSessionSnapshot => {
+  const livekit = useLiveKitSession();
+  const p2p = useP2PSession();
+  return p2p.active ? p2p : livekit;
+};
+
 const sessionKey = (livekitUrl: string, token: string) => `${livekitUrl}|${token}`;
 
 // A device (camera/mic) permission/availability problem during enable,
@@ -134,6 +116,32 @@ const joinedAtMs = (participant: any): number => {
   return Number.isFinite(ms) ? ms : 0;
 };
 
+const micMutedOf = (participant: any, Track: any): boolean => {
+  const mic = participant?.getTrackPublication?.(Track.Source.Microphone);
+  return !mic || mic.isMuted !== false;
+};
+
+// Everyone in a group call: us first, then the others in join order.
+const groupParticipants = (room: any, Track: any): CallParticipantView[] => {
+  const speaking = new Set<string>(
+    (Array.from(room.activeSpeakers || []) as any[]).map((p) => p?.identity)
+  );
+  const view = (p: any, isLocal: boolean): CallParticipantView => ({
+    identity: String(p?.identity || ''),
+    name: String(p?.name || p?.identity || ''),
+    isLocal,
+    video: liveVideoRef(p, Track),
+    micMuted: micMutedOf(p, Track),
+    speaking: speaking.has(p?.identity),
+  });
+  return [
+    view(room.localParticipant, true),
+    ...(Array.from(room.remoteParticipants?.values?.() || []) as any[]).map((p) =>
+      view(p, false)
+    ),
+  ];
+};
+
 const resync = () => {
   const current = session;
   const runtime = loadLiveKit();
@@ -148,6 +156,31 @@ const resync = () => {
   const localJoined = joinedAtMs(room.localParticipant);
   const remoteJoinedAt = joinedAtMs(remote);
 
+  if (current.isGroup) {
+    // A group call began when the first two were in; later joiners do not
+    // restart the clock (web's useSharedCallElapsed(group)).
+    const joins = [
+      localJoined,
+      ...(Array.from(room.remoteParticipants?.values?.() || []) as any[]).map(
+        joinedAtMs
+      ),
+    ].filter((ms) => ms > 0);
+    emit({
+      remoteJoined: !!remote,
+      remoteName: null,
+      remoteVideo: null,
+      localVideo: liveVideoRef(room.localParticipant, Track),
+      remoteMicMuted: false,
+      participants: groupParticipants(room, Track),
+      anchorAt: remote
+        ? joins.length >= 2
+          ? Math.min(...joins)
+          : snapshot.anchorAt ?? Date.now()
+        : null,
+    });
+    return;
+  }
+
   emit({
     remoteJoined: !!remote,
     remoteName: remote?.name || remote?.identity || null,
@@ -179,7 +212,7 @@ export const stopCallSession = (): void => {
   } catch {
     // Never let teardown throw.
   }
-  snapshot = IDLE;
+  snapshot = IDLE_SESSION;
   listeners.forEach((listener) => listener());
 };
 
@@ -202,6 +235,8 @@ export interface StartCallSessionOptions {
   token: string;
   livekitUrl: string;
   kind: 'audio' | 'video';
+  /** Group room call: show everyone, and keep going while others remain. */
+  isGroup?: boolean;
   startWithMicOn?: boolean;
   startWithCameraOn?: boolean;
 }
@@ -214,6 +249,7 @@ export const startCallSession = ({
   token,
   livekitUrl,
   kind,
+  isGroup = false,
   startWithMicOn = true,
   startWithCameraOn = true,
 }: StartCallSessionOptions): void => {
@@ -251,11 +287,19 @@ export const startCallSession = ({
         }
       : {}),
   });
-  const current: Session = { key, room, kind, disposed: false, everJoined: false };
+  const current: Session = {
+    key,
+    room,
+    kind,
+    isGroup,
+    disposed: false,
+    everJoined: false,
+  };
   session = current;
   snapshot = {
-    ...IDLE,
+    ...IDLE_SESSION,
     active: true,
+    isGroup,
     micOn: startWithMicOn,
     cameraOn: kind === 'video' && startWithCameraOn,
     // Video calls belong on the loudspeaker, audio calls on the earpiece.
@@ -277,6 +321,7 @@ export const startCallSession = ({
     .on(RoomEvent.TrackMuted, onChange)
     .on(RoomEvent.TrackUnmuted, onChange)
     .on(RoomEvent.ParticipantConnected, onChange)
+    .on(RoomEvent.ActiveSpeakersChanged, onChange)
     .on(RoomEvent.MediaDevicesError, (error: unknown) => {
       if (current.disposed) {return;}
       emit({ deviceError: humanizeDeviceError(error) });
@@ -286,8 +331,13 @@ export const startCallSession = ({
       resync();
       // 1:1 semantics, as web's PeerLeaveWatcher: once the peer had been
       // in the room, their leaving IS the end of the call. Before they
-      // join (outgoing "Ringing...") an empty room is expected.
-      if (current.everJoined && (room.remoteParticipants?.size ?? 0) === 0) {
+      // join (outgoing "Ringing...") an empty room is expected. A group
+      // call goes on while anyone is left, and ends when we hang up.
+      if (
+        !current.isGroup &&
+        current.everJoined &&
+        (room.remoteParticipants?.size ?? 0) === 0
+      ) {
         terminateActiveCall('ended');
       }
     })
@@ -363,10 +413,19 @@ export const startCallSession = ({
 
 // ---- controls -----------------------------------------------------------
 
-export const toggleCallMic = (): Promise<void> => setCallMicEnabled(!snapshot.micOn);
+// The controls act on whichever transport carries the call.
+const currentSnapshot = (): CallSessionSnapshot =>
+  isP2PSessionActive() ? getP2PSessionSnapshot() : snapshot;
+
+export const toggleCallMic = (): Promise<void> =>
+  setCallMicEnabled(!currentSnapshot().micOn);
 
 /** Set the mic to a given state (system call UI reports absolute values). */
 export const setCallMicEnabled = async (next: boolean): Promise<void> => {
+  if (isP2PSessionActive()) {
+    setP2PMicEnabled(next);
+    return;
+  }
   const current = session;
   if (!current || snapshot.micOn === next) {return;}
   emit({ micOn: next });
@@ -380,6 +439,10 @@ export const setCallMicEnabled = async (next: boolean): Promise<void> => {
 };
 
 export const toggleCallCamera = async (): Promise<void> => {
+  if (isP2PSessionActive()) {
+    await toggleP2PCamera();
+    return;
+  }
   const current = session;
   if (!current) {return;}
   const next = !snapshot.cameraOn;
@@ -397,6 +460,10 @@ export const toggleCallCamera = async (): Promise<void> => {
 let switchingCamera = false;
 
 export const switchCallCamera = async (): Promise<void> => {
+  if (isP2PSessionActive()) {
+    switchP2PCamera();
+    return;
+  }
   const current = session;
   const runtime = loadLiveKit();
   if (!current || !runtime || switchingCamera) {return;}
@@ -437,6 +504,10 @@ export const switchCallCamera = async (): Promise<void> => {
 };
 
 export const toggleCallSpeaker = async (): Promise<void> => {
+  if (isP2PSessionActive()) {
+    await toggleP2PSpeaker();
+    return;
+  }
   const runtime = loadLiveKit();
   if (!session || !runtime) {return;}
   const next = !snapshot.speakerOn;
@@ -459,6 +530,10 @@ export const toggleCallSpeaker = async (): Promise<void> => {
 };
 
 export const dismissCallDeviceError = (): void => {
+  if (isP2PSessionActive()) {
+    dismissP2PDeviceError();
+    return;
+  }
   emit({ deviceError: null });
 };