Message View Component

• File: src/pages/private/events/[eventId]/_cmps/message.svelte

Overview

The Message component provides a standardized interface for displaying status messages, errors, and countdown timers in the application. It's primarily used in the video conferencing system to show connection states, errors, and auto-close notifications.

Component Interface

Props

interface Props {
  message: string; // Message text to display
  isError: boolean; // Whether to show error styling
  countdown?: number; // Optional countdown timer in seconds
}

Core Features

1. Message Display

<div class="shadow-lg sm:max-w-full p-8 rounded-xl md:max-w-sm bg-white">
  <!-- Icon Section -->
  <div class="grid place-content-center mb-4" class:text-red-600={isError}>
    <Icon src={isError ? ExclamationCircle : InformationCircle} size="30" />
  </div>

  <!-- Message Content -->
  <div class="text-center">
    <span>{message || ""}</span>
    <slot />
  </div>
</div>

2. Countdown Timer

let canCountDown = countdown && countdown > 0;
let timeout: number;

if (countdown) {
  timeout = setInterval(() => {
    countdown--;
    if (countdown < 0) {
      dispatch("countDownOver");
      clearInterval(timeout);
    }
  }, 1000);
}

3. Cleanup Management

onDestroy(() => {
  if (timeout) clearInterval(timeout);
});