@classic-homes/theme-svelte 1.2.3 → 1.4.0

package/dist/lib/components/FileUpload.svelte

@@ -5,15 +5,20 @@
    * Features:
    * - Drag and drop zone with visual feedback
    * - Click to browse files
-   * - File preview (thumbnails for images, icons for other types)
+   * - File preview (thumbnails for images and video, icons for other types)
+   * - Duration read from audio and video files
+   * - List or grid preview layout, with optional lightbox preview
    * - Size and type validation
    * - Multiple file support
    * - Remove file action
    * - Accessible with keyboard navigation
    */
-  import type { FileMetadata } from '../types/components.js';
+  import type { FileMetadata, MediaItem } from '../types/components.js';
   import { cn } from '../utils.js';
+  import { formatDuration } from '../utils/media.js';
   import Button from './Button.svelte';
+  import Lightbox from './media/Lightbox.svelte';
+  import MediaGrid from './media/MediaGrid.svelte';
 
   interface Props {
     /** Input ID */
@@ -44,6 +49,16 @@
      * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
      */
     typesLabel?: string;
+    /**
+     * How uploaded files are previewed. `list` (the default) keeps the
+     * existing row layout; `grid` shows media thumbnails.
+     */
+    previewLayout?: 'list' | 'grid';
+    /**
+     * Open a lightbox when a preview is activated. Off by default so existing
+     * consumers keep their current behaviour.
+     */
+    preview?: boolean;
     /** Additional classes */
     class?: string;
   }
@@ -64,12 +79,16 @@
     label,
     hint,
     typesLabel,
+    previewLayout = 'list',
+    preview = false,
     class: className,
   }: Props = $props();
 
   let isDragging = $state(false);
   let internalError = $state<string | undefined>(undefined);
   let fileInput: HTMLInputElement;
+  let lightboxOpen = $state(false);
+  let lightboxIndex = $state(0);
 
   /** Map of file IDs to their AbortControllers for cancellation */
   const uploadControllers = new Map<string, AbortController>();
@@ -149,6 +168,100 @@
     return 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z';
   }
 
+  /**
+   * Capture a poster frame and the duration from a video file.
+   *
+   * The frame is taken slightly after the start, because seeking to exactly 0
+   * often yields a black frame. Resolves with whatever it managed to read, so
+   * an unsupported codec degrades to an icon rather than failing the upload.
+   */
+  function readVideoPreview(
+    file: File
+  ): Promise<{ url?: string; duration?: number; width?: number; height?: number }> {
+    return new Promise((resolve) => {
+      const objectUrl = URL.createObjectURL(file);
+      const video = document.createElement('video');
+      let settled = false;
+
+      const finish = (result: {
+        url?: string;
+        duration?: number;
+        width?: number;
+        height?: number;
+      }) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timeout);
+        URL.revokeObjectURL(objectUrl);
+        resolve(result);
+      };
+
+      // A file the browser cannot decode may never fire either event.
+      const timeout = setTimeout(() => finish({}), 5000);
+
+      video.preload = 'metadata';
+      video.muted = true;
+      video.playsInline = true;
+
+      video.onloadedmetadata = () => {
+        // Seek a fraction in; frame 0 is frequently blank.
+        video.currentTime = Math.min(0.1, video.duration / 2 || 0);
+      };
+
+      video.onseeked = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const context = canvas.getContext('2d');
+
+        let url: string | undefined;
+        if (context && canvas.width > 0 && canvas.height > 0) {
+          context.drawImage(video, 0, 0, canvas.width, canvas.height);
+          try {
+            url = canvas.toDataURL('image/jpeg', 0.7);
+          } catch {
+            // Tainted canvas or an unsupported format — fall back to no poster.
+          }
+        }
+
+        finish({
+          url,
+          duration: Number.isFinite(video.duration) ? video.duration : undefined,
+          width: video.videoWidth || undefined,
+          height: video.videoHeight || undefined,
+        });
+      };
+
+      video.onerror = () => finish({});
+      video.src = objectUrl;
+    });
+  }
+
+  /** Read the duration from an audio file without loading the whole thing. */
+  function readAudioDuration(file: File): Promise<number | undefined> {
+    return new Promise((resolve) => {
+      const objectUrl = URL.createObjectURL(file);
+      const audio = document.createElement('audio');
+      let settled = false;
+
+      const finish = (duration?: number) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timeout);
+        URL.revokeObjectURL(objectUrl);
+        resolve(duration);
+      };
+
+      const timeout = setTimeout(() => finish(undefined), 5000);
+
+      audio.preload = 'metadata';
+      audio.onloadedmetadata = () =>
+        finish(Number.isFinite(audio.duration) ? audio.duration : undefined);
+      audio.onerror = () => finish(undefined);
+      audio.src = objectUrl;
+    });
+  }
+
   // Create FileMetadata from File
   async function createFileMetadata(file: File): Promise<FileMetadata> {
     const metadata: FileMetadata = {
@@ -167,6 +280,14 @@
         reader.onload = () => resolve(reader.result as string);
         reader.readAsDataURL(file);
       });
+    } else if (file.type.startsWith('video/')) {
+      const { url, duration, width, height } = await readVideoPreview(file);
+      metadata.url = url;
+      metadata.duration = duration;
+      metadata.width = width;
+      metadata.height = height;
+    } else if (file.type.startsWith('audio/')) {
+      metadata.duration = await readAudioDuration(file);
     }
 
     return metadata;
@@ -316,6 +437,68 @@
     }
   }
 
+  /**
+   * Uploaded files mapped to media items for the grid and lightbox previews.
+   * Files still uploading, or with no preview URL, are skipped so the gallery
+   * never shows a broken tile.
+   */
+  const previewItems = $derived.by<MediaItem[]>(() =>
+    files.flatMap((file): MediaItem[] => {
+      if (file.error) return [];
+
+      if (file.contentType.startsWith('image/') && file.url) {
+        return [
+          {
+            kind: 'image',
+            id: file.id,
+            src: file.url,
+            alt: file.filename,
+            title: file.filename,
+            width: file.width,
+            height: file.height,
+          },
+        ];
+      }
+
+      if (file.contentType.startsWith('video/') && file.url) {
+        return [
+          {
+            kind: 'video',
+            id: file.id,
+            src: file.url,
+            poster: file.url,
+            thumbnail: file.url,
+            title: file.filename,
+            duration: file.duration,
+          },
+        ];
+      }
+
+      if (file.contentType.startsWith('audio/') && file.url) {
+        return [
+          {
+            kind: 'audio',
+            id: file.id,
+            src: file.url,
+            title: file.filename,
+            duration: file.duration,
+          },
+        ];
+      }
+
+      return [];
+    })
+  );
+
+  const usePreviewGrid = $derived(previewLayout === 'grid' && previewItems.length > 0);
+
+  function openPreview(fileId: string) {
+    const previewIndex = previewItems.findIndex((item) => item.id === fileId);
+    if (previewIndex === -1) return;
+    lightboxIndex = previewIndex;
+    lightboxOpen = true;
+  }
+
   // Handle keyboard activation
   function handleKeyDown(e: KeyboardEvent) {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -400,6 +583,18 @@
     </p>
   {/if}
 
+  <!-- Grid preview: media thumbnails, with the removable file rows kept below -->
+  {#if usePreviewGrid}
+    <MediaGrid
+      items={previewItems}
+      label="Uploaded media"
+      columns={{ base: 3, sm: 4, md: 5 }}
+      gap="sm"
+      lightbox={preview}
+      class="mt-4"
+    />
+  {/if}
+
   <!-- File List -->
   {#if files.length > 0}
     <ul class="mt-4 space-y-2" aria-label="Uploaded files">
@@ -412,8 +607,19 @@
         >
           <!-- Preview/Icon -->
           <div class="flex-shrink-0">
-            {#if file.url && file.contentType.startsWith('image/')}
-              <img src={file.url} alt={file.filename} class="h-10 w-10 rounded object-cover" />
+            {#if file.url && (file.contentType.startsWith('image/') || file.contentType.startsWith('video/'))}
+              {#if preview}
+                <button
+                  type="button"
+                  class="block h-10 w-10 overflow-hidden rounded outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  onclick={() => openPreview(file.id)}
+                  aria-label={`Preview ${file.filename}`}
+                >
+                  <img src={file.url} alt="" class="h-full w-full object-cover" />
+                </button>
+              {:else}
+                <img src={file.url} alt={file.filename} class="h-10 w-10 rounded object-cover" />
+              {/if}
             {:else}
               <div class="flex h-10 w-10 items-center justify-center rounded bg-muted">
                 <svg
@@ -438,6 +644,9 @@
             <p class="truncate text-sm font-medium">{file.filename}</p>
             <p class="text-xs text-muted-foreground">
               {formatSize(file.size)}
+              {#if file.duration !== undefined}
+                <span class="tabular-nums"> · {formatDuration(file.duration)}</span>
+              {/if}
               {#if file.error}
                 <span class="text-destructive"> - {file.error}</span>
               {/if}
@@ -477,4 +686,12 @@
       {/each}
     </ul>
   {/if}
+
+  <!--
+    Only mounted in list mode; the grid preview already carries its own
+    lightbox, and two would fight over focus.
+  -->
+  {#if preview && !usePreviewGrid && previewItems.length > 0}
+    <Lightbox items={previewItems} bind:open={lightboxOpen} bind:index={lightboxIndex} />
+  {/if}
 </div>

package/dist/lib/components/FileUpload.svelte.d.ts

@@ -4,7 +4,9 @@
    * Features:
    * - Drag and drop zone with visual feedback
    * - Click to browse files
-   * - File preview (thumbnails for images, icons for other types)
+   * - File preview (thumbnails for images and video, icons for other types)
+   * - Duration read from audio and video files
+   * - List or grid preview layout, with optional lightbox preview
    * - Size and type validation
    * - Multiple file support
    * - Remove file action
@@ -40,6 +42,16 @@ interface Props {
      * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
      */
     typesLabel?: string;
+    /**
+     * How uploaded files are previewed. `list` (the default) keeps the
+     * existing row layout; `grid` shows media thumbnails.
+     */
+    previewLayout?: 'list' | 'grid';
+    /**
+     * Open a lightbox when a preview is activated. Off by default so existing
+     * consumers keep their current behaviour.
+     */
+    preview?: boolean;
     /** Additional classes */
     class?: string;
 }

package/dist/lib/components/media/AspectRatio.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  /**
+   * AspectRatio - Constrains its content to a fixed width/height ratio
+   *
+   * Features:
+   * - Named ratios (square, video, photo, portrait, wide) or any custom number
+   * - Reserves layout space before media loads, preventing cumulative layout shift
+   * - Content fills the box, so `object-cover` media crops rather than stretches
+   */
+  import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { MediaAspectRatio } from '../../types/components.js';
+  import { cn } from '../../utils.js';
+  import { resolveAspectRatio } from '../../utils/media.js';
+
+  interface Props {
+    /**
+     * Width-to-height ratio. Accepts a named ratio or a raw number.
+     *
+     * @example ratio="video"  // 16 / 9
+     * @example ratio={2.35}   // cinemascope
+     */
+    ratio?: MediaAspectRatio | number;
+    /** Additional classes applied to the content box */
+    class?: string;
+    /** Content stretched to fill the ratio box */
+    children: Snippet;
+    /** Any other attribute is forwarded to the content box */
+    [key: string]: unknown;
+  }
+
+  let { ratio = 'video', class: className, children, ...restProps }: Props = $props();
+
+  const numericRatio = $derived(resolveAspectRatio(ratio));
+</script>
+
+<!--
+  The primitive puts its class on the inner, absolutely-inset element, while
+  the element that actually carries the size is its outer wrapper. Passing
+  `class` straight through would therefore silently drop any sizing the caller
+  asked for, so the caller's classes go on a wrapper of our own instead.
+-->
+<div class={cn('relative overflow-hidden', className)}>
+  <AspectRatioPrimitive.Root ratio={numericRatio} {...restProps}>
+    {@render children()}
+  </AspectRatioPrimitive.Root>
+</div>

package/dist/lib/components/media/AspectRatio.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { MediaAspectRatio } from '../../types/components.js';
+interface Props {
+    /**
+     * Width-to-height ratio. Accepts a named ratio or a raw number.
+     *
+     * @example ratio="video"  // 16 / 9
+     * @example ratio={2.35}   // cinemascope
+     */
+    ratio?: MediaAspectRatio | number;
+    /** Additional classes applied to the content box */
+    class?: string;
+    /** Content stretched to fill the ratio box */
+    children: Snippet;
+    /** Any other attribute is forwarded to the content box */
+    [key: string]: unknown;
+}
+declare const AspectRatio: import("svelte").Component<Props, {}, "">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/lib/components/media/Audio.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  /**
+   * Audio - Audio player with themed controls
+   *
+   * Features:
+   * - Compact inline bar: artwork, title/artist, play/pause, seek, volume, speed
+   * - Full keyboard control (Space/K, arrows, J/L, M, Home/End, 0-9)
+   * - Buffering spinner and an inline error state with retry
+   *
+   * @example
+   * ```svelte
+   * <Audio src="/episode.mp3" title="Episode 12" artist="Design Notes" />
+   * ```
+   */
+  import { useMediaPlayer } from '../../composables/useMediaPlayer.svelte.js';
+  import type { MediaSource, MediaTextTrack } from '../../types/components.js';
+  import { cn } from '../../utils.js';
+  import { toMediaSources } from '../../utils/media.js';
+  import Icon from '../Icon.svelte';
+  import Spinner from '../Spinner.svelte';
+  import MediaControls from './internal/MediaControls.svelte';
+
+  interface Props {
+    /** A single URL, or several sources for format fallback */
+    src: string | MediaSource[];
+    /** Track title shown above the controls */
+    title?: string;
+    /** Performer or author shown beside the title */
+    artist?: string;
+    /** Artwork image URL shown to the left of the controls */
+    artwork?: string;
+    /** Accessible name for the player region (defaults to the title) */
+    label?: string;
+    /** Transcript or caption tracks */
+    tracks?: MediaTextTrack[];
+    /** Start playing automatically — browsers block this unless muted */
+    autoplay?: boolean;
+    /** Start muted */
+    muted?: boolean;
+    /** Loop playback */
+    loop?: boolean;
+    /** Initial volume, 0–1 */
+    volume?: number;
+    /** How much to preload */
+    preload?: 'none' | 'metadata' | 'auto';
+    /** Called when playback ends */
+    onEnded?: () => void;
+    /** Called on each time update, with seconds elapsed */
+    onTimeUpdate?: (currentTime: number) => void;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    src,
+    title,
+    artist,
+    artwork,
+    label,
+    tracks = [],
+    autoplay = false,
+    muted = false,
+    loop = false,
+    volume = 1,
+    preload = 'metadata',
+    onEnded,
+    onTimeUpdate,
+    class: className,
+  }: Props = $props();
+
+  let audioElement = $state<HTMLAudioElement | null>(null);
+
+  const player = useMediaPlayer(() => audioElement, {
+    volume: () => volume,
+    muted: () => muted,
+    onEnded: () => onEnded?.(),
+    onTimeUpdate: (currentTime) => onTimeUpdate?.(currentTime),
+  });
+
+  const sources = $derived(toMediaSources(src));
+  const regionLabel = $derived(label ?? (title ? `Audio player: ${title}` : 'Audio player'));
+
+  function isTextEntry(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false;
+    return (
+      target.isContentEditable ||
+      ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) ||
+      target.getAttribute('role') === 'slider'
+    );
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (isTextEntry(event.target) || event.metaKey || event.ctrlKey || event.altKey) return;
+
+    switch (event.key) {
+      case ' ':
+      case 'k':
+      case 'K':
+        event.preventDefault();
+        player.toggle();
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        player.seekBy(-5);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        player.seekBy(5);
+        break;
+      case 'j':
+      case 'J':
+        event.preventDefault();
+        player.seekBy(-10);
+        break;
+      case 'l':
+      case 'L':
+        event.preventDefault();
+        player.seekBy(10);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        player.adjustVolume(0.1);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        player.adjustVolume(-0.1);
+        break;
+      case 'm':
+      case 'M':
+        event.preventDefault();
+        player.toggleMute();
+        break;
+      case 'Home':
+        event.preventDefault();
+        player.seek(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        player.seek(player.duration);
+        break;
+      default:
+        if (/^[0-9]$/.test(event.key)) {
+          event.preventDefault();
+          player.seekToFraction(Number(event.key) / 10);
+        }
+    }
+  }
+
+  function retry() {
+    audioElement?.load();
+  }
+</script>
+
+<!--
+  `tabindex="0"` is deliberate: the player region has to be reachable so the
+  playback shortcuts below work.
+-->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  role="region"
+  aria-label={regionLabel}
+  tabindex="0"
+  class={cn(
+    'flex w-full items-center gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    className
+  )}
+  onkeydown={handleKeyDown}
+>
+  {#if artwork}
+    <img
+      src={artwork}
+      alt=""
+      aria-hidden="true"
+      class="h-14 w-14 shrink-0 rounded-md object-cover"
+    />
+  {:else}
+    <div
+      class="flex h-14 w-14 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+      aria-hidden="true"
+    >
+      <Icon name="music" size={24} />
+    </div>
+  {/if}
+
+  <div class="min-w-0 flex-1">
+    {#if title || artist}
+      <div class="mb-0.5 flex min-w-0 items-baseline gap-2 px-3">
+        {#if title}
+          <span class="truncate text-sm font-medium">{title}</span>
+        {/if}
+        {#if artist}
+          <span class="truncate text-xs text-muted-foreground">{artist}</span>
+        {/if}
+      </div>
+    {/if}
+
+    {#if player.error}
+      <div class="flex items-center gap-3 px-3 py-2 text-sm text-destructive" role="alert">
+        <span>This audio could not be played.</span>
+        <button
+          type="button"
+          class="rounded-md border border-border px-2 py-1 text-xs font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onclick={retry}
+        >
+          Try again
+        </button>
+      </div>
+    {:else}
+      <div class="relative">
+        <MediaControls {player} variant="audio" class="px-0 py-0" />
+        {#if player.buffering}
+          <div
+            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
+            aria-hidden="true"
+          >
+            <Spinner size="sm" />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <audio
+    bind:this={audioElement}
+    {autoplay}
+    {loop}
+    {muted}
+    {preload}
+    controls={false}
+    class="sr-only"
+  >
+    {#each sources as source (source.src)}
+      <source src={source.src} type={source.type} />
+    {/each}
+    {#each tracks as track (track.src)}
+      <track
+        src={track.src}
+        kind={track.kind ?? 'captions'}
+        srclang={track.srclang}
+        label={track.label}
+        default={track.default}
+      />
+    {/each}
+    Your browser does not support embedded audio.
+  </audio>
+</div>

package/dist/lib/components/media/Audio.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { MediaSource, MediaTextTrack } from '../../types/components.js';
+interface Props {
+    /** A single URL, or several sources for format fallback */
+    src: string | MediaSource[];
+    /** Track title shown above the controls */
+    title?: string;
+    /** Performer or author shown beside the title */
+    artist?: string;
+    /** Artwork image URL shown to the left of the controls */
+    artwork?: string;
+    /** Accessible name for the player region (defaults to the title) */
+    label?: string;
+    /** Transcript or caption tracks */
+    tracks?: MediaTextTrack[];
+    /** Start playing automatically — browsers block this unless muted */
+    autoplay?: boolean;
+    /** Start muted */
+    muted?: boolean;
+    /** Loop playback */
+    loop?: boolean;
+    /** Initial volume, 0–1 */
+    volume?: number;
+    /** How much to preload */
+    preload?: 'none' | 'metadata' | 'auto';
+    /** Called when playback ends */
+    onEnded?: () => void;
+    /** Called on each time update, with seconds elapsed */
+    onTimeUpdate?: (currentTime: number) => void;
+    /** Additional classes */
+    class?: string;
+}
+declare const Audio: import("svelte").Component<Props, {}, "">;
+type Audio = ReturnType<typeof Audio>;
+export default Audio;