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
262 lines (260 loc) • 9.7 kB
TypeScript
import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { Socket } from 'socket.io-client';
import { GeneratePageContentOptions, GeneratePageContentParameters } from '../../consumers/generatePageContent';
import { ShowAlert, BreakoutParticipant } from '../../@types/types';
/**
* Interface defining the parameters required by the Pagination component.
* Extends GeneratePageContentParameters for full page content generation functionality.
*
* @interface PaginationParameters
*
* **Room Context:**
* @property {number} mainRoomsLength - Total number of main rooms
* @property {number} memberRoom - Current room number of the member
* @property {number} hostNewRoom - Host's current room number
* @property {string} roomName - Name/ID of the current room
* @property {string} member - Current user's member ID/name
*
* **Breakout Room State:**
* @property {boolean} breakOutRoomStarted - Whether breakout rooms have started
* @property {boolean} breakOutRoomEnded - Whether breakout rooms have ended
* @property {BreakoutParticipant[][]} breakoutRooms - Array of breakout room participant groups
*
* **User Context:**
* @property {string} islevel - User's level/role ('0'=participant, '1'=moderator, '2'=host)
* @property {Socket} socket - Socket.io client for real-time communication
* @property {ShowAlert} [showAlert] - Function to display alerts/notifications
*
* **Utility:**
* @property {() => PaginationParameters} getUpdatedAllParams - Get latest parameter state
*/
export interface PaginationParameters extends GeneratePageContentParameters {
mainRoomsLength: number;
memberRoom: number;
breakOutRoomStarted: boolean;
breakOutRoomEnded: boolean;
member: string;
breakoutRooms: BreakoutParticipant[][];
hostNewRoom: number;
roomName: string;
islevel: string;
showAlert?: ShowAlert;
socket: Socket;
getUpdatedAllParams: () => PaginationParameters;
[key: string]: any;
}
/**
* Interface defining the options for the Pagination component.
*
* @interface PaginationOptions
*
* **Pagination State:**
* @property {number} totalPages - Total number of pages available
* @property {number} currentUserPage - Current page number the user is viewing (1-indexed)
* @property {(options: GeneratePageContentOptions) => Promise<void>} [handlePageChange]
* Function to handle page changes (default: generatePageContent)
*
* **Layout & Positioning:**
* @property {"left" | "middle" | "right"} [position="middle"] - Horizontal alignment
* @property {"top" | "middle" | "bottom"} [location="middle"] - Vertical alignment
* @property {"horizontal" | "vertical"} [direction="horizontal"] - Pagination button layout direction
* @property {number} [paginationHeight=40] - Height of the pagination container in pixels
* @property {boolean} [showAspect=true] - Whether to display the pagination component
*
* **Styling:**
* @property {string} [backgroundColor="#ffffff"] - Background color of pagination container
* @property {StyleProp<ViewStyle>} [buttonsContainerStyle] - Custom styles for buttons container
* @property {StyleProp<ViewStyle>} [activePageStyle] - Custom styles for active page button
* @property {StyleProp<ViewStyle>} [inactivePageStyle] - Custom styles for inactive page buttons
* @property {object} [style] - Additional custom styles for container
*
* **State Parameters:**
* @property {PaginationParameters} parameters - Pagination context and breakout room parameters
*
* **Advanced Render Overrides:**
* @property {(options: { defaultContent: React.ReactNode; dimensions: { width: number; height: number }}) => React.ReactNode} [renderContent]
* Function to wrap or replace pagination content
* @property {(options: { defaultContainer: React.ReactNode; dimensions: { width: number; height: number }}) => React.ReactNode} [renderContainer]
* Function to wrap or replace pagination container
*/
export interface PaginationOptions {
totalPages: number;
currentUserPage: number;
handlePageChange?: (options: GeneratePageContentOptions) => Promise<void>;
position?: 'left' | 'middle' | 'right';
location?: 'top' | 'middle' | 'bottom';
direction?: 'horizontal' | 'vertical';
buttonsContainerStyle?: StyleProp<ViewStyle>;
activePageStyle?: StyleProp<ViewStyle>;
inactivePageStyle?: StyleProp<ViewStyle>;
backgroundColor?: string;
paginationHeight?: number;
showAspect?: boolean;
parameters: PaginationParameters;
/**
* Optional custom style to apply to the container.
*/
style?: object;
/**
* Optional function to render custom content, receiving the default content and dimensions.
*/
renderContent?: (options: {
defaultContent: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
/**
* Optional function to render a custom container, receiving the default container and dimensions.
*/
renderContainer?: (options: {
defaultContainer: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type PaginationType = (options: PaginationOptions) => JSX.Element;
/**
* Pagination - Multi-page navigation with breakout room support
*
* Pagination is a React Native component for navigating between multiple pages
* of content (typically participant grids). It includes special logic for breakout
* room scenarios where access to certain pages is restricted based on user role.
*
* **Key Features:**
* - Multi-page navigation with numbered buttons
* - Breakout room access control
* - Flexible layout positioning (top/middle/bottom, left/middle/right)
* - Horizontal or vertical button arrangement
* - Active page highlighting
* - Host-specific room switching capabilities
* - Customizable button styling
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.paginationComponent` to
* provide a completely custom pagination implementation.
*
* @component
* @param {PaginationOptions} props - Configuration options for the Pagination component
*
* @returns {JSX.Element} Rendered pagination controls
*
* @example
* // Basic usage - Simple page navigation
* import React from 'react';
* import { Pagination } from 'mediasfu-reactnative-expo';
*
* function VideoGridWithPagination() {
* const [currentPage, setCurrentPage] = React.useState(1);
*
* const paginationParams = {
* mainRoomsLength: 3,
* memberRoom: 1,
* breakOutRoomStarted: false,
* breakOutRoomEnded: false,
* member: 'user123',
* breakoutRooms: [],
* hostNewRoom: 0,
* roomName: 'MainRoom',
* islevel: '1',
* socket: socketInstance,
* getUpdatedAllParams: () => paginationParams,
* };
*
* return (
* <Pagination
* totalPages={5}
* currentUserPage={currentPage}
* position="middle"
* location="bottom"
* direction="horizontal"
* backgroundColor="#ffffff"
* paginationHeight={40}
* parameters={paginationParams}
* />
* );
* }
*
* @example
* // With custom styling and breakout rooms
* <Pagination
* totalPages={10}
* currentUserPage={3}
* handlePageChange={async (options) => {
* console.log('Changing to page:', options.page);
* await generatePageContent(options);
* }}
* position="right"
* location="top"
* direction="vertical"
* buttonsContainerStyle={{ gap: 8 }}
* activePageStyle={{ backgroundColor: '#007bff', borderRadius: 8 }}
* inactivePageStyle={{ backgroundColor: '#e0e0e0', borderRadius: 8 }}
* backgroundColor="#f5f5f5"
* paginationHeight={50}
* showAspect={true}
* parameters={{
* ...paginationParams,
* breakOutRoomStarted: true,
* breakoutRooms: breakoutParticipantGroups,
* islevel: '2', // Host level
* }}
* />
*
* @example
* // Using uiOverrides for complete pagination replacement
* import { MyCustomPagination } from './MyCustomPagination';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* paginationComponent: {
* component: MyCustomPagination,
* injectedProps: {
* theme: 'minimal',
* showPageNumbers: true,
* },
* },
* },
* };
*
* // MyCustomPagination.tsx
* export const MyCustomPagination = (props: PaginationOptions & { theme: string; showPageNumbers: boolean }) => {
* return (
* <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
* <Button title="Prev" onPress={() => props.handlePageChange?.({ page: props.currentUserPage - 1, parameters: props.parameters })} />
* {props.showPageNumbers && <Text>{props.currentUserPage} / {props.totalPages}</Text>}
* <Button title="Next" onPress={() => props.handlePageChange?.({ page: props.currentUserPage + 1, parameters: props.parameters })} />
* </View>
* );
* };
* hostNewRoom: 2,
* roomName: 'Room A',
* islevel: '2',
* showAlert: (alert) => console.log(alert.message),
* socket: /* Socket connection * /,
* getUpdatedAllParams: () => parameters,
* };
* return (
* <Pagination
* totalPages={10}
* currentUserPage={1}
* parameters={parameters}
* backgroundColor="lightgray"
* paginationHeight={50}
* direction="horizontal"
* position="middle"
* location="bottom"
* />
* );
* }
*
* export default App;
* ```
*/
declare const Pagination: React.FC<PaginationOptions>;
export default Pagination;