@livepeer-frameworks/player-svelte 0.1.1 → 0.1.2

package/dist/Player.svelte

@@ -3,15 +3,15 @@
   Thin wrapper over PlayerController from @livepeer-frameworks/player-core
 -->
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import IdleScreen from './IdleScreen.svelte';
-  import SubtitleRenderer from './SubtitleRenderer.svelte';
-  import PlayerControls from './PlayerControls.svelte';
-  import SpeedIndicator from './SpeedIndicator.svelte';
-  import SkipIndicator from './SkipIndicator.svelte';
-  import TitleOverlay from './TitleOverlay.svelte';
-  import StatsPanel from './StatsPanel.svelte';
-  import DevModePanel from './DevModePanel.svelte';
+  import { onMount } from "svelte";
+  import IdleScreen from "./IdleScreen.svelte";
+  import SubtitleRenderer from "./SubtitleRenderer.svelte";
+  import PlayerControls from "./PlayerControls.svelte";
+  import SpeedIndicator from "./SpeedIndicator.svelte";
+  import SkipIndicator from "./SkipIndicator.svelte";
+  import TitleOverlay from "./TitleOverlay.svelte";
+  import StatsPanel from "./StatsPanel.svelte";
+  import DevModePanel from "./DevModePanel.svelte";
   import {
     ContextMenu,
     ContextMenuTrigger,
@@ -19,11 +19,23 @@
     ContextMenuContent,
     ContextMenuItem,
     ContextMenuSeparator,
-  } from './ui/context-menu';
-  import { StatsIcon, SettingsIcon, PictureInPictureIcon } from './icons';
-  import { cn, type PlaybackMode, type ContentEndpoints, type PlayerState, type PlayerStateContext, type ContentType, type EndpointInfo, type PlayerMetadata } from '@livepeer-frameworks/player-core';
-  import { createPlayerControllerStore, type PlayerControllerStore } from './stores/playerController';
-  import type { SkipDirection } from './SkipIndicator.svelte';
+  } from "./ui/context-menu";
+  import { StatsIcon, SettingsIcon, PictureInPictureIcon } from "./icons";
+  import {
+    cn,
+    type PlaybackMode,
+    type ContentEndpoints,
+    type PlayerState,
+    type PlayerStateContext,
+    type ContentType,
+    type EndpointInfo,
+    type PlayerMetadata,
+  } from "@livepeer-frameworks/player-core";
+  import {
+    createPlayerControllerStore,
+    type PlayerControllerStore,
+  } from "./stores/playerController";
+  import type { SkipDirection } from "./SkipIndicator.svelte";
 
   // Props - aligned with React Player
   interface Props {
@@ -68,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();
@@ -79,7 +96,7 @@
   // ============================================================================
   let playerStore: PlayerControllerStore | null = $state(null);
   let storeState = $state({
-    state: 'booting' as PlayerState,
+    state: "booting" as PlayerState,
     streamState: null as any,
     endpoints: null as any,
     metadata: null as any,
@@ -107,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
@@ -123,7 +141,7 @@
   onMount(() => {
     debug(`onMount - contentId: ${contentId}, contentType: ${contentType}`);
     debug(`onMount - gatewayUrl: ${options?.gatewayUrl}, mistUrl: ${options?.mistUrl}`);
-    debug(`onMount - endpoints: ${endpoints ? 'provided' : 'not provided'}`);
+    debug(`onMount - endpoints: ${endpoints ? "provided" : "not provided"}`);
 
     playerStore = createPlayerControllerStore({
       contentId,
@@ -139,11 +157,11 @@
       debug: options?.debug,
     });
 
-    debug('playerStore created');
+    debug("playerStore created");
 
     // Subscribe to store state
     let prevMetadata: PlayerMetadata | null = null;
-    const unsubscribe = playerStore.subscribe(state => {
+    const unsubscribe = playerStore.subscribe((state) => {
       storeState = state;
       // Forward state changes to prop callback
       if (onStateChange && state.state) {
@@ -157,7 +175,7 @@
     });
 
     return () => {
-      debug('cleanup - destroying playerStore');
+      debug("cleanup - destroying playerStore");
       unsubscribe();
       playerStore?.destroy();
       playerStore = null;
@@ -167,23 +185,41 @@
 
   // Attach when container becomes available (only once)
   $effect(() => {
-    debug(`$effect - containerRef: ${!!containerRef}, playerStore: ${!!playerStore}, hasAttached: ${hasAttached}`);
+    debug(
+      `$effect - containerRef: ${!!containerRef}, playerStore: ${!!playerStore}, hasAttached: ${hasAttached}`
+    );
     if (containerRef && playerStore && !hasAttached) {
       hasAttached = true;
-      debug('attaching to container');
-      playerStore.attach(containerRef).then(() => {
-        debug('attach completed');
-      }).catch((err) => {
-        debug(`attach failed: ${err}`);
-        console.error('[Player.svelte] attach failed:', err);
-      });
+      debug("attaching to container");
+      playerStore
+        .attach(containerRef)
+        .then(() => {
+          debug("attach completed");
+        })
+        .catch((err) => {
+          debug(`attach failed: ${err}`);
+          console.error("[Player.svelte] attach failed:", err);
+        });
     }
   });
 
+  // Auto-dismiss toast after 3 seconds
+  $effect(() => {
+    if (!storeState.toast) return;
+    const timer = setTimeout(() => {
+      playerStore?.dismissToast();
+    }, 3000);
+    return () => clearTimeout(timer);
+  });
+
   // ============================================================================
   // Dev Mode Callbacks
   // ============================================================================
-  function handleDevSettingsChange(settings: { forcePlayer?: string; forceType?: string; forceSource?: number }) {
+  function handleDevSettingsChange(settings: {
+    forcePlayer?: string;
+    forceType?: string;
+    forceSource?: number;
+  }) {
     // One-shot selection - controller handles the state
     playerStore?.setDevModeOptions({
       forcePlayer: settings.forcePlayer,
@@ -211,56 +247,59 @@
   // Derived Values
   // ============================================================================
   let primaryEndpoint = $derived(storeState.endpoints?.primary as EndpointInfo | undefined);
-  let isLegacyPlayer = $derived(storeState.currentPlayerInfo?.shortname === 'mist-legacy');
+  let isLegacyPlayer = $derived(storeState.currentPlayerInfo?.shortname === "mist-legacy");
   let useStockControls = $derived(options?.stockControls === true || isLegacyPlayer);
   let metadata = $derived(storeState.metadata);
 
   // Title overlay visibility: show on hover or when paused
   let showTitleOverlay = $derived(
     (storeState.isHovering || storeState.isPaused) &&
-    !storeState.shouldShowIdleScreen &&
-    !storeState.isBuffering &&
-    !storeState.error
+      !storeState.shouldShowIdleScreen &&
+      !storeState.isBuffering &&
+      !storeState.error
   );
 
   // Buffering spinner: only during active playback
   let showBufferingSpinner = $derived(
     !storeState.shouldShowIdleScreen &&
-    storeState.isBuffering &&
-    !storeState.error &&
-    storeState.hasPlaybackStarted
+      storeState.isBuffering &&
+      !storeState.error &&
+      storeState.hasPlaybackStarted
   );
 
   // Waiting for endpoint (shown as overlay, not early return)
   let showWaitingForEndpoint = $derived(
-    !storeState.endpoints?.primary && storeState.state !== 'booting'
+    !storeState.endpoints?.primary && storeState.state !== "booting"
   );
 
   let waitingMessage = $derived(
     options?.gatewayUrl
-      ? (storeState.state === 'gateway_loading' ? 'Resolving viewing endpoint...' : 'Waiting for endpoint...')
-      : 'Waiting for endpoint...'
+      ? storeState.state === "gateway_loading"
+        ? "Resolving viewing endpoint..."
+        : "Waiting for endpoint..."
+      : "Waiting for endpoint..."
   );
 </script>
 
 <ContextMenu>
-    <ContextMenuTrigger>
-      {#snippet child({ props })}
+  <ContextMenuTrigger>
+    {#snippet child({ props })}
       <div
         bind:this={playerRootRef}
         {...props}
         class={cn(
-          'fw-player-surface fw-player-root relative w-full h-full bg-black',
-          options?.devMode && 'flex'
+          "fw-player-surface fw-player-root relative w-full h-full bg-black",
+          options?.devMode && "flex"
         )}
         data-player-container="true"
-        tabindex="0"
+        role="region"
+        aria-label="Video player"
         onmouseenter={() => playerStore?.handleMouseEnter()}
         onmouseleave={() => playerStore?.handleMouseLeave()}
         onmousemove={() => playerStore?.handleMouseMove()}
       >
         <!-- Player area -->
-        <div class={cn('relative', options?.devMode ? 'flex-1 min-w-0 h-full' : 'w-full h-full')}>
+        <div class={cn("relative", options?.devMode ? "flex-1 min-w-0 h-full" : "w-full h-full")}>
           <!-- Video container - PlayerController attaches here -->
           <div bind:this={containerRef} class="fw-player-container w-full h-full"></div>
 
@@ -282,7 +321,7 @@
           <!-- Stats panel -->
           <StatsPanel
             isOpen={isStatsOpen}
-            onClose={() => isStatsOpen = false}
+            onClose={() => (isStatsOpen = false)}
             {metadata}
             streamState={storeState.streamState}
             quality={storeState.playbackQuality}
@@ -299,10 +338,17 @@
               playbackMode={devPlaybackMode}
               onModeChange={handleModeChange}
               onReload={handleReload}
-              streamInfo={storeState.currentSourceInfo ? {
-                source: [{ url: storeState.currentSourceInfo.url, type: storeState.currentSourceInfo.type }],
-                meta: { tracks: [] }
-              } : null}
+              streamInfo={storeState.currentSourceInfo
+                ? {
+                    source: [
+                      {
+                        url: storeState.currentSourceInfo.url,
+                        type: storeState.currentSourceInfo.type,
+                      },
+                    ],
+                    meta: { tracks: [] },
+                  }
+                : null}
               mistStreamInfo={storeState.streamState?.streamInfo}
               currentPlayer={storeState.currentPlayerInfo}
               currentSource={storeState.currentSourceInfo}
@@ -311,7 +357,7 @@
               nodeId={primaryEndpoint?.nodeId}
               isVisible={storeState.isHovering || storeState.isPaused}
               isOpen={false}
-              onOpenChange={(open) => isDevPanelOpen = open}
+              onOpenChange={(open) => (isDevPanelOpen = open)}
             />
           {/if}
 
@@ -332,16 +378,26 @@
           {#if !showWaitingForEndpoint && storeState.shouldShowIdleScreen}
             <IdleScreen
               status={storeState.isEffectivelyLive ? storeState.streamState?.status : undefined}
-              message={storeState.isEffectivelyLive ? storeState.streamState?.message : 'Loading video...'}
-              percentage={storeState.isEffectivelyLive ? storeState.streamState?.percentage : undefined}
+              message={storeState.isEffectivelyLive
+                ? storeState.streamState?.message
+                : "Loading video..."}
+              percentage={storeState.isEffectivelyLive
+                ? storeState.streamState?.percentage
+                : undefined}
             />
           {/if}
 
           <!-- Buffering spinner -->
           {#if showBufferingSpinner}
-            <div class="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-20">
-              <div class="flex items-center gap-3 rounded-lg border border-white/10 bg-black/70 px-4 py-3 text-sm text-white shadow-lg">
-                <div class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-20"
+            >
+              <div
+                class="flex items-center gap-3 rounded-lg border border-white/10 bg-black/70 px-4 py-3 text-sm text-white shadow-lg"
+              >
+                <div
+                  class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"
+                ></div>
                 <span>Buffering...</span>
               </div>
             </div>
@@ -353,23 +409,37 @@
               role="alert"
               aria-live="assertive"
               class={cn(
-                'fw-error-overlay',
-                storeState.isPassiveError ? 'fw-error-overlay--passive' : 'fw-error-overlay--fullscreen'
+                "fw-error-overlay",
+                storeState.isPassiveError
+                  ? "fw-error-overlay--passive"
+                  : "fw-error-overlay--fullscreen"
               )}
             >
-              <div class={cn(
-                'fw-error-popup',
-                storeState.isPassiveError ? 'fw-error-popup--passive' : 'fw-error-popup--fullscreen'
-              )}>
-                <div class={cn(
-                  'fw-error-header',
-                  storeState.isPassiveError ? 'fw-error-header--warning' : 'fw-error-header--error'
-                )}>
-                  <span class={cn(
-                    'fw-error-title',
-                    storeState.isPassiveError ? 'fw-error-title--warning' : 'fw-error-title--error'
-                  )}>
-                    {storeState.isPassiveError ? 'Warning' : 'Error'}
+              <div
+                class={cn(
+                  "fw-error-popup",
+                  storeState.isPassiveError
+                    ? "fw-error-popup--passive"
+                    : "fw-error-popup--fullscreen"
+                )}
+              >
+                <div
+                  class={cn(
+                    "fw-error-header",
+                    storeState.isPassiveError
+                      ? "fw-error-header--warning"
+                      : "fw-error-header--error"
+                  )}
+                >
+                  <span
+                    class={cn(
+                      "fw-error-title",
+                      storeState.isPassiveError
+                        ? "fw-error-title--warning"
+                        : "fw-error-title--error"
+                    )}
+                  >
+                    {storeState.isPassiveError ? "Warning" : "Error"}
                   </span>
                   <button
                     type="button"
@@ -378,7 +448,12 @@
                     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"/>
+                      <path
+                        d="M9 3L3 9M3 3L9 9"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
                     </svg>
                   </button>
                 </div>
@@ -389,7 +464,10 @@
                   <button
                     type="button"
                     class="fw-error-btn"
-                    onclick={() => { playerStore?.clearError(); playerStore?.retry(); }}
+                    onclick={() => {
+                      playerStore?.clearError();
+                      playerStore?.retry();
+                    }}
                     aria-label="Retry playback"
                   >
                     Retry
@@ -399,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
@@ -412,8 +520,8 @@
               onModeChange={handleModeChange}
               mistStreamInfo={storeState.streamState?.streamInfo}
               showStatsButton={false}
-              isStatsOpen={isStatsOpen}
-              onStatsToggle={() => isStatsOpen = !isStatsOpen}
+              {isStatsOpen}
+              onStatsToggle={() => (isStatsOpen = !isStatsOpen)}
               isContentLive={storeState.isEffectivelyLive}
               onJumpToLive={() => playerStore?.getController()?.jumpToLive()}
             />
@@ -427,10 +535,17 @@
             playbackMode={devPlaybackMode}
             onModeChange={handleModeChange}
             onReload={handleReload}
-            streamInfo={storeState.currentSourceInfo ? {
-              source: [{ url: storeState.currentSourceInfo.url, type: storeState.currentSourceInfo.type }],
-              meta: { tracks: [] }
-            } : null}
+            streamInfo={storeState.currentSourceInfo
+              ? {
+                  source: [
+                    {
+                      url: storeState.currentSourceInfo.url,
+                      type: storeState.currentSourceInfo.type,
+                    },
+                  ],
+                  meta: { tracks: [] },
+                }
+              : null}
             mistStreamInfo={storeState.streamState?.streamInfo}
             currentPlayer={storeState.currentPlayerInfo}
             currentSource={storeState.currentSourceInfo}
@@ -439,40 +554,58 @@
             nodeId={primaryEndpoint?.nodeId}
             isVisible={true}
             isOpen={true}
-            onOpenChange={(open) => isDevPanelOpen = open}
+            onOpenChange={(open) => (isDevPanelOpen = open)}
           />
         {/if}
       </div>
-      {/snippet}
-    </ContextMenuTrigger>
-
-    <ContextMenuPortal>
-      <ContextMenuContent>
-        <ContextMenuItem onSelect={() => { isStatsOpen = !isStatsOpen; }}>
-          <StatsIcon size={14} class="opacity-70 flex-shrink-0 mr-2" />
-          {isStatsOpen ? 'Hide Stats' : 'Stats'}
-        </ContextMenuItem>
-        {#if options?.devMode}
-          <ContextMenuSeparator />
-          <ContextMenuItem onSelect={() => { isDevPanelOpen = !isDevPanelOpen; }}>
-            <SettingsIcon size={14} class="opacity-70 flex-shrink-0 mr-2" />
-            {isDevPanelOpen ? 'Hide Settings' : 'Settings'}
-          </ContextMenuItem>
-        {/if}
+    {/snippet}
+  </ContextMenuTrigger>
+
+  <ContextMenuPortal>
+    <ContextMenuContent>
+      <ContextMenuItem
+        onSelect={() => {
+          isStatsOpen = !isStatsOpen;
+        }}
+      >
+        <StatsIcon size={14} class="opacity-70 flex-shrink-0 mr-2" />
+        {isStatsOpen ? "Hide Stats" : "Stats"}
+      </ContextMenuItem>
+      {#if options?.devMode}
         <ContextMenuSeparator />
-        <ContextMenuItem onSelect={() => playerStore?.togglePiP()}>
-          <PictureInPictureIcon size={14} class="opacity-70 flex-shrink-0 mr-2" />
-          Picture-in-Picture
-        </ContextMenuItem>
-        <ContextMenuItem onSelect={() => playerStore?.toggleLoop()}>
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70 flex-shrink-0 mr-2">
-            <polyline points="17 1 21 5 17 9"></polyline>
-            <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
-            <polyline points="7 23 3 19 7 15"></polyline>
-            <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
-          </svg>
-          {storeState.isLoopEnabled ? 'Disable Loop' : 'Enable Loop'}
+        <ContextMenuItem
+          onSelect={() => {
+            isDevPanelOpen = !isDevPanelOpen;
+          }}
+        >
+          <SettingsIcon size={14} class="opacity-70 flex-shrink-0 mr-2" />
+          {isDevPanelOpen ? "Hide Settings" : "Settings"}
         </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenuPortal>
-  </ContextMenu>
+      {/if}
+      <ContextMenuSeparator />
+      <ContextMenuItem onSelect={() => playerStore?.togglePiP()}>
+        <PictureInPictureIcon size={14} class="opacity-70 flex-shrink-0 mr-2" />
+        Picture-in-Picture
+      </ContextMenuItem>
+      <ContextMenuItem onSelect={() => playerStore?.toggleLoop()}>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="opacity-70 flex-shrink-0 mr-2"
+        >
+          <polyline points="17 1 21 5 17 9"></polyline>
+          <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+          <polyline points="7 23 3 19 7 15"></polyline>
+          <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+        </svg>
+        {storeState.isLoopEnabled ? "Disable Loop" : "Enable Loop"}
+      </ContextMenuItem>
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</ContextMenu>

package/dist/Player.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PlaybackMode, type ContentEndpoints, type PlayerState, type PlayerStateContext, type ContentType, type PlayerMetadata } from '@livepeer-frameworks/player-core';
+import { type PlaybackMode, type ContentEndpoints, type PlayerState, type PlayerStateContext, type ContentType, type PlayerMetadata } from "@livepeer-frameworks/player-core";
 interface Props {
     contentId: string;
     contentType?: ContentType;