@livepeer-frameworks/player-svelte 0.0.3

package/dist/icons/VolumeOffIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+}
+declare const VolumeOffIcon: import("svelte").Component<Props, {}, "">;
+type VolumeOffIcon = ReturnType<typeof VolumeOffIcon>;
+export default VolumeOffIcon;

package/dist/icons/VolumeUpIcon.svelte

@@ -0,0 +1,34 @@
+<!--
+  VolumeUpIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill={color} />
+  <path
+    d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/icons/VolumeUpIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+}
+declare const VolumeUpIcon: import("svelte").Component<Props, {}, "">;
+type VolumeUpIcon = ReturnType<typeof VolumeUpIcon>;
+export default VolumeUpIcon;

package/dist/icons/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Svelte icon components
+ *
+ * Port of src/components/Icons.tsx
+ */
+export { default as PlayIcon } from './PlayIcon.svelte';
+export { default as PauseIcon } from './PauseIcon.svelte';
+export { default as SkipBackIcon } from './SkipBackIcon.svelte';
+export { default as SkipForwardIcon } from './SkipForwardIcon.svelte';
+export { default as VolumeUpIcon } from './VolumeUpIcon.svelte';
+export { default as VolumeOffIcon } from './VolumeOffIcon.svelte';
+export { default as FullscreenIcon } from './FullscreenIcon.svelte';
+export { default as FullscreenExitIcon } from './FullscreenExitIcon.svelte';
+export { default as SettingsIcon } from './SettingsIcon.svelte';
+export { default as StatsIcon } from './StatsIcon.svelte';
+export { default as PictureInPictureIcon } from './PictureInPictureIcon.svelte';
+export { default as SeekToLiveIcon } from './SeekToLiveIcon.svelte';

package/dist/icons/index.js

@@ -0,0 +1,17 @@
+/**
+ * Svelte icon components
+ *
+ * Port of src/components/Icons.tsx
+ */
+export { default as PlayIcon } from './PlayIcon.svelte';
+export { default as PauseIcon } from './PauseIcon.svelte';
+export { default as SkipBackIcon } from './SkipBackIcon.svelte';
+export { default as SkipForwardIcon } from './SkipForwardIcon.svelte';
+export { default as VolumeUpIcon } from './VolumeUpIcon.svelte';
+export { default as VolumeOffIcon } from './VolumeOffIcon.svelte';
+export { default as FullscreenIcon } from './FullscreenIcon.svelte';
+export { default as FullscreenExitIcon } from './FullscreenExitIcon.svelte';
+export { default as SettingsIcon } from './SettingsIcon.svelte';
+export { default as StatsIcon } from './StatsIcon.svelte';
+export { default as PictureInPictureIcon } from './PictureInPictureIcon.svelte';
+export { default as SeekToLiveIcon } from './SeekToLiveIcon.svelte';

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Svelte exports for SvelteKit/Svelte 5 environments.
+ *
+ * Full-featured player with React parity including:
+ * - Gateway URL integration with GraphQL endpoint resolution
+ * - MistServer WebSocket/HTTP stream state polling
+ * - Quality monitoring and stats panel
+ * - DevMode panel for player/source testing
+ * - InteractionController for modern gestures
+ * - MistReporter for stats reporting
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Player } from '@livepeer-frameworks/player/svelte';
+ * </script>
+ *
+ * <Player
+ *   contentId="my-stream"
+ *   contentType="live"
+ *   options={{ gatewayUrl: "https://gateway.example.com/graphql", devMode: true }}
+ *   autoplay
+ *   muted
+ * />
+ * ```
+ */
+export { default as Button } from './ui/Button.svelte';
+export { default as Badge } from './ui/Badge.svelte';
+export { default as Slider } from './ui/Slider.svelte';
+export { default as Player } from './Player.svelte';
+export { default as PlayerControls } from './PlayerControls.svelte';
+export { default as SeekBar } from './SeekBar.svelte';
+export { default as SpeedIndicator } from './SpeedIndicator.svelte';
+export { default as SkipIndicator } from './SkipIndicator.svelte';
+export { default as IdleScreen } from './IdleScreen.svelte';
+export { default as LoadingScreen } from './LoadingScreen.svelte';
+export { default as StreamStateOverlay } from './StreamStateOverlay.svelte';
+export { default as SubtitleRenderer } from './SubtitleRenderer.svelte';
+export { default as DvdLogo } from './DvdLogo.svelte';
+export { default as TitleOverlay } from './TitleOverlay.svelte';
+export { default as ThumbnailOverlay } from './ThumbnailOverlay.svelte';
+export { default as StatsPanel } from './StatsPanel.svelte';
+export { default as DevModePanel } from './DevModePanel.svelte';
+export * from './icons';
+export * from './stores';
+export * from './ui/context-menu';
+export type { SkipDirection } from './types';
+export { PlayerController, PlayerManager, globalPlayerManager } from '@livepeer-frameworks/player-core';
+export type { PlayerControllerConfig, PlayerControllerEvents } from '@livepeer-frameworks/player-core';
+export type { PlayerState, PlayerStateContext, StreamState, StreamStatus, ContentMetadata, ContentEndpoints, EndpointInfo, PlaybackMode, PlaybackQuality, MistStreamInfo, PlayerOptions, PlayerMetadata, PlayerSelection, PlayerCombination, PlayerManagerOptions, PlayerManagerEvents, } from '@livepeer-frameworks/player-core';

package/dist/index.js

@@ -0,0 +1,54 @@
+/**
+ * Svelte exports for SvelteKit/Svelte 5 environments.
+ *
+ * Full-featured player with React parity including:
+ * - Gateway URL integration with GraphQL endpoint resolution
+ * - MistServer WebSocket/HTTP stream state polling
+ * - Quality monitoring and stats panel
+ * - DevMode panel for player/source testing
+ * - InteractionController for modern gestures
+ * - MistReporter for stats reporting
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Player } from '@livepeer-frameworks/player/svelte';
+ * </script>
+ *
+ * <Player
+ *   contentId="my-stream"
+ *   contentType="live"
+ *   options={{ gatewayUrl: "https://gateway.example.com/graphql", devMode: true }}
+ *   autoplay
+ *   muted
+ * />
+ * ```
+ */
+// UI primitives
+export { default as Button } from './ui/Button.svelte';
+export { default as Badge } from './ui/Badge.svelte';
+export { default as Slider } from './ui/Slider.svelte';
+// Main components
+export { default as Player } from './Player.svelte';
+export { default as PlayerControls } from './PlayerControls.svelte';
+export { default as SeekBar } from './SeekBar.svelte';
+// Overlay components
+export { default as SpeedIndicator } from './SpeedIndicator.svelte';
+export { default as SkipIndicator } from './SkipIndicator.svelte';
+export { default as IdleScreen } from './IdleScreen.svelte';
+export { default as LoadingScreen } from './LoadingScreen.svelte';
+export { default as StreamStateOverlay } from './StreamStateOverlay.svelte';
+export { default as SubtitleRenderer } from './SubtitleRenderer.svelte';
+export { default as DvdLogo } from './DvdLogo.svelte';
+export { default as TitleOverlay } from './TitleOverlay.svelte';
+export { default as ThumbnailOverlay } from './ThumbnailOverlay.svelte';
+export { default as StatsPanel } from './StatsPanel.svelte';
+export { default as DevModePanel } from './DevModePanel.svelte';
+// Icon components
+export * from './icons';
+// Stores
+export * from './stores';
+// Context menu components
+export * from './ui/context-menu';
+// Re-export core types and classes for Svelte users
+export { PlayerController, PlayerManager, globalPlayerManager } from '@livepeer-frameworks/player-core';

package/dist/player.css

@@ -0,0 +1,2 @@
+/* Re-export core player CSS - apps import from wrapper, not core */
+@import "@livepeer-frameworks/player-core/player.css";

package/dist/stores/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Svelte stores for player state management.
+ *
+ * These stores provide reactive state management for:
+ * - MistServer stream state polling (WebSocket/HTTP)
+ * - Gateway endpoint resolution (GraphQL)
+ * - Player instance context sharing
+ * - Playback quality monitoring
+ */
+export { createStreamStateManager, createDerivedStreamStatus, createDerivedIsOnline, createDerivedStreamInfo, type StreamStateOptions, type StreamStateStore, } from './streamState';
+export { createEndpointResolver, createDerivedEndpoints, createDerivedPrimaryEndpoint, createDerivedMetadata, createDerivedStatus, type ViewerEndpointsOptions, type ViewerEndpointsStore, type ViewerEndpointsState, type EndpointStatus, } from './viewerEndpoints';
+export { createPlayerContext, setPlayerContextInComponent, getPlayerContextFromComponent, getPlayerContextOrFallback, createDerivedVideoElement, createDerivedIsReady, createDerivedPlayerInfo, type PlayerContextState, type PlayerContextStore, } from './playerContext';
+export { createPlaybackQualityMonitor, createDerivedQualityScore, createDerivedStallCount, createDerivedFrameDropRate, createDerivedBitrate, createDerivedLatency, type PlaybackQualityOptions, type PlaybackQualityStore, } from './playbackQuality';
+export { createPlayerSelectionStore, createDerivedSelection, createDerivedCombinations, createDerivedReady, createDerivedSelectedPlayer, createDerivedSelectedSourceType, createDerivedCompatibleCombinations, createDerivedIncompatibleCombinations, type PlayerSelectionOptions, type PlayerSelectionState, type PlayerSelectionStore, } from './playerSelection';
+export { createPlayerControllerStore, createDerivedState, createDerivedIsPlaying, createDerivedCurrentTime, createDerivedDuration, createDerivedError, createDerivedVideoElement as createDerivedControllerVideoElement, createDerivedShouldShowControls, createDerivedShouldShowIdleScreen, type PlayerControllerStoreConfig, type PlayerControllerState, type PlayerControllerStore, } from './playerController';

package/dist/stores/index.js

@@ -0,0 +1,21 @@
+/**
+ * Svelte stores for player state management.
+ *
+ * These stores provide reactive state management for:
+ * - MistServer stream state polling (WebSocket/HTTP)
+ * - Gateway endpoint resolution (GraphQL)
+ * - Player instance context sharing
+ * - Playback quality monitoring
+ */
+// Stream state (MistServer polling)
+export { createStreamStateManager, createDerivedStreamStatus, createDerivedIsOnline, createDerivedStreamInfo, } from './streamState';
+// Viewer endpoints (Gateway resolution)
+export { createEndpointResolver, createDerivedEndpoints, createDerivedPrimaryEndpoint, createDerivedMetadata, createDerivedStatus, } from './viewerEndpoints';
+// Player context (instance sharing)
+export { createPlayerContext, setPlayerContextInComponent, getPlayerContextFromComponent, getPlayerContextOrFallback, createDerivedVideoElement, createDerivedIsReady, createDerivedPlayerInfo, } from './playerContext';
+// Playback quality monitoring
+export { createPlaybackQualityMonitor, createDerivedQualityScore, createDerivedStallCount, createDerivedFrameDropRate, createDerivedBitrate, createDerivedLatency, } from './playbackQuality';
+// Player selection (event-driven, cached)
+export { createPlayerSelectionStore, createDerivedSelection, createDerivedCombinations, createDerivedReady, createDerivedSelectedPlayer, createDerivedSelectedSourceType, createDerivedCompatibleCombinations, createDerivedIncompatibleCombinations, } from './playerSelection';
+// PlayerController store (central orchestrator)
+export { createPlayerControllerStore, createDerivedState, createDerivedIsPlaying, createDerivedCurrentTime, createDerivedDuration, createDerivedError, createDerivedVideoElement as createDerivedControllerVideoElement, createDerivedShouldShowControls, createDerivedShouldShowIdleScreen, } from './playerController';

package/dist/stores/playbackQuality.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Svelte store for playback quality monitoring.
+ *
+ * Wraps QualityMonitor for reactive quality metrics.
+ */
+import { type Readable } from 'svelte/store';
+import { type PlaybackQuality } from '@livepeer-frameworks/player-core';
+export interface PlaybackQualityOptions {
+    sampleInterval?: number;
+    enabled?: boolean;
+}
+export interface PlaybackQualityStore extends Readable<PlaybackQuality | null> {
+    start: (videoElement: HTMLVideoElement) => void;
+    stop: () => void;
+    getPlaybackScore: () => number;
+    destroy: () => void;
+}
+/**
+ * Create a playback quality monitoring store.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createPlaybackQualityMonitor } from './stores/playbackQuality';
+ *
+ *   const quality = createPlaybackQualityMonitor();
+ *
+ *   // Start monitoring when video element is available
+ *   $: if (videoElement) quality.start(videoElement);
+ *
+ *   // Access quality metrics
+ *   $: score = $quality?.score ?? 100;
+ *   $: stallCount = $quality?.stallCount ?? 0;
+ * </script>
+ * ```
+ */
+export declare function createPlaybackQualityMonitor(options?: PlaybackQualityOptions): PlaybackQualityStore;
+export declare function createDerivedQualityScore(store: PlaybackQualityStore): Readable<number>;
+export declare function createDerivedStallCount(store: PlaybackQualityStore): Readable<number>;
+export declare function createDerivedFrameDropRate(store: PlaybackQualityStore): Readable<number>;
+export declare function createDerivedBitrate(store: PlaybackQualityStore): Readable<number>;
+export declare function createDerivedLatency(store: PlaybackQualityStore): Readable<number | undefined>;
+export default createPlaybackQualityMonitor;

package/dist/stores/playbackQuality.js

@@ -0,0 +1,107 @@
+/**
+ * Svelte store for playback quality monitoring.
+ *
+ * Wraps QualityMonitor for reactive quality metrics.
+ */
+import { writable, derived } from 'svelte/store';
+import { QualityMonitor } from '@livepeer-frameworks/player-core';
+const initialQuality = {
+    score: 100,
+    bitrate: 0,
+    bufferedAhead: 0,
+    frameDropRate: 0,
+    stallCount: 0,
+    latency: 0,
+    timestamp: Date.now(),
+};
+/**
+ * Create a playback quality monitoring store.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createPlaybackQualityMonitor } from './stores/playbackQuality';
+ *
+ *   const quality = createPlaybackQualityMonitor();
+ *
+ *   // Start monitoring when video element is available
+ *   $: if (videoElement) quality.start(videoElement);
+ *
+ *   // Access quality metrics
+ *   $: score = $quality?.score ?? 100;
+ *   $: stallCount = $quality?.stallCount ?? 0;
+ * </script>
+ * ```
+ */
+export function createPlaybackQualityMonitor(options = {}) {
+    const { sampleInterval = 500, enabled = true } = options;
+    const store = writable(null);
+    let monitor = null;
+    let currentVideoElement = null;
+    /**
+     * Start monitoring a video element
+     */
+    function start(videoElement) {
+        if (!enabled)
+            return;
+        // Stop existing monitor if different element
+        if (currentVideoElement && currentVideoElement !== videoElement) {
+            stop();
+        }
+        currentVideoElement = videoElement;
+        if (!monitor) {
+            monitor = new QualityMonitor({
+                sampleInterval,
+                onSample: (quality) => {
+                    store.set(quality);
+                },
+            });
+        }
+        monitor.start(videoElement);
+    }
+    /**
+     * Stop monitoring
+     */
+    function stop() {
+        monitor?.stop();
+        currentVideoElement = null;
+    }
+    /**
+     * Get current playback score
+     */
+    function getPlaybackScore() {
+        return monitor?.getPlaybackScore() ?? 1.0;
+    }
+    /**
+     * Cleanup
+     */
+    function destroy() {
+        stop();
+        monitor = null;
+        store.set(null);
+    }
+    return {
+        subscribe: store.subscribe,
+        start,
+        stop,
+        getPlaybackScore,
+        destroy,
+    };
+}
+// Convenience derived stores
+export function createDerivedQualityScore(store) {
+    return derived(store, $quality => $quality?.score ?? 100);
+}
+export function createDerivedStallCount(store) {
+    return derived(store, $quality => $quality?.stallCount ?? 0);
+}
+export function createDerivedFrameDropRate(store) {
+    return derived(store, $quality => $quality?.frameDropRate ?? 0);
+}
+export function createDerivedBitrate(store) {
+    return derived(store, $quality => $quality?.bitrate ?? 0);
+}
+export function createDerivedLatency(store) {
+    return derived(store, $quality => $quality?.latency);
+}
+export default createPlaybackQualityMonitor;

package/dist/stores/playerContext.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Svelte store for player instance context sharing.
+ *
+ * Port of PlayerContext.tsx React context to Svelte 5 stores.
+ */
+import { type Readable } from 'svelte/store';
+import { type StreamInfo, type IPlayer } from '@livepeer-frameworks/player-core';
+export interface PlayerContextState {
+    /** Current video element (if available) */
+    videoElement: HTMLVideoElement | null;
+    /** Current player instance */
+    player: IPlayer | null;
+    /** Player name */
+    playerName: string | null;
+    /** Player shortname */
+    playerShortname: string | null;
+    /** Current source type */
+    sourceType: string | null;
+    /** Current source URL */
+    sourceUrl: string | null;
+    /** Whether player is ready */
+    isReady: boolean;
+    /** Current stream info */
+    streamInfo: StreamInfo | null;
+}
+export interface PlayerContextStore extends Readable<PlayerContextState> {
+    setVideoElement: (el: HTMLVideoElement | null) => void;
+    setPlayer: (player: IPlayer | null) => void;
+    setSource: (type: string | null, url: string | null) => void;
+    setStreamInfo: (info: StreamInfo | null) => void;
+    setReady: (ready: boolean) => void;
+    reset: () => void;
+}
+/**
+ * Create a player context store for sharing player state across components.
+ *
+ * @example
+ * ```svelte
+ * <!-- Parent component -->
+ * <script>
+ *   import { createPlayerContext, setPlayerContext } from './stores/playerContext';
+ *   const playerContext = createPlayerContext();
+ *   setPlayerContext(playerContext);
+ * </script>
+ *
+ * <!-- Child component -->
+ * <script>
+ *   import { getPlayerContext } from './stores/playerContext';
+ *   const playerContext = getPlayerContext();
+ *   $: videoEl = $playerContext.videoElement;
+ * </script>
+ * ```
+ */
+export declare function createPlayerContext(): PlayerContextStore;
+/**
+ * Set player context in Svelte context (call in parent component)
+ */
+export declare function setPlayerContextInComponent(context: PlayerContextStore): void;
+/**
+ * Get player context from Svelte context (call in child components)
+ */
+export declare function getPlayerContextFromComponent(): PlayerContextStore | undefined;
+/**
+ * Get player context or create a fallback that uses globalPlayerManager
+ */
+export declare function getPlayerContextOrFallback(): PlayerContextStore;
+export declare function createDerivedVideoElement(store: PlayerContextStore): Readable<HTMLVideoElement | null>;
+export declare function createDerivedIsReady(store: PlayerContextStore): Readable<boolean>;
+export declare function createDerivedPlayerInfo(store: PlayerContextStore): Readable<{
+    name: string | null;
+    shortname: string | null;
+}>;
+export default createPlayerContext;

package/dist/stores/playerContext.js

@@ -0,0 +1,166 @@
+/**
+ * Svelte store for player instance context sharing.
+ *
+ * Port of PlayerContext.tsx React context to Svelte 5 stores.
+ */
+import { writable, derived } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
+import { globalPlayerManager } from '@livepeer-frameworks/player-core';
+// Context key
+const PLAYER_CONTEXT_KEY = Symbol('player-context');
+const initialState = {
+    videoElement: null,
+    player: null,
+    playerName: null,
+    playerShortname: null,
+    sourceType: null,
+    sourceUrl: null,
+    isReady: false,
+    streamInfo: null,
+};
+/**
+ * Create a player context store for sharing player state across components.
+ *
+ * @example
+ * ```svelte
+ * <!-- Parent component -->
+ * <script>
+ *   import { createPlayerContext, setPlayerContext } from './stores/playerContext';
+ *   const playerContext = createPlayerContext();
+ *   setPlayerContext(playerContext);
+ * </script>
+ *
+ * <!-- Child component -->
+ * <script>
+ *   import { getPlayerContext } from './stores/playerContext';
+ *   const playerContext = getPlayerContext();
+ *   $: videoEl = $playerContext.videoElement;
+ * </script>
+ * ```
+ */
+export function createPlayerContext() {
+    const store = writable(initialState);
+    function setVideoElement(el) {
+        store.update(s => ({ ...s, videoElement: el }));
+    }
+    function setPlayer(player) {
+        store.update(s => ({
+            ...s,
+            player,
+            playerName: player?.capability.name ?? null,
+            playerShortname: player?.capability.shortname ?? null,
+        }));
+    }
+    function setSource(type, url) {
+        store.update(s => ({ ...s, sourceType: type, sourceUrl: url }));
+    }
+    function setStreamInfo(info) {
+        store.update(s => ({ ...s, streamInfo: info }));
+    }
+    function setReady(ready) {
+        store.update(s => ({ ...s, isReady: ready }));
+    }
+    function reset() {
+        store.set(initialState);
+    }
+    return {
+        subscribe: store.subscribe,
+        setVideoElement,
+        setPlayer,
+        setSource,
+        setStreamInfo,
+        setReady,
+        reset,
+    };
+}
+/**
+ * Set player context in Svelte context (call in parent component)
+ */
+export function setPlayerContextInComponent(context) {
+    setContext(PLAYER_CONTEXT_KEY, context);
+}
+/**
+ * Get player context from Svelte context (call in child components)
+ */
+export function getPlayerContextFromComponent() {
+    return getContext(PLAYER_CONTEXT_KEY);
+}
+/**
+ * Get player context or create a fallback that uses globalPlayerManager
+ */
+export function getPlayerContextOrFallback() {
+    const context = getContext(PLAYER_CONTEXT_KEY);
+    if (context)
+        return context;
+    // Fallback: create a derived context from globalPlayerManager
+    return createFallbackContext();
+}
+/**
+ * Create a fallback context that reads from globalPlayerManager
+ * Uses event-driven updates instead of polling
+ */
+function createFallbackContext() {
+    const store = writable(initialState);
+    // Sync state from globalPlayerManager
+    function syncState() {
+        const player = globalPlayerManager.getCurrentPlayer();
+        const videoEl = player?.getVideoElement() ?? null;
+        store.update(s => ({
+            ...s,
+            videoElement: videoEl,
+            player: player ?? null,
+            playerName: player?.capability.name ?? null,
+            playerShortname: player?.capability.shortname ?? null,
+            isReady: !!videoEl,
+        }));
+    }
+    // Event handlers
+    const handleInitialized = () => syncState();
+    const handleSelectionChanged = () => syncState();
+    // Start/stop event listeners based on subscriber count
+    const originalSubscribe = store.subscribe;
+    let subscribers = 0;
+    const subscribe = (run, invalidate) => {
+        subscribers++;
+        if (subscribers === 1) {
+            // Initial sync
+            syncState();
+            // Subscribe to events
+            globalPlayerManager.on('playerInitialized', handleInitialized);
+            globalPlayerManager.on('selection-changed', handleSelectionChanged);
+        }
+        const unsubscribe = originalSubscribe(run, invalidate);
+        return () => {
+            unsubscribe();
+            subscribers--;
+            if (subscribers === 0) {
+                // Unsubscribe from events
+                globalPlayerManager.off('playerInitialized', handleInitialized);
+                globalPlayerManager.off('selection-changed', handleSelectionChanged);
+            }
+        };
+    };
+    return {
+        subscribe,
+        setVideoElement: () => { },
+        setPlayer: () => { },
+        setSource: () => { },
+        setStreamInfo: () => { },
+        setReady: () => { },
+        reset: () => { },
+    };
+}
+// Convenience derived stores
+export function createDerivedVideoElement(store) {
+    return derived(store, $state => $state.videoElement);
+}
+export function createDerivedIsReady(store) {
+    return derived(store, $state => $state.isReady);
+}
+export function createDerivedPlayerInfo(store) {
+    return derived(store, $state => ({
+        name: $state.playerName,
+        shortname: $state.playerShortname,
+    }));
+}
+export default createPlayerContext;