Device Controls Panel Documentation

Overview

This component provides remote control functionality for connected devices in a video conferencing application. It allows authorized users to manage various device features including camera switching, lighting controls, laser pointers, and zoom functionality.

Key Features

1. Device Selection:

   • View all available devices in the meeting
   • Separate sections for shared devices and devices requiring control request
   • Visual indicators for device status and type

2. Remote Control Features:

   • Camera switching between multiple available cameras
   • Flashlight/touchlight control
   • Laser pointer activation (with safety confirmation)
   • Zoom level adjustment
   • Photo capture capability

3. Safety Mechanisms:

   • Laser pointer warning dialog
   • Permission-based access to features
   • Clear visual feedback for active controls

Component Structure

Module Context

export interface IDevice {
  deviceId: string;
  name: string;
  profileImageUrl: string;
  initials: string;
  type: string;
  remoteControlEnabled: boolean;
  hasZoom: boolean;
  zoomLevel: number;
  minZoom: number;
  maxZoom: number;
  hasLaser: boolean;
  laserOn: boolean;
  hasFlashLight: boolean;
  flashLightOn: boolean;
  hasMainCamera: boolean;
  hasBoomCamera: boolean;
  activeCamera: string;
  cameras: { name: string }[];
}

export const ACTIVE_MEETING_EVENT_SUBSCRIPTION = gql`
  subscription meetingEvent($meetingId: Long!) {
    onNewMeetingEvent(meetingId: $meetingId) {
      data
      meetingId
      date
      evt
    }
  }
`;

export async function getMeetingDevices(meetingId: number) {
  // Fetches and processes device data from server
}

Props

export let event;  // Current meeting/event data

State Management

let allDevices = [];                      // All available devices
$: sharedDevices = allDevices.filter(x => x.remoteControlEnabled);
$: disabledDevices = allDevices.filter(x => !x.remoteControlEnabled);

let showSharedDevices = false;            // Device list visibility
let activeDevice = null;                  // Currently controlled device
let activeDeviceId;                       // ID of active device
let showCamera = false;                   // Camera selection visibility
let activeZoomLevel = 1;                  // Current zoom level
let showLaserDialog = false;              // Laser warning dialog visibility
let laserOn = false;                      // Laser pointer state

UI Components

Main Panel Structure

<aside class="bg-white flex flex-col h-full">
  <!-- Header -->
  <div class="flex justify-between border-b px-4 py-2">
    <span class="font-semibold">Device Controls</span>
    <button on:click={() => dispatch("close")}>
      <Icon src={Close} size="21" />
    </button>
  </div>

  <!-- Device Selection -->
  <div class="px-4 py-2">
    <span class="text-blue-800 font-semibold text-sm">Select Device</span>
    <button on:click={() => showSharedDevices = !showSharedDevices}>
      {#if activeDevice}
        <!-- Active device display -->
      {:else}
        <span>Select device to control</span>
      {/if}
      <Icon src={showSharedDevices ? ArrowUpS : ArrowDownS} size="20" />
    </button>

    {#if showSharedDevices}
      <!-- Device dropdown list -->
    {/if}
  </div>

  <!-- Device Controls -->
  {#if activeDevice !== null && activeDevice.remoteControlEnabled}
    <div class="flex flex-col py-4">
      <!-- Camera controls -->
      <!-- Flashlight toggle -->
      <!-- Laser pointer toggle -->
      <!-- Zoom controls -->
      <!-- Photo capture -->
    </div>
  {/if}
</aside>

<!-- Laser Warning Dialog -->
<SimpleAlert
  title="CAUTION: Turn Laser On"
  bind:open={showLaserDialog}
>
  <p>The laser pointer can damage eyes...</p>
</SimpleAlert>

Control Components

1. Device Selection Dropdown:

   • Shows available devices in two sections (shared/requestable)
   • Each device shows:
     • Profile image/initials
     • Name and device type
     • Status indicator

2. Camera Controls:

   • Dropdown for camera selection
   • Quick switch button
   • Shows current active camera

3. Toggle Controls:

   • Flashlight on/off
   • Laser pointer on/off (with safety warning)
   • Custom toggle button component

4. Zoom Controls:

   • Discrete zoom levels (1-5)
   • Visual indicator of current zoom
   • Click-to-select interface

5. Photo Capture:

   • Camera icon button
   • Permission-protected

Technical Implementation

Data Flow

1. Initialization:

   • Fetches device data on mount
   • Sets up GraphQL subscription for device updates
   • Processes device capabilities

2. Device Control:

   • Handles control requests for non-shared devices
   • Manages active device state
   • Processes remote control commands

3. Real-time Updates:

   • Listens for device changes
   • Refreshes device list when changes occur
   • Updates UI based on current device state

Event Handling

1. Device Selection:

   • Handles control requests for non-shared devices
   • Sets active device
   • Manages request timeout

2. Control Actions:

   • Camera switching
   • Flashlight toggle
   • Laser pointer toggle (with confirmation)
   • Zoom adjustment
   • Photo capture

Safety Features

• Laser pointer warning dialog
• Permission checks for sensitive actions
• Clear visual state indicators

Usage Example

<script>
  import DeviceControls from "./deviceControls.svelte";
  
  let event = {
    id: 123,
    // ... other event data
  };
</script>

<DeviceControls {event} />

Dependencies

• @urql/svelte for GraphQL subscriptions
• @steeze-ui/svelte-icon for icons
• @steeze-ui/remix-icons (Close, ArrowDownS, etc.)
• @steeze-ui/heroicons (Exclamation, Sun)
• Custom components:
  • ToggleBtn for toggle switches
  • SimpleAlert for dialogs
• Utility functions for permissions and error handling

Styling Notes

• Clean white background with blue accents
• Consistent spacing and padding
• Hover states for interactive elements
• Hidden scrollbars for dropdowns
• Responsive layout
• Visual hierarchy through typography

Accessibility Features

• Clear visual feedback for interactive elements
• Keyboard-navigable controls
• Semantic HTML structure
• Tooltips for icon buttons
• Contrast-appropriate color scheme