Const// Basic usage for video grid display
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>
);
};
// Custom styled with themed timer
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>
);
};
// Analytics tracking with custom timer
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>
);
};
// Integration with MediasfuGeneric using uiOverrides
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
}}
/>
);
};
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: