@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/context/media-context.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import React from "react"
+
+// Media action types
+export const MediaActionTypes = {
+	PLAY: "PLAY",
+	PAUSE: "PAUSE",
+	SEEK: "SEEK",
+	SET_VOLUME: "SET_VOLUME",
+	MUTE: "MUTE",
+	UNMUTE: "UNMUTE",
+	TOGGLE_MUTE: "TOGGLE_MUTE",
+	SET_DURATION: "SET_DURATION",
+	SET_CURRENT_TIME: "SET_CURRENT_TIME",
+	SET_BUFFERED: "SET_BUFFERED",
+	SET_LOADING: "SET_LOADING",
+	SET_ERROR: "SET_ERROR",
+	ENTER_FULLSCREEN: "ENTER_FULLSCREEN",
+	EXIT_FULLSCREEN: "EXIT_FULLSCREEN",
+	ENTER_PIP: "ENTER_PIP",
+	EXIT_PIP: "EXIT_PIP",
+	SET_PLAYBACK_RATE: "SET_PLAYBACK_RATE",
+	SET_SUBTITLE_TRACK: "SET_SUBTITLE_TRACK",
+	SET_RENDITION: "SET_RENDITION",
+	TOGGLE_SUBTITLES: "TOGGLE_SUBTITLES",
+	PREVIEW_TIME: "PREVIEW_TIME",
+	CLEAR_PREVIEW: "CLEAR_PREVIEW",
+	// New actions for Video.js adapter
+	SET_BUFFERING: "SET_BUFFERING",
+	SET_QUALITY_LEVEL: "SET_QUALITY_LEVEL",
+	SET_BANDWIDTH_ESTIMATE: "SET_BANDWIDTH_ESTIMATE",
+	SET_ACTIVE_TEXT_TRACKS: "SET_ACTIVE_TEXT_TRACKS"
+} as const
+
+export type MediaActionType = (typeof MediaActionTypes)[keyof typeof MediaActionTypes]
+
+// Media state interface
+export interface MediaState {
+	// Playback state
+	isPlaying: boolean
+	currentTime: number
+	duration: number
+	buffered: TimeRanges | null
+	isLoading: boolean
+	isBuffering: boolean
+	error: string | null
+
+	// Audio state
+	volume: number
+	isMuted: boolean
+
+	// Video state
+	isFullscreen: boolean
+	isPictureInPicture: boolean
+
+	// Advanced features
+	playbackRate: number
+	subtitlesShowing: boolean
+	selectedSubtitleTrack: TextTrack | null
+	selectedRendition: string | null
+	qualityLevel: number
+	bandwidthEstimate: number
+	activeTextTracks: any[]
+
+	// Preview state (for seek preview)
+	previewTime: number | null
+	previewImage: string | null
+	previewCoords: { x: number; y: number; width: number; height: number } | null
+
+	// Media lists
+	subtitlesList: TextTrack[]
+	renditionList: Array<{ id: string; label: string; width?: number; height?: number }>
+}
+
+// Media action interface
+export interface MediaAction {
+	type: MediaActionType
+	detail?: any
+}
+
+// Media context interface
+export interface MediaContextValue {
+	mediaId: string
+	labelId: string
+	descriptionId: string
+	dir?: "ltr" | "rtl"
+	rootRef: React.RefObject<HTMLDivElement | null>
+	mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>
+	portalContainer?: HTMLElement
+	tooltipDelayDuration: number
+	tooltipSideOffset: number
+	disabled: boolean
+	isVideo: boolean
+	withoutTooltip: boolean
+}
+
+// Store interface for internal state management
+export interface MediaStore {
+	subscribe: (callback: () => void) => () => void
+	getState: () => MediaState
+	setState: (updates: Partial<MediaState>) => void
+	dispatch: (action: MediaAction) => void
+}
+
+// Create the media context
+export const MediaContext = React.createContext<MediaContextValue | null>(null)
+
+// Hook to use media context
+export function useMediaContext() {
+	const context = React.useContext(MediaContext)
+	if (!context) {
+		throw new Error("useMediaContext must be used within a MediaPlayer")
+	}
+	return context
+}
+
+// Store context for state management
+export const MediaStoreContext = React.createContext<MediaStore | null>(null)
+
+// Hook to use media store
+export function useMediaStore() {
+	const store = React.useContext(MediaStoreContext)
+	if (!store) {
+		throw new Error("useMediaStore must be used within a MediaPlayer")
+	}
+	return store
+}
+
+// Hook to select specific state values - React 19 optimized
+export function useMediaSelector<T>(selector: (state: MediaState) => T): T {
+	const store = useMediaStore()
+
+	// React 19 compiler will optimize this callback
+	const getSnapshot = () => selector(store.getState())
+
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+}
+
+// Hook to get dispatch function
+export function useMediaDispatch() {
+	const store = useMediaStore()
+	return store.dispatch
+}
+
+// React 19 enhanced context selector with optimistic updates
+export function useOptimisticMediaSelector<T>(selector: (state: MediaState) => T): T {
+	const store = useMediaStore()
+	
+	// Check if enhanced store is available
+	const isEnhanced = 'getOptimisticState' in store
+	
+	const getSnapshot = () => {
+		if (isEnhanced) {
+			// Use optimistic state for immediate UI feedback
+			return selector((store as any).getOptimisticState())
+		} else {
+			// Fall back to regular state
+			return selector(store.getState())
+		}
+	}
+
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+}
+
+// Hook for accessing React 19 enhanced features
+export function useMediaEnhancements() {
+	const store = useMediaStore()
+	const context = useMediaContext()
+	
+	const isEnhanced = 'getOptimisticState' in store
+	const errorHandler = 'errorHandler' in context ? (context as any).errorHandler : null
+	const isRehydrated = 'isRehydrated' in context ? (context as any).isRehydrated : true
+	
+	return {
+		isEnhanced,
+		errorHandler,
+		isRehydrated,
+		actionsState: isEnhanced ? (store as any).getActionState() : null
+	}
+}
+
+// Initial media state
+export const initialMediaState: MediaState = {
+	isPlaying: false,
+	currentTime: 0,
+	duration: 0,
+	buffered: null,
+	isLoading: false,
+	isBuffering: false,
+	error: null,
+	volume: 1,
+	isMuted: false,
+	isFullscreen: false,
+	isPictureInPicture: false,
+	playbackRate: 1,
+	subtitlesShowing: false,
+	selectedSubtitleTrack: null,
+	selectedRendition: null,
+	qualityLevel: -1,
+	bandwidthEstimate: 0,
+	activeTextTracks: [],
+	previewTime: null,
+	previewImage: null,
+	previewCoords: null,
+	subtitlesList: [],
+	renditionList: []
+}

package/dist/src/context/media-provider.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type MediaState } from "./media-context";
+import { type PersistenceConfig } from "./persistence";
+import { type RetryConfig } from "./error-handling";
+export interface MediaProviderProps {
+    children: React.ReactNode;
+    mediaId?: string;
+    labelId?: string;
+    descriptionId?: string;
+    dir?: "ltr" | "rtl";
+    portalContainer?: HTMLElement;
+    tooltipDelayDuration?: number;
+    tooltipSideOffset?: number;
+    disabled?: boolean;
+    isVideo?: boolean;
+    withoutTooltip?: boolean;
+    initialState?: Partial<MediaState>;
+    useEnhancedStore?: boolean;
+    persistenceConfig?: Partial<PersistenceConfig>;
+    retryConfig?: Partial<RetryConfig>;
+    enableOptimisticUpdates?: boolean;
+    enableErrorRecovery?: boolean;
+    onStateRehydrated?: (state: Partial<MediaState>) => void;
+}
+export declare function MediaProvider({ children, mediaId, labelId, descriptionId, dir, portalContainer, tooltipDelayDuration, tooltipSideOffset, disabled, isVideo, withoutTooltip, initialState, useEnhancedStore, persistenceConfig, retryConfig, enableOptimisticUpdates, enableErrorRecovery, onStateRehydrated }: MediaProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=media-provider.d.ts.map

package/dist/src/context/media-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-provider.d.ts","sourceRoot":"","sources":["media-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAKN,KAAK,UAAU,EAIf,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAC/E,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAyHtE,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAGlC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAA;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAClC,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;CACxD;AAGD,wBAAgB,aAAa,CAAC,EAC7B,QAAQ,EACR,OAAwB,EACxB,OAA8B,EAC9B,aAA0C,EAC1C,GAAW,EACX,eAAe,EACf,oBAA0B,EAC1B,iBAAqB,EACrB,QAAgB,EAChB,OAAc,EACd,cAAsB,EACtB,YAAiB,EAEjB,gBAAuB,EACvB,iBAAiB,EACjB,WAAW,EACX,uBAA8B,EAC9B,mBAA0B,EAC1B,iBAAiB,EACjB,EAAE,kBAAkB,2CAoFpB"}

package/dist/src/context/media-provider.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { MediaActionTypes, MediaContext, MediaStoreContext, initialMediaState } from "./media-context";
+import { createEnhancedMediaStore } from "./media-store";
+import { useAutoMediaPersistence } from "./persistence";
+import { MediaErrorHandler } from "./error-handling";
+// Legacy store for backward compatibility
+function createLegacyMediaStore(initialState = initialMediaState) {
+    let state = { ...initialState };
+    const listeners = new Set();
+    const subscribe = (callback) => {
+        listeners.add(callback);
+        return () => listeners.delete(callback);
+    };
+    const getState = () => state;
+    const setState = (updates) => {
+        const newState = { ...state, ...updates };
+        if (JSON.stringify(newState) !== JSON.stringify(state)) {
+            state = newState;
+            listeners.forEach((callback) => callback());
+        }
+    };
+    const dispatch = (action) => {
+        switch (action.type) {
+            case MediaActionTypes.PLAY:
+                setState({ isPlaying: true, error: null });
+                break;
+            case MediaActionTypes.PAUSE:
+                setState({ isPlaying: false });
+                break;
+            case MediaActionTypes.SEEK:
+                setState({ currentTime: action.detail });
+                break;
+            case MediaActionTypes.SET_VOLUME:
+                setState({ volume: Math.max(0, Math.min(1, action.detail)) });
+                break;
+            case MediaActionTypes.MUTE:
+                setState({ isMuted: true });
+                break;
+            case MediaActionTypes.UNMUTE:
+                setState({ isMuted: false });
+                break;
+            case MediaActionTypes.TOGGLE_MUTE:
+                setState({ isMuted: !state.isMuted });
+                break;
+            case MediaActionTypes.SET_DURATION:
+                setState({ duration: action.detail });
+                break;
+            case MediaActionTypes.SET_CURRENT_TIME:
+                setState({ currentTime: action.detail });
+                break;
+            case MediaActionTypes.SET_BUFFERED:
+                setState({ buffered: action.detail });
+                break;
+            case MediaActionTypes.SET_LOADING:
+                setState({ isLoading: action.detail });
+                break;
+            case MediaActionTypes.SET_ERROR:
+                setState({ error: action.detail, isLoading: false });
+                break;
+            case MediaActionTypes.ENTER_FULLSCREEN:
+                setState({ isFullscreen: true });
+                break;
+            case MediaActionTypes.EXIT_FULLSCREEN:
+                setState({ isFullscreen: false });
+                break;
+            case MediaActionTypes.ENTER_PIP:
+                setState({ isPictureInPicture: true });
+                break;
+            case MediaActionTypes.EXIT_PIP:
+                setState({ isPictureInPicture: false });
+                break;
+            case MediaActionTypes.SET_PLAYBACK_RATE:
+                setState({ playbackRate: action.detail });
+                break;
+            case MediaActionTypes.SET_SUBTITLE_TRACK:
+                setState({ selectedSubtitleTrack: action.detail });
+                break;
+            case MediaActionTypes.SET_RENDITION:
+                setState({ selectedRendition: action.detail });
+                break;
+            case MediaActionTypes.TOGGLE_SUBTITLES:
+                setState({ subtitlesShowing: !state.subtitlesShowing });
+                break;
+            case MediaActionTypes.PREVIEW_TIME:
+                setState({ previewTime: action.detail });
+                break;
+            case MediaActionTypes.CLEAR_PREVIEW:
+                setState({ previewTime: null, previewImage: null, previewCoords: null });
+                break;
+            default:
+                console.warn(`Unknown media action type: ${action.type}`);
+        }
+    };
+    return { subscribe, getState, setState, dispatch };
+}
+// Enhanced media provider component with React 19 features
+export function MediaProvider({ children, mediaId = "media-player", labelId = "media-player-label", descriptionId = "media-player-description", dir = "ltr", portalContainer, tooltipDelayDuration = 700, tooltipSideOffset = 4, disabled = false, isVideo = true, withoutTooltip = false, initialState = {}, 
+// React 19 enhancements
+useEnhancedStore = true, persistenceConfig, retryConfig, enableOptimisticUpdates = true, enableErrorRecovery = true, onStateRehydrated }) {
+    const rootRef = React.useRef(null);
+    const mediaRef = React.useRef(null);
+    // Create enhanced or legacy store based on configuration
+    const store = React.useMemo(() => {
+        const combinedInitialState = { ...initialMediaState, ...initialState };
+        if (useEnhancedStore) {
+            return createEnhancedMediaStore(combinedInitialState, persistenceConfig);
+        }
+        else {
+            return createLegacyMediaStore(combinedInitialState);
+        }
+    }, [useEnhancedStore, persistenceConfig]);
+    // Error handler for React 19 features
+    const errorHandler = React.useMemo(() => {
+        if (enableErrorRecovery && useEnhancedStore) {
+            return new MediaErrorHandler(retryConfig);
+        }
+        return null;
+    }, [enableErrorRecovery, useEnhancedStore, retryConfig]);
+    // Auto-persistence for React 19 enhanced store
+    const persistenceResult = useEnhancedStore ? useAutoMediaPersistence(store.getState(), mediaId, persistenceConfig) : null;
+    // Handle state rehydration callback
+    React.useEffect(() => {
+        if (persistenceResult?.isRehydrated && onStateRehydrated) {
+            const currentState = store.getState();
+            onStateRehydrated(currentState);
+        }
+    }, [persistenceResult?.isRehydrated, onStateRehydrated, store]);
+    // Enhanced context value with React 19 features
+    const contextValue = React.useMemo(() => ({
+        mediaId,
+        labelId,
+        descriptionId,
+        dir,
+        rootRef,
+        mediaRef,
+        portalContainer,
+        tooltipDelayDuration,
+        tooltipSideOffset,
+        disabled,
+        isVideo,
+        withoutTooltip,
+        // React 19 enhancements
+        errorHandler,
+        isEnhanced: useEnhancedStore,
+        isRehydrated: persistenceResult?.isRehydrated
+    }), [
+        mediaId,
+        labelId,
+        descriptionId,
+        dir,
+        portalContainer,
+        tooltipDelayDuration,
+        tooltipSideOffset,
+        disabled,
+        isVideo,
+        withoutTooltip,
+        errorHandler,
+        useEnhancedStore,
+        persistenceResult?.isRehydrated
+    ]);
+    return (_jsx(MediaContext.Provider, { value: contextValue, children: _jsx(MediaStoreContext.Provider, { value: store, children: children }) }));
+}

package/dist/src/context/media-provider.tsx

@@ -0,0 +1,265 @@
+"use client"
+
+import React from "react"
+import {
+	type MediaAction,
+	MediaActionTypes,
+	MediaContext,
+	type MediaContextValue,
+	type MediaState,
+	type MediaStore,
+	MediaStoreContext,
+	initialMediaState
+} from "./media-context"
+import { createEnhancedMediaStore, type EnhancedMediaStore } from "./media-store"
+import { useAutoMediaPersistence, type PersistenceConfig } from "./persistence"
+import { MediaErrorHandler, type RetryConfig } from "./error-handling"
+
+// Legacy store for backward compatibility
+function createLegacyMediaStore(initialState: MediaState = initialMediaState): MediaStore {
+	let state = { ...initialState }
+	const listeners = new Set<() => void>()
+
+	const subscribe = (callback: () => void) => {
+		listeners.add(callback)
+		return () => listeners.delete(callback)
+	}
+
+	const getState = () => state
+
+	const setState = (updates: Partial<MediaState>) => {
+		const newState = { ...state, ...updates }
+		if (JSON.stringify(newState) !== JSON.stringify(state)) {
+			state = newState
+			listeners.forEach((callback) => callback())
+		}
+	}
+
+	const dispatch = (action: MediaAction) => {
+		switch (action.type) {
+			case MediaActionTypes.PLAY:
+				setState({ isPlaying: true, error: null })
+				break
+
+			case MediaActionTypes.PAUSE:
+				setState({ isPlaying: false })
+				break
+
+			case MediaActionTypes.SEEK:
+				setState({ currentTime: action.detail })
+				break
+
+			case MediaActionTypes.SET_VOLUME:
+				setState({ volume: Math.max(0, Math.min(1, action.detail)) })
+				break
+
+			case MediaActionTypes.MUTE:
+				setState({ isMuted: true })
+				break
+
+			case MediaActionTypes.UNMUTE:
+				setState({ isMuted: false })
+				break
+
+			case MediaActionTypes.TOGGLE_MUTE:
+				setState({ isMuted: !state.isMuted })
+				break
+
+			case MediaActionTypes.SET_DURATION:
+				setState({ duration: action.detail })
+				break
+
+			case MediaActionTypes.SET_CURRENT_TIME:
+				setState({ currentTime: action.detail })
+				break
+
+			case MediaActionTypes.SET_BUFFERED:
+				setState({ buffered: action.detail })
+				break
+
+			case MediaActionTypes.SET_LOADING:
+				setState({ isLoading: action.detail })
+				break
+
+			case MediaActionTypes.SET_ERROR:
+				setState({ error: action.detail, isLoading: false })
+				break
+
+			case MediaActionTypes.ENTER_FULLSCREEN:
+				setState({ isFullscreen: true })
+				break
+
+			case MediaActionTypes.EXIT_FULLSCREEN:
+				setState({ isFullscreen: false })
+				break
+
+			case MediaActionTypes.ENTER_PIP:
+				setState({ isPictureInPicture: true })
+				break
+
+			case MediaActionTypes.EXIT_PIP:
+				setState({ isPictureInPicture: false })
+				break
+
+			case MediaActionTypes.SET_PLAYBACK_RATE:
+				setState({ playbackRate: action.detail })
+				break
+
+			case MediaActionTypes.SET_SUBTITLE_TRACK:
+				setState({ selectedSubtitleTrack: action.detail })
+				break
+
+			case MediaActionTypes.SET_RENDITION:
+				setState({ selectedRendition: action.detail })
+				break
+
+			case MediaActionTypes.TOGGLE_SUBTITLES:
+				setState({ subtitlesShowing: !state.subtitlesShowing })
+				break
+
+			case MediaActionTypes.PREVIEW_TIME:
+				setState({ previewTime: action.detail })
+				break
+
+			case MediaActionTypes.CLEAR_PREVIEW:
+				setState({ previewTime: null, previewImage: null, previewCoords: null })
+				break
+
+			default:
+				console.warn(`Unknown media action type: ${action.type}`)
+		}
+	}
+
+	return { subscribe, getState, setState, dispatch }
+}
+
+// Enhanced media provider props with React 19 features
+export interface MediaProviderProps {
+	children: React.ReactNode
+	mediaId?: string
+	labelId?: string
+	descriptionId?: string
+	dir?: "ltr" | "rtl"
+	portalContainer?: HTMLElement
+	tooltipDelayDuration?: number
+	tooltipSideOffset?: number
+	disabled?: boolean
+	isVideo?: boolean
+	withoutTooltip?: boolean
+	initialState?: Partial<MediaState>
+	
+	// React 19 enhancements
+	useEnhancedStore?: boolean
+	persistenceConfig?: Partial<PersistenceConfig>
+	retryConfig?: Partial<RetryConfig>
+	enableOptimisticUpdates?: boolean
+	enableErrorRecovery?: boolean
+	onStateRehydrated?: (state: Partial<MediaState>) => void
+}
+
+// Enhanced media provider component with React 19 features
+export function MediaProvider({
+	children,
+	mediaId = "media-player",
+	labelId = "media-player-label",
+	descriptionId = "media-player-description",
+	dir = "ltr",
+	portalContainer,
+	tooltipDelayDuration = 700,
+	tooltipSideOffset = 4,
+	disabled = false,
+	isVideo = true,
+	withoutTooltip = false,
+	initialState = {},
+	// React 19 enhancements
+	useEnhancedStore = true,
+	persistenceConfig,
+	retryConfig,
+	enableOptimisticUpdates = true,
+	enableErrorRecovery = true,
+	onStateRehydrated
+}: MediaProviderProps) {
+	const rootRef = React.useRef<HTMLDivElement>(null)
+	const mediaRef = React.useRef<HTMLVideoElement | HTMLAudioElement>(null)
+
+	// Create enhanced or legacy store based on configuration
+	const store = React.useMemo(() => {
+		const combinedInitialState = { ...initialMediaState, ...initialState }
+		
+		if (useEnhancedStore) {
+			return createEnhancedMediaStore(combinedInitialState, persistenceConfig) as MediaStore & EnhancedMediaStore
+		} else {
+			return createLegacyMediaStore(combinedInitialState)
+		}
+	}, [useEnhancedStore, persistenceConfig])
+
+	// Error handler for React 19 features
+	const errorHandler = React.useMemo(() => {
+		if (enableErrorRecovery && useEnhancedStore) {
+			return new MediaErrorHandler(retryConfig)
+		}
+		return null
+	}, [enableErrorRecovery, useEnhancedStore, retryConfig])
+
+	// Auto-persistence for React 19 enhanced store
+	const persistenceResult = useEnhancedStore ? useAutoMediaPersistence(
+		store.getState(),
+		mediaId,
+		persistenceConfig
+	) : null
+
+	// Handle state rehydration callback
+	React.useEffect(() => {
+		if (persistenceResult?.isRehydrated && onStateRehydrated) {
+			const currentState = store.getState()
+			onStateRehydrated(currentState)
+		}
+	}, [persistenceResult?.isRehydrated, onStateRehydrated, store])
+
+	// Enhanced context value with React 19 features
+	const contextValue = React.useMemo<MediaContextValue & {
+		errorHandler?: MediaErrorHandler | null
+		isEnhanced?: boolean
+		isRehydrated?: boolean
+	}>(
+		() => ({
+			mediaId,
+			labelId,
+			descriptionId,
+			dir,
+			rootRef,
+			mediaRef,
+			portalContainer,
+			tooltipDelayDuration,
+			tooltipSideOffset,
+			disabled,
+			isVideo,
+			withoutTooltip,
+			// React 19 enhancements
+			errorHandler,
+			isEnhanced: useEnhancedStore,
+			isRehydrated: persistenceResult?.isRehydrated
+		}),
+		[
+			mediaId,
+			labelId,
+			descriptionId,
+			dir,
+			portalContainer,
+			tooltipDelayDuration,
+			tooltipSideOffset,
+			disabled,
+			isVideo,
+			withoutTooltip,
+			errorHandler,
+			useEnhancedStore,
+			persistenceResult?.isRehydrated
+		]
+	)
+
+	return (
+		<MediaContext.Provider value={contextValue}>
+			<MediaStoreContext.Provider value={store}>{children}</MediaStoreContext.Provider>
+		</MediaContext.Provider>
+	)
+}

package/dist/src/context/media-store.d.ts

@@ -0,0 +1,33 @@
+import type { MediaState, MediaAction } from "./media-context";
+export interface OptimisticMediaAction extends MediaAction {
+    optimistic?: boolean;
+    retryCount?: number;
+    timestamp?: number;
+}
+export interface MediaActionState {
+    pending: boolean;
+    error: string | null;
+    lastAction: OptimisticMediaAction | null;
+    retryCount: number;
+}
+export interface PersistenceConfig {
+    enabled: boolean;
+    key: string;
+    persist: Array<keyof MediaState>;
+    debounceMs: number;
+}
+export interface EnhancedMediaStore {
+    subscribe: (callback: () => void) => () => void;
+    getState: () => MediaState;
+    setState: (updates: Partial<MediaState>) => void;
+    dispatch: (action: MediaAction) => void;
+    getOptimisticState: () => MediaState;
+    dispatchOptimistic: (action: OptimisticMediaAction) => Promise<void>;
+    rollbackOptimistic: (actionId: string) => void;
+    getActionState: () => MediaActionState;
+    setPersistenceConfig: (config: Partial<PersistenceConfig>) => void;
+    rehydrateFromStorage: () => Promise<void>;
+    clearPersistedState: () => void;
+}
+export declare function createEnhancedMediaStore(initialState?: MediaState, persistenceConfig?: Partial<PersistenceConfig>): EnhancedMediaStore;
+//# sourceMappingURL=media-store.d.ts.map