Const// Basic recording modal with default settings
import React, { useState } from 'react';
import { RecordingModal } from 'mediasfu-reactjs';
function RecordingControls({ parameters }) {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<button onClick={() => setIsVisible(true)}>
Configure Recording
</button>
<RecordingModal
isRecordingModalVisible={isVisible}
onClose={() => setIsVisible(false)}
confirmRecording={parameters.confirmRecording}
startRecording={parameters.startRecording}
parameters={parameters}
backgroundColor="#0f172a"
position="bottomRight"
/>
</>
);
}
// Custom styling with branded colors
import { RecordingModal } from 'mediasfu-reactjs';
function BrandedRecording({ isVisible, onClose, parameters }) {
return (
<RecordingModal
isRecordingModalVisible={isVisible}
onClose={onClose}
confirmRecording={parameters.confirmRecording}
startRecording={parameters.startRecording}
parameters={parameters}
backgroundColor="#1e3a8a"
position="topRight"
contentProps={{
style: {
borderRadius: 20,
border: '2px solid #3b82f6',
boxShadow: '0 20px 60px rgba(59,130,246,0.3)',
maxHeight: '90vh',
overflow: 'auto',
},
}}
confirmButtonProps={{
style: {
background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
color: 'white',
padding: '12px 32px',
borderRadius: 12,
fontWeight: 600,
border: 'none',
cursor: 'pointer',
},
}}
startButtonProps={{
style: {
background: 'linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%)',
color: 'white',
padding: '12px 32px',
borderRadius: 12,
fontWeight: 600,
border: 'none',
cursor: 'pointer',
},
}}
/>
);
}
// Custom actions with analytics tracking
import { RecordingModal } from 'mediasfu-reactjs';
function AnalyticsRecording({ isVisible, onClose, parameters }) {
const handleConfirm = async () => {
analytics.track('recording_configured', {
videoType: parameters.recordingVideoType,
displayType: parameters.recordingDisplayType,
hasNameTags: parameters.recordingNameTags,
hasCustomText: parameters.recordingAddText,
hasHLS: parameters.recordingAddHLS,
});
await parameters.confirmRecording({ parameters });
};
const handleStart = async () => {
analytics.track('recording_started', {
isPaused: parameters.recordPaused,
});
await parameters.startRecording({ parameters });
};
return (
<RecordingModal
isRecordingModalVisible={isVisible}
onClose={onClose}
confirmRecording={handleConfirm}
startRecording={handleStart}
parameters={parameters}
renderActions={({ defaultActions, recordPaused, handleConfirm, handleStart }) => (
<div style={{
display: 'flex',
gap: 12,
padding: 20,
borderTop: '2px solid #1e3a8a',
justifyContent: 'space-between',
}}>
<button
onClick={handleConfirm}
style={{
flex: 1,
background: '#3b82f6',
color: 'white',
padding: '14px 24px',
borderRadius: 12,
border: 'none',
fontWeight: 600,
cursor: 'pointer',
}}
>
💾 Save Settings
</button>
<button
onClick={handleStart}
style={{
flex: 1,
background: recordPaused ? '#22c55e' : '#dc2626',
color: 'white',
padding: '14px 24px',
borderRadius: 12,
border: 'none',
fontWeight: 600,
cursor: 'pointer',
}}
>
{recordPaused ? '▶️ Resume' : '🔴 Start'} Recording
</button>
</div>
)}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, RecordingModal } from 'mediasfu-reactjs';
const uiOverrides = {
recordingModal: {
component: (props) => (
<RecordingModal
{...props}
backgroundColor="#0f172a"
position="topRight"
contentProps={{
style: {
maxHeight: '85vh',
borderRadius: 20,
border: '2px solid #3b82f6',
},
}}
confirmButtonProps={{
style: {
background: '#22c55e',
borderRadius: 12,
padding: '12px 28px',
},
}}
startButtonProps={{
style: {
background: '#dc2626',
borderRadius: 12,
padding: '12px 28px',
},
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
RecordingModal - Comprehensive recording configuration interface
A feature-rich modal for configuring cloud recording settings including video quality, display options, branding (watermarks, name tags, custom text), background colors, and HLS streaming. Provides standard and advanced configuration panels with real-time preview.
Features: