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.
308 lines • 11.7 kB
TypeScript
import React from "react";
import type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
import { MeetingIdComponentOptions } from "./MeetingIDComponent";
import { MeetingPasscodeComponentOptions } from "./MeetingPasscodeComponent";
import { ShareButtonsComponentOptions } from "./ShareButtonsComponent";
import { CustomButton, CustomButtonsOptions } from "./CustomButtons";
import { EventType } from "../../@types/types";
/**
* Render mode for modal components.
* - `modal`: Traditional overlay modal with positioning, header, and close button
* - `sidebar`: Inline content for desktop sidebar (no overlay, no header, full width)
* - `inline`: Embedded content without modal wrapper (no positioning)
*/
export type ModalRenderMode = 'modal' | 'sidebar' | 'inline';
export interface MenuModalOptions {
backgroundColor?: string;
isVisible: boolean;
onClose: () => void;
customButtons?: CustomButton[];
shareButtons?: boolean;
position?: string;
roomName: string;
adminPasscode: string;
islevel: string;
eventType: EventType;
localLink?: string;
/** Theme control - whether dark mode is active */
isDarkMode?: boolean;
/** Callback to toggle the theme mode */
onToggleTheme?: (value: boolean) => void;
/** Render mode: modal (default overlay), sidebar (inline for desktop), inline (no wrapper) */
renderMode?: ModalRenderMode;
title?: React.ReactNode;
menuIcon?: React.ReactNode;
menuIconProps?: Partial<FontAwesomeIconProps>;
closeIcon?: React.ReactNode;
closeIconProps?: Partial<FontAwesomeIconProps>;
overlayProps?: React.HTMLAttributes<HTMLDivElement>;
contentProps?: React.HTMLAttributes<HTMLDivElement>;
headerProps?: React.HTMLAttributes<HTMLDivElement>;
titleWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
badgeWrapperProps?: React.HTMLAttributes<HTMLSpanElement>;
closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
dividerProps?: React.HTMLAttributes<HTMLHRElement>;
bodyProps?: React.HTMLAttributes<HTMLDivElement>;
scrollWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
customButtonsWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
customButtonsComponentProps?: Partial<CustomButtonsOptions>;
meetingPasscodeWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
meetingPasscodeComponentProps?: Partial<MeetingPasscodeComponentOptions>;
meetingIdWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
meetingIdComponentProps?: Partial<MeetingIdComponentOptions>;
shareButtonsWrapperProps?: React.HTMLAttributes<HTMLDivElement>;
shareButtonsComponentProps?: Partial<ShareButtonsComponentOptions>;
sectionsDividerProps?: React.HTMLAttributes<HTMLHRElement>;
renderHeader?: (options: {
defaultHeader: React.ReactNode;
onClose: () => void;
}) => React.ReactNode;
renderTitle?: (options: {
defaultTitle: React.ReactNode;
menuIcon: React.ReactNode;
titleContent: React.ReactNode;
}) => React.ReactNode;
renderCustomButtons?: (options: {
defaultCustomButtons: React.ReactNode;
buttons: CustomButton[];
}) => React.ReactNode;
renderMeetingPasscode?: (options: {
defaultMeetingPasscode: React.ReactNode;
adminPasscode: string;
isHost: boolean;
}) => React.ReactNode;
renderMeetingId?: (options: {
defaultMeetingId: React.ReactNode;
roomName: string;
}) => React.ReactNode;
renderShareButtons?: (options: {
defaultShareButtons: React.ReactNode;
hasShareButtons: boolean;
}) => React.ReactNode;
renderBody?: (options: {
defaultBody: React.ReactNode;
}) => React.ReactNode;
renderContent?: (options: {
defaultContent: React.ReactNode;
}) => React.ReactNode;
}
export type MenuModalType = (options: MenuModalOptions) => React.JSX.Element;
/**
* MenuModal - Quick actions tray with meeting info, sharing, and custom buttons
*
* A comprehensive menu modal that provides access to meeting details (ID, passcode),
* share functionality, and custom action buttons. Perfect for exposing common actions
* and meeting information in a compact, accessible interface.
*
* Features:
* - Meeting ID display with copy functionality
* - Admin passcode display (host only)
* - Configurable share buttons for inviting participants
* - Custom action buttons with icons and styling
* - Flexible positioning (bottomRight, topRight, etc.)
* - Custom render hooks for complete customization
* - Responsive design with scrollable content
*
* @component
* @param {MenuModalOptions} options - Configuration options
* @param {string} [options.backgroundColor="#83c0e9"] - Modal content background color
* @param {boolean} options.isVisible - Modal visibility state
* @param {Function} options.onClose - Callback when modal is closed
* @param {CustomButton[]} [options.customButtons=[]] - Array of custom action buttons
* @param {boolean} [options.shareButtons=true] - Show share buttons section
* @param {string} [options.position="bottomRight"] - Modal position (bottomRight, topRight, etc.)
* @param {string} options.roomName - Meeting/room identifier
* @param {string} options.adminPasscode - Admin passcode (shown to hosts only)
* @param {string} options.islevel - User level ('2'=host, '1'=co-host, '0'=participant)
* @param {EventType} options.eventType - Event type (conference, webinar, etc.)
* @param {string} [options.localLink] - Local server link for self-hosted scenarios
* @param {React.ReactNode} [options.title="Menu"] - Modal title content
* @param {React.ReactNode} [options.menuIcon] - Custom menu icon (defaults to faBars)
* @param {React.ReactNode} [options.closeIcon] - Custom close icon (defaults to faTimes)
* @param {object} [options.overlayProps] - HTML attributes for overlay div
* @param {object} [options.contentProps] - HTML attributes for content container
* @param {object} [options.headerProps] - HTML attributes for header section
* @param {object} [options.titleWrapperProps] - HTML attributes for title wrapper
* @param {object} [options.closeButtonProps] - HTML attributes for close button
* @param {object} [options.bodyProps] - HTML attributes for body section
* @param {Function} [options.renderHeader] - Custom header renderer
* @param {Function} [options.renderTitle] - Custom title renderer
* @param {Function} [options.renderCustomButtons] - Custom buttons section renderer
* @param {Function} [options.renderMeetingPasscode] - Custom passcode section renderer
* @param {Function} [options.renderMeetingId] - Custom meeting ID section renderer
* @param {Function} [options.renderShareButtons] - Custom share buttons renderer
* @param {Function} [options.renderBody] - Custom body renderer
* @param {Function} [options.renderContent] - Custom content renderer
*
* @returns {React.JSX.Element} Rendered menu modal
*
* @example
* // Basic menu with meeting info and share buttons
* ```tsx
* import React, { useState } from 'react';
* import { MenuModal } from 'mediasfu-reactjs';
*
* function MeetingMenu() {
* const [isMenuVisible, setIsMenuVisible] = useState(false);
*
* return (
* <>
* <button onClick={() => setIsMenuVisible(true)}>Open Menu</button>
* <MenuModal
* isVisible={isMenuVisible}
* onClose={() => setIsMenuVisible(false)}
* roomName="meeting-123-456"
* adminPasscode="1234"
* islevel="2"
* eventType="conference"
* shareButtons={true}
* backgroundColor="#0f172a"
* position="bottomRight"
* />
* </>
* );
* }
* ```
*
* @example
* // Menu with custom action buttons
* ```tsx
* import { MenuModal } from 'mediasfu-reactjs';
* import { faRecordVinyl, faUsers, faChartLine } from '@fortawesome/free-solid-svg-icons';
*
* function CustomActionsMenu({ isVisible, onClose, onStartRecording, onViewStats }) {
* const customButtons = [
* {
* action: onStartRecording,
* show: true,
* backgroundColor: "#dc2626",
* disabled: false,
* icon: faRecordVinyl,
* text: "Start Recording",
* textStyle: { color: "white", fontWeight: 600 },
* },
* {
* action: onViewStats,
* show: true,
* backgroundColor: "#3b82f6",
* disabled: false,
* icon: faChartLine,
* text: "View Statistics",
* textStyle: { color: "white" },
* },
* {
* action: () => console.log("Manage participants"),
* show: true,
* backgroundColor: "#22c55e",
* icon: faUsers,
* text: "Manage Participants",
* },
* ];
*
* return (
* <MenuModal
* isVisible={isVisible}
* onClose={onClose}
* customButtons={customButtons}
* shareButtons={false}
* roomName="event-789"
* adminPasscode="secure123"
* islevel="2"
* eventType="webinar"
* backgroundColor="#1e3a8a"
* position="topRight"
* />
* );
* }
* ```
*
* @example
* // Custom rendering with branded styling
* ```tsx
* import { MenuModal } from 'mediasfu-reactjs';
*
* function BrandedMenu({ isVisible, onClose, roomName, passcode }) {
* return (
* <MenuModal
* isVisible={isVisible}
* onClose={onClose}
* roomName={roomName}
* adminPasscode={passcode}
* islevel="2"
* eventType="conference"
* backgroundColor="transparent"
* contentProps={{
* style: {
* background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
* borderRadius: 16,
* boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
* },
* }}
* renderTitle={({ defaultTitle, titleContent }) => (
* <div style={{
* display: 'flex',
* alignItems: 'center',
* gap: 12,
* fontSize: 20,
* fontWeight: 700,
* color: '#ffffff',
* }}>
* <span>🎯</span>
* {titleContent}
* </div>
* )}
* renderMeetingId={({ defaultMeetingId, roomName }) => (
* <div style={{
* padding: 16,
* backgroundColor: 'rgba(255,255,255,0.1)',
* borderRadius: 12,
* backdropFilter: 'blur(10px)',
* }}>
* <p style={{ color: '#e2e8f0', fontSize: 12, marginBottom: 4 }}>Meeting ID</p>
* <p style={{ color: '#ffffff', fontSize: 16, fontWeight: 600, fontFamily: 'monospace' }}>
* {roomName}
* </p>
* </div>
* )}
* />
* );
* }
* ```
*
* @example
* // Override with MediasfuGeneric uiOverrides
* ```tsx
* import { MediasfuGeneric, MenuModal } from 'mediasfu-reactjs';
*
* const uiOverrides = {
* menuModal: {
* component: (props) => (
* <MenuModal
* {...props}
* backgroundColor="#0f172a"
* position="topRight"
* contentProps={{
* style: {
* borderRadius: 20,
* border: '2px solid #3b82f6',
* boxShadow: '0 10px 40px rgba(59,130,246,0.3)',
* },
* }}
* customButtonsComponentProps={{
* buttonStyle: {
* borderRadius: 12,
* padding: '12px 20px',
* transition: 'all 0.2s ease',
* },
* }}
* />
* ),
* },
* };
*
* <MediasfuGeneric uiOverrides={uiOverrides} />;
* ```
*/
declare const MenuModal: React.FC<MenuModalOptions>;
export default MenuModal;
//# sourceMappingURL=MenuModal.d.ts.map