@ethora/chat-component-rn 26.10.3 → 26.10.4

package/src/components/VideoCalls/ActiveCallBar.tsx

@@ -0,0 +1,176 @@
+import React, { FC, useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { RootState } from '../../roomStore';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
+import { ExpandIcon, HangUpIcon, MicOffIcon, MicOnIcon } from './CallIcons';
+import { toggleCallMic, useCallSession } from './callSessionController';
+import { terminateActiveCall } from './callActions';
+import { registerCallBarHost, setCallMinimized, useCallUi } from './callUiStore';
+import { formatCallDuration, useSharedCallElapsed } from './VideoCallSession';
+
+const DANGER = '#E53935';
+const ON_BAR = '#FFFFFF';
+const CONTROL = 'rgba(255, 255, 255, 0.2)';
+
+/** True while a call is up and minimized, i.e. the strip should show. */
+const useShowCallBar = (): boolean => {
+  const { minimized } = useCallUi();
+  const active = useSelector(
+    (state: RootState) =>
+      !!state.call.token &&
+      (state.call.phase === 'connecting' || state.call.phase === 'in-call')
+  );
+  const { config } = useChatSettingState();
+  return minimized && active && config?.videoCalls?.enabled === true;
+};
+
+/**
+ * The minimized call: a strip with who, how long, mic, expand and hang up.
+ * Tapping anywhere on it (outside the buttons) brings the call back
+ * full-screen, like Telegram's "return to call" bar.
+ */
+export const ActiveCallBar: FC<{ topInset?: number }> = ({ topInset = 0 }) => {
+  const t = useT();
+  const theme = useTheme();
+  const { icons } = useChatSettingState().config?.videoCalls || {};
+  const peerName = useSelector((state: RootState) => state.call.roomName);
+  const session = useCallSession();
+  const elapsed = useSharedCallElapsed(session.anchorAt);
+
+  const name = peerName || session.remoteName || t('call.unknownCaller');
+  const status =
+    elapsed !== null
+      ? formatCallDuration(elapsed)
+      : !session.connected
+        ? t('call.status.connecting')
+        : !session.remoteJoined
+          ? t('call.status.waitingForPeer')
+          : t('call.status.inCall');
+  const statusLine = session.remoteMicMuted
+    ? `${status} · ${t('call.peerMuted', { name })}`
+    : status;
+  const expand = () => setCallMinimized(false);
+
+  return (
+    <Pressable
+      onPress={expand}
+      accessibilityRole="button"
+      accessibilityLabel={t('call.action.expand')}
+      style={[styles.bar, { backgroundColor: theme.success, paddingTop: 8 + topInset }]}
+    >
+      <View style={styles.info}>
+        <Text numberOfLines={1} style={styles.name}>
+          {name}
+        </Text>
+        <Text numberOfLines={1} style={styles.status}>
+          {statusLine}
+        </Text>
+      </View>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={session.micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
+        onPress={toggleCallMic}
+        style={[styles.button, { backgroundColor: session.micOn ? CONTROL : DANGER }]}
+        hitSlop={6}
+      >
+        {session.micOn
+          ? (icons?.micOn ?? <MicOnIcon color={ON_BAR} size={18} />)
+          : (icons?.micOff ?? <MicOffIcon color={ON_BAR} size={18} />)}
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.expand')}
+        onPress={expand}
+        style={[styles.button, { backgroundColor: CONTROL }]}
+        hitSlop={6}
+      >
+        <ExpandIcon color={ON_BAR} size={18} />
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={t('call.action.hangUp')}
+        onPress={() => terminateActiveCall('ended')}
+        style={[styles.button, { backgroundColor: DANGER }]}
+        hitSlop={6}
+      >
+        {icons?.hangup ?? <HangUpIcon color={ON_BAR} size={18} />}
+      </TouchableOpacity>
+    </Pressable>
+  );
+};
+
+/**
+ * Mounted under each SDK header (chat and room list). Registers the header
+ * as a place for the strip and renders it while this header is the current
+ * host and a call is minimized; renders nothing otherwise.
+ */
+export const HeaderCallBar: FC = () => {
+  const [hostId, setHostId] = useState<number | null>(null);
+  const { barHost } = useCallUi();
+  const show = useShowCallBar();
+
+  // Returns its own unregister, which is the effect's cleanup.
+  useEffect(() => registerCallBarHost(setHostId), []);
+
+  if (!show || hostId === null || barHost !== hostId) {return null;}
+  return <ActiveCallBar />;
+};
+
+/**
+ * The overlay's fallback when no SDK header is on screen: the same strip,
+ * docked to the top under the status bar.
+ */
+export const DockedCallBar: FC = () => {
+  const insets = useSafeAreaInsets();
+  const { barHost } = useCallUi();
+  const show = useShowCallBar();
+  if (!show || barHost !== null) {return null;}
+  return (
+    <View style={styles.docked} pointerEvents="box-none">
+      <ActiveCallBar topInset={insets.top} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  info: {
+    flex: 1,
+    minWidth: 0,
+  },
+  name: {
+    color: ON_BAR,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  status: {
+    color: 'rgba(255, 255, 255, 0.85)',
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+  },
+  button: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  docked: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1001,
+    elevation: 12,
+  },
+});

package/src/components/VideoCalls/VideoCallOverlay.tsx

@@ -6,7 +6,6 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 import {
   Animated,
@@ -34,7 +33,8 @@ import type { ChatTheme } from '../../theme/theme';
 import { VideoCallSession } from './VideoCallSession';
 import { startCallSession } from './callSessionController';
 import { declineActiveCall, terminateActiveCall } from './callActions';
-import { useDraggable } from './useDraggable';
+import { DockedCallBar } from './ActiveCallBar';
+import { setCallMinimized, useCallUi } from './callUiStore';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
   AudioCallIcon,
@@ -287,8 +287,8 @@ class CallErrorBoundary extends Component<
  * 'idle'.
  *
  * The LiveKit connection itself lives in callSessionController.ts, so
- * switching between the full-screen Modal and the minimized panel (two
- * different trees here) no longer drops the call.
+ * switching between the full-screen Modal and the minimized header strip
+ * (two different trees) no longer drops the call.
  */
 const VideoCallOverlayInner: FC = () => {
   const dispatch = useDispatch();
@@ -296,7 +296,6 @@ const VideoCallOverlayInner: FC = () => {
   const { config } = useChatSettingState();
   const theme = useTheme();
   const t = useT();
-  const panel = useDraggable();
 
   const videoCallsConfig = config?.videoCalls;
   const enabled = videoCallsConfig?.enabled === true;
@@ -310,7 +309,8 @@ const VideoCallOverlayInner: FC = () => {
   // fallback and always renders.
   useCallKeep();
 
-  const [minimized, setMinimized] = useState(false);
+  // Shared with the header strip (ActiveCallBar), which expands it again.
+  const { minimized } = useCallUi();
 
   const canRenderSession =
     !!call.token &&
@@ -332,12 +332,6 @@ const VideoCallOverlayInner: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enabled, canRenderSession, call.token, livekitUrl, call.kind]);
 
-  // Reset the minimized flag whenever the call ends, so the next call
-  // opens full-screen.
-  useEffect(() => {
-    if (call.phase === 'idle') {setMinimized(false);}
-  }, [call.phase]);
-
   // Give up on an unanswered outgoing dial. Unlike web (which only shows
   // the error), also tell the callee, who would otherwise keep ringing:
   // there is no incoming ring timeout on either platform.
@@ -422,25 +416,16 @@ const VideoCallOverlayInner: FC = () => {
       peerName={call.roomName}
       primaryColor={primaryColor}
       icons={videoCallsConfig?.icons}
-      minimized={isMinimized}
-      onToggleMinimize={() => setMinimized((m) => !m)}
+      onToggleMinimize={() => setCallMinimized(!minimized)}
       onHangup={() => terminateActiveCall('ended')}
     />
   );
 
-  // The minimized session is NOT a Modal: a modal is by definition on top
-  // of everything and swallows touches, which is the opposite of what
-  // minimize is for (keep talking, keep using the chat). It renders as a
-  // floating bar the user can drag out of the way, like web's panel.
+  // Minimized, the call is a strip under the visible SDK header
+  // (HeaderCallBar), Telegram-style, so the chat stays fully usable. With
+  // no SDK header on screen the same strip docks to the top instead.
   if (isMinimized) {
-    return (
-      <Animated.View
-        {...panel.panHandlers}
-        style={[styles.floatingPanel, panel.style]}
-      >
-        {session}
-      </Animated.View>
-    );
+    return <DockedCallBar />;
   }
 
   return (
@@ -527,14 +512,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#0B1220',
   },
-  floatingPanel: {
-    position: 'absolute',
-    right: 16,
-    bottom: 24,
-    left: 16,
-    zIndex: 1001,
-    elevation: 12,
-  },
   ringingCard: {
     width: '100%',
     maxWidth: 420,

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 import {
   ActivityIndicator,
   Animated,
+  Pressable,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -17,7 +18,6 @@ import {
   MicOffIcon,
   MicOnIcon,
   MinimizeIcon,
-  ExpandIcon,
   SpeakerIcon,
   SpeakerOffIcon,
   SwitchCameraIcon,
@@ -47,9 +47,7 @@ export interface VideoCallSessionProps {
   peerName?: string | null;
   primaryColor?: string;
   icons?: VideoCallIcons;
-  /** Render the compact floating-panel layout instead of the full screen. */
-  minimized?: boolean;
-  /** Toggle between full and minimized layouts. */
+  /** Minimize to the header strip (ActiveCallBar). */
   onToggleMinimize?: () => void;
   onHangup: () => void;
 }
@@ -59,7 +57,7 @@ export interface VideoCallSessionProps {
  * `joinedAt` anchor so both sides show the same time (web's
  * useSharedCallElapsed). Null until the peer is in.
  */
-const useSharedCallElapsed = (anchorAt: number | null): number | null => {
+export const useSharedCallElapsed = (anchorAt: number | null): number | null => {
   const [, tick] = useState(0);
   useEffect(() => {
     if (anchorAt === null) {return;}
@@ -94,7 +92,6 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   peerName,
   primaryColor = DEFAULT_PRIMARY,
   icons,
-  minimized = false,
   onToggleMinimize,
   onHangup,
 }) => {
@@ -104,6 +101,8 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   const session = useCallSession();
   const selfView = useDraggable();
   const elapsed = useSharedCallElapsed(session.anchorAt);
+  // Telegram-style: tap the small tile to swap it with the big one.
+  const [swapped, setSwapped] = useState(false);
 
   if (!runtime) {
     return (
@@ -124,12 +123,22 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     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;
+  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
@@ -142,54 +151,18 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
 
   const peerMutedLabel = t('call.peerMuted', { name: displayName });
 
-  if (minimized) {
-    return (
-      <View style={styles.miniBar}>
-        <ProfileImagePlaceholder name={displayName} size={36} />
-        <View style={styles.miniInfo}>
-          <Text numberOfLines={1} style={styles.miniName}>
-            {displayName}
-          </Text>
-          <Text numberOfLines={1} style={styles.miniStatus}>
-            {remoteMicMuted ? `${statusText} · ${peerMutedLabel}` : statusText}
-          </Text>
-        </View>
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessibilityLabel={micOn ? t('call.action.muteMic') : t('call.action.unmuteMic')}
-          onPress={toggleCallMic}
-          style={[styles.miniButton, { backgroundColor: micOn ? CONTROL_IDLE : DANGER }]}
-        >
-          {micOn
-            ? (icons?.micOn ?? <MicOnIcon color={TEXT_ON_DARK} size={20} />)
-            : (icons?.micOff ?? <MicOffIcon color={TEXT_ON_DARK} size={20} />)}
-        </TouchableOpacity>
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessibilityLabel={t('call.action.expand')}
-          onPress={onToggleMinimize}
-          style={[styles.miniButton, { backgroundColor: CONTROL_IDLE }]}
-        >
-          <ExpandIcon color={TEXT_ON_DARK} size={20} />
-        </TouchableOpacity>
-        <TouchableOpacity
-          accessibilityRole="button"
-          accessibilityLabel={t('call.action.hangUp')}
-          onPress={onHangup}
-          style={[styles.miniButton, { backgroundColor: DANGER }]}
-        >
-          {icons?.hangup ?? <HangUpIcon color={TEXT_ON_DARK} size={20} />}
-        </TouchableOpacity>
-      </View>
-    );
-  }
-
   return (
     <View style={styles.canvas}>
       {/* Stage */}
       <View style={styles.stage}>
-        {showRemoteVideo ? (
-          <VideoTrack trackRef={remoteVideo} style={styles.remoteVideo} objectFit="cover" />
+        {mainVideo ? (
+          <VideoTrack
+            trackRef={mainVideo}
+            style={styles.remoteVideo}
+            objectFit="cover"
+            mirror={isSwapped && selfMirror}
+            zOrder={0}
+          />
         ) : (
           <View style={styles.centered}>
             <ProfileImagePlaceholder name={displayName} size={120} />
@@ -216,7 +189,7 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
         )}
 
         {/* Header strip: who, how long, and whether they can hear us. */}
-        {showRemoteVideo && (
+        {mainVideo && (
           <View style={[styles.header, { paddingTop: 14 + insets.top }]}>
             <Text style={styles.headerName} numberOfLines={1}>
               {displayName}
@@ -231,13 +204,28 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
           </View>
         )}
 
-        {/* Local preview, picture-in-picture, draggable like web's self-view. */}
-        {isVideo && cameraOn && localVideo && (
+        {/* Picture-in-picture: draggable like web's self-view, tap to swap
+            it with the main video. */}
+        {pipVideo && (
           <Animated.View
             {...selfView.panHandlers}
             style={[styles.pip, { top: 16 + insets.top }, selfView.style]}
           >
-            <VideoTrack trackRef={localVideo} style={styles.pipVideo} objectFit="cover" mirror />
+            <Pressable
+              style={styles.pipVideo}
+              disabled={!canSwap}
+              onPress={() => setSwapped((value) => !value)}
+              accessibilityRole="button"
+              accessibilityLabel={t('call.action.swapVideo')}
+            >
+              <VideoTrack
+                trackRef={pipVideo}
+                style={styles.pipVideo}
+                objectFit="cover"
+                mirror={!isSwapped && selfMirror}
+                zOrder={1}
+              />
+            </Pressable>
           </Animated.View>
         )}
 
@@ -475,35 +463,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     textAlign: 'center',
   },
-  miniBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: 16,
-    backgroundColor: SURFACE_DARK,
-  },
-  miniInfo: {
-    flex: 1,
-    minWidth: 0,
-  },
-  miniName: {
-    color: TEXT_ON_DARK,
-    fontSize: 15,
-  },
-  miniStatus: {
-    color: TEXT_MUTED,
-    fontSize: 12,
-    fontVariant: ['tabular-nums'],
-  },
-  miniButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
 });
 
 export default VideoCallSession;

package/src/components/VideoCalls/callSessionController.ts

@@ -31,6 +31,8 @@ export interface CallSessionSnapshot {
   micOn: boolean;
   cameraOn: boolean;
   speakerOn: boolean;
+  /** Which camera the local video comes from; only the front one is mirrored. */
+  facingMode: 'user' | 'environment';
   /** `{ participant, publication, source }` for `<VideoTrack />`, live and unmuted only. */
   remoteVideo: any;
   localVideo: any;
@@ -53,6 +55,7 @@ const IDLE: CallSessionSnapshot = {
   micOn: true,
   cameraOn: false,
   speakerOn: false,
+  facingMode: 'user',
   remoteVideo: null,
   localVideo: null,
   remoteName: null,
@@ -224,12 +227,24 @@ export const startCallSession = ({
   }
 
   ensureLiveKitGlobals(runtime);
-  const { Room, RoomEvent, AudioSession } = runtime;
-
-  // 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 });
+  const { Room, RoomEvent, AudioSession, VideoPresets } = runtime;
+
+  // The web session's options, verbatim. `pixelDensity: 'screen'` matters:
+  // with a plain `adaptiveStream: true` the subscriber asks for a layer
+  // sized to the view in POINTS, i.e. 2-3x below the phone's real pixels,
+  // and the peer's video arrived visibly blurry next to web.
+  const room = new Room({
+    adaptiveStream: { pixelDensity: 'screen' },
+    dynacast: true,
+    ...(VideoPresets
+      ? {
+          publishDefaults: {
+            videoSimulcastLayers: [VideoPresets.h540, VideoPresets.h216],
+          },
+          videoCaptureDefaults: { resolution: VideoPresets.h720.resolution },
+        }
+      : {}),
+  });
   const current: Session = { key, room, kind, disposed: false, everJoined: false };
   session = current;
   snapshot = {
@@ -368,22 +383,25 @@ export const switchCallCamera = async (): Promise<void> => {
   const current = session;
   const runtime = loadLiveKit();
   if (!current || !runtime) {return;}
+  const mediaTrack = current.room.localParticipant.getTrackPublication?.(
+    runtime.Track.Source.Camera
+  )?.track?.mediaStreamTrack;
+  if (!mediaTrack?.applyConstraints) {return;}
+  const next = snapshot.facingMode === 'user' ? 'environment' : 'user';
   try {
-    const publication = current.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.
-    await track?.restartTrack?.({
-      facingMode:
-        track?.mediaStreamTrack?.getSettings?.().facingMode === 'environment'
-          ? 'user'
-          : 'environment',
-    });
+    // 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 });}
     resync();
   } catch {
-    // Single camera, or the track is mid-restart.
+    // Single camera, or the switch is still in flight.
   }
 };
 

package/src/components/VideoCalls/callUiStore.ts

@@ -0,0 +1,76 @@
+import { useSyncExternalStore } from 'react';
+import { store } from '../../roomStore';
+
+/**
+ * UI state of the call shared between the overlay and the header bar:
+ * whether the call is minimized, and which header (if any) currently hosts
+ * the minimized bar.
+ *
+ * Minimized, the call is a strip under the visible header (ChatHeader or
+ * HeaderRoomList), Telegram-style, instead of a floating panel. Each header
+ * registers itself while mounted; the most recently mounted one shows the
+ * strip (on an iPad split view both are mounted, and only one strip should
+ * appear). With no header mounted (the user is on a host-app screen) the
+ * overlay docks the same strip to the top of the screen.
+ */
+
+interface CallUiState {
+  minimized: boolean;
+  /** Id of the header that shows the strip, or null when none is mounted. */
+  barHost: number | null;
+}
+
+let state: CallUiState = { minimized: false, barHost: null };
+const hosts: number[] = [];
+let nextHostId = 1;
+const listeners = new Set<() => void>();
+let storeUnsubscribe: (() => void) | null = null;
+
+const emit = (patch: Partial<CallUiState>) => {
+  state = { ...state, ...patch };
+  listeners.forEach((listener) => listener());
+};
+
+// The next call always opens full-screen.
+const ensureStoreWatcher = () => {
+  if (storeUnsubscribe) {return;}
+  storeUnsubscribe = store.subscribe(() => {
+    if (state.minimized && store.getState().call.phase === 'idle') {
+      emit({ minimized: false });
+    }
+  });
+};
+
+const subscribe = (listener: () => void) => {
+  ensureStoreWatcher();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+const getSnapshot = () => state;
+
+/** Current state, for non-React code and tests. */
+export const getCallUiState = (): CallUiState => state;
+
+export const useCallUi = (): CallUiState =>
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+export const setCallMinimized = (minimized: boolean): void => {
+  if (state.minimized !== minimized) {emit({ minimized });}
+};
+
+export const registerCallBarHost = (
+  onId?: (id: number) => void
+): (() => void) => {
+  const id = nextHostId++;
+  hosts.push(id);
+  onId?.(id);
+  emit({ barHost: id });
+  return () => {
+    const index = hosts.indexOf(id);
+    if (index >= 0) {hosts.splice(index, 1);}
+    emit({ barHost: hosts.length ? hosts[hosts.length - 1] : null });
+  };
+};

package/src/components/VideoCalls/livekitRuntime.ts

@@ -26,6 +26,8 @@ export interface LiveKitRuntime {
   Track: any;
   /** livekit-client `ConnectionState` enum. */
   ConnectionState: any;
+  /** livekit-client `VideoPresets` (h540, h216...). */
+  VideoPresets: any;
   /** RN `<VideoTrack trackRef={...} />` renderer. */
   VideoTrack: any;
   /** Native audio session control (routing, speaker, focus). */
@@ -63,6 +65,7 @@ export const loadLiveKit = (): LiveKitRuntime | null => {
       RoomEvent: core.RoomEvent,
       Track: core.Track,
       ConnectionState: core.ConnectionState,
+      VideoPresets: core.VideoPresets,
       VideoTrack: rn.VideoTrack,
       AudioSession: rn.AudioSession,
       registerGlobals: rn.registerGlobals,