@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/components/VideoCalls/CallIcons.tsx

@@ -153,26 +153,50 @@ export const VideoCallIcon: React.FC<IconProps> = ({
   </Svg>
 );
 
+/**
+ * Front/back camera flip: a camera between two arrows turning around it
+ * (Material "cameraswitch", the glyph Telegram and the Android camera use),
+ * so it reads as "use the other camera", not as "reload".
+ */
 export const SwitchCameraIcon: React.FC<IconProps> = ({
   color = '#FFFFFF',
   size = 24,
 }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+  <Svg width={size} height={size} viewBox="0 0 24 24">
     <Path
-      d="M9 4h6l1.2 2H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.8L9 4z"
-      stroke={color}
-      strokeWidth={1.8}
-      fill="none"
-      strokeLinejoin="round"
+      d="M16 7h-1l-1-1h-4L9 7H8c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm-4 7c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+      fill={color}
     />
     <Path
-      d="M9.5 12.5A2.5 2.5 0 0 1 14 11m.5 2.5A2.5 2.5 0 0 1 10 15"
-      stroke={color}
-      strokeWidth={1.8}
-      strokeLinecap="round"
-      fill="none"
+      d="M8.57.51l4.48 4.48V2.04c4.72.47 8.48 4.23 8.95 8.95h2C23.34 3.02 15.49-1.59 8.57.51zm2.38 21.45c-4.72-.47-8.48-4.23-8.95-8.95H0c.66 7.97 8.51 12.58 15.43 10.48l-4.48-4.48v2.95z"
+      fill={color}
+    />
+  </Svg>
+);
+
+/** Stretch the video to fill the screen (Material "fullscreen"). */
+export const FillVideoIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+      fill={color}
+    />
+  </Svg>
+);
+
+/** Show the whole video, letterboxed (Material "fit_screen"). */
+export const FitVideoIcon: React.FC<IconProps> = ({
+  color = '#FFFFFF',
+  size = 24,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24">
+    <Path
+      d="M17 4h3c1.1 0 2 .9 2 2v2h-2V6h-3V4zM4 8V6h3V4H4c-1.1 0-2 .9-2 2v2h2zm16 8v2h-3v2h3c1.1 0 2-.9 2-2v-2h-2zM7 18H4v-2H2v2c0 1.1.9 2 2 2h3v-2zM18 8H6v8h12V8z"
+      fill={color}
     />
-    <Path d="M14 9.5V11h-1.5M10 16.5V15h1.5" stroke={color} strokeWidth={1.8} />
   </Svg>
 );
 

package/src/components/VideoCalls/VideoCallOverlay.tsx

@@ -12,14 +12,17 @@ import {
   BackHandler,
   Easing,
   Modal,
+  PanResponder,
   Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
+  useWindowDimensions,
   Vibration,
   View,
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { RootState } from '../../roomStore';
 import {
   acceptIncomingCall,
@@ -33,7 +36,13 @@ import type { ChatTheme } from '../../theme/theme';
 import { VideoCallSession } from './VideoCallSession';
 import { startCallSession } from './callSessionController';
 import { declineActiveCall, terminateActiveCall } from './callActions';
-import { DockedCallBar } from './ActiveCallBar';
+import {
+  CALL_BAR_HEIGHT,
+  CALL_BAR_MARGIN_TOP,
+  CALL_BAR_MARGIN_X,
+  CALL_BAR_RADIUS,
+  DockedCallBar,
+} from './ActiveCallBar';
 import { setCallMinimized, useCallUi } from './callUiStore';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -44,6 +53,7 @@ import {
 import { VideoCallIcons } from '../../types/types';
 import { useT } from '../../i18n/useT';
 import { useCallKeep } from './useCallKeep';
+import { useOngoingCallNotification } from './useOngoingCallNotification';
 
 const DEFAULT_PRIMARY = '#0052CD';
 const DANGER = '#E53935';
@@ -250,6 +260,160 @@ const RingingCard: FC<RingingCardProps> = ({
   );
 };
 
+/**
+ * The full-screen call, collapsible into the header strip, Telegram-style:
+ * pulling it up morphs the whole screen into the green bubble under the
+ * header (position, width, height and corner radius all travel together,
+ * and the bubble's colour fades in on the way), so it visibly *becomes* the
+ * strip rather than leaving and the strip popping in. Let go past a quarter
+ * of the way, or flick, and it finishes; released early it springs back.
+ * The minimize button runs the same morph; expanding from the strip runs it
+ * backwards.
+ *
+ * Buttons and the draggable video tile handle their own touches; a drag
+ * anywhere else on the screen is ours, and only its upward part counts.
+ */
+const CollapsibleCallSurface: FC<{
+  enterFromTop: boolean;
+  barColor: string;
+  onCollapsed: () => void;
+  children: (collapse: () => void) => ReactNode;
+}> = ({ enterFromTop, barColor, onCollapsed, children }) => {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const { barAnchorY } = useCallUi();
+  // Where the bubble sits: under the hosting header, or under the status
+  // bar when no header is on screen (the docked fallback).
+  const target = {
+    top: (barAnchorY ?? insets.top) + CALL_BAR_MARGIN_TOP,
+    side: CALL_BAR_MARGIN_X,
+    height: CALL_BAR_HEIGHT,
+  };
+  // 0 = full screen, 1 = the bubble.
+  const progress = useRef(new Animated.Value(enterFromTop ? 1 : 0)).current;
+  const collapsingRef = useRef(false);
+  const onCollapsedRef = useRef(onCollapsed);
+  onCollapsedRef.current = onCollapsed;
+  const heightRef = useRef(height);
+  heightRef.current = height;
+
+  useEffect(() => {
+    if (!enterFromTop) {return;}
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: 300,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+    // Mount-only: the entrance plays once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const collapse = useCallback(() => {
+    if (collapsingRef.current) {return;}
+    collapsingRef.current = true;
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: 280,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: false,
+    }).start(() => onCollapsedRef.current());
+  }, [progress]);
+
+  const panHandlers = useMemo(() => {
+    const springBack = () =>
+      Animated.spring(progress, {
+        toValue: 0,
+        useNativeDriver: false,
+        damping: 22,
+        stiffness: 260,
+      }).start();
+    // How far the finger travels for the full morph.
+    const travel = () => heightRef.current * 0.6;
+    return PanResponder.create({
+      // Claim the touch as soon as it starts on the call screen itself
+      // (buttons and the video tile are deeper and win their own touches).
+      // Waiting for a move does not work here: the Modal's content sits
+      // under the host's screens in the React tree, and an ancestor there
+      // (a Pressable / keyboard-dismiss wrapper) takes the touch on start,
+      // after which no descendant is ever asked again.
+      onStartShouldSetPanResponder: () => !collapsingRef.current,
+      onMoveShouldSetPanResponder: () => !collapsingRef.current,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderMove: (_event, gesture) => {
+        progress.setValue(Math.min(1, Math.max(0, -gesture.dy / travel())));
+      },
+      onPanResponderRelease: (_event, gesture) => {
+        if (-gesture.dy / travel() > 0.25 || gesture.vy < -0.8) {
+          collapse();
+        } else {
+          springBack();
+        }
+      },
+      onPanResponderTerminate: springBack,
+    }).panHandlers;
+  }, [progress, collapse]);
+
+  const at = (from: number, to: number) =>
+    progress.interpolate({ inputRange: [0, 1], outputRange: [from, to] });
+
+  return (
+    <Animated.View
+      {...panHandlers}
+      style={[
+        styles.collapsible,
+        {
+          top: at(0, target.top),
+          left: at(0, target.side),
+          width: at(width, width - target.side * 2),
+          height: at(height, target.height),
+          // Rounded as soon as it starts moving (a card, like the screen's
+          // own corners), then tightening to the bubble's radius.
+          borderRadius: progress.interpolate({
+            inputRange: [0, 0.08, 0.7, 1],
+            outputRange: [0, 36, 28, CALL_BAR_RADIUS],
+            extrapolate: 'clamp',
+          }),
+        },
+      ]}
+    >
+      {/* Fixed full-screen size: the content is clipped, never re-laid out
+          per frame (the video views would stutter). It fades as the bubble's
+          colour takes over. */}
+      <Animated.View
+        style={[
+          styles.sessionFixed,
+          {
+            width,
+            height,
+            opacity: progress.interpolate({
+              inputRange: [0, 0.55, 0.85],
+              outputRange: [1, 0.85, 0],
+              extrapolate: 'clamp',
+            }),
+          },
+        ]}
+      >
+        {children(collapse)}
+      </Animated.View>
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            backgroundColor: barColor,
+            opacity: progress.interpolate({
+              inputRange: [0, 0.35, 0.9],
+              outputRange: [0, 0, 1],
+              extrapolate: 'clamp',
+            }),
+          },
+        ]}
+      />
+    </Animated.View>
+  );
+};
+
 /**
  * A crash in the call UI must not take the chat down with it (web wraps
  * the overlay in a silent ChatErrorBoundary). Renders nothing on error and
@@ -308,15 +472,25 @@ const VideoCallOverlayInner: FC = () => {
   // callkeep. No-op otherwise, the in-app ring screen below is the
   // fallback and always renders.
   useCallKeep();
+  // Host-provided system notification (Android) with hang up / mute /
+  // camera buttons while the call runs.
+  useOngoingCallNotification(enabled ? videoCallsConfig?.ongoingCallNotification : undefined);
 
   // Shared with the header strip (ActiveCallBar), which expands it again.
-  const { minimized } = useCallUi();
+  const { minimized, systemRinging } = useCallUi();
 
   const canRenderSession =
     !!call.token &&
     (call.phase === 'connecting' || call.phase === 'in-call') &&
     !!livekitUrl;
   const isMinimized = minimized && canRenderSession;
+  // Expanding from the header strip slides the call down from the top
+  // instead of fading it in.
+  const wasMinimizedRef = useRef(false);
+  const enterFromTop = wasMinimizedRef.current && !isMinimized;
+  useEffect(() => {
+    wasMinimizedRef.current = isMinimized;
+  }, [isMinimized]);
 
   // Join the LiveKit room once the call has a token. Idempotent, and the
   // controller tears itself down when the call slice leaves these phases.
@@ -352,10 +526,11 @@ const VideoCallOverlayInner: FC = () => {
   useEffect(() => {
     const isRinging =
       call.direction === 'incoming' && call.phase === 'ringing-incoming';
-    if (!isRinging) {return;}
+    // CallKit rings (and vibrates) on its own.
+    if (!isRinging || systemRinging) {return;}
     Vibration.vibrate(RING_VIBRATION_PATTERN, true);
     return () => Vibration.cancel();
-  }, [call.direction, call.phase]);
+  }, [call.direction, call.phase, systemRinging]);
 
   const hangupCurrent = useCallback(() => {
     if (call.direction === 'incoming' && call.phase === 'ringing-incoming') {
@@ -410,13 +585,19 @@ const VideoCallOverlayInner: FC = () => {
   const showIncomingDecision =
     call.direction === 'incoming' && call.phase === 'ringing-incoming';
 
-  const session = (
+  // The system's incoming-call banner is up (iOS CallKit); answering or
+  // declining it drives the call from there.
+  if (showIncomingDecision && systemRinging) {
+    return null;
+  }
+
+  const renderSession = (collapse: () => void) => (
     <VideoCallSession
       kind={call.kind}
       peerName={call.roomName}
       primaryColor={primaryColor}
       icons={videoCallsConfig?.icons}
-      onToggleMinimize={() => setCallMinimized(!minimized)}
+      onToggleMinimize={collapse}
       onHangup={() => terminateActiveCall('ended')}
     />
   );
@@ -432,7 +613,7 @@ const VideoCallOverlayInner: FC = () => {
     <Modal
       visible
       transparent
-      animationType="fade"
+      animationType={enterFromTop ? 'none' : 'fade'}
       statusBarTranslucent
       supportedOrientations={['portrait', 'landscape']}
       onRequestClose={hangupCurrent}
@@ -440,7 +621,13 @@ const VideoCallOverlayInner: FC = () => {
       {canRenderSession ? (
         // Full-bleed: on a phone the call owns the screen, like the native
         // dialer. The audio call keeps the same dark canvas as video.
-        <View style={styles.sessionFull}>{session}</View>
+        <CollapsibleCallSurface
+          enterFromTop={enterFromTop}
+          barColor={theme.success}
+          onCollapsed={() => setCallMinimized(true)}
+        >
+          {renderSession}
+        </CollapsibleCallSurface>
       ) : (
         <View style={[styles.backdrop, { backgroundColor: theme.overlay }]}>
           {showIncomingDecision ? (
@@ -512,6 +699,16 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#0B1220',
   },
+  // No flex here: `flex: 1` would override the fixed height and re-lay the
+  // call out on every frame of the morph.
+  sessionFixed: {
+    backgroundColor: '#0B1220',
+  },
+  collapsible: {
+    position: 'absolute',
+    overflow: 'hidden',
+    backgroundColor: '#0B1220',
+  },
   ringingCard: {
     width: '100%',
     maxWidth: 420,

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -14,6 +14,8 @@ import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlacehold
 import {
   CameraOffIcon,
   CameraOnIcon,
+  FillVideoIcon,
+  FitVideoIcon,
   HangUpIcon,
   MicOffIcon,
   MicOnIcon,
@@ -31,7 +33,7 @@ import {
   toggleCallSpeaker,
   useCallSession,
 } from './callSessionController';
-import { useDraggable } from './useDraggable';
+import { usePipTile } from './usePipTile';
 import { useT } from '../../i18n/useT';
 
 const DEFAULT_PRIMARY = '#0052CD';
@@ -99,10 +101,14 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   const insets = useSafeAreaInsets();
   const runtime = loadLiveKit();
   const session = useCallSession();
-  const selfView = useDraggable();
+  const pipTile = usePipTile({ topInset: insets.top });
   const elapsed = useSharedCallElapsed(session.anchorAt);
   // Telegram-style: tap the small tile to swap it with the big one.
   const [swapped, setSwapped] = useState(false);
+  // The peer's video is shown whole by default: a web camera is landscape,
+  // and filling a portrait phone crops most of it away. The button next to
+  // minimize stretches it to fill (the old behaviour) and back.
+  const [fillRemote, setFillRemote] = useState(false);
 
   if (!runtime) {
     return (
@@ -124,6 +130,7 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     deviceError,
     remoteMicMuted,
     facingMode,
+    localVideoEpoch,
   } = session;
   // The call slice's name (the chat title) first, as web does: LiveKit's
   // participant name is often just the opaque xmpp identity.
@@ -137,8 +144,14 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   const isSwapped = swapped && canSwap;
   const mainVideo = isSwapped ? localVideo : showRemoteVideo ? remoteVideo : null;
   const pipVideo = isSwapped ? remoteVideo : localLive ? localVideo : null;
+  const mainIsRemote = !!mainVideo && mainVideo === remoteVideo;
+  const mainFit = mainIsRemote && !fillRemote ? 'contain' : 'cover';
   // Only the front camera is mirrored, as in every camera app.
   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.
+  const videoKey = (ref: any) =>
+    ref === localVideo ? `local-${localVideoEpoch}` : 'remote';
 
   const statusText =
     elapsed !== null
@@ -154,12 +167,13 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   return (
     <View style={styles.canvas}>
       {/* Stage */}
-      <View style={styles.stage}>
+      <View style={styles.stage} onLayout={pipTile.onStageLayout}>
         {mainVideo ? (
           <VideoTrack
+            key={videoKey(mainVideo)}
             trackRef={mainVideo}
             style={styles.remoteVideo}
-            objectFit="cover"
+            objectFit={mainFit}
             mirror={isSwapped && selfMirror}
             zOrder={0}
           />
@@ -204,12 +218,12 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
           </View>
         )}
 
-        {/* Picture-in-picture: draggable like web's self-view, tap to swap
-            it with the main video. */}
+        {/* Picture-in-picture: drag it and it snaps to a corner, pinch it
+            for the large size, tap it to swap it with the main video. */}
         {pipVideo && (
           <Animated.View
-            {...selfView.panHandlers}
-            style={[styles.pip, { top: 16 + insets.top }, selfView.style]}
+            {...pipTile.panHandlers}
+            style={[styles.pip, pipTile.style]}
           >
             <Pressable
               style={styles.pipVideo}
@@ -219,6 +233,7 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
               accessibilityLabel={t('call.action.swapVideo')}
             >
               <VideoTrack
+                key={videoKey(pipVideo)}
                 trackRef={pipVideo}
                 style={styles.pipVideo}
                 objectFit="cover"
@@ -240,6 +255,23 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
           </TouchableOpacity>
         )}
 
+        {mainIsRemote && (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel={
+              fillRemote ? t('call.action.fitVideo') : t('call.action.fillVideo')
+            }
+            onPress={() => setFillRemote((value) => !value)}
+            style={[styles.minimizeButton, styles.fitButton, { top: 16 + insets.top }]}
+          >
+            {fillRemote ? (
+              <FitVideoIcon color={TEXT_ON_DARK} size={20} />
+            ) : (
+              <FillVideoIcon color={TEXT_ON_DARK} size={20} />
+            )}
+          </TouchableOpacity>
+        )}
+
         {!!deviceError && (
           <TouchableOpacity
             style={[styles.deviceErrorBanner, { top: 64 + insets.top }]}
@@ -354,7 +386,7 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
-    paddingHorizontal: 64,
+    paddingHorizontal: 108,
     paddingBottom: 14,
     alignItems: 'center',
     backgroundColor: 'rgba(0,0,0,0.35)',
@@ -397,10 +429,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
   },
   pip: {
-    position: 'absolute',
-    right: 16,
-    width: 104,
-    height: 148,
     borderRadius: 12,
     overflow: 'hidden',
     backgroundColor: '#000',
@@ -422,6 +450,10 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.45)',
     zIndex: 6,
   },
+  // Next to minimize, top-left: the top-right corner belongs to the tile.
+  fitButton: {
+    left: 60,
+  },
   controls: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/VideoCalls/callSessionController.ts

@@ -33,6 +33,11 @@ export interface CallSessionSnapshot {
   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;
@@ -56,6 +61,7 @@ const IDLE: CallSessionSnapshot = {
   cameraOn: false,
   speakerOn: false,
   facingMode: 'user',
+  localVideoEpoch: 0,
   remoteVideo: null,
   localVideo: null,
   remoteName: null,
@@ -299,7 +305,14 @@ export const startCallSession = ({
       // 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();
+      try {
+        await AudioSession.startAudioSession();
+      } catch {
+        // A call answered from the CallKit banner: CallKit owns the iOS
+        // audio session and activates it itself (useCallKeep forwards that
+        // to WebRTC), so our own activation is refused. Not a reason to
+        // fail the call.
+      }
       await room.connect(livekitUrl, token);
     } catch (error: any) {
       if (current.disposed) {return;}
@@ -350,10 +363,12 @@ export const startCallSession = ({
 
 // ---- controls -----------------------------------------------------------
 
-export const toggleCallMic = async (): Promise<void> => {
+export const toggleCallMic = (): Promise<void> => setCallMicEnabled(!snapshot.micOn);
+
+/** Set the mic to a given state (system call UI reports absolute values). */
+export const setCallMicEnabled = async (next: boolean): Promise<void> => {
   const current = session;
-  if (!current) {return;}
-  const next = !snapshot.micOn;
+  if (!current || snapshot.micOn === next) {return;}
   emit({ micOn: next });
   try {
     await current.room.localParticipant.setMicrophoneEnabled(next);
@@ -379,29 +394,45 @@ export const toggleCallCamera = async (): Promise<void> => {
   }
 };
 
+let switchingCamera = false;
+
 export const switchCallCamera = async (): Promise<void> => {
   const current = session;
   const runtime = loadLiveKit();
-  if (!current || !runtime) {return;}
-  const mediaTrack = current.room.localParticipant.getTrackPublication?.(
+  if (!current || !runtime || switchingCamera) {return;}
+  const track = current.room.localParticipant.getTrackPublication?.(
     runtime.Track.Source.Camera
-  )?.track?.mediaStreamTrack;
-  if (!mediaTrack?.applyConstraints) {return;}
+  )?.track;
+  if (!track?.restartTrack) {return;}
   const next = snapshot.facingMode === 'user' ? 'environment' : 'user';
+  switchingCamera = true;
   try {
-    // Swap the capture device inside the SAME track (react-native-webrtc's
-    // own camera switch). `restartTrack` stopped the published track and
-    // made a new one, and the native view kept showing the stopped stream:
-    // the picture froze on the switch.
-    // Keep the current capture settings (resolution, frame rate) and only
-    // flip the camera, exactly like the library's `_switchCamera`.
-    const constraints = { ...(mediaTrack.getSettings?.() || {}) };
-    delete constraints.deviceId;
-    await mediaTrack.applyConstraints({ ...constraints, facingMode: next });
-    if (!current.disposed) {emit({ facingMode: next });}
+    // A real device change needs a new capture: react-native-webrtc's
+    // native applyConstraints only applies width/height/frameRate and
+    // ignores facingMode on both platforms, so the old approach kept the
+    // front camera and merely flipped our mirror flag (the picture looked
+    // swapped left to right). restartTrack re-acquires the camera with
+    // the new facing mode and swaps it into the published sender; the
+    // <VideoTrack /> view follows it through TrackEvent.Restarted.
+    await track.restartTrack({
+      facingMode: next,
+      ...(runtime.VideoPresets
+        ? { resolution: runtime.VideoPresets.h720.resolution }
+        : {}),
+    });
+    if (current.disposed) {return;}
+    // Trust what the camera reports: a device with a single camera stays
+    // on it, and the mirror must follow the real camera, not the request.
+    const actual = track.mediaStreamTrack?.getSettings?.()?.facingMode;
+    emit({
+      facingMode: actual === 'user' || actual === 'environment' ? actual : next,
+      localVideoEpoch: snapshot.localVideoEpoch + 1,
+    });
     resync();
-  } catch {
-    // Single camera, or the switch is still in flight.
+  } catch (error) {
+    if (!current.disposed) {emit({ deviceError: humanizeDeviceError(error) });}
+  } finally {
+    switchingCamera = false;
   }
 };