ConstSocket.io client instance
// Basic co-host management
import React, { useState } from 'react';
import { CoHostModal } from 'mediasfu-reactjs';
function CoHostManagement({ socket, roomName, participants, showAlert }) {
const [isVisible, setIsVisible] = useState(false);
const [currentCohost, setCurrentCohost] = useState('No coHost');
const [coHostResponsibility, setCoHostResponsibility] = useState([
{ name: 'manageParticipants', value: false, dedicated: false },
{ name: 'manageMedia', value: false, dedicated: false },
]);
return (
<>
<button onClick={() => setIsVisible(true)}>
Manage Co-Host
</button>
<CoHostModal
isCoHostModalVisible={isVisible}
onCoHostClose={() => setIsVisible(false)}
currentCohost={currentCohost}
participants={participants}
coHostResponsibility={coHostResponsibility}
updateCoHostResponsibility={setCoHostResponsibility}
updateCoHost={setCurrentCohost}
updateIsCoHostModalVisible={setIsVisible}
roomName={roomName}
socket={socket}
showAlert={showAlert}
position="topRight"
backgroundColor="#0f172a"
/>
</>
);
}
// Custom styled with responsibility counts
import { CoHostModal } from 'mediasfu-reactjs';
function BrandedCoHost(props) {
const activeResponsibilities = props.coHostResponsibility.filter(r => r.value).length;
return (
<CoHostModal
{...props}
backgroundColor="#1e3a8a"
position="topLeft"
contentProps={{
style: {
borderRadius: 20,
border: '2px solid #3b82f6',
},
}}
saveButtonProps={{
style: {
background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
color: 'white',
padding: '12px 28px',
borderRadius: 12,
fontWeight: 600,
},
}}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<span>Co-Host Settings</span>
<span style={{ fontSize: 14, fontWeight: 400 }}>
({activeResponsibilities} active)
</span>
</div>
}
/>
);
}
// Analytics tracking for co-host changes
import { CoHostModal } from 'mediasfu-reactjs';
function AnalyticsCoHost(props) {
const handleModifySettings = async (options) => {
const activeResponsibilities = options.parameters.coHostResponsibility
.filter(r => r.value)
.map(r => r.name);
analytics.track('cohost_settings_updated', {
newCoHost: options.parameters.coHost,
previousCoHost: props.currentCohost,
responsibilities: activeResponsibilities,
responsibilityCount: activeResponsibilities.length,
});
return props.onModifyEventSettings?.(options);
};
return (
<CoHostModal
{...props}
onModifyEventSettings={handleModifySettings}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, CoHostModal } from 'mediasfu-reactjs';
const uiOverrides = {
coHostModal: {
component: (props) => (
<CoHostModal
{...props}
backgroundColor="#0f172a"
position="topRight"
saveButtonProps={{
style: {
background: '#22c55e',
borderRadius: 12,
padding: '12px 28px',
fontWeight: 600,
},
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
CoHostModal - Manage co-host selection and responsibility assignment
A comprehensive modal for hosts to designate co-hosts and configure their permissions. Provides granular control over responsibilities like managing participants, media controls, recording, and other meeting functions. Perfect for distributing meeting management duties and ensuring smooth event facilitation.
Features: