@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/enhanced/debug-panel.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Debug Panel Component for Performance Monitoring
+ * Development-only component for displaying performance metrics
+ */
+import React from 'react';
+interface PerformanceMetrics {
+    fps: number;
+    memoryUsage: number;
+    bufferHealth: number;
+    networkBandwidth: number;
+    droppedFrames: number;
+    decodedFrames: number;
+    presentationTime: number;
+}
+interface PreloadingStats {
+    preloadedItems: number;
+    engagementScore: number;
+    queueLength: number;
+    hitRate: number;
+    totalSaved: number;
+}
+interface DebugPanelProps {
+    /** Performance metrics to display */
+    performanceMetrics?: Partial<PerformanceMetrics>;
+    /** Preloading statistics */
+    preloadingStats?: PreloadingStats;
+    /** Current playback state */
+    playbackState?: {
+        currentTime: number;
+        duration: number;
+        volume: number;
+        isPlaying: boolean;
+        quality: number;
+        isBuffering: boolean;
+        error?: string;
+    };
+    /** HLS-specific metrics */
+    hlsMetrics?: {
+        currentLevel: number;
+        availableLevels: number;
+        bandwidthEstimate: number;
+        droppedFrames: number;
+    };
+    /** Plugin information */
+    pluginInfo?: {
+        loadedPlugins: string[];
+        activePlugins: string[];
+        pluginCount: number;
+    };
+    /** Additional debug information */
+    debugInfo?: Record<string, any>;
+    /** Custom className */
+    className?: string;
+    /** Panel position */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** Whether the panel is collapsed by default */
+    defaultCollapsed?: boolean;
+    /** Custom title */
+    title?: string;
+}
+/**
+ * Debug Panel Component
+ */
+export declare const DebugPanel: React.FC<DebugPanelProps>;
+/**
+ * Performance Debug Panel - simplified version focused on performance metrics
+ */
+export declare const PerformanceDebugPanel: React.FC<Omit<DebugPanelProps, 'position' | 'defaultCollapsed' | 'title'>>;
+export default DebugPanel;
+//# sourceMappingURL=debug-panel.d.ts.map

package/dist/src/components/enhanced/debug-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-panel.d.ts","sourceRoot":"","sources":["debug-panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,UAAU,kBAAkB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,eAAe;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,eAAe;IACxB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjD,4BAA4B;IAC5B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6BAA6B;IAC7B,aAAa,CAAC,EAAE;QACf,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,OAAO,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,2BAA2B;IAC3B,UAAU,CAAC,EAAE;QACZ,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,aAAa,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,yBAAyB;IACzB,UAAU,CAAC,EAAE;QACZ,aAAa,EAAE,MAAM,EAAE,CAAC;QACxB,aAAa,EAAE,MAAM,EAAE,CAAC;QACxB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;IACrE,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgVhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,kBAAkB,GAAG,OAAO,CAAC,CAS5G,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,94 @@
+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/dist/src/components/enhanced/debug-panel.tsx

@@ -0,0 +1,422 @@
+/**
+ * Debug Panel Component for Performance Monitoring
+ * Development-only component for displaying performance metrics
+ */
+
+import React, { useMemo } from 'react';
+import { cn } from '../../lib/utils';
+
+interface PerformanceMetrics {
+	fps: number;
+	memoryUsage: number;
+	bufferHealth: number;
+	networkBandwidth: number;
+	droppedFrames: number;
+	decodedFrames: number;
+	presentationTime: number;
+}
+
+interface PreloadingStats {
+	preloadedItems: number;
+	engagementScore: number;
+	queueLength: number;
+	hitRate: number;
+	totalSaved: number;
+}
+
+interface DebugPanelProps {
+	/** Performance metrics to display */
+	performanceMetrics?: Partial<PerformanceMetrics>;
+	/** Preloading statistics */
+	preloadingStats?: PreloadingStats;
+	/** Current playback state */
+	playbackState?: {
+		currentTime: number;
+		duration: number;
+		volume: number;
+		isPlaying: boolean;
+		quality: number;
+		isBuffering: boolean;
+		error?: string;
+	};
+	/** HLS-specific metrics */
+	hlsMetrics?: {
+		currentLevel: number;
+		availableLevels: number;
+		bandwidthEstimate: number;
+		droppedFrames: number;
+	};
+	/** Plugin information */
+	pluginInfo?: {
+		loadedPlugins: string[];
+		activePlugins: string[];
+		pluginCount: number;
+	};
+	/** Additional debug information */
+	debugInfo?: Record<string, any>;
+	/** Custom className */
+	className?: string;
+	/** Panel position */
+	position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+	/** Whether the panel is collapsed by default */
+	defaultCollapsed?: boolean;
+	/** Custom title */
+	title?: string;
+}
+
+/**
+ * Debug Panel Component
+ */
+export const DebugPanel: React.FC<DebugPanelProps> = ({
+	performanceMetrics = {},
+	preloadingStats = {} as PreloadingStats,
+	playbackState = {} as any,
+	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' | 'hls' | 'plugins' | 'debug'>('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: number): string => {
+		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: number): string => {
+		const mins = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${mins}:${secs.toString().padStart(2, '0')}`;
+	};
+
+	// Render performance metrics
+	const renderPerformanceMetrics = () => (
+		<div className="space-y-2">
+			<div className="grid grid-cols-2 gap-2 text-xs">
+				<div>
+					<span className="text-green-400">FPS:</span>
+					<span className="ml-2 font-mono">{performanceMetrics.fps || 0}</span>
+				</div>
+				<div>
+					<span className="text-blue-400">Memory:</span>
+					<span className="ml-2 font-mono">{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)} MB</span>
+				</div>
+				<div>
+					<span className="text-yellow-400">Buffer:</span>
+					<span className="ml-2 font-mono">{(performanceMetrics.bufferHealth || 0).toFixed(2)}s</span>
+				</div>
+				<div>
+					<span className="text-purple-400">Bandwidth:</span>
+					<span className="ml-2 font-mono">{formatBytes(performanceMetrics.networkBandwidth || 0)}/s</span>
+				</div>
+				<div>
+					<span className="text-red-400">Dropped:</span>
+					<span className="ml-2 font-mono">{performanceMetrics.droppedFrames || 0} frames</span>
+				</div>
+				<div>
+					<span className="text-cyan-400">Decoded:</span>
+					<span className="ml-2 font-mono">{performanceMetrics.decodedFrames || 0} frames</span>
+				</div>
+			</div>
+		</div>
+	);
+
+	// Render playback state
+	const renderPlaybackState = () => (
+		<div className="space-y-2">
+			<div className="grid grid-cols-2 gap-2 text-xs">
+				<div>
+					<span className="text-green-400">Status:</span>
+					<span className="ml-2 font-mono">
+						{playbackState.isPlaying ? (
+							<span className="text-green-300">Playing</span>
+						) : (
+							<span className="text-red-300">Paused</span>
+						)}
+					</span>
+				</div>
+				<div>
+					<span className="text-blue-400">Time:</span>
+					<span className="ml-2 font-mono">
+						{formatTime(playbackState.currentTime || 0)} / {formatTime(playbackState.duration || 0)}
+					</span>
+				</div>
+				<div>
+					<span className="text-yellow-400">Volume:</span>
+					<span className="ml-2 font-mono">{Math.round((playbackState.volume || 0) * 100)}%</span>
+				</div>
+				<div>
+					<span className="text-purple-400">Quality:</span>
+					<span className="ml-2 font-mono">{playbackState.quality || 0}p</span>
+				</div>
+				<div>
+					<span className="text-red-400">Buffering:</span>
+					<span className="ml-2 font-mono">
+						{playbackState.isBuffering ? (
+							<span className="text-yellow-300">Yes</span>
+						) : (
+							<span className="text-green-300">No</span>
+						)}
+					</span>
+				</div>
+				{playbackState.error && (
+					<div className="col-span-2">
+						<span className="text-red-400">Error:</span>
+						<span className="ml-2 break-all font-mono text-red-300 text-xs">
+							{playbackState.error}
+						</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+
+	// Render preloading stats
+	const renderPreloadingStats = () => (
+		<div className="space-y-2">
+			<div className="grid grid-cols-2 gap-2 text-xs">
+				<div>
+					<span className="text-green-400">Preloaded:</span>
+					<span className="ml-2 font-mono">{preloadingStats.preloadedItems || 0} items</span>
+				</div>
+				<div>
+					<span className="text-blue-400">Engagement:</span>
+					<span className="ml-2 font-mono">{(preloadingStats.engagementScore || 0).toFixed(1)}%</span>
+				</div>
+				<div>
+					<span className="text-yellow-400">Queue:</span>
+					<span className="ml-2 font-mono">{preloadingStats.queueLength || 0} items</span>
+				</div>
+				<div>
+					<span className="text-purple-400">Hit Rate:</span>
+					<span className="ml-2 font-mono">{(preloadingStats.hitRate || 0).toFixed(1)}%</span>
+				</div>
+				<div className="col-span-2">
+					<span className="text-cyan-400">Saved:</span>
+					<span className="ml-2 font-mono">{formatBytes(preloadingStats.totalSaved || 0)}</span>
+				</div>
+			</div>
+		</div>
+	);
+
+	// Render HLS metrics
+	const renderHLSMetrics = () => (
+		<div className="space-y-2">
+			<div className="grid grid-cols-2 gap-2 text-xs">
+				<div>
+					<span className="text-green-400">Level:</span>
+					<span className="ml-2 font-mono">
+						{hlsMetrics.currentLevel || 0} / {hlsMetrics.availableLevels || 0}
+					</span>
+				</div>
+				<div>
+					<span className="text-blue-400">Bandwidth:</span>
+					<span className="ml-2 font-mono">{formatBytes(hlsMetrics.bandwidthEstimate || 0)}/s</span>
+				</div>
+				<div>
+					<span className="text-red-400">Dropped:</span>
+					<span className="ml-2 font-mono">{hlsMetrics.droppedFrames || 0} frames</span>
+				</div>
+			</div>
+		</div>
+	);
+
+	// Render plugin info
+	const renderPluginInfo = () => (
+		<div className="space-y-2">
+			<div className="text-xs">
+				<div>
+					<span className="text-green-400">Total:</span>
+					<span className="ml-2 font-mono">{pluginInfo.pluginCount || 0} plugins</span>
+				</div>
+				<div className="mt-2">
+					<span className="text-blue-400">Active:</span>
+					<div className="ml-2 space-y-1 font-mono text-xs">
+						{pluginInfo.activePlugins?.map((plugin, index) => (
+							<div key={index} className="text-green-300">• {plugin}</div>
+						)) || <div className="text-gray-400">None</div>}
+					</div>
+				</div>
+				{pluginInfo.loadedPlugins && pluginInfo.loadedPlugins.length > pluginInfo.activePlugins?.length && (
+					<div className="mt-2">
+						<span className="text-yellow-400">Loaded (inactive):</span>
+						<div className="ml-2 space-y-1 font-mono text-xs">
+							{pluginInfo.loadedPlugins
+								.filter(plugin => !pluginInfo.activePlugins?.includes(plugin))
+								.map((plugin, index) => (
+									<div key={index} className="text-yellow-300">• {plugin}</div>
+								))}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+
+	// Render debug info
+	const renderDebugInfo = () => (
+		<div className="space-y-2">
+			<div className="space-y-1 font-mono text-xs">
+				{Object.entries(debugInfo).map(([key, value]) => (
+					<div key={key}>
+						<span className="text-yellow-400">{key}:</span>
+						<span className="ml-2 text-gray-300">
+							{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
+						</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+
+	// Render tabs
+	const renderTabs = () => (
+		<div className="flex space-x-1 border-gray-600 border-b">
+			{[
+				{ id: 'performance', label: 'Performance' },
+				{ id: 'hls', label: 'HLS' },
+				{ id: 'plugins', label: 'Plugins' },
+				{ id: 'debug', label: 'Debug' }
+			].map(tab => (
+				<button
+					key={tab.id}
+					onClick={() => setActiveTab(tab.id as any)}
+					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'
+					)}
+				>
+					{tab.label}
+				</button>
+			))}
+		</div>
+	);
+
+	// Render active tab content
+	const renderTabContent = () => {
+		switch (activeTab) {
+			case 'performance':
+				return (
+					<div className="space-y-3">
+						{renderPerformanceMetrics()}
+						<hr className="border-gray-600" />
+						{renderPlaybackState()}
+						<hr className="border-gray-600" />
+						{renderPreloadingStats()}
+					</div>
+				);
+			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 (
+		<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
+			)}
+		>
+			{/* Header */}
+			<div className="mb-3 flex items-center justify-between">
+				<h3 className="font-bold text-blue-400 text-sm">{title}</h3>
+				<div className="flex items-center space-x-2">
+					<button
+						onClick={() => setIsCollapsed(!isCollapsed)}
+						className="text-gray-400 transition-colors hover:text-white"
+						aria-label={isCollapsed ? 'Expand' : 'Collapse'}
+					>
+						{isCollapsed ? (
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+								<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+							</svg>
+						) : (
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+								<path d="M3 7.5L6 4.5L9 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+							</svg>
+						)}
+					</button>
+				</div>
+			</div>
+
+			{/* Collapsed content */}
+			{isCollapsed ? (
+				<div className="grid grid-cols-2 gap-2 text-xs">
+					<div>
+						<span className="text-green-400">FPS:</span>
+						<span className="ml-1 font-mono">{performanceMetrics.fps || 0}</span>
+					</div>
+					<div>
+						<span className="text-blue-400">Memory:</span>
+						<span className="ml-1 font-mono">{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)}MB</span>
+					</div>
+				</div>
+			) : (
+				<>
+					{/* Tabs */}
+					{renderTabs()}
+
+					{/* Tab Content */}
+					<div className="mt-3 max-h-64 overflow-y-auto">
+						{renderTabContent()}
+					</div>
+				</>
+			)}
+		</div>
+	);
+};
+
+/**
+ * Performance Debug Panel - simplified version focused on performance metrics
+ */
+export const PerformanceDebugPanel: React.FC<Omit<DebugPanelProps, 'position' | 'defaultCollapsed' | 'title'>> = (props) => {
+	return (
+		<DebugPanel
+			{...props}
+			position="top-right"
+			defaultCollapsed={false}
+			title="Performance Monitor"
+		/>
+	);
+};
+
+export default DebugPanel;

package/dist/src/components/enhanced/enhanced-controls.d.ts

@@ -0,0 +1,50 @@
+export declare const EnhancedPlayButton: ({ className, size }: {
+    className?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedSeekBar: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedVolumeControl: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedBackwardButton: ({ className, size, skipTime }: {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    skipTime?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedForwardButton: ({ className, size, skipTime }: {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    skipTime?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedTimeDisplay: ({ variant, className }: {
+    variant?: "current" | "duration" | "remaining";
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PerformanceIndicator: ({ metrics, className }: {
+    metrics?: {
+        fps?: number;
+        bufferHealth?: number;
+        quality?: number;
+        bandwidth?: number;
+    };
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EnhancedControlBar: ({ className, showSkipButtons, showVolumeControl, showTimeDisplay, playButtonSize, skipButtonSize, skipTime, showPerformanceIndicators, performanceMetrics }: {
+    className?: string;
+    showSkipButtons?: boolean;
+    showVolumeControl?: boolean;
+    showTimeDisplay?: boolean;
+    playButtonSize?: "sm" | "md" | "lg" | "xl";
+    skipButtonSize?: "sm" | "md" | "lg";
+    skipTime?: number;
+    showPerformanceIndicators?: boolean;
+    performanceMetrics?: {
+        fps?: number;
+        bufferHealth?: number;
+        quality?: number;
+        bandwidth?: number;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enhanced-controls.d.ts.map

package/dist/src/components/enhanced/enhanced-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-controls.d.ts","sourceRoot":"","sources":["enhanced-controls.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB,GAA+B,qBAG3D;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAChC,4CA0DA,CAAA;AAGD,eAAO,MAAM,eAAe,GAA4B,eAErD;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CA0JA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,eAEjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAqEA,CAAA;AAGD,eAAO,MAAM,sBAAsB,GAAmC,+BAInE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,4CAiDA,CAAA;AAGD,eAAO,MAAM,qBAAqB,GAAkC,+BAIjE;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,4CAkDA,CAAA;AAGD,eAAO,MAAM,mBAAmB,GAAgC,wBAG7D;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAsBA,CAAA;AAGD,eAAO,MAAM,oBAAoB,GAAiC,wBAG/D;IACF,OAAO,CAAC,EAAE;QACT,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,mDAuCA,CAAA;AAGD,eAAO,MAAM,kBAAkB,GAA+B,6JAU3D;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC1C,cAAc,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,kBAAkB,CAAC,EAAE;QACpB,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACD,4CAyDA,CAAA"}