@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,173 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Suspense } from "react";
+import { cn } from "../lib/utils";
+export function MediaLoading({ children, className, size = "md", variant = "spinner" }) {
+    const sizeClasses = {
+        sm: "w-4 h-4",
+        md: "w-8 h-8",
+        lg: "w-12 h-12"
+    };
+    if (variant === "spinner") {
+        return (_jsxs("div", { className: cn("flex items-center justify-center", className), children: [_jsx("div", { className: cn("animate-spin rounded-full border-2 border-current border-t-transparent", sizeClasses[size]) }), children && (_jsx("span", { className: "ml-2 text-muted-foreground text-sm", children: children }))] }));
+    }
+    if (variant === "skeleton") {
+        return (_jsx("div", { className: cn("animate-pulse rounded bg-muted", sizeClasses[size], className) }));
+    }
+    // Pulse variant
+    return (_jsx("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) }));
+}
+export function MediaSuspense({ children, fallback = _jsx(MediaLoading, {}), className }) {
+    return (_jsx("div", { className: className, children: _jsx(Suspense, { fallback: fallback, children: children }) }));
+}
+// Lazy loading wrapper for heavy media components
+export function withMediaSuspense(Component, loadingComponent) {
+    const WrappedComponent = React.forwardRef((props, ref) => {
+        const LoadingComp = loadingComponent;
+        return (_jsx(MediaSuspense, { fallback: LoadingComp ? _jsx(LoadingComp, {}) : _jsx(MediaLoading, {}), children: _jsx(Component, { ...props, ref: ref }) }));
+    });
+    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) => {
+        return new Promise((resolve) => {
+            startTransition(() => {
+                const result = updateFn();
+                resolve(result);
+            });
+        });
+    }, [startTransition]);
+    // Batch multiple updates together
+    const batchUpdates = React.useCallback((updates) => {
+        return new Promise((resolve) => {
+            startTransition(() => {
+                const results = updates.map(update => update());
+                resolve(results);
+            });
+        });
+    }, [startTransition]);
+    return {
+        isPending,
+        updateWithTransition,
+        batchUpdates
+    };
+}
+// Default error fallback component
+function DefaultErrorFallback({ error, resetError }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-6", children: [_jsx("div", { className: "mb-2 font-semibold text-destructive text-lg", children: "Media Player Error" }), _jsx("div", { className: "mb-4 text-center text-muted-foreground text-sm", children: error.message }), _jsx("button", { onClick: resetError, className: "rounded bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90", children: "Try Again" })] }));
+}
+export class MediaErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, 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 _jsx(FallbackComponent, { error: this.state.error, resetError: this.resetError });
+        }
+        return this.props.children;
+    }
+}
+export function ConcurrentMedia({ children, priority = "normal", deferredMs = 0 }) {
+    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 _jsx(MediaLoading, { variant: "skeleton" });
+    }
+    // Use different rendering strategies based on priority
+    if (priority === "high") {
+        // Render immediately without deferring
+        return _jsx(_Fragment, { children: children });
+    }
+    if (priority === "low") {
+        // Use deferred value for lower priority updates
+        const deferredChildren = React.useDeferredValue(children);
+        return _jsx(_Fragment, { children: deferredChildren });
+    }
+    // Normal priority - use transition
+    return (_jsx(React.Suspense, { fallback: _jsx(MediaLoading, {}), children: children }));
+}
+// Hook for deferred loading of media resources
+export function useDeferredMediaLoading(delay = 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
+    };
+}
+export function EnhancedMediaWrapper({ children, className, loadingFallback = _jsx(MediaLoading, {}), errorFallback, priority = "normal", deferredMs = 0, onError }) {
+    return (_jsx("div", { className: className, children: _jsx(MediaErrorBoundary, { fallback: errorFallback, onError: onError, children: _jsx(MediaSuspense, { fallback: loadingFallback, children: _jsx(ConcurrentMedia, { priority: priority, deferredMs: deferredMs, children: children }) }) }) }));
+}
+// 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) => {
+        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/media-suspense.tsx

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"player-settings-form.d.ts","sourceRoot":"","sources":["player-settings-form.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;CACrB;AAsDD,wBAAgB,kBAAkB,4CAqGjC"}

package/dist/src/components/player-settings-form.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionState } from 'react';
+const defaultSettings = {
+    volume: 0.8,
+    quality: 'auto',
+    subtitles: false,
+    playbackRate: 1
+};
+async function updateSettings(prevState, formData) {
+    try {
+        // Simulate async operation
+        await new Promise(resolve => setTimeout(resolve, 500));
+        const settings = {
+            volume: Number(formData.get('volume')) || 0.8,
+            quality: formData.get('quality') || 'auto',
+            subtitles: formData.get('subtitles') === 'on',
+            playbackRate: Number(formData.get('playbackRate')) || 1
+        };
+        // Validate settings
+        if (settings.volume < 0 || settings.volume > 1) {
+            throw new Error('Volume must be between 0 and 1');
+        }
+        if (settings.playbackRate < 0.25 || settings.playbackRate > 2) {
+            throw new Error('Playback rate must be between 0.25 and 2');
+        }
+        // Save to localStorage or send to server
+        localStorage.setItem('player-settings', JSON.stringify(settings));
+        return {
+            values: settings,
+            success: true
+        };
+    }
+    catch (error) {
+        return {
+            values: prevState.values,
+            error: error instanceof Error ? error.message : 'Unknown error'
+        };
+    }
+}
+export function PlayerSettingsForm() {
+    const [state, submitAction, isPending] = useActionState(updateSettings, {
+        values: defaultSettings,
+        success: false
+    });
+    return (_jsxs("div", { className: "mx-auto w-full max-w-md", children: [_jsx("h3", { className: "mb-4 font-semibold text-lg text-white", children: "Player Settings" }), _jsxs("form", { action: submitAction, className: "space-y-4", children: [state.error && (_jsx("div", { className: "rounded-lg border border-red-700 bg-red-900/20 p-3", children: _jsx("p", { className: "text-red-400 text-sm", children: state.error }) })), state.success && (_jsx("div", { className: "rounded-lg border border-green-700 bg-green-900/20 p-3", children: _jsx("p", { className: "text-green-400 text-sm", children: "Settings saved successfully!" }) })), _jsxs("fieldset", { disabled: isPending, className: "space-y-4 disabled:opacity-50", children: [_jsxs("div", { children: [_jsxs("label", { htmlFor: "volume", className: "mb-2 block font-medium text-sm text-white", children: ["Volume: ", Math.round(state.values.volume * 100), "%"] }), _jsx("input", { type: "range", id: "volume", name: "volume", min: "0", max: "1", step: "0.01", defaultValue: state.values.volume, className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "quality", className: "mb-2 block font-medium text-sm text-white", children: "Quality" }), _jsxs("select", { id: "quality", name: "quality", defaultValue: state.values.quality, className: "w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "1080p", children: "1080p" }), _jsx("option", { value: "720p", children: "720p" }), _jsx("option", { value: "480p", children: "480p" }), _jsx("option", { value: "360p", children: "360p" })] })] }), _jsxs("div", { children: [_jsxs("label", { htmlFor: "playbackRate", className: "mb-2 block font-medium text-sm text-white", children: ["Playback Rate: ", state.values.playbackRate, "x"] }), _jsx("input", { type: "range", id: "playbackRate", name: "playbackRate", min: "0.25", max: "2", step: "0.25", defaultValue: state.values.playbackRate, className: "h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700" })] }), _jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", id: "subtitles", name: "subtitles", defaultChecked: state.values.subtitles, className: "h-4 w-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500" }), _jsx("label", { htmlFor: "subtitles", className: "ml-2 font-medium text-sm text-white", children: "Enable Subtitles" })] }), _jsx("button", { type: "submit", disabled: isPending, className: "w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:bg-gray-600", children: isPending ? 'Saving...' : 'Save Settings' })] })] })] }));
+}