mediasfu-reactjs
Version:
MediaSFU Prebuilt ReactJS SDK - Compatible with React 18 & 19, TypeScript & JavaScript
256 lines • 9.13 kB
TypeScript
import React from "react";
import { MeetingProgressTimerOptions } from "./MeetingProgressTimer";
export interface OtherGridComponentOptions {
backgroundColor: string;
children: React.ReactNode;
width: number;
height: number;
showAspect?: boolean;
timeBackgroundColor?: string;
showTimer: boolean;
meetingProgressTime: string;
timerComponent?: React.ComponentType<MeetingProgressTimerOptions>;
}
export type OtherGridComponentType = React.FC<OtherGridComponentOptions>;
/**
* OtherGridComponent - A secondary grid container for additional content with integrated timer.
*
* This component provides a structured container for secondary grid content (complementing MainGridComponent)
* with built-in meeting progress timer integration. It offers fixed dimensions, visibility control, and
* timer customization for displaying additional participant videos or content grids.
*
* **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 2px border for clear grid boundaries
* - **Overflow Hidden**: Prevents content from exceeding grid boundaries
* - **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 {OtherGridComponentOptions} props - Configuration options for OtherGridComponent
* @param {string} props.backgroundColor - Background color for the grid container
* @param {React.ReactNode} props.children - Child components rendered inside the grid
* @param {number} props.width - Width in pixels for the grid container
* @param {number} props.height - Height in pixels for the grid container
* @param {boolean} [props.showAspect=true] - Controls visibility of the entire grid container
* @param {string} [props.timeBackgroundColor] - Background color for timer display
* @param {boolean} props.showTimer - 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 secondary grid container with timer and children
*
* @example
* // Basic usage for secondary participant grid
* ```tsx
* import React, { useState, useEffect } from 'react';
* import { OtherGridComponent } from 'mediasfu-reactjs';
*
* const SecondaryParticipantGrid = () => {
* 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 (
* <OtherGridComponent
* backgroundColor="#2a2a2a"
* width={400}
* height={300}
* showAspect={true}
* showTimer={true}
* meetingProgressTime={meetingTime}
* >
* <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px', padding: '5px' }}>
* <video src="/participant3.mp4" style={{ width: '100%', height: 'auto' }} />
* <video src="/participant4.mp4" style={{ width: '100%', height: 'auto' }} />
* </div>
* </OtherGridComponent>
* );
* };
* ```
*
* @example
* // Custom styled with conditional visibility
* ```tsx
* import React, { useState } from 'react';
* import { OtherGridComponent } from 'mediasfu-reactjs';
*
* const ConditionalSecondaryGrid = () => {
* const [showGrid, setShowGrid] = useState(true);
* const [meetingTime, setMeetingTime] = useState('00:05:30');
*
* return (
* <>
* <button onClick={() => setShowGrid(!showGrid)}>
* {showGrid ? 'Hide' : 'Show'} Secondary Grid
* </button>
* <OtherGridComponent
* backgroundColor="#34495e"
* width={600}
* height={400}
* showAspect={showGrid}
* timeBackgroundColor="rgba(231, 76, 60, 0.8)"
* showTimer={true}
* meetingProgressTime={meetingTime}
* >
* <div style={{
* padding: '15px',
* color: '#ecf0f1',
* display: 'grid',
* gridTemplateColumns: 'repeat(3, 1fr)',
* gap: '10px'
* }}>
* <div style={{ backgroundColor: '#7f8c8d', padding: '20px' }}>Participant 1</div>
* <div style={{ backgroundColor: '#7f8c8d', padding: '20px' }}>Participant 2</div>
* <div style={{ backgroundColor: '#7f8c8d', padding: '20px' }}>Participant 3</div>
* </div>
* </OtherGridComponent>
* </>
* );
* };
* ```
*
* @example
* // Analytics tracking with custom timer
* ```tsx
* import React, { useState, useEffect } from 'react';
* import { OtherGridComponent } from 'mediasfu-reactjs';
*
* const AnalyticsTimer = ({ meetingProgressTime, initialBackgroundColor, showTimer }) => {
* useEffect(() => {
* analytics.track('Other Grid Timer Updated', {
* time: meetingProgressTime,
* visible: showTimer
* });
* }, [meetingProgressTime, showTimer]);
*
* return showTimer ? (
* <div style={{
* position: 'absolute',
* top: '5px',
* left: '5px',
* padding: '5px 10px',
* backgroundColor: initialBackgroundColor || 'rgba(0,0,0,0.7)',
* color: '#fff',
* fontSize: '12px',
* borderRadius: '3px'
* }}>
* ⏱️ {meetingProgressTime}
* </div>
* ) : null;
* };
*
* const AnalyticsSecondaryGrid = () => {
* const [meetingTime, setMeetingTime] = useState('00:00');
* const [participantCount, setParticipantCount] = useState(6);
*
* useEffect(() => {
* analytics.track('Secondary Grid Rendered', {
* participantCount,
* dimensions: { width: 800, height: 600 }
* });
* }, [participantCount]);
*
* return (
* <OtherGridComponent
* backgroundColor="#1a1a1a"
* width={800}
* height={600}
* showAspect={true}
* timeBackgroundColor="rgba(52, 152, 219, 0.9)"
* showTimer={true}
* meetingProgressTime={meetingTime}
* timerComponent={AnalyticsTimer}
* >
* <div>Grid with {participantCount} participants</div>
* </OtherGridComponent>
* );
* };
* ```
*
* @example
* // Integration with MediasfuGeneric using uiOverrides
* ```tsx
* import React, { useState } from 'react';
* import { MediasfuGeneric, OtherGridComponent } from 'mediasfu-reactjs';
*
* const CustomOtherGridComponent = (props) => {
* const EnhancedTimer = (timerProps) => (
* <div style={{
* display: 'flex',
* alignItems: 'center',
* gap: '10px',
* position: 'absolute',
* top: '10px',
* right: '10px',
* backgroundColor: 'rgba(0,0,0,0.8)',
* padding: '8px 12px',
* borderRadius: '6px'
* }}>
* <span style={{ fontSize: '12px', color: '#95a5a6' }}>Session</span>
* <span style={{ fontSize: '14px', color: '#2ecc71', fontWeight: 'bold' }}>
* {timerProps.meetingProgressTime}
* </span>
* </div>
* );
*
* return (
* <div style={{ position: 'relative' }}>
* <OtherGridComponent
* {...props}
* backgroundColor="#0a0a0a"
* timerComponent={EnhancedTimer}
* />
* <div style={{
* position: 'absolute',
* bottom: '10px',
* left: '10px',
* color: '#fff',
* fontSize: '12px',
* backgroundColor: 'rgba(0,0,0,0.7)',
* padding: '5px 10px',
* borderRadius: '4px'
* }}>
* Secondary Grid
* </div>
* </div>
* );
* };
*
* const App = () => {
* const [credentials] = useState({
* apiUserName: 'user123',
* apiKey: 'your-api-key'
* });
*
* return (
* <MediasfuGeneric
* credentials={credentials}
* uiOverrides={{
* OtherGridComponent: CustomOtherGridComponent
* }}
* />
* );
* };
* ```
*/
declare const OtherGridComponent: React.FC<OtherGridComponentOptions>;
export default OtherGridComponent;
//# sourceMappingURL=OtherGridComponent.d.ts.map