@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/hooks/use-keyboard-controls.js

@@ -0,0 +1,83 @@
+"use client";
+import { useEffect } from "react";
+export function useKeyboardControls({ enabled = true, state, controls, seekStep = 10, volumeStep = 0.1 }) {
+    const handleKeyDown = (event) => {
+        if (!enabled)
+            return;
+        // Don't handle keyboard events if user is typing in an input
+        const target = event.target;
+        if (target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA" ||
+            target.contentEditable === "true") {
+            return;
+        }
+        switch (event.code) {
+            case "Space":
+            case "KeyK":
+                event.preventDefault();
+                controls.toggle();
+                break;
+            case "KeyM":
+                event.preventDefault();
+                controls.toggleMute();
+                break;
+            case "KeyF":
+                event.preventDefault();
+                controls.toggleFullscreen();
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                controls.seek(Math.max(0, state.currentTime - seekStep));
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                controls.seek(Math.min(state.duration, state.currentTime + seekStep));
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                controls.setVolume(Math.min(1, state.volume + volumeStep));
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                controls.setVolume(Math.max(0, state.volume - volumeStep));
+                break;
+            case "Digit0":
+            case "Digit1":
+            case "Digit2":
+            case "Digit3":
+            case "Digit4":
+            case "Digit5":
+            case "Digit6":
+            case "Digit7":
+            case "Digit8":
+            case "Digit9":
+                event.preventDefault();
+                const digit = parseInt(event.code.replace("Digit", ""), 10);
+                const percentage = digit / 10;
+                controls.seek(state.duration * percentage);
+                break;
+            case "Home":
+                event.preventDefault();
+                controls.seek(0);
+                break;
+            case "End":
+                event.preventDefault();
+                controls.seek(state.duration);
+                break;
+            default:
+                // Don't prevent default for unhandled keys
+                break;
+        }
+    };
+    useEffect(() => {
+        if (!enabled)
+            return;
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [enabled, handleKeyDown]);
+    return {
+        handleKeyDown
+    };
+}

package/dist/src/hooks/use-keyboard-controls.ts

@@ -0,0 +1,115 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+import type { MediaPlayerControls, MediaPlayerState } from "../types/index"
+
+interface UseKeyboardControlsOptions {
+	enabled?: boolean
+	state: MediaPlayerState
+	controls: MediaPlayerControls
+	seekStep?: number // seconds to seek forward/backward
+	volumeStep?: number // volume step (0-1)
+}
+
+export function useKeyboardControls({
+	enabled = true,
+	state,
+	controls,
+	seekStep = 10,
+	volumeStep = 0.1
+}: UseKeyboardControlsOptions) {
+	const handleKeyDown = (event: KeyboardEvent) => {
+    			if (!enabled) return
+
+    			// Don't handle keyboard events if user is typing in an input
+    			const target = event.target as HTMLElement
+    			if (
+    				target.tagName === "INPUT" ||
+    				target.tagName === "TEXTAREA" ||
+    				target.contentEditable === "true"
+    			) {
+    				return
+    			}
+
+    			switch (event.code) {
+    				case "Space":
+    				case "KeyK":
+    					event.preventDefault()
+    					controls.toggle()
+    					break
+
+    				case "KeyM":
+    					event.preventDefault()
+    					controls.toggleMute()
+    					break
+
+    				case "KeyF":
+    					event.preventDefault()
+    					controls.toggleFullscreen()
+    					break
+
+    				case "ArrowLeft":
+    					event.preventDefault()
+    					controls.seek(Math.max(0, state.currentTime - seekStep))
+    					break
+
+    				case "ArrowRight":
+    					event.preventDefault()
+    					controls.seek(Math.min(state.duration, state.currentTime + seekStep))
+    					break
+
+    				case "ArrowUp":
+    					event.preventDefault()
+    					controls.setVolume(Math.min(1, state.volume + volumeStep))
+    					break
+
+    				case "ArrowDown":
+    					event.preventDefault()
+    					controls.setVolume(Math.max(0, state.volume - volumeStep))
+    					break
+
+    				case "Digit0":
+    				case "Digit1":
+    				case "Digit2":
+    				case "Digit3":
+    				case "Digit4":
+    				case "Digit5":
+    				case "Digit6":
+    				case "Digit7":
+    				case "Digit8":
+    				case "Digit9":
+    					event.preventDefault()
+    					const digit = parseInt(event.code.replace("Digit", ""), 10)
+    					const percentage = digit / 10
+    					controls.seek(state.duration * percentage)
+    					break
+
+    				case "Home":
+    					event.preventDefault()
+    					controls.seek(0)
+    					break
+
+    				case "End":
+    					event.preventDefault()
+    					controls.seek(state.duration)
+    					break
+
+    				default:
+    					// Don't prevent default for unhandled keys
+    					break
+    			}
+    		}
+
+	useEffect(() => {
+		if (!enabled) return
+
+		document.addEventListener("keydown", handleKeyDown)
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown)
+		}
+	}, [enabled, handleKeyDown])
+
+	return {
+		handleKeyDown
+	}
+}

package/dist/src/hooks/use-media-actions.d.ts

@@ -0,0 +1,62 @@
+import type { MediaActionState, EnhancedMediaStore } from "../context/media-store";
+import { MediaActionTypes } from "../context/media-context";
+export interface MediaActionPayloads {
+    [MediaActionTypes.PLAY]: void;
+    [MediaActionTypes.PAUSE]: void;
+    [MediaActionTypes.SEEK]: number;
+    [MediaActionTypes.SET_VOLUME]: number;
+    [MediaActionTypes.MUTE]: void;
+    [MediaActionTypes.UNMUTE]: void;
+    [MediaActionTypes.TOGGLE_MUTE]: void;
+    [MediaActionTypes.SET_DURATION]: number;
+    [MediaActionTypes.SET_CURRENT_TIME]: number;
+    [MediaActionTypes.SET_BUFFERED]: TimeRanges | null;
+    [MediaActionTypes.SET_LOADING]: boolean;
+    [MediaActionTypes.SET_ERROR]: string | null;
+    [MediaActionTypes.ENTER_FULLSCREEN]: void;
+    [MediaActionTypes.EXIT_FULLSCREEN]: void;
+    [MediaActionTypes.ENTER_PIP]: void;
+    [MediaActionTypes.EXIT_PIP]: void;
+    [MediaActionTypes.SET_PLAYBACK_RATE]: number;
+    [MediaActionTypes.SET_SUBTITLE_TRACK]: TextTrack | null;
+    [MediaActionTypes.SET_RENDITION]: string | null;
+    [MediaActionTypes.TOGGLE_SUBTITLES]: void;
+    [MediaActionTypes.PREVIEW_TIME]: number | null;
+    [MediaActionTypes.CLEAR_PREVIEW]: void;
+}
+export declare function useMediaActionState(store: EnhancedMediaStore): MediaActionState;
+export declare function useMediaActions(store: EnhancedMediaStore): {
+    actionState: MediaActionState;
+    retryLastAction: () => Promise<void>;
+    isLoading: boolean;
+    hasError: boolean;
+    errorMessage: string | null;
+    retryCount: number;
+    togglePlayPause: (isPlaying: boolean) => Promise<void>;
+    seekWithPreview: (time: number) => Promise<void>;
+    adjustVolume: (delta: number, currentVolume: number) => Promise<void>;
+    toggleFullscreenOptimistic: (isFullscreen: boolean) => Promise<void>;
+    play: (optimistic?: boolean) => Promise<void>;
+    pause: (optimistic?: boolean) => Promise<void>;
+    seek: (payload: number, optimistic?: boolean) => Promise<void>;
+    setVolume: (payload: number, optimistic?: boolean) => Promise<void>;
+    mute: (optimistic?: boolean) => Promise<void>;
+    unmute: (optimistic?: boolean) => Promise<void>;
+    toggleMute: (optimistic?: boolean) => Promise<void>;
+    setDuration: (payload: number, optimistic?: boolean) => Promise<void>;
+    setCurrentTime: (payload: number, optimistic?: boolean) => Promise<void>;
+    setBuffered: (payload: TimeRanges | null, optimistic?: boolean) => Promise<void>;
+    setLoading: (payload: boolean, optimistic?: boolean) => Promise<void>;
+    setError: (payload: string | null, optimistic?: boolean) => Promise<void>;
+    enterFullscreen: (optimistic?: boolean) => Promise<void>;
+    exitFullscreen: (optimistic?: boolean) => Promise<void>;
+    enterPiP: (optimistic?: boolean) => Promise<void>;
+    exitPiP: (optimistic?: boolean) => Promise<void>;
+    setPlaybackRate: (payload: number, optimistic?: boolean) => Promise<void>;
+    setSubtitleTrack: (payload: TextTrack | null, optimistic?: boolean) => Promise<void>;
+    setRendition: (payload: string | null, optimistic?: boolean) => Promise<void>;
+    toggleSubtitles: (optimistic?: boolean) => Promise<void>;
+    previewTime: (payload: number | null, optimistic?: boolean) => Promise<void>;
+    clearPreview: (optimistic?: boolean) => Promise<void>;
+};
+//# sourceMappingURL=use-media-actions.d.ts.map

package/dist/src/hooks/use-media-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-actions.d.ts","sourceRoot":"","sources":["use-media-actions.ts"],"names":[],"mappings":"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"}

package/dist/src/hooks/use-media-actions.js

@@ -0,0 +1,121 @@
+"use client";
+import React from "react";
+import { MediaActionTypes } from "../context/media-context";
+// Action creator factory
+function createOptimisticAction(type, store) {
+    return ((payload, optimistic = false) => {
+        const action = {
+            type,
+            detail: payload,
+            optimistic,
+            timestamp: Date.now()
+        };
+        if (optimistic) {
+            return store.dispatchOptimistic(action);
+        }
+        else {
+            store.dispatch(action);
+            return Promise.resolve();
+        }
+    });
+}
+// React 19 useActionState integration
+export function useMediaActionState(store) {
+    const [actionState, setActionState] = React.useState(store.getActionState());
+    // Subscribe to action state changes
+    React.useEffect(() => {
+        const unsubscribe = store.subscribe(() => {
+            const newActionState = store.getActionState();
+            setActionState(current => JSON.stringify(current) !== JSON.stringify(newActionState)
+                ? newActionState
+                : current);
+        });
+        return unsubscribe;
+    }, [store]);
+    return actionState;
+}
+// Media actions hook with React 19 optimistic updates
+export function useMediaActions(store) {
+    // Create action creators with optimistic support
+    const actions = React.useMemo(() => ({
+        // Playback actions
+        play: createOptimisticAction(MediaActionTypes.PLAY, store),
+        pause: createOptimisticAction(MediaActionTypes.PAUSE, store),
+        seek: createOptimisticAction(MediaActionTypes.SEEK, store),
+        // Volume actions  
+        setVolume: createOptimisticAction(MediaActionTypes.SET_VOLUME, store),
+        mute: createOptimisticAction(MediaActionTypes.MUTE, store),
+        unmute: createOptimisticAction(MediaActionTypes.UNMUTE, store),
+        toggleMute: createOptimisticAction(MediaActionTypes.TOGGLE_MUTE, store),
+        // Media state actions
+        setDuration: createOptimisticAction(MediaActionTypes.SET_DURATION, store),
+        setCurrentTime: createOptimisticAction(MediaActionTypes.SET_CURRENT_TIME, store),
+        setBuffered: createOptimisticAction(MediaActionTypes.SET_BUFFERED, store),
+        setLoading: createOptimisticAction(MediaActionTypes.SET_LOADING, store),
+        setError: createOptimisticAction(MediaActionTypes.SET_ERROR, store),
+        // Display actions
+        enterFullscreen: createOptimisticAction(MediaActionTypes.ENTER_FULLSCREEN, store),
+        exitFullscreen: createOptimisticAction(MediaActionTypes.EXIT_FULLSCREEN, store),
+        enterPiP: createOptimisticAction(MediaActionTypes.ENTER_PIP, store),
+        exitPiP: createOptimisticAction(MediaActionTypes.EXIT_PIP, store),
+        // Advanced actions
+        setPlaybackRate: createOptimisticAction(MediaActionTypes.SET_PLAYBACK_RATE, store),
+        setSubtitleTrack: createOptimisticAction(MediaActionTypes.SET_SUBTITLE_TRACK, store),
+        setRendition: createOptimisticAction(MediaActionTypes.SET_RENDITION, store),
+        toggleSubtitles: createOptimisticAction(MediaActionTypes.TOGGLE_SUBTITLES, store),
+        // Preview actions
+        previewTime: createOptimisticAction(MediaActionTypes.PREVIEW_TIME, store),
+        clearPreview: createOptimisticAction(MediaActionTypes.CLEAR_PREVIEW, store)
+    }), [store]);
+    // Get action state for loading/error handling
+    const actionState = useMediaActionState(store);
+    // Convenience methods that commonly use optimistic updates
+    const optimisticActions = React.useMemo(() => ({
+        // These actions benefit from immediate UI feedback
+        togglePlayPause: async (isPlaying) => {
+            if (isPlaying) {
+                await actions.pause(true); // optimistic
+            }
+            else {
+                await actions.play(true); // optimistic
+            }
+        },
+        seekWithPreview: async (time) => {
+            // Immediate preview update, then actual seek
+            await actions.previewTime(time, true);
+            await actions.seek(time, true);
+        },
+        adjustVolume: async (delta, currentVolume) => {
+            const newVolume = Math.max(0, Math.min(1, currentVolume + delta));
+            await actions.setVolume(newVolume, true);
+        },
+        toggleFullscreenOptimistic: async (isFullscreen) => {
+            if (isFullscreen) {
+                await actions.exitFullscreen(true);
+            }
+            else {
+                await actions.enterFullscreen(true);
+            }
+        }
+    }), [actions]);
+    // Retry failed action
+    const retryLastAction = React.useCallback(async () => {
+        const { lastAction } = actionState;
+        if (lastAction && actionState.error) {
+            await store.dispatchOptimistic({
+                ...lastAction,
+                retryCount: (lastAction.retryCount || 0) + 1
+            });
+        }
+    }, [store, actionState]);
+    return {
+        ...actions,
+        ...optimisticActions,
+        actionState,
+        retryLastAction,
+        isLoading: actionState.pending,
+        hasError: !!actionState.error,
+        errorMessage: actionState.error,
+        retryCount: actionState.retryCount
+    };
+}

package/dist/src/hooks/use-media-actions.ts

@@ -0,0 +1,175 @@
+"use client"
+
+import React from "react"
+import type { MediaActionType, MediaState } from "../context/media-context"
+import type { OptimisticMediaAction, MediaActionState, EnhancedMediaStore } from "../context/media-store"
+import { MediaActionTypes } from "../context/media-context"
+
+// Action payload types
+export interface MediaActionPayloads {
+	[MediaActionTypes.PLAY]: void
+	[MediaActionTypes.PAUSE]: void
+	[MediaActionTypes.SEEK]: number
+	[MediaActionTypes.SET_VOLUME]: number
+	[MediaActionTypes.MUTE]: void
+	[MediaActionTypes.UNMUTE]: void
+	[MediaActionTypes.TOGGLE_MUTE]: void
+	[MediaActionTypes.SET_DURATION]: number
+	[MediaActionTypes.SET_CURRENT_TIME]: number
+	[MediaActionTypes.SET_BUFFERED]: TimeRanges | null
+	[MediaActionTypes.SET_LOADING]: boolean
+	[MediaActionTypes.SET_ERROR]: string | null
+	[MediaActionTypes.ENTER_FULLSCREEN]: void
+	[MediaActionTypes.EXIT_FULLSCREEN]: void
+	[MediaActionTypes.ENTER_PIP]: void
+	[MediaActionTypes.EXIT_PIP]: void
+	[MediaActionTypes.SET_PLAYBACK_RATE]: number
+	[MediaActionTypes.SET_SUBTITLE_TRACK]: TextTrack | null
+	[MediaActionTypes.SET_RENDITION]: string | null
+	[MediaActionTypes.TOGGLE_SUBTITLES]: void
+	[MediaActionTypes.PREVIEW_TIME]: number | null
+	[MediaActionTypes.CLEAR_PREVIEW]: void
+}
+
+// Enhanced action creator that returns a Promise
+type OptimisticActionCreator<T extends keyof MediaActionPayloads> = MediaActionPayloads[T] extends void
+	? (optimistic?: boolean) => Promise<void>
+	: (payload: MediaActionPayloads[T], optimistic?: boolean) => Promise<void>
+
+// Action creator factory
+function createOptimisticAction<T extends keyof MediaActionPayloads>(
+	type: T,
+	store: EnhancedMediaStore
+): OptimisticActionCreator<T> {
+	return ((payload?: any, optimistic = false) => {
+		const action: OptimisticMediaAction = {
+			type,
+			detail: payload,
+			optimistic,
+			timestamp: Date.now()
+		}
+
+		if (optimistic) {
+			return store.dispatchOptimistic(action)
+		} else {
+			store.dispatch(action)
+			return Promise.resolve()
+		}
+	}) as OptimisticActionCreator<T>
+}
+
+// React 19 useActionState integration
+export function useMediaActionState(store: EnhancedMediaStore) {
+	const [actionState, setActionState] = React.useState<MediaActionState>(store.getActionState())
+
+	// Subscribe to action state changes
+	React.useEffect(() => {
+		const unsubscribe = store.subscribe(() => {
+			const newActionState = store.getActionState()
+			setActionState(current => 
+				JSON.stringify(current) !== JSON.stringify(newActionState) 
+					? newActionState 
+					: current
+			)
+		})
+		return unsubscribe
+	}, [store])
+
+	return actionState
+}
+
+// Media actions hook with React 19 optimistic updates
+export function useMediaActions(store: EnhancedMediaStore) {
+	// Create action creators with optimistic support
+	const actions = React.useMemo(() => ({
+		// Playback actions
+		play: createOptimisticAction(MediaActionTypes.PLAY, store),
+		pause: createOptimisticAction(MediaActionTypes.PAUSE, store),
+		seek: createOptimisticAction(MediaActionTypes.SEEK, store),
+		
+		// Volume actions  
+		setVolume: createOptimisticAction(MediaActionTypes.SET_VOLUME, store),
+		mute: createOptimisticAction(MediaActionTypes.MUTE, store),
+		unmute: createOptimisticAction(MediaActionTypes.UNMUTE, store),
+		toggleMute: createOptimisticAction(MediaActionTypes.TOGGLE_MUTE, store),
+		
+		// Media state actions
+		setDuration: createOptimisticAction(MediaActionTypes.SET_DURATION, store),
+		setCurrentTime: createOptimisticAction(MediaActionTypes.SET_CURRENT_TIME, store),
+		setBuffered: createOptimisticAction(MediaActionTypes.SET_BUFFERED, store),
+		setLoading: createOptimisticAction(MediaActionTypes.SET_LOADING, store),
+		setError: createOptimisticAction(MediaActionTypes.SET_ERROR, store),
+		
+		// Display actions
+		enterFullscreen: createOptimisticAction(MediaActionTypes.ENTER_FULLSCREEN, store),
+		exitFullscreen: createOptimisticAction(MediaActionTypes.EXIT_FULLSCREEN, store),
+		enterPiP: createOptimisticAction(MediaActionTypes.ENTER_PIP, store),
+		exitPiP: createOptimisticAction(MediaActionTypes.EXIT_PIP, store),
+		
+		// Advanced actions
+		setPlaybackRate: createOptimisticAction(MediaActionTypes.SET_PLAYBACK_RATE, store),
+		setSubtitleTrack: createOptimisticAction(MediaActionTypes.SET_SUBTITLE_TRACK, store),
+		setRendition: createOptimisticAction(MediaActionTypes.SET_RENDITION, store),
+		toggleSubtitles: createOptimisticAction(MediaActionTypes.TOGGLE_SUBTITLES, store),
+		
+		// Preview actions
+		previewTime: createOptimisticAction(MediaActionTypes.PREVIEW_TIME, store),
+		clearPreview: createOptimisticAction(MediaActionTypes.CLEAR_PREVIEW, store)
+	}), [store])
+
+	// Get action state for loading/error handling
+	const actionState = useMediaActionState(store)
+
+	// Convenience methods that commonly use optimistic updates
+	const optimisticActions = React.useMemo(() => ({
+		// These actions benefit from immediate UI feedback
+		togglePlayPause: async (isPlaying: boolean) => {
+			if (isPlaying) {
+				await actions.pause(true) // optimistic
+			} else {
+				await actions.play(true) // optimistic
+			}
+		},
+		
+		seekWithPreview: async (time: number) => {
+			// Immediate preview update, then actual seek
+			await actions.previewTime(time, true)
+			await actions.seek(time, true)
+		},
+		
+		adjustVolume: async (delta: number, currentVolume: number) => {
+			const newVolume = Math.max(0, Math.min(1, currentVolume + delta))
+			await actions.setVolume(newVolume, true)
+		},
+		
+		toggleFullscreenOptimistic: async (isFullscreen: boolean) => {
+			if (isFullscreen) {
+				await actions.exitFullscreen(true)
+			} else {
+				await actions.enterFullscreen(true)
+			}
+		}
+	}), [actions])
+
+	// Retry failed action
+	const retryLastAction = React.useCallback(async () => {
+		const { lastAction } = actionState
+		if (lastAction && actionState.error) {
+			await store.dispatchOptimistic({
+				...lastAction,
+				retryCount: (lastAction.retryCount || 0) + 1
+			})
+		}
+	}, [store, actionState])
+
+	return {
+		...actions,
+		...optimisticActions,
+		actionState,
+		retryLastAction,
+		isLoading: actionState.pending,
+		hasError: !!actionState.error,
+		errorMessage: actionState.error,
+		retryCount: actionState.retryCount
+	}
+}

package/dist/src/hooks/use-media-metadata.d.ts

@@ -0,0 +1,11 @@
+export interface MediaMetadata {
+    title?: string;
+    artist?: string;
+    duration: number;
+    format: string;
+    width?: number;
+    height?: number;
+}
+export declare function useMediaMetadata(src: string): MediaMetadata;
+export declare function formatTime(seconds: number): string;
+//# sourceMappingURL=use-media-metadata.d.ts.map

package/dist/src/hooks/use-media-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-metadata.d.ts","sourceRoot":"","sources":["use-media-metadata.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AA6DD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAG3D;AAGD,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAYlD"}

package/dist/src/hooks/use-media-metadata.js

@@ -0,0 +1,74 @@
+import { use, cache } from 'react';
+// Cache metadata fetches to prevent duplicate requests
+const fetchMetadata = cache(async (src) => {
+    try {
+        // Create a video element to get metadata
+        const video = document.createElement('video');
+        video.crossOrigin = 'anonymous';
+        video.preload = 'metadata';
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                video.removeEventListener('loadedmetadata', onMetadata);
+                video.removeEventListener('error', onError);
+                reject(new Error('Metadata loading timeout'));
+            }, 10000); // 10 second timeout
+            const onMetadata = () => {
+                clearTimeout(timeout);
+                video.removeEventListener('loadedmetadata', onMetadata);
+                video.removeEventListener('error', onError);
+                const metadata = {
+                    duration: video.duration || 0,
+                    format: getFormatFromSrc(src),
+                    width: video.videoWidth || undefined,
+                    height: video.videoHeight || undefined,
+                };
+                resolve(metadata);
+            };
+            const onError = (error) => {
+                clearTimeout(timeout);
+                video.removeEventListener('loadedmetadata', onMetadata);
+                video.removeEventListener('error', onError);
+                reject(new Error('Failed to load media metadata'));
+            };
+            video.addEventListener('loadedmetadata', onMetadata);
+            video.addEventListener('error', onError);
+            video.src = src;
+        });
+    }
+    catch (error) {
+        throw new Error(`Failed to fetch metadata: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+});
+function getFormatFromSrc(src) {
+    const url = new URL(src, window.location.href);
+    const pathname = url.pathname.toLowerCase();
+    if (pathname.endsWith('.mp4'))
+        return 'MP4';
+    if (pathname.endsWith('.webm'))
+        return 'WebM';
+    if (pathname.endsWith('.ogg'))
+        return 'OGG';
+    if (pathname.endsWith('.m3u8'))
+        return 'HLS';
+    if (pathname.endsWith('.mpd'))
+        return 'DASH';
+    return 'Unknown';
+}
+export function useMediaMetadata(src) {
+    // Use the React 19 use() hook for async data
+    return use(fetchMetadata(src));
+}
+// Utility function to format time
+export function formatTime(seconds) {
+    if (!isFinite(seconds) || isNaN(seconds))
+        return '0:00';
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    if (hours > 0) {
+        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    else {
+        return `${minutes}:${secs.toString().padStart(2, '0')}`;
+    }
+}