@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/src/components/ui/enhanced-seek-bar.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Slider from "@radix-ui/react-slider";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { forwardRef, useCallback, useState, useMemo, useTransition, useDeferredValue, useRef } from "react";
+import { formatTime } from "../../lib/format-time";
+import { cn } from "../../lib/utils";
+export const EnhancedSeekBar = forwardRef(({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    const [isDragging, setIsDragging] = useState(false);
+    const [previewTime, setPreviewTime] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    // Defer non-critical updates for better performance
+    const deferredHovering = useDeferredValue(isHovering);
+    const deferredPreviewTime = useDeferredValue(previewTime);
+    // Throttling refs
+    const seekTimeoutRef = useRef();
+    const lastSeekTime = useRef(0);
+    const rafId = useRef();
+    // Memoize expensive calculations
+    const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration]);
+    // Calculate buffered ranges with memoization
+    const bufferedRanges = useMemo(() => {
+        const ranges = [];
+        if (buffered && duration > 0) {
+            for (let i = 0; i < buffered.length; i++) {
+                const start = (buffered.start(i) / duration) * 100;
+                const end = (buffered.end(i) / duration) * 100;
+                ranges.push({ start, end });
+            }
+        }
+        return ranges;
+    }, [buffered, duration]);
+    // Optimized value change handler with throttling and RAF
+    const handleValueChange = useCallback(([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        setPreviewTime(time);
+        // Cancel any pending RAF
+        if (rafId.current) {
+            cancelAnimationFrame(rafId.current);
+        }
+        if (isDragging) {
+            // Clear previous timeout
+            if (seekTimeoutRef.current) {
+                clearTimeout(seekTimeoutRef.current);
+            }
+            // Use RAF for smooth updates during dragging
+            rafId.current = requestAnimationFrame(() => {
+                const now = performance.now();
+                const timeDiff = now - lastSeekTime.current;
+                const timeJump = Math.abs(time - currentTime);
+                // Only seek if enough time has passed or if this is a large jump
+                if (timeDiff > 16 || timeJump > 0.5) { // 60fps = 16ms per frame
+                    startTransition(() => {
+                        onSeek(time);
+                    });
+                    lastSeekTime.current = now;
+                }
+                else {
+                    // Defer the seek
+                    seekTimeoutRef.current = setTimeout(() => {
+                        startTransition(() => {
+                            onSeek(time);
+                        });
+                        lastSeekTime.current = performance.now();
+                    }, 16);
+                }
+            });
+        }
+    }, [duration, isDragging, onSeek, currentTime, startTransition]);
+    const handleValueCommit = useCallback(([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        // Cancel any pending RAF
+        if (rafId.current) {
+            cancelAnimationFrame(rafId.current);
+        }
+        // Clear any pending seeks
+        if (seekTimeoutRef.current) {
+            clearTimeout(seekTimeoutRef.current);
+        }
+        startTransition(() => {
+            onSeek(time);
+        });
+        setIsDragging(false);
+    }, [duration, onSeek, startTransition]);
+    const handlePointerDown = useCallback(() => {
+        setIsDragging(true);
+        lastSeekTime.current = performance.now();
+    }, []);
+    // Cleanup on unmount
+    useMemo(() => {
+        return () => {
+            if (rafId.current) {
+                cancelAnimationFrame(rafId.current);
+            }
+            if (seekTimeoutRef.current) {
+                clearTimeout(seekTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Memoize tooltip content to prevent re-renders
+    const tooltipContent = useMemo(() => {
+        return (_jsx("div", { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), children: formatTime(deferredPreviewTime) }));
+    }, [deferredPreviewTime]);
+    return (_jsx("div", { ref: ref, className: cn("media-container relative w-full text-[color:var(--media-text)]", "touch-manipulation contain-layout", className), onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { className: "relative animate-enter", children: _jsxs(Slider.Root, { className: cn("group relative flex w-full touch-none select-none items-center", "media-md:h-4 media-sm:h-3 media-xs:h-2", "focus-ring cursor-pointer", isPending && "opacity-75"), value: [progress], max: 100, step: 0.1, onValueChange: handleValueChange, onValueCommit: handleValueCommit, onPointerDown: handlePointerDown, "aria-label": "Seek to position", children: [_jsxs(Slider.Track, { className: cn("relative grow overflow-hidden rounded-full", "bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm", "border border-[color:var(--media-border)]/20", "shadow-inner transition-all duration-300 ease-out", "h-1 group-focus-within:h-1.5 group-hover:h-1.5", "group-hover:bg-[color:var(--media-control-bg)]/60", "group-hover:border-[color:var(--media-border)]/40"), children: [bufferedRanges.map((range, index) => (_jsx("div", { className: cn("absolute h-full rounded-full transition-all duration-500", "bg-[color:var(--color-media-buffered)] shadow-inner", "opacity-60 group-hover:opacity-80"), style: {
+                                                    left: `${range.start}%`,
+                                                    width: `${range.end - range.start}%`,
+                                                    willChange: 'width, left'
+                                                } }, `${range.start}-${range.end}-${index}`))), _jsx(Slider.Range, { className: cn("absolute h-full rounded-full transition-all duration-300", "bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]", "shadow-[color:var(--color-brand-primary)]/20 shadow-lg", "group-hover:shadow-xl", isDragging && "transition-none") })] }), _jsx(Slider.Thumb, { className: cn("block size-4 rounded-full border-white/20 bg-white", "shadow-lg hover:shadow-xl", "opacity-0 group-hover:opacity-100", "hover:scale-110 hover:bg-white/95 active:scale-95", "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50", "focus:ring-offset-2 focus:ring-offset-black/20", "transition-all duration-300 ease-out", isDragging && "scale-110 opacity-100", isPending && "animate-pulse"), "aria-label": "Seek" })] }) }) }), (isDragging || deferredHovering) && (_jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { sideOffset: 10, className: "data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade", children: [tooltipContent, _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) }))] }) }) }));
+});
+EnhancedSeekBar.displayName = "EnhancedSeekBar";

package/src/components/ui/fullscreen-button.d.ts

@@ -0,0 +1,3 @@
+import type { FullscreenButtonProps } from "../../types/index";
+export declare const FullscreenButton: import("react").ForwardRefExoticComponent<FullscreenButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=fullscreen-button.d.ts.map

package/src/components/ui/fullscreen-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.d.ts","sourceRoot":"","sources":["fullscreen-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AAE9D,eAAO,MAAM,gBAAgB,qHAiD5B,CAAA"}

package/src/components/ui/fullscreen-button.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Maximize, Minimize } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+export const FullscreenButton = forwardRef(({ isFullscreen, onToggle, disabled = false, size = "lg", className }, ref) => {
+    const Icon = isFullscreen ? Minimize : Maximize;
+    const buttonSizes = {
+        md: "h-11 w-11",
+        lg: "h-12 w-12",
+        xl: "h-14 w-14"
+    };
+    const iconSizes = {
+        md: "h-5 w-5",
+        lg: "h-6 w-6",
+        xl: "h-7 w-7"
+    };
+    return (_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { ref: ref, type: "button", onClick: onToggle, disabled: disabled, className: cn("inline-flex items-center justify-center rounded-lg bg-transparent p-0 text-white transition-all hover:text-cyan-700 active:scale-95", "focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-black/20", "disabled:cursor-not-allowed disabled:opacity-50", buttonSizes[size], className), "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", children: _jsx(Icon, { className: cn(iconSizes[size]) }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), sideOffset: 5, children: [isFullscreen ? "Exit fullscreen" : "Enter fullscreen", _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) })] }) }));
+});
+FullscreenButton.displayName = "FullscreenButton";

package/src/components/ui/media-resource-preloader.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Media Resource Preloader using React 19's resource preloading APIs
+ * Implements intelligent preloading strategies based on user behavior and network conditions
+ */
+import React from 'react';
+import { MediaSource } from '../../types';
+interface MediaResourcePreloaderProps {
+    /** Media sources to preload */
+    sources: MediaSource[];
+    /** Enable intelligent preloading based on user behavior */
+    enableIntelligentPreloading?: boolean;
+    /** Network-aware preloading */
+    adaptToNetworkConditions?: boolean;
+    /** Preload priority level */
+    priority?: 'high' | 'low' | 'auto';
+    /** Custom preloading strategy */
+    strategy?: 'conservative' | 'aggressive' | 'adaptive';
+}
+export declare const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps>;
+export default MediaResourcePreloader;
+//# sourceMappingURL=media-resource-preloader.d.ts.map

package/src/components/ui/media-resource-preloader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-resource-preloader.d.ts","sourceRoot":"","sources":["media-resource-preloader.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,2BAA2B;IACpC,+BAA+B;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,2DAA2D;IAC3D,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,+BAA+B;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACnC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;CACtD;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+PxE,CAAC;AA8GF,eAAe,sBAAsB,CAAC"}

package/src/components/ui/media-resource-preloader.js

@@ -0,0 +1,295 @@
+/**
+ * Media Resource Preloader using React 19's resource preloading APIs
+ * Implements intelligent preloading strategies based on user behavior and network conditions
+ */
+import { useEffect, useRef, useMemo } from 'react';
+import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
+export const MediaResourcePreloader = ({ sources, enableIntelligentPreloading = true, adaptToNetworkConditions = true, priority = 'auto', strategy = 'adaptive', }) => {
+    const networkInfoRef = useRef(null);
+    const userBehaviorRef = useRef(null);
+    const preloadingHistoryRef = useRef(new Map());
+    // Analyze sources and determine preloading configuration
+    const preloadingConfig = useMemo(() => {
+        const config = {
+            dnsPrefetch: [],
+            preconnect: [],
+            preload: [],
+            preinit: [],
+        };
+        sources.forEach((source) => {
+            const url = new URL(source.src);
+            const domain = url.origin;
+            // DNS prefetch for CDN domains
+            if (isCDNDomain(domain)) {
+                config.dnsPrefetch.push(domain);
+            }
+            // Preconnect to media domains
+            if (shouldPreconnect(source.type, strategy)) {
+                config.preconnect.push(domain);
+            }
+            // Preload media files based on strategy
+            if (shouldPreload(source, priority, strategy)) {
+                config.preload.push({
+                    url: source.src,
+                    type: getPreloadType(source.type),
+                });
+            }
+            // Preinit critical resources
+            if (shouldPreinit(source, strategy)) {
+                config.preinit.push({
+                    url: source.src,
+                    type: 'script',
+                });
+            }
+        });
+        return config;
+    }, [sources, priority, strategy]);
+    // Initialize network monitoring
+    useEffect(() => {
+        if (adaptToNetworkConditions && 'connection' in navigator) {
+            networkInfoRef.current = navigator.connection;
+            const handleNetworkChange = () => {
+                adjustPreloadingStrategy();
+            };
+            networkInfoRef.current.addEventListener('change', handleNetworkChange);
+            return () => {
+                networkInfoRef.current?.removeEventListener('change', handleNetworkChange);
+            };
+        }
+    }, [adaptToNetworkConditions]);
+    // Initialize user behavior tracking
+    useEffect(() => {
+        if (enableIntelligentPreloading) {
+            userBehaviorRef.current = new UserBehaviorTracker();
+            userBehaviorRef.current.startTracking();
+            return () => {
+                userBehaviorRef.current?.stopTracking();
+            };
+        }
+    }, [enableIntelligentPreloading]);
+    // Apply DNS prefetching
+    useEffect(() => {
+        preloadingConfig.dnsPrefetch.forEach((domain) => {
+            prefetchDNS(domain);
+        });
+    }, [preloadingConfig.dnsPrefetch]);
+    // Apply preconnections
+    useEffect(() => {
+        preloadingConfig.preconnect.forEach((origin) => {
+            preconnect(origin, { crossOrigin: 'anonymous' });
+        });
+    }, [preloadingConfig.preconnect]);
+    // Apply preloading
+    useEffect(() => {
+        preloadingConfig.preload.forEach(({ url, type }) => {
+            const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+            preload(url, {
+                as: type,
+                crossOrigin,
+                integrity: getAssetIntegrity(url),
+                priority,
+            });
+        });
+    }, [preloadingConfig.preload, priority]);
+    // Apply preinit for critical resources
+    useEffect(() => {
+        preloadingConfig.preinit.forEach(({ url, type }) => {
+            const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+            preinit(url, {
+                as: type,
+                crossOrigin,
+            });
+        });
+    }, [preloadingConfig.preinit]);
+    // Intelligent preloading based on user behavior
+    useEffect(() => {
+        if (!enableIntelligentPreloading || !userBehaviorRef.current)
+            return;
+        const handleUserBehavior = (behavior) => {
+            if (behavior.isLikelyToInteract) {
+                preloadLikelyContent(behavior.predictedSources);
+            }
+        };
+        userBehaviorRef.current.onBehaviorChange(handleUserBehavior);
+    }, [enableIntelligentPreloading]);
+    // Helper functions
+    function isCDNDomain(domain) {
+        const cdnDomains = [
+            'cdn.jsdelivr.net',
+            'cdnjs.cloudflare.com',
+            'unpkg.com',
+            'cloudflare.com',
+            'fastly.net',
+            'akamaized.net',
+        ];
+        return cdnDomains.some((cdn) => domain.includes(cdn));
+    }
+    function shouldPreconnect(mediaType, strategy) {
+        if (strategy === 'aggressive')
+            return true;
+        if (strategy === 'conservative')
+            return ['hls', 'm3u8'].includes(mediaType);
+        return ['hls', 'm3u8', 'mp4'].includes(mediaType);
+    }
+    function shouldPreload(source, priority, strategy) {
+        // Check if already preloaded recently
+        const lastPreload = preloadingHistoryRef.current.get(source.src);
+        if (lastPreload && Date.now() - lastPreload < 300000)
+            return false; // 5 minutes
+        // Strategy-based decision
+        if (strategy === 'conservative') {
+            return priority === 'high' && source.type === 'hls';
+        }
+        if (strategy === 'aggressive') {
+            return true;
+        }
+        // Adaptive strategy
+        return shouldAdaptivePreload(source, priority);
+    }
+    function shouldAdaptivePreload(source, priority) {
+        // Consider network conditions
+        if (networkInfoRef.current) {
+            const { effectiveType, saveData } = networkInfoRef.current;
+            if (saveData)
+                return false;
+            if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+                return priority === 'high' && source.type === 'hls';
+            }
+            if (effectiveType === '3g') {
+                return ['hls', 'm3u8'].includes(source.type);
+            }
+        }
+        // Consider user behavior
+        if (userBehaviorRef.current) {
+            const behavior = userBehaviorRef.current.getCurrentBehavior();
+            if (behavior.engagementScore > 0.7) {
+                return true;
+            }
+        }
+        return priority !== 'low';
+    }
+    function shouldPreinit(source, strategy) {
+        return strategy === 'aggressive' && source.type === 'hls';
+    }
+    function getPreloadType(mediaType) {
+        switch (mediaType) {
+            case 'hls':
+            case 'm3u8':
+                return 'fetch';
+            case 'mp4':
+            case 'webm':
+                return 'video';
+            case 'mp3':
+            case 'wav':
+                return 'audio';
+            default:
+                return 'fetch';
+        }
+    }
+    function shouldUseCrossOrigin(url) {
+        return !url.includes(window.location.origin);
+    }
+    function getAssetIntegrity(url) {
+        // Return integrity hash if available for the asset
+        // This would typically come from a build process or asset manifest
+        return undefined;
+    }
+    function adjustPreloadingStrategy() {
+        // Adjust preloading based on network conditions
+        if (!networkInfoRef.current)
+            return;
+        const { effectiveType, downlink } = networkInfoRef.current;
+        // This would update the preloading configuration
+        // Implementation depends on specific requirements
+    }
+    function preloadLikelyContent(sources) {
+        sources.forEach((url) => {
+            // Mark as preloaded
+            preloadingHistoryRef.current.set(url, Date.now());
+            // Preload the content
+            preload(url, {
+                as: 'fetch',
+                crossOrigin: 'anonymous',
+                priority: 'high',
+            });
+        });
+    }
+    // This component doesn't render anything visible
+    return null;
+};
+/**
+ * User behavior tracker for intelligent preloading
+ */
+class UserBehaviorTracker {
+    behaviorData = {
+        isLikelyToInteract: false,
+        engagementScore: 0,
+        predictedSources: [],
+        interactionHistory: [],
+    };
+    listeners = [];
+    mouseMoveTimer = null;
+    startTracking() {
+        // Track mouse movements as interaction indicators
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('scroll', this.handleScroll);
+        document.addEventListener('keydown', this.handleKeydown);
+        // Track focus events
+        document.addEventListener('focusin', this.handleFocus);
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+    }
+    stopTracking() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('scroll', this.handleScroll);
+        document.removeEventListener('keydown', this.handleKeydown);
+        document.removeEventListener('focusin', this.handleFocus);
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        if (this.mouseMoveTimer) {
+            clearTimeout(this.mouseMoveTimer);
+        }
+    }
+    onBehaviorChange(listener) {
+        this.listeners.push(listener);
+    }
+    getCurrentBehavior() {
+        return this.behaviorData;
+    }
+    handleMouseMove = () => {
+        if (this.mouseMoveTimer)
+            return;
+        this.mouseMoveTimer = window.setTimeout(() => {
+            this.updateEngagementScore(0.1);
+            this.mouseMoveTimer = null;
+        }, 100);
+    };
+    handleScroll = () => {
+        this.updateEngagementScore(0.2);
+    };
+    handleKeydown = () => {
+        this.updateEngagementScore(0.3);
+        this.behaviorData.isLikelyToInteract = true;
+    };
+    handleFocus = () => {
+        this.updateEngagementScore(0.4);
+        this.behaviorData.isLikelyToInteract = true;
+    };
+    handleVisibilityChange = () => {
+        if (!document.hidden) {
+            this.updateEngagementScore(0.5);
+            this.behaviorData.isLikelyToInteract = true;
+        }
+    };
+    updateEngagementScore(increment) {
+        this.behaviorData.engagementScore = Math.min(1, this.behaviorData.engagementScore + increment);
+        // Decay engagement score over time
+        setTimeout(() => {
+            this.behaviorData.engagementScore = Math.max(0, this.behaviorData.engagementScore - increment * 0.5);
+            this.notifyListeners();
+        }, 30000); // 30 seconds decay
+        this.notifyListeners();
+    }
+    notifyListeners() {
+        this.listeners.forEach((listener) => listener(this.behaviorData));
+    }
+}
+export default MediaResourcePreloader;

package/src/components/ui/media-resource-preloader.tsx

@@ -34,7 +34,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 	priority = 'auto',
 	strategy = 'adaptive',
 }) => {
-	const networkInfoRef = useRef<NetworkInformation | null>(null);
+	const networkInfoRef = useRef<any>(null);
 	const userBehaviorRef = useRef<UserBehaviorTracker | null>(null);
 	const preloadingHistoryRef = useRef<Map<string, number>>(new Map());
 
@@ -57,7 +57,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			}
 
 			// Preconnect to media domains
-			if (shouldPreconnect(source.type, strategy)) {
+			if (source.type && shouldPreconnect(source.type, strategy)) {
 				config.preconnect.push(domain);
 			}
 
@@ -65,7 +65,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			if (shouldPreload(source, priority, strategy)) {
 				config.preload.push({
 					url: source.src,
-					type: getPreloadType(source.type),
+					type: source.type ? getPreloadType(source.type) : 'auto',
 				});
 			}
 
@@ -130,10 +130,9 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
 
 			preload(url, {
-				as: type,
+				as: type as any,
 				crossOrigin,
 				integrity: getAssetIntegrity(url),
-				priority,
 			});
 		});
 	}, [preloadingConfig.preload, priority]);
@@ -144,7 +143,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
 
 			preinit(url, {
-				as: type,
+				as: type as any,
 				crossOrigin,
 			});
 		});
@@ -190,7 +189,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 
 		// Strategy-based decision
 		if (strategy === 'conservative') {
-			return priority === 'high' && source.type === 'hls';
+			return priority === 'high' && (source.type?.includes('hls') ?? false);
 		}
 
 		if (strategy === 'aggressive') {
@@ -208,10 +207,10 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 
 			if (saveData) return false;
 			if (effectiveType === 'slow-2g' || effectiveType === '2g') {
-				return priority === 'high' && source.type === 'hls';
+				return priority === 'high' && (source.type?.includes('hls') ?? false);
 			}
 			if (effectiveType === '3g') {
-				return ['hls', 'm3u8'].includes(source.type);
+				return ['hls', 'm3u8'].includes(source.type || '');
 			}
 		}
 
@@ -227,7 +226,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 	}
 
 	function shouldPreinit(source: MediaSource, strategy: string): boolean {
-		return strategy === 'aggressive' && source.type === 'hls';
+		return strategy === 'aggressive' && (source.type?.includes('hls') ?? false);
 	}
 
 	function getPreloadType(mediaType: string): string {
@@ -275,7 +274,6 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			preload(url, {
 				as: 'fetch',
 				crossOrigin: 'anonymous',
-				priority: 'high',
 			});
 		});
 	}

package/src/components/ui/play-button.d.ts

@@ -0,0 +1,3 @@
+import type { PlayButtonProps } from "../../types/index";
+export declare const PlayButton: import("react").ForwardRefExoticComponent<PlayButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=play-button.d.ts.map

package/src/components/ui/play-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.d.ts","sourceRoot":"","sources":["play-button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AASxD,eAAO,MAAM,UAAU,+GA0FtB,CAAA"}

package/src/components/ui/play-button.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pause, Play } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const sizeVariants = {
+    sm: { button: "size-8", icon: 16 },
+    md: { button: "size-10", icon: 20 },
+    lg: { button: "size-12", icon: 24 },
+    xl: { button: "size-16", icon: 32 }
+};
+export const PlayButton = forwardRef(({ isPlaying, onToggle, disabled = false, size = "lg", className }, ref) => {
+    const sizeConfig = sizeVariants[size] || sizeVariants.lg;
+    return (_jsxs("button", { ref: ref, type: "button", onClick: onToggle, disabled: disabled, "data-state": isPlaying ? "playing" : "paused", className: cn(
+        // Base styles with new design system
+        "group relative inline-flex items-center justify-center", "glass-strong media-control rounded-full contain-layout", "focus-ring touch-manipulation", sizeConfig.button, 
+        // Color transitions with OKLCH
+        "text-[color:var(--media-text)] transition-all duration-300", "bg-[color:var(--media-control-bg)] backdrop-blur-sm", "border border-[color:var(--media-border)]/30", 
+        // Interactive states
+        "hover:bg-[color:var(--media-control-hover)]", "hover:border-[color:var(--media-border)]/50", "hover:shadow-[color:var(--media-bg)]/20 hover:shadow-lg", "hover:-translate-y-0.5 hover:scale-105", "active:bg-[color:var(--media-control-active)]", "active:translate-y-0 active:scale-100", 
+        // Focus state
+        "focus-visible:ring-2 focus-visible:ring-[color:var(--media-focus)]", "focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--media-bg)]", 
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50", "disabled:hover:translate-y-0 disabled:hover:scale-100", "disabled:hover:bg-[color:var(--media-control-bg)]", className), "aria-label": isPlaying ? "Pause media" : "Play media", "aria-pressed": isPlaying, children: [_jsx("div", { className: cn("absolute inset-0 rounded-full opacity-0 transition-opacity duration-300", "bg-gradient-to-br from-[color:var(--color-media-play)] to-[color:var(--color-media-pause)]", "blur-sm group-hover:opacity-20", isPlaying && "opacity-10") }), isPlaying ? (_jsx(Pause, { size: sizeConfig.icon, className: cn("relative z-10 fill-current transition-all duration-200", "text-[color:var(--color-media-pause)]", "group-hover:scale-110 group-active:scale-95", "drop-shadow-sm") })) : (_jsx(Play, { size: sizeConfig.icon, className: cn("relative z-10 fill-current transition-all duration-200", "ml-0.5 text-[color:var(--color-media-play)]", "group-hover:scale-110 group-active:scale-95", "drop-shadow-sm") })), _jsx("div", { className: cn("absolute inset-0 rounded-full opacity-0", "scale-75 bg-[color:var(--media-text)]/10", "group-active:scale-100 group-active:opacity-100", "transition-all duration-150 ease-out") })] }));
+});
+PlayButton.displayName = "PlayButton";

package/src/components/ui/seek-bar.d.ts

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

package/src/components/ui/seek-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-bar.d.ts","sourceRoot":"","sources":["seek-bar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,eAAO,MAAM,OAAO,yGAqJnB,CAAA"}

package/src/components/ui/seek-bar.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Slider from "@radix-ui/react-slider";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { forwardRef, useState, useMemo, useTransition, useDeferredValue, useRef } from "react";
+import { formatTime } from "../../lib/format-time";
+import { cn } from "../../lib/utils";
+export const SeekBar = forwardRef(({ currentTime, duration, buffered, onSeek, size = "sm", className }, ref) => {
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    const [isDragging, setIsDragging] = useState(false);
+    const [previewTime, setPreviewTime] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    // Defer non-critical updates for better performance
+    const deferredHovering = useDeferredValue(isHovering);
+    const deferredPreviewTime = useDeferredValue(previewTime);
+    // Memoize expensive calculations
+    const progress = useMemo(() => duration > 0 ? (currentTime / duration) * 100 : 0, [currentTime, duration]);
+    // Calculate buffered ranges with memoization
+    const bufferedRanges = useMemo(() => {
+        const ranges = [];
+        if (buffered && duration > 0) {
+            for (let i = 0; i < buffered.length; i++) {
+                const start = (buffered.start(i) / duration) * 100;
+                const end = (buffered.end(i) / duration) * 100;
+                ranges.push({ start, end });
+            }
+        }
+        return ranges;
+    }, [buffered, duration]);
+    // Throttled seek handler with React 19 transitions
+    const seekTimeoutRef = useRef();
+    const lastSeekTime = useRef(0);
+    const handleValueChange = ([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        setPreviewTime(time);
+        if (isDragging) {
+            onSeek(time);
+        }
+    };
+    const handleValueCommit = ([value]) => {
+        const time = ((value ?? 0) / 100) * duration;
+        onSeek(time);
+        setIsDragging(false);
+    };
+    const handlePointerDown = () => {
+        setIsDragging(true);
+    };
+    return (_jsx("div", { ref: ref, className: cn("media-container relative w-full text-[color:var(--media-text)]", "touch-manipulation contain-layout", className), onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("div", { className: "relative animate-enter", children: _jsxs(Slider.Root, { className: cn("group relative flex w-full touch-none select-none items-center", "media-md:h-4 media-sm:h-3 media-xs:h-2", "focus-ring cursor-pointer"), value: [progress], max: 100, step: 0.1, onValueChange: handleValueChange, onValueCommit: handleValueCommit, onPointerDown: handlePointerDown, "aria-label": "Seek to position", children: [_jsxs(Slider.Track, { className: cn("relative grow overflow-hidden rounded-full", "bg-[color:var(--media-control-bg)]/40 backdrop-blur-sm", "border border-[color:var(--media-border)]/20", "shadow-inner transition-all duration-300 ease-out", "h-1 group-focus-within:h-1.5 group-hover:h-1.5", "group-hover:bg-[color:var(--media-control-bg)]/60", "group-hover:border-[color:var(--media-border)]/40"), children: [bufferedRanges.map((range, index) => (_jsx("div", { className: cn("absolute h-full rounded-full transition-all duration-500", "bg-[color:var(--color-media-buffered)] shadow-inner", "opacity-60 group-hover:opacity-80"), style: {
+                                                    left: `${range.start}%`,
+                                                    width: `${range.end - range.start}%`
+                                                } }, index))), _jsx(Slider.Range, { className: cn("absolute h-full rounded-full transition-all duration-300", "bg-gradient-to-r from-[color:var(--color-media-progress)] to-[color:var(--color-brand-accent)]", "shadow-[color:var(--color-brand-primary)]/20 shadow-lg", "group-hover:shadow-xl") })] }), _jsx(Slider.Thumb, { className: cn("block size-4 rounded-full border-white/20 bg-white", "shadow-lg hover:shadow-xl", "opacity-0 group-hover:opacity-100", "hover:scale-110 hover:bg-white/95 active:scale-95", "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-white/50", "focus:ring-offset-2 focus:ring-offset-black/20", "transition-all duration-300 ease-out", isDragging && "opacity-100"), "aria-label": "Seek" })] }) }) }), isDragging && (_jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: cn("rounded bg-black/80 px-2 py-1 text-sm text-white", "fade-in-0 zoom-in-95 animate-in"), sideOffset: 10, children: [formatTime(previewTime), _jsx(Tooltip.Arrow, { className: "fill-black/80" })] }) }))] }) }) }));
+});
+SeekBar.displayName = "SeekBar";