mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
252 lines (251 loc) • 8.62 kB
TypeScript
import React from 'react';
import { StyleProp, ViewStyle, ImageStyle } from 'react-native';
import { CustomMiniCardType } from '../../@types/types';
/**
* Interface defining the props for the MiniCard component.
*
* MiniCard is a compact display component for showing participant avatars/initials
* with optional media status icons in grid layouts or sidebar views.
*
* @interface MiniCardOptions
*
* **Display Properties:**
* @property {string} [initials] - Participant initials to display when no image is available
* (e.g., "AB" for "Alice Brown"). Used as fallback when imageSource is not provided.
* @property {number} [fontSize=14] - Font size for the initials text
* @property {string} [name] - Full name of the participant (may be used for accessibility or tooltips)
*
* **Image Properties:**
* @property {string} [imageSource] - URI or URL of the participant's avatar image
* @property {boolean} [roundedImage=true] - Whether to display image with rounded corners
* @property {StyleProp<ImageStyle>} [imageStyle] - Custom React Native styles for the image element
*
* **Status Icons:**
* @property {boolean} [showVideoIcon] - Whether to display video status icon overlay
* @property {boolean} [showAudioIcon] - Whether to display audio status icon overlay
*
* **Styling Properties:**
* @property {StyleProp<ViewStyle>} [customStyle] - Custom React Native styles for the card container
* @property {object} [style] - Additional style object for the container
*
* **Custom UI Override:**
* @property {CustomMiniCardType} [customMiniCard] - Custom render function for complete card replacement.
* When provided, this function receives all MiniCardOptions and returns custom JSX.Element.
* This allows full control over the mini card's appearance and behavior.
*
* **Advanced Render Overrides:**
* @property {(options: { defaultContent: React.ReactNode; dimensions: { width: number; height: number }}) => React.ReactNode} [renderContent]
* Function to wrap or replace the default card content while preserving container
* @property {(options: { defaultContainer: React.ReactNode; dimensions: { width: number; height: number }}) => React.ReactNode} [renderContainer]
* Function to wrap or replace the entire card container
*
* **Additional Parameters:**
* @property {any} [parameters] - Additional parameters that can be passed to custom components
*/
export interface MiniCardOptions {
/**
* The initials to display if no image is provided.
*/
initials?: string;
/**
* The font size for the initials.
* @default 14
*/
fontSize?: number;
textColor?: string;
/**
* Custom styles to apply to the card.
*/
customStyle?: StyleProp<ViewStyle>;
/**
* The source URI of the image to display.
*/
imageSource?: string;
/**
* Whether the image should have rounded corners.
* @default true
*/
roundedImage?: boolean;
/**
* Custom styles to apply to the image.
*/
imageStyle?: StyleProp<ImageStyle>;
/**
* Whether to show the video icon.
*/
showVideoIcon?: boolean;
/**
* Whether to show the audio icon.
*/
showAudioIcon?: boolean;
/**
* The name of the participant.
*/
name?: string;
/**
* Custom MiniCard component to replace default rendering.
*/
customMiniCard?: CustomMiniCardType;
/**
* Additional parameters that can be passed to custom components.
*/
parameters?: any;
/**
* Optional custom style to apply to the container.
*/
style?: object;
/**
* Optional function to render custom content, receiving the default content and dimensions.
*/
renderContent?: (options: {
defaultContent: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
/**
* Optional function to render a custom container, receiving the default container and dimensions.
*/
renderContainer?: (options: {
defaultContainer: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type MiniCardType = (options: MiniCardOptions) => JSX.Element;
/**
* MiniCard - Compact participant card displaying avatar or initials with status icons
*
* MiniCard is a lightweight React Native component designed for displaying participants
* in compact grid layouts, sidebars, or minimized views. It intelligently renders either
* a participant's avatar image or their initials, with optional status icons for audio/video.
*
* **Key Features:**
* - Avatar image display with automatic fallback to initials
* - Optional audio/video status icon overlays
* - Rounded or square image corners
* - Compact design optimized for grid layouts
* - Fully customizable styling
* - Lightweight performance footprint
*
* **UI Customization - Two-Tier Override System:**
*
* 1. **Custom Render Function** (via `customMiniCard` prop):
* Pass a function that receives all MiniCardOptions and returns custom JSX.
* Provides complete control over rendering logic and appearance.
*
* 2. **Component Override** (via `uiOverrides.miniCardComponent`):
* Replace the entire MiniCard component while preserving MediaSFU's orchestration.
* Useful when you want a different component implementation.
*
* **Advanced Render Overrides:**
* - `renderContent`: Wrap/modify the card's inner content while keeping container
* - `renderContainer`: Wrap/modify the entire card container
*
* @component
* @param {MiniCardOptions} props - Configuration options for the MiniCard component
*
* @returns {JSX.Element} Rendered mini card with avatar/initials and optional status icons
*
* @example
* // Basic usage - Display with initials
* import React from 'react';
* import { MiniCard } from 'mediasfu-reactnative-expo';
*
* function ParticipantGrid() {
* return (
* <MiniCard
* initials="AB"
* name="Alice Brown"
* fontSize={14}
* roundedImage={true}
* showVideoIcon={false}
* showAudioIcon={true}
* />
* );
* }
*
* @example
* // With avatar image and custom styling
* <MiniCard
* name="Charlie Davis"
* imageSource="https://example.com/avatars/charlie.jpg"
* roundedImage={true}
* showVideoIcon={true}
* showAudioIcon={false}
* customStyle={{
* backgroundColor: '#1a1a2e',
* borderRadius: 10,
* borderWidth: 2,
* borderColor: '#16213e',
* padding: 5,
* }}
* imageStyle={{ width: 50, height: 50 }}
* fontSize={16}
* />
*
* @example
* // Custom mini card with custom render function
* import { View, Text } from 'react-native';
*
* const customMiniCard = (options: MiniCardOptions) => {
* const { name, initials, showVideoIcon, showAudioIcon } = options;
*
* return (
* <View style={{ backgroundColor: '#000', padding: 8, borderRadius: 8 }}>
* <Text style={{ color: '#fff', fontSize: 12, fontWeight: 'bold' }}>
* {initials || name?.substring(0, 2).toUpperCase()}
* </Text>
* <View style={{ flexDirection: 'row', marginTop: 4 }}>
* {showVideoIcon && <Text style={{ marginRight: 4 }}>📹</Text>}
* {showAudioIcon && <Text>🔊</Text>}
* </View>
* </View>
* );
* };
*
* <MiniCard
* name="Eve Foster"
* initials="EF"
* showVideoIcon={true}
* showAudioIcon={false}
* customMiniCard={customMiniCard}
* />
*
* @example
* // Using uiOverrides for component-level customization
* import { MyCustomMiniCard } from './MyCustomMiniCard';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* miniCardComponent: {
* component: MyCustomMiniCard,
* injectedProps: {
* theme: 'minimal',
* size: 'small',
* },
* },
* },
* };
*
* // MyCustomMiniCard.tsx
* export const MyCustomMiniCard = (props: MiniCardOptions & { theme: string; size: string }) => {
* const cardSize = props.size === 'small' ? 40 : 60;
*
* return (
* <View style={{ width: cardSize, height: cardSize, borderRadius: cardSize / 2 }}>
* {props.imageSource ? (
* <Image source={{ uri: props.imageSource }} style={{ width: cardSize, height: cardSize }} />
* ) : (
* <Text style={{ fontSize: props.fontSize }}>{props.initials}</Text>
* )}
* </View>
* );
* };
*/
declare const MiniCard: React.FC<MiniCardOptions>;
export default MiniCard;