@ethora/chat-component-rn 26.10.3 → 26.10.5

package/src/components/VideoCalls/VideoCallOverlay.tsx

@@ -6,21 +6,23 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 import {
   Animated,
   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,
@@ -34,7 +36,14 @@ import type { ChatTheme } from '../../theme/theme';
 import { VideoCallSession } from './VideoCallSession';
 import { startCallSession } from './callSessionController';
 import { declineActiveCall, terminateActiveCall } from './callActions';
-import { useDraggable } from './useDraggable';
+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 {
   AudioCallIcon,
@@ -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
@@ -287,8 +451,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 +460,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;
@@ -309,14 +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);
 
-  const [minimized, setMinimized] = useState(false);
+  // Shared with the header strip (ActiveCallBar), which expands it again.
+  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.
@@ -332,12 +506,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.
@@ -358,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') {
@@ -416,38 +585,35 @@ 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}
-      minimized={isMinimized}
-      onToggleMinimize={() => setMinimized((m) => !m)}
+      onToggleMinimize={collapse}
       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 (
     <Modal
       visible
       transparent
-      animationType="fade"
+      animationType={enterFromTop ? 'none' : 'fade'}
       statusBarTranslucent
       supportedOrientations={['portrait', 'landscape']}
       onRequestClose={hangupCurrent}
@@ -455,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 ? (
@@ -527,13 +699,15 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#0B1220',
   },
-  floatingPanel: {
+  // 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',
-    right: 16,
-    bottom: 24,
-    left: 16,
-    zIndex: 1001,
-    elevation: 12,
+    overflow: 'hidden',
+    backgroundColor: '#0B1220',
   },
   ringingCard: {
     width: '100%',

package/src/components/VideoCalls/VideoCallSession.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 import {
   ActivityIndicator,
   Animated,
+  Pressable,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -13,11 +14,12 @@ import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlacehold
 import {
   CameraOffIcon,
   CameraOnIcon,
+  FillVideoIcon,
+  FitVideoIcon,
   HangUpIcon,
   MicOffIcon,
   MicOnIcon,
   MinimizeIcon,
-  ExpandIcon,
   SpeakerIcon,
   SpeakerOffIcon,
   SwitchCameraIcon,
@@ -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';
@@ -47,9 +49,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 +59,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 +94,6 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
   peerName,
   primaryColor = DEFAULT_PRIMARY,
   icons,
-  minimized = false,
   onToggleMinimize,
   onHangup,
 }) => {
@@ -102,8 +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,12 +129,29 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
     speakerOn,
     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.
   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;
+  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
@@ -142,54 +164,19 @@ 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" />
+      <View style={styles.stage} onLayout={pipTile.onStageLayout}>
+        {mainVideo ? (
+          <VideoTrack
+            key={videoKey(mainVideo)}
+            trackRef={mainVideo}
+            style={styles.remoteVideo}
+            objectFit={mainFit}
+            mirror={isSwapped && selfMirror}
+            zOrder={0}
+          />
         ) : (
           <View style={styles.centered}>
             <ProfileImagePlaceholder name={displayName} size={120} />
@@ -216,7 +203,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 +218,29 @@ export const VideoCallSession: FC<VideoCallSessionProps> = ({
           </View>
         )}
 
-        {/* Local preview, picture-in-picture, draggable like web's self-view. */}
-        {isVideo && cameraOn && localVideo && (
+        {/* 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]}
           >
-            <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
+                key={videoKey(pipVideo)}
+                trackRef={pipVideo}
+                style={styles.pipVideo}
+                objectFit="cover"
+                mirror={!isSwapped && selfMirror}
+                zOrder={1}
+              />
+            </Pressable>
           </Animated.View>
         )}
 
@@ -252,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 }]}
@@ -366,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)',
@@ -409,10 +429,6 @@ const styles = StyleSheet.create({
     fontSize: 12,
   },
   pip: {
-    position: 'absolute',
-    right: 16,
-    width: 104,
-    height: 148,
     borderRadius: 12,
     overflow: 'hidden',
     backgroundColor: '#000',
@@ -434,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',
@@ -475,35 +495,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;