Rapid Connect Call Interface Documentation

File: src/components/rapidConnect/rapidEvent.svelte

Overview

This component serves as the main interface for rapid connection calls, handling the complete call lifecycle from pre-call setup to active call and disconnection. It integrates with WebSocket for real-time communication and manages peripheral devices for audio/video functionality.

Module Script (API Operations)

Enums

export enum Page {
  Ringing,
  PreCall,
  Call,
  Message,
  Loading,
}

Core Functions

// Get event details by ID
export async function getEvent(eventId: string) {
  // GraphQL query implementation
}

// Get devices associated with an event
export async function getDevices(eventId: string) {
  // GraphQL query implementation
}

// Format time display text for events
function getTimeText(event: any): string {
  // Date formatting logic
}

Component Script

State Management

// Connection state
let activePage = Page.Loading;
let wsOpened = false;
let busy = false;

// User data
let precallUsers = [];
let incallUsers = [];
let myId = $userInfo?.id;

// Call configuration
let callConfig = eventData;
let event = {
  ...eventData,
  timeText: getTimeText(eventData),
  id: eventId,
};

// Peripheral devices
let peripherals: IPeripheral[] = [];
let selectedCamera;
let selectedMic;
let selectedSpeaker;
let micOn;
let cameraOn = true;
let noAudio;
let noVideo;

// Error handling
let errorMessage = "";
let isError = false;
let closeTimeout = 0;
let countdown = 0;

WebSocket Integration

// WebSocket initialization
const url = `${wsServer}/calls/${eventId}`;
let ws = new WebSocket(url);

// WebSocket event handlers
ws.onopen = function () {
  wsOpened = true;
};
ws.onclose = function () {
  wsOpened = false;
};
ws.onmessage = function (msg) {
  // Process participant updates
};

Core Methods

// Initialize call session
async function refresh() {
  // Connection verification and page transition
}

// Handle call cancellation
function onCancel() {
  // Cleanup and navigation
}

// Handle call joining
async function onJoinCall({ detail }) {
  // Configure devices and transition to call view
}

// Handle disconnection
function onDisconnected({ detail }) {
  // Error handling and cleanup
}

// Automatic window closing
function autoClose(timeout: number) {
  // Timer management
}

// Send user state to server
function sendState(activePage, wsOpened, user) {
  // WebSocket state updates
}

Lifecycle Hooks

onMount(async () => {
  await refresh();
  // Load peripheral devices
});

onDestroy(() => {
  ws.close();
});

UI Structure

Main Layout

<div class="bg-[#2d4e8c] flex-grow grid place-items-center w-screen h-screen">
  <div class="w-full h-full p-3 lg:py-6 overflow-hidden">
    <!-- Dynamic view switching -->
    {#if activePage === Page.PreCall}
      <PrecallView ... />
    {:else if activePage === Page.Call}
      <CallView ... />
    {:else if activePage === Page.Message}
      <MessageView ... />
    {:else if activePage === Page.Loading}
      <LoadingView />
    {:else}
      <div>Not handled: {activePage}</div>
    {/if}
  </div>
</div>

View Components

1. PrecallView:

   • Shows participants and call preparation options
   • Handles device selection
   • Provides join/cancel controls

2. CallView:

   • Main call interface with video/audio
   • Participant management
   • Call controls

3. MessageView:

   • Displays errors and status messages
   • Handles countdown to automatic closure

4. LoadingView:

   • Initial loading state

Key Features

1. Real-time Communication:

   • WebSocket integration for participant updates
   • State synchronization across clients
   • Automatic reconnection handling

2. Device Management:

   • Camera/microphone/speaker selection
   • Peripheral device detection
   • Audio/video toggle controls

3. Call Lifecycle:

   • Pre-call preparation
   • Active call management
   • Graceful disconnection
   • Error recovery

4. User Experience:

   • Responsive design for all screen sizes
   • Clear state transitions
   • Visual feedback for all actions
   • Accessibility considerations

Event Flow

1. Initialization:

   • WebSocket connection
   • Peripheral device loading
   • Participant list retrieval

2. Pre-call:

   • Device selection
   • Participant status updates
   • Call joining preparation

3. Active Call:

   • Media streaming
   • Real-time participant updates
   • Call controls

4. Termination:

   • Graceful disconnection
   • Cleanup
   • Error handling

Dependencies

• WebSocket API for real-time communication
• GraphQL for data queries
• Peripheral device management utilities
• Routing utilities
• Keycloak for authentication
• Date/time formatting libraries

Error Handling

• WebSocket connection monitoring
• Graceful fallback for media failures
• User-friendly error messages
• Automatic recovery attempts
• Clean resource cleanup

Usage Notes

1. Initialization:

   • Requires valid event ID and connection data
   • Automatically loads necessary resources

2. Device Configuration:

   • Users should select devices before joining
   • Toggles available for audio/video

3. Call Management:

   • Real-time participant updates
   • Status synchronization
   • Proper cleanup on exit

4. Responsive Design:

   • Adapts to various screen sizes
   • Mobile-friendly controls
   • Accessible interface elements

Related Components

• Precall View
• Call View
• Message View