@livepeer-frameworks/player-svelte 0.1.1 → 0.1.2

package/dist/ui/context-menu/ContextMenuSubContent.svelte

@@ -2,11 +2,7 @@
   import { ContextMenu } from "bits-ui";
   import { cn } from "@livepeer-frameworks/player-core";
 
-  let {
-    children,
-    class: className,
-    ...rest
-  }: { children?: any; class?: string } = $props();
+  let { children, class: className, ...rest }: { children?: any; class?: string } = $props();
 </script>
 
 <ContextMenu.SubContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-svelte",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "description": "Svelte 5 components for FrameWorks streaming player",
   "svelte": "./dist/index.js",
@@ -13,6 +13,7 @@
   ],
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "svelte": "./dist/index.js",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
@@ -22,22 +23,29 @@
   "scripts": {
     "build": "svelte-package -i src -o dist",
     "build:watch": "svelte-package -i src -o dist --watch",
-    "type-check": "svelte-check"
+    "type-check": "svelte-check",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@livepeer-frameworks/player-core": "workspace:*",
-    "bits-ui": "^2.14.4"
+    "bits-ui": "^2.15.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "svelte": "^5.33.5",
-    "svelte-check": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@testing-library/svelte": "^5.2.7",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^28.0.0",
+    "svelte": "^5.50.0",
+    "svelte-check": "^4.3.6",
     "typescript": "^5.9.2",
-    "vite": "^5.4.0"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "svelte",

package/src/DevModePanel.svelte

@@ -385,6 +385,7 @@
               {#if shouldShow}
                 <div
                   class="fw-dev-combo"
+                  role="listitem"
                   onmouseenter={(e) => handleComboHover(index, e)}
                   onmouseleave={() => (hoveredComboIndex = null)}
                 >

package/src/Icons.svelte

@@ -10,7 +10,7 @@
   <PlayIcon size={24} />
   <VolumeIcon isMuted={false} />
 -->
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface IconProps {
     size?: number;
     color?: string;
@@ -19,9 +19,11 @@
 </script>
 
 <script lang="ts">
-  // This file exports components via context="module" script
+  import type { Snippet } from "svelte";
+  // This file exports components via module script
   // The default export is a placeholder - use the named exports
+  let { children }: { children?: Snippet } = $props();
 </script>
 
 <!-- This component itself is not rendered - use the exported icon components below -->
-<slot />
+{@render children?.()}

package/src/IdleScreen.svelte

@@ -387,7 +387,7 @@
         animation-duration: {particle.duration}s;
         animation-delay: {particle.delay}s;
       "
-    />
+    ></div>
   {/each}
 
   <!-- Animated bubbles -->
@@ -402,7 +402,7 @@
         background: {bubble.color};
         opacity: {bubble.opacity};
       "
-    />
+    ></div>
   {/each}
 
   <!-- Center logo with push-away effect -->
@@ -415,18 +415,19 @@
       class="logo-pulse"
       class:hovered={isHovered}
       style="width: {logoSize * 1.4}px; height: {logoSize * 1.4}px;"
-    />
+    ></div>
 
     <!-- Logo image -->
-    <img
-      src={logomarkAsset}
-      alt="Logo"
-      class="logo-image"
-      class:hovered={isHovered}
-      style="width: {logoSize}px; height: {logoSize}px;"
-      onclick={handleLogoClick}
-      draggable="false"
-    />
+    <button type="button" class="logo-button" onclick={handleLogoClick} aria-label="Logo">
+      <img
+        src={logomarkAsset}
+        alt=""
+        class="logo-image"
+        class:hovered={isHovered}
+        style="width: {logoSize}px; height: {logoSize}px;"
+        draggable="false"
+      />
+    </button>
   </div>
 
   <!-- Bouncing DVD Logo -->
@@ -515,7 +516,7 @@
     <!-- Progress bar -->
     {#if showProgress}
       <div class="progress-bar">
-        <div class="progress-fill" style="width: {Math.min(100, percentage ?? 0)}%;" />
+        <div class="progress-fill" style="width: {Math.min(100, percentage ?? 0)};"></div>
       </div>
     {/if}
 
@@ -526,7 +527,7 @@
   </div>
 
   <!-- Subtle overlay texture -->
-  <div class="overlay-texture" />
+  <div class="overlay-texture"></div>
 </div>
 
 <style>
@@ -686,6 +687,12 @@
     transform: scale(1.2);
   }
 
+  .logo-button {
+    all: unset;
+    cursor: pointer;
+    display: block;
+  }
+
   .logo-image {
     position: relative;
     z-index: 1;

package/src/LoadingScreen.svelte

@@ -387,7 +387,7 @@
         animation-duration: {particle.duration}s;
         animation-delay: {particle.delay}s;
       "
-    />
+    ></div>
   {/each}
 
   <!-- Animated bubbles -->
@@ -402,7 +402,7 @@
         background: {bubble.color};
         opacity: {bubble.opacity};
       "
-    />
+    ></div>
   {/each}
 
   <!-- Center logo with push-away effect -->
@@ -415,18 +415,19 @@
       class="logo-pulse"
       class:hovered={isHovered}
       style="width: {logoSize * 1.4}px; height: {logoSize * 1.4}px;"
-    />
+    ></div>
 
     <!-- Logo image -->
-    <img
-      src={effectiveLogoSrc}
-      alt="Logo"
-      class="logo-image"
-      class:hovered={isHovered}
-      style="width: {logoSize}px; height: {logoSize}px;"
-      onclick={handleLogoClick}
-      draggable="false"
-    />
+    <button type="button" class="logo-button" onclick={handleLogoClick} aria-label="Logo">
+      <img
+        src={effectiveLogoSrc}
+        alt=""
+        class="logo-image"
+        class:hovered={isHovered}
+        style="width: {logoSize}px; height: {logoSize}px;"
+        draggable="false"
+      />
+    </button>
   </div>
 
   <!-- Bouncing DVD Logo -->
@@ -438,7 +439,7 @@
   </div>
 
   <!-- Subtle overlay texture -->
-  <div class="overlay-texture" />
+  <div class="overlay-texture"></div>
 </div>
 
 <style>
@@ -605,6 +606,12 @@
     transform: scale(1.2);
   }
 
+  .logo-button {
+    all: unset;
+    cursor: pointer;
+    display: block;
+  }
+
   .logo-image {
     position: relative;
     z-index: 1;

package/src/Player.svelte

@@ -80,7 +80,12 @@
   let skipDirection: SkipDirection = $state(null);
 
   // Playback mode preference (persistent)
-  let devPlaybackMode: PlaybackMode = $state(options?.playbackMode || "auto");
+  let devPlaybackMode: PlaybackMode = $state("auto");
+  $effect(() => {
+    if (options?.playbackMode) {
+      devPlaybackMode = options.playbackMode;
+    }
+  });
 
   // Container ref
   let containerRef: HTMLElement | undefined = $state();
@@ -119,6 +124,7 @@
     currentSourceInfo: null as { url: string; type: string } | null,
     playbackQuality: null as any,
     subtitlesEnabled: false,
+    toast: null as { message: string; timestamp: number } | null,
   });
 
   // Track if we've already attached to prevent double-attach race
@@ -197,6 +203,15 @@
     }
   });
 
+  // Auto-dismiss toast after 3 seconds
+  $effect(() => {
+    if (!storeState.toast) return;
+    const timer = setTimeout(() => {
+      playerStore?.dismissToast();
+    }, 3000);
+    return () => clearTimeout(timer);
+  });
+
   // ============================================================================
   // Dev Mode Callbacks
   // ============================================================================
@@ -277,7 +292,8 @@
           options?.devMode && "flex"
         )}
         data-player-container="true"
-        tabindex="0"
+        role="region"
+        aria-label="Video player"
         onmouseenter={() => playerStore?.handleMouseEnter()}
         onmouseleave={() => playerStore?.handleMouseLeave()}
         onmousemove={() => playerStore?.handleMouseMove()}
@@ -461,6 +477,36 @@
             </div>
           {/if}
 
+          <!-- Toast notification -->
+          {#if storeState.toast}
+            <div
+              class="absolute bottom-20 left-1/2 -translate-x-1/2 z-30 animate-in fade-in slide-in-from-bottom-2 duration-200"
+              role="status"
+              aria-live="polite"
+            >
+              <div
+                class="flex items-center gap-2 rounded-lg border border-white/10 bg-black/80 px-4 py-2 text-sm text-white shadow-lg backdrop-blur-sm"
+              >
+                <span>{storeState.toast.message}</span>
+                <button
+                  type="button"
+                  onclick={() => playerStore?.dismissToast()}
+                  class="ml-2 text-white/60 hover:text-white"
+                  aria-label="Dismiss"
+                >
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                    <path
+                      d="M9 3L3 9M3 3L9 9"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          {/if}
+
           <!-- Player controls -->
           {#if !useStockControls}
             <PlayerControls

package/src/PlayerControls.svelte

@@ -161,6 +161,7 @@
   let isVolumeHovered = $state(false);
   let isVolumeFocused = $state(false);
   let isVolumeExpanded = $derived(isVolumeHovered || isVolumeFocused);
+  let volumeGroupRef: HTMLDivElement | null = $state(null);
 
   // Derived values - using centralized core utilities
   let isLive = $derived(isLiveContent(isContentLive, mistStreamInfo, duration));
@@ -207,12 +208,13 @@
     return null;
   }
 
-  const allowMediaStreamDvr =
+  let allowMediaStreamDvr = $derived(
     isMediaStreamSource(video) &&
-    bufferWindowMs !== undefined &&
-    bufferWindowMs > 0 &&
-    sourceType !== "whep" &&
-    sourceType !== "webrtc";
+      bufferWindowMs !== undefined &&
+      bufferWindowMs > 0 &&
+      sourceType !== "whep" &&
+      sourceType !== "webrtc"
+  );
 
   // Seekable range using core calculation (allow player override)
   let seekableRange = $derived.by(
@@ -387,9 +389,9 @@
   function handleMute() {
     if (disabled) return;
     const player = globalPlayerManager.getCurrentPlayer();
-    if (player?.toggleMute) {
-      // Use core controller which handles volume restore
-      player.toggleMute();
+    if (player?.setMuted) {
+      const currentlyMuted = player.isMuted?.() ?? video?.muted ?? false;
+      player.setMuted(!currentlyMuted);
     } else {
       // Fallback: direct video manipulation
       const v = video;
@@ -467,6 +469,19 @@
     showSettingsMenu = false;
   }
 
+  // Non-passive wheel listener for volume control
+  $effect(() => {
+    if (!volumeGroupRef) return;
+    const handler = (e: WheelEvent) => {
+      if (disabled || !hasAudio) return;
+      e.preventDefault();
+      const delta = e.deltaY < 0 ? 5 : -5;
+      handleVolumeChange(volumeValue + delta);
+    };
+    volumeGroupRef.addEventListener("wheel", handler, { passive: false });
+    return () => volumeGroupRef?.removeEventListener("wheel", handler);
+  });
+
   // Close menu when clicking outside - with debounce to prevent immediate close from same click
   $effect(() => {
     if (!showSettingsMenu) return;
@@ -497,7 +512,14 @@
   )}
 >
   <!-- Control bar -->
-  <div class="fw-control-bar pointer-events-auto" onclick={(e) => e.stopPropagation()}>
+  <div
+    class="fw-control-bar pointer-events-auto"
+    role="toolbar"
+    aria-label="Media controls"
+    tabindex="-1"
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
+  >
     <!-- Seek bar -->
     {#if canSeek}
       <div class="fw-seek-wrapper">
@@ -563,26 +585,23 @@
 
         <!-- Volume -->
         <div
+          bind:this={volumeGroupRef}
           class={cn(
             "fw-volume-group",
             isVolumeExpanded && "fw-volume-group--expanded",
             !hasAudio && "fw-volume-group--disabled"
           )}
+          role="group"
+          aria-label="Volume controls"
           onmouseenter={() => hasAudio && (isVolumeHovered = true)}
           onmouseleave={() => {
             isVolumeHovered = false;
             isVolumeFocused = false;
           }}
-          onfocuscapture={() => hasAudio && (isVolumeFocused = true)}
-          onblurcapture={(e) => {
+          onfocusin={() => hasAudio && (isVolumeFocused = true)}
+          onfocusout={(e) => {
             if (!e.currentTarget.contains(e.relatedTarget as Node)) isVolumeFocused = false;
           }}
-          onclick={(e) => {
-            if (disabled) return;
-            if (hasAudio && e.target === e.currentTarget) {
-              handleMute();
-            }
-          }}
         >
           <button
             type="button"

package/src/SeekBar.svelte

@@ -214,6 +214,38 @@
   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
@@ -231,6 +263,7 @@
   onmousemove={handleMouseMove}
   onclick={handleClick}
   onmousedown={handleMouseDown}
+  onkeydown={handleKeyDown}
   role="slider"
   aria-label="Seek"
   aria-valuemin={isLive ? seekableStart : 0}

package/src/StreamStateOverlay.svelte

@@ -129,7 +129,7 @@
         {#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 class="progress-fill" style="width: {Math.min(100, percentage)};"></div>
             </div>
             <p
               style="margin-top: 0.375rem; font-size: 0.75rem; font-family: monospace; color: hsl(var(--tn-fg-dark, 233 23% 60%));"
@@ -158,7 +158,7 @@
         <!-- Polling indicator for non-error states -->
         {#if !showRetry}
           <div class="polling-indicator">
-            <span class="polling-dot" />
+            <span class="polling-dot"></span>
             <span>Checking stream status...</span>
           </div>
         {/if}

package/src/stores/playerController.ts

@@ -12,6 +12,7 @@ import {
   type PlaybackQuality,
   type ContentEndpoints,
   type ContentMetadata,
+  type ClassifiedError,
 } from "@livepeer-frameworks/player-core";
 
 // ============================================================================
@@ -50,6 +51,8 @@ export interface PlayerControllerState {
   volume: number;
   /** Error text */
   error: string | null;
+  /** Error details for debugging */
+  errorDetails: ClassifiedError["details"] | null;
   /** Is passive error */
   isPassiveError: boolean;
   /** Has playback ever started */
@@ -80,6 +83,8 @@ export interface PlayerControllerState {
   playbackQuality: PlaybackQuality | null;
   /** Subtitles enabled */
   subtitlesEnabled: boolean;
+  /** Toast message to display (auto-dismisses) */
+  toast: { message: string; timestamp: number } | null;
 }
 
 export interface PlayerControllerStore extends Readable<PlayerControllerState> {
@@ -115,6 +120,8 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
   toggleSubtitles: () => void;
   /** Clear error */
   clearError: () => void;
+  /** Dismiss toast notification */
+  dismissToast: () => void;
   /** Retry playback */
   retry: () => Promise<void>;
   /** Reload player */
@@ -158,6 +165,7 @@ const initialState: PlayerControllerState = {
   isMuted: true,
   volume: 1,
   error: null,
+  errorDetails: null,
   isPassiveError: false,
   hasPlaybackStarted: false,
   isHoldingSpeed: false,
@@ -173,6 +181,7 @@ const initialState: PlayerControllerState = {
   currentSourceInfo: null,
   playbackQuality: null,
   subtitlesEnabled: false,
+  toast: null,
 };
 
 // ============================================================================
@@ -401,6 +410,25 @@ export function createPlayerControllerStore(
       })
     );
 
+    // Error handling events - show toasts/modals
+    unsubscribers.push(
+      controller.on("protocolSwapped", (data) => {
+        const message = `Switched to ${data.toProtocol}`;
+        store.update((prev) => ({ ...prev, toast: { message, timestamp: Date.now() } }));
+      })
+    );
+
+    unsubscribers.push(
+      controller.on("playbackFailed", (data) => {
+        store.update((prev) => ({
+          ...prev,
+          error: data.message,
+          errorDetails: data.details ?? null,
+          isPassiveError: false,
+        }));
+      })
+    );
+
     // Set initial loop state
     store.update((prev) => ({
       ...prev,
@@ -483,7 +511,16 @@ export function createPlayerControllerStore(
 
   function clearError(): void {
     controller?.clearError();
-    store.update((prev) => ({ ...prev, error: null, isPassiveError: false }));
+    store.update((prev) => ({
+      ...prev,
+      error: null,
+      errorDetails: null,
+      isPassiveError: false,
+    }));
+  }
+
+  function dismissToast(): void {
+    store.update((prev) => ({ ...prev, toast: null }));
   }
 
   async function retry(): Promise<void> {
@@ -549,6 +586,7 @@ export function createPlayerControllerStore(
     togglePiP,
     toggleSubtitles,
     clearError,
+    dismissToast,
     retry,
     reload,
     getQualities,

package/src/stores/viewerEndpoints.ts

@@ -151,7 +151,7 @@ export function createEndpointResolver(options: ViewerEndpointsOptions): ViewerE
         } catch {}
       }
       if (fallbacks) {
-        fallbacks.forEach((fb: any) => {
+        fallbacks.forEach((fb: typeof primary) => {
           if (fb.outputs && typeof fb.outputs === "string") {
             try {
               fb.outputs = JSON.parse(fb.outputs);

package/src/ui/Badge.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import { cn } from "@livepeer-frameworks/player-core";
   import { badgeVariants, type BadgeVariant } from "./badge";
 
-  type $$Props = {
+  type Props = {
     variant?: BadgeVariant;
     class?: string;
-  } & Record<string, any>;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
 
-  let { variant = "default", class: className = "", ...rest }: $$Props = $props();
+  let { variant = "default", class: className = "", children, ...rest }: Props = $props();
 
   let mergedClasses = $derived(cn(badgeVariants(variant, className)));
 </script>
 
 <div class={mergedClasses} {...rest}>
-  <slot />
+  {@render children?.()}
 </div>