@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/core/optimization/bundle-optimizer.tsx

@@ -1,312 +0,0 @@
-"use client"
-
-import React, { Suspense, lazy, useMemo } from "react"
-import { MediaLoading } from "../../components/media-suspense"
-
-// Lazy loaded components for bundle splitting
-// Note: These components don't exist yet, so we create placeholder lazy loaders
-const LazyAdvancedControls = lazy(() =>
-	Promise.resolve({ default: () => null } as any)
-)
-
-const LazyPlaylist = lazy(() =>
-	Promise.resolve({ default: () => null } as any)
-)
-
-const LazySubtitles = lazy(() =>
-	Promise.resolve({ default: () => null } as any)
-)
-
-const LazyAnalytics = lazy(() =>
-	import("../../core/plugins/examples/analytics-plugin").then((module) => ({
-		default: module.AnalyticsPlugin as any
-	})).catch(() => ({ default: () => null } as any))
-)
-
-// Component types for dynamic loading
-export interface LazyComponentConfig {
-	component: string
-	fallback?: React.ReactNode
-	preload?: boolean
-	priority?: "high" | "normal" | "low"
-}
-
-// Bundle optimization component
-export function BundleOptimizer({
-	children,
-	lazyComponents = [],
-	preloadStrategy = "viewport"
-}: {
-	children: React.ReactNode
-	lazyComponents?: LazyComponentConfig[]
-	preloadStrategy?: "viewport" | "hover" | "immediate" | "never"
-}) {
-	// Memoize component mapping for performance
-	const componentMap = useMemo(
-		() => ({
-			"advanced-controls": LazyAdvancedControls,
-			playlist: LazyPlaylist,
-			subtitles: LazySubtitles,
-			analytics: LazyAnalytics
-		}),
-		[]
-	)
-
-	// Preload components based on strategy
-	React.useEffect(() => {
-		if (preloadStrategy === "immediate") {
-			// Preload all components immediately
-			lazyComponents.forEach(({ component }) => {
-				const Component = componentMap[component as keyof typeof componentMap]
-				if (Component && 'preload' in Component && typeof (Component as any).preload === 'function') {
-					// Trigger dynamic import
-					(Component as any).preload()
-				}
-			})
-		} else if (preloadStrategy === "viewport") {
-			// Preload when component is likely to enter viewport
-			const observer = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							const componentName = entry.target.getAttribute("data-component")
-							if (componentName) {
-								const Component = componentMap[componentName as keyof typeof componentMap]
-								if (Component && 'preload' in Component && typeof (Component as any).preload === 'function') {
-									(Component as any).preload()
-								}
-							}
-							observer.unobserve(entry.target)
-						}
-					})
-				},
-				{ threshold: 0.1, rootMargin: "50px" }
-			)
-
-			// Observe lazy component containers
-			lazyComponents.forEach(({ component, priority }) => {
-				if (priority === "high") {
-					const element = document.querySelector(`[data-component="${component}"]`)
-					if (element) {
-						observer.observe(element)
-					}
-				}
-			})
-
-			return () => observer.disconnect()
-		}
-	}, [preloadStrategy, lazyComponents, componentMap])
-
-	// Render lazy components with suspense boundaries
-	const renderLazyComponent = (config: LazyComponentConfig) => {
-		const Component = componentMap[config.component as keyof typeof componentMap]
-		if (!Component) return null
-
-		const LazyComponent = Component as React.ComponentType<any>
-
-		return (
-			<Suspense key={config.component} fallback={config.fallback || <MediaLoading size="sm" />}>
-				<div data-component={config.component} data-priority={config.priority}>
-					<LazyComponent />
-				</div>
-			</Suspense>
-		)
-	}
-
-	return (
-		<>
-			{children}
-			{lazyComponents.map(renderLazyComponent)}
-		</>
-	)
-}
-
-// Progressive loading hook
-export function useProgressiveLoading() {
-	const [loadedComponents, setLoadedComponents] = React.useState<Set<string>>(new Set())
-
-	const loadComponent = React.useCallback(
-		async (componentName: string) => {
-			if (loadedComponents.has(componentName)) return
-
-			try {
-				// Dynamic import based on component name - placeholders for now
-				const imports: Record<string, () => Promise<any>> = {
-					"advanced-controls": () => Promise.resolve({ default: () => null }),
-					playlist: () => Promise.resolve({ default: () => null }),
-					subtitles: () => Promise.resolve({ default: () => null }),
-					analytics: () => import("../../core/plugins/examples/analytics-plugin").catch(() => ({ default: () => null }))
-				}
-
-				const importFn = imports[componentName]
-				if (importFn) {
-					await importFn()
-					setLoadedComponents((prev) => new Set([...prev, componentName]))
-				}
-			} catch (error) {
-				console.warn(`Failed to load component ${componentName}:`, error)
-			}
-		},
-		[loadedComponents]
-	)
-
-	const preloadComponents = React.useCallback(
-		(componentNames: string[]) => {
-			componentNames.forEach(loadComponent)
-		},
-		[loadComponent]
-	)
-
-	return {
-		loadedComponents,
-		loadComponent,
-		preloadComponents,
-		isComponentLoaded: (componentName: string) => loadedComponents.has(componentName)
-	}
-}
-
-// Tree shaking utilities
-export function createLazyComponent<T extends React.ComponentType<any>>(
-	importFn: () => Promise<{ default: T }>,
-	componentName: string
-) {
-	const LazyComponent = React.lazy(importFn)
-
-	// Add preload method for manual preloading
-	if ('preload' in React.lazy) {
-		(LazyComponent as any).preload = importFn
-	}
-
-	// Add display name for debugging
-	if (LazyComponent) {
-		(LazyComponent as any).displayName = `Lazy${componentName}`
-	}
-
-	return LazyComponent
-}
-
-// Bundle analyzer utilities
-export interface BundleMetrics {
-	totalSize: number
-	chunkSizes: Record<string, number>
-	loadedChunks: Set<string>
-	pendingChunks: Set<string>
-	compressionRatio: number
-}
-
-export function useBundleMetrics() {
-	const [metrics, setMetrics] = React.useState<BundleMetrics>({
-		totalSize: 0,
-		chunkSizes: {},
-		loadedChunks: new Set(),
-		pendingChunks: new Set(),
-		compressionRatio: 1
-	})
-
-	React.useEffect(() => {
-		// Monitor bundle loading if performance observer is available
-		if (typeof window !== "undefined" && "PerformanceObserver" in window) {
-			const observer = new PerformanceObserver((list) => {
-				for (const entry of list.getEntries()) {
-					if (entry.entryType === "resource" && entry.name.includes(".js")) {
-						const chunkName = entry.name.split("/").pop() || "unknown"
-
-						setMetrics((prev) => ({
-							...prev,
-							chunkSizes: {
-								...prev.chunkSizes,
-								[chunkName]: (entry as any).transferSize || 0
-							},
-							loadedChunks: new Set([...prev.loadedChunks, chunkName]),
-							totalSize: prev.totalSize + ((entry as any).transferSize || 0)
-						}))
-					}
-				}
-			})
-
-			observer.observe({ entryTypes: ["resource"] })
-
-			return () => observer.disconnect()
-		}
-	}, [])
-
-	const getLargestChunk = React.useCallback(() => {
-		const entries = Object.entries(metrics.chunkSizes)
-		if (entries.length === 0) return null
-
-		return entries.reduce((a, b) => (a[1] > b[1] ? a : b))
-	}, [metrics.chunkSizes])
-
-	const formatBytes = React.useCallback((bytes: number) => {
-		if (bytes === 0) return "0 Bytes"
-		const k = 1024
-		const sizes = ["Bytes", "KB", "MB", "GB"]
-		const i = Math.floor(Math.log(bytes) / Math.log(k))
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-	}, [])
-
-	return {
-		...metrics,
-		largestChunk: getLargestChunk(),
-		formatBytes,
-		totalSizeFormatted: formatBytes(metrics.totalSize)
-	}
-}
-
-// Preloading strategies
-export const PreloadStrategies = {
-	// Preload when user hovers over trigger element
-	onHover: (element: HTMLElement, importFn: () => Promise<any>) => {
-		let timeoutId: NodeJS.Timeout
-
-		const handleMouseEnter = () => {
-			timeoutId = setTimeout(importFn, 200) // 200ms delay
-		}
-
-		const handleMouseLeave = () => {
-			if (timeoutId) {
-				clearTimeout(timeoutId)
-			}
-		}
-
-		element.addEventListener("mouseenter", handleMouseEnter)
-		element.addEventListener("mouseleave", handleMouseLeave)
-
-		return () => {
-			element.removeEventListener("mouseenter", handleMouseEnter)
-			element.removeEventListener("mouseleave", handleMouseLeave)
-			if (timeoutId) {
-				clearTimeout(timeoutId)
-			}
-		}
-	},
-
-	// Preload when component enters viewport
-	onViewport: (element: HTMLElement, importFn: () => Promise<any>) => {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry) => {
-					if (entry.isIntersecting) {
-						importFn()
-						observer.unobserve(entry.target)
-					}
-				})
-			},
-			{ threshold: 0.1, rootMargin: "50px" }
-		)
-
-		observer.observe(element)
-		return () => observer.disconnect()
-	},
-
-	// Preload after idle time
-	onIdle: (importFn: () => Promise<any>, delay = 1000) => {
-		if ("requestIdleCallback" in window) {
-			return (window as any).requestIdleCallback(() => {
-				setTimeout(importFn, delay)
-			})
-		} else {
-			return setTimeout(importFn, delay)
-		}
-	}
-}

package/src/core/performance/cicd.ts

@@ -1,98 +0,0 @@
-// CI/CD integration utilities - Node.js only
-import { type BudgetViolation, performanceBudgetMonitor } from "./performance-budgets"
-
-export const cicdIntegration = {
-	// Check if running in CI environment
-	isCI(): boolean {
-		return !!(
-			process.env.CI ||
-			process.env.CONTINUOUS_INTEGRATION ||
-			process.env.BUILD_NUMBER ||
-			process.env.GITHUB_ACTIONS ||
-			process.env.GITLAB_CI ||
-			process.env.CIRCLE_CI
-		)
-	},
-
-	// Exit with error code if budget violations found
-	async enforcebudgets(distPath: string): Promise<void> {
-		const violations = await performanceBudgetMonitor.checkBundleSizes(distPath)
-		const errorViolations = violations.filter((v) => v.budget.severity === "error")
-
-		if (errorViolations.length > 0) {
-			console.error(`❌ Performance budget violations detected: ${errorViolations.length} errors`)
-			errorViolations.forEach((violation) => {
-				console.error(
-					`  - ${violation.budget.name}: ${this.formatValue(violation.actualValue, violation.budget.unit)} (limit: ${this.formatValue(violation.budget.limit, violation.budget.unit)})`
-				)
-			})
-
-			if (this.isCI()) {
-				process.exit(1)
-			}
-		} else {
-			console.log("✅ All performance budgets passed")
-		}
-	},
-
-	// Generate budget report for CI
-	generateCIReport(): string {
-		const summary = performanceBudgetMonitor.getViolationSummary()
-		const violations = performanceBudgetMonitor.getViolations()
-
-		let report = "## Performance Budget Report\n\n"
-
-		if (summary.total === 0) {
-			report += "✅ **All performance budgets passed!**\n\n"
-		} else {
-			report += `❌ **${summary.total} budget violations detected**\n\n`
-
-			report += "### Violations by Category\n"
-			Object.entries(summary.byCategory).forEach(([category, count]) => {
-				report += `- ${category}: ${count}\n`
-			})
-
-			report += "\n### Violations by Severity\n"
-			Object.entries(summary.bySeverity).forEach(([severity, count]) => {
-				const emoji = severity === "error" ? "🔴" : severity === "warning" ? "🟡" : "🔵"
-				report += `- ${emoji} ${severity}: ${count}\n`
-			})
-
-			report += "\n### Detailed Violations\n"
-			violations.forEach((violation) => {
-				const emoji = violation.budget.severity === "error" ? "🔴" : "🟡"
-				report += `${emoji} **${violation.budget.name}**\n`
-				report += `- Limit: ${this.formatValue(violation.budget.limit, violation.budget.unit)}\n`
-				report += `- Actual: ${this.formatValue(violation.actualValue, violation.budget.unit)}\n`
-				report += `- Overage: +${violation.overagePercentage.toFixed(1)}%\n\n`
-			})
-		}
-
-		return report
-	},
-
-	formatValue(value: number, unit: "bytes" | "ms" | "score" | "percent"): string {
-		switch (unit) {
-			case "bytes":
-				return this.formatBytes(value)
-			case "ms":
-				return `${value.toFixed(2)}ms`
-			case "score":
-				return value.toFixed(3)
-			case "percent":
-				return `${value.toFixed(1)}%`
-			default:
-				return value.toString()
-		}
-	},
-
-	formatBytes(bytes: number): string {
-		if (bytes >= 1024 * 1024) {
-			return `${(bytes / 1024 / 1024).toFixed(2)}MB`
-		}
-		if (bytes >= 1024) {
-			return `${(bytes / 1024).toFixed(2)}KB`
-		}
-		return `${bytes}B`
-	}
-}

package/src/core/performance/index.ts

@@ -1,38 +0,0 @@
-// Performance Monitoring
-export * from "./performance-monitor"
-export { default as PerformanceMonitor } from "./performance-monitor"
-
-// Performance Testing
-export * from "./performance-testing"
-
-// Performance Budgets and CI/CD
-export * from "./performance-budgets"
-
-// Media Loading Optimization
-export * from "./media-loading-optimizer"
-
-// Re-export key classes and utilities for convenience
-export {
-	performanceMonitor,
-	PerformanceDashboard,
-	usePerformanceMonitor,
-	withPerformanceMonitoring
-} from "./performance-monitor"
-
-export {
-	performanceBenchmark,
-	performanceTestUtils,
-	performanceTestFramework
-} from "./performance-testing"
-
-export {
-	performanceBudgetMonitor,
-	defaultPerformanceBudgets
-} from "./performance-budgets"
-
-export {
-	mediaLoadingOptimizer,
-	useMediaLoadingOptimizer,
-	NetworkMonitor,
-	MediaLoadingOptimizer
-} from "./media-loading-optimizer"