@therealtinhtute/baroiplayer 1.1.0 → 1.2.1

package/package.json

@@ -1,18 +1,23 @@
 {
 	"name": "@therealtinhtute/baroiplayer",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"private": false,
 	"type": "module",
 	"description": "A customizable media player component library for React",
 	"sideEffects": false,
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
+			"development": {
+				"types": "./src/index.ts",
+				"default": "./src/index.ts"
+			},
+			"types": "./src/index.ts",
 			"import": "./dist/index.mjs",
-			"require": "./dist/index.js"
+			"require": "./dist/index.js",
+			"default": "./dist/index.mjs"
 		},
-		"./globals.css": "./dist/styles/globals.css",
-		"./minimal-player.css": "./dist/styles/minimal-player.css",
+		"./globals.css": "./src/styles/globals.css",
+		"./minimal-player.css": "./src/styles/minimal-player.css",
 		"./dist/*": "./dist/*",
 		"./lib/*": "./src/lib/*.ts",
 		"./components/*": "./src/components/*.tsx",
@@ -21,7 +26,7 @@
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
-	"types": "./dist/index.d.ts",
+	"types": "./src/index.ts",
 	"files": ["dist", "src", "README.md", "LICENSE"],
 	"scripts": {
 		"build": "vite build",
@@ -45,32 +50,33 @@
 		"@radix-ui/react-tooltip": "^1.2.7",
 		"clsx": "^2.1.1",
 		"react-player": "^3.3.1",
-		"tailwind-merge": "^3.3.0",
+		"tailwind-merge": "^3.6.0",
 		"web-vitals": "^4.2.4"
 	},
 	"devDependencies": {
 		"@rp/typescript-config": "workspace:*",
-		"@tailwindcss/postcss": "^4.0.0",
-		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/react": "^16.1.0",
+		"@tailwindcss/postcss": "4.3.2",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/node": "^20",
-		"@types/react": "^19.1.4",
-		"@types/react-dom": "^19.1.5",
-		"@vitejs/plugin-react": "^4.3.4",
-		"@vitest/coverage-v8": "^2.1.8",
-		"babel-plugin-react-compiler": "^19.1.0-rc.3",
-		"jsdom": "^25.0.1",
+		"@types/react": "^19.2.17",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.3",
+		"@vitest/coverage-v8": "^4.1.10",
+		"babel-plugin-react-compiler": "^1.0.0",
+		"jsdom": "^29.1.1",
 		"lightningcss": "^1.30.1",
 		"rollup-plugin-analyzer": "^4.0.0",
 		"rollup-plugin-bundle-analyzer": "^1.1.0",
-		"size-limit": "^11.1.7",
-		"tailwindcss": "^4.0.0",
+		"@size-limit/file": "^12.1.0",
+		"size-limit": "^12.1.0",
+		"tailwindcss": "4.3.2",
 		"ts-morph": "^27.0.0",
-		"typescript": "^5",
-		"vite": "^6.1.1",
+		"typescript": "^5.9.3",
+		"vite": "^8.1.4",
 		"vite-bundle-analyzer": "^0.13.1",
-		"vitest": "^2.1.8"
+		"vitest": "^4.1.10"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",
@@ -105,6 +111,6 @@
 		"url": "https://github.com/ryanphanrp/baroiplayer/issues"
 	},
 	"engines": {
-		"node": ">=18.0.0"
+		"node": ">=20.19.0"
 	}
 }

package/src/components/AnimateLoading.tsx

@@ -3,20 +3,24 @@
 import React, { useState, useEffect } from "react"
 import { cn } from "../lib/utils"
 
-// Try to import the GIF using direct import for better compatibility
-let monaLoadingGif: string | undefined
-
-// Import the GIF statically for bundling - this will be handled by Vite
-// @ts-ignore - Vite handles this import
+// Import the GIF statically for bundling (Vite / webpack may yield string or { src })
 import monaGifSrc from "../assets/mona-loading.gif"
 
-try {
-	monaLoadingGif = monaGifSrc
-} catch {
-	// GIF import failed, will use fallback
-	monaLoadingGif = undefined
+function resolveAssetUrl(src: unknown): string | undefined {
+	if (typeof src === "string" && src.length > 0) return src
+	if (
+		src &&
+		typeof src === "object" &&
+		"src" in src &&
+		typeof (src as { src: unknown }).src === "string"
+	) {
+		return (src as { src: string }).src
+	}
+	return undefined
 }
 
+const monaLoadingGif = resolveAssetUrl(monaGifSrc)
+
 interface AnimateLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
 	loadingText?: string
 	gifSrc?: string

package/src/components/accessibility/keyboard-help-overlay.tsx

@@ -55,6 +55,8 @@ export function KeyboardHelpOverlay({
 		const firstElement = focusableElements[0]
 		const lastElement = focusableElements[focusableElements.length - 1]
 
+		if (!firstElement || !lastElement) return
+
 		// Focus the close button initially
 		const closeButton = overlay.querySelector("[data-close-button]") as HTMLElement
 		closeButton?.focus()

package/src/components/enhanced/debug-panel.tsx

@@ -275,7 +275,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 					</div>
 				</div>
 				{pluginInfo.loadedPlugins &&
-					pluginInfo.loadedPlugins.length > pluginInfo.activePlugins?.length && (
+					pluginInfo.loadedPlugins.length > (pluginInfo.activePlugins?.length || 0) && (
 						<div className="mt-2">
 							<span className="text-yellow-400">Loaded (inactive):</span>
 							<div className="ml-2 space-y-1 font-mono text-xs">

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

@@ -21,10 +21,25 @@ import {
 } from "../../core/providers/enhanced-hls-provider"
 import { useIntelligentPreloading } from "../../hooks/use-intelligent-preloading"
 import { cn } from "../../lib/utils"
-import { MediaPlayerProps, MediaSource } from "../../types"
+import { MediaPlayerProps, type MediaMimeType } from "../../types"
 import { MediaResourcePreloader } from "../ui/media-resource-preloader"
 
-interface EnhancedMediaPlayerProps extends MediaPlayerProps {
+// Extend MediaMimeType to include HLS and define extended MediaSource
+type ExtendedMediaMimeType = MediaMimeType | "hls"
+
+interface ExtendedMediaSource {
+	src: string
+	type?: ExtendedMediaMimeType
+	media?: string
+}
+
+interface EnhancedMediaPlayerProps extends Omit<MediaPlayerProps, 'src' | 'onTimeUpdate' | 'onError'> {
+	src?: string
+	sources?: ExtendedMediaSource[]
+	controls?: boolean
+	onCanPlay?: () => void
+	onTimeUpdate?: () => void
+	onError?: (error: MediaError) => void
 	/** Enable enhanced HLS optimization */
 	enableEnhancedHLS?: boolean
 	/** Enable intelligent preloading */
@@ -84,7 +99,18 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 	onTimeUpdate,
 	onLoadStart,
 	onCanPlay,
-	...props
+	onDurationChange,
+	onVolumeChange,
+	onLoadedData,
+	volume,
+	preload,
+	crossOrigin,
+	playbackRates,
+	keyboardControls,
+	showControls,
+	customControls,
+	children,
+	...restProps
 }) => {
 	const videoRef = useRef<HTMLVideoElement>(null)
 	const containerRef = useRef<HTMLDivElement>(null)
@@ -125,20 +151,20 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 	const deferredVolume = useDeferredValue(mediaState.volume)
 
 	// Prepare media sources
-	const mediaSources = useMemo((): MediaSource[] => {
+	const mediaSources = useMemo((): ExtendedMediaSource[] => {
 		if (sources) {
 			return sources
 		}
 		if (src) {
 			const extension = src.split(".").pop()?.toLowerCase()
 			const type = getMediaTypeFromExtension(extension)
-			return [{ src, type }]
+			return [{ src, type: type as ExtendedMediaMimeType }]
 		}
 		return []
 	}, [src, sources])
 
 	// Intelligent preloading
-	const preloadingControls = useIntelligentPreloading(mediaSources, {
+	const preloadingControls = useIntelligentPreloading(mediaSources as any, {
 		trackUserBehavior: enableIntelligentPreloading,
 		adaptToNetwork: true,
 		strategy: preloadingStrategy,
@@ -147,18 +173,23 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 
 	// Initialize HLS provider
 	const initializeHLS = useCallback(async () => {
-		if (!videoRef.current || !enableEnhancedHLS) return
+		if (!videoRef.current || !enableEnhancedHLS || !mediaSources[0]?.src) return
 
-		const hlsConfig = { ...ENHANCED_HLS_DEFAULTS, ...hlsConfig }
-		const provider = new EnhancedHLSProvider(hlsConfig)
+		const mergedHlsConfig = { ...ENHANCED_HLS_DEFAULTS, ...hlsConfig }
+		const provider = new EnhancedHLSProvider(mergedHlsConfig)
 		hlsProviderRef.current = provider
 
 		try {
 			const hls = provider.initialize(videoRef.current, mediaSources[0].src, {
-				hlsConfig: hlsConfig,
-				onError: handleMediaError
+				autoPlay,
+				muted,
+				loop,
+				preload,
+				crossOrigin
 			})
 
+			// Import Hls dynamically to access Events
+			const Hls = (await import('hls.js')).default
 			// Setup HLS event listeners
 			hls.on(Hls.Events.LEVEL_SWITCHED, handleQualityChange)
 			hls.on(Hls.Events.FRAG_BUFFERED, handleFragmentBuffered)
@@ -167,7 +198,7 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 			console.error("HLS initialization failed:", error)
 			fallbackToNativePlayback()
 		}
-	}, [enableEnhancedHLS, hlsConfig, mediaSources])
+	}, [enableEnhancedHLS, hlsConfig, mediaSources, autoPlay, muted, loop, preload, crossOrigin])
 
 	// Fallback to native playback
 	const fallbackToNativePlayback = useCallback(() => {
@@ -175,7 +206,7 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 
 		const source = document.createElement("source")
 		source.src = mediaSources[0].src
-		source.type = getMediaTypeFromUrl(mediaSources[0].src)
+		source.type = getMediaTypeFromUrl(mediaSources[0].src) || "video/mp4"
 
 		videoRef.current.appendChild(source)
 		videoRef.current.load()
@@ -265,11 +296,13 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 	}, [])
 
 	const handleMediaError = useCallback(
-		(error: MediaError) => {
+		(error: MediaError | Error) => {
 			startTransition(() => {
-				setMediaState((prev) => ({ ...prev, error }))
+				setMediaState((prev) => ({ ...prev, error: error as MediaError }))
 			})
-			onError?.(error)
+			// Convert to string for the callback
+			const errorMessage = error instanceof Error ? error.message : `Media error code: ${error.code}`
+			onError?.(error as MediaError)
 		},
 		[onError]
 	)
@@ -278,7 +311,9 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 		(event: any, data: any) => {
 			if (data.fatal) {
 				console.error("Fatal HLS error:", data)
-				handleMediaError(new Error(`HLS Error: ${data.details}`))
+				const mediaError = new Error(`HLS Error: ${data.details}`) as any
+				mediaError.code = 4 // MEDIA_ERR_SRC_NOT_SUPPORTED
+				handleMediaError(mediaError)
 			}
 		},
 		[handleMediaError]
@@ -348,11 +383,15 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 		video.addEventListener("timeupdate", handleTimeUpdate)
 		video.addEventListener("loadedmetadata", handleLoadedMetadata)
 		video.addEventListener("volumechange", handleVolumeChange)
-		video.addEventListener("loadstart", onLoadStart)
-		video.addEventListener("canplay", onCanPlay)
+		if (onLoadStart) {
+			video.addEventListener("loadstart", onLoadStart)
+		}
+		if (onCanPlay) {
+			video.addEventListener("canplay", onCanPlay)
+		}
 
 		// Initialize HLS if needed
-		if (mediaSources[0].type === "hls" && enableEnhancedHLS) {
+		if (mediaSources[0]?.type === "hls" && enableEnhancedHLS) {
 			initializeHLS()
 		} else {
 			fallbackToNativePlayback()
@@ -371,8 +410,12 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 			video.removeEventListener("timeupdate", handleTimeUpdate)
 			video.removeEventListener("loadedmetadata", handleLoadedMetadata)
 			video.removeEventListener("volumechange", handleVolumeChange)
-			video.removeEventListener("loadstart", onLoadStart)
-			video.removeEventListener("canplay", onCanPlay)
+			if (onLoadStart) {
+				video.removeEventListener("loadstart", onLoadStart)
+			}
+			if (onCanPlay) {
+				video.removeEventListener("canplay", onCanPlay)
+			}
 
 			hlsProviderRef.current?.destroy()
 			pluginManagerRef.current?.dispose()
@@ -439,15 +482,15 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 		<div
 			ref={containerRef}
 			className={cn("relative aspect-video overflow-hidden rounded-lg bg-black", className)}
-			{...props}>
+			{...restProps}>
 			{/* Media Resource Preloader */}
 			{enableIntelligentPreloading && (
 				<MediaResourcePreloader
-					sources={mediaSources}
+					sources={mediaSources as any}
 					enableIntelligentPreloading={true}
 					adaptToNetworkConditions={true}
 					priority="auto"
-					strategy={preloadingStrategy}
+					strategy={preloadingStrategy === "balanced" ? "adaptive" : preloadingStrategy}
 				/>
 			)}
 

package/src/components/examples/loading-states-demo.tsx

@@ -82,8 +82,7 @@ export function LoadingStatesDemo() {
 
 					<div className="aspect-video overflow-hidden rounded-lg bg-black">
 						<SimpleMinimalPlayer
-							src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-							poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+							src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
 							crossOrigin="anonymous"
 							showLoadingState={true}
 							loadingComponent={showCustomLoading ? CustomLoadingComponent : undefined}

package/src/components/examples/react-19-demo.tsx

@@ -270,21 +270,17 @@ function PerformanceDebugPanel({
 // Example usage component
 export function React19DemoExample() {
 	const [currentSrc, setCurrentSrc] = React.useState(
-		"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+		"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
 	)
 
 	const videoSources = [
 		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-			title: "Big Buck Bunny",
-			poster:
-				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+			src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+			title: "Flower (MDN)"
 		},
 		{
-			src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-			title: "Elephants Dream",
-			poster:
-				"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
+			src: "https://www.w3schools.com/html/mov_bbb.mp4",
+			title: "Big Buck Bunny"
 		}
 	]
 
@@ -320,7 +316,7 @@ export function React19DemoExample() {
 			{/* Enhanced Media Player */}
 			<React19MediaPlayerDemo
 				src={currentSrc}
-				poster={currentVideo.poster}
+				poster={undefined}
 				mediaId={`demo-${currentSrc}`}
 				className="w-full"
 			/>

package/src/components/examples/volume-orientation-demo.tsx

@@ -41,8 +41,7 @@ export function VolumeOrientationDemo() {
 				{/* Demo Player */}
 				<div className="aspect-video overflow-hidden rounded-lg bg-black">
 					<SimpleMinimalPlayer
-						src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-						poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+						src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
 						crossOrigin="anonymous"
 						className="h-full w-full"
 						volumeOrientation={orientation}

package/src/components/legacy.tsx

@@ -30,7 +30,7 @@ ModernMediaPlayer.displayName = "DeprecatedModernMediaPlayer"
 
 export const SimpleVideoPlayer = React.forwardRef<any, any>((props, ref) => {
 	showDeprecationWarning("SimpleVideoPlayer", "VideoPlayer (the primary video player component)")
-	return <SimpleVideoPlayerBase {...props} ref={ref} />
+	return <SimpleVideoPlayerBase {...(props as any)} />
 })
 
 SimpleVideoPlayer.displayName = "DeprecatedSimpleVideoPlayer"
@@ -41,7 +41,7 @@ export const LegacyPlayButton = React.forwardRef<any, any>((props, ref) => {
 		"PlayButton",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <PlayButton {...props} ref={ref} />
+	return <PlayButton {...(props as any)} />
 })
 
 LegacyPlayButton.displayName = "DeprecatedPlayButton"
@@ -51,7 +51,7 @@ export const LegacySeekBar = React.forwardRef<any, any>((props, ref) => {
 		"SeekBar",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <SeekBar {...props} ref={ref} />
+	return <SeekBar {...(props as any)} />
 })
 
 LegacySeekBar.displayName = "DeprecatedSeekBar"
@@ -61,7 +61,7 @@ export const LegacyTimeDisplay = React.forwardRef<any, any>((props, ref) => {
 		"TimeDisplay",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <TimeDisplay {...props} ref={ref} />
+	return <TimeDisplay {...(props as any)} />
 })
 
 LegacyTimeDisplay.displayName = "DeprecatedTimeDisplay"
@@ -71,7 +71,7 @@ export const LegacyVolumeControl = React.forwardRef<any, any>((props, ref) => {
 		"VolumeControl",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <VolumeControl {...props} ref={ref} />
+	return <VolumeControl {...(props as any)} />
 })
 
 LegacyVolumeControl.displayName = "DeprecatedVolumeControl"
@@ -81,7 +81,7 @@ export const LegacyFullscreenButton = React.forwardRef<any, any>((props, ref) =>
 		"FullscreenButton",
 		"Use MediaPlayer compound components or MediaPlayer (all-in-one)"
 	)
-	return <FullscreenButton {...props} ref={ref} />
+	return <FullscreenButton {...(props as any)} />
 })
 
 LegacyFullscreenButton.displayName = "DeprecatedFullscreenButton"

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

@@ -5,12 +5,12 @@ import { useMediaContext } from "../context/media-context"
 
 // Utility function to compose refs
 function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
-	return (node: T) => {
+	return (node: T | null) => {
 		refs.forEach((ref) => {
 			if (typeof ref === "function") {
 				ref(node)
 			} else if (ref) {
-				;(ref as React.MutableRefObject<T>).current = node
+				;(ref as React.MutableRefObject<T | null>).current = node
 			}
 		})
 	}
@@ -29,18 +29,11 @@ export function MediaPlayerVideo({
 	const context = useMediaContext()
 
 	// Create a ref that will be composed with the context mediaRef when mounted
-	const [combinedRef, setCombinedRef] = React.useState<React.RefCallback<HTMLVideoElement> | null>(
-		() => {
-			// This runs once during initialization to create the combined ref
-			return composeRefs(context.mediaRef)
-		}
+	const combinedRef = React.useMemo(
+		() => composeRefs(context.mediaRef),
+		[context.mediaRef]
 	)
 
-	// Update combined ref when context changes (but this won't trigger render)
-	React.useEffect(() => {
-		setCombinedRef(() => composeRefs(context.mediaRef))
-	}, [context.mediaRef])
-
 	if (asChild) {
 		// When asChild is true, clone the child element and add our props
 		const child = React.Children.only(children) as React.ReactElement

package/src/components/media-player.tsx

@@ -191,7 +191,7 @@ export const MediaPlayer = forwardRef<HTMLDivElement, MediaPlayerProps>(
 							playsInline
 							x-webkit-airplay="allow"
 							style={{ willChange: "transform" }}>
-							{renderSources()}
+							{renderSources}
 							Your browser does not support the video element.
 						</video>
 					) : (
@@ -201,7 +201,7 @@ export const MediaPlayer = forwardRef<HTMLDivElement, MediaPlayerProps>(
 							// Performance optimizations
 							preload={preloadStrategy === "eager" ? "auto" : "metadata"}
 						>
-							{renderSources()}
+							{renderSources}
 							Your browser does not support the audio element.
 						</audio>
 					)}

package/src/components/ui/blur-poster.tsx

@@ -9,11 +9,11 @@ interface BlurPosterProps {
 	transitionDuration?: number
 }
 
-const intensityClasses = {
-	low: "blur-sm",
-	medium: "blur-md",
-	high: "blur-lg"
-}
+const intensityBlurPx = {
+	low: "8px",
+	medium: "16px",
+	high: "32px"
+} as const
 
 const BlurPosterComponent = memo(function BlurPoster({
 	src,
@@ -24,15 +24,16 @@ const BlurPosterComponent = memo(function BlurPoster({
 }: BlurPosterProps) {
 	return (
 		<div
-			className={cn(
-				"relative overflow-hidden bg-black/20",
-				"before:absolute before:inset-0 before:bg-center before:bg-cover before:opacity-100",
-				`before:[background-image:url('${src}')]`,
-				`before:[filter:blur(${intensity === "low" ? "8px" : intensity === "medium" ? "16px" : "32px"})]`,
-				className
-			)}
+			className={cn("relative overflow-hidden bg-black/20", className)}
 			aria-label={alt}
 			role="img">
+			<div
+				className="absolute inset-0 bg-center bg-cover opacity-100"
+				style={{
+					backgroundImage: `url('${src}')`,
+					filter: `blur(${intensityBlurPx[intensity]})`
+				}}
+			/>
 			<div
 				className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"
 				style={{ transitionDuration: `${transitionDuration}ms` }}
@@ -75,10 +76,12 @@ export const BlurPosterWithPlaceholder = memo(function BlurPosterWithPlaceholder
 					<div
 						className={cn(
 							"absolute inset-0 bg-center bg-cover opacity-0 transition-opacity duration-500",
-							!isLoading && "opacity-100",
-							`[background-image:url('${src}')]`,
-							`[filter:blur(${intensity === "low" ? "8px" : intensity === "medium" ? "16px" : "32px"})]`
+							!isLoading && "opacity-100"
 						)}
+						style={{
+							backgroundImage: `url('${src}')`,
+							filter: `blur(${intensityBlurPx[intensity]})`
+						}}
 						aria-hidden="true"
 					/>
 				</>

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

@@ -28,9 +28,9 @@ export const EnhancedSeekBar = forwardRef<HTMLDivElement, SeekBarProps>(
 		const deferredPreviewTime = useDeferredValue(previewTime)
 
 		// Throttling refs
-		const seekTimeoutRef = useRef<NodeJS.Timeout>()
+		const seekTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 		const lastSeekTime = useRef<number>(0)
-		const rafId = useRef<number>()
+		const rafId = useRef<number | undefined>(undefined)
 
 		// Memoize expensive calculations
 		const progress = useMemo(