@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/src/components/media-player-volume.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface MediaPlayerVolumeProps {
+    className?: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    expandable?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerVolume({ className, disabled, asChild, expandable, children, ...props }: MediaPlayerVolumeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerVolume {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-volume.d.ts.map

package/src/components/media-player-volume.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-volume.d.ts","sourceRoot":"","sources":["media-player-volume.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,WAAW,sBAAsB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EACjC,SAAS,EACT,QAAgB,EAChB,OAAe,EACf,UAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,sBAAsB,2CA0HxB;yBAjIe,iBAAiB"}

package/src/components/media-player-volume.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { Slider } from "@rp/ui/components/slider";
+import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react";
+import React from "react";
+import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+import { MediaPlayerTooltip } from "./media-player-tooltip";
+export function MediaPlayerVolume({ className, disabled = false, asChild = false, expandable = true, children, ...props }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    const volume = useMediaSelector((state) => state.volume);
+    const isMuted = useMediaSelector((state) => state.isMuted);
+    const isDisabled = disabled || useMediaSelector((state) => state.error !== null);
+    // Determine volume level for icon
+    const volumeLevel = React.useMemo(() => {
+        if (isMuted || volume === 0)
+            return 0;
+        if (volume < 0.5)
+            return 1;
+        return 2;
+    }, [volume, isMuted]);
+    const handleMuteToggle = React.useCallback(() => {
+        dispatch({
+            type: MediaActionTypes.TOGGLE_MUTE
+        });
+    }, [dispatch]);
+    const handleVolumeChange = React.useCallback((values) => {
+        const newVolume = values[0];
+        dispatch({
+            type: MediaActionTypes.SET_VOLUME,
+            detail: newVolume
+        });
+    }, [dispatch]);
+    const handleVolumeCommit = React.useCallback((values) => {
+        const newVolume = values[0];
+        dispatch({
+            type: MediaActionTypes.SET_VOLUME,
+            detail: newVolume
+        });
+    }, [dispatch]);
+    const VolumeIcon = volumeLevel === 0 ? VolumeXIcon : volumeLevel === 1 ? Volume1Icon : Volume2Icon;
+    const containerProps = {
+        "data-disabled": isDisabled ? "" : undefined,
+        "data-slot": "media-player-volume",
+        className: cn("group flex items-center", expandable ? "gap-2 transition-all duration-200 hover:gap-3" : "gap-2", className),
+        ...props
+    };
+    const buttonProps = {
+        type: "button",
+        "aria-controls": context.mediaId,
+        "aria-label": isMuted ? "Unmute" : "Mute",
+        "aria-pressed": isMuted,
+        "data-slot": "media-player-volume-button",
+        "data-state": isMuted ? "muted" : "unmuted",
+        variant: "ghost",
+        size: "icon",
+        className: "size-8 shrink-0",
+        disabled: isDisabled,
+        onClick: handleMuteToggle
+    };
+    const sliderProps = {
+        "aria-controls": context.mediaId,
+        "aria-valuetext": `Volume ${Math.round(volume * 100)}%`,
+        "data-slot": "media-player-volume-slider",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        value: [isMuted ? 0 : volume],
+        onValueChange: handleVolumeChange,
+        onValueCommit: handleVolumeCommit,
+        disabled: isDisabled,
+        className: cn("relative flex touch-none select-none items-center", expandable
+            ? "w-0 opacity-0 transition-all duration-200 group-hover:w-20 group-hover:opacity-100"
+            : "w-20", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50")
+    };
+    const content = (_jsxs("div", { ...containerProps, children: [_jsx(MediaPlayerTooltip, { tooltip: isMuted ? "Unmute" : "Mute", shortcut: "M", children: _jsx(Button, { ...buttonProps, children: _jsx(VolumeIcon, { className: "size-4" }) }) }), _jsxs(Slider, { ...sliderProps, children: [_jsx("div", { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: _jsx("div", { className: "h-full bg-primary transition-all", style: { width: `${(isMuted ? 0 : volume) * 100}%` } }) }), _jsx("div", { className: "block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", style: {
+                            transform: `translateX(-50%)`,
+                            left: `${(isMuted ? 0 : volume) * 100}%`
+                        } })] })] }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, containerProps, content);
+    }
+    return content;
+}
+MediaPlayerVolume.displayName = "MediaPlayerVolume";

package/src/components/media-player.d.ts

@@ -0,0 +1,3 @@
+import type { MediaPlayerProps } from "../types/index";
+export declare const MediaPlayer: import("react").ForwardRefExoticComponent<MediaPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=media-player.d.ts.map

package/src/components/media-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player.d.ts","sourceRoot":"","sources":["media-player.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,eAAO,MAAM,WAAW,6GAoPtB,CAAA"}

package/src/components/media-player.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useTransition } 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";
+export const MediaPlayer = forwardRef(({ 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) => (_jsx("source", { src: source }, `${source}-${index}`)));
+    }, [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 (_jsx(EnhancedMediaWrapper, { priority: "high", errorFallback: ({ error, resetError }) => (_jsx("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"), children: _jsxs("div", { className: "space-y-2 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3", children: _jsx("svg", { className: "size-6 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "max-w-xs text-[color:var(--media-text-secondary)] text-sm", children: error.message || state.error }), _jsx("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)]", children: "Try Again" })] }) })), loadingFallback: _jsx("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"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("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)]") }), _jsx("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") })] }), _jsx("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-sm", children: "Loading media..." })] }) }), children: _jsxs("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, children: [isVideo ? (_jsxs("video", { ref: mediaRef, ...commonProps, 
+                    // Performance optimizations
+                    disablePictureInPicture: false, playsInline: true, "x-webkit-airplay": "allow", style: { willChange: 'transform' }, children: [renderSources(), "Your browser does not support the video element."] })) : (_jsxs("audio", { ref: mediaRef, ...commonProps, 
+                    // Performance optimizations
+                    preload: preloadStrategy === "eager" ? "auto" : "metadata", children: [renderSources(), "Your browser does not support the audio element."] })), state.error && (_jsx("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"), children: _jsxs("div", { className: "space-y-2 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3", children: _jsx("svg", { className: "size-6 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "max-w-xs text-[color:var(--media-text-secondary)] text-sm", children: state.error })] }) })), state.isLoading && (_jsx("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"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("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)]") }), _jsx("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") })] }), _jsx("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-sm", children: state.isBuffering ? "Buffering..." : "Loading media..." })] }) })), customControls && typeof children === "function" && (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50", children: children({ state, controls }) })), customControls && typeof children !== "function" && (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50", children: children })), process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (_jsxs("div", { className: "absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs", children: [_jsxs("div", { children: ["FPS: ", performanceMetrics.frameRate || 0] }), _jsxs("div", { children: ["Memory: ", memoryStats.usage.toFixed(1), "MB"] }), isEnhanced && _jsx("div", { children: "Enhanced \u2713" })] }))] }) }));
+});
+MediaPlayer.displayName = "MediaPlayer";

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

@@ -0,0 +1,78 @@
+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/src/components/media-suspense.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-suspense.d.ts","sourceRoot":"","sources":["media-suspense.tsx"],"names":[],"mappings":"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"}

package/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/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/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/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' })] })] })] }));
+}

package/src/components/react-player-wrapper.d.ts

@@ -0,0 +1,64 @@
+import "../styles/pixel-art.css";
+import React from "react";
+interface QualityOption {
+    label: string;
+    value: string;
+}
+interface SubtitleTrack {
+    label: string;
+    value: string;
+    src: string;
+}
+interface ProgressState {
+    playedSeconds: number;
+    loaded: number;
+}
+export interface ModernMediaPlayerProps {
+    className?: string;
+    containerClassName?: string;
+    url?: string | string[];
+    playing?: boolean;
+    volume?: number;
+    muted?: boolean;
+    controls?: boolean;
+    light?: boolean | string;
+    loop?: boolean;
+    playbackRate?: number;
+    width?: string | number;
+    height?: string | number;
+    style?: React.CSSProperties;
+    progressInterval?: number;
+    playsinline?: boolean;
+    pip?: boolean;
+    stopOnUnmount?: boolean;
+    fallback?: React.ReactNode;
+    wrapper?: unknown;
+    config?: unknown;
+    showDownload?: boolean;
+    showShare?: boolean;
+    showSubtitles?: boolean;
+    showQuality?: boolean;
+    onDownload?: () => void;
+    onShare?: () => void;
+    qualityOptions?: QualityOption[];
+    subtitleTracks?: SubtitleTrack[];
+    onReady?: () => void;
+    onStart?: () => void;
+    onPlay?: () => void;
+    onProgress?: (state: ProgressState) => void;
+    onDuration?: (duration: number) => void;
+    onPause?: () => void;
+    onBuffer?: () => void;
+    onBufferEnd?: () => void;
+    onSeek?: (seconds: number) => void;
+    onPlaybackRateChange?: (rate: number) => void;
+    onEnded?: () => void;
+    onError?: (error: unknown) => void;
+    onClickPreview?: () => void;
+    onEnablePIP?: () => void;
+    onDisablePIP?: () => void;
+    [key: string]: unknown;
+}
+export declare function ModernMediaPlayer({ className, containerClassName, url, playing, volume, muted, controls, light, loop, playbackRate, width, height, style, progressInterval, playsinline, pip, stopOnUnmount, fallback, wrapper, config, showDownload, showShare, showSubtitles, showQuality, onDownload, onShare, qualityOptions, subtitleTracks, onReady, onStart, onPlay, onProgress, onDuration, onPause, onBuffer, onBufferEnd, onSeek, onPlaybackRateChange, onEnded, onError, onClickPreview, onEnablePIP, onDisablePIP, ...props }: ModernMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=react-player-wrapper.d.ts.map

package/src/components/react-player-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-player-wrapper.d.ts","sourceRoot":"","sources":["react-player-wrapper.tsx"],"names":[],"mappings":"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"}