Gallery Component Documentation

Overview

The Gallery component provides a media management interface for a video conferencing application, allowing users to view, preview, and share images during a call. It displays a grid of thumbnails that can be previewed in a modal and shared with other participants.

Key Features

1. Media Gallery Display:

   • Masonry layout for optimal thumbnail arrangement
   • Hover effects and visual indicators
   • Active sharing state visualization

2. Media Interaction:

   • Full-screen preview modal
   • Share/stop sharing functionality
   • Refresh capability

3. User Experience:

   • Clean, responsive design
   • Visual feedback for actions
   • File count display

Component Structure

Module Context

export interface IMediaFile {
  id: number;
  url: string;          // Full-size image URL
  thumbnailUrl: string; // Thumbnail URL
  name: string;         // File name
  createdAt: string;    // Creation timestamp
  createdBy: string;    // Creator information
}

Props

export let eventId: number;          // Current event ID
export let activeShareId: number = 2 // Currently shared file ID
export let files: IMediaFile[] = []; // Array of media files

State Management

let previewFile: IMediaFile | undefined; // Currently previewed file

UI Components

Main Gallery Structure

<div class="h-full flex flex-col bg-white border-l border-gray-200">
  <!-- Header with controls -->
  <div class="flex justify-between border-b p-2">
    <span class="text-lg">Gallery</span>
    <div class="flex gap-2">
      <button on:click={() => dispatch("refreshImages")}>
        <Icon src={Refresh} size="20" />
      </button>
      <button on:click={() => dispatch("close")}>
        <Icon src={Close} size="20" />
      </button>
    </div>
  </div>

  <!-- File count display -->
  {#if files.length}
    <div class="pl-2 pt-2 text-slate-500">
      {files.length} files(s) found
    </div>
  {/if}

  <!-- Thumbnail grid -->
  <div class="flex-grow overflow-y-auto">
    <Masonary>
      {#each files as file}
        <!-- Thumbnail with share controls -->
      {/each}
    </Masonary>
  </div>
</div>

Thumbnail Item

<div class="relative border border-gray-200 shadow-sm hover:shadow-md group">
  <img src="{file.thumbnailUrl}" alt="captured" on:click={() => previewFile = file}/>
  <div class="hidden group-hover:flex absolute bottom-0 left-0 w-full bg-slate-300 bg-opacity-70">
    {#if file.id === activeShareId}
      <button on:click={stopSharing} title="Stop Sharing">
        <Icon src={CloseCircle} size="20" class="text-red-700" />
      </button>
    {:else}
      <button on:click={() => startSharing(file)} title="Share">
        <Icon src={Share} size="20" class="text-blue-700" />
      </button>
    {/if}
  </div>
</div>

Preview Modal

{#if previewFile}
  <Modal title="Preview" on:close={() => previewFile = null}>
    <div class="relative border border-gray-200 shadow-sm">
      <img src="{previewFile.url}" alt="captured" />
      <div class="flex absolute bottom-0 left-0 w-full bg-slate-300 bg-opacity-70">
        <!-- Share controls same as thumbnail -->
      </div>
    </div>
  </Modal>
{/if}

Technical Implementation

Event Handling

1. Gallery Actions:

   • refreshImages: Requests updated file list
   • close: Closes the gallery panel
   • pin: Shares a specific file
   • unpin: Stops sharing current file

2. User Interactions:

   • Click thumbnail to preview
   • Click share/stop share buttons
   • Click refresh button

Layout Management

• Uses custom Masonry component for responsive grid
• Absolute positioning for action controls
• Modal for full-size previews

State Management

• Tracks currently previewed file
• Visualizes active shared file
• Maintains file list from props

Usage Example

<script>
  import Gallery from "./gallery.svelte";
  
  let eventId = 123;
  let files = [];
  let activeShareId = null;
  
  function handleRefresh() {
    // Fetch updated files
  }
  
  function handlePin(file) {
    // Share file logic
  }
  
  function handleUnpin(fileId) {
    // Stop sharing logic
  }
</script>

<Gallery
  {eventId}
  {files}
  {activeShareId}
  on:refreshImages={handleRefresh}
  on:pin={handlePin}
  on:unpin={handleUnpin}
/>

Dependencies

• @steeze-ui/svelte-icon for icons
• @steeze-ui/remix-icons (Close, Share, Stop, etc.)
• Custom Modal component
• Custom Masonary layout component

Styling Notes

• Clean white background with subtle borders
• Shadow effects on hover
• Semi-transparent control overlays
• Responsive grid layout
• Consistent icon styling

Accessibility Features

• Semantic HTML structure
• Alt text for images
• Title attributes for icon buttons
• Keyboard-navigable controls
• Clear visual feedback for actions