Const// Basic display settings modal
import React, { useState } from 'react';
import { DisplaySettingsModal } from 'mediasfu-reactjs';
function DisplayControls({ parameters }) {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<button onClick={() => setIsVisible(true)}>
Display Settings ({parameters.meetingDisplayType})
</button>
<DisplaySettingsModal
isDisplaySettingsModalVisible={isVisible}
onDisplaySettingsClose={() => setIsVisible(false)}
parameters={parameters}
position="topRight"
backgroundColor="#0f172a"
/>
</>
);
}
// Custom display settings with analytics
import { DisplaySettingsModal } from 'mediasfu-reactjs';
function AnalyticsDisplay({ isVisible, onClose, parameters }) {
const handleModifySettings = async (options) => {
analytics.track('display_settings_changed', {
displayType: options.displayType,
autoWave: options.autoWave,
forceFullDisplay: options.forceFullDisplay,
videoOptimized: options.meetingVideoOptimized,
});
return parameters.modifyDisplaySettings(options);
};
return (
<DisplaySettingsModal
isDisplaySettingsModalVisible={isVisible}
onDisplaySettingsClose={onClose}
onModifyDisplaySettings={handleModifySettings}
parameters={parameters}
position="bottomLeft"
backgroundColor="#1e3a8a"
/>
);
}
// Branded settings with current state display
import { DisplaySettingsModal } from 'mediasfu-reactjs';
function BrandedDisplaySettings({ isVisible, onClose, parameters }) {
const displayModes = {
video: 'Video Focus',
media: 'Screen Share',
all: 'All Participants',
};
return (
<div>
<div style={{
padding: 12,
background: '#f8fafc',
borderRadius: 8,
marginBottom: 16,
}}>
<div style={{ fontWeight: 600, marginBottom: 8 }}>
Current: {displayModes[parameters.meetingDisplayType]}
</div>
<div style={{ fontSize: 14, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
<span>Audio Viz: {parameters.autoWave ? '✓' : '✗'}</span>
<span>Full Display: {parameters.forceFullDisplay ? '✓' : '✗'}</span>
<span>Optimized: {parameters.meetingVideoOptimized ? '✓' : '✗'}</span>
</div>
</div>
<DisplaySettingsModal
isDisplaySettingsModalVisible={isVisible}
onDisplaySettingsClose={onClose}
parameters={parameters}
position="topLeft"
backgroundColor="#7c3aed"
/>
</div>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, DisplaySettingsModal } from 'mediasfu-reactjs';
const uiOverrides = {
displaySettingsModal: {
component: (props) => (
<DisplaySettingsModal
{...props}
backgroundColor="#0f172a"
position="topRight"
onModifyDisplaySettings={async (options) => {
console.log('Display settings updated:', {
type: options.displayType,
optimized: options.meetingVideoOptimized,
});
return props.onModifyDisplaySettings?.(options);
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
DisplaySettingsModal - Comprehensive layout and visual configuration interface
A powerful modal for managing meeting display modes, video optimization, participant visibility, and audio visualization settings. Provides granular control over grid layouts, screen sharing displays, and participant rendering. Perfect for adapting the UI to different meeting types and user preferences.
Features: