@ethora/chat-component-rn 26.10.1 → 26.10.3

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -1,19 +1,13 @@
-import React, {
-  FC,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import {
   ActivityIndicator,
-  Platform,
+  Animated,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { VideoCallIcons } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -28,7 +22,16 @@ import {
   SpeakerOffIcon,
   SwitchCameraIcon,
 } from './CallIcons';
-import { ensureLiveKitGlobals, loadLiveKit } from './livekitRuntime';
+import { loadLiveKit } from './livekitRuntime';
+import {
+  dismissCallDeviceError,
+  switchCallCamera,
+  toggleCallCamera,
+  toggleCallMic,
+  toggleCallSpeaker,
+  useCallSession,
+} from './callSessionController';
+import { useDraggable } from './useDraggable';
 import { useT } from '../../i18n/useT';
 
 const DEFAULT_PRIMARY = '#0052CD';
@@ -38,334 +41,69 @@ const TEXT_MUTED = '#9AA4B2';
 const DANGER = '#E53935';
 const CONTROL_IDLE = 'rgba(255, 255, 255, 0.16)';
 
-// A device (camera/mic) permission/availability problem during enable —
-// distinct from a connect failure. Mirrors the web SDK's humanizeDeviceError:
-// this must never fail the whole call (the user can still talk/hear once
-// they re-allow or plug in a device), only surface a dismissible hint. Most
-// relevant on the iOS Simulator, which has no real camera at all — every
-// video call would otherwise die at setCameraEnabled before ever connecting.
-const humanizeDeviceError = (error: unknown, t: (key: string) => string): string => {
-  const name = (error as { name?: string })?.name || '';
-  const text = String((error as Error)?.message || '').toLowerCase();
-  if (name === 'NotAllowedError' || text.includes('permission') || text.includes('denied')) {
-    return t('call.error.deviceBlocked');
-  }
-  if (name === 'NotFoundError' || text.includes('not found')) {
-    return t('call.error.deviceNotFound');
-  }
-  if (name === 'NotReadableError' || text.includes('in use')) {
-    return t('call.error.deviceInUse');
-  }
-  return t('call.error.deviceGeneric');
-};
-
 export interface VideoCallSessionProps {
-  token: string;
-  livekitUrl: string;
   kind?: 'audio' | 'video';
-  /** Display name of the peer, shown on the audio-call canvas. */
+  /** Display name of the peer, shown until LiveKit reports theirs. */
   peerName?: string | null;
   primaryColor?: string;
   icons?: VideoCallIcons;
-  /** Start with the camera on (video calls). Default true. */
-  startWithCameraOn?: boolean;
-  /** Start with the microphone on. Default true. */
-  startWithMicOn?: boolean;
   /** Render the compact floating-panel layout instead of the full screen. */
   minimized?: boolean;
-  /** Toggle between full and minimized layouts (keeps the session mounted). */
+  /** Toggle between full and minimized layouts. */
   onToggleMinimize?: () => void;
-  onConnected?: () => void;
-  onError?: (message: string) => void;
   onHangup: () => void;
 }
 
 /**
- * The LiveKit session, React Native edition.
- *
- * The web SDK builds this on `@livekit/components-react` hooks. That package
- * assumes a DOM, so here we drive `livekit-client`'s imperative `Room` API
- * directly and keep the derived bits (subscribed tracks, mute flags,
- * connection state) in local React state, re-syncing on RoomEvent. Only the
- * actual video surface comes from `@livekit/react-native` (`<VideoTrack />`),
- * which wraps the native renderer.
+ * 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.
+ */
+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.
  *
- * Requires `@livekit/react-native` >= 2.7 for the `trackRef` prop shape used
- * below. Both LiveKit packages are optional peer deps, see livekitRuntime.ts.
+ * 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).
  */
 export const VideoCallSession: FC<VideoCallSessionProps> = ({
-  token,
-  livekitUrl,
   kind = 'video',
   peerName,
   primaryColor = DEFAULT_PRIMARY,
   icons,
-  startWithCameraOn = true,
-  startWithMicOn = true,
   minimized = false,
   onToggleMinimize,
-  onConnected,
-  onError,
   onHangup,
 }) => {
   const t = useT();
-  const runtime = useMemo(() => loadLiveKit(), []);
-
-  const roomRef = useRef<any>(null);
-  const [connected, setConnected] = useState(false);
-  const [deviceError, setDeviceError] = useState<string | null>(null);
-  const [micOn, setMicOn] = useState(startWithMicOn);
-  const [cameraOn, setCameraOn] = useState(kind === 'video' && startWithCameraOn);
-  const [speakerOn, setSpeakerOn] = useState(kind === 'video');
-  const [remoteVideo, setRemoteVideo] = useState<any>(null);
-  const [localVideo, setLocalVideo] = useState<any>(null);
-  const [remoteName, setRemoteName] = useState<string | null>(null);
-  const [remoteJoined, setRemoteJoined] = useState(false);
-
-  // Callbacks are read through a ref inside the connect effect so that a
-  // parent re-render (new inline arrow props) never re-runs connect and
-  // tears down a live call. Same guard the web session uses.
-  const callbacksRef = useRef({ onConnected, onError, onHangup });
-  useEffect(() => {
-    callbacksRef.current = { onConnected, onError, onHangup };
-  }, [onConnected, onError, onHangup]);
-
-  // ---- track plumbing -------------------------------------------------
-
-  // Build the { participant, publication, source } shape `<VideoTrack />`
-  // expects, from whatever camera publication a participant currently has.
-  const toTrackRef = useCallback(
-    (participant: any, Track: any) => {
-      if (!participant) {return null;}
-      const publication = participant.getTrackPublication?.(Track.Source.Camera);
-      if (!publication?.track) {return null;}
-      return { participant, publication, source: Track.Source.Camera };
-    },
-    []
-  );
-
-  const resyncTracks = useCallback(() => {
-    const room = roomRef.current;
-    if (!room || !runtime) {return;}
-    const { Track } = runtime;
-
-    const remote = Array.from(room.remoteParticipants?.values?.() || [])[0] as any;
-    setRemoteJoined(!!remote);
-    setRemoteName(remote?.name || remote?.identity || null);
-    setRemoteVideo(toTrackRef(remote, Track));
-    setLocalVideo(toTrackRef(room.localParticipant, Track));
-  }, [runtime, toTrackRef]);
-
-  // ---- connect / teardown ---------------------------------------------
-
-  useEffect(() => {
-    if (!runtime) {
-      callbacksRef.current.onError?.(t('call.error.sdkMissing'));
-      return;
-    }
-    if (!token || !livekitUrl) {
-      callbacksRef.current.onError?.(t('call.error.missingConfig'));
-      return;
-    }
-
-    ensureLiveKitGlobals(runtime);
-
-    const { Room, RoomEvent, AudioSession } = runtime;
-    let disposed = false;
-
-    // adaptiveStream + dynacast keep mobile data and battery sane: the SDK
-    // drops resolution for a small tile and stops publishing layers nobody
-    // subscribes to. Both are safe defaults for 1:1.
-    const room = new Room({
-      adaptiveStream: true,
-      dynacast: true,
-    });
-    roomRef.current = room;
-
-    const onStateChange = () => {
-      if (disposed) {return;}
-      resyncTracks();
-    };
-
-    room
-      .on(RoomEvent.TrackSubscribed, onStateChange)
-      .on(RoomEvent.TrackUnsubscribed, onStateChange)
-      .on(RoomEvent.LocalTrackPublished, onStateChange)
-      .on(RoomEvent.LocalTrackUnpublished, onStateChange)
-      .on(RoomEvent.TrackMuted, onStateChange)
-      .on(RoomEvent.TrackUnmuted, onStateChange)
-      .on(RoomEvent.ParticipantConnected, onStateChange)
-      .on(RoomEvent.MediaDevicesError, (error: unknown) => {
-        if (disposed) {return;}
-        setDeviceError(humanizeDeviceError(error, t));
-      })
-      .on(RoomEvent.ParticipantDisconnected, () => {
-        if (disposed) {return;}
-        resyncTracks();
-        // 1:1 semantics: the other side leaving IS the end of the call.
-        // Without this the local user sits on a black canvas until they
-        // hang up manually.
-        callbacksRef.current.onHangup?.();
-      })
-      .on(RoomEvent.Disconnected, () => {
-        if (disposed) {return;}
-        setConnected(false);
-        callbacksRef.current.onHangup?.();
-      });
-
-    (async () => {
-      // Joining the LiveKit room is the only step whose failure should fail
-      // the call (bad token, network, server down). Everything after this
-      // is best-effort device setup — see the separate try/catches below.
-      try {
-        // Claims audio focus and sets the right native audio mode. Must
-        // start BEFORE connecting or the first seconds route to the
-        // earpiece on Android even for a video call.
-        await AudioSession.startAudioSession();
-        await room.connect(livekitUrl, token);
-      } catch (error: any) {
-        if (disposed) {return;}
-        callbacksRef.current.onError?.(
-          String(error?.message || '') || t('call.error.connectFailed')
-        );
-        return;
-      }
-      if (disposed) {return;}
-
-      // Devices are best-effort: if the mic/camera prompt is blocked, or —
-      // notably — this is the iOS Simulator (no real camera hardware at
-      // all), the call still connects. The user can hear/be heard on
-      // audio and re-enable the camera later; failing the whole call here
-      // (as an earlier version did, sharing one try/catch with `connect`)
-      // meant every video call died before ever reaching the ring-answered
-      // screen — indistinguishable from "Accept doesn't work".
-      try {
-        await room.localParticipant.setMicrophoneEnabled(startWithMicOn);
-      } catch (error) {
-        if (!disposed) {setDeviceError(humanizeDeviceError(error, t));}
-      }
-      if (kind === 'video') {
-        try {
-          await room.localParticipant.setCameraEnabled(startWithCameraOn);
-        } catch (error) {
-          if (!disposed) {setDeviceError(humanizeDeviceError(error, t));}
-        }
-      }
-      if (disposed) {return;}
-
-      // Video calls belong on the loudspeaker, audio calls on the
-      // earpiece, matching what every native dialer does.
-      try {
-        await AudioSession.setAppleAudioConfiguration?.({
-          audioCategory: 'playAndRecord',
-          audioMode: kind === 'video' ? 'videoChat' : 'voiceChat',
-        });
-      } catch {
-        // iOS-only helper, absent on Android builds of the SDK.
-      }
-
-      setConnected(true);
-      resyncTracks();
-      callbacksRef.current.onConnected?.();
-    })();
-
-    return () => {
-      disposed = true;
-      try {
-        room.removeAllListeners?.();
-        void room.disconnect();
-      } catch {
-        // Already gone.
-      }
-      try {
-        void AudioSession.stopAudioSession();
-      } catch {
-        // Never let teardown throw, it runs during unmount.
-      }
-      roomRef.current = null;
-    };
-    // Connect exactly once per (url, token, kind). Everything else is read
-    // through refs, see callbacksRef above.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runtime, livekitUrl, token, kind]);
-
-  // ---- controls --------------------------------------------------------
-
-  const toggleMic = useCallback(async () => {
-    const room = roomRef.current;
-    if (!room) {return;}
-    const next = !micOn;
-    setMicOn(next);
-    try {
-      await room.localParticipant.setMicrophoneEnabled(next);
-    } catch {
-      setMicOn(!next);
-    }
-  }, [micOn]);
-
-  const toggleCamera = useCallback(async () => {
-    const room = roomRef.current;
-    if (!room) {return;}
-    const next = !cameraOn;
-    setCameraOn(next);
-    try {
-      await room.localParticipant.setCameraEnabled(next);
-      resyncTracks();
-    } catch {
-      setCameraOn(!next);
-    }
-  }, [cameraOn, resyncTracks]);
-
-  const switchCamera = useCallback(async () => {
-    const room = roomRef.current;
-    if (!room || !runtime) {return;}
-    try {
-      const publication = room.localParticipant.getTrackPublication?.(
-        runtime.Track.Source.Camera
-      );
-      const track = publication?.track;
-      // `restartTrack` with the flipped facingMode is the portable way to
-      // switch cameras; the RN SDK's `_switchCamera` helper is internal and
-      // has moved between versions.
-      await track?.restartTrack?.({
-        facingMode: track?.mediaStreamTrack?.getSettings?.().facingMode ===
-        'environment'
-          ? 'user'
-          : 'environment',
-      });
-      resyncTracks();
-    } catch {
-      // Device has a single camera, or the track is mid-restart.
-    }
-  }, [runtime, resyncTracks]);
-
-  const toggleSpeaker = useCallback(async () => {
-    const next = !speakerOn;
-    setSpeakerOn(next);
-    if (!runtime) {return;}
-    try {
-      if (Platform.OS === 'android') {
-        // NB: not `setAndroidAudioConfiguration` — that method has never
-        // existed on AudioSession (the old `?.` call silently no-oped, so
-        // the speaker icon toggled while audio stayed on the earpiece).
-        // `selectAudioOutput` routes directly; on Android its device ids
-        // are the literal strings 'speaker' / 'earpiece'.
-        await runtime.AudioSession.selectAudioOutput(
-          next ? 'speaker' : 'earpiece'
-        );
-      } else {
-        await runtime.AudioSession.setAppleAudioConfiguration?.({
-          audioCategory: 'playAndRecord',
-          audioCategoryOptions: next ? ['defaultToSpeaker'] : [],
-          audioMode: next ? 'videoChat' : 'voiceChat',
-        });
-      }
-    } catch {
-      setSpeakerOn(!next);
-    }
-  }, [runtime, speakerOn]);
-
-  // ---- render ----------------------------------------------------------
+  const insets = useSafeAreaInsets();
+  const runtime = loadLiveKit();
+  const session = useCallSession();
+  const selfView = useDraggable();
+  const elapsed = useSharedCallElapsed(session.anchorAt);
 
   if (!runtime) {
     return (
@@ -376,25 +114,56 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   }
 
   const { VideoTrack } = runtime;
-  const displayName = remoteName || peerName || t('call.unknownCaller');
+  const {
+    connected,
+    remoteJoined,
+    remoteVideo,
+    localVideo,
+    micOn,
+    cameraOn,
+    speakerOn,
+    deviceError,
+    remoteMicMuted,
+  } = session;
+  // The call slice's name (the chat title) first, as web does: LiveKit's
+  // participant name is often just the opaque xmpp identity.
+  const displayName = peerName || session.remoteName || t('call.unknownCaller');
   const isVideo = kind === 'video';
   const showRemoteVideo = isVideo && !!remoteVideo;
 
+  const statusText =
+    elapsed !== null
+      ? formatCallDuration(elapsed)
+      : !connected
+        ? t('call.status.connecting')
+        : !remoteJoined
+          ? t('call.status.waitingForPeer')
+          : t('call.status.inCall');
+
+  const peerMutedLabel = t('call.peerMuted', { name: displayName });
+
   if (minimized) {
     return (
       <View style={styles.miniBar}>
+        <ProfileImagePlaceholder name={displayName} size={36} />
         <View style={styles.miniInfo}>
           <Text numberOfLines={1} style={styles.miniName}>
             {displayName}
           </Text>
-          <Text style={styles.miniStatus}>
-            {connected
-              ? remoteJoined
-                ? t('call.status.inCall')
-                : t('call.status.waitingForPeer')
-              : t('call.status.connecting')}
+          <Text numberOfLines={1} style={styles.miniStatus}>
+            {remoteMicMuted ? `${statusText} · ${peerMutedLabel}` : statusText}
           </Text>
         </View>
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
+          onPress={toggleCallMic}
+          style={[styles.miniButton, { backgroundColor: micOn ? CONTROL_IDLE : DANGER }]}
+        >
+          {micOn
+            ? (icons?.micOn ?? <MicOnIcon color={TEXT_ON_DARK} size={20} />)
+            : (icons?.micOff ?? <MicOffIcon color={TEXT_ON_DARK} size={20} />)}
+        </TouchableOpacity>
         <TouchableOpacity
           accessibilityRole="button"
           accessibilityLabel={t('call.action.expand')}
@@ -417,17 +186,6 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
 
   return (
     <View style={styles.canvas}>
-      {!!deviceError && (
-        <TouchableOpacity
-          style={styles.deviceErrorBanner}
-          onPress={() => setDeviceError(null)}
-          accessibilityRole="button"
-        >
-          <Text style={styles.deviceErrorText} numberOfLines={2}>
-            {deviceError}
-          </Text>
-        </TouchableOpacity>
-      )}
       {/* Stage */}
       <View style={styles.stage}>
         {showRemoteVideo ? (
@@ -437,29 +195,50 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
             <ProfileImagePlaceholder name={displayName} size={120} />
             <Text style={styles.stageName}>{displayName}</Text>
             <Text style={styles.stageStatus}>
-              {!connected
-                ? t('call.status.connecting')
-                : !remoteJoined
-                  ? t('call.status.waitingForPeer')
-                  : isVideo
-                    ? t('call.status.cameraOff')
-                    : t('call.status.inCall')}
+              {isVideo && remoteJoined && elapsed !== null
+                ? t('call.status.cameraOff')
+                : statusText}
             </Text>
             {!connected && (
-              <ActivityIndicator
-                color={primaryColor}
-                style={styles.spinner}
-                size="small"
-              />
+              <ActivityIndicator color={primaryColor} style={styles.spinner} size="small" />
+            )}
+            {!micOn && (
+              <View style={[styles.pill, styles.pillDanger]}>
+                <Text style={styles.pillDangerText}>{t('call.selfMuted')}</Text>
+              </View>
+            )}
+            {remoteMicMuted && !showRemoteVideo && (
+              <View style={styles.pill}>
+                <Text style={styles.pillText}>{peerMutedLabel}</Text>
+              </View>
+            )}
+          </View>
+        )}
+
+        {/* Header strip: who, how long, and whether they can hear us. */}
+        {showRemoteVideo && (
+          <View style={[styles.header, { paddingTop: 14 + insets.top }]}>
+            <Text style={styles.headerName} numberOfLines={1}>
+              {displayName}
+            </Text>
+            <Text style={styles.headerStatus}>{statusText}</Text>
+            {remoteMicMuted && (
+              <View style={[styles.pill, styles.headerPill]}>
+                <MicOffIcon color={TEXT_ON_DARK} size={14} />
+                <Text style={styles.pillText}>{peerMutedLabel}</Text>
+              </View>
             )}
           </View>
         )}
 
-        {/* Local preview, picture-in-picture */}
+        {/* Local preview, picture-in-picture, draggable like web's self-view. */}
         {isVideo && cameraOn && localVideo && (
-          <View style={styles.pip}>
+          <Animated.View
+            {...selfView.panHandlers}
+            style={[styles.pip, { top: 16 + insets.top }, selfView.style]}
+          >
             <VideoTrack trackRef={localVideo} style={styles.pipVideo} objectFit="cover" mirror />
-          </View>
+          </Animated.View>
         )}
 
         {onToggleMinimize && (
@@ -467,23 +246,32 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
             accessibilityRole="button"
             accessibilityLabel={t('call.action.minimize')}
             onPress={onToggleMinimize}
-            style={styles.minimizeButton}
+            style={[styles.minimizeButton, { top: 16 + insets.top }]}
           >
             <MinimizeIcon color={TEXT_ON_DARK} size={20} />
           </TouchableOpacity>
         )}
+
+        {!!deviceError && (
+          <TouchableOpacity
+            style={[styles.deviceErrorBanner, { top: 64 + insets.top }]}
+            onPress={dismissCallDeviceError}
+            accessibilityRole="button"
+          >
+            <Text style={styles.deviceErrorText} numberOfLines={2}>
+              {deviceError}
+            </Text>
+          </TouchableOpacity>
+        )}
       </View>
 
       {/* Control bar */}
-      <View style={styles.controls}>
+      <View style={[styles.controls, { paddingBottom: 20 + insets.bottom }]}>
         <TouchableOpacity
           accessibilityRole="button"
           accessibilityLabel={micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
-          onPress={toggleMic}
-          style={[
-            styles.controlButton,
-            { backgroundColor: micOn ? CONTROL_IDLE : DANGER },
-          ]}
+          onPress={toggleCallMic}
+          style={[styles.controlButton, { backgroundColor: micOn ? CONTROL_IDLE : DANGER }]}
         >
           {micOn
             ? (icons?.micOn ?? <MicOnIcon color={TEXT_ON_DARK} />)
@@ -496,11 +284,8 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
             accessibilityLabel={
               cameraOn ? t('call.action.stopCamera') : t('call.action.startCamera')
             }
-            onPress={toggleCamera}
-            style={[
-              styles.controlButton,
-              { backgroundColor: cameraOn ? CONTROL_IDLE : DANGER },
-            ]}
+            onPress={toggleCallCamera}
+            style={[styles.controlButton, { backgroundColor: cameraOn ? CONTROL_IDLE : DANGER }]}
           >
             {cameraOn
               ? (icons?.cameraOn ?? <CameraOnIcon color={TEXT_ON_DARK} />)
@@ -512,7 +297,7 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
           <TouchableOpacity
             accessibilityRole="button"
             accessibilityLabel={t('call.action.switchCamera')}
-            onPress={switchCamera}
+            onPress={switchCallCamera}
             style={[styles.controlButton, { backgroundColor: CONTROL_IDLE }]}
           >
             <SwitchCameraIcon color={TEXT_ON_DARK} />
@@ -521,17 +306,11 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
 
         <TouchableOpacity
           accessibilityRole="button"
-          accessibilityLabel={
-            speakerOn ? t('call.action.speakerOff') : t('call.action.speakerOn')
-          }
-          onPress={toggleSpeaker}
+          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} />
-          )}
+          {speakerOn ? <SpeakerIcon color={TEXT_ON_DARK} /> : <SpeakerOffIcon color={TEXT_ON_DARK} />}
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -557,6 +336,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     gap: 12,
+    paddingHorizontal: 24,
   },
   stage: {
     flex: 1,
@@ -571,18 +351,66 @@ const styles = StyleSheet.create({
     color: TEXT_ON_DARK,
     fontSize: 22,
     marginTop: 16,
+    textAlign: 'center',
   },
   stageStatus: {
     color: TEXT_MUTED,
     fontSize: 14,
+    fontVariant: ['tabular-nums'],
   },
   spinner: {
     marginTop: 8,
   },
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 64,
+    paddingBottom: 14,
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    gap: 2,
+  },
+  headerName: {
+    color: TEXT_ON_DARK,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  headerStatus: {
+    color: 'rgba(255,255,255,0.7)',
+    fontSize: 13,
+    fontVariant: ['tabular-nums'],
+  },
+  headerPill: {
+    marginTop: 4,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 999,
+    backgroundColor: CONTROL_IDLE,
+  },
+  pillText: {
+    color: TEXT_ON_DARK,
+    fontSize: 12,
+  },
+  pillDanger: {
+    backgroundColor: 'rgba(229, 57, 53, 0.18)',
+    borderWidth: 1,
+    borderColor: 'rgba(229, 57, 53, 0.45)',
+  },
+  pillDangerText: {
+    color: '#FF8A80',
+    fontSize: 12,
+  },
   pip: {
     position: 'absolute',
     right: 16,
-    top: 16,
     width: 104,
     height: 148,
     borderRadius: 12,
@@ -590,6 +418,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.18)',
+    zIndex: 5,
   },
   pipVideo: {
     flex: 1,
@@ -597,20 +426,20 @@ const styles = StyleSheet.create({
   minimizeButton: {
     position: 'absolute',
     left: 16,
-    top: 16,
     width: 36,
     height: 36,
     borderRadius: 18,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: 'rgba(0,0,0,0.45)',
+    zIndex: 6,
   },
   controls: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 16,
-    paddingVertical: 20,
+    paddingTop: 20,
     paddingHorizontal: 16,
   },
   controlButton: {
@@ -629,11 +458,10 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     paddingHorizontal: 24,
   },
-  // Dismissible, non-blocking — the call is still connecting/connected
-  // underneath; this only flags that camera/mic didn't come up.
+  // Dismissible, non-blocking: the call is still up underneath; this only
+  // flags that camera/mic didn't come up.
   deviceErrorBanner: {
     position: 'absolute',
-    top: 16,
     left: 16,
     right: 16,
     zIndex: 10,
@@ -650,9 +478,9 @@ const styles = StyleSheet.create({
   miniBar: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    gap: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
     borderRadius: 16,
     backgroundColor: SURFACE_DARK,
   },
@@ -667,6 +495,7 @@ const styles = StyleSheet.create({
   miniStatus: {
     color: TEXT_MUTED,
     fontSize: 12,
+    fontVariant: ['tabular-nums'],
   },
   miniButton: {
     width: 40,