Function PreJoinPage

PreJoinPage - A comprehensive pre-meeting entry page with dual create/join functionality.

This component provides a complete pre-meeting interface allowing users to either create new meeting rooms or join existing ones. It handles form validation, API integration, socket connections, and supports both UI and headless (no-UI) modes for flexible integration.

Key Features:

• Dual Mode Operation: Seamless toggle between room creation and joining interfaces
• Room Creation: Configure event type (chat/broadcast/webinar/conference), duration, capacity
• Room Joining: Enter event ID, username, and optional security code
• API Integration: Connects to MediaSFU or local server for room management
• Socket Management: Establishes WebSocket connections for real-time communication
• Form Validation: Comprehensive validation with user-friendly error messages
• Headless Mode: Support for no-UI operation with programmatic configuration
• Credential Management: Handles API authentication and token management
• Loading States: Integrated loading modal during connection/validation
• Custom Styling: 20+ HTML attribute props for complete visual customization
• Render Hooks: Six custom render functions for logo, forms, toggle, errors, and container
• Media Preferences: Configure video, audio, and audio output settings before joining
• Local/Remote Servers: Flexible connection to MediaSFU cloud or local instances
• Scheduled Events: Support for scheduled meeting times with date/time pickers
• Security Features: Optional secure codes and waiting room functionality
• Recording Configuration: Pre-configure recording parameters and event room settings
• Responsive Design: Mobile-friendly interface with touch-optimized controls

import React from 'react';
import { PreJoinPage } from 'mediasfu-reactjs';

const BasicPreJoin = () => {
  const handleAlert = (message: string) => {
    alert(message);
  };

  return (
    <PreJoinPage
      credentials={{
        apiUserName: 'user123',
        apiKey: 'your-api-key'
      }}
      returnUI={true}
      parameters={{
        showAlert: handleAlert,
        updateIsLoadingModalVisible: (visible) => console.log('Loading:', visible),
        connectSocket: async ({ socket, apiUserName, apiToken }) => {
          // Socket connection logic
        },
        updateSocket: (socket) => console.log('Socket updated'),
        updateValidated: () => console.log('Validated'),
        updateApiUserName: (name) => console.log('API User:', name),
        updateApiToken: (token) => console.log('Token set'),
        updateLink: (link) => console.log('Link:', link),
        updateRoomName: (room) => console.log('Room:', room),
        updateMember: (member) => console.log('Member:', member),
        imgSrc: 'https://example.com/logo.png'
      }}
      connectMediaSFU={true}
    />
  );
};
Copy

import React, { useState } from 'react';
import { PreJoinPage } from 'mediasfu-reactjs';

const BrandedPreJoin = () => {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <PreJoinPage
      credentials={{
        apiUserName: 'company_user',
        apiKey: 'company_api_key'
      }}
      returnUI={true}
      parameters={{
        showAlert: (message) => {
          console.log('Alert:', message);
        },
        updateIsLoadingModalVisible: setIsLoading,
        connectSocket: async (options) => {},
        updateSocket: (socket) => {},
        updateValidated: () => {},
        updateApiUserName: (name) => {},
        updateApiToken: (token) => {},
        updateLink: (link) => {},
        updateRoomName: (room) => {},
        updateMember: (member) => {},
        imgSrc: 'https://company.com/logo.svg'
      }}
      containerProps={{
        style: {
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          minHeight: '100vh',
          fontFamily: "'Inter', sans-serif"
        }
      }}
      createButtonProps={{
        style: {
          backgroundColor: '#10b981',
          padding: '14px 28px',
          borderRadius: '8px',
          fontSize: '16px',
          fontWeight: '600',
          border: 'none',
          cursor: 'pointer',
          transition: 'all 0.3s'
        }
      }}
      joinButtonProps={{
        style: {
          backgroundColor: '#3b82f6',
          padding: '14px 28px',
          borderRadius: '8px',
          fontSize: '16px',
          fontWeight: '600',
          border: 'none',
          cursor: 'pointer'
        }
      }}
      renderLogo={({ imgSrc }) => (
        <div style={{ textAlign: 'center', marginBottom: '40px' }}>
          <img src={imgSrc} alt="Company Logo" style={{ width: '200px' }} />
          <h1 style={{ color: 'white', marginTop: '20px' }}>Welcome to Our Platform</h1>
        </div>
      )}
    />
  );
};
Copy

import React, { useEffect } from 'react';
import { PreJoinPage } from 'mediasfu-reactjs';

const AnalyticsPreJoin = () => {
  useEffect(() => {
    analytics.page('Pre-Join Page Viewed');
  }, []);

  return (
    <PreJoinPage
      credentials={{
        apiUserName: 'analytics_user',
        apiKey: 'analytics_key'
      }}
      returnUI={true}
      parameters={{
        showAlert: (message) => {
          analytics.track('Alert Shown', { message });
          alert(message);
        },
        updateIsLoadingModalVisible: (visible) => {
          analytics.track('Loading State Changed', { visible });
        },
        connectSocket: async (options) => {
          analytics.track('Socket Connection Initiated', {
            apiUserName: options.apiUserName
          });
        },
        updateValidated: () => {
          analytics.track('Connection Validated');
        },
        updateRoomName: (room) => {
          analytics.track('Room Entered', { roomName: room });
        },
        updateSocket: (socket) => {},
        updateApiUserName: (name) => {},
        updateApiToken: (token) => {},
        updateLink: (link) => {},
        updateMember: (member) => {}
      }}
      renderToggle={({ defaultToggle, isCreateMode, toggle }) => (
        <div onClick={() => {
          analytics.track('Mode Toggled', {
            from: isCreateMode ? 'create' : 'join',
            to: isCreateMode ? 'join' : 'create'
          });
          toggle();
        }}>
          {defaultToggle}
        </div>
      )}
      createMediaSFURoom={async (options) => {
        analytics.track('Room Creation Attempted', {
          eventType: options.eventType,
          duration: options.duration,
          capacity: options.capacity
        });
        const result = await createRoomOnMediaSFU(options);
        analytics.track('Room Created Successfully', {
          eventType: options.eventType
        });
        return result;
      }}
      joinMediaSFURoom={async (options) => {
        analytics.track('Room Join Attempted', {
          eventID: options.eventID
        });
        const result = await joinRoomOnMediaSFU(options);
        analytics.track('Room Joined Successfully');
        return result;
      }}
    />
  );
};
Copy

import React, { useState } from 'react';
import { MediasfuGeneric, PreJoinPage } from 'mediasfu-reactjs';

const CustomPreJoin = (props) => (
  <PreJoinPage
    {...props}
    renderContent={({ defaultContent, isCreateMode, error }) => (
      <div className="custom-prejoin-wrapper">
        <div className="welcome-banner">
          <h2>🎥 {isCreateMode ? 'Start Your Meeting' : 'Join the Meeting'}</h2>
          <p>Connect with your team in seconds</p>
        </div>
        {error && (
          <div className="error-banner" style={{
            backgroundColor: '#fee',
            color: '#c00',
            padding: '12px',
            borderRadius: '6px',
            marginBottom: '20px'
          }}>
            ⚠️ {error}
          </div>
        )}
        {defaultContent}
        <div className="help-section">
          <a href="/help">Need help?</a>
          <span> | </span>
          <a href="/privacy">Privacy Policy</a>
        </div>
      </div>
    )}
    renderCreateForm={({ defaultForm }) => (
      <div className="enhanced-create-form">
        <div className="form-header">
          <h3>Create New Room</h3>
          <p>Set up your meeting parameters</p>
        </div>
        {defaultForm}
        <div className="form-footer">
          <small>🔒 Your meeting will be secure and encrypted</small>
        </div>
      </div>
    )}
  />
);

const App = () => {
  const [credentials] = useState({
    apiUserName: 'user123',
    apiKey: 'your-api-key'
  });

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        PreJoinPage: CustomPreJoin
      }}
    />
  );
};
Copy