mediasfu-reactjs
Version:
mediasfu-reactjs – React 18/19 WebRTC SDK for video conferencing, webinars, broadcasts, live streaming, chat, recording, whiteboard, and AI agents. Plug-in prebuilt rooms or build fully custom UIs.
250 lines • 8.97 kB
TypeScript
import React from 'react';
import { MeetingProgressTimerOptions } from './MeetingProgressTimer';
export interface MainGridComponentOptions {
children: React.ReactNode;
backgroundColor: string;
mainSize: number;
height: number;
width: number;
showAspect?: boolean;
timeBackgroundColor?: string;
showTimer?: boolean;
meetingProgressTime: string;
timerComponent?: React.ComponentType<MeetingProgressTimerOptions>;
}
export type MainGridComponentType = (options: MainGridComponentOptions) => React.JSX.Element;
/**
* MainGridComponent - A container component for the main content grid with integrated timer display.
*
* This component provides a structured container for main grid content with built-in meeting progress
* timer integration. It offers flexible sizing, visibility control, and timer customization for
* displaying video grids or other main content areas during sessions.
*
* **Key Features:**
* - **Fixed Dimensions**: Explicit width and height control for consistent grid sizing
* - **Background Customization**: Configurable background color for grid container
* - **Timer Integration**: Built-in MeetingProgressTimer component for session tracking
* - **Timer Customization**: Custom timer component support via timerComponent prop
* - **Visibility Control**: Toggle grid visibility with showAspect flag
* - **Timer Styling**: Separate background color control for timer display
* - **Border Styling**: Fixed 4px border for clear grid boundaries
* - **Flexbox Layout**: Row-based flex layout with center alignment
* - **Children Support**: Renders any child components within grid container
* - **Component Injection**: Replace default timer with custom timer component
* - **Time Display**: Formatted time string display for meeting duration
* - **Responsive Timer**: Timer visibility controlled independently from grid
*
* @component
*
* @param {MainGridComponentOptions} props - Configuration options for MainGridComponent
* @param {React.ReactNode} props.children - Child components rendered inside the main grid
* @param {string} props.backgroundColor - Background color for the grid container
* @param {number} props.mainSize - Size parameter for grid scaling (passed to children)
* @param {number} props.height - Height in pixels for the grid container
* @param {number} props.width - Width in pixels for the grid container
* @param {boolean} [props.showAspect=true] - Controls visibility of the entire grid container
* @param {string} [props.timeBackgroundColor='transparent'] - Background color for timer display
* @param {boolean} [props.showTimer=true] - Controls visibility of meeting progress timer
* @param {string} props.meetingProgressTime - Formatted time string (e.g., "10:30" or "01:45:20")
* @param {React.ComponentType<MeetingProgressTimerOptions>} [props.timerComponent=MeetingProgressTimer] - Custom timer component to replace default
*
* @returns {React.JSX.Element} The rendered main grid container with timer and children
*
* @example
* // Basic usage for video grid display
* ```tsx
* import React, { useState, useEffect } from 'react';
* import { MainGridComponent } from 'mediasfu-reactjs';
*
* const VideoGridDisplay = () => {
* const [meetingTime, setMeetingTime] = useState('00:00');
*
* useEffect(() => {
* const startTime = Date.now();
* const interval = setInterval(() => {
* const elapsed = Math.floor((Date.now() - startTime) / 1000);
* const minutes = Math.floor(elapsed / 60);
* const seconds = elapsed % 60;
* setMeetingTime(`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
* }, 1000);
* return () => clearInterval(interval);
* }, []);
*
* return (
* <MainGridComponent
* backgroundColor="#1a1a1a"
* mainSize={100}
* height={600}
* width={800}
* showAspect={true}
* showTimer={true}
* meetingProgressTime={meetingTime}
* >
* <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
* <video src="/participant1.mp4" style={{ width: '100%', height: 'auto' }} />
* <video src="/participant2.mp4" style={{ width: '100%', height: 'auto' }} />
* </div>
* </MainGridComponent>
* );
* };
* ```
*
* @example
* // Custom styled with themed timer
* ```tsx
* import React, { useState } from 'react';
* import { MainGridComponent } from 'mediasfu-reactjs';
*
* const ThemedGridDisplay = () => {
* const [meetingTime, setMeetingTime] = useState('00:15:30');
*
* return (
* <MainGridComponent
* backgroundColor="#2c3e50"
* mainSize={100}
* height={720}
* width={1280}
* showAspect={true}
* timeBackgroundColor="rgba(52, 152, 219, 0.8)"
* showTimer={true}
* meetingProgressTime={meetingTime}
* >
* <div style={{
* padding: '20px',
* color: '#ecf0f1',
* display: 'flex',
* flexDirection: 'column',
* gap: '15px'
* }}>
* <h2>Conference Room A</h2>
* <div style={{
* display: 'grid',
* gridTemplateColumns: 'repeat(3, 1fr)',
* gap: '10px'
* }}>
* <div style={{ aspectRatio: '16/9', backgroundColor: '#34495e' }}>Video 1</div>
* <div style={{ aspectRatio: '16/9', backgroundColor: '#34495e' }}>Video 2</div>
* <div style={{ aspectRatio: '16/9', backgroundColor: '#34495e' }}>Video 3</div>
* </div>
* </div>
* </MainGridComponent>
* );
* };
* ```
*
* @example
* // Analytics tracking with custom timer
* ```tsx
* import React, { useState, useEffect } from 'react';
* import { MainGridComponent } from 'mediasfu-reactjs';
*
* const CustomTimer = ({ meetingProgressTime, initialBackgroundColor, showTimer }) => {
* useEffect(() => {
* analytics.track('Timer Display Updated', {
* time: meetingProgressTime,
* visible: showTimer
* });
* }, [meetingProgressTime, showTimer]);
*
* return showTimer ? (
* <div style={{
* position: 'absolute',
* top: '10px',
* right: '10px',
* padding: '8px 16px',
* backgroundColor: initialBackgroundColor,
* borderRadius: '4px',
* fontSize: '14px',
* fontWeight: 'bold'
* }}>
* 🕐 {meetingProgressTime}
* </div>
* ) : null;
* };
*
* const AnalyticsGridDisplay = () => {
* const [meetingTime, setMeetingTime] = useState('00:00');
* const [participantCount, setParticipantCount] = useState(4);
*
* useEffect(() => {
* analytics.track('Grid Displayed', {
* participantCount,
* dimensions: { width: 1024, height: 768 }
* });
* }, [participantCount]);
*
* return (
* <MainGridComponent
* backgroundColor="#000"
* mainSize={100}
* height={768}
* width={1024}
* showAspect={true}
* timeBackgroundColor="rgba(46, 204, 113, 0.9)"
* showTimer={true}
* meetingProgressTime={meetingTime}
* timerComponent={CustomTimer}
* >
* <div>Grid content with {participantCount} participants</div>
* </MainGridComponent>
* );
* };
* ```
*
* @example
* // Integration with MediasfuGeneric using uiOverrides
* ```tsx
* import React, { useState } from 'react';
* import { MediasfuGeneric, MainGridComponent } from 'mediasfu-reactjs';
*
* const CustomMainGridComponent = (props) => {
* const CustomTimerWrapper = (timerProps) => (
* <div className="custom-timer-wrapper">
* <div className="timer-label">Session Duration</div>
* <div className="timer-value">{timerProps.meetingProgressTime}</div>
* <div className="timer-indicator" style={{
* width: '100%',
* height: '3px',
* backgroundColor: '#2ecc71',
* animation: 'pulse 2s infinite'
* }} />
* </div>
* );
*
* return (
* <div className="custom-main-grid-container">
* <MainGridComponent
* {...props}
* backgroundColor="#0f0f0f"
* timeBackgroundColor="rgba(255, 255, 255, 0.1)"
* timerComponent={CustomTimerWrapper}
* />
* <div className="grid-overlay">
* <span className="participant-count">
* {React.Children.count(props.children)} active
* </span>
* </div>
* </div>
* );
* };
*
* const App = () => {
* const [credentials] = useState({
* apiUserName: 'user123',
* apiKey: 'your-api-key'
* });
*
* return (
* <MediasfuGeneric
* credentials={credentials}
* uiOverrides={{
* MainGridComponent: CustomMainGridComponent
* }}
* />
* );
* };
* ```
*/
declare const MainGridComponent: React.FC<MainGridComponentOptions>;
export default MainGridComponent;
//# sourceMappingURL=MainGridComponent.d.ts.map