@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/components/enhanced/enhanced-controls.js

@@ -0,0 +1,233 @@
+"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";
+import { formatTime } from "../../lib/format-time";
+// Enhanced play button with better animations
+export const EnhancedPlayButton = function EnhancedPlayButton({ className, size = "md" }) {
+    const dispatch = useMediaDispatch();
+    const isPlaying = useMediaSelector(state => state.isPlaying);
+    const isLoading = useMediaSelector(state => state.isLoading);
+    const sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16"
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-8 w-8"
+    };
+    const handleClick = React.useCallback(() => {
+        dispatch({
+            type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+        });
+    }, [dispatch, isPlaying]);
+    return (_jsx("button", { type: "button", onClick: handleClick, disabled: isLoading, className: cn("group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", "border border-white/20 text-white transition-all duration-200", "hover:scale-105 hover:bg-white/20 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50", "disabled:cursor-not-allowed disabled:opacity-50", sizeClasses[size], className), "aria-label": isPlaying ? "Pause" : "Play", children: isLoading ? (_jsx("div", { className: cn("animate-spin rounded-full border-2 border-white/30 border-t-white", iconSizes[size]) })) : (_jsx("div", { className: cn("transition-transform duration-200", iconSizes[size]), children: isPlaying ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: _jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) })) : (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "ml-0.5 h-full w-full", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) })) }));
+};
+// Enhanced seek bar with preview and better touch support
+export const EnhancedSeekBar = function EnhancedSeekBar({ className }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const buffered = useMediaSelector(state => state.buffered);
+    const previewTime = useMediaSelector(state => state.previewTime);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [hoverTime, setHoverTime] = React.useState(null);
+    const progressRef = React.useRef(null);
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    const previewProgress = duration > 0 && previewTime !== null ? (previewTime / duration) * 100 : null;
+    // Calculate buffered ranges
+    const bufferedRanges = React.useMemo(() => {
+        if (!buffered || duration === 0)
+            return [];
+        const ranges = [];
+        for (let i = 0; i < buffered.length; i++) {
+            ranges.push({
+                start: (buffered.start(i) / duration) * 100,
+                end: (buffered.end(i) / duration) * 100
+            });
+        }
+        return ranges;
+    }, [buffered, duration]);
+    const getTimeFromPosition = React.useCallback((clientX) => {
+        if (!progressRef.current)
+            return 0;
+        const rect = progressRef.current.getBoundingClientRect();
+        const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return position * duration;
+    }, [duration]);
+    const handleMouseMove = React.useCallback((e) => {
+        if (!isDragging) {
+            const time = getTimeFromPosition(e.clientX);
+            setHoverTime(time);
+            dispatch({ type: MediaActionTypes.PREVIEW_TIME, detail: time });
+        }
+    }, [isDragging, getTimeFromPosition, dispatch]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (!isDragging) {
+            setHoverTime(null);
+            dispatch({ type: MediaActionTypes.CLEAR_PREVIEW });
+        }
+    }, [isDragging, dispatch]);
+    const handleMouseDown = React.useCallback((e) => {
+        setIsDragging(true);
+        const time = getTimeFromPosition(e.clientX);
+        dispatch({ type: MediaActionTypes.SEEK, detail: time });
+    }, [getTimeFromPosition, dispatch]);
+    const handleTouchStart = React.useCallback((e) => {
+        setIsDragging(true);
+        const time = getTimeFromPosition(e.touches[0]?.clientX || 0);
+        dispatch({ type: MediaActionTypes.SEEK, detail: time });
+    }, [getTimeFromPosition, dispatch]);
+    React.useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const time = getTimeFromPosition(e.clientX);
+                dispatch({ type: MediaActionTypes.SEEK, detail: time });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setHoverTime(null);
+            dispatch({ type: MediaActionTypes.CLEAR_PREVIEW });
+        };
+        const handleTouchMove = (e) => {
+            if (isDragging) {
+                const time = getTimeFromPosition(e.touches[0]?.clientX || 0);
+                dispatch({ type: MediaActionTypes.SEEK, detail: time });
+            }
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('touchend', handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleMouseUp);
+        };
+    }, [isDragging, getTimeFromPosition, dispatch]);
+    return (_jsxs("div", { className: cn("group relative flex items-center", className), children: [(hoverTime !== null || previewTime !== null) && (_jsx("div", { className: "pointer-events-none absolute bottom-full mb-2 rounded bg-black/80 px-2 py-1 text-white text-xs", style: {
+                    left: `${previewProgress || ((hoverTime || 0) / duration) * 100}%`,
+                    transform: 'translateX(-50%)'
+                }, children: formatTime(hoverTime || previewTime || 0) })), _jsxs("div", { ref: progressRef, className: "relative h-2 w-full cursor-pointer rounded-full bg-white/20 transition-all duration-200 group-hover:h-3", onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [bufferedRanges.map((range, index) => (_jsx("div", { className: "absolute top-0 h-full rounded-full bg-white/30", style: {
+                            left: `${range.start}%`,
+                            width: `${range.end - range.start}%`
+                        } }, index))), _jsx("div", { className: "absolute top-0 h-full rounded-full bg-primary transition-all duration-100", style: { width: `${progress}%` } }), previewProgress !== null && (_jsx("div", { className: "absolute top-0 h-full w-1 rounded-full bg-white/80", style: { left: `${previewProgress}%` } })), _jsx("div", { className: "-translate-y-1/2 absolute top-1/2 h-4 w-4 rounded-full border-2 border-white bg-primary opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100", style: { left: `${progress}%`, transform: 'translateX(-50%) translateY(-50%)' } })] })] }));
+};
+// Enhanced volume control with better UX
+export const EnhancedVolumeControl = function EnhancedVolumeControl({ className }) {
+    const dispatch = useMediaDispatch();
+    const volume = useMediaSelector(state => state.volume);
+    const isMuted = useMediaSelector(state => state.isMuted);
+    const [showSlider, setShowSlider] = React.useState(false);
+    const handleToggleMute = React.useCallback(() => {
+        dispatch({ type: MediaActionTypes.TOGGLE_MUTE });
+    }, [dispatch]);
+    const handleVolumeChange = React.useCallback((newVolume) => {
+        dispatch({ type: MediaActionTypes.SET_VOLUME, detail: newVolume });
+    }, [dispatch]);
+    const VolumeIcon = React.useMemo(() => {
+        if (isMuted || volume === 0) {
+            return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) }));
+        }
+        else if (volume < 0.5) {
+            return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" }) }));
+        }
+        else {
+            return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) }));
+        }
+    }, [isMuted, volume]);
+    return (_jsxs("div", { className: cn("relative flex items-center", className), onMouseEnter: () => setShowSlider(true), onMouseLeave: () => setShowSlider(false), children: [_jsx("button", { type: "button", onClick: handleToggleMute, className: "flex h-10 w-10 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10", "aria-label": isMuted ? "Unmute" : "Mute", children: VolumeIcon }), _jsx("div", { className: cn("absolute left-full ml-2 flex items-center transition-all duration-200", showSlider ? "translate-x-0 opacity-100" : "-translate-x-2 pointer-events-none opacity-0"), children: _jsx("input", { type: "range", min: "0", max: "1", step: "0.01", value: isMuted ? 0 : volume, onChange: (e) => handleVolumeChange(parseFloat(e.target.value)), className: "slider h-1 w-20 cursor-pointer appearance-none rounded-lg bg-white/20" }) })] }));
+};
+// Enhanced backward skip button
+export const EnhancedBackwardButton = function EnhancedBackwardButton({ className, size = "md", skipTime = 10 }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12"
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+    };
+    const handleClick = React.useCallback(() => {
+        const newTime = Math.max(0, currentTime - skipTime);
+        dispatch({ type: MediaActionTypes.SEEK, detail: newTime });
+    }, [dispatch, currentTime, skipTime]);
+    return (_jsx("button", { type: "button", onClick: handleClick, className: cn("group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", "border border-white/20 text-white transition-all duration-200", "hover:scale-105 hover:bg-white/20 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50", sizeClasses[size], className), "aria-label": `Backward ${skipTime} seconds`, title: `Backward ${skipTime}s`, children: _jsxs("div", { className: cn("flex items-center transition-transform duration-200", iconSizes[size]), children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: [_jsx("path", { d: "M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM15.5 7.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v9c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-9z" }), _jsx("path", { d: "M5.5 12l7-4.5v9l-7-4.5z", opacity: "0.8" })] }), skipTime && (_jsx("span", { className: "-bottom-1 absolute font-bold text-[10px]", children: skipTime }))] }) }));
+};
+// Enhanced forward skip button
+export const EnhancedForwardButton = function EnhancedForwardButton({ className, size = "md", skipTime = 10 }) {
+    const dispatch = useMediaDispatch();
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12"
+    };
+    const iconSizes = {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+    };
+    const handleClick = React.useCallback(() => {
+        const newTime = Math.min(duration, currentTime + skipTime);
+        dispatch({ type: MediaActionTypes.SEEK, detail: newTime });
+    }, [dispatch, currentTime, duration, skipTime]);
+    return (_jsx("button", { type: "button", onClick: handleClick, className: cn("group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm", "border border-white/20 text-white transition-all duration-200", "hover:scale-105 hover:bg-white/20 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50", sizeClasses[size], className), "aria-label": `Forward ${skipTime} seconds`, title: `Forward ${skipTime}s`, children: _jsxs("div", { className: cn("flex items-center transition-transform duration-200", iconSizes[size]), children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-full w-full", children: [_jsx("path", { d: "M17 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM8.5 7.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v9c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5v-9z" }), _jsx("path", { d: "M18.5 12l-7-4.5v9l7-4.5z", opacity: "0.8" })] }), skipTime && (_jsx("span", { className: "-bottom-1 absolute font-bold text-[10px]", children: skipTime }))] }) }));
+};
+// Enhanced time display
+export const EnhancedTimeDisplay = function EnhancedTimeDisplay({ variant = "current", className }) {
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const displayTime = React.useMemo(() => {
+        switch (variant) {
+            case "current":
+                return formatTime(currentTime);
+            case "duration":
+                return formatTime(duration);
+            case "remaining":
+                return `-${formatTime(duration - currentTime)}`;
+            default:
+                return formatTime(currentTime);
+        }
+    }, [variant, currentTime, duration]);
+    return (_jsx("div", { className: cn("font-mono text-sm text-white tabular-nums", className), children: displayTime }));
+};
+// Performance indicator component
+export const PerformanceIndicator = function PerformanceIndicator({ metrics, className }) {
+    if (!metrics || process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+    const getPerformanceColor = (fps) => {
+        if (fps >= 50)
+            return 'text-green-400';
+        if (fps >= 30)
+            return 'text-yellow-400';
+        return 'text-red-400';
+    };
+    const getBufferColor = (health) => {
+        if (health >= 5)
+            return 'text-green-400';
+        if (health >= 2)
+            return 'text-yellow-400';
+        return 'text-red-400';
+    };
+    return (_jsxs("div", { className: cn("flex items-center gap-3 font-mono text-xs", className), children: [metrics.fps !== undefined && (_jsxs("div", { className: cn("flex items-center gap-1", getPerformanceColor(metrics.fps)), children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-current" }), _jsxs("span", { children: [metrics.fps, " FPS"] })] })), metrics.bufferHealth !== undefined && (_jsxs("div", { className: cn("flex items-center gap-1", getBufferColor(metrics.bufferHealth)), children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-current" }), _jsxs("span", { children: [metrics.bufferHealth.toFixed(1), "s"] })] })), metrics.quality !== undefined && (_jsxs("div", { className: "flex items-center gap-1 text-blue-400", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-current" }), _jsxs("span", { children: [metrics.quality, "p"] })] }))] }));
+};
+// Enhanced control bar that combines all controls
+export const EnhancedControlBar = function EnhancedControlBar({ className, showSkipButtons = true, showVolumeControl = true, showTimeDisplay = true, playButtonSize = "xl", skipButtonSize = "md", skipTime = 10, showPerformanceIndicators = process.env.NODE_ENV === 'development', performanceMetrics }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", className), children: [_jsx(EnhancedSeekBar, { className: "w-full" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [showSkipButtons && (_jsx(EnhancedBackwardButton, { size: skipButtonSize, skipTime: skipTime, className: "shrink-0" })), _jsx(EnhancedPlayButton, { size: playButtonSize, className: "shrink-0" }), showSkipButtons && (_jsx(EnhancedForwardButton, { size: skipButtonSize, skipTime: skipTime, className: "shrink-0" })), showVolumeControl && (_jsx(EnhancedVolumeControl, { className: "shrink-0" })), showTimeDisplay && (_jsxs("div", { className: "flex items-center gap-1 font-mono text-sm", children: [_jsx(EnhancedTimeDisplay, { variant: "current" }), _jsx("span", { className: "text-white/60", children: "/" }), _jsx(EnhancedTimeDisplay, { variant: "duration" })] }))] }), _jsx("div", { className: "flex items-center gap-2", children: showPerformanceIndicators && (_jsx(PerformanceIndicator, { metrics: performanceMetrics, className: "text-white/80" })) })] })] }));
+};

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

@@ -0,0 +1,26 @@
+/**
+ * Enhanced Media Player with all optimizations applied
+ * Integrates React 19 features, HLS optimization, and intelligent preloading
+ */
+import React from 'react';
+import { MediaPlayerProps } from '../../types';
+interface EnhancedMediaPlayerProps extends MediaPlayerProps {
+    /** Enable enhanced HLS optimization */
+    enableEnhancedHLS?: boolean;
+    /** Enable intelligent preloading */
+    enableIntelligentPreloading?: boolean;
+    /** Enable performance monitoring */
+    enablePerformanceMonitoring?: boolean;
+    /** Custom HLS configuration */
+    hlsConfig?: any;
+    /** Preloading strategy */
+    preloadingStrategy?: 'conservative' | 'balanced' | 'aggressive';
+    /** Show performance debug panel (development only) */
+    showDebugPanel?: boolean;
+}
+/**
+ * Enhanced Media Player Component
+ */
+export declare const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps>;
+export default EnhancedMediaPlayer;
+//# sourceMappingURL=enhanced-media-player.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-media-player.d.ts","sourceRoot":"","sources":["enhanced-media-player.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAUN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAe,MAAM,aAAa,CAAC;AAO5D,UAAU,wBAAyB,SAAQ,gBAAgB;IAC1D,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oCAAoC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,oCAAoC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,0BAA0B;IAC1B,kBAAkB,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;IAChE,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AAsBD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAkalE,CAAC;AA6BF,eAAe,mBAAmB,CAAC"}

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"}