@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,422 +0,0 @@
-/**
- * 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 ?? 0) && (
-					<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

@@ -1,50 +0,0 @@
-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