mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
228 lines (227 loc) • 7.43 kB
TypeScript
import React from "react";
import { CustomButton } from "./CustomButtons";
import { EventType } from "../../@types/types";
/**
* Interface defining the options (props) for the MenuModal component.
*
* MenuModal provides access to meeting information, custom actions, and sharing capabilities.
*
* @interface MenuModalOptions
*
* **Display Control:**
* @property {boolean} isVisible - Whether the modal is currently visible/open
* @property {() => void} onClose - Callback function invoked when modal is closed
* @property {"topRight" | "topLeft" | "bottomRight" | "bottomLeft"} [position="bottomRight"]
* Screen position where the modal should appear
*
* **Styling:**
* @property {string} [backgroundColor="#83c0e9"] - Background color of the modal content area
* @property {object} [style] - Additional custom styles for the modal container
*
* **Meeting Information:**
* @property {string} roomName - Name/ID of the current room/meeting
* @property {string} adminPasscode - Admin passcode for the meeting (displayed to authorized users)
* @property {string} islevel - User's level/role (e.g., '0'=participant, '1'=moderator, '2'=host)
* @property {EventType} eventType - Type of event ('conference', 'webinar', 'broadcast', etc.)
* @property {string} [localLink] - Optional link to the Community Edition server
*
* **Custom Content:**
* @property {CustomButton[]} [customButtons] - Array of custom action buttons to display
* Each button can have custom icon, text, color, and action handler
* @property {boolean} [shareButtons=true] - Whether to display built-in share buttons
*
* **Advanced Render Overrides:**
* @property {(options: { defaultContent: JSX.Element; dimensions: { width: number; height: number }}) => JSX.Element} [renderContent]
* Function to wrap or replace the default modal content
* @property {(options: { defaultContainer: JSX.Element; dimensions: { width: number; height: number }}) => React.ReactNode} [renderContainer]
* Function to wrap or replace the entire modal container
*/
export interface MenuModalOptions {
/**
* The background color of the modal content.
* @default "#83c0e9"
*/
backgroundColor?: string;
/**
* Determines if the modal is visible.
*/
isVisible: boolean;
/**
* Function to call when the modal is closed.
*/
onClose: () => void;
/**
* An array of custom buttons to display in the modal.
*/
customButtons?: CustomButton[];
/**
* Determines if share buttons should be displayed.
* @default true
*/
shareButtons?: boolean;
/**
* Position of the modal on the screen.
* Possible values: "topRight", "topLeft", "bottomRight", "bottomLeft"
* @default "bottomRight"
*/
position?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft";
/**
* The name of the room.
*/
roomName: string;
/**
* The admin passcode for the meeting.
*/
adminPasscode: string;
/**
* The level of the user.
*/
islevel: string;
/**
* The type of event.
*/
eventType: EventType;
/**
* The link to the Commnity Edition server.
*/
localLink?: string;
isDarkMode?: boolean;
/**
* Optional custom style for the modal container.
*/
style?: object;
/**
* Custom render function for modal content.
*/
renderContent?: (options: {
defaultContent: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => JSX.Element;
/**
* Custom render function for the modal container.
*/
renderContainer?: (options: {
defaultContainer: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type MenuModalType = (options: MenuModalOptions) => JSX.Element;
/**
* MenuModal - Meeting menu with room info, custom actions, and share options
*
* MenuModal is a comprehensive React Native modal component that displays meeting
* information (room name, passcode), custom action buttons, and sharing capabilities.
* It's typically accessed from a menu/hamburger button in the main UI.
*
* **Key Features:**
* - Meeting ID and passcode display (for authorized users)
* - Custom action buttons with icons and handlers
* - Built-in share buttons for inviting participants
* - Flexible positioning (4 screen corners)
* - Scrollable content for long lists
* - Responsive design for different screen sizes
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.menuModalComponent` to provide
* a completely custom menu modal implementation.
*
* @component
* @param {MenuModalOptions} props - Configuration options for the MenuModal component
*
* @returns {JSX.Element} Rendered menu modal with meeting info and actions
*
* @example
* // Basic usage - Display menu modal with default settings
* import React, { useState } from 'react';
* import { MenuModal } from 'mediasfu-reactnative-expo';
*
* function MeetingControls() {
* const [menuVisible, setMenuVisible] = useState(false);
*
* return (
* <>
* <Button title="Menu" onPress={() => setMenuVisible(true)} />
* <MenuModal
* isVisible={menuVisible}
* onClose={() => setMenuVisible(false)}
* backgroundColor="#83c0e9"
* position="bottomRight"
* roomName="MeetingRoom123"
* adminPasscode="456789"
* islevel="2"
* eventType="conference"
* shareButtons={true}
* />
* </>
* );
* }
*
* @example
* // With custom action buttons
* <MenuModal
* isVisible={showMenu}
* onClose={() => setShowMenu(false)}
* backgroundColor="#1a1a2e"
* position="topRight"
* roomName="TeamStandup"
* adminPasscode="secret123"
* islevel="1"
* eventType="webinar"
* customButtons={[
* {
* action: () => console.log('Settings clicked'),
* show: true,
* backgroundColor: '#4CAF50',
* icon: 'cog',
* text: 'Settings',
* },
* {
* action: () => console.log('Help clicked'),
* show: true,
* backgroundColor: '#2196F3',
* icon: 'question-circle',
* text: 'Help',
* },
* ]}
* shareButtons={true}
* localLink="https://meet.example.com/room123"
* />
*
* @example
* // Using uiOverrides for complete modal replacement
* import { MyCustomMenuModal } from './MyCustomMenuModal';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* menuModalComponent: {
* component: MyCustomMenuModal,
* injectedProps: {
* theme: 'dark',
* compactMode: true,
* },
* },
* },
* };
*
* // MyCustomMenuModal.tsx
* export const MyCustomMenuModal = (props: MenuModalOptions & { theme: string; compactMode: boolean }) => {
* return (
* <Modal visible={props.isVisible} onRequestClose={props.onClose}>
* <View style={{ backgroundColor: props.theme === 'dark' ? '#000' : '#fff' }}>
* <Text>Room: {props.roomName}</Text>
* <Text>Passcode: {props.adminPasscode}</Text>
* <Button title="Close" onPress={props.onClose} />
* </View>
* </Modal>
* );
* };
*/
declare const MenuModal: React.FC<MenuModalOptions>;
export default MenuModal;