@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/src/components/enhanced/enhanced-media-player.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Enhanced Media Player with all optimizations applied
+ * Integrates React 19 features, HLS optimization, and intelligent preloading
+ */
+import { useRef, useState, useEffect, useCallback, useMemo, useTransition, useOptimistic, useDeferredValue, } from 'react';
+import { MediaResourcePreloader } from '../ui/media-resource-preloader';
+import { useIntelligentPreloading } from '../../hooks/use-intelligent-preloading';
+import { EnhancedHLSProvider, ENHANCED_HLS_DEFAULTS } from '../../core/providers/enhanced-hls-provider';
+import { EnhancedPluginManager } from '../../core/plugins/enhanced-plugin-system';
+import { cn } from '../../lib/utils';
+/**
+ * Enhanced Media Player Component
+ */
+export const EnhancedMediaPlayer = ({ src, sources, poster, autoPlay = false, muted = false, loop = false, controls = true, className, enableEnhancedHLS = true, enableIntelligentPreloading = true, enablePerformanceMonitoring = process.env.NODE_ENV === 'development', hlsConfig = {}, preloadingStrategy = 'balanced', showDebugPanel = false, onPlay, onPause, onEnded, onError, onTimeUpdate, onLoadStart, onCanPlay, ...props }) => {
+    const videoRef = useRef(null);
+    const containerRef = useRef(null);
+    const hlsProviderRef = useRef(null);
+    const pluginManagerRef = useRef(null);
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    const optimisticState = useOptimistic({ isPlaying: false, volume: 1 }, (state, update) => ({ ...state, ...update }));
+    // Media state
+    const [mediaState, setMediaState] = useState({
+        isPlaying: false,
+        currentTime: 0,
+        duration: 0,
+        volume: 1,
+        isMuted: muted,
+        isFullscreen: false,
+        isBuffering: false,
+        quality: 0,
+        error: null,
+    });
+    // Performance metrics
+    const [performanceMetrics, setPerformanceMetrics] = useState({
+        fps: 0,
+        memoryUsage: 0,
+        bufferHealth: 0,
+        networkBandwidth: 0,
+        droppedFrames: 0,
+    });
+    // Deferred values for non-critical updates
+    const deferredCurrentTime = useDeferredValue(mediaState.currentTime);
+    const deferredVolume = useDeferredValue(mediaState.volume);
+    // Prepare media sources
+    const mediaSources = useMemo(() => {
+        if (sources) {
+            return sources;
+        }
+        if (src) {
+            const extension = src.split('.').pop()?.toLowerCase();
+            const type = getMediaTypeFromExtension(extension);
+            return [{ src, type }];
+        }
+        return [];
+    }, [src, sources]);
+    // Intelligent preloading
+    const preloadingControls = useIntelligentPreloading(mediaSources, {
+        trackUserBehavior: enableIntelligentPreloading,
+        adaptToNetwork: true,
+        strategy: preloadingStrategy,
+        maxPreloadItems: 3,
+    });
+    // Initialize HLS provider
+    const initializeHLS = useCallback(async () => {
+        if (!videoRef.current || !enableEnhancedHLS)
+            return;
+        const hlsConfig = { ...ENHANCED_HLS_DEFAULTS, ...hlsConfig };
+        const provider = new EnhancedHLSProvider(hlsConfig);
+        hlsProviderRef.current = provider;
+        try {
+            const hls = provider.initialize(videoRef.current, mediaSources[0].src, {
+                hlsConfig: hlsConfig,
+                onError: handleMediaError,
+            });
+            // Setup HLS event listeners
+            hls.on(Hls.Events.LEVEL_SWITCHED, handleQualityChange);
+            hls.on(Hls.Events.FRAG_BUFFERED, handleFragmentBuffered);
+            hls.on(Hls.Events.ERROR, handleHLSError);
+        }
+        catch (error) {
+            console.error('HLS initialization failed:', error);
+            fallbackToNativePlayback();
+        }
+    }, [enableEnhancedHLS, hlsConfig, mediaSources]);
+    // Fallback to native playback
+    const fallbackToNativePlayback = useCallback(() => {
+        if (!videoRef.current || !mediaSources[0])
+            return;
+        const source = document.createElement('source');
+        source.src = mediaSources[0].src;
+        source.type = getMediaTypeFromUrl(mediaSources[0].src);
+        videoRef.current.appendChild(source);
+        videoRef.current.load();
+    }, [mediaSources]);
+    // Media event handlers
+    const handlePlay = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isPlaying: true }));
+        });
+        onPlay?.();
+    }, [onPlay]);
+    const handlePause = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isPlaying: false }));
+        });
+        onPause?.();
+    }, [onPause]);
+    const handleEnded = useCallback(() => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, isPlaying: false }));
+        });
+        onEnded?.();
+    }, [onEnded]);
+    const handleTimeUpdate = useCallback(() => {
+        if (!videoRef.current)
+            return;
+        startTransition(() => {
+            setMediaState(prev => ({
+                ...prev,
+                currentTime: videoRef.current.currentTime,
+            }));
+        });
+        onTimeUpdate?.();
+    }, [onTimeUpdate]);
+    const handleLoadedMetadata = useCallback(() => {
+        if (!videoRef.current)
+            return;
+        startTransition(() => {
+            setMediaState(prev => ({
+                ...prev,
+                duration: videoRef.current.duration,
+            }));
+        });
+    }, []);
+    const handleVolumeChange = useCallback(() => {
+        if (!videoRef.current)
+            return;
+        startTransition(() => {
+            setMediaState(prev => ({
+                ...prev,
+                volume: videoRef.current.volume,
+                isMuted: videoRef.current.muted,
+            }));
+        });
+    }, []);
+    const handleQualityChange = useCallback((event, data) => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, quality: data.level }));
+        });
+    }, []);
+    const handleFragmentBuffered = useCallback(() => {
+        // Update buffer health
+        if (videoRef.current) {
+            const buffered = videoRef.current.buffered;
+            const currentTime = videoRef.current.currentTime;
+            let bufferHealth = 0;
+            for (let i = 0; i < buffered.length; i++) {
+                const start = buffered.start(i);
+                const end = buffered.end(i);
+                if (start <= currentTime && end > currentTime) {
+                    bufferHealth = end - currentTime;
+                    break;
+                }
+            }
+            setPerformanceMetrics(prev => ({ ...prev, bufferHealth }));
+        }
+    }, []);
+    const handleMediaError = useCallback((error) => {
+        startTransition(() => {
+            setMediaState(prev => ({ ...prev, error }));
+        });
+        onError?.(error);
+    }, [onError]);
+    const handleHLSError = useCallback((event, data) => {
+        if (data.fatal) {
+            console.error('Fatal HLS error:', data);
+            handleMediaError(new Error(`HLS Error: ${data.details}`));
+        }
+    }, [handleMediaError]);
+    // Performance monitoring
+    useEffect(() => {
+        if (!enablePerformanceMonitoring)
+            return;
+        let frameCount = 0;
+        let lastTime = performance.now();
+        const measureFPS = () => {
+            frameCount++;
+            const currentTime = performance.now();
+            if (currentTime - lastTime >= 1000) {
+                const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
+                setPerformanceMetrics(prev => ({ ...prev, fps }));
+                frameCount = 0;
+                lastTime = currentTime;
+            }
+            if (videoRef.current && !videoRef.current.paused) {
+                requestAnimationFrame(measureFPS);
+            }
+        };
+        if (videoRef.current) {
+            videoRef.current.addEventListener('play', measureFPS);
+        }
+        return () => {
+            if (videoRef.current) {
+                videoRef.current.removeEventListener('play', measureFPS);
+            }
+        };
+    }, [enablePerformanceMonitoring]);
+    // Memory monitoring
+    useEffect(() => {
+        if (!enablePerformanceMonitoring || !('memory' in performance))
+            return;
+        const interval = setInterval(() => {
+            const memory = performance.memory;
+            setPerformanceMetrics(prev => ({
+                ...prev,
+                memoryUsage: memory.usedJSHeapSize / 1024 / 1024, // MB
+            }));
+        }, 2000);
+        return () => clearInterval(interval);
+    }, [enablePerformanceMonitoring]);
+    // Initialize player
+    useEffect(() => {
+        if (!videoRef.current || mediaSources.length === 0)
+            return;
+        // Setup native event listeners
+        const video = videoRef.current;
+        video.addEventListener('play', handlePlay);
+        video.addEventListener('pause', handlePause);
+        video.addEventListener('ended', handleEnded);
+        video.addEventListener('timeupdate', handleTimeUpdate);
+        video.addEventListener('loadedmetadata', handleLoadedMetadata);
+        video.addEventListener('volumechange', handleVolumeChange);
+        video.addEventListener('loadstart', onLoadStart);
+        video.addEventListener('canplay', onCanPlay);
+        // Initialize HLS if needed
+        if (mediaSources[0].type === 'hls' && enableEnhancedHLS) {
+            initializeHLS();
+        }
+        else {
+            fallbackToNativePlayback();
+        }
+        // Initialize plugin manager
+        if (video) {
+            pluginManagerRef.current = new EnhancedPluginManager(video);
+        }
+        return () => {
+            // Cleanup
+            video.removeEventListener('play', handlePlay);
+            video.removeEventListener('pause', handlePause);
+            video.removeEventListener('ended', handleEnded);
+            video.removeEventListener('timeupdate', handleTimeUpdate);
+            video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            video.removeEventListener('volumechange', handleVolumeChange);
+            video.removeEventListener('loadstart', onLoadStart);
+            video.removeEventListener('canplay', onCanPlay);
+            hlsProviderRef.current?.destroy();
+            pluginManagerRef.current?.dispose();
+        };
+    }, [
+        mediaSources,
+        enableEnhancedHLS,
+        handlePlay,
+        handlePause,
+        handleEnded,
+        handleTimeUpdate,
+        handleLoadedMetadata,
+        handleVolumeChange,
+        onLoadStart,
+        onCanPlay,
+        initializeHLS,
+        fallbackToNativePlayback,
+    ]);
+    // Auto-play handling
+    useEffect(() => {
+        if (autoPlay && videoRef.current) {
+            videoRef.current.play().catch(error => {
+                console.warn('Auto-play failed:', error);
+            });
+        }
+    }, [autoPlay]);
+    // Render debug panel
+    const DebugPanel = useMemo(() => {
+        if (!showDebugPanel || process.env.NODE_ENV !== 'development')
+            return null;
+        return (_jsxs("div", { className: "fixed top-4 right-4 z-50 rounded-lg bg-black/80 p-4 font-mono text-white text-xs", children: [_jsx("h3", { className: "mb-2 font-bold", children: "Performance Metrics" }), _jsxs("div", { children: ["FPS: ", performanceMetrics.fps] }), _jsxs("div", { children: ["Memory: ", performanceMetrics.memoryUsage.toFixed(2), " MB"] }), _jsxs("div", { children: ["Buffer: ", performanceMetrics.bufferHealth.toFixed(2), "s"] }), _jsxs("div", { children: ["Time: ", deferredCurrentTime.toFixed(2), "s / ", mediaState.duration.toFixed(2), "s"] }), _jsxs("div", { children: ["Volume: ", Math.round(deferredVolume * 100), "%"] }), _jsxs("div", { children: ["Quality: ", mediaState.quality] }), _jsxs("div", { children: ["Playing: ", mediaState.isPlaying ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Buffering: ", isPending ? 'Yes' : 'No'] }), _jsx("h3", { className: "mt-3 mb-2 font-bold", children: "Preloading Stats" }), _jsxs("div", { children: ["Preloaded: ", preloadingControls.getStats().preloadedItems] }), _jsxs("div", { children: ["Engagement: ", preloadingControls.getStats().engagementScore.toFixed(1), "%"] }), _jsxs("div", { children: ["Queue: ", preloadingControls.getStats().queueLength] })] }));
+    }, [showDebugPanel, performanceMetrics, deferredCurrentTime, deferredVolume, mediaState, isPending, preloadingControls]);
+    return (_jsxs("div", { ref: containerRef, className: cn("relative aspect-video overflow-hidden rounded-lg bg-black", className), ...props, children: [enableIntelligentPreloading && (_jsx(MediaResourcePreloader, { sources: mediaSources, enableIntelligentPreloading: true, adaptToNetworkConditions: true, priority: "auto", strategy: preloadingStrategy })), _jsx("video", { ref: videoRef, className: "h-full w-full", poster: poster, muted: muted, loop: loop, playsInline: true, preload: "metadata", crossOrigin: "anonymous" }), isPending && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), mediaState.error && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/75", children: _jsxs("div", { className: "p-4 text-center text-white", children: [_jsx("h3", { className: "mb-2 font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "text-sm opacity-75", children: mediaState.error.message })] }) })), controls && (_jsx("div", { className: "absolute right-0 bottom-0 left-0" })), DebugPanel] }));
+};
+// Helper functions
+function getMediaTypeFromExtension(extension) {
+    switch (extension) {
+        case 'mp4':
+            return 'video/mp4';
+        case 'webm':
+            return 'video/webm';
+        case 'ogg':
+            return 'video/ogg';
+        case 'mp3':
+            return 'audio/mp3';
+        case 'wav':
+            return 'audio/wav';
+        case 'm3u8':
+            return 'hls';
+        case 'hls':
+            return 'hls';
+        default:
+            return 'video/mp4';
+    }
+}
+function getMediaTypeFromUrl(url) {
+    const extension = url.split('.').pop()?.toLowerCase();
+    return getMediaTypeFromExtension(extension);
+}
+export default EnhancedMediaPlayer;

package/src/components/enhanced/error-handling.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export declare const EnhancedLoading: ({ className, showProgress, message }: {
+    className?: string;
+    showProgress?: boolean;
+    message?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EnhancedError: ({ className, onRetry, showDetails }: {
+    className?: string;
+    onRetry?: () => void;
+    showDetails?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+export declare class MediaPlayerErrorBoundary extends React.Component<{
+    children: React.ReactNode;
+    fallback?: React.ComponentType<{
+        error: Error;
+        retry: () => void;
+    }>;
+}, ErrorBoundaryState> {
+    constructor(props: any);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    retry: () => void;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+}
+export declare const ConnectionStatus: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const BufferHealthIndicator: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=error-handling.d.ts.map

package/src/components/enhanced/error-handling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-handling.d.ts","sourceRoot":"","sources":["error-handling.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,eAAe,GAA4B,sCAIrD;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB,mDAsDA,CAAA;AAGD,eAAO,MAAM,aAAa,GAA0B,qCAIjD;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,mDA0GA,CAAA;AAGD,UAAU,kBAAkB;IAC3B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,KAAK,CAAA;CACb;AAED,qBAAa,wBAAyB,SAAQ,KAAK,CAAC,SAAS,CAC5D;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;CAAE,EAClG,kBAAkB,CAClB;gBACY,KAAK,EAAE,GAAG;IAKtB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAI1D,KAAK,aAEJ;IAED,MAAM;CA8BN;AAGD,eAAO,MAAM,gBAAgB,GAA6B,eAEvD;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,mDAuCA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,eAEjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,mDA8CA,CAAA"}

package/src/components/enhanced/error-handling.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+// Enhanced loading component with skeleton and progress
+export const EnhancedLoading = function EnhancedLoading({ className, showProgress = false, message = "Loading..." }) {
+    const isLoading = useMediaSelector(state => state.isLoading);
+    const [progress, setProgress] = React.useState(0);
+    // Simulate loading progress for better UX
+    React.useEffect(() => {
+        if (!isLoading) {
+            setProgress(0);
+            return;
+        }
+        const interval = setInterval(() => {
+            setProgress(prev => {
+                if (prev >= 90)
+                    return prev;
+                return prev + Math.random() * 10;
+            });
+        }, 200);
+        return () => clearInterval(interval);
+    }, [isLoading]);
+    if (!isLoading)
+        return null;
+    return (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center bg-black/50 backdrop-blur-sm", className), children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-white", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-white" }), showProgress && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("span", { className: "font-medium text-xs", children: [Math.round(progress), "%"] }) }))] }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "font-medium text-sm", children: message }), showProgress && (_jsx("div", { className: "mt-2 h-1 w-48 overflow-hidden rounded-full bg-white/20", children: _jsx("div", { className: "h-full bg-primary transition-all duration-300 ease-out", style: { width: `${progress}%` } }) }))] })] }) }));
+};
+// Enhanced error component with retry and detailed messages
+export const EnhancedError = function EnhancedError({ className, onRetry, showDetails = false }) {
+    const error = useMediaSelector(state => state.error);
+    const dispatch = useMediaDispatch();
+    const [showFullError, setShowFullError] = React.useState(false);
+    const handleRetry = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.SET_ERROR, detail: null });
+        onRetry?.();
+    }, [dispatch, onRetry]);
+    const handleDismiss = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.SET_ERROR, detail: null });
+    }, [dispatch]);
+    if (!error)
+        return null;
+    // Parse error types for better user messages
+    const getErrorMessage = (error) => {
+        if (error.includes('network') || error.includes('fetch')) {
+            return {
+                title: "Network Error",
+                message: "Unable to load the video. Please check your internet connection.",
+                icon: "🌐"
+            };
+        }
+        if (error.includes('format') || error.includes('codec')) {
+            return {
+                title: "Format Not Supported",
+                message: "This video format is not supported by your browser.",
+                icon: "🎥"
+            };
+        }
+        if (error.includes('permission') || error.includes('cors')) {
+            return {
+                title: "Access Denied",
+                message: "Unable to access the video due to permission restrictions.",
+                icon: "🔒"
+            };
+        }
+        return {
+            title: "Playback Error",
+            message: "An error occurred while trying to play the video.",
+            icon: "⚠️"
+        };
+    };
+    const errorInfo = getErrorMessage(error);
+    return (_jsx("div", { className: cn("absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm", className), children: _jsxs("div", { className: "mx-4 max-w-md rounded-lg border border-red-500/20 bg-black/90 p-6 text-center", children: [_jsx("div", { className: "mb-4 text-4xl", children: errorInfo.icon }), _jsx("h3", { className: "mb-2 font-semibold text-lg text-white", children: errorInfo.title }), _jsx("p", { className: "mb-4 text-sm text-white/80", children: errorInfo.message }), showDetails && (_jsxs("div", { className: "mb-4", children: [_jsxs("button", { onClick: () => setShowFullError(!showFullError), className: "text-white/60 text-xs transition-colors hover:text-white/80", children: [showFullError ? "Hide" : "Show", " technical details"] }), showFullError && (_jsx("div", { className: "mt-2 rounded border border-red-500/30 bg-red-900/20 p-3", children: _jsx("code", { className: "break-all text-red-300 text-xs", children: error }) }))] })), _jsxs("div", { className: "flex justify-center gap-3", children: [onRetry && (_jsx("button", { onClick: handleRetry, className: "rounded-lg bg-primary px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-primary/80", children: "Try Again" })), _jsx("button", { onClick: handleDismiss, className: "rounded-lg bg-white/10 px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-white/20", children: "Dismiss" })] })] }) }));
+};
+export class MediaPlayerErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('MediaPlayer Error:', error, errorInfo);
+    }
+    retry = () => {
+        this.setState({ hasError: false, error: undefined });
+    };
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                const Fallback = this.props.fallback;
+                return _jsx(Fallback, { error: this.state.error, retry: this.retry });
+            }
+            return (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm", children: _jsxs("div", { className: "mx-4 max-w-md rounded-lg border border-red-500/20 bg-black/90 p-6 text-center", children: [_jsx("div", { className: "mb-4 text-4xl", children: "\uD83D\uDCA5" }), _jsx("h3", { className: "mb-2 font-semibold text-lg text-white", children: "Something went wrong" }), _jsx("p", { className: "mb-4 text-sm text-white/80", children: "The media player encountered an unexpected error." }), _jsx("button", { onClick: this.retry, className: "rounded-lg bg-primary px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-primary/80", children: "Reload Player" })] }) }));
+        }
+        return this.props.children;
+    }
+}
+// Connection status indicator
+export const ConnectionStatus = function ConnectionStatus({ className }) {
+    const [isOnline, setIsOnline] = React.useState(navigator.onLine);
+    const [showOfflineMessage, setShowOfflineMessage] = React.useState(false);
+    React.useEffect(() => {
+        const handleOnline = () => {
+            setIsOnline(true);
+            setShowOfflineMessage(false);
+        };
+        const handleOffline = () => {
+            setIsOnline(false);
+            setShowOfflineMessage(true);
+        };
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+        };
+    }, []);
+    if (!showOfflineMessage)
+        return null;
+    return (_jsx("div", { className: cn("absolute top-4 right-4 left-4 z-50 rounded-lg border border-orange-400/30 bg-orange-500/90 p-3 backdrop-blur-sm", className), children: _jsxs("div", { className: "flex items-center gap-3 text-white", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-orange-300" }), _jsx("span", { className: "font-medium text-sm", children: "You're offline. Video playback may be affected." })] }) }));
+};
+// Buffer health indicator
+export const BufferHealthIndicator = function BufferHealthIndicator({ className }) {
+    const buffered = useMediaSelector(state => state.buffered);
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const bufferHealth = React.useMemo(() => {
+        if (!buffered || duration === 0)
+            return 0;
+        let bufferedAhead = 0;
+        for (let i = 0; i < buffered.length; i++) {
+            const start = buffered.start(i);
+            const end = buffered.end(i);
+            if (start <= currentTime && end > currentTime) {
+                bufferedAhead = end - currentTime;
+                break;
+            }
+        }
+        return Math.min(100, (bufferedAhead / 30) * 100); // 30 seconds = 100%
+    }, [buffered, currentTime, duration]);
+    const getHealthColor = (health) => {
+        if (health > 70)
+            return "bg-green-500";
+        if (health > 30)
+            return "bg-yellow-500";
+        return "bg-red-500";
+    };
+    if (bufferHealth > 80)
+        return null; // Don't show when buffer is healthy
+    return (_jsx("div", { className: cn("absolute top-4 right-4 z-40 rounded-lg border border-white/20 bg-black/80 p-2 backdrop-blur-sm", className), children: _jsxs("div", { className: "flex items-center gap-2 text-white text-xs", children: [_jsx("span", { children: "Buffer:" }), _jsx("div", { className: "h-1 w-16 overflow-hidden rounded-full bg-white/20", children: _jsx("div", { className: cn("h-full transition-all duration-300", getHealthColor(bufferHealth)), style: { width: `${bufferHealth}%` } }) }), _jsxs("span", { children: [Math.round(bufferHealth), "%"] })] }) }));
+};

package/src/components/enhanced/index.d.ts

@@ -0,0 +1,7 @@
+export { ChaptersPanel, PictureInPictureButton, PlaybackSpeedSelector, QualitySelector, SubtitleSelector } from "./advanced-features";
+export { EnhancedPlayButton, EnhancedSeekBar, EnhancedTimeDisplay, EnhancedVolumeControl, EnhancedBackwardButton, EnhancedForwardButton, EnhancedControlBar } from "./enhanced-controls";
+export { BufferHealthIndicator, ConnectionStatus, EnhancedError, EnhancedLoading, MediaPlayerErrorBoundary } from "./error-handling";
+export { EnhancedMediaPlayer } from "./media-player-enhanced";
+export { EnhancedControlsExample, CustomEnhancedControlsExample, SkipButtonsOnlyExample } from "../examples/enhanced-controls-example";
+export type { EnhancedControlsExampleProps } from "../examples/enhanced-controls-example";
+//# sourceMappingURL=index.d.ts.map

package/src/components/enhanced/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,wBAAwB,EACzB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EACL,uBAAuB,EACvB,6BAA6B,EAC7B,sBAAsB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC"}

package/src/components/enhanced/index.js

@@ -0,0 +1,10 @@
+// Enhanced Components with Advanced Features
+export { ChaptersPanel, PictureInPictureButton, PlaybackSpeedSelector, QualitySelector, SubtitleSelector } from "./advanced-features";
+// Enhanced Control Components  
+export { EnhancedPlayButton, EnhancedSeekBar, EnhancedTimeDisplay, EnhancedVolumeControl, EnhancedBackwardButton, EnhancedForwardButton, EnhancedControlBar } from "./enhanced-controls";
+// Enhanced Error Handling
+export { BufferHealthIndicator, ConnectionStatus, EnhancedError, EnhancedLoading, MediaPlayerErrorBoundary } from "./error-handling";
+// Main Enhanced Media Player
+export { EnhancedMediaPlayer } from "./media-player-enhanced";
+// Enhanced Examples
+export { EnhancedControlsExample, CustomEnhancedControlsExample, SkipButtonsOnlyExample } from "../examples/enhanced-controls-example";

package/src/components/enhanced/media-player-enhanced.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface EnhancedMediaPlayerProps {
+    children: React.ReactNode;
+    className?: string;
+    autoHide?: boolean;
+    autoHideDelay?: number;
+    showControlsOnHover?: boolean;
+    showControlsOnTouch?: boolean;
+    enableKeyboardControls?: boolean;
+    enableTouchGestures?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onTimeUpdate?: (time: number) => void;
+    onVolumeChange?: (volume: number) => void;
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+}
+export declare const EnhancedMediaPlayer: {
+    ({ children, className, autoHide, autoHideDelay, showControlsOnHover, showControlsOnTouch, enableKeyboardControls, enableTouchGestures, onPlay, onPause, onTimeUpdate, onVolumeChange, onFullscreenChange }: EnhancedMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=media-player-enhanced.d.ts.map

package/src/components/enhanced/media-player-enhanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-enhanced.d.ts","sourceRoot":"","sources":["media-player-enhanced.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,wBAAwB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;CACpD;AAoKD,eAAO,MAAM,mBAAmB;iNAc7B,wBAAwB;;CAmJ1B,CAAA"}