@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/dist/src/components/media-player.tsx

@@ -1,257 +0,0 @@
-"use client"
-
-import { forwardRef, useMemo, useTransition, startTransition } from "react"
-import { useKeyboardControls } from "../hooks/use-keyboard-controls"
-import { useEnhancedMediaPlayer } from "../hooks/use-enhanced-media-player"
-import { useMemoryOptimization } from "../hooks/use-memory-optimization"
-import { EnhancedMediaWrapper } from "./media-suspense"
-import { cn } from "../lib/utils"
-import type { MediaPlayerProps } from "../types/index"
-
-export const MediaPlayer = forwardRef<HTMLDivElement, MediaPlayerProps>(
-	(
-		{
-			src,
-			className,
-			children,
-			keyboardControls = true,
-			showControls = true,
-			customControls = false,
-			crossOrigin,
-			enablePerformanceMonitoring = true,
-			bufferingStrategy = "adaptive",
-			preloadStrategy = "progressive",
-			enableOptimizations = true,
-			...options
-		},
-		ref
-	) => {
-		// React 19 concurrent features
-		const [isPending] = useTransition()
-
-		// Enhanced media player with optimizations
-		const { state, controls, mediaRef, containerRef, performanceMetrics, isEnhanced } = useEnhancedMediaPlayer({
-			src,
-			crossOrigin,
-			enablePerformanceMonitoring,
-			bufferingStrategy,
-			preloadStrategy,
-			enableTimeUpdateThrottling: true,
-			timeUpdateThrottleMs: 100,
-			enableSeekPreview: true,
-			...options
-		})
-
-		// Memory optimization
-		const { memoryStats, addEventListener } = useMemoryOptimization({
-			maxMemoryUsage: 50, // 50MB for media player
-			cleanupInterval: 15000, // 15 seconds
-			enableGC: true,
-			monitorMemory: enableOptimizations
-		})
-
-		// Keyboard controls with performance optimization
-		useKeyboardControls({
-			enabled: keyboardControls,
-			state,
-			controls
-		})
-
-		// Memoize media type detection
-		const isVideo = useMemo(() => {
-			return Array.isArray(src)
-				? src.some((s) => /\.(mp4|webm|ogv|mov|avi)$/i.test(s))
-				: /\.(mp4|webm|ogv|mov|avi)$/i.test(src)
-		}, [src])
-
-		// Memoize source rendering
-		const renderSources = useMemo(() => {
-			if (!Array.isArray(src)) return null
-
-			return src.map((source, index) => (
-				<source key={`${source}-${index}`} src={source} />
-			))
-		}, [src])
-
-		// Memoize common props
-		const commonProps = useMemo(() => ({
-			controls: showControls && !customControls,
-			className: cn(
-				"w-full transition-all duration-300",
-				isVideo && "aspect-video",
-				"bg-[color:var(--media-bg)] rounded-lg",
-				state.isTransitioning && "opacity-90"
-			),
-			preload: preloadStrategy === "eager" ? "auto" : "metadata",
-			crossOrigin,
-			...(Array.isArray(src) ? {} : { src })
-		}), [showControls, customControls, isVideo, state.isTransitioning, preloadStrategy, crossOrigin, src])
-
-		return (
-		<EnhancedMediaWrapper
-			priority="high"
-			errorFallback={({ error, resetError }) => (
-				<div className={cn(
-					"absolute inset-0 flex items-center justify-center",
-					"glass-strong animate-enter rounded-lg",
-					"bg-[color:var(--color-error)]/10 backdrop-blur-md"
-				)}>
-					<div className="space-y-2 text-center text-[color:var(--media-text)]">
-						<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3">
-							<svg className="size-6 text-[color:var(--color-error)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-							</svg>
-						</div>
-						<p className="font-semibold text-lg">Playback Error</p>
-						<p className="max-w-xs text-[color:var(--media-text-secondary)] text-sm">
-							{error.message || state.error}
-						</p>
-						<button
-							onClick={resetError}
-							className="mt-2 rounded bg-[color:var(--color-brand-primary)] px-4 py-2 text-sm text-white transition-colors hover:bg-[color:var(--color-brand-accent)]">
-							Try Again
-						</button>
-					</div>
-				</div>
-			)}
-			loadingFallback={
-				<div className={cn(
-					"absolute inset-0 flex items-center justify-center",
-					"glass animate-enter rounded-lg",
-					"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
-				)}>
-					<div className="space-y-4 text-center text-[color:var(--media-text)]">
-						<div className="relative">
-							<div className={cn(
-								"size-12 animate-spin rounded-full border-2",
-								"border-[color:var(--color-brand-accent)]/30",
-								"border-t-[color:var(--color-brand-accent)]"
-							)}></div>
-							<div className={cn(
-								"absolute inset-0 size-12 rounded-full",
-								"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
-								"animate-pulse opacity-20 blur-sm"
-							)}></div>
-						</div>
-						<p className="font-medium text-[color:var(--media-text-secondary)] text-sm">
-							Loading media...
-						</p>
-					</div>
-				</div>
-			}>
-			<div
-				ref={ref || containerRef}
-				className={cn(
-					"media-container relative overflow-hidden contain-strict",
-					"bg-[color:var(--media-bg)] focus-within:outline-none",
-					"rounded-xl border border-[color:var(--media-border)]/30",
-					"shadow-2xl shadow-[color:var(--media-bg)]/50",
-					"transition-all duration-300 ease-out",
-					"hover:border-[color:var(--media-border)]/50",
-					"hover:shadow-3xl hover:shadow-[color:var(--media-bg)]/60",
-					// Performance optimizations
-					"will-change-transform",
-					state.isTransitioning && "cursor-wait",
-					className
-				)}
-				tabIndex={0}
-				// Performance attributes
-				role="application"
-				aria-label={isVideo ? "Video player" : "Audio player"}
-				aria-busy={state.isLoading || state.isBuffering}>
-
-				{isVideo ? (
-					<video
-						ref={mediaRef as React.RefObject<HTMLVideoElement>}
-						{...commonProps}
-						// Performance optimizations
-						disablePictureInPicture={false}
-						playsInline
-						x-webkit-airplay="allow"
-						style={{ willChange: 'transform' }}
-					>
-						{renderSources}
-						Your browser does not support the video element.
-					</video>
-				) : (
-					<audio
-						ref={mediaRef as React.RefObject<HTMLAudioElement>}
-						{...commonProps}
-						// Performance optimizations
-						preload={preloadStrategy === "eager" ? "auto" : "metadata"}
-					>
-						{renderSources}
-						Your browser does not support the audio element.
-					</audio>
-				)}
-
-				{state.error && (
-					<div className={cn(
-						"absolute inset-0 flex items-center justify-center",
-						"glass-strong animate-enter rounded-lg",
-						"bg-[color:var(--color-error)]/10 backdrop-blur-md"
-					)}>
-						<div className="space-y-2 text-center text-[color:var(--media-text)]">
-							<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3">
-								<svg className="size-6 text-[color:var(--color-error)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-								</svg>
-							</div>
-							<p className="font-semibold text-lg">Playback Error</p>
-							<p className="max-w-xs text-[color:var(--media-text-secondary)] text-sm">
-								{state.error}
-							</p>
-						</div>
-					</div>
-				)}
-
-				{state.isLoading && (
-					<div className={cn(
-						"absolute inset-0 flex items-center justify-center",
-						"glass animate-enter rounded-lg",
-						"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
-					)}>
-						<div className="space-y-4 text-center text-[color:var(--media-text)]">
-							<div className="relative">
-								<div className={cn(
-									"size-12 animate-spin rounded-full border-2",
-									"border-[color:var(--color-brand-accent)]/30",
-									"border-t-[color:var(--color-brand-accent)]"
-								)}></div>
-								<div className={cn(
-									"absolute inset-0 size-12 rounded-full",
-									"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
-									"animate-pulse opacity-20 blur-sm"
-								)}></div>
-							</div>
-							<p className="font-medium text-[color:var(--media-text-secondary)] text-sm">
-								{state.isBuffering ? "Buffering..." : "Loading media..."}
-							</p>
-						</div>
-					</div>
-				)}
-
-				{customControls && typeof children === "function" && (
-					<div className="pointer-events-auto absolute inset-0 z-50">
-						{children({ state, controls })}
-					</div>
-				)}
-
-				{customControls && typeof children !== "function" && (
-					<div className="pointer-events-auto absolute inset-0 z-50">{children}</div>
-				)}
-
-				{/* Performance indicator for development */}
-				{process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (
-					<div className="absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs">
-						<div>FPS: {performanceMetrics.frameRate || 0}</div>
-						<div>Memory: {memoryStats.usage.toFixed(1)}MB</div>
-						{isEnhanced && <div>Enhanced ✓</div>}
-					</div>
-				)}
-			</div>
-		</EnhancedMediaWrapper>
-	)
-})
-
-MediaPlayer.displayName = "MediaPlayer"

package/dist/src/components/media-suspense.d.ts

@@ -1,78 +0,0 @@
-import React from "react";
-export interface MediaLoadingProps {
-    children?: React.ReactNode;
-    className?: string;
-    size?: "sm" | "md" | "lg";
-    variant?: "spinner" | "skeleton" | "pulse";
-}
-export declare function MediaLoading({ children, className, size, variant }: MediaLoadingProps): import("react/jsx-runtime").JSX.Element;
-export interface MediaSuspenseProps {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    className?: string;
-}
-export declare function MediaSuspense({ children, fallback, className }: MediaSuspenseProps): import("react/jsx-runtime").JSX.Element;
-export declare function withMediaSuspense<P extends object>(Component: React.ComponentType<P>, loadingComponent?: React.ComponentType): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
-export declare function useMediaConcurrent(): {
-    isPending: boolean;
-    updateWithTransition: (updateFn: () => any) => Promise<any>;
-    batchUpdates: (updates: Array<() => any>) => Promise<any[]>;
-};
-export interface MediaErrorBoundaryProps {
-    children: React.ReactNode;
-    fallback?: React.ComponentType<{
-        error: Error;
-        resetError: () => void;
-    }>;
-    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-}
-interface MediaErrorBoundaryState {
-    hasError: boolean;
-    error: Error | null;
-}
-export declare class MediaErrorBoundary extends React.Component<MediaErrorBoundaryProps, MediaErrorBoundaryState> {
-    constructor(props: MediaErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): MediaErrorBoundaryState;
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    resetError: () => void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
-}
-export interface ConcurrentMediaProps {
-    children: React.ReactNode;
-    priority?: "high" | "normal" | "low";
-    deferredMs?: number;
-}
-export declare function ConcurrentMedia({ children, priority, deferredMs }: ConcurrentMediaProps): import("react/jsx-runtime").JSX.Element;
-export declare function useDeferredMediaLoading(delay?: number): {
-    isReady: boolean;
-    actualIsReady: boolean;
-};
-export interface EnhancedMediaWrapperProps {
-    children: React.ReactNode;
-    className?: string;
-    loadingFallback?: React.ReactNode;
-    errorFallback?: React.ComponentType<{
-        error: Error;
-        resetError: () => void;
-    }>;
-    priority?: "high" | "normal" | "low";
-    deferredMs?: number;
-    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-}
-export declare function EnhancedMediaWrapper({ children, className, loadingFallback, errorFallback, priority, deferredMs, onError }: EnhancedMediaWrapperProps): import("react/jsx-runtime").JSX.Element;
-export declare const EnhancedMediaSuspense: typeof MediaSuspense;
-export declare const EnhancedMediaLoading: typeof MediaLoading;
-export declare function useMediaPerformance(): {
-    metrics: {
-        renderTime: number;
-        suspenseCount: number;
-        errorCount: number;
-        transitionCount: number;
-    };
-    recordRenderTime: (startTime: number) => void;
-    incrementSuspense: () => void;
-    incrementError: () => void;
-    incrementTransition: () => void;
-};
-export {};
-//# sourceMappingURL=media-suspense.d.ts.map

package/dist/src/components/media-suspense.tsx

@@ -1,362 +0,0 @@
-"use client"
-
-import React, { Suspense } from "react"
-import { cn } from "../lib/utils"
-
-// Loading state component for media operations
-export interface MediaLoadingProps {
-	children?: React.ReactNode
-	className?: string
-	size?: "sm" | "md" | "lg"
-	variant?: "spinner" | "skeleton" | "pulse"
-}
-
-export function MediaLoading({ 
-	children, 
-	className, 
-	size = "md", 
-	variant = "spinner" 
-}: MediaLoadingProps) {
-	const sizeClasses = {
-		sm: "w-4 h-4",
-		md: "w-8 h-8", 
-		lg: "w-12 h-12"
-	}
-
-	if (variant === "spinner") {
-		return (
-			<div className={cn(
-				"flex items-center justify-center",
-				className
-			)}>
-				<div className={cn(
-					"animate-spin rounded-full border-2 border-current border-t-transparent",
-					sizeClasses[size]
-				)} />
-				{children && (
-					<span className="ml-2 text-muted-foreground text-sm">
-						{children}
-					</span>
-				)}
-			</div>
-		)
-	}
-
-	if (variant === "skeleton") {
-		return (
-			<div className={cn(
-				"animate-pulse rounded bg-muted",
-				sizeClasses[size],
-				className
-			)} />
-		)
-	}
-
-	// Pulse variant
-	return (
-		<div className={cn(
-			"animate-pulse bg-gradient-to-r bg-pos-0 bg-size-200 from-muted via-muted/50 to-muted",
-			"animate-shimmer rounded",
-			sizeClasses[size], 
-			className
-		)} />
-	)
-}
-
-// Suspense wrapper for media components
-export interface MediaSuspenseProps {
-	children: React.ReactNode
-	fallback?: React.ReactNode
-	className?: string
-}
-
-export function MediaSuspense({ 
-	children, 
-	fallback = <MediaLoading />, 
-	className 
-}: MediaSuspenseProps) {
-	return (
-		<div className={className}>
-			<Suspense fallback={fallback}>
-				{children}
-			</Suspense>
-		</div>
-	)
-}
-
-// Lazy loading wrapper for heavy media components
-export function withMediaSuspense<P extends object>(
-	Component: React.ComponentType<P>,
-	loadingComponent?: React.ComponentType
-) {
-	const WrappedComponent = React.forwardRef<any, P>((props, ref) => {
-		const LoadingComp = loadingComponent
-		return (
-			<MediaSuspense fallback={LoadingComp ? <LoadingComp /> : <MediaLoading />}>
-				<Component {...(props as any)} ref={ref} />
-			</MediaSuspense>
-		)
-	})
-	
-	WrappedComponent.displayName = `withMediaSuspense(${Component.displayName || Component.name})`
-	
-	return WrappedComponent
-}
-
-// Hook for managing concurrent state updates
-export function useMediaConcurrent() {
-	const [isPending, startTransition] = React.useTransition()
-	
-	// Wrap state updates in transitions for better performance
-	const updateWithTransition = React.useCallback(
-		(updateFn: () => any): Promise<any> => {
-			return new Promise((resolve) => {
-				startTransition(() => {
-					const result = updateFn()
-					resolve(result)
-				})
-			})
-		}, 
-		[startTransition]
-	)
-	
-	// Batch multiple updates together
-	const batchUpdates = React.useCallback(
-		(updates: Array<() => any>): Promise<any[]> => {
-			return new Promise((resolve) => {
-				startTransition(() => {
-					const results = updates.map(update => update())
-					resolve(results)
-				})
-			})
-		},
-		[startTransition]
-	)
-	
-	return {
-		isPending,
-		updateWithTransition,
-		batchUpdates
-	}
-}
-
-// Error boundary for media components
-export interface MediaErrorBoundaryProps {
-	children: React.ReactNode
-	fallback?: React.ComponentType<{ error: Error; resetError: () => void }>
-	onError?: (error: Error, errorInfo: React.ErrorInfo) => void
-}
-
-interface MediaErrorBoundaryState {
-	hasError: boolean
-	error: Error | null
-}
-
-// Default error fallback component
-function DefaultErrorFallback({ 
-	error, 
-	resetError 
-}: { 
-	error: Error
-	resetError: () => void 
-}) {
-	return (
-		<div className="flex flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-6">
-			<div className="mb-2 font-semibold text-destructive text-lg">
-				Media Player Error
-			</div>
-			<div className="mb-4 text-center text-muted-foreground text-sm">
-				{error.message}
-			</div>
-			<button
-				onClick={resetError}
-				className="rounded bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90"
-			>
-				Try Again
-			</button>
-		</div>
-	)
-}
-
-export class MediaErrorBoundary extends React.Component<
-	MediaErrorBoundaryProps,
-	MediaErrorBoundaryState
-> {
-	constructor(props: MediaErrorBoundaryProps) {
-		super(props)
-		this.state = { hasError: false, error: null }
-	}
-
-	static getDerivedStateFromError(error: Error): MediaErrorBoundaryState {
-		return { hasError: true, error }
-	}
-
-	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-		this.props.onError?.(error, errorInfo)
-		console.error('MediaErrorBoundary caught an error:', error, errorInfo)
-	}
-
-	resetError = () => {
-		this.setState({ hasError: false, error: null })
-	}
-
-	render() {
-		if (this.state.hasError && this.state.error) {
-			const FallbackComponent = this.props.fallback || DefaultErrorFallback
-			return <FallbackComponent error={this.state.error} resetError={this.resetError} />
-		}
-
-		return this.props.children
-	}
-}
-
-// Concurrent media component wrapper
-export interface ConcurrentMediaProps {
-	children: React.ReactNode
-	priority?: "high" | "normal" | "low"
-	deferredMs?: number
-}
-
-export function ConcurrentMedia({ 
-	children, 
-	priority = "normal", 
-	deferredMs = 0 
-}: ConcurrentMediaProps) {
-	const [isDeferred, setIsDeferred] = React.useState(deferredMs > 0)
-	
-	React.useEffect(() => {
-		if (deferredMs > 0) {
-			const timer = setTimeout(() => {
-				setIsDeferred(false)
-			}, deferredMs)
-			
-			return () => clearTimeout(timer)
-		}
-	}, [deferredMs])
-	
-	if (isDeferred) {
-		return <MediaLoading variant="skeleton" />
-	}
-	
-	// Use different rendering strategies based on priority
-	if (priority === "high") {
-		// Render immediately without deferring
-		return <>{children}</>
-	}
-	
-	if (priority === "low") {
-		// Use deferred value for lower priority updates
-		const deferredChildren = React.useDeferredValue(children)
-		return <>{deferredChildren}</>
-	}
-	
-	// Normal priority - use transition
-	return (
-		<React.Suspense fallback={<MediaLoading />}>
-			{children}
-		</React.Suspense>
-	)
-}
-
-// Hook for deferred loading of media resources
-export function useDeferredMediaLoading(delay: number = 100) {
-	const [isReady, setIsReady] = React.useState(false)
-	const deferredIsReady = React.useDeferredValue(isReady)
-	
-	React.useEffect(() => {
-		const timer = setTimeout(() => {
-			setIsReady(true)
-		}, delay)
-		
-		return () => clearTimeout(timer)
-	}, [delay])
-	
-	return {
-		isReady: deferredIsReady,
-		actualIsReady: isReady
-	}
-}
-
-// Media component with full React 19 concurrent features
-export interface EnhancedMediaWrapperProps {
-	children: React.ReactNode
-	className?: string
-	loadingFallback?: React.ReactNode
-	errorFallback?: React.ComponentType<{ error: Error; resetError: () => void }>
-	priority?: "high" | "normal" | "low"
-	deferredMs?: number
-	onError?: (error: Error, errorInfo: React.ErrorInfo) => void
-}
-
-export function EnhancedMediaWrapper({
-	children,
-	className,
-	loadingFallback = <MediaLoading />,
-	errorFallback,
-	priority = "normal",
-	deferredMs = 0,
-	onError
-}: EnhancedMediaWrapperProps) {
-	return (
-		<div className={className}>
-			<MediaErrorBoundary fallback={errorFallback} onError={onError}>
-				<MediaSuspense fallback={loadingFallback}>
-					<ConcurrentMedia priority={priority} deferredMs={deferredMs}>
-						{children}
-					</ConcurrentMedia>
-				</MediaSuspense>
-			</MediaErrorBoundary>
-		</div>
-	)
-}
-
-// Export enhanced components with concurrent features
-export const EnhancedMediaSuspense = MediaSuspense
-export const EnhancedMediaLoading = MediaLoading
-
-// Performance monitoring hook for concurrent features
-export function useMediaPerformance() {
-	const [metrics, setMetrics] = React.useState({
-		renderTime: 0,
-		suspenseCount: 0,
-		errorCount: 0,
-		transitionCount: 0
-	})
-	
-	const recordRenderTime = React.useCallback((startTime: number) => {
-		const renderTime = performance.now() - startTime
-		setMetrics(prev => ({
-			...prev,
-			renderTime: Math.round(renderTime * 100) / 100
-		}))
-	}, [])
-	
-	const incrementSuspense = React.useCallback(() => {
-		setMetrics(prev => ({
-			...prev,
-			suspenseCount: prev.suspenseCount + 1
-		}))
-	}, [])
-	
-	const incrementError = React.useCallback(() => {
-		setMetrics(prev => ({
-			...prev,
-			errorCount: prev.errorCount + 1
-		}))
-	}, [])
-	
-	const incrementTransition = React.useCallback(() => {
-		setMetrics(prev => ({
-			...prev,
-			transitionCount: prev.transitionCount + 1
-		}))
-	}, [])
-	
-	return {
-		metrics,
-		recordRenderTime,
-		incrementSuspense,
-		incrementError,
-		incrementTransition
-	}
-}

package/dist/src/components/player-settings-form.d.ts

@@ -1,8 +0,0 @@
-export interface PlayerSettings {
-    volume: number;
-    quality: string;
-    subtitles: boolean;
-    playbackRate: number;
-}
-export declare function PlayerSettingsForm(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=player-settings-form.d.ts.map