@livepeer-frameworks/player-svelte 0.0.3

package/src/StreamStateOverlay.svelte

@@ -0,0 +1,266 @@
+<!--
+  StreamStateOverlay.svelte - Stream status overlay
+  Port of src/components/StreamStateOverlay.tsx
+
+  Shows stream status when not playable:
+  - Status-specific icons (online, offline, initializing, shutting down, error)
+  - Progress bar for INITIALIZING state
+  - Context-aware messaging
+  - Polling indicator
+  - Retry button for errors
+-->
+<script lang="ts">
+  import type { StreamStatus } from '@livepeer-frameworks/player-core';
+
+  interface Props {
+    /** Current stream status */
+    status: StreamStatus;
+    /** Human-readable message */
+    message: string;
+    /** Processing percentage (for INITIALIZING state) */
+    percentage?: number;
+    /** Callback for retry button */
+    onRetry?: () => void;
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Additional className */
+    class?: string;
+  }
+
+  let {
+    status,
+    message,
+    percentage,
+    onRetry,
+    visible = true,
+    class: className = '',
+  }: Props = $props();
+
+  // Computed states
+  let showRetry = $derived(status === 'ERROR' || status === 'INVALID' || status === 'OFFLINE');
+  let showProgress = $derived(status === 'INITIALIZING' && percentage !== undefined);
+
+  // Get status label for header
+  function getStatusLabel(status: StreamStatus): string {
+    switch (status) {
+      case 'ONLINE': return 'ONLINE';
+      case 'OFFLINE': return 'OFFLINE';
+      case 'INITIALIZING': return 'INITIALIZING';
+      case 'BOOTING': return 'STARTING';
+      case 'WAITING_FOR_DATA': return 'WAITING';
+      case 'SHUTTING_DOWN': return 'ENDING';
+      case 'ERROR': return 'ERROR';
+      case 'INVALID': return 'INVALID';
+      default: return 'STATUS';
+    }
+  }
+</script>
+
+<style>
+  .overlay-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(var(--tn-bg-dark, 235 21% 11%) / 0.8);
+    backdrop-filter: blur(4px);
+  }
+
+  .slab {
+    width: 280px;
+    max-width: 90%;
+    background-color: hsl(var(--tn-bg, 233 23% 17%) / 0.95);
+    border: 1px solid hsl(var(--tn-border, 233 23% 25%) / 0.3);
+  }
+
+  .slab-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid hsl(var(--tn-border, 233 23% 25%) / 0.3);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-fg-dark, 233 23% 60%));
+  }
+
+  .slab-body {
+    padding: 1rem;
+  }
+
+  .slab-actions {
+    border-top: 1px solid hsl(var(--tn-border, 233 23% 25%) / 0.3);
+  }
+
+  .btn-flush {
+    width: 100%;
+    padding: 0.625rem 1rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-blue, 217 89% 71%));
+    transition: background-color 0.15s;
+  }
+
+  .btn-flush:hover {
+    background-color: hsl(var(--tn-bg-visual, 233 23% 20%) / 0.5);
+  }
+
+  .progress-bar {
+    height: 0.375rem;
+    width: 100%;
+    overflow: hidden;
+    background-color: hsl(var(--tn-bg-visual, 233 23% 20%));
+  }
+
+  .progress-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+    background-color: hsl(var(--tn-yellow, 40 70% 64%));
+  }
+
+  .icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .icon-online {
+    color: hsl(var(--tn-green, 115 54% 57%));
+  }
+
+  .icon-offline {
+    color: hsl(var(--tn-red, 355 68% 65%));
+  }
+
+  .icon-warning {
+    color: hsl(var(--tn-yellow, 40 70% 64%));
+  }
+
+  .polling-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+    font-size: 0.75rem;
+    color: hsl(var(--tn-fg-dark, 233 23% 60%));
+  }
+
+  .polling-dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    background-color: hsl(var(--tn-cyan, 192 78% 73%));
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+</style>
+
+{#if visible && status !== 'ONLINE'}
+  <div
+    class="overlay-backdrop {className}"
+    role="status"
+    aria-live="polite"
+  >
+    <div class="slab">
+      <!-- Slab header - status label with icon -->
+      <div class="slab-header">
+        <!-- Status Icon -->
+        {#if status === 'OFFLINE'}
+          <svg class="icon icon-offline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
+          </svg>
+        {:else if status === 'INITIALIZING' || status === 'BOOTING' || status === 'WAITING_FOR_DATA'}
+          <svg class="icon icon-warning animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+        {:else if status === 'SHUTTING_DOWN'}
+          <svg class="icon icon-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+        {:else}
+          <!-- ERROR or INVALID -->
+          <svg class="icon icon-offline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+        {/if}
+
+        <span>{getStatusLabel(status)}</span>
+      </div>
+
+      <!-- Slab body - message and progress -->
+      <div class="slab-body">
+        <p style="font-size: 0.875rem; color: hsl(var(--tn-fg, 233 23% 75%));">
+          {message}
+        </p>
+
+        {#if showProgress && percentage !== undefined}
+          <div style="margin-top: 0.75rem;">
+            <div class="progress-bar">
+              <div
+                class="progress-fill"
+                style="width: {Math.min(100, percentage)}%;"
+              />
+            </div>
+            <p style="margin-top: 0.375rem; font-size: 0.75rem; font-family: monospace; color: hsl(var(--tn-fg-dark, 233 23% 60%));">
+              {Math.round(percentage)}%
+            </p>
+          </div>
+        {/if}
+
+        {#if status === 'OFFLINE'}
+          <p style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));">
+            The stream will start when the broadcaster goes live
+          </p>
+        {/if}
+
+        {#if status === 'BOOTING' || status === 'WAITING_FOR_DATA'}
+          <p style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));">
+            Please wait while the stream prepares...
+          </p>
+        {/if}
+
+        <!-- Polling indicator for non-error states -->
+        {#if !showRetry}
+          <div class="polling-indicator">
+            <span class="polling-dot" />
+            <span>Checking stream status...</span>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Slab actions - flush retry button -->
+      {#if showRetry && onRetry}
+        <div class="slab-actions">
+          <button
+            type="button"
+            class="btn-flush"
+            onclick={onRetry}
+            aria-label="Retry connection"
+          >
+            Retry Connection
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/SubtitleRenderer.svelte

@@ -0,0 +1,234 @@
+<!--
+  SubtitleRenderer.svelte - Live or static subtitles renderer
+  Port of src/components/SubtitleRenderer.tsx
+
+  Supports:
+  - Static cue list (pre-loaded)
+  - Live cues from meta track subscription
+  - Customizable styling (font, colors, position)
+  - Automatic timing synchronization with video
+-->
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  interface SubtitleCue {
+    id: string;
+    text: string;
+    startTime: number;
+    endTime: number;
+    lang?: string;
+  }
+
+  interface MetaTrackEvent {
+    type: string;
+    data: unknown;
+  }
+
+  interface SubtitleStyle {
+    fontSize?: string;
+    fontFamily?: string;
+    color?: string;
+    backgroundColor?: string;
+    textShadow?: string;
+    bottom?: string;
+    maxWidth?: string;
+    padding?: string;
+    borderRadius?: string;
+  }
+
+  interface Props {
+    /** Current video playback time in seconds */
+    currentTime: number;
+    /** Whether subtitles are enabled */
+    enabled?: boolean;
+    /** Subtitle cues to render (static or from meta track) */
+    cues?: SubtitleCue[];
+    /** Subscribe to meta track function (for live subtitles) */
+    subscribeToMetaTrack?: (trackId: string, callback: (event: MetaTrackEvent) => void) => () => void;
+    /** Meta track ID for live subtitles */
+    metaTrackId?: string;
+    /** Custom styles */
+    style?: SubtitleStyle;
+    /** Container class name */
+    class?: string;
+  }
+
+  let {
+    currentTime,
+    enabled = true,
+    cues: staticCues,
+    subscribeToMetaTrack,
+    metaTrackId,
+    style: customStyle,
+    class: className = '',
+  }: Props = $props();
+
+  const DEFAULT_STYLE: SubtitleStyle = {
+    fontSize: '1.5rem',
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+    color: 'white',
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
+    bottom: '5%',
+    maxWidth: '90%',
+    padding: '0.5em 1em',
+    borderRadius: '4px',
+  };
+
+  // State
+  let liveCues = $state<SubtitleCue[]>([]);
+  let displayedText = $state<string>('');
+  let lastCueId: string | null = null;
+  let unsubscribe: (() => void) | null = null;
+
+  // Merged style
+  let mergedStyle = $derived({ ...DEFAULT_STYLE, ...customStyle });
+
+  // All available cues (static + live)
+  let allCues = $derived([...(staticCues ?? []), ...liveCues]);
+
+  // Parse subtitle cue from meta track event data
+  function parseSubtitleCue(data: unknown): SubtitleCue | null {
+    if (typeof data !== 'object' || data === null) return null;
+
+    const obj = data as Record<string, unknown>;
+
+    const text = typeof obj.text === 'string' ? obj.text : String(obj.text ?? '');
+    if (!text) return null;
+
+    let startTime = 0;
+    let endTime = Infinity;
+
+    if ('startTime' in obj) startTime = Number(obj.startTime);
+    else if ('start' in obj) startTime = Number(obj.start);
+
+    if ('endTime' in obj) endTime = Number(obj.endTime);
+    else if ('end' in obj) endTime = Number(obj.end);
+
+    const id = typeof obj.id === 'string' ? obj.id : String(Date.now());
+
+    return {
+      id,
+      text,
+      startTime,
+      endTime,
+      lang: typeof obj.lang === 'string' ? obj.lang : undefined,
+    };
+  }
+
+  // Subscribe to live subtitles if meta track is configured
+  $effect(() => {
+    if (!enabled || !subscribeToMetaTrack || !metaTrackId) {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+      return;
+    }
+
+    const handleMetaEvent = (event: MetaTrackEvent) => {
+      if (event.type === 'subtitle') {
+        const cue = parseSubtitleCue(event.data);
+        if (cue) {
+          // Deduplicate by ID
+          const existing = liveCues.find(c => c.id === cue.id);
+          if (!existing) {
+            // Keep last 50 cues max
+            liveCues = [...liveCues, cue].slice(-50);
+          }
+        }
+      }
+    };
+
+    unsubscribe = subscribeToMetaTrack(metaTrackId, handleMetaEvent);
+
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    };
+  });
+
+  // Find active cue based on current time
+  $effect(() => {
+    if (!enabled) {
+      displayedText = '';
+      return;
+    }
+
+    const currentTimeMs = currentTime * 1000;
+    const activeCue = allCues.find(cue => {
+      const start = cue.startTime;
+      const end = cue.endTime;
+      return currentTimeMs >= start && currentTimeMs < end;
+    });
+
+    if (activeCue) {
+      displayedText = activeCue.text;
+      lastCueId = activeCue.id;
+    } else {
+      displayedText = '';
+      lastCueId = null;
+    }
+  });
+
+  // Clean up expired cues
+  $effect(() => {
+    const currentTimeMs = currentTime * 1000;
+
+    liveCues = liveCues.filter(cue => {
+      const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;
+      return endTime >= currentTimeMs - 30000;
+    });
+  });
+
+  // Cleanup on destroy
+  onDestroy(() => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+  });
+</script>
+
+<style>
+  .subtitle-container {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 30;
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .subtitle-text {
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+</style>
+
+{#if enabled && displayedText}
+  <div
+    class="subtitle-container {className}"
+    style="bottom: {mergedStyle.bottom}; max-width: {mergedStyle.maxWidth};"
+    role="region"
+    aria-live="polite"
+    aria-label="Subtitles"
+  >
+    <span
+      class="subtitle-text"
+      style="
+        font-size: {mergedStyle.fontSize};
+        font-family: {mergedStyle.fontFamily};
+        color: {mergedStyle.color};
+        background-color: {mergedStyle.backgroundColor};
+        text-shadow: {mergedStyle.textShadow};
+        padding: {mergedStyle.padding};
+        border-radius: {mergedStyle.borderRadius};
+      "
+    >
+      {displayedText}
+    </span>
+  </div>
+{/if}

package/src/ThumbnailOverlay.svelte

@@ -0,0 +1,96 @@
+<!--
+  ThumbnailOverlay.svelte - Pre-play poster with play button
+  Port of src/components/ThumbnailOverlay.tsx
+-->
+<script lang="ts">
+  import { cn } from '@livepeer-frameworks/player-core';
+
+  interface Props {
+    thumbnailUrl?: string | null;
+    onPlay?: () => void;
+    message?: string | null;
+    showUnmuteMessage?: boolean;
+    style?: string;
+    class?: string;
+  }
+
+  let {
+    thumbnailUrl = null,
+    onPlay = undefined,
+    message = null,
+    showUnmuteMessage = false,
+    style = '',
+    class: className = '',
+  }: Props = $props();
+
+  function handleClick() {
+    onPlay?.();
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<div
+  role="button"
+  tabindex="0"
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  {style}
+  class={cn(
+    'fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    className
+  )}
+>
+  {#if thumbnailUrl}
+    <div
+      class="absolute inset-0 bg-cover bg-center"
+      style="background-image: url({thumbnailUrl})"
+    ></div>
+  {/if}
+
+  <div
+    class={cn(
+      'absolute inset-0 bg-slate-950/70',
+      !thumbnailUrl && 'bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900'
+    )}
+  ></div>
+
+  <div class="relative z-10 flex max-w-[320px] flex-col items-center gap-4 px-6 text-center text-sm sm:gap-6">
+    {#if showUnmuteMessage}
+      <div class="w-full rounded-lg border border-white/15 bg-black/80 p-4 text-sm text-white shadow-lg backdrop-blur">
+        <div class="mb-1 flex items-center justify-center gap-2 text-base font-semibold text-primary">
+          <span aria-hidden="true">🔇</span> Click to unmute
+        </div>
+        <p class="text-xs text-white/80">Stream is playing muted — tap to enable sound.</p>
+      </div>
+    {:else}
+      <button
+        type="button"
+        class="h-20 w-20 rounded-full bg-primary/90 text-primary-foreground shadow-lg shadow-primary/40 transition hover:bg-primary focus-visible:bg-primary flex items-center justify-center"
+        aria-label="Play stream"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="ml-0.5 h-8 w-8"
+          aria-hidden="true"
+        >
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </button>
+      <div class="w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur">
+        <p class="text-base font-semibold text-primary">
+          {message ?? 'Click to play'}
+        </p>
+        <p class="mt-1 text-xs text-white/70">
+          {message ? 'Start streaming instantly' : 'Jump into the live feed'}
+        </p>
+      </div>
+    {/if}
+  </div>
+</div>

package/src/TitleOverlay.svelte

@@ -0,0 +1,47 @@
+<!--
+  TitleOverlay.svelte - Title/description overlay at top of player
+  Port of src/components/TitleOverlay.tsx
+-->
+<script lang="ts">
+  import { cn } from '@livepeer-frameworks/player-core';
+
+  interface Props {
+    title?: string | null;
+    description?: string | null;
+    isVisible: boolean;
+    class?: string;
+  }
+
+  let {
+    title = null,
+    description = null,
+    isVisible,
+    class: className = '',
+  }: Props = $props();
+
+  // Don't render if no content
+  let hasContent = $derived(!!title || !!description);
+</script>
+
+{#if hasContent}
+  <div
+    class={cn(
+      'fw-title-overlay absolute inset-x-0 top-0 z-20 pointer-events-none',
+      'bg-gradient-to-b from-black/70 via-black/40 to-transparent',
+      'px-4 py-3 transition-opacity duration-300',
+      isVisible ? 'opacity-100' : 'opacity-0',
+      className
+    )}
+  >
+    {#if title}
+      <h2 class="text-white text-sm font-medium truncate max-w-[80%]">
+        {title}
+      </h2>
+    {/if}
+    {#if description}
+      <p class="text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]">
+        {description}
+      </p>
+    {/if}
+  </div>
+{/if}