Recording Alert Component

• File: src/components/app/call/recordingAlert.svelte

Overview

The Recording Alert component provides a visual indicator for the recording state of a video call. It displays different states with appropriate animations and positioning options.

Core Features

1. Recording States

export enum RecordingState {
  initializing, // Initial setup phase
  started, // Recording is active
  starting, // Transition to recording
  none, // No recording in progress
}

2. State mangement

let text = "";
let animate = false;

$: switch (state) {
  case RecordingState.initializing:
    text = "Initializing recording. Please wait";
    animate = true;
    break;
  case RecordingState.starting:
    text = "Starting...";
    animate = true;
    break;
  case RecordingState.started:
    text = "Recording...";
    animate = false;
    break;
  case RecordingState.none:
    text = "";
    break;
  default:
    text = "...";
    break;
}

Props Interface

interface Props {
  position: "left" | "right"; // Alert position
  icon: any; // Icon component to display
  state: RecordingState; // Current recording state
  startTime: number; // Recording start timestamp
}

Component Implementation

1. UI Template

<div
  class=""
  class:animate-ping={false}
  class:hidden={!text}
  class:right={position === "right"}
  class:left={position === "left"}
  in:fly={{ x: position === "left" ? -200 : 50, duration: 2000 }}
  out:fade
>
  <div class="p-4 shadow-lg h-10 rounded-md bg-gray-800/80 flex items-center gap-1">
    <Icon
      src={icon}
      size="20"
      class="fill-red-600 {animate ? 'animate-ping' : ''}"
    />
    <div class="text-gray-300 text-xs font-thin font-serif tracking-wide">
      {text}
    </div>
  </div>
</div>

Usage Example

<RecordingAlert
  position="left"
  icon={RecordCircle}
  state={recordingState}
  startTime={recordingStartTime}
/>