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
196 lines (195 loc) • 6.56 kB
TypeScript
import React from 'react';
import { MeetingProgressTimerOptions } from './MeetingProgressTimer';
/**
* Configuration options for the OtherGridComponent.
*
* @interface OtherGridComponentOptions
*
* **Content:**
* @property {React.ReactNode} children - Child components to render inside the other grid (typically secondary video participants)
*
* **Dimensions:**
* @property {number | string} width - Width of the grid container (number in pixels or string with units)
* @property {number | string} height - Height of the grid container (number in pixels or string with units)
*
* **Display Control:**
* @property {boolean} [showAspect=true] - Whether to show the grid container (false hides the entire grid)
*
* **Meeting Progress Timer:**
* @property {boolean} showTimer - Whether to display the meeting progress timer overlay
* @property {string} meetingProgressTime - Time string to display on the timer (e.g., "12:34", "01:05:23")
* @property {string} [timeBackgroundColor='rgba(0,0,0,0.5)'] - Background color for the timer overlay
*
* **Styling:**
* @property {string} backgroundColor - Background color for the grid container
* @property {object} [style] - Additional custom styles to apply to the container
*
* **Advanced Render Overrides:**
* @property {function} [renderContent] - Optional custom renderer for grid content (receives defaultContent and dimensions)
* @property {function} [renderContainer] - Optional custom renderer for outer container (receives defaultContainer and dimensions)
*/
export interface OtherGridComponentOptions {
backgroundColor: string;
children: React.ReactNode;
width: number | string;
height: number | string;
showAspect?: boolean;
timeBackgroundColor?: string;
showTimer: boolean;
meetingProgressTime: string;
timerComponent?: React.ComponentType<MeetingProgressTimerOptions>;
style?: object;
renderContent?: (options: {
defaultContent: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
renderContainer?: (options: {
defaultContainer: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type OtherGridComponentType = React.FC<OtherGridComponentOptions>;
/**
* OtherGridComponent - Secondary video grid with meeting timer
*
* OtherGridComponent is a React Native component that provides a secondary grid
* container for additional video participants (typically used when the main grid
* is full). It includes bordered styling and an optional meeting progress timer overlay.
*
* **Key Features:**
* - Fixed-dimension bordered grid container
* - Meeting progress timer overlay
* - Visibility controls for grid and timer
* - Custom background colors
* - Flexible width/height (numeric or string values)
* - Advanced render override hooks
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.otherGridComponent` to
* provide a completely custom secondary grid layout.
*
* @component
* @param {OtherGridComponentOptions} props - Configuration options for the other grid
*
* @returns {JSX.Element} Rendered secondary grid with optional timer overlay
*
* @example
* // Basic usage - Secondary video grid with timer
* import React from 'react';
* import { OtherGridComponent } from 'mediasfu-reactnative-expo';
*
* function SecondaryVideoGrid() {
* return (
* <OtherGridComponent
* backgroundColor="#2c2c2c"
* width={300}
* height={400}
* showAspect={true}
* showTimer={true}
* meetingProgressTime="00:15:32"
* timeBackgroundColor="rgba(0, 0, 0, 0.6)"
* >
* <FlexibleGrid componentsToRender={overflowParticipants} />
* </OtherGridComponent>
* );
* }
*
* @example
* // Without timer overlay and custom styling
* <OtherGridComponent
* backgroundColor="#1a1a1a"
* width="80%"
* height={500}
* showTimer={false}
* meetingProgressTime=""
* style={{ borderRadius: 8, borderWidth: 2, borderColor: '#007bff' }}
* >
* <SecondaryParticipantGrid />
* </OtherGridComponent>
*
* @example
* // With custom content renderer (add participant count)
* <OtherGridComponent
* backgroundColor="black"
* width={350}
* height={450}
* showTimer={true}
* meetingProgressTime="01:23:45"
* renderContent={({ defaultContent, dimensions }) => (
* <>
* <View style={{
* position: 'absolute',
* top: 10,
* right: 10,
* zIndex: 100,
* backgroundColor: 'rgba(0,0,0,0.7)',
* padding: 5,
* borderRadius: 4,
* }}>
* <Text style={{ color: 'white', fontSize: 12 }}>
* {overflowCount} more participants
* </Text>
* </View>
* {defaultContent}
* </>
* )}
* >
* <OverflowGrid />
* </OtherGridComponent>
*
* @example
* // Using uiOverrides for complete grid replacement
* import { MyCustomOtherGrid } from './MyCustomOtherGrid';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* otherGridComponent: {
* component: MyCustomOtherGrid,
* injectedProps: {
* showBorder: true,
* borderStyle: 'dashed',
* },
* },
* },
* };
*
* // MyCustomOtherGrid.tsx
* export const MyCustomOtherGrid = (props: OtherGridComponentOptions & { showBorder: boolean; borderStyle: string }) => {
* return (
* <View style={{
* width: typeof props.width === 'number' ? props.width : undefined,
* height: typeof props.height === 'number' ? props.height : undefined,
* backgroundColor: props.backgroundColor,
* borderWidth: props.showBorder ? 2 : 0,
* borderStyle: props.borderStyle as any,
* borderColor: '#007bff',
* position: 'relative',
* }}>
* {props.children}
* {props.showTimer && (
* <View style={{
* position: 'absolute',
* top: 5,
* left: 5,
* backgroundColor: props.timeBackgroundColor || 'rgba(0,0,0,0.5)',
* padding: 4,
* borderRadius: 4,
* }}>
* <Text style={{ color: 'white', fontSize: 10 }}>
* {props.meetingProgressTime}
* </Text>
* </View>
* )}
* </View>
* );
* };
*/
declare const OtherGridComponent: React.FC<OtherGridComponentOptions>;
export default OtherGridComponent;