@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

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

@@ -0,0 +1,250 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMediaContext, useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+// Custom hook for auto-hide controls
+function useAutoHideControls(autoHide, delay, showOnHover, showOnTouch) {
+    const [showControls, setShowControls] = React.useState(true);
+    const [isHovering, setIsHovering] = React.useState(false);
+    const [isTouching, setIsTouching] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    const resetTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (autoHide) {
+            timeoutRef.current = setTimeout(() => {
+                if (!isHovering && !isTouching) {
+                    setShowControls(false);
+                }
+            }, delay);
+        }
+    }, [autoHide, delay, isHovering, isTouching]);
+    const showControlsTemporarily = React.useCallback(() => {
+        setShowControls(true);
+        resetTimeout();
+    }, [resetTimeout]);
+    React.useEffect(() => {
+        if (autoHide) {
+            resetTimeout();
+        }
+        else {
+            setShowControls(true);
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [autoHide, resetTimeout]);
+    const handleMouseEnter = React.useCallback(() => {
+        if (showOnHover) {
+            setIsHovering(true);
+            setShowControls(true);
+        }
+    }, [showOnHover]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (showOnHover) {
+            setIsHovering(false);
+            resetTimeout();
+        }
+    }, [showOnHover, resetTimeout]);
+    const handleTouchStart = React.useCallback(() => {
+        if (showOnTouch) {
+            setIsTouching(true);
+            showControlsTemporarily();
+        }
+    }, [showOnTouch, showControlsTemporarily]);
+    const handleTouchEnd = React.useCallback(() => {
+        if (showOnTouch) {
+            setIsTouching(false);
+            resetTimeout();
+        }
+    }, [showOnTouch, resetTimeout]);
+    return {
+        showControls,
+        showControlsTemporarily,
+        handleMouseEnter,
+        handleMouseLeave,
+        handleTouchStart,
+        handleTouchEnd
+    };
+}
+// Custom hook for touch gestures
+function useTouchGestures(enabled) {
+    const dispatch = useMediaDispatch();
+    const isPlaying = useMediaSelector(state => state.isPlaying);
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const volume = useMediaSelector(state => state.volume);
+    const [touchStart, setTouchStart] = React.useState(null);
+    const [isDoubleTap, setIsDoubleTap] = React.useState(false);
+    const handleTouchStart = React.useCallback((e) => {
+        if (!enabled)
+            return;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        const now = Date.now();
+        if (touchStart && now - touchStart.time < 300) {
+            setIsDoubleTap(true);
+            // Double tap to play/pause
+            dispatch({
+                type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+            });
+        }
+        else {
+            setTouchStart({
+                x: touch.clientX,
+                y: touch.clientY,
+                time: now
+            });
+            setIsDoubleTap(false);
+        }
+    }, [enabled, touchStart, isPlaying, dispatch]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (!enabled || !touchStart || isDoubleTap)
+            return;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        const deltaX = touch.clientX - touchStart.x;
+        const deltaY = touch.clientY - touchStart.y;
+        // Horizontal swipe for seeking
+        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+            const seekAmount = (deltaX / window.innerWidth) * 30; // 30 seconds max
+            const newTime = Math.max(0, Math.min(duration, currentTime + seekAmount));
+            dispatch({
+                type: MediaActionTypes.SEEK,
+                detail: newTime
+            });
+        }
+        // Vertical swipe for volume (right side of screen)
+        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50 && touchStart.x > window.innerWidth / 2) {
+            const volumeChange = -(deltaY / window.innerHeight) * 1; // Full range
+            const newVolume = Math.max(0, Math.min(1, volume + volumeChange));
+            dispatch({
+                type: MediaActionTypes.SET_VOLUME,
+                detail: newVolume
+            });
+        }
+    }, [enabled, touchStart, isDoubleTap, duration, currentTime, volume, dispatch]);
+    const handleTouchEnd = React.useCallback(() => {
+        if (!enabled)
+            return;
+        // Reset touch state after a delay to allow for double tap detection
+        setTimeout(() => {
+            setTouchStart(null);
+            setIsDoubleTap(false);
+        }, 300);
+    }, [enabled]);
+    return {
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd
+    };
+}
+export const EnhancedMediaPlayer = function EnhancedMediaPlayer({ children, className, autoHide = true, autoHideDelay = 3000, showControlsOnHover = true, showControlsOnTouch = true, enableKeyboardControls = true, enableTouchGestures = true, onPlay, onPause, onTimeUpdate, onVolumeChange, onFullscreenChange }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    // State selectors with memoization
+    const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []));
+    const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []));
+    const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []));
+    const volume = useMediaSelector(React.useCallback(state => state.volume, []));
+    const error = useMediaSelector(React.useCallback(state => state.error, []));
+    // Custom hooks
+    const { showControls, showControlsTemporarily, handleMouseEnter, handleMouseLeave, handleTouchStart: handleControlsTouch, handleTouchEnd: handleControlsTouchEnd } = useAutoHideControls(autoHide, autoHideDelay, showControlsOnHover, showControlsOnTouch);
+    const { handleTouchStart: handleGestureStart, handleTouchMove: handleGestureMove, handleTouchEnd: handleGestureEnd } = useTouchGestures(enableTouchGestures);
+    // Combine touch handlers
+    const handleTouchStart = React.useCallback((e) => {
+        handleControlsTouch();
+        handleGestureStart(e);
+    }, [handleControlsTouch, handleGestureStart]);
+    const handleTouchEnd = React.useCallback(() => {
+        handleControlsTouchEnd();
+        handleGestureEnd();
+    }, [handleControlsTouchEnd, handleGestureEnd]);
+    // Event handlers with memoization
+    const handleClick = React.useCallback(() => {
+        showControlsTemporarily();
+    }, [showControlsTemporarily]);
+    // Keyboard controls
+    React.useEffect(() => {
+        if (!enableKeyboardControls)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+                return;
+            }
+            switch (e.code) {
+                case 'Space':
+                case 'KeyK':
+                    e.preventDefault();
+                    dispatch({
+                        type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+                    });
+                    break;
+                case 'KeyF':
+                    e.preventDefault();
+                    dispatch({
+                        type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+                    });
+                    break;
+                case 'KeyM':
+                    e.preventDefault();
+                    dispatch({ type: MediaActionTypes.TOGGLE_MUTE });
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SEEK,
+                        detail: Math.max(0, currentTime - 10)
+                    });
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SEEK,
+                        detail: currentTime + 10
+                    });
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SET_VOLUME,
+                        detail: Math.min(1, volume + 0.1)
+                    });
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SET_VOLUME,
+                        detail: Math.max(0, volume - 0.1)
+                    });
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [enableKeyboardControls, dispatch, isPlaying, isFullscreen, currentTime, volume]);
+    // Event callbacks
+    React.useEffect(() => {
+        if (isPlaying)
+            onPlay?.();
+        else
+            onPause?.();
+    }, [isPlaying, onPlay, onPause]);
+    React.useEffect(() => {
+        onTimeUpdate?.(currentTime);
+    }, [currentTime, onTimeUpdate]);
+    React.useEffect(() => {
+        onVolumeChange?.(volume);
+    }, [volume, onVolumeChange]);
+    React.useEffect(() => {
+        onFullscreenChange?.(isFullscreen);
+    }, [isFullscreen, onFullscreenChange]);
+    return (_jsx("div", { ref: context.rootRef, className: cn("relative isolate flex flex-col overflow-hidden rounded-lg bg-black outline-none", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", isFullscreen && "fixed inset-0 z-50 rounded-none", className), "data-state": isFullscreen ? "fullscreen" : "inline", "data-disabled": error ? "" : undefined, "data-controls-visible": showControls ? "" : undefined, tabIndex: 0, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchMove: handleGestureMove, onTouchEnd: handleTouchEnd, onClick: handleClick, children: children }));
+};
+EnhancedMediaPlayer.displayName = "EnhancedMediaPlayer";

package/src/components/examples/basic-video-player.d.ts

@@ -0,0 +1,10 @@
+export interface BasicVideoPlayerProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function BasicVideoPlayer({ src, poster, className }: BasicVideoPlayerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BasicVideoPlayer {
+    var displayName: string;
+}
+//# sourceMappingURL=basic-video-player.d.ts.map

package/src/components/examples/basic-video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-video-player.d.ts","sourceRoot":"","sources":["basic-video-player.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAgCjF;yBAhCe,gBAAgB"}

package/src/components/examples/basic-video-player.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayerRoot } from "../media-player-root";
+import { MediaPlayerVideo } from "../media-player-video";
+import { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
+import { MediaPlayerPlay } from "../media-player-play";
+import { MediaPlayerSeek } from "../media-player-seek";
+import { MediaPlayerVolume } from "../media-player-volume";
+import { MediaPlayerTime } from "../media-player-time";
+import { MediaPlayerFullscreen } from "../media-player-fullscreen";
+import { MediaPlayerLoading } from "../media-player-loading";
+import { MediaPlayerError } from "../media-player-error";
+export function BasicVideoPlayer({ src, poster, className }) {
+    return (_jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, crossOrigin: "anonymous", playsInline: true }), _jsx(MediaPlayerLoading, {}), _jsx(MediaPlayerError, {}), _jsx(MediaPlayerControlsOverlay, {}), _jsxs(MediaPlayerControls, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MediaPlayerPlay, {}), _jsx(MediaPlayerVolume, {}), _jsx(MediaPlayerTime, { variant: "current" })] }), _jsx("div", { className: "flex-1 px-2", children: _jsx(MediaPlayerSeek, {}) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MediaPlayerTime, { variant: "duration" }), _jsx(MediaPlayerFullscreen, {})] })] })] }));
+}
+BasicVideoPlayer.displayName = "BasicVideoPlayer";

package/src/components/examples/custom-controls-example.d.ts

@@ -0,0 +1,10 @@
+export interface CustomControlsExampleProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function CustomControlsExample({ src, poster, className }: CustomControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CustomControlsExample {
+    var displayName: string;
+}
+//# sourceMappingURL=custom-controls-example.d.ts.map

package/src/components/examples/custom-controls-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-controls-example.d.ts","sourceRoot":"","sources":["custom-controls-example.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,0BAA0B;IAC1C,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CA6C3F;yBA7Ce,qBAAqB"}

package/src/components/examples/custom-controls-example.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayer } from "../media-player";
+import { FullscreenButton } from "../ui/fullscreen-button";
+import { PlayButton } from "../ui/play-button";
+import { SeekBar } from "../ui/seek-bar";
+import { TimeDisplay } from "../ui/time-display";
+import { VolumeControl } from "../ui/volume-control";
+export function CustomControlsExample({ src, poster, className }) {
+    return (_jsx(MediaPlayer, { src: src, customControls: true, showControls: false, className: className, children: ({ state, controls }) => (_jsxs("div", { className: "absolute inset-0 flex flex-col justify-end", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" }), _jsxs("div", { className: "relative z-10 space-y-3 p-4", children: [_jsx("div", { className: "w-full", children: _jsx(SeekBar, { currentTime: state.currentTime, duration: state.duration, onSeek: controls.seek, className: "w-full" }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, size: "lg" }), _jsx(VolumeControl, { volume: state.volume, isMuted: state.isMuted, onVolumeChange: controls.setVolume, onToggleMute: controls.toggleMute }), _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx(FullscreenButton, { isFullscreen: state.isFullscreen, onToggle: controls.toggleFullscreen }) })] })] })] })) }));
+}
+CustomControlsExample.displayName = "CustomControlsExample";

package/src/components/examples/enhanced-controls-example.d.ts

@@ -0,0 +1,9 @@
+export interface EnhancedControlsExampleProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function EnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomEnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkipButtonsOnlyExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enhanced-controls-example.d.ts.map

package/src/components/examples/enhanced-controls-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-controls-example.d.ts","sourceRoot":"","sources":["enhanced-controls-example.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,4BAA4B;IAC5C,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAGD,wBAAgB,uBAAuB,CAAC,EACvC,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CAmB9B;AAGD,wBAAgB,6BAA6B,CAAC,EAC7C,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CA+B9B;AAGD,wBAAgB,sBAAsB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CAsB9B"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaProvider } from "../../context/media-provider";
+import { MediaPlayerRoot } from "../media-player-root";
+import { MediaPlayerVideo } from "../media-player-video";
+import { EnhancedControlBar, EnhancedPlayButton, EnhancedSeekBar, EnhancedBackwardButton, EnhancedForwardButton, EnhancedVolumeControl, EnhancedTimeDisplay } from "../enhanced/enhanced-controls";
+// Complete example with all enhanced controls
+export function EnhancedControlsExample({ src, poster, className }) {
+    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsx(EnhancedControlBar, { className: "absolute right-0 bottom-0 left-0", showSkipButtons: true, showVolumeControl: true, showTimeDisplay: true, playButtonSize: "xl", skipButtonSize: "md", skipTime: 10 })] }) }));
+}
+// Example with individual components for custom layouts
+export function CustomEnhancedControlsExample({ src, poster, className }) {
+    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsxs("div", { className: "absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(EnhancedSeekBar, { className: "mb-4" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(EnhancedBackwardButton, { skipTime: 15, size: "md" }), _jsx(EnhancedPlayButton, { size: "xl" }), _jsx(EnhancedForwardButton, { skipTime: 15, size: "md" }), _jsx(EnhancedVolumeControl, {})] }), _jsxs("div", { className: "flex items-center gap-2 font-mono text-sm text-white", children: [_jsx(EnhancedTimeDisplay, { variant: "current" }), _jsx("span", { className: "text-white/60", children: "/" }), _jsx(EnhancedTimeDisplay, { variant: "duration" })] })] })] })] }) }));
+}
+// Minimal example with just skip buttons
+export function SkipButtonsOnlyExample({ src, poster, className }) {
+    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-4 left-1/2 transform", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(EnhancedBackwardButton, { skipTime: 10, size: "lg" }), _jsx(EnhancedPlayButton, { size: "xl" }), _jsx(EnhancedForwardButton, { skipTime: 10, size: "lg" })] }) })] }) }));
+}

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

@@ -0,0 +1,9 @@
+interface EnhancedMediaPlayerProps {
+    src: string | string[];
+    className?: string;
+    title?: string;
+    description?: string;
+}
+export declare function EnhancedMediaPlayerExample({ src, className, title, description }: EnhancedMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=enhanced-media-player-example.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-media-player-example.d.ts","sourceRoot":"","sources":["enhanced-media-player-example.tsx"],"names":[],"mappings":"AAUA,UAAU,wBAAwB;IACjC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAC1C,GAAG,EACH,SAAS,EACT,KAAsB,EACtB,WAA+D,EAC/D,EAAE,wBAAwB,2CA8Q1B"}

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { MediaPlayer } from "../media-player";
+import { PlayButton } from "../ui/play-button";
+import { SeekBar } from "../ui/seek-bar";
+import { TimeDisplay } from "../ui/time-display";
+import { VolumeControl } from "../ui/volume-control";
+import { cn } from "../../lib/utils";
+export function EnhancedMediaPlayerExample({ src, className, title = "Sample Media", description = "Demonstrating the new BaroiPlayer design system" }) {
+    const [isControlsVisible, setIsControlsVisible] = useState(true);
+    return (_jsxs("div", { className: cn("mx-auto w-full max-w-4xl space-y-6", className), children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h2", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-xl", children: title }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: description })] }), _jsx("div", { className: cn("group relative", "hover:shadow-2xl hover:shadow-[color:var(--color-brand-primary)]/10", "transition-all duration-500 ease-out"), onMouseEnter: () => setIsControlsVisible(true), onMouseLeave: () => setIsControlsVisible(false), children: _jsx(MediaPlayer, { src: src, customControls: true, children: ({ state, controls }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("absolute inset-0 z-20 flex items-center justify-center", "transition-all duration-300", state.isLoading && "pointer-events-none"), children: _jsx("div", { className: cn("relative", "transition-all duration-300 ease-out", "hover:scale-105"), children: _jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, disabled: state.isLoading, size: "xl", className: cn("transform transition-all duration-300", !isControlsVisible && !state.isLoading && "scale-75 opacity-60", isControlsVisible && "scale-100 opacity-100") }) }) }), _jsxs("div", { className: cn("absolute right-0 bottom-0 left-0 z-30", "glass-strong border-[color:var(--media-border)]/30 border-t", "transition-all duration-300 ease-out", !isControlsVisible && "translate-y-full opacity-0", isControlsVisible && "translate-y-0 opacity-100"), children: [_jsx("div", { className: "-mt-2 px-4", children: _jsx(SeekBar, { currentTime: state.currentTime, duration: state.duration, buffered: state.buffered, onSeek: controls.seek, className: "w-full" }) }), _jsxs("div", { className: cn("flex items-center justify-between gap-4 p-4", "media-md:px-8 media-sm:px-6"), children: [_jsxs("div", { className: "flex items-center gap-3 media-sm:gap-4", children: [_jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, disabled: state.isLoading, size: "md" }), _jsx("div", { className: "media-sm:block hidden", children: _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration, className: "font-mono text-fluid-sm" }) })] }), _jsxs("div", { className: cn("media-md:block hidden flex-1 text-center", "space-y-1"), children: [_jsx("p", { className: "truncate font-medium text-[color:var(--media-text)] text-fluid-sm", children: title }), state.duration > 0 && (_jsxs("div", { className: "text-[color:var(--media-text-secondary)] text-xs", children: [Math.round((state.currentTime / state.duration) * 100), "% complete"] }))] }), _jsxs("div", { className: "flex items-center gap-3 media-sm:gap-4", children: [_jsx("div", { className: "media-sm:block hidden", children: _jsx(VolumeControl, { volume: state.volume, isMuted: state.isMuted, onVolumeChange: controls.setVolume, onToggleMute: controls.toggleMute, size: "md" }) }), _jsx("button", { onClick: controls.toggleFullscreen, className: cn("group glass-strong media-control relative", "size-10 touch-manipulation rounded-xl contain-layout", "bg-[color:var(--media-control-bg)] backdrop-blur-sm", "border border-[color:var(--media-border)]/30", "text-[color:var(--media-text)] transition-all duration-300", "hover:bg-[color:var(--media-control-hover)]", "hover:border-[color:var(--media-border)]/50", "hover:-translate-y-0.5 hover:scale-105", "active:translate-y-0 active:scale-100", "focus-ring"), "aria-label": "Enter fullscreen", children: _jsx("svg", { className: "m-auto size-5 transition-transform duration-200 group-hover:scale-110", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) })] })] }), _jsx("div", { className: "media-sm:hidden px-4 pb-3", children: _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration, className: "text-center font-mono text-sm" }) })] }), state.isLoading && (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-16 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-16 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-lg") })] }), _jsxs("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-fluid-base", children: ["Loading ", title, "..."] })] }) })), state.error && (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4", children: _jsx("svg", { className: "size-8 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 font-semibold text-fluid-lg", children: "Playback Error" }), _jsx("p", { className: "text-[color:var(--media-text-secondary)] text-fluid-sm", children: state.error })] }), _jsx("button", { onClick: () => window.location.reload(), className: cn("rounded-lg px-6 py-2 font-medium transition-all duration-200", "bg-[color:var(--color-brand-primary)] text-[color:var(--media-text)]", "hover:scale-105 hover:bg-[color:var(--color-brand-accent)]", "focus-ring active:scale-95"), children: "Try Again" })] }) }))] })) }) }), _jsxs("div", { className: "grid grid-cols-1 media-lg:grid-cols-3 media-sm:grid-cols-2 gap-4", children: [_jsxs("div", { className: "glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Modern Colors" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "OKLCH color space for vivid, accessible colors across all displays." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-primary)] shadow-sm" }), _jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-accent)] shadow-sm" }), _jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-highlight)] shadow-sm" })] })] }), _jsxs("div", { className: "glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Container Queries" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "Responsive design based on container size, not just viewport." }), _jsx("div", { className: "font-mono text-[color:var(--color-text-tertiary)] text-xs", children: "@container (min-width: 480px)" })] }), _jsxs("div", { className: "glass-strong media-lg:col-span-1 media-sm:col-span-2 space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Smooth Animations" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "Performance-optimized with CSS containment and modern easing." }), _jsx("div", { className: "h-1 w-8 animate-pulse rounded-full bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]" })] })] })] }));
+}

package/src/components/examples/loading-states-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function LoadingStatesDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loading-states-demo.d.ts.map

package/src/components/examples/loading-states-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-states-demo.d.ts","sourceRoot":"","sources":["loading-states-demo.tsx"],"names":[],"mappings":"AAOA,wBAAgB,iBAAiB,4CAsIhC"}