@ethora/chat-component-rn 26.10.4 → 26.10.5

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

package/src/components/VideoCalls/callUiStore.ts

@@ -16,11 +16,26 @@ import { store } from '../../roomStore';
 
 interface CallUiState {
   minimized: boolean;
+  /**
+   * iOS shows this incoming call in its own CallKit UI (banner / full
+   * screen), so the in-app ring card stays hidden instead of doubling it.
+   */
+  systemRinging: boolean;
   /** Id of the header that shows the strip, or null when none is mounted. */
   barHost: number | null;
+  /**
+   * Window y of the top of the strip slot under the hosting header, so the
+   * collapse animation can land exactly on the strip. Null: no header.
+   */
+  barAnchorY: number | null;
 }
 
-let state: CallUiState = { minimized: false, barHost: null };
+let state: CallUiState = {
+  minimized: false,
+  systemRinging: false,
+  barHost: null,
+  barAnchorY: null,
+};
 const hosts: number[] = [];
 let nextHostId = 1;
 const listeners = new Set<() => void>();
@@ -35,9 +50,13 @@ const emit = (patch: Partial<CallUiState>) => {
 const ensureStoreWatcher = () => {
   if (storeUnsubscribe) {return;}
   storeUnsubscribe = store.subscribe(() => {
-    if (state.minimized && store.getState().call.phase === 'idle') {
+    const phase = store.getState().call.phase;
+    if (state.minimized && phase === 'idle') {
       emit({ minimized: false });
     }
+    if (state.systemRinging && phase !== 'ringing-incoming') {
+      emit({ systemRinging: false });
+    }
   });
 };
 
@@ -61,6 +80,10 @@ export const setCallMinimized = (minimized: boolean): void => {
   if (state.minimized !== minimized) {emit({ minimized });}
 };
 
+export const setCallSystemRinging = (systemRinging: boolean): void => {
+  if (state.systemRinging !== systemRinging) {emit({ systemRinging });}
+};
+
 export const registerCallBarHost = (
   onId?: (id: number) => void
 ): (() => void) => {
@@ -71,6 +94,13 @@ export const registerCallBarHost = (
   return () => {
     const index = hosts.indexOf(id);
     if (index >= 0) {hosts.splice(index, 1);}
-    emit({ barHost: hosts.length ? hosts[hosts.length - 1] : null });
+    const next = hosts.length ? hosts[hosts.length - 1] : null;
+    emit({ barHost: next, barAnchorY: next === null ? null : state.barAnchorY });
   };
 };
+
+/** The hosting header reports where its strip slot is on screen. */
+export const setCallBarAnchor = (hostId: number, y: number): void => {
+  if (state.barHost !== hostId || state.barAnchorY === y) {return;}
+  emit({ barAnchorY: y });
+};

package/src/components/VideoCalls/livekitRuntime.ts

@@ -34,6 +34,11 @@ export interface LiveKitRuntime {
   AudioSession: any;
   /** Installs the WebRTC globals livekit-client expects. */
   registerGlobals: () => void;
+  /**
+   * `@livekit/react-native-webrtc` RTCAudioSession: tells WebRTC when
+   * CallKit activates/deactivates the iOS audio session.
+   */
+  RTCAudioSession: any;
 }
 
 let cached: LiveKitRuntime | null | undefined;
@@ -59,6 +64,13 @@ export const loadLiveKit = (): LiveKitRuntime | null => {
     // moving subset across versions, the core package does not.
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const core = require('livekit-client');
+    let webrtc: any = null;
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      webrtc = require('@livekit/react-native-webrtc');
+    } catch {
+      // Only needed for CallKit; calls work without it.
+    }
 
     cached = {
       Room: core.Room,
@@ -69,6 +81,7 @@ export const loadLiveKit = (): LiveKitRuntime | null => {
       VideoTrack: rn.VideoTrack,
       AudioSession: rn.AudioSession,
       registerGlobals: rn.registerGlobals,
+      RTCAudioSession: webrtc?.RTCAudioSession ?? null,
     };
   } catch {
     cached = null;