PreJoinPage class

PreJoinPage

A StatefulWidget that allows users to either join an existing room or create a new one. It provides validation, error handling, and alerts for user interactions.

Parameters:

• PreJoinPageOptions options: Contains functions and configurations such as alert displays, socket connections, and loading state updates.
• Credentials credentials: Holds the apiUserName and apiKey for room creation and joining.
• PreJoinPageType? customBuilder: (Optional) A custom widget builder that overrides the default UI.

Example Usage:

Using the Default PreJoinPage:

PreJoinPage(
  options: PreJoinPageOptions(
    parameters: PreJoinPageParameters(
    showAlert: (message, type, duration) => print('Alert: $message'),
    updateIsLoadingModalVisible: (isVisible) => print('Loading: $isVisible'),
    connectSocket: myConnectSocketFunction,
    connectLocalSocket: myConnectLocalSocketFunction,
    updateSocket: (socket) => print('Socket Updated'),
    updateLocalSocket: (socket) => print('Local Socket Updated'),
    updateValidated: (isValid) => print('Validated: $isValid'),
    updateApiUserName: (userName) => print('API UserName: $userName'),
    updateApiToken: (token) => print('API Token: $token'),
    updateLink: (link) => print('Link: $link'),
    updateRoomName: (roomName) => print('Room Name: $roomName'),
    updateMember: (member) => print('Member: $member'),
   ),
  credentials: Credentials(
    apiUserName: 'exampleUser',
    apiKey: 'exampleKey',
  ),
  localLink: 'http://localhost:3000', // Optional local link for Community Edition
  connectMediaSFU: true, // Connect to MediaSFU
  customBuilder: null, // Use the default builder
  returnUI: true, // Return the UI
  noUIPreJoinOptionsCreate: null, // No UI PreJoin Options for Create
  noUIPreJoinOptionsJoin: null, // No UI PreJoin Options for Join
  createMediaSFURoom: createRoomOnMediaSFU, // Create MediaSFU Room
 joinMediaSFURoom: joinRoomOnMediaSFU, // Join MediaSFU Room
 ),
);

Using a Custom PreJoinPage:

// Define a custom PreJoinPage widget
Widget myCustomPreJoinPage({
  required PreJoinPageOptions options,
  required Credentials credentials,
}) {
  return Scaffold(
    appBar: AppBar(title: const Text('Custom PreJoin Page')),
    body: Center(
      child: Text(
        'Welcome, ${credentials.apiUserName}!',
        style: const TextStyle(fontSize: 24),
      ),
    ),
  );
}

// Usage with Custom Builder
PreJoinPage(
  options: PreJoinPageOptions(
    parameters: PreJoinPageParameters(
    showAlert: (message, type, duration) => print('Alert: $message'),
    updateIsLoadingModalVisible: (isVisible) => print('Loading: $isVisible'),
    connectSocket: myConnectSocketFunction,
    connectLocalSocket: myConnectLocalSocketFunction,
    updateSocket: (socket) => print('Socket Updated'),
    updateLocalSocket: (socket) => print('Local Socket Updated'),
    updateValidated: (isValid) => print('Validated: $isValid'),
    updateApiUserName: (userName) => print('API UserName: $userName'),
    updateApiToken: (token) => print('API Token: $token'),
    updateLink: (link) => print('Link: $link'),
    updateRoomName: (roomName) => print('Room Name: $roomName'),
    updateMember: (member) => print('Member: $member'),
  ),
  credentials: Credentials(
    apiUserName: 'exampleUser',
    apiKey: 'exampleKey',
  ),
  localLink: 'http://localhost:3000', // Optional local link for Community Edition
  connectMediaSFU: true, // Connect to MediaSFU
  customBuilder: myCustomPreJoinPage, // Pass the custom builder
  returnUI: true, // Return the UI
  noUIPreJoinOptionsCreate: null, // No UI PreJoin Options for Create
  noUIPreJoinOptionsJoin: null, // No UI PreJoin Options for Join
  createMediaSFURoom: createRoomOnMediaSFU, // Create MediaSFU Room
 joinMediaSFURoom: joinRoomOnMediaSFU, // Join MediaSFU Room
);
);

Key Methods:

• _handleCreateRoom(): Validates inputs and sends a request to create a room. If successful, it calls _checkLimitsAndMakeRequest to handle socket connection setup.
• _handleJoinRoom(): Similar to _handleCreateRoom, but for joining an existing room based on eventID.
• _checkLimitsAndMakeRequest(...): Checks for rate limits and, if passed, establishes a socket connection.
• _toggleMode(): Switches between "Create" and "Join" modes.

UI Elements:

• _buildInputFields(): Generates input fields based on the current mode.
• _buildActionButton(): Displays either a "Create Room" or "Join Room" button based on the mode.
• _buildToggleButton(): Button to switch between "Create" and "Join" modes.