@livepeer-frameworks/player-svelte 0.1.1 → 0.1.2

package/dist/stores/playerController.js

@@ -2,13 +2,13 @@
  * Svelte store for PlayerController - wraps the core PlayerController
  * for declarative usage in Svelte 5 components.
  */
-import { writable, derived } from 'svelte/store';
-import { PlayerController, } from '@livepeer-frameworks/player-core';
+import { writable, derived } from "svelte/store";
+import { PlayerController, } from "@livepeer-frameworks/player-core";
 // ============================================================================
 // Initial State
 // ============================================================================
 const initialState = {
-    state: 'booting',
+    state: "booting",
     streamState: null,
     endpoints: null,
     metadata: null,
@@ -21,6 +21,7 @@ const initialState = {
     isMuted: true,
     volume: 1,
     error: null,
+    errorDetails: null,
     isPassiveError: false,
     hasPlaybackStarted: false,
     isHoldingSpeed: false,
@@ -36,6 +37,7 @@ const initialState = {
     currentSourceInfo: null,
     playbackQuality: null,
     subtitlesEnabled: false,
+    toast: null,
 };
 // ============================================================================
 // Store Factory
@@ -85,7 +87,7 @@ export function createPlayerControllerStore(config) {
     function syncState() {
         if (!controller)
             return;
-        store.update(prev => ({
+        store.update((prev) => ({
             ...prev,
             isPlaying: controller.isPlaying(),
             isPaused: controller.isPaused(),
@@ -108,18 +110,18 @@ export function createPlayerControllerStore(config) {
             return;
         // Clean up existing controller
         if (controller) {
-            unsubscribers.forEach(fn => fn());
+            unsubscribers.forEach((fn) => fn());
             unsubscribers = [];
             controller.destroy();
         }
         // Create new controller
         controller = new PlayerController(controllerConfig);
         // Subscribe to events
-        unsubscribers.push(controller.on('stateChange', ({ state }) => {
-            store.update(prev => ({ ...prev, state }));
+        unsubscribers.push(controller.on("stateChange", ({ state }) => {
+            store.update((prev) => ({ ...prev, state }));
         }));
-        unsubscribers.push(controller.on('streamStateChange', ({ state: streamState }) => {
-            store.update(prev => ({
+        unsubscribers.push(controller.on("streamStateChange", ({ state: streamState }) => {
+            store.update((prev) => ({
                 ...prev,
                 streamState,
                 metadata: controller.getMetadata(),
@@ -127,21 +129,21 @@ export function createPlayerControllerStore(config) {
                 shouldShowIdleScreen: controller.shouldShowIdleScreen(),
             }));
         }));
-        unsubscribers.push(controller.on('timeUpdate', ({ currentTime, duration }) => {
-            store.update(prev => ({ ...prev, currentTime, duration }));
+        unsubscribers.push(controller.on("timeUpdate", ({ currentTime, duration }) => {
+            store.update((prev) => ({ ...prev, currentTime, duration }));
         }));
-        unsubscribers.push(controller.on('error', ({ error }) => {
-            store.update(prev => ({
+        unsubscribers.push(controller.on("error", ({ error }) => {
+            store.update((prev) => ({
                 ...prev,
                 error,
                 isPassiveError: controller.isPassiveError(),
             }));
         }));
-        unsubscribers.push(controller.on('errorCleared', () => {
-            store.update(prev => ({ ...prev, error: null, isPassiveError: false }));
+        unsubscribers.push(controller.on("errorCleared", () => {
+            store.update((prev) => ({ ...prev, error: null, isPassiveError: false }));
         }));
-        unsubscribers.push(controller.on('ready', ({ videoElement }) => {
-            store.update(prev => ({
+        unsubscribers.push(controller.on("ready", ({ videoElement }) => {
+            store.update((prev) => ({
                 ...prev,
                 videoElement,
                 endpoints: controller.getEndpoints(),
@@ -158,57 +160,70 @@ export function createPlayerControllerStore(config) {
                     return;
                 syncState();
             };
-            video.addEventListener('play', handleVideoEvent);
-            video.addEventListener('pause', handleVideoEvent);
-            video.addEventListener('waiting', handleVideoEvent);
-            video.addEventListener('playing', handleVideoEvent);
+            video.addEventListener("play", handleVideoEvent);
+            video.addEventListener("pause", handleVideoEvent);
+            video.addEventListener("waiting", handleVideoEvent);
+            video.addEventListener("playing", handleVideoEvent);
             unsubscribers.push(() => {
-                video.removeEventListener('play', handleVideoEvent);
-                video.removeEventListener('pause', handleVideoEvent);
-                video.removeEventListener('waiting', handleVideoEvent);
-                video.removeEventListener('playing', handleVideoEvent);
+                video.removeEventListener("play", handleVideoEvent);
+                video.removeEventListener("pause", handleVideoEvent);
+                video.removeEventListener("waiting", handleVideoEvent);
+                video.removeEventListener("playing", handleVideoEvent);
             });
         }));
-        unsubscribers.push(controller.on('playerSelected', ({ player: _player, source }) => {
-            store.update(prev => ({
+        unsubscribers.push(controller.on("playerSelected", ({ player: _player, source }) => {
+            store.update((prev) => ({
                 ...prev,
                 currentPlayerInfo: controller.getCurrentPlayerInfo(),
                 currentSourceInfo: { url: source.url, type: source.type },
             }));
         }));
-        unsubscribers.push(controller.on('volumeChange', ({ volume, muted }) => {
-            store.update(prev => ({ ...prev, volume, isMuted: muted }));
+        unsubscribers.push(controller.on("volumeChange", ({ volume, muted }) => {
+            store.update((prev) => ({ ...prev, volume, isMuted: muted }));
         }));
-        unsubscribers.push(controller.on('loopChange', ({ isLoopEnabled }) => {
-            store.update(prev => ({ ...prev, isLoopEnabled }));
+        unsubscribers.push(controller.on("loopChange", ({ isLoopEnabled }) => {
+            store.update((prev) => ({ ...prev, isLoopEnabled }));
         }));
-        unsubscribers.push(controller.on('fullscreenChange', ({ isFullscreen }) => {
-            store.update(prev => ({ ...prev, isFullscreen }));
+        unsubscribers.push(controller.on("fullscreenChange", ({ isFullscreen }) => {
+            store.update((prev) => ({ ...prev, isFullscreen }));
         }));
-        unsubscribers.push(controller.on('pipChange', ({ isPiP }) => {
-            store.update(prev => ({ ...prev, isPiPActive: isPiP }));
+        unsubscribers.push(controller.on("pipChange", ({ isPiP }) => {
+            store.update((prev) => ({ ...prev, isPiPActive: isPiP }));
         }));
-        unsubscribers.push(controller.on('holdSpeedStart', ({ speed }) => {
-            store.update(prev => ({ ...prev, isHoldingSpeed: true, holdSpeed: speed }));
+        unsubscribers.push(controller.on("holdSpeedStart", ({ speed }) => {
+            store.update((prev) => ({ ...prev, isHoldingSpeed: true, holdSpeed: speed }));
         }));
-        unsubscribers.push(controller.on('holdSpeedEnd', () => {
-            store.update(prev => ({ ...prev, isHoldingSpeed: false }));
+        unsubscribers.push(controller.on("holdSpeedEnd", () => {
+            store.update((prev) => ({ ...prev, isHoldingSpeed: false }));
         }));
-        unsubscribers.push(controller.on('hoverStart', () => {
-            store.update(prev => ({ ...prev, isHovering: true, shouldShowControls: true }));
+        unsubscribers.push(controller.on("hoverStart", () => {
+            store.update((prev) => ({ ...prev, isHovering: true, shouldShowControls: true }));
         }));
-        unsubscribers.push(controller.on('hoverEnd', () => {
-            store.update(prev => ({
+        unsubscribers.push(controller.on("hoverEnd", () => {
+            store.update((prev) => ({
                 ...prev,
                 isHovering: false,
                 shouldShowControls: controller.shouldShowControls(),
             }));
         }));
-        unsubscribers.push(controller.on('captionsChange', ({ enabled }) => {
-            store.update(prev => ({ ...prev, subtitlesEnabled: enabled }));
+        unsubscribers.push(controller.on("captionsChange", ({ enabled }) => {
+            store.update((prev) => ({ ...prev, subtitlesEnabled: enabled }));
+        }));
+        // 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 => ({
+        store.update((prev) => ({
             ...prev,
             isLoopEnabled: controller.isLoopEnabled(),
         }));
@@ -228,7 +243,7 @@ export function createPlayerControllerStore(config) {
      * Destroy the store and controller
      */
     function destroy() {
-        unsubscribers.forEach(fn => fn());
+        unsubscribers.forEach((fn) => fn());
         unsubscribers = [];
         if (controller) {
             controller.destroy();
@@ -272,7 +287,15 @@ export function createPlayerControllerStore(config) {
     }
     function clearError() {
         controller?.clearError();
-        store.update(prev => ({ ...prev, error: null, isPassiveError: false }));
+        store.update((prev) => ({
+            ...prev,
+            error: null,
+            errorDetails: null,
+            isPassiveError: false,
+        }));
+    }
+    function dismissToast() {
+        store.update((prev) => ({ ...prev, toast: null }));
     }
     async function retry() {
         await controller?.retry();
@@ -322,6 +345,7 @@ export function createPlayerControllerStore(config) {
         togglePiP,
         toggleSubtitles,
         clearError,
+        dismissToast,
         retry,
         reload,
         getQualities,
@@ -337,27 +361,27 @@ export function createPlayerControllerStore(config) {
 // Derived Stores (convenience)
 // ============================================================================
 export function createDerivedState(store) {
-    return derived(store, $state => $state.state);
+    return derived(store, ($state) => $state.state);
 }
 export function createDerivedIsPlaying(store) {
-    return derived(store, $state => $state.isPlaying);
+    return derived(store, ($state) => $state.isPlaying);
 }
 export function createDerivedCurrentTime(store) {
-    return derived(store, $state => $state.currentTime);
+    return derived(store, ($state) => $state.currentTime);
 }
 export function createDerivedDuration(store) {
-    return derived(store, $state => $state.duration);
+    return derived(store, ($state) => $state.duration);
 }
 export function createDerivedError(store) {
-    return derived(store, $state => $state.error);
+    return derived(store, ($state) => $state.error);
 }
 export function createDerivedVideoElement(store) {
-    return derived(store, $state => $state.videoElement);
+    return derived(store, ($state) => $state.videoElement);
 }
 export function createDerivedShouldShowControls(store) {
-    return derived(store, $state => $state.shouldShowControls);
+    return derived(store, ($state) => $state.shouldShowControls);
 }
 export function createDerivedShouldShowIdleScreen(store) {
-    return derived(store, $state => $state.shouldShowIdleScreen);
+    return derived(store, ($state) => $state.shouldShowIdleScreen);
 }
 export default createPlayerControllerStore;

package/dist/stores/playerSelection.d.ts

@@ -4,8 +4,8 @@
  * Subscribes to PlayerManager events for reactive selection updates.
  * Uses event-driven updates instead of polling - no render spam.
  */
-import { type Readable } from 'svelte/store';
-import { type PlayerManager, type PlayerSelection, type PlayerCombination, type StreamInfo, type PlaybackMode } from '@livepeer-frameworks/player-core';
+import { type Readable } from "svelte/store";
+import { type PlayerManager, type PlayerSelection, type PlayerCombination, type StreamInfo, type PlaybackMode } from "@livepeer-frameworks/player-core";
 export interface PlayerSelectionOptions {
     /** Enable debug logging */
     debug?: boolean;

package/dist/stores/playerSelection.js

@@ -4,7 +4,7 @@
  * Subscribes to PlayerManager events for reactive selection updates.
  * Uses event-driven updates instead of polling - no render spam.
  */
-import { writable, derived } from 'svelte/store';
+import { writable, derived } from "svelte/store";
 const initialState = {
     selection: null,
     combinations: [],
@@ -40,25 +40,25 @@ export function createPlayerSelectionStore(manager, options = {}) {
     const { debug = false } = options;
     const store = writable({ ...initialState });
     let currentStreamInfo = null;
-    let currentPlaybackMode = 'auto';
+    let currentPlaybackMode = "auto";
     let unsubSelection = null;
     let unsubCombos = null;
     // Subscribe to PlayerManager events
     function subscribe() {
         // Clean up existing subscriptions
         unsubscribe();
-        unsubSelection = manager.on('selection-changed', (sel) => {
+        unsubSelection = manager.on("selection-changed", (sel) => {
             if (debug) {
-                console.log('[playerSelection store] Selection changed:', sel?.player, sel?.source?.type);
+                console.log("[playerSelection store] Selection changed:", sel?.player, sel?.source?.type);
             }
             store.update((state) => ({
                 ...state,
                 selection: sel,
             }));
         });
-        unsubCombos = manager.on('combinations-updated', (combos) => {
+        unsubCombos = manager.on("combinations-updated", (combos) => {
             if (debug) {
-                console.log('[playerSelection store] Combinations updated:', combos.length);
+                console.log("[playerSelection store] Combinations updated:", combos.length);
             }
             store.update((state) => ({
                 ...state,
@@ -81,7 +81,7 @@ export function createPlayerSelectionStore(manager, options = {}) {
      */
     function setStreamInfo(streamInfo, playbackMode) {
         currentStreamInfo = streamInfo;
-        currentPlaybackMode = playbackMode ?? 'auto';
+        currentPlaybackMode = playbackMode ?? "auto";
         if (!streamInfo) {
             store.set({ ...initialState });
             return;

package/dist/stores/streamState.d.ts

@@ -3,8 +3,8 @@
  *
  * Port of useStreamState.ts React hook to Svelte 5 stores.
  */
-import { type Readable } from 'svelte/store';
-import type { StreamStatus, MistStreamInfo, StreamState } from '@livepeer-frameworks/player-core';
+import { type Readable } from "svelte/store";
+import type { StreamStatus, MistStreamInfo, StreamState } from "@livepeer-frameworks/player-core";
 export interface StreamStateOptions {
     mistBaseUrl: string;
     streamName: string;

package/dist/stores/streamState.js

@@ -3,56 +3,56 @@
  *
  * Port of useStreamState.ts React hook to Svelte 5 stores.
  */
-import { writable, derived } from 'svelte/store';
+import { writable, derived } from "svelte/store";
 /**
  * Parse MistServer error string into StreamStatus enum
  */
 function parseErrorToStatus(error) {
     const lowerError = error.toLowerCase();
-    if (lowerError.includes('offline'))
-        return 'OFFLINE';
-    if (lowerError.includes('initializing'))
-        return 'INITIALIZING';
-    if (lowerError.includes('booting'))
-        return 'BOOTING';
-    if (lowerError.includes('waiting for data'))
-        return 'WAITING_FOR_DATA';
-    if (lowerError.includes('shutting down'))
-        return 'SHUTTING_DOWN';
-    if (lowerError.includes('invalid'))
-        return 'INVALID';
-    return 'ERROR';
+    if (lowerError.includes("offline"))
+        return "OFFLINE";
+    if (lowerError.includes("initializing"))
+        return "INITIALIZING";
+    if (lowerError.includes("booting"))
+        return "BOOTING";
+    if (lowerError.includes("waiting for data"))
+        return "WAITING_FOR_DATA";
+    if (lowerError.includes("shutting down"))
+        return "SHUTTING_DOWN";
+    if (lowerError.includes("invalid"))
+        return "INVALID";
+    return "ERROR";
 }
 /**
  * Get human-readable message for stream status
  */
 function getStatusMessage(status, percentage) {
     switch (status) {
-        case 'ONLINE':
-            return 'Stream is online';
-        case 'OFFLINE':
-            return 'Stream is offline';
-        case 'INITIALIZING':
+        case "ONLINE":
+            return "Stream is online";
+        case "OFFLINE":
+            return "Stream is offline";
+        case "INITIALIZING":
             return percentage !== undefined
                 ? `Initializing... ${Math.round(percentage * 10) / 10}%`
-                : 'Stream is initializing';
-        case 'BOOTING':
-            return 'Stream is starting up';
-        case 'WAITING_FOR_DATA':
-            return 'Waiting for stream data';
-        case 'SHUTTING_DOWN':
-            return 'Stream is shutting down';
-        case 'INVALID':
-            return 'Stream status is invalid';
-        case 'ERROR':
+                : "Stream is initializing";
+        case "BOOTING":
+            return "Stream is starting up";
+        case "WAITING_FOR_DATA":
+            return "Waiting for stream data";
+        case "SHUTTING_DOWN":
+            return "Stream is shutting down";
+        case "INVALID":
+            return "Stream status is invalid";
+        case "ERROR":
         default:
-            return 'Stream error';
+            return "Stream error";
     }
 }
 const initialState = {
-    status: 'OFFLINE',
+    status: "OFFLINE",
     isOnline: false,
-    message: 'Connecting...',
+    message: "Connecting...",
     lastUpdate: 0,
 };
 /**
@@ -93,7 +93,7 @@ export function createStreamStateManager(options) {
         if (data.error) {
             const status = parseErrorToStatus(data.error);
             const message = data.on_error || getStatusMessage(status, data.perc);
-            store.update(prev => ({
+            store.update((prev) => ({
                 status,
                 isOnline: false,
                 message,
@@ -105,7 +105,7 @@ export function createStreamStateManager(options) {
         }
         else {
             // Stream is online with valid metadata
-            store.update(prev => {
+            store.update((prev) => {
                 const mergedStreamInfo = {
                     ...prev.streamInfo,
                     ...data,
@@ -117,9 +117,9 @@ export function createStreamStateManager(options) {
                     },
                 };
                 return {
-                    status: 'ONLINE',
+                    status: "ONLINE",
                     isOnline: true,
-                    message: 'Stream is online',
+                    message: "Stream is online",
                     lastUpdate: Date.now(),
                     streamInfo: mergedStreamInfo,
                 };
@@ -133,11 +133,11 @@ export function createStreamStateManager(options) {
         if (!mounted || !enabled)
             return;
         try {
-            const baseUrl = `${mistBaseUrl.replace(/\/$/, '')}/json_${encodeURIComponent(streamName)}.js`;
+            const baseUrl = `${mistBaseUrl.replace(/\/$/, "")}/json_${encodeURIComponent(streamName)}.js`;
             const url = `${baseUrl}?metaeverywhere=1&inclzero=1`;
             const response = await fetch(url, {
-                method: 'GET',
-                headers: { 'Accept': 'application/json' },
+                method: "GET",
+                headers: { Accept: "application/json" },
             });
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}`);
@@ -154,13 +154,13 @@ export function createStreamStateManager(options) {
         catch (error) {
             if (!mounted)
                 return;
-            store.update(prev => ({
+            store.update((prev) => ({
                 ...prev,
-                status: 'ERROR',
+                status: "ERROR",
                 isOnline: false,
-                message: error instanceof Error ? error.message : 'Connection failed',
+                message: error instanceof Error ? error.message : "Connection failed",
                 lastUpdate: Date.now(),
-                error: error instanceof Error ? error.message : 'Unknown error',
+                error: error instanceof Error ? error.message : "Unknown error",
             }));
         }
         // Schedule next poll
@@ -185,22 +185,22 @@ export function createStreamStateManager(options) {
         }
         try {
             const wsUrl = mistBaseUrl
-                .replace(/^http:/, 'ws:')
-                .replace(/^https:/, 'wss:')
-                .replace(/\/$/, '');
+                .replace(/^http:/, "ws:")
+                .replace(/^https:/, "wss:")
+                .replace(/\/$/, "");
             const url = `${wsUrl}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`;
             const socket = new WebSocket(url);
             ws = socket;
             // Timeout: if no message within 5 seconds, fall back to HTTP
             wsTimeout = setTimeout(() => {
                 if (socket.readyState <= WebSocket.OPEN) {
-                    console.debug('[streamState] WebSocket timeout (5s), falling back to HTTP');
+                    console.debug("[streamState] WebSocket timeout (5s), falling back to HTTP");
                     socket.close();
                     pollHttp();
                 }
             }, WS_TIMEOUT_MS);
             socket.onopen = () => {
-                console.debug('[streamState] WebSocket connected');
+                console.debug("[streamState] WebSocket connected");
                 socketReady.set(true);
             };
             socket.onmessage = (event) => {
@@ -213,11 +213,11 @@ export function createStreamStateManager(options) {
                     processStreamInfo(data);
                 }
                 catch (e) {
-                    console.warn('[streamState] Failed to parse WebSocket message:', e);
+                    console.warn("[streamState] Failed to parse WebSocket message:", e);
                 }
             };
             socket.onerror = () => {
-                console.warn('[streamState] WebSocket error, falling back to HTTP');
+                console.warn("[streamState] WebSocket error, falling back to HTTP");
                 if (wsTimeout) {
                     clearTimeout(wsTimeout);
                     wsTimeout = null;
@@ -229,12 +229,12 @@ export function createStreamStateManager(options) {
                 socketReady.set(false);
                 if (!mounted || !enabled)
                     return;
-                console.debug('[streamState] WebSocket closed, starting HTTP polling');
+                console.debug("[streamState] WebSocket closed, starting HTTP polling");
                 pollHttp();
             };
         }
         catch (error) {
-            console.warn('[streamState] WebSocket connection failed:', error);
+            console.warn("[streamState] WebSocket connection failed:", error);
             pollHttp();
         }
     }
@@ -281,7 +281,7 @@ export function createStreamStateManager(options) {
     if (enabled && mistBaseUrl && streamName) {
         store.set({
             ...initialState,
-            message: 'Connecting...',
+            message: "Connecting...",
             lastUpdate: Date.now(),
         });
         // Initial HTTP poll then WebSocket
@@ -303,12 +303,12 @@ export function createStreamStateManager(options) {
 }
 // Convenience derived stores for common values
 export function createDerivedStreamStatus(store) {
-    return derived(store, $state => $state.status);
+    return derived(store, ($state) => $state.status);
 }
 export function createDerivedIsOnline(store) {
-    return derived(store, $state => $state.isOnline);
+    return derived(store, ($state) => $state.isOnline);
 }
 export function createDerivedStreamInfo(store) {
-    return derived(store, $state => $state.streamInfo);
+    return derived(store, ($state) => $state.streamInfo);
 }
 export default createStreamStateManager;

package/dist/stores/viewerEndpoints.d.ts

@@ -3,15 +3,15 @@
  *
  * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
  */
-import { type Readable } from 'svelte/store';
-import type { ContentEndpoints, ContentType } from '@livepeer-frameworks/player-core';
+import { type Readable } from "svelte/store";
+import type { ContentEndpoints, ContentType } from "@livepeer-frameworks/player-core";
 export interface ViewerEndpointsOptions {
     gatewayUrl: string;
     contentId: string;
     contentType?: ContentType;
     authToken?: string;
 }
-export type EndpointStatus = 'idle' | 'loading' | 'ready' | 'error';
+export type EndpointStatus = "idle" | "loading" | "ready" | "error";
 export interface ViewerEndpointsState {
     endpoints: ContentEndpoints | null;
     status: EndpointStatus;