Rapid Connect Documentation

File: src/components/rapidConnect/index.svelte

Overview

This component facilitates rapid device connection by generating QR codes and join codes for instant authentication and pairing. It's designed for quick setup of Headset devices in a tenant environment.

Module Script (API Operations)

Interfaces

export interface IRapidConnectData {
  authToken: string;
  displayName: string;
  durationInSeconds: number;
  joinCode: string;
  qrCode: string;
  uniqueId: string;
}

export interface IRapidConnectMeetingResponse {
  alias: string;
  data: any;
  description: string;
  displayName: string;
  endDate: Date;
  meetingId: string;
  meetingPin: string;
  node: string;
  sharedFileId: any;
  sharedFileUrl: any;
  startDate: Date;
  title: string;
}

Core Functions

// Get basic tenant information
export async function getUnauthenticatedTenantInfo() {
  // GraphQL query implementation
}

// Initiate rapid connection process
export async function initiateRapidConnect(deviceId: string) {
  // Mutation implementation
}

Component Script

State Management

let busy = true; // Loading state
let tenantInfo: { id: number; name: string } | null = null; // Tenant details
let rapidConnectData: IRapidConnectData | null = null; // Connection data
let expirationTimer: ReturnType<typeof setTimeout> | null = null; // Session timer
const deviceId = nanoid(36); // Unique device identifier

Core Methods

// Initialize connection process
async function initializeConnection() {
  // Fetches tenant info and generates connection data
  // Handles automatic refresh before expiration
}

// Handle successful connection
async function handleRapidConnect(data: IRapidConnectData) {
  // Sets auth token and initiates real-time connection
}

// Handle device addition event
function onDeviceAdded(data: any) {
  // Routes to appropriate meeting URL with connection data
}

Lifecycle Hooks

onMount(() => {
  initializeConnection();
  return () => {
    if (expirationTimer) {
      clearTimeout(expirationTimer);
    }
  };
});

onDestroy(() => {
  unsubscribe("onDeviceAdded", onDeviceAdded);
});

UI Structure

Main Layout

<div class="w-screen h-screen grid justify-center items-center">
  {#if busy}
    <!-- Loading spinner -->
    <Chasing />
  {:else if rapidConnectData}
    <!-- Connection interface -->
    <div class="" in:scale>
      <!-- Tenant information -->
      <p class="text-3xl text-center pb-5">
        <strong>Tenant:</strong> {tenantInfo.name}
      </p>
      
      <!-- Device display -->
      <p class="flex justify-center items-center gap-2">
        <Icon src={DesktopComputer} size="30" />
        <span class="text-xl">{rapidConnectData.displayName}</span>
      </p>
      
      <!-- QR Code -->
      <img
        src={rapidConnectData.qrCode}
        alt="qrcode"
        class="w-[480px] h-[430px]"
      />
      
      <!-- Join code -->
      <p class="text-3xl text-center">
        <span class="text-black font-semibold">Code:</span>
        <span class="tracking-wider"> {rapidConnectData.joinCode}</span>
      </p>
    </div>
  {/if}
</div>

Key Features

1. Quick Connection Setup:

   • Generates unique QR codes and join codes
   • Automatic token refresh before expiration
   • Real-time connection monitoring

2. Tenant Context:

   • Displays tenant information for context
   • Maintains tenant-specific authentication

3. User Experience:

   • Clean, centered interface
   • Clear visual hierarchy
   • Loading states during initialization
   • Smooth transitions

4. Security:

   • Short-lived authentication tokens
   • Unique session identifiers
   • Proper token management

Event Flow

1. Initialization:

   • Generate unique device ID
   • Fetch tenant information
   • Create rapid connection session

2. Connection:

   • Display QR code and join code
   • Monitor for device connections
   • Handle successful pairing

3. Expiration:

   • Automatically refresh session before expiration
   • Clean up previous session

Dependencies

• nanoid for unique ID generation
• @steeze-ui/heroicons for icons
• Custom real-time communication utilities
• Keycloak token management
• Routing utilities

Error Handling

• Catches and displays API errors
• Handles subscription cleanup
• Manages token expiration gracefully
• Provides visual feedback during loading

Usage Notes

1. Initialization:

   • Automatically starts connection process on mount
   • Shows loading state until ready

2. Connection:

   • Users can scan QR code or enter join code
   • Successful connection redirects to appropriate page

3. Session Management:

   • Automatically refreshes before expiration
   • Cleans up resources on unmount

4. Responsive Design:

   • Fits any screen size
   • Centered content for optimal viewing

   Related Components

   • Rapid Event