@ethora/chat-component-rn 26.10.2 → 26.10.3

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

@@ -1,10 +1,13 @@
 "use strict";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import { CameraOffIcon, CameraOnIcon, HangUpIcon, MicOffIcon, MicOnIcon, MinimizeIcon, ExpandIcon, SpeakerIcon, 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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_PRIMARY = '#0052CD';
@@ -13,329 +16,59 @@ const TEXT_ON_DARK = '#FFFFFF';
 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, t) => {
-  const name = error?.name || '';
-  const text = String(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');
+/**
+ * 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 => {
+  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 t('call.error.deviceGeneric');
+  return Math.max(0, Math.floor((Date.now() - anchorAt) / 1000));
+};
+export const formatCallDuration = totalSeconds => {
+  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 LiveKit session, React Native edition.
+ * 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 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.
- *
- * 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 = ({
-  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(null);
-  const [connected, setConnected] = useState(false);
-  const [deviceError, setDeviceError] = useState(null);
-  const [micOn, setMicOn] = useState(startWithMicOn);
-  const [cameraOn, setCameraOn] = useState(kind === 'video' && startWithCameraOn);
-  const [speakerOn, setSpeakerOn] = useState(kind === 'video');
-  const [remoteVideo, setRemoteVideo] = useState(null);
-  const [localVideo, setLocalVideo] = useState(null);
-  const [remoteName, setRemoteName] = useState(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, Track) => {
-    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];
-    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 => {
-      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) {
-        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 /*#__PURE__*/_jsx(View, {
       style: [styles.canvas, styles.centered],
@@ -348,22 +81,57 @@ export const VideoCallSession = ({
   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 /*#__PURE__*/_jsxs(View, {
       style: styles.miniBar,
-      children: [/*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
+        name: displayName,
+        size: 36
+      }), /*#__PURE__*/_jsxs(View, {
         style: styles.miniInfo,
         children: [/*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: styles.miniName,
           children: displayName
         }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
           style: styles.miniStatus,
-          children: connected ? remoteJoined ? t('call.status.inCall') : t('call.status.waitingForPeer') : t('call.status.connecting')
+          children: remoteMicMuted ? `${statusText} · ${peerMutedLabel}` : statusText
         })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        accessibilityRole: "button",
+        accessibilityLabel: micOn ? t('call.action.muteMic') : t('call.action.unmuteMic'),
+        onPress: toggleCallMic,
+        style: [styles.miniButton, {
+          backgroundColor: micOn ? CONTROL_IDLE : DANGER
+        }],
+        children: micOn ? icons?.micOn ?? /*#__PURE__*/_jsx(MicOnIcon, {
+          color: TEXT_ON_DARK,
+          size: 20
+        }) : icons?.micOff ?? /*#__PURE__*/_jsx(MicOffIcon, {
+          color: TEXT_ON_DARK,
+          size: 20
+        })
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: t('call.action.expand'),
@@ -391,16 +159,7 @@ export const VideoCallSession = ({
   }
   return /*#__PURE__*/_jsxs(View, {
     style: styles.canvas,
-    children: [!!deviceError && /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: styles.deviceErrorBanner,
-      onPress: () => setDeviceError(null),
-      accessibilityRole: "button",
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.deviceErrorText,
-        numberOfLines: 2,
-        children: deviceError
-      })
-    }), /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsxs(View, {
       style: styles.stage,
       children: [showRemoteVideo ? /*#__PURE__*/_jsx(VideoTrack, {
         trackRef: remoteVideo,
@@ -416,14 +175,50 @@ export const VideoCallSession = ({
           children: displayName
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.stageStatus,
-          children: !connected ? t('call.status.connecting') : !remoteJoined ? t('call.status.waitingForPeer') : isVideo ? t('call.status.cameraOff') : t('call.status.inCall')
+          children: isVideo && remoteJoined && elapsed !== null ? t('call.status.cameraOff') : statusText
         }), !connected && /*#__PURE__*/_jsx(ActivityIndicator, {
           color: primaryColor,
           style: styles.spinner,
           size: "small"
+        }), !micOn && /*#__PURE__*/_jsx(View, {
+          style: [styles.pill, styles.pillDanger],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.pillDangerText,
+            children: t('call.selfMuted')
+          })
+        }), remoteMicMuted && !showRemoteVideo && /*#__PURE__*/_jsx(View, {
+          style: styles.pill,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.pillText,
+            children: peerMutedLabel
+          })
         })]
-      }), isVideo && cameraOn && localVideo && /*#__PURE__*/_jsx(View, {
-        style: styles.pip,
+      }), showRemoteVideo && /*#__PURE__*/_jsxs(View, {
+        style: [styles.header, {
+          paddingTop: 14 + insets.top
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.headerName,
+          numberOfLines: 1,
+          children: displayName
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerStatus,
+          children: statusText
+        }), remoteMicMuted && /*#__PURE__*/_jsxs(View, {
+          style: [styles.pill, styles.headerPill],
+          children: [/*#__PURE__*/_jsx(MicOffIcon, {
+            color: TEXT_ON_DARK,
+            size: 14
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.pillText,
+            children: peerMutedLabel
+          })]
+        })]
+      }), isVideo && cameraOn && localVideo && /*#__PURE__*/_jsx(Animated.View, {
+        ...selfView.panHandlers,
+        style: [styles.pip, {
+          top: 16 + insets.top
+        }, selfView.style],
         children: /*#__PURE__*/_jsx(VideoTrack, {
           trackRef: localVideo,
           style: styles.pipVideo,
@@ -434,18 +229,33 @@ export const VideoCallSession = ({
         accessibilityRole: "button",
         accessibilityLabel: t('call.action.minimize'),
         onPress: onToggleMinimize,
-        style: styles.minimizeButton,
+        style: [styles.minimizeButton, {
+          top: 16 + insets.top
+        }],
         children: /*#__PURE__*/_jsx(MinimizeIcon, {
           color: TEXT_ON_DARK,
           size: 20
         })
+      }), !!deviceError && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.deviceErrorBanner, {
+          top: 64 + insets.top
+        }],
+        onPress: dismissCallDeviceError,
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.deviceErrorText,
+          numberOfLines: 2,
+          children: deviceError
+        })
       })]
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.controls,
+      style: [styles.controls, {
+        paddingBottom: 20 + insets.bottom
+      }],
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: micOn ? t('call.action.muteMic') : t('call.action.unmuteMic'),
-        onPress: toggleMic,
+        onPress: toggleCallMic,
         style: [styles.controlButton, {
           backgroundColor: micOn ? CONTROL_IDLE : DANGER
         }],
@@ -457,7 +267,7 @@ export const VideoCallSession = ({
       }), isVideo && /*#__PURE__*/_jsx(TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: cameraOn ? t('call.action.stopCamera') : t('call.action.startCamera'),
-        onPress: toggleCamera,
+        onPress: toggleCallCamera,
         style: [styles.controlButton, {
           backgroundColor: cameraOn ? CONTROL_IDLE : DANGER
         }],
@@ -469,7 +279,7 @@ export const VideoCallSession = ({
       }), isVideo && cameraOn && /*#__PURE__*/_jsx(TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: t('call.action.switchCamera'),
-        onPress: switchCamera,
+        onPress: switchCallCamera,
         style: [styles.controlButton, {
           backgroundColor: CONTROL_IDLE
         }],
@@ -479,7 +289,7 @@ export const VideoCallSession = ({
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: speakerOn ? t('call.action.speakerOff') : t('call.action.speakerOn'),
-        onPress: toggleSpeaker,
+        onPress: toggleCallSpeaker,
         style: [styles.controlButton, {
           backgroundColor: CONTROL_IDLE
         }],
@@ -509,7 +319,8 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 12
+    gap: 12,
+    paddingHorizontal: 24
   },
   stage: {
     flex: 1,
@@ -523,26 +334,75 @@ const styles = StyleSheet.create({
   stageName: {
     color: TEXT_ON_DARK,
     fontSize: 22,
-    marginTop: 16
+    marginTop: 16,
+    textAlign: 'center'
   },
   stageStatus: {
     color: TEXT_MUTED,
-    fontSize: 14
+    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,
     overflow: 'hidden',
     backgroundColor: '#000',
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.18)'
+    borderColor: 'rgba(255,255,255,0.18)',
+    zIndex: 5
   },
   pipVideo: {
     flex: 1
@@ -550,20 +410,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)'
+    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: {
@@ -582,11 +442,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,
@@ -603,9 +462,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
   },
@@ -619,7 +478,8 @@ const styles = StyleSheet.create({
   },
   miniStatus: {
     color: TEXT_MUTED,
-    fontSize: 12
+    fontSize: 12,
+    fontVariant: ['tabular-nums']
   },
   miniButton: {
     width: 40,