Const// Basic usage with default countdown
import React, { useState } from 'react';
import { ConfirmHereModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';
const BasicPresenceCheck = () => {
const [showModal, setShowModal] = useState(true);
const socket = io('https://mediasfu.com');
return (
<ConfirmHereModal
isConfirmHereModalVisible={showModal}
onConfirmHereClose={() => setShowModal(false)}
socket={socket}
roomName="meeting-room-123"
member="user@example.com"
countdownDuration={120}
/>
);
};
// Custom styled with timeout warning
import React, { useState } from 'react';
import { ConfirmHereModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';
const CustomStyledPresence = () => {
const [showModal, setShowModal] = useState(true);
const socket = io('https://mediasfu.com');
const handleTimeout = () => {
console.warn('User failed to confirm presence');
// Redirect to lobby or end session
};
return (
<ConfirmHereModal
isConfirmHereModalVisible={showModal}
onConfirmHereClose={() => setShowModal(false)}
socket={socket}
roomName="meeting-room-123"
member="user@example.com"
backgroundColor="#ff6b6b"
countdownDuration={60}
onTimeout={handleTimeout}
title={<h2 style={{ color: '#fff' }}>⚠️ Are You Still There?</h2>}
message={({ counter }) => (
<p style={{ color: counter < 10 ? '#fff' : '#333' }}>
You will be removed from the meeting if you don't respond!
</p>
)}
confirmButtonLabel="Yes, I'm Here!"
confirmButtonProps={{
style: {
backgroundColor: '#2ecc71',
color: '#fff',
padding: '12px 24px',
fontSize: '16px'
}
}}
/>
);
};
// Analytics tracking for presence confirmations
import React, { useState } from 'react';
import { ConfirmHereModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';
const AnalyticsPresence = () => {
const [showModal, setShowModal] = useState(true);
const socket = io('https://mediasfu.com');
const handleConfirm = () => {
// Track confirmation
analytics.track('Presence Confirmed', {
roomName: 'meeting-room-123',
timeRemaining: counter
});
setShowModal(false);
};
const handleTimeout = () => {
analytics.track('Presence Timeout', {
roomName: 'meeting-room-123'
});
};
return (
<ConfirmHereModal
isConfirmHereModalVisible={showModal}
onConfirmHereClose={handleConfirm}
socket={socket}
roomName="meeting-room-123"
member="user@example.com"
onTimeout={handleTimeout}
renderCountdown={({ defaultCountdown, counter }) => (
<div>
{defaultCountdown}
{counter < 30 && (
<p style={{ color: 'red' }}>⏰ Less than 30 seconds remaining!</p>
)}
</div>
)}
/>
);
};
// Integration with MediasfuGeneric using uiOverrides
import React, { useState } from 'react';
import { MediasfuGeneric, ConfirmHereModal } from 'mediasfu-reactjs';
const CustomPresenceComponent = (props) => (
<ConfirmHereModal
{...props}
title="Custom Presence Check"
countdownDuration={90}
message="Please confirm you're still attending this session."
renderBody={({ spinner, title, message, countdown, confirmButton }) => (
<div className="custom-presence">
<div className="presence-header">
{spinner}
{title}
</div>
<div className="presence-content">
{message}
<div className="presence-countdown">{countdown}</div>
</div>
<div className="presence-footer">
{confirmButton}
</div>
</div>
)}
/>
);
const App = () => {
const [credentials] = useState({
apiUserName: 'user123',
apiKey: 'your-api-key'
});
return (
<MediasfuGeneric
credentials={credentials}
uiOverrides={{
ConfirmHereModal: CustomPresenceComponent
}}
/>
);
};
ConfirmHereModal - A modal component for confirming user presence with countdown timer.
This component displays an interactive modal that prompts users to confirm their presence in a session. It features a configurable countdown timer, socket-based presence confirmation, and comprehensive customization options for styling, content, and behavior.
Key Features: