@therealtinhtute/baroiplayer 1.0.6 → 1.0.8

package/src/components/enhanced/advanced-features.js

@@ -1,64 +0,0 @@
-"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";
-// Quality selector component
-export const QualitySelector = function QualitySelector({ qualities, currentQuality, onQualityChange, className }) {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const currentQualityLabel = React.useMemo(() => {
-        return qualities.find(q => q.id === currentQuality)?.label || "Auto";
-    }, [qualities, currentQuality]);
-    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select quality", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }), _jsx("span", { className: "text-sm", children: currentQualityLabel }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: qualities.map((quality) => (_jsxs("button", { onClick: () => {
-                        onQualityChange(quality.id);
-                        setIsOpen(false);
-                    }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", quality.id === currentQuality && "bg-primary/20 text-primary"), children: [quality.label, quality.bitrate && (_jsxs("span", { className: "ml-2 text-white/60 text-xs", children: ["(", Math.round(quality.bitrate / 1000), "k)"] }))] }, quality.id))) }))] }));
-};
-// Subtitle selector component
-export const SubtitleSelector = function SubtitleSelector({ subtitles, currentSubtitle, onSubtitleChange, className }) {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const currentSubtitleLabel = React.useMemo(() => {
-        if (!currentSubtitle)
-            return "Off";
-        return subtitles.find(s => s.id === currentSubtitle)?.label || "Off";
-    }, [subtitles, currentSubtitle]);
-    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select subtitles", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }), _jsx("span", { className: "text-sm", children: currentSubtitleLabel }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsxs("div", { className: "absolute right-0 bottom-full mb-2 min-w-32 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: [_jsx("button", { onClick: () => {
-                            onSubtitleChange(null);
-                            setIsOpen(false);
-                        }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", !currentSubtitle && "bg-primary/20 text-primary"), children: "Off" }), subtitles.map((subtitle) => (_jsx("button", { onClick: () => {
-                            onSubtitleChange(subtitle.id);
-                            setIsOpen(false);
-                        }, className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", subtitle.id === currentSubtitle && "bg-primary/20 text-primary"), children: subtitle.label }, subtitle.id)))] }))] }));
-};
-// Playback speed selector
-export const PlaybackSpeedSelector = function PlaybackSpeedSelector({ className }) {
-    const dispatch = useMediaDispatch();
-    const playbackRate = useMediaSelector(state => state.playbackRate);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-    const handleSpeedChange = React.useCallback((speed) => {
-        dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: speed });
-        setIsOpen(false);
-    }, [dispatch]);
-    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 text-white transition-colors hover:bg-black/70", "aria-label": "Select playback speed", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", children: _jsx("path", { d: "M13,8A4,4 0 0,0 9,12A4,4 0 0,0 13,16A4,4 0 0,0 17,12A4,4 0 0,0 13,8M13,14A2,2 0 0,1 11,12A2,2 0 0,1 13,10A2,2 0 0,1 15,12A2,2 0 0,1 13,14M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4Z" }) }), _jsxs("span", { className: "text-sm", children: [playbackRate, "x"] }), _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"), children: _jsx("path", { d: "M7 10l5 5 5-5z" }) })] }), isOpen && (_jsx("div", { className: "absolute right-0 bottom-full mb-2 min-w-20 rounded-lg border border-white/20 bg-black/90 py-2 backdrop-blur-sm", children: speeds.map((speed) => (_jsxs("button", { onClick: () => handleSpeedChange(speed), className: cn("w-full px-4 py-2 text-left text-sm text-white transition-colors hover:bg-white/10", speed === playbackRate && "bg-primary/20 text-primary"), children: [speed, "x"] }, speed))) }))] }));
-};
-// Chapters component
-export const ChaptersPanel = function ChaptersPanel({ chapters, onChapterSelect, className }) {
-    const currentTime = useMediaSelector(state => state.currentTime);
-    const currentChapter = React.useMemo(() => {
-        return chapters.find(chapter => currentTime >= chapter.startTime && currentTime < chapter.endTime);
-    }, [chapters, currentTime]);
-    return (_jsxs("div", { className: cn("rounded-lg border border-white/20 bg-black/90 p-4 backdrop-blur-sm", className), children: [_jsx("h3", { className: "mb-3 font-semibold text-white", children: "Chapters" }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: chapters.map((chapter) => (_jsxs("button", { onClick: () => onChapterSelect(chapter), className: cn("flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors", "hover:bg-white/10", chapter.id === currentChapter?.id && "border border-primary/30 bg-primary/20"), children: [chapter.thumbnail && (_jsx("img", { src: chapter.thumbnail, alt: chapter.title, className: "h-9 w-16 rounded object-cover" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium text-white", children: chapter.title }), _jsxs("div", { className: "text-sm text-white/60", children: [formatTime(chapter.startTime), " - ", formatTime(chapter.endTime)] })] })] }, chapter.id))) })] }));
-};
-// Picture-in-Picture button
-export const PictureInPictureButton = function PictureInPictureButton({ className }) {
-    const dispatch = useMediaDispatch();
-    const isPictureInPicture = useMediaSelector(state => state.isPictureInPicture);
-    const handleTogglePiP = React.useCallback(() => {
-        dispatch({
-            type: isPictureInPicture ? MediaActionTypes.EXIT_PIP : MediaActionTypes.ENTER_PIP
-        });
-    }, [dispatch, isPictureInPicture]);
-    return (_jsx("button", { type: "button", onClick: handleTogglePiP, className: cn("flex h-10 w-10 items-center justify-center rounded-full text-white", "transition-colors hover:bg-white/10", className), "aria-label": isPictureInPicture ? "Exit Picture-in-Picture" : "Enter Picture-in-Picture", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-5 w-5", children: _jsx("path", { d: "M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" }) }) }));
-};

package/src/components/enhanced/debug-panel.js

@@ -1,94 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Debug Panel Component for Performance Monitoring
- * Development-only component for displaying performance metrics
- */
-import React, { useMemo } from 'react';
-import { cn } from '../../lib/utils';
-/**
- * Debug Panel Component
- */
-export const DebugPanel = ({ performanceMetrics = {}, preloadingStats = {}, playbackState = {}, hlsMetrics = {}, pluginInfo = {}, debugInfo = {}, className, position = 'top-right', defaultCollapsed = false, title = 'BaroiPlayer Debug Panel' }) => {
-    const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
-    const [activeTab, setActiveTab] = React.useState('performance');
-    // Position classes
-    const positionClasses = useMemo(() => {
-        switch (position) {
-            case 'top-left':
-                return 'top-4 left-4';
-            case 'top-right':
-                return 'top-4 right-4';
-            case 'bottom-left':
-                return 'bottom-4 left-4';
-            case 'bottom-right':
-                return 'bottom-4 right-4';
-            default:
-                return 'top-4 right-4';
-        }
-    }, [position]);
-    // Format bytes
-    const formatBytes = (bytes) => {
-        if (bytes === 0)
-            return '0 B';
-        const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    };
-    // Format time
-    const formatTime = (seconds) => {
-        const mins = Math.floor(seconds / 60);
-        const secs = Math.floor(seconds % 60);
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    };
-    // Render performance metrics
-    const renderPerformanceMetrics = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "FPS:" }), _jsx("span", { className: "ml-2 font-mono", children: performanceMetrics.fps || 0 })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Memory:" }), _jsxs("span", { className: "ml-2 font-mono", children: [((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1), " MB"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-yellow-400", children: "Buffer:" }), _jsxs("span", { className: "ml-2 font-mono", children: [(performanceMetrics.bufferHealth || 0).toFixed(2), "s"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-purple-400", children: "Bandwidth:" }), _jsxs("span", { className: "ml-2 font-mono", children: [formatBytes(performanceMetrics.networkBandwidth || 0), "/s"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-red-400", children: "Dropped:" }), _jsxs("span", { className: "ml-2 font-mono", children: [performanceMetrics.droppedFrames || 0, " frames"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-cyan-400", children: "Decoded:" }), _jsxs("span", { className: "ml-2 font-mono", children: [performanceMetrics.decodedFrames || 0, " frames"] })] })] }) }));
-    // Render playback state
-    const renderPlaybackState = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Status:" }), _jsx("span", { className: "ml-2 font-mono", children: playbackState.isPlaying ? (_jsx("span", { className: "text-green-300", children: "Playing" })) : (_jsx("span", { className: "text-red-300", children: "Paused" })) })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Time:" }), _jsxs("span", { className: "ml-2 font-mono", children: [formatTime(playbackState.currentTime || 0), " / ", formatTime(playbackState.duration || 0)] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-yellow-400", children: "Volume:" }), _jsxs("span", { className: "ml-2 font-mono", children: [Math.round((playbackState.volume || 0) * 100), "%"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-purple-400", children: "Quality:" }), _jsxs("span", { className: "ml-2 font-mono", children: [playbackState.quality || 0, "p"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-red-400", children: "Buffering:" }), _jsx("span", { className: "ml-2 font-mono", children: playbackState.isBuffering ? (_jsx("span", { className: "text-yellow-300", children: "Yes" })) : (_jsx("span", { className: "text-green-300", children: "No" })) })] }), playbackState.error && (_jsxs("div", { className: "col-span-2", children: [_jsx("span", { className: "text-red-400", children: "Error:" }), _jsx("span", { className: "ml-2 break-all font-mono text-red-300 text-xs", children: playbackState.error })] }))] }) }));
-    // Render preloading stats
-    const renderPreloadingStats = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Preloaded:" }), _jsxs("span", { className: "ml-2 font-mono", children: [preloadingStats.preloadedItems || 0, " items"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Engagement:" }), _jsxs("span", { className: "ml-2 font-mono", children: [(preloadingStats.engagementScore || 0).toFixed(1), "%"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-yellow-400", children: "Queue:" }), _jsxs("span", { className: "ml-2 font-mono", children: [preloadingStats.queueLength || 0, " items"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-purple-400", children: "Hit Rate:" }), _jsxs("span", { className: "ml-2 font-mono", children: [(preloadingStats.hitRate || 0).toFixed(1), "%"] })] }), _jsxs("div", { className: "col-span-2", children: [_jsx("span", { className: "text-cyan-400", children: "Saved:" }), _jsx("span", { className: "ml-2 font-mono", children: formatBytes(preloadingStats.totalSaved || 0) })] })] }) }));
-    // Render HLS metrics
-    const renderHLSMetrics = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Level:" }), _jsxs("span", { className: "ml-2 font-mono", children: [hlsMetrics.currentLevel || 0, " / ", hlsMetrics.availableLevels || 0] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Bandwidth:" }), _jsxs("span", { className: "ml-2 font-mono", children: [formatBytes(hlsMetrics.bandwidthEstimate || 0), "/s"] })] }), _jsxs("div", { children: [_jsx("span", { className: "text-red-400", children: "Dropped:" }), _jsxs("span", { className: "ml-2 font-mono", children: [hlsMetrics.droppedFrames || 0, " frames"] })] })] }) }));
-    // Render plugin info
-    const renderPluginInfo = () => (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "Total:" }), _jsxs("span", { className: "ml-2 font-mono", children: [pluginInfo.pluginCount || 0, " plugins"] })] }), _jsxs("div", { className: "mt-2", children: [_jsx("span", { className: "text-blue-400", children: "Active:" }), _jsx("div", { className: "ml-2 space-y-1 font-mono text-xs", children: pluginInfo.activePlugins?.map((plugin, index) => (_jsxs("div", { className: "text-green-300", children: ["\u2022 ", plugin] }, index))) || _jsx("div", { className: "text-gray-400", children: "None" }) })] }), pluginInfo.loadedPlugins && pluginInfo.loadedPlugins.length > pluginInfo.activePlugins?.length && (_jsxs("div", { className: "mt-2", children: [_jsx("span", { className: "text-yellow-400", children: "Loaded (inactive):" }), _jsx("div", { className: "ml-2 space-y-1 font-mono text-xs", children: pluginInfo.loadedPlugins
-                                .filter(plugin => !pluginInfo.activePlugins?.includes(plugin))
-                                .map((plugin, index) => (_jsxs("div", { className: "text-yellow-300", children: ["\u2022 ", plugin] }, index))) })] }))] }) }));
-    // Render debug info
-    const renderDebugInfo = () => (_jsx("div", { className: "space-y-2", children: _jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(debugInfo).map(([key, value]) => (_jsxs("div", { children: [_jsxs("span", { className: "text-yellow-400", children: [key, ":"] }), _jsx("span", { className: "ml-2 text-gray-300", children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) }) }));
-    // Render tabs
-    const renderTabs = () => (_jsx("div", { className: "flex space-x-1 border-gray-600 border-b", children: [
-            { id: 'performance', label: 'Performance' },
-            { id: 'hls', label: 'HLS' },
-            { id: 'plugins', label: 'Plugins' },
-            { id: 'debug', label: 'Debug' }
-        ].map(tab => (_jsx("button", { onClick: () => setActiveTab(tab.id), className: cn("px-2 py-1 font-medium text-xs transition-colors", activeTab === tab.id
-                ? "border-blue-400 border-b text-blue-400"
-                : 'text-gray-400 hover:text-white'), children: tab.label }, tab.id))) }));
-    // Render active tab content
-    const renderTabContent = () => {
-        switch (activeTab) {
-            case 'performance':
-                return (_jsxs("div", { className: "space-y-3", children: [renderPerformanceMetrics(), _jsx("hr", { className: "border-gray-600" }), renderPlaybackState(), _jsx("hr", { className: "border-gray-600" }), renderPreloadingStats()] }));
-            case 'hls':
-                return renderHLSMetrics();
-            case 'plugins':
-                return renderPluginInfo();
-            case 'debug':
-                return renderDebugInfo();
-            default:
-                return renderPerformanceMetrics();
-        }
-    };
-    // Only render in development
-    if (process.env.NODE_ENV !== 'development') {
-        return null;
-    }
-    return (_jsxs("div", { className: cn("fixed z-50 min-w-80 max-w-96 rounded-lg border border-gray-700 bg-black/90 p-3 font-mono text-white text-xs backdrop-blur-sm", positionClasses, className), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "font-bold text-blue-400 text-sm", children: title }), _jsx("div", { className: "flex items-center space-x-2", children: _jsx("button", { onClick: () => setIsCollapsed(!isCollapsed), className: "text-gray-400 transition-colors hover:text-white", "aria-label": isCollapsed ? 'Expand' : 'Collapse', children: isCollapsed ? (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: _jsx("path", { d: "M3 7.5L6 4.5L9 7.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }) })] }), isCollapsed ? (_jsxs("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [_jsxs("div", { children: [_jsx("span", { className: "text-green-400", children: "FPS:" }), _jsx("span", { className: "ml-1 font-mono", children: performanceMetrics.fps || 0 })] }), _jsxs("div", { children: [_jsx("span", { className: "text-blue-400", children: "Memory:" }), _jsxs("span", { className: "ml-1 font-mono", children: [((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1), "MB"] })] })] })) : (_jsxs(_Fragment, { children: [renderTabs(), _jsx("div", { className: "mt-3 max-h-64 overflow-y-auto", children: renderTabContent() })] }))] }));
-};
-/**
- * Performance Debug Panel - simplified version focused on performance metrics
- */
-export const PerformanceDebugPanel = (props) => {
-    return (_jsx(DebugPanel, { ...props, position: "top-right", defaultCollapsed: false, title: "Performance Monitor" }));
-};
-export default DebugPanel;

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

@@ -1,233 +0,0 @@
-"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" })) })] })] }));
-};