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
169 lines (168 loc) • 6.14 kB
TypeScript
import React from 'react';
import { Socket } from 'socket.io-client';
import { ConnectSocketType } from '../../sockets/SocketManager';
import { ShowAlert } from '../../@types/types';
/**
* Configuration parameters for WelcomePage component.
*
* @interface WelcomePageParameters
*
* **Branding:**
* @property {string} [imgSrc='https://mediasfu.com/images/logo192.png'] - Logo image URL
*
* **Connection Management:**
* @property {ConnectSocketType} connectSocket - Function to establish Socket.io connection
* @property {(socket: Socket) => void} updateSocket - Updates socket instance in parent state
*
* **State Updates:**
* @property {(visible: boolean) => void} updateIsLoadingModalVisible - Controls loading modal visibility
* @property {(validated: boolean) => void} updateValidated - Updates validation state after successful connection
* @property {(apiUserName: string) => void} updateApiUserName - Updates API username (event ID)
* @property {(apiToken: string) => void} updateApiToken - Updates API token (secret key)
* @property {(link: string) => void} updateLink - Updates event link/URL
* @property {(roomName: string) => void} updateRoomName - Updates room name
* @property {(userName: string) => void} updateMember - Updates participant name
*
* **User Feedback:**
* @property {ShowAlert} [showAlert] - Alert display function for validation errors and feedback
*/
export interface WelcomePageParameters {
/**
* Source URL for the logo image.
* Defaults to 'https://mediasfu.com/images/logo192.png' if not provided.
*/
imgSrc?: string;
/**
* Function to display alert messages.
*/
showAlert?: ShowAlert;
/**
* Function to toggle the visibility of the loading modal.
*/
updateIsLoadingModalVisible: (visible: boolean) => void;
/**
* Function to establish a socket connection.
*/
connectSocket: ConnectSocketType;
/**
* Function to update the socket instance in the parent state.
*/
updateSocket: (socket: Socket) => void;
/**
* Function to update the validation state in the parent.
*/
updateValidated: (validated: boolean) => void;
/**
* Function to update the API username in the parent state.
*/
updateApiUserName: (apiUserName: string) => void;
/**
* Function to update the API token in the parent state.
*/
updateApiToken: (apiToken: string) => void;
/**
* Function to update the event link in the parent state.
*/
updateLink: (link: string) => void;
/**
* Function to update the room name in the parent state.
*/
updateRoomName: (roomName: string) => void;
/**
* Function to update the member name in the parent state.
*/
updateMember: (userName: string) => void;
}
/**
* Configuration options for the WelcomePage component.
*
* @interface WelcomePageOptions
*
* **State Parameters:**
* @property {WelcomePageParameters} parameters - Welcome page configuration and state handlers
*/
export interface WelcomePageOptions {
/**
* Parameters required by the WelcomePage component.
*/
parameters: WelcomePageParameters;
}
export type WelcomePageType = (options: WelcomePageOptions) => JSX.Element;
/**
* WelcomePage - Event credentials entry and validation screen
*
* WelcomePage is a React Native component that provides the initial entry point for
* joining MediaSFU events. Users can enter credentials manually (event ID, secret, name)
* or scan a QR code to auto-fill. It validates credentials, handles rate limiting,
* and establishes the Socket.io connection before proceeding to the meeting.
*
* **Key Features:**
* - Manual credential entry (Event ID, Secret, Name, optional Link)
* - QR code scanning for auto-fill
* - Camera permission handling
* - Rate limiting (10 attempts per 3 hours)
* - Socket.io connection establishment
* - Persistent storage of attempt counts
* - Loading state management
* - Input validation and error feedback
* - Support for custom event links
*
* **UI Customization:**
* The WelcomePage layout and styling are fixed but can be customized by creating
* a custom welcome page component and using it instead of this default one.
*
* @component
* @param {WelcomePageOptions} props - Configuration options
*
* @returns {JSX.Element} Rendered welcome page
*
* @example
* ```tsx
* // Basic usage in main app component
* import React, { useState } from 'react';
* import { WelcomePage } from 'mediasfu-reactnative-expo';
* import { connectSocket } from './sockets/SocketManager';
*
* function App() {
* const [socket, setSocket] = useState(null);
* const [validated, setValidated] = useState(false);
* const [credentials, setCredentials] = useState({});
*
* const parameters = {
* imgSrc: 'https://example.com/logo.png',
* showAlert: ({ message, type }) => alert(message),
* updateIsLoadingModalVisible: setLoading,
* connectSocket: connectSocket,
* updateSocket: setSocket,
* updateValidated: setValidated,
* updateApiUserName: (name) => setCredentials(prev => ({ ...prev, apiUserName: name })),
* updateApiToken: (token) => setCredentials(prev => ({ ...prev, apiToken: token })),
* updateLink: (link) => setCredentials(prev => ({ ...prev, link })),
* updateRoomName: (room) => setCredentials(prev => ({ ...prev, roomName: room })),
* updateMember: (member) => setCredentials(prev => ({ ...prev, member })),
* };
*
* if (validated) {
* return <MeetingRoom socket={socket} credentials={credentials} />;
* }
*
* return <WelcomePage parameters={parameters} />;
* }
* ```
*
* @example
* ```tsx
* // With custom branding and alert handler
* const customParameters = {
* imgSrc: 'https://mybrand.com/logo.png',
* showAlert: ({ message, type, duration }) => {
* Toast.show({ text: message, type, duration });
* },
* // ... other handlers
* };
*
* return <WelcomePage parameters={customParameters} />;
* ```
*/
declare const WelcomePage: React.FC<WelcomePageOptions>;
export default WelcomePage;