@ethora/chat-component-rn 26.10.2 → 26.10.4

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

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VideoCallSession = void 0;
+exports.useSharedCallElapsed = exports.formatCallDuration = exports.default = exports.VideoCallSession = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _ProfileImagePlaceholder = require("../MainComponents/ProfileImagePlaceholder");
 var _CallIcons = require("./CallIcons");
 var _livekitRuntime = require("./livekitRuntime");
+var _callSessionController = require("./callSessionController");
+var _useDraggable = require("./useDraggable");
 var _useT = require("../../i18n/useT");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -18,329 +21,62 @@ 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] = (0, _react.useState)(0);
+  (0, _react.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));
 };
+exports.useSharedCallElapsed = useSharedCallElapsed;
+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).
  */
+exports.formatCallDuration = formatCallDuration;
 const VideoCallSession = ({
-  token,
-  livekitUrl,
   kind = 'video',
   peerName,
   primaryColor = DEFAULT_PRIMARY,
   icons,
-  startWithCameraOn = true,
-  startWithMicOn = true,
-  minimized = false,
   onToggleMinimize,
-  onConnected,
-  onError,
   onHangup
 }) => {
   const t = (0, _useT.useT)();
-  const runtime = (0, _react.useMemo)(() => (0, _livekitRuntime.loadLiveKit)(), []);
-  const roomRef = (0, _react.useRef)(null);
-  const [connected, setConnected] = (0, _react.useState)(false);
-  const [deviceError, setDeviceError] = (0, _react.useState)(null);
-  const [micOn, setMicOn] = (0, _react.useState)(startWithMicOn);
-  const [cameraOn, setCameraOn] = (0, _react.useState)(kind === 'video' && startWithCameraOn);
-  const [speakerOn, setSpeakerOn] = (0, _react.useState)(kind === 'video');
-  const [remoteVideo, setRemoteVideo] = (0, _react.useState)(null);
-  const [localVideo, setLocalVideo] = (0, _react.useState)(null);
-  const [remoteName, setRemoteName] = (0, _react.useState)(null);
-  const [remoteJoined, setRemoteJoined] = (0, _react.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 = (0, _react.useRef)({
-    onConnected,
-    onError,
-    onHangup
-  });
-  (0, _react.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 = (0, _react.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 = (0, _react.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 ---------------------------------------------
-
-  (0, _react.useEffect)(() => {
-    if (!runtime) {
-      callbacksRef.current.onError?.(t('call.error.sdkMissing'));
-      return;
-    }
-    if (!token || !livekitUrl) {
-      callbacksRef.current.onError?.(t('call.error.missingConfig'));
-      return;
-    }
-    (0, _livekitRuntime.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(async () => {
-    const next = !speakerOn;
-    setSpeakerOn(next);
-    if (!runtime) {
-      return;
-    }
-    try {
-      if (_reactNative.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 = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const runtime = (0, _livekitRuntime.loadLiveKit)();
+  const session = (0, _callSessionController.useCallSession)();
+  const selfView = (0, _useDraggable.useDraggable)();
+  const elapsed = useSharedCallElapsed(session.anchorAt);
+  // Telegram-style: tap the small tile to swap it with the big one.
+  const [swapped, setSwapped] = (0, _react.useState)(false);
   if (!runtime) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.canvas, styles.centered],
@@ -353,64 +89,46 @@ const VideoCallSession = ({
   const {
     VideoTrack
   } = runtime;
-  const displayName = remoteName || peerName || t('call.unknownCaller');
+  const {
+    connected,
+    remoteJoined,
+    remoteVideo,
+    localVideo,
+    micOn,
+    cameraOn,
+    speakerOn,
+    deviceError,
+    remoteMicMuted,
+    facingMode
+  } = 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;
-  if (minimized) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.miniBar,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.miniInfo,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          numberOfLines: 1,
-          style: styles.miniName,
-          children: displayName
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.miniStatus,
-          children: connected ? remoteJoined ? t('call.status.inCall') : t('call.status.waitingForPeer') : t('call.status.connecting')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        accessibilityRole: "button",
-        accessibilityLabel: t('call.action.expand'),
-        onPress: onToggleMinimize,
-        style: [styles.miniButton, {
-          backgroundColor: CONTROL_IDLE
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallIcons.ExpandIcon, {
-          color: TEXT_ON_DARK,
-          size: 20
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        accessibilityRole: "button",
-        accessibilityLabel: t('call.action.hangUp'),
-        onPress: onHangup,
-        style: [styles.miniButton, {
-          backgroundColor: DANGER
-        }],
-        children: icons?.hangup ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallIcons.HangUpIcon, {
-          color: TEXT_ON_DARK,
-          size: 20
-        })
-      })]
-    });
-  }
+  const localLive = isVideo && cameraOn && !!localVideo;
+  // Swapping only means something while both sides have a picture; if
+  // either goes away, fall back to the default layout on its own.
+  const canSwap = showRemoteVideo && localLive;
+  const isSwapped = swapped && canSwap;
+  const mainVideo = isSwapped ? localVideo : showRemoteVideo ? remoteVideo : null;
+  const pipVideo = isSwapped ? remoteVideo : localLive ? localVideo : null;
+  // Only the front camera is mirrored, as in every camera app.
+  const selfMirror = facingMode === 'user';
+  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
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.canvas,
-    children: [!!deviceError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: styles.deviceErrorBanner,
-      onPress: () => setDeviceError(null),
-      accessibilityRole: "button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.deviceErrorText,
-        numberOfLines: 2,
-        children: deviceError
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.stage,
-      children: [showRemoteVideo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoTrack, {
-        trackRef: remoteVideo,
+      children: [mainVideo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoTrack, {
+        trackRef: mainVideo,
         style: styles.remoteVideo,
-        objectFit: "cover"
+        objectFit: "cover",
+        mirror: isSwapped && selfMirror,
+        zOrder: 0
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.centered,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
@@ -421,36 +139,95 @@ const VideoCallSession = ({
           children: displayName
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
           color: primaryColor,
           style: styles.spinner,
           size: "small"
+        }), !micOn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.pill, styles.pillDanger],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.pillDangerText,
+            children: t('call.selfMuted')
+          })
+        }), remoteMicMuted && !showRemoteVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.pill,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.pillText,
+            children: peerMutedLabel
+          })
+        })]
+      }), mainVideo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.header, {
+          paddingTop: 14 + insets.top
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.headerName,
+          numberOfLines: 1,
+          children: displayName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.headerStatus,
+          children: statusText
+        }), remoteMicMuted && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.pill, styles.headerPill],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CallIcons.MicOffIcon, {
+            color: TEXT_ON_DARK,
+            size: 14
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.pillText,
+            children: peerMutedLabel
+          })]
         })]
-      }), isVideo && cameraOn && localVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.pip,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoTrack, {
-          trackRef: localVideo,
+      }), pipVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        ...selfView.panHandlers,
+        style: [styles.pip, {
+          top: 16 + insets.top
+        }, selfView.style],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           style: styles.pipVideo,
-          objectFit: "cover",
-          mirror: true
+          disabled: !canSwap,
+          onPress: () => setSwapped(value => !value),
+          accessibilityRole: "button",
+          accessibilityLabel: t('call.action.swapVideo'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoTrack, {
+            trackRef: pipVideo,
+            style: styles.pipVideo,
+            objectFit: "cover",
+            mirror: !isSwapped && selfMirror,
+            zOrder: 1
+          })
         })
       }), onToggleMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: t('call.action.minimize'),
         onPress: onToggleMinimize,
-        style: styles.minimizeButton,
+        style: [styles.minimizeButton, {
+          top: 16 + insets.top
+        }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CallIcons.MinimizeIcon, {
           color: TEXT_ON_DARK,
           size: 20
         })
+      }), !!deviceError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.deviceErrorBanner, {
+          top: 64 + insets.top
+        }],
+        onPress: _callSessionController.dismissCallDeviceError,
+        accessibilityRole: "button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.deviceErrorText,
+          numberOfLines: 2,
+          children: deviceError
+        })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.controls,
+      style: [styles.controls, {
+        paddingBottom: 20 + insets.bottom
+      }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: micOn ? t('call.action.muteMic') : t('call.action.unmuteMic'),
-        onPress: toggleMic,
+        onPress: _callSessionController.toggleCallMic,
         style: [styles.controlButton, {
           backgroundColor: micOn ? CONTROL_IDLE : DANGER
         }],
@@ -462,7 +239,7 @@ const VideoCallSession = ({
       }), isVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: cameraOn ? t('call.action.stopCamera') : t('call.action.startCamera'),
-        onPress: toggleCamera,
+        onPress: _callSessionController.toggleCallCamera,
         style: [styles.controlButton, {
           backgroundColor: cameraOn ? CONTROL_IDLE : DANGER
         }],
@@ -474,7 +251,7 @@ const VideoCallSession = ({
       }), isVideo && cameraOn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: t('call.action.switchCamera'),
-        onPress: switchCamera,
+        onPress: _callSessionController.switchCallCamera,
         style: [styles.controlButton, {
           backgroundColor: CONTROL_IDLE
         }],
@@ -484,7 +261,7 @@ const VideoCallSession = ({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         accessibilityRole: "button",
         accessibilityLabel: speakerOn ? t('call.action.speakerOff') : t('call.action.speakerOn'),
-        onPress: toggleSpeaker,
+        onPress: _callSessionController.toggleCallSpeaker,
         style: [styles.controlButton, {
           backgroundColor: CONTROL_IDLE
         }],
@@ -515,7 +292,8 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 12
+    gap: 12,
+    paddingHorizontal: 24
   },
   stage: {
     flex: 1,
@@ -529,26 +307,75 @@ const styles = _reactNative.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
@@ -556,20 +383,20 @@ const styles = _reactNative.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: {
@@ -588,11 +415,10 @@ const styles = _reactNative.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,
@@ -605,34 +431,6 @@ const styles = _reactNative.StyleSheet.create({
     color: TEXT_ON_DARK,
     fontSize: 13,
     textAlign: 'center'
-  },
-  miniBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 16,
-    backgroundColor: SURFACE_DARK
-  },
-  miniInfo: {
-    flex: 1,
-    minWidth: 0
-  },
-  miniName: {
-    color: TEXT_ON_DARK,
-    fontSize: 15
-  },
-  miniStatus: {
-    color: TEXT_MUTED,
-    fontSize: 12
-  },
-  miniButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center'
   }
 });
 var _default = exports.default = VideoCallSession;