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