@livepeer-frameworks/player-svelte 0.1.1 → 0.1.2

package/dist/PlayerControls.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type MistStreamInfo, type PlaybackMode } from '@livepeer-frameworks/player-core';
+import { type MistStreamInfo, type PlaybackMode } from "@livepeer-frameworks/player-core";
 interface Props {
     currentTime: number;
     duration: number;

package/dist/SeekBar.svelte

@@ -3,7 +3,7 @@
   Port of src/components/SeekBar.tsx
 -->
 <script lang="ts">
-  import { cn } from '@livepeer-frameworks/player-core';
+  import { cn } from "@livepeer-frameworks/player-core";
 
   interface Props {
     /** Current playback time in seconds */
@@ -34,7 +34,7 @@
     buffered = undefined,
     disabled = false,
     onseek = undefined,
-    class: className = '',
+    class: className = "",
     isLive = false,
     seekableStart = 0,
     liveEdge = undefined,
@@ -96,29 +96,29 @@
 
   // Format time as MM:SS or HH:MM:SS
   function formatTime(seconds: number): string {
-    if (!Number.isFinite(seconds) || seconds < 0) return '0:00';
+    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 `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
     }
-    return `${minutes}:${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';
+    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 `-${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
     }
-    return `-${minutes}:${String(secs).padStart(2, '0')}`;
+    return `-${minutes}:${String(secs).padStart(2, "0")}`;
   }
 
   // Calculate time from mouse position
@@ -130,7 +130,7 @@
 
     // Live with valid seekable window
     if (isLive && Number.isFinite(seekableWindow) && seekableWindow > 0) {
-      return seekableStart + (percent * seekableWindow);
+      return seekableStart + percent * seekableWindow;
     }
 
     // VOD with finite duration
@@ -144,7 +144,7 @@
       const start = Number.isFinite(seekableStart) ? seekableStart : 0;
       const window = liveEdge - start;
       if (window > 0) {
-        return start + (percent * window);
+        return start + percent * window;
       }
     }
 
@@ -189,16 +189,16 @@
 
     const handleDragEnd = () => {
       isDragging = false;
-      document.removeEventListener('mousemove', handleDragMove);
-      document.removeEventListener('mouseup', handleDragEnd);
+      document.removeEventListener("mousemove", handleDragMove);
+      document.removeEventListener("mouseup", handleDragEnd);
       if (commitOnRelease && dragTime !== null) {
         onseek?.(dragTime);
         dragTime = null;
       }
     };
 
-    document.addEventListener('mousemove', handleDragMove);
-    document.addEventListener('mouseup', handleDragEnd);
+    document.addEventListener("mousemove", handleDragMove);
+    document.addEventListener("mouseup", handleDragEnd);
 
     // Initial seek
     const time = getTimeFromPosition(e.clientX);
@@ -211,34 +211,69 @@
 
   let showThumb = $derived(isHovering || isDragging);
   let canShowTooltip = $derived(isLive ? seekableWindow > 0 : Number.isFinite(duration));
-  let ariaValueText = $derived(isLive ? formatLiveTime(displayTime, effectiveLiveEdge) : formatTime(displayTime));
+  let ariaValueText = $derived(
+    isLive ? formatLiveTime(displayTime, effectiveLiveEdge) : formatTime(displayTime)
+  );
+
+  // Handle keyboard navigation for accessibility
+  function handleKeyDown(e: KeyboardEvent) {
+    if (disabled) return;
+    const step = e.shiftKey ? 10 : 5; // 5s default, 10s with shift
+    const rangeEnd = isLive ? effectiveLiveEdge : duration;
+    const rangeStart = isLive ? seekableStart : 0;
+
+    let newTime: number | null = null;
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        newTime = Math.max(rangeStart, currentTime - step);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        newTime = Math.min(rangeEnd, currentTime + step);
+        break;
+      case "Home":
+        newTime = rangeStart;
+        break;
+      case "End":
+        newTime = rangeEnd;
+        break;
+      default:
+        return;
+    }
+    if (newTime !== null) {
+      e.preventDefault();
+      onseek?.(newTime);
+    }
+  }
 </script>
 
 <div
   bind:this={trackRef}
   class={cn(
-    'group relative w-full h-6 flex items-center cursor-pointer',
-    disabled && 'opacity-50 cursor-not-allowed',
+    "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; }}
+  onmouseleave={() => {
+    isHovering = false;
+    isDragging = false;
+  }}
   onmousemove={handleMouseMove}
   onclick={handleClick}
   onmousedown={handleMouseDown}
+  onkeydown={handleKeyDown}
   role="slider"
   aria-label="Seek"
   aria-valuemin={isLive ? seekableStart : 0}
-  aria-valuemax={isLive ? effectiveLiveEdge : (duration || 100)}
+  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'
-  )}>
+  <div class={cn("fw-seek-track", isDragging && "fw-seek-track--active")}>
     <!-- Buffered segments -->
     {#each bufferedSegments as segment, _index}
       <div
@@ -247,27 +282,18 @@
       ></div>
     {/each}
     <!-- Playback progress -->
-    <div
-      class="fw-seek-progress"
-      style="width: {progressPercent}%;"
-    ></div>
+    <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'
-    )}
+    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}%;"
-    >
+    <div class="fw-seek-tooltip" style="left: {hoverPosition}%;">
       {isLive ? formatLiveTime(hoverTime, effectiveLiveEdge) : formatTime(hoverTime)}
     </div>
   {/if}

package/dist/SkipIndicator.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  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;
+  export type SkipDirection = "back" | "forward" | null;
 
   let {
     direction = null as SkipDirection,
     seconds = 10,
-    class: className = '',
+    class: className = "",
     onhide = undefined as (() => void) | undefined,
   }: {
     direction: SkipDirection;
@@ -46,7 +46,7 @@
     };
   });
 
-  let isBack = $derived(direction === 'back');
+  let isBack = $derived(direction === "back");
 </script>
 
 {#if direction}

package/dist/SkipIndicator.svelte.d.ts

@@ -2,7 +2,7 @@
  * 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;
+export type SkipDirection = "back" | "forward" | null;
 type $$ComponentProps = {
     direction: SkipDirection;
     seconds?: number;

package/dist/SpeedIndicator.svelte

@@ -6,7 +6,7 @@
   let {
     isVisible = false,
     speed = 2,
-    class: className = '',
+    class: className = "",
   }: {
     isVisible: boolean;
     speed: number;

package/dist/StatsPanel.svelte

@@ -3,8 +3,13 @@
   Port of src/components/StatsPanel.tsx
 -->
 <script lang="ts">
-  import { cn, type ContentMetadata, type PlaybackQuality, type StreamState } from '@livepeer-frameworks/player-core';
-  import Button from './ui/Button.svelte';
+  import {
+    cn,
+    type ContentMetadata,
+    type PlaybackQuality,
+    type StreamState,
+  } from "@livepeer-frameworks/player-core";
+  import Button from "./ui/Button.svelte";
 
   interface Props {
     isOpen: boolean;
@@ -31,23 +36,29 @@
   }: Props = $props();
 
   // Video element stats (reactive)
-  let currentRes = $derived(videoElement ? `${videoElement.videoWidth}x${videoElement.videoHeight}` : '—');
+  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);
+    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');
+  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 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` : '—');
+  let latency = $derived(quality?.latency ? `${Math.round(quality.latency)} ms` : "—");
 
   // Stream state stats
-  let viewers = $derived(metadata?.viewers ?? '—');
-  let streamStatus = $derived(streamState?.status ?? metadata?.status ?? '—');
+  let viewers = $derived(metadata?.viewers ?? "—");
+  let streamStatus = $derived(streamState?.status ?? metadata?.status ?? "—");
 
   const mistInfo = $derived(metadata?.mist ?? streamState?.streamInfo);
 
@@ -59,8 +70,8 @@
       codec: t.codec,
       width: t.width,
       height: t.height,
-      bitrate: typeof t.bps === 'number' ? Math.round(t.bps) : undefined,
-      fps: typeof t.fpks === 'number' ? t.fpks / 1000 : undefined,
+      bitrate: typeof t.bps === "number" ? Math.round(t.bps) : undefined,
+      fps: typeof t.fpks === "number" ? t.fpks / 1000 : undefined,
       channels: t.channels,
       sampleRate: t.rate,
     }));
@@ -69,16 +80,18 @@
   // Format track info
   function formatTracks(): string {
     const tracks = metadata?.tracks ?? deriveTracksFromMist();
-    if (!tracks?.length) return '—';
-    return tracks.map(t => {
-      if (t.type === 'video') {
-        const resolution = t.width && t.height ? `${t.width}x${t.height}` : '?';
-        const bitrate = t.bitrate ? `${Math.round(t.bitrate / 1000)}kbps` : '?';
-        return `${t.codec ?? '?'} ${resolution}@${bitrate}`;
-      }
-      const channels = t.channels ? `${t.channels}ch` : '?';
-      return `${t.codec ?? '?'} ${channels}`;
-    }).join(', ');
+    if (!tracks?.length) return "—";
+    return tracks
+      .map((t) => {
+        if (t.type === "video") {
+          const resolution = t.width && t.height ? `${t.width}x${t.height}` : "?";
+          const bitrate = t.bitrate ? `${Math.round(t.bitrate / 1000)}kbps` : "?";
+          return `${t.codec ?? "?"} ${resolution}@${bitrate}`;
+        }
+        const channels = t.channels ? `${t.channels}ch` : "?";
+        return `${t.codec ?? "?"} ${channels}`;
+      })
+      .join(", ");
   }
 
   // Build stats array
@@ -86,44 +99,45 @@
     const result: Array<{ label: string; value: string }> = [];
 
     if (metadata?.title) {
-      result.push({ label: 'Title', value: 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() },
-      { label: 'Mist Type', value: mistInfo?.type ?? '—' },
+      { 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() },
+      { label: "Mist Type", value: mistInfo?.type ?? "—" },
       {
-        label: 'Mist Buffer Window',
-        value: mistInfo?.meta?.buffer_window != null
-          ? String(mistInfo.meta.buffer_window)
-          : '—',
+        label: "Mist Buffer Window",
+        value: mistInfo?.meta?.buffer_window != null ? String(mistInfo.meta.buffer_window) : "—",
       },
-      { label: 'Mist Lastms', value: mistInfo?.lastms != null ? String(mistInfo.lastms) : '—' },
-      { label: 'Mist Unixoffset', value: mistInfo?.unixoffset != null ? String(mistInfo.unixoffset) : '—' },
+      { label: "Mist Lastms", value: mistInfo?.lastms != null ? String(mistInfo.lastms) : "—" },
+      {
+        label: "Mist Unixoffset",
+        value: mistInfo?.unixoffset != null ? String(mistInfo.unixoffset) : "—",
+      }
     );
 
     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')}` });
+      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` });
+      result.push({ label: "Size", value: `${mb} MB` });
     }
 
     return result;
@@ -133,19 +147,17 @@
 {#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'
+      "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>
+      <span class="text-white/70 text-[10px] uppercase tracking-wider"> Stats Overlay </span>
       <Button
         type="button"
         variant="ghost"
@@ -153,7 +165,14 @@
         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">
+        <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>

package/dist/StatsPanel.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ContentMetadata, type PlaybackQuality, type StreamState } from '@livepeer-frameworks/player-core';
+import { type ContentMetadata, type PlaybackQuality, type StreamState } from "@livepeer-frameworks/player-core";
 interface Props {
     isOpen: boolean;
     onClose: () => void;