Navigators Component

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

Overview

The Navigators component displays status indicators for video call participants, showing when they are pinned, video-muted, or microphone-muted by the host. It provides a clean, minimal interface with tooltips for additional information.

Core Features

1. Status Indicators

export let position = "left";
export let is_video_muted = false;
export let is_Pinned = 0;
export let is_mic_muted = "NO";

// Reactive visibility control
$: showView = is_video_muted || is_Pinned > 0 || is_mic_muted === "YES";

UI Implementation

{#if showView}
  <div
    class="max-w-[9rem]"
    class:right={position === "right"}
    class:left={position === "left"}
    in:fly={{ x: position === "left" ? -200 : 50, duration: 2000 }}
    out:fade
  >
    <div class="h-10 flex flex-col items-center gap-2">
      <!-- Pin Status -->
      {#if is_Pinned > 0}
        <div
          use:tip={{ content: "Pinned by Host", placement: "bottom" }}
          class="cursor-pointer bg-gray-100/80 rounded-full p-0.5"
        >
          <Icon src={Pushpin2} size="18" class="fill-blue-600" />
        </div>
      {/if}

      <!-- Video Status -->
      {#if is_video_muted}
        <div
          use:tip={{ content: "Video disabled by Host", placement: "bottom" }}
          class="cursor-pointer bg-gray-100/80 rounded-full p-0.5"
        >
          <Icon src={VideoCameraOff} size="18" class="text-red-600" />
        </div>
      {/if}

      <!-- Microphone Status -->
      {#if is_mic_muted === "YES"}
        <div
          use:tip={{ content: "Microphone muted by Host", placement: "bottom" }}
          class="cursor-pointer bg-gray-100/80 rounded-full p-0.5"
        >
          <Icon src={MicrophoneMute} size="18" class="text-red-600" />
        </div>
      {/if}
    </div>
  </div>
{/if}

Props Interface

interface Props {
  position: "left" | "right"; // Position of the navigator
  is_video_muted: boolean; // Video mute status
  is_Pinned: number; // Pin status (0 or greater)
  is_mic_muted: "YES" | "NO"; // Microphone mute status
}

Usage Example

<Navigators
  position="left"
  is_video_muted={true}
  is_Pinned={1}
  is_mic_muted="YES"
/>