mediasfu-reactjs
Version:
mediasfu-reactjs – React 18/19 WebRTC SDK for video conferencing, webinars, broadcasts, live streaming, chat, recording, whiteboard, and AI agents. Plug-in prebuilt rooms or build fully custom UIs.
321 lines • 14.3 kB
TypeScript
import React from 'react';
import './CoHostModal.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { CoHostResponsibility, Participant, ModifyCoHostSettingsOptions, ShowAlert } from '../../@types/types';
import { Socket } from 'socket.io-client';
import { ModalRenderMode } from '../menuComponents/MenuModal';
export interface CoHostModalOptions {
isCoHostModalVisible: boolean;
currentCohost?: string;
participants: Participant[];
coHostResponsibility: CoHostResponsibility[];
position?: string;
backgroundColor?: string;
/** Theme control - whether dark mode is active */
isDarkMode?: boolean;
/** Enable glassmorphism effects (modern UI) */
enableGlassmorphism?: boolean;
/** Render mode: modal (default overlay), sidebar (inline for desktop), inline (no wrapper) */
renderMode?: ModalRenderMode;
roomName: string;
showAlert?: ShowAlert;
updateCoHostResponsibility: (coHostResponsibility: CoHostResponsibility[]) => void;
updateCoHost: (coHost: string) => void;
updateIsCoHostModalVisible: (isCoHostModalVisible: boolean) => void;
socket: Socket;
onCoHostClose: () => void;
onModifyEventSettings?: (settings: ModifyCoHostSettingsOptions) => void;
title?: React.ReactNode;
overlayProps?: React.HTMLAttributes<HTMLDivElement>;
contentProps?: React.HTMLAttributes<HTMLDivElement>;
headerProps?: React.HTMLAttributes<HTMLDivElement>;
titleProps?: React.HTMLAttributes<HTMLDivElement>;
closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
closeIconComponent?: React.ReactNode;
headerDividerProps?: React.HTMLAttributes<HTMLHRElement>;
bodyProps?: React.HTMLAttributes<HTMLDivElement>;
currentCoHostFieldProps?: React.HTMLAttributes<HTMLDivElement>;
currentCoHostLabelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
currentCoHostInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
selectCoHostFieldProps?: React.HTMLAttributes<HTMLDivElement>;
selectCoHostLabelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
selectCoHostSelectProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
responsibilitiesWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
responsibilitiesHeaderRowProps?: React.HTMLAttributes<HTMLDivElement>;
responsibilityHeaderLabelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
responsibilitySelectHeaderProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
responsibilityDedicatedHeaderProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
responsibilityRowProps?: React.HTMLAttributes<HTMLDivElement>;
responsibilityNameProps?: React.HTMLAttributes<HTMLDivElement>;
responsibilitySelectProps?: React.HTMLAttributes<HTMLDivElement>;
responsibilityDedicatedProps?: React.HTMLAttributes<HTMLDivElement>;
responsibilitySelectCheckboxProps?: React.InputHTMLAttributes<HTMLInputElement>;
responsibilityDedicatedCheckboxProps?: React.InputHTMLAttributes<HTMLInputElement>;
footerProps?: React.HTMLAttributes<HTMLDivElement>;
saveButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
currentCoHostLabel?: React.ReactNode;
selectCoHostLabel?: React.ReactNode;
responsibilityHeaderLabel?: React.ReactNode;
responsibilitySelectLabel?: React.ReactNode;
responsibilityDedicatedLabel?: React.ReactNode;
saveButtonLabel?: React.ReactNode;
responsibilityItems?: {
name: string;
label: React.ReactNode;
}[];
renderHeader?: (options: {
defaultHeader: React.ReactNode;
}) => React.ReactNode;
renderBody?: (options: {
defaultBody: React.ReactNode;
}) => React.ReactNode;
renderResponsibilities?: (options: {
defaultResponsibilities: React.ReactNode;
items: {
name: string;
label: React.ReactNode;
}[];
responsibilities: Record<string, boolean>;
toggleSelect: (name: string) => void;
toggleDedicated: (name: string) => void;
}) => React.ReactNode;
renderResponsibilityRow?: (options: {
defaultRow: React.ReactNode;
item: {
name: string;
label: React.ReactNode;
};
index: number;
isSelected: boolean;
isDedicated: boolean;
toggleSelect: () => void;
toggleDedicated: () => void;
}) => React.ReactNode;
renderFooter?: (options: {
defaultFooter: React.ReactNode;
}) => React.ReactNode;
renderContent?: (options: {
defaultContent: React.ReactNode;
}) => React.ReactNode;
}
export type CoHostModalType = (options: CoHostModalOptions) => React.JSX.Element;
/**
* 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
*
* @component
* @param {CoHostModalOptions} options - Configuration options
* @param {boolean} options.isCoHostModalVisible - Modal visibility state
* @param {string} [options.currentCohost='No coHost'] - Current co-host name
* @param {Participant[]} options.participants - Available participants list
* @param {CoHostResponsibility[]} options.coHostResponsibility - Responsibility configurations
* @param {string} [options.position="topRight"] - Modal screen position
* @param {string} [options.backgroundColor="#83c0e9"] - Modal background color
* @param {string} options.roomName - Meeting/room identifier
* @param {ShowAlert} [options.showAlert] - Alert display function
* @param {Function} options.updateCoHostResponsibility - Update responsibilities array
* @param {Function} options.updateCoHost - Update co-host selection
* @param {Function} options.updateIsCoHostModalVisible - Update modal visibility
* @param {Socket} options.socket - Socket.io client instance
* @param {Function} options.onCoHostClose - Callback when modal is closed
* @param {Function} [options.onModifyEventSettings] - Settings modification handler
* @param {React.ReactNode} [options.title] - Custom modal title
* @param {object} [options.overlayProps] - HTML attributes for overlay
* @param {object} [options.contentProps] - HTML attributes for content container
* @param {object} [options.headerProps] - HTML attributes for header
* @param {object} [options.titleProps] - HTML attributes for title
* @param {object} [options.closeButtonProps] - HTML attributes for close button
* @param {React.ReactNode} [options.closeIconComponent] - Custom close icon
* @param {object} [options.headerDividerProps] - HTML attributes for header divider
* @param {object} [options.bodyProps] - HTML attributes for body
* @param {object} [options.currentCoHostFieldProps] - HTML attributes for current co-host field
* @param {object} [options.currentCoHostLabelProps] - HTML attributes for current co-host label
* @param {object} [options.currentCoHostInputProps] - HTML attributes for current co-host input
* @param {object} [options.selectCoHostFieldProps] - HTML attributes for select field
* @param {object} [options.selectCoHostLabelProps] - HTML attributes for select label
* @param {object} [options.selectCoHostSelectProps] - HTML attributes for select dropdown
* @param {object} [options.responsibilitiesWrapperProps] - HTML attributes for responsibilities wrapper
* @param {object} [options.responsibilitiesHeaderRowProps] - HTML attributes for header row
* @param {object} [options.responsibilityHeaderLabelProps] - HTML attributes for responsibility header
* @param {object} [options.responsibilitySelectHeaderProps] - HTML attributes for select header
* @param {object} [options.responsibilityDedicatedHeaderProps] - HTML attributes for dedicated header
* @param {object} [options.responsibilityRowProps] - HTML attributes for responsibility rows
* @param {object} [options.responsibilityNameProps] - HTML attributes for responsibility names
* @param {object} [options.responsibilitySelectProps] - HTML attributes for select checkboxes
* @param {object} [options.responsibilityDedicatedProps] - HTML attributes for dedicated checkboxes
* @param {object} [options.responsibilitySelectCheckboxProps] - HTML attributes for select checkbox inputs
* @param {object} [options.responsibilityDedicatedCheckboxProps] - HTML attributes for dedicated checkbox inputs
* @param {object} [options.footerProps] - HTML attributes for footer
* @param {object} [options.saveButtonProps] - HTML attributes for save button
* @param {React.ReactNode} [options.currentCoHostLabel] - Custom current co-host label
* @param {React.ReactNode} [options.selectCoHostLabel] - Custom select co-host label
* @param {React.ReactNode} [options.responsibilityHeaderLabel] - Custom responsibility header label
* @param {React.ReactNode} [options.responsibilitySelectLabel] - Custom select column label
* @param {React.ReactNode} [options.responsibilityDedicatedLabel] - Custom dedicated column label
* @param {React.ReactNode} [options.saveButtonLabel] - Custom save button label
* @param {Array} [options.responsibilityItems] - Custom responsibility items array
* @param {Function} [options.renderHeader] - Custom header renderer
* @param {Function} [options.renderBody] - Custom body renderer
* @param {Function} [options.renderResponsibilities] - Custom responsibilities renderer
* @param {Function} [options.renderResponsibilityRow] - Custom responsibility row renderer
* @param {Function} [options.renderFooter] - Custom footer renderer
* @param {Function} [options.renderContent] - Custom content renderer
*
* @returns {React.JSX.Element} Rendered co-host management modal
*
* @example
* // Basic co-host management
* ```tsx
* 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"
* />
* </>
* );
* }
* ```
*
* @example
* // Custom styled with responsibility counts
* ```tsx
* 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>
* }
* />
* );
* }
* ```
*
* @example
* // Analytics tracking for co-host changes
* ```tsx
* 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}
* />
* );
* }
* ```
*
* @example
* // Override with MediasfuGeneric uiOverrides
* ```tsx
* 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} />;
* ```
*/
declare const CoHostModal: React.FC<CoHostModalOptions>;
export default CoHostModal;
//# sourceMappingURL=CoHostModal.d.ts.map