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
188 lines • 6.08 kB
JavaScript
// OtherGridComponent.tsx
import React from 'react';
import { View, StyleSheet, } from 'react-native';
import MeetingProgressTimer from './MeetingProgressTimer';
/**
* 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>
* );
* };
*/
const OtherGridComponent = ({ backgroundColor, children, width, height, showAspect = true, timeBackgroundColor = 'rgba(0,0,0,0.5)', // Default value if not provided
showTimer, meetingProgressTime, timerComponent: TimerComponent = MeetingProgressTimer, style, renderContent, renderContainer, }) => {
const dimensions = {
width: typeof width === 'number' ? width : 0,
height: typeof height === 'number' ? height : 0,
};
const defaultContent = (<>
<TimerComponent meetingProgressTime={meetingProgressTime} initialBackgroundColor={timeBackgroundColor} showTimer={showTimer} position="topRight"/>
<View style={styles.childrenContainer}>
{children}
</View>
</>);
const content = renderContent
? renderContent({ defaultContent, dimensions })
: defaultContent;
const defaultContainer = (<View style={[styles.otherGridContainer, {
backgroundColor, width: width, height: height, display: showAspect ? 'flex' : 'none',
}, style]}>
{content}
</View>);
return renderContainer
? renderContainer({ defaultContainer, dimensions })
: defaultContainer;
};
export default OtherGridComponent;
/**
* Stylesheet for the OtherGridComponent.
*/
const styles = StyleSheet.create({
otherGridContainer: {
justifyContent: 'center',
alignItems: 'center',
borderWidth: 2,
borderColor: 'black',
borderStyle: 'solid',
borderRadius: 0,
overflow: 'hidden',
position: 'relative',
backgroundColor: '#ffffff', // Default background color
},
childrenContainer: {
flex: 1,
width: '100%',
height: '100%',
// Add additional styling if necessary
},
});
//# sourceMappingURL=OtherGridComponent.js.map