@livepeer-frameworks/player-svelte 0.0.3

package/dist/stores/playerSelection.js

@@ -0,0 +1,159 @@
+/**
+ * Svelte store for player selection.
+ *
+ * Subscribes to PlayerManager events for reactive selection updates.
+ * Uses event-driven updates instead of polling - no render spam.
+ */
+import { writable, derived } from 'svelte/store';
+const initialState = {
+    selection: null,
+    combinations: [],
+    ready: false,
+};
+/**
+ * Create a player selection store that subscribes to PlayerManager events.
+ *
+ * This store uses the event system in PlayerManager, which means:
+ * - Initial computation happens once when streamInfo is provided
+ * - Updates only fire when selection actually changes (different player+source)
+ * - No render spam from frequent reactive updates
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createPlayerSelectionStore } from './stores/playerSelection';
+ *   import { globalPlayerManager } from '@livepeer-frameworks/player-core';
+ *
+ *   const playerSelection = createPlayerSelectionStore(globalPlayerManager);
+ *
+ *   // Set stream info to trigger selection
+ *   $: if (streamInfo) playerSelection.setStreamInfo(streamInfo, playbackMode);
+ *
+ *   // Access selection state
+ *   $: selection = $playerSelection.selection;
+ *   $: combinations = $playerSelection.combinations;
+ *   $: ready = $playerSelection.ready;
+ * </script>
+ * ```
+ */
+export function createPlayerSelectionStore(manager, options = {}) {
+    const { debug = false } = options;
+    const store = writable({ ...initialState });
+    let currentStreamInfo = null;
+    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) => {
+            if (debug) {
+                console.log('[playerSelection store] Selection changed:', sel?.player, sel?.source?.type);
+            }
+            store.update((state) => ({
+                ...state,
+                selection: sel,
+            }));
+        });
+        unsubCombos = manager.on('combinations-updated', (combos) => {
+            if (debug) {
+                console.log('[playerSelection store] Combinations updated:', combos.length);
+            }
+            store.update((state) => ({
+                ...state,
+                combinations: combos,
+                ready: true,
+            }));
+        });
+    }
+    function unsubscribe() {
+        unsubSelection?.();
+        unsubCombos?.();
+        unsubSelection = null;
+        unsubCombos = null;
+    }
+    // Initialize subscriptions
+    subscribe();
+    /**
+     * Set stream info to compute selections for.
+     * This triggers computation (using cache if available).
+     */
+    function setStreamInfo(streamInfo, playbackMode) {
+        currentStreamInfo = streamInfo;
+        currentPlaybackMode = playbackMode ?? 'auto';
+        if (!streamInfo) {
+            store.set({ ...initialState });
+            return;
+        }
+        // This will use cache if available, or compute + emit events if not
+        manager.getAllCombinations(streamInfo, currentPlaybackMode);
+    }
+    /**
+     * Force recomputation (invalidates cache).
+     */
+    function refresh() {
+        if (!currentStreamInfo)
+            return;
+        manager.invalidateCache();
+        manager.getAllCombinations(currentStreamInfo, currentPlaybackMode);
+    }
+    /**
+     * Cleanup subscriptions.
+     */
+    function destroy() {
+        unsubscribe();
+        store.set({ ...initialState });
+        currentStreamInfo = null;
+    }
+    return {
+        subscribe: store.subscribe,
+        setStreamInfo,
+        refresh,
+        destroy,
+    };
+}
+// Convenience derived stores
+/**
+ * Derive just the current selection from the store.
+ */
+export function createDerivedSelection(store) {
+    return derived(store, ($state) => $state.selection);
+}
+/**
+ * Derive just the combinations array from the store.
+ */
+export function createDerivedCombinations(store) {
+    return derived(store, ($state) => $state.combinations);
+}
+/**
+ * Derive the ready state from the store.
+ */
+export function createDerivedReady(store) {
+    return derived(store, ($state) => $state.ready);
+}
+/**
+ * Derive the selected player name.
+ */
+export function createDerivedSelectedPlayer(store) {
+    return derived(store, ($state) => $state.selection?.player ?? null);
+}
+/**
+ * Derive the selected source type.
+ */
+export function createDerivedSelectedSourceType(store) {
+    return derived(store, ($state) => $state.selection?.source?.type ?? null);
+}
+/**
+ * Derive only compatible combinations (filtered from all).
+ */
+export function createDerivedCompatibleCombinations(store) {
+    return derived(store, ($state) => $state.combinations.filter((c) => c.compatible));
+}
+/**
+ * Derive only incompatible combinations.
+ */
+export function createDerivedIncompatibleCombinations(store) {
+    return derived(store, ($state) => $state.combinations.filter((c) => !c.compatible));
+}
+export default createPlayerSelectionStore;

package/dist/stores/streamState.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Svelte store for MistServer stream state polling via WebSocket/HTTP.
+ *
+ * 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';
+export interface StreamStateOptions {
+    mistBaseUrl: string;
+    streamName: string;
+    pollInterval?: number;
+    enabled?: boolean;
+    useWebSocket?: boolean;
+}
+export interface StreamStateStore extends Readable<StreamState> {
+    refetch: () => void;
+    getSocket: () => WebSocket | null;
+    isSocketReady: Readable<boolean>;
+    destroy: () => void;
+}
+/**
+ * Create a stream state manager store for MistServer polling.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createStreamStateManager } from './stores/streamState';
+ *
+ *   const streamState = createStreamStateManager({
+ *     mistBaseUrl: 'https://mist.example.com',
+ *     streamName: 'my-stream',
+ *   });
+ *
+ *   // Access values
+ *   $: status = $streamState.status;
+ *   $: isOnline = $streamState.isOnline;
+ * </script>
+ * ```
+ */
+export declare function createStreamStateManager(options: StreamStateOptions): StreamStateStore;
+export declare function createDerivedStreamStatus(store: StreamStateStore): Readable<StreamStatus>;
+export declare function createDerivedIsOnline(store: StreamStateStore): Readable<boolean>;
+export declare function createDerivedStreamInfo(store: StreamStateStore): Readable<MistStreamInfo | undefined>;
+export default createStreamStateManager;

package/dist/stores/streamState.js

@@ -0,0 +1,314 @@
+/**
+ * Svelte store for MistServer stream state polling via WebSocket/HTTP.
+ *
+ * Port of useStreamState.ts React hook to Svelte 5 stores.
+ */
+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';
+}
+/**
+ * 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':
+            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':
+        default:
+            return 'Stream error';
+    }
+}
+const initialState = {
+    status: 'OFFLINE',
+    isOnline: false,
+    message: 'Connecting...',
+    lastUpdate: 0,
+};
+/**
+ * Create a stream state manager store for MistServer polling.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createStreamStateManager } from './stores/streamState';
+ *
+ *   const streamState = createStreamStateManager({
+ *     mistBaseUrl: 'https://mist.example.com',
+ *     streamName: 'my-stream',
+ *   });
+ *
+ *   // Access values
+ *   $: status = $streamState.status;
+ *   $: isOnline = $streamState.isOnline;
+ * </script>
+ * ```
+ */
+export function createStreamStateManager(options) {
+    const { mistBaseUrl, streamName, pollInterval = 3000, enabled = true, useWebSocket = true, } = options;
+    const WS_TIMEOUT_MS = 5000;
+    // Internal state
+    const store = writable(initialState);
+    const socketReady = writable(false);
+    let ws = null;
+    let pollTimeout = null;
+    let wsTimeout = null;
+    let mounted = true;
+    /**
+     * Process MistServer response data
+     */
+    function processStreamInfo(data) {
+        if (!mounted)
+            return;
+        if (data.error) {
+            const status = parseErrorToStatus(data.error);
+            const message = data.on_error || getStatusMessage(status, data.perc);
+            store.update(prev => ({
+                status,
+                isOnline: false,
+                message,
+                percentage: data.perc,
+                lastUpdate: Date.now(),
+                error: data.error,
+                streamInfo: prev.streamInfo, // Preserve track data through error states
+            }));
+        }
+        else {
+            // Stream is online with valid metadata
+            store.update(prev => {
+                const mergedStreamInfo = {
+                    ...prev.streamInfo,
+                    ...data,
+                    source: data.source || prev.streamInfo?.source,
+                    meta: {
+                        ...prev.streamInfo?.meta,
+                        ...data.meta,
+                        tracks: data.meta?.tracks || prev.streamInfo?.meta?.tracks,
+                    },
+                };
+                return {
+                    status: 'ONLINE',
+                    isOnline: true,
+                    message: 'Stream is online',
+                    lastUpdate: Date.now(),
+                    streamInfo: mergedStreamInfo,
+                };
+            });
+        }
+    }
+    /**
+     * HTTP polling fallback
+     */
+    async function pollHttp() {
+        if (!mounted || !enabled)
+            return;
+        try {
+            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' },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            let text = await response.text();
+            // Strip JSONP callback if present
+            const jsonpMatch = text.match(/^[^(]+\(([\s\S]*)\);?$/);
+            if (jsonpMatch) {
+                text = jsonpMatch[1];
+            }
+            const data = JSON.parse(text);
+            processStreamInfo(data);
+        }
+        catch (error) {
+            if (!mounted)
+                return;
+            store.update(prev => ({
+                ...prev,
+                status: 'ERROR',
+                isOnline: false,
+                message: error instanceof Error ? error.message : 'Connection failed',
+                lastUpdate: Date.now(),
+                error: error instanceof Error ? error.message : 'Unknown error',
+            }));
+        }
+        // Schedule next poll
+        if (mounted && enabled && !useWebSocket) {
+            pollTimeout = setTimeout(pollHttp, pollInterval);
+        }
+    }
+    /**
+     * WebSocket connection with timeout fallback
+     */
+    function connectWebSocket() {
+        if (!mounted || !enabled || !useWebSocket)
+            return;
+        // Clean up existing
+        if (wsTimeout) {
+            clearTimeout(wsTimeout);
+            wsTimeout = null;
+        }
+        if (ws) {
+            ws.close();
+            ws = null;
+        }
+        try {
+            const wsUrl = mistBaseUrl
+                .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');
+                    socket.close();
+                    pollHttp();
+                }
+            }, WS_TIMEOUT_MS);
+            socket.onopen = () => {
+                console.debug('[streamState] WebSocket connected');
+                socketReady.set(true);
+            };
+            socket.onmessage = (event) => {
+                if (wsTimeout) {
+                    clearTimeout(wsTimeout);
+                    wsTimeout = null;
+                }
+                try {
+                    const data = JSON.parse(event.data);
+                    processStreamInfo(data);
+                }
+                catch (e) {
+                    console.warn('[streamState] Failed to parse WebSocket message:', e);
+                }
+            };
+            socket.onerror = () => {
+                console.warn('[streamState] WebSocket error, falling back to HTTP');
+                if (wsTimeout) {
+                    clearTimeout(wsTimeout);
+                    wsTimeout = null;
+                }
+                socket.close();
+            };
+            socket.onclose = () => {
+                ws = null;
+                socketReady.set(false);
+                if (!mounted || !enabled)
+                    return;
+                console.debug('[streamState] WebSocket closed, starting HTTP polling');
+                pollHttp();
+            };
+        }
+        catch (error) {
+            console.warn('[streamState] WebSocket connection failed:', error);
+            pollHttp();
+        }
+    }
+    /**
+     * Manual refetch
+     */
+    function refetch() {
+        if (useWebSocket && ws?.readyState === WebSocket.OPEN) {
+            return; // WebSocket will receive updates automatically
+        }
+        pollHttp();
+    }
+    /**
+     * Get current WebSocket reference
+     */
+    function getSocket() {
+        return ws;
+    }
+    /**
+     * Cleanup and destroy the store
+     */
+    function destroy() {
+        mounted = false;
+        if (wsTimeout) {
+            clearTimeout(wsTimeout);
+            wsTimeout = null;
+        }
+        if (ws) {
+            ws.onclose = null;
+            ws.onerror = null;
+            ws.onmessage = null;
+            ws.onopen = null;
+            ws.close();
+            ws = null;
+        }
+        if (pollTimeout) {
+            clearTimeout(pollTimeout);
+            pollTimeout = null;
+        }
+        socketReady.set(false);
+        store.set(initialState);
+    }
+    // Initialize connection
+    if (enabled && mistBaseUrl && streamName) {
+        store.set({
+            ...initialState,
+            message: 'Connecting...',
+            lastUpdate: Date.now(),
+        });
+        // Initial HTTP poll then WebSocket
+        const init = async () => {
+            await pollHttp();
+            if (useWebSocket && mounted) {
+                connectWebSocket();
+            }
+        };
+        init();
+    }
+    return {
+        subscribe: store.subscribe,
+        refetch,
+        getSocket,
+        isSocketReady: { subscribe: socketReady.subscribe },
+        destroy,
+    };
+}
+// Convenience derived stores for common values
+export function createDerivedStreamStatus(store) {
+    return derived(store, $state => $state.status);
+}
+export function createDerivedIsOnline(store) {
+    return derived(store, $state => $state.isOnline);
+}
+export function createDerivedStreamInfo(store) {
+    return derived(store, $state => $state.streamInfo);
+}
+export default createStreamStateManager;

package/dist/stores/viewerEndpoints.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Svelte store for Gateway GraphQL endpoint resolution with retry logic.
+ *
+ * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
+ */
+import { type Readable } from 'svelte/store';
+import type { ContentEndpoints, EndpointInfo, ContentMetadata, ContentType } from '@livepeer-frameworks/player-core';
+export interface ViewerEndpointsOptions {
+    gatewayUrl: string;
+    contentType: ContentType;
+    contentId: string;
+    authToken?: string;
+}
+export type EndpointStatus = 'idle' | 'loading' | 'ready' | 'error';
+export interface ViewerEndpointsState {
+    endpoints: ContentEndpoints | null;
+    status: EndpointStatus;
+    error: string | null;
+}
+export interface ViewerEndpointsStore extends Readable<ViewerEndpointsState> {
+    refetch: () => void;
+    destroy: () => void;
+}
+/**
+ * Create a viewer endpoints resolver store for Gateway GraphQL queries.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createEndpointResolver } from './stores/viewerEndpoints';
+ *
+ *   const resolver = createEndpointResolver({
+ *     gatewayUrl: 'https://gateway.example.com/graphql',
+ *     contentType: 'live',
+ *     contentId: 'my-stream',
+ *   });
+ *
+ *   $: endpoints = $resolver.endpoints;
+ *   $: status = $resolver.status;
+ * </script>
+ * ```
+ */
+export declare function createEndpointResolver(options: ViewerEndpointsOptions): ViewerEndpointsStore;
+export declare function createDerivedEndpoints(store: ViewerEndpointsStore): Readable<ContentEndpoints | null>;
+export declare function createDerivedPrimaryEndpoint(store: ViewerEndpointsStore): Readable<EndpointInfo | null>;
+export declare function createDerivedMetadata(store: ViewerEndpointsStore): Readable<ContentMetadata | null>;
+export declare function createDerivedStatus(store: ViewerEndpointsStore): Readable<EndpointStatus>;
+export default createEndpointResolver;