@livepeer-frameworks/player-svelte 0.0.3

package/src/SeekBar.svelte

@@ -0,0 +1,274 @@
+<!--
+  SeekBar.svelte - Industry-standard video seek bar
+  Port of src/components/SeekBar.tsx
+-->
+<script lang="ts">
+  import { cn } from '@livepeer-frameworks/player-core';
+
+  interface Props {
+    /** Current playback time in seconds */
+    currentTime: number;
+    /** Total duration in seconds */
+    duration: number;
+    /** Buffered time ranges from video element */
+    buffered?: TimeRanges;
+    /** Whether seeking is allowed */
+    disabled?: boolean;
+    /** Called when user seeks to a new time */
+    onseek?: (time: number) => void;
+    /** Additional class names */
+    class?: string;
+    /** Whether this is a live stream */
+    isLive?: boolean;
+    /** For live: start of seekable DVR window (seconds) */
+    seekableStart?: number;
+    /** For live: current live edge position (seconds) */
+    liveEdge?: number;
+    /** Defer seeking until drag release */
+    commitOnRelease?: boolean;
+  }
+
+  let {
+    currentTime,
+    duration,
+    buffered = undefined,
+    disabled = false,
+    onseek = undefined,
+    class: className = '',
+    isLive = false,
+    seekableStart = 0,
+    liveEdge = undefined,
+    commitOnRelease = false,
+  }: Props = $props();
+
+  // Refs
+  let trackRef: HTMLDivElement | undefined = $state();
+
+  // Local state
+  let isHovering = $state(false);
+  let isDragging = $state(false);
+  let dragTime = $state<number | null>(null);
+  let hoverPosition = $state(0);
+  let hoverTime = $state(0);
+
+  // Effective live edge (use provided or fall back to duration)
+  let effectiveLiveEdge = $derived(liveEdge ?? duration);
+
+  // Seekable window size
+  let seekableWindow = $derived(effectiveLiveEdge - seekableStart);
+
+  // Calculate progress percentage
+  let displayTime = $derived(dragTime ?? currentTime);
+  let progressPercent = $derived.by(() => {
+    if (isLive && seekableWindow > 0) {
+      const positionInWindow = displayTime - seekableStart;
+      return Math.min(100, Math.max(0, (positionInWindow / seekableWindow) * 100));
+    }
+    if (!Number.isFinite(duration) || duration <= 0) return 0;
+    return Math.min(100, Math.max(0, (displayTime / duration) * 100));
+  });
+
+  // Calculate buffered segments as array of {start%, end%}
+  let bufferedSegments = $derived.by(() => {
+    if (!buffered || buffered.length === 0) return [];
+
+    const rangeEnd = isLive ? effectiveLiveEdge : duration;
+    const rangeStart = isLive ? seekableStart : 0;
+    const rangeSize = rangeEnd - rangeStart;
+
+    if (!Number.isFinite(rangeSize) || rangeSize <= 0) return [];
+
+    const segments: Array<{ startPercent: number; endPercent: number }> = [];
+    for (let i = 0; i < buffered.length; i++) {
+      const start = buffered.start(i);
+      const end = buffered.end(i);
+
+      const relativeStart = start - rangeStart;
+      const relativeEnd = end - rangeStart;
+
+      segments.push({
+        startPercent: Math.min(100, Math.max(0, (relativeStart / rangeSize) * 100)),
+        endPercent: Math.min(100, Math.max(0, (relativeEnd / rangeSize) * 100)),
+      });
+    }
+    return segments;
+  });
+
+  // Format time as MM:SS or HH:MM:SS
+  function formatTime(seconds: number): string {
+    if (!Number.isFinite(seconds) || seconds < 0) return '0:00';
+    const total = Math.floor(seconds);
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const secs = total % 60;
+    if (hours > 0) {
+      return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
+    return `${minutes}:${String(secs).padStart(2, '0')}`;
+  }
+
+  // Format relative time for live streams
+  function formatLiveTime(seconds: number, edge: number): string {
+    const behindSeconds = edge - seconds;
+    if (behindSeconds < 1) return 'LIVE';
+    const total = Math.floor(behindSeconds);
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const secs = total % 60;
+    if (hours > 0) {
+      return `-${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
+    return `-${minutes}:${String(secs).padStart(2, '0')}`;
+  }
+
+  // Calculate time from mouse position
+  function getTimeFromPosition(clientX: number): number {
+    if (!trackRef) return 0;
+    const rect = trackRef.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percent = Math.min(1, Math.max(0, x / rect.width));
+
+    // Live with valid seekable window
+    if (isLive && Number.isFinite(seekableWindow) && seekableWindow > 0) {
+      return seekableStart + (percent * seekableWindow);
+    }
+
+    // VOD with finite duration
+    if (Number.isFinite(duration) && duration > 0) {
+      return percent * duration;
+    }
+
+    // Fallback: If we have liveEdge, use it even if not marked as live
+    // This handles cases where duration is Infinity but we have valid seekable data
+    if (liveEdge !== undefined && Number.isFinite(liveEdge) && liveEdge > 0) {
+      const start = Number.isFinite(seekableStart) ? seekableStart : 0;
+      const window = liveEdge - start;
+      if (window > 0) {
+        return start + (percent * window);
+      }
+    }
+
+    // Last resort: use currentTime as a baseline
+    return percent * (currentTime || 1);
+  }
+
+  // Handle mouse move for hover preview
+  function handleMouseMove(e: MouseEvent) {
+    if (!trackRef || disabled) return;
+    const rect = trackRef.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percent = Math.min(1, Math.max(0, x / rect.width));
+    hoverPosition = percent * 100;
+    hoverTime = getTimeFromPosition(e.clientX);
+  }
+
+  // Handle click to seek
+  function handleClick(e: MouseEvent) {
+    if (disabled) return;
+    if (!isLive && !Number.isFinite(duration)) return;
+    const time = getTimeFromPosition(e.clientX);
+    onseek?.(time);
+    dragTime = null;
+  }
+
+  // Handle drag start
+  function handleMouseDown(e: MouseEvent) {
+    if (disabled) return;
+    if (!isLive && !Number.isFinite(duration)) return;
+    e.preventDefault();
+    isDragging = true;
+
+    const handleDragMove = (moveEvent: MouseEvent) => {
+      const time = getTimeFromPosition(moveEvent.clientX);
+      if (commitOnRelease) {
+        dragTime = time;
+      } else {
+        onseek?.(time);
+      }
+    };
+
+    const handleDragEnd = () => {
+      isDragging = false;
+      document.removeEventListener('mousemove', handleDragMove);
+      document.removeEventListener('mouseup', handleDragEnd);
+      if (commitOnRelease && dragTime !== null) {
+        onseek?.(dragTime);
+        dragTime = null;
+      }
+    };
+
+    document.addEventListener('mousemove', handleDragMove);
+    document.addEventListener('mouseup', handleDragEnd);
+
+    // Initial seek
+    const time = getTimeFromPosition(e.clientX);
+    if (commitOnRelease) {
+      dragTime = time;
+    } else {
+      onseek?.(time);
+    }
+  }
+
+  let showThumb = $derived(isHovering || isDragging);
+  let canShowTooltip = $derived(isLive ? seekableWindow > 0 : Number.isFinite(duration));
+  let ariaValueText = $derived(isLive ? formatLiveTime(displayTime, effectiveLiveEdge) : formatTime(displayTime));
+</script>
+
+<div
+  bind:this={trackRef}
+  class={cn(
+    'group relative w-full h-6 flex items-center cursor-pointer',
+    disabled && 'opacity-50 cursor-not-allowed',
+    className
+  )}
+  onmouseenter={() => !disabled && (isHovering = true)}
+  onmouseleave={() => { isHovering = false; isDragging = false; }}
+  onmousemove={handleMouseMove}
+  onclick={handleClick}
+  onmousedown={handleMouseDown}
+  role="slider"
+  aria-label="Seek"
+  aria-valuemin={isLive ? seekableStart : 0}
+  aria-valuemax={isLive ? effectiveLiveEdge : (duration || 100)}
+  aria-valuenow={displayTime}
+  aria-valuetext={ariaValueText}
+  tabindex={disabled ? -1 : 0}
+>
+  <!-- Track background -->
+  <div class={cn(
+    'fw-seek-track',
+    isDragging && 'fw-seek-track--active'
+  )}>
+    <!-- Buffered segments -->
+    {#each bufferedSegments as segment, index}
+      <div
+        class="fw-seek-buffered"
+        style="left: {segment.startPercent}%; width: {segment.endPercent - segment.startPercent}%;"
+      ></div>
+    {/each}
+    <!-- Playback progress -->
+    <div
+      class="fw-seek-progress"
+      style="width: {progressPercent}%;"
+    ></div>
+  </div>
+
+  <!-- Thumb -->
+  <div
+    class={cn(
+      'fw-seek-thumb',
+      showThumb ? 'fw-seek-thumb--active' : 'fw-seek-thumb--hidden'
+    )}
+    style="left: {progressPercent}%;"
+  ></div>
+
+  <!-- Hover time tooltip -->
+  {#if isHovering && !isDragging && canShowTooltip}
+    <div
+      class="fw-seek-tooltip"
+      style="left: {hoverPosition}%;"
+    >
+      {isLive ? formatLiveTime(hoverTime, effectiveLiveEdge) : formatTime(hoverTime)}
+    </div>
+  {/if}
+</div>

package/src/SkipIndicator.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  /**
+   * Skip indicator overlay that appears when double-tapping to skip.
+   * Shows the skip direction and amount (e.g., "-10s" or "+10s") with a ripple effect.
+   */
+  export type SkipDirection = 'back' | 'forward' | null;
+
+  let {
+    direction = null as SkipDirection,
+    seconds = 10,
+    class: className = '',
+    onhide = undefined as (() => void) | undefined,
+  }: {
+    direction: SkipDirection;
+    seconds?: number;
+    class?: string;
+    onhide?: () => void;
+  } = $props();
+
+  let isAnimating = $state(false);
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // Trigger animation when direction changes
+  $effect(() => {
+    if (direction) {
+      isAnimating = true;
+
+      if (hideTimer) {
+        clearTimeout(hideTimer);
+      }
+
+      hideTimer = setTimeout(() => {
+        isAnimating = false;
+        onhide?.();
+      }, 600);
+    }
+  });
+
+  onMount(() => {
+    return () => {
+      if (hideTimer) {
+        clearTimeout(hideTimer);
+      }
+    };
+  });
+
+  let isBack = $derived(direction === 'back');
+</script>
+
+{#if direction}
+  <div
+    class="fw-skip-indicator absolute inset-0 z-30 pointer-events-none flex items-center
+           {isBack ? 'justify-start pl-8' : 'justify-end pr-8'}
+           {className}"
+  >
+    <!-- Ripple background -->
+    <div
+      class="absolute top-0 bottom-0 w-1/3 bg-white/10
+             {isBack ? 'left-0' : 'right-0'}
+             {isAnimating ? 'animate-pulse' : ''}"
+    ></div>
+
+    <!-- Skip content -->
+    <div
+      class="relative flex flex-col items-center gap-1 text-white transition-all duration-200
+             {isAnimating ? 'opacity-100 scale-100' : 'opacity-0 scale-75'}"
+    >
+      <!-- Icon -->
+      <div class="flex">
+        {#if isBack}
+          <svg viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8" aria-hidden="true">
+            <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
+          </svg>
+          <svg viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 -ml-4" aria-hidden="true">
+            <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
+          </svg>
+        {:else}
+          <svg viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8" aria-hidden="true">
+            <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
+          </svg>
+          <svg viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 -ml-4" aria-hidden="true">
+            <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
+          </svg>
+        {/if}
+      </div>
+
+      <!-- Text -->
+      <span class="text-sm font-semibold tabular-nums">
+        {isBack ? `-${seconds}s` : `+${seconds}s`}
+      </span>
+    </div>
+  </div>
+{/if}

package/src/SpeedIndicator.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  /**
+   * Speed indicator overlay that appears when holding for fast-forward.
+   * Shows the current playback speed (e.g., "2x") in a pill overlay.
+   */
+  let {
+    isVisible = false,
+    speed = 2,
+    class: className = '',
+  }: {
+    isVisible: boolean;
+    speed: number;
+    class?: string;
+  } = $props();
+</script>
+
+<div
+  class="fw-speed-indicator absolute top-3 right-3 z-30 pointer-events-none
+         transition-opacity duration-150
+         {isVisible ? 'opacity-100' : 'opacity-0'}
+         {className}"
+>
+  <div
+    class="bg-black/60 text-white px-2.5 py-1 rounded-md
+           text-xs font-semibold tabular-nums
+           flex items-center gap-2
+           border border-white/15
+           transform transition-transform duration-150
+           {isVisible ? 'scale-100' : 'scale-90'}"
+  >
+    <!-- Fast-forward icon -->
+    <svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4" aria-hidden="true">
+      <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
+    </svg>
+    <span>{speed}x</span>
+  </div>
+</div>

package/src/StatsPanel.svelte

@@ -0,0 +1,155 @@
+<!--
+  StatsPanel.svelte - "Stats for nerds" debug panel
+  Port of src/components/StatsPanel.tsx
+-->
+<script lang="ts">
+  import { cn, type ContentMetadata, type PlaybackQuality } from '@livepeer-frameworks/player-core';
+  import Button from './ui/Button.svelte';
+
+  interface StreamStateInfo {
+    status?: string;
+    viewers?: number;
+    tracks?: Array<{
+      type: string;
+      codec: string;
+      width?: number;
+      height?: number;
+      bps?: number;
+      channels?: number;
+    }>;
+  }
+
+  interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    metadata?: ContentMetadata | null;
+    streamState?: StreamStateInfo | null;
+    quality?: PlaybackQuality | null;
+    videoElement?: HTMLVideoElement | null;
+    protocol?: string;
+    nodeId?: string;
+    geoDistance?: number;
+  }
+
+  let {
+    isOpen,
+    onClose,
+    metadata = null,
+    streamState = null,
+    quality = null,
+    videoElement = null,
+    protocol = undefined,
+    nodeId = undefined,
+    geoDistance = undefined,
+  }: Props = $props();
+
+  // Video element stats (reactive)
+  let currentRes = $derived(videoElement ? `${videoElement.videoWidth}x${videoElement.videoHeight}` : '—');
+  let buffered = $derived.by(() => {
+    if (!videoElement || videoElement.buffered.length === 0) return '—';
+    return (videoElement.buffered.end(videoElement.buffered.length - 1) - videoElement.currentTime).toFixed(1);
+  });
+  let playbackRate = $derived(videoElement?.playbackRate?.toFixed(2) ?? '1.00');
+
+  // Quality monitor stats
+  let qualityScore = $derived(quality?.score?.toFixed(0) ?? '—');
+  let bitrateKbps = $derived(quality?.bitrate ? `${(quality.bitrate / 1000).toFixed(0)} kbps` : '—');
+  let frameDropRate = $derived(quality?.frameDropRate?.toFixed(1) ?? '—');
+  let stallCount = $derived(quality?.stallCount ?? 0);
+  let latency = $derived(quality?.latency ? `${Math.round(quality.latency)} ms` : '—');
+
+  // Stream state stats
+  let viewers = $derived(streamState?.viewers ?? metadata?.viewers ?? '—');
+  let streamStatus = $derived(streamState?.status ?? metadata?.status ?? '—');
+
+  // Format track info
+  function formatTracks(): string {
+    if (!streamState?.tracks?.length) return '—';
+    return streamState.tracks.map(t => {
+      if (t.type === 'video') {
+        return `${t.codec} ${t.width}x${t.height}@${t.bps ? Math.round(t.bps / 1000) + 'kbps' : '?'}`;
+      }
+      return `${t.codec} ${t.channels}ch`;
+    }).join(', ');
+  }
+
+  // Build stats array
+  let stats = $derived.by(() => {
+    const result: Array<{ label: string; value: string }> = [];
+
+    if (metadata?.title) {
+      result.push({ label: 'Title', value: metadata.title });
+    }
+
+    result.push(
+      { label: 'Resolution', value: currentRes },
+      { label: 'Buffer', value: `${buffered}s` },
+      { label: 'Latency', value: latency },
+      { label: 'Bitrate', value: bitrateKbps },
+      { label: 'Quality Score', value: `${qualityScore}/100` },
+      { label: 'Frame Drop Rate', value: `${frameDropRate}%` },
+      { label: 'Stalls', value: String(stallCount) },
+      { label: 'Playback Rate', value: `${playbackRate}x` },
+      { label: 'Protocol', value: protocol ?? '—' },
+      { label: 'Node', value: nodeId ?? '—' },
+      { label: 'Geo Distance', value: geoDistance ? `${geoDistance.toFixed(0)} km` : '—' },
+      { label: 'Viewers', value: String(viewers) },
+      { label: 'Status', value: streamStatus },
+      { label: 'Tracks', value: formatTracks() },
+    );
+
+    if (metadata?.durationSeconds) {
+      const mins = Math.floor(metadata.durationSeconds / 60);
+      const secs = metadata.durationSeconds % 60;
+      result.push({ label: 'Duration', value: `${mins}:${String(secs).padStart(2, '0')}` });
+    }
+
+    if (metadata?.recordingSizeBytes) {
+      const mb = (metadata.recordingSizeBytes / (1024 * 1024)).toFixed(1);
+      result.push({ label: 'Size', value: `${mb} MB` });
+    }
+
+    return result;
+  });
+</script>
+
+{#if isOpen}
+  <div
+    class={cn(
+      'fw-stats-panel absolute top-2 right-2 z-30',
+      'bg-black border border-white/10 rounded',
+      'text-white text-xs font-mono',
+      'max-w-[320px] max-h-[80%] overflow-auto',
+      'shadow-lg'
+    )}
+    style="background-color: #000000;"
+  >
+    <!-- Header -->
+    <div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
+      <span class="text-white/70 text-[10px] uppercase tracking-wider">
+        Stats Overlay
+      </span>
+      <Button
+        type="button"
+        variant="ghost"
+        onclick={onClose}
+        class="text-white/50 hover:text-white transition-colors p-1 -mr-1 h-auto w-auto min-w-0"
+        aria-label="Close stats panel"
+      >
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M2 2l8 8M10 2l-8 8" />
+        </svg>
+      </Button>
+    </div>
+
+    <!-- Stats grid -->
+    <div class="px-3 py-2 space-y-1">
+      {#each stats as { label, value }}
+        <div class="flex justify-between gap-4">
+          <span class="text-white/50 shrink-0">{label}</span>
+          <span class="text-white/90 truncate text-right">{value}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}