Function CoHostModal

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:

• Select co-host from participant list
• Granular responsibility assignment (manage participants, media, settings, etc.)
• "Select" vs "Dedicated" permission levels
• Current co-host display
• Real-time socket synchronization
• Customizable responsibility items
• Extensive HTML attributes customization
• Custom render hooks for sections
• Responsive positioning

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"
      />
    </>
  );
}
Copy

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>
      }
    />
  );
}
Copy

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}
    />
  );
}
Copy

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} />;
Copy