@therealtinhtute/baroiplayer 1.1.0 → 1.2.0

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/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/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(

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())
 
@@ -56,10 +56,9 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 
 			// Preload the content
 			preload(url, {
-				as: "fetch",
-				crossOrigin: "anonymous",
-				priority: "high"
-			})
+				as: "fetch" as any,
+				crossOrigin: "anonymous"
+			} as any)
 		})
 	}
 
@@ -92,7 +91,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			}
 
 			// Preconnect to media domains
-			if (shouldPreconnect(source.type, strategy)) {
+			if (shouldPreconnect(source.type || "", strategy)) {
 				config.preconnect.push(domain)
 			}
 
@@ -100,7 +99,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			if (shouldPreloadBasic(source, priority, strategy)) {
 				config.preload.push({
 					url: source.src,
-					type: getPreloadType(source.type)
+					type: getPreloadType(source.type || "")
 				})
 			}
 
@@ -133,7 +132,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 
 			// Strategy-based decision
 			if (strategy === "conservative") {
-				return priority === "high" && source.type === "hls"
+				return priority === "high" && (source.type as string) === "hls"
 			}
 
 			if (strategy === "aggressive") {
@@ -146,10 +145,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 as string) === "hls"
 				}
 				if (effectiveType === "3g") {
-					return ["hls", "m3u8"].includes(source.type)
+					return ["hls", "m3u8"].includes(source.type || "")
 				}
 			}
 
@@ -208,11 +207,10 @@ 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
-			})
+				integrity: getAssetIntegrity(url)
+			} as any)
 		})
 	}, [filteredPreloadingConfig.preload, priority])
 
@@ -222,9 +220,9 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			const crossOrigin = shouldUseCrossOrigin(url) ? "anonymous" : undefined
 
 			preinit(url, {
-				as: type,
+				as: type as any,
 				crossOrigin
-			})
+			} as any)
 		})
 	}, [filteredPreloadingConfig.preinit])
 
@@ -264,7 +262,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 	function shouldPreloadBasic(source: MediaSource, priority: string, strategy: string): boolean {
 		// Basic strategy-based decision without ref access
 		if (strategy === "conservative") {
-			return priority === "high" && source.type === "hls"
+			return priority === "high" && (source.type as string) === "hls"
 		}
 
 		if (strategy === "aggressive") {
@@ -280,7 +278,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 		priority: string,
 		strategy: string,
 		preloadingHistory: Map<string, number>,
-		networkInfo: NetworkInformation | null
+		networkInfo: any
 	): boolean {
 		// Check if already preloaded recently
 		const lastPreload = preloadingHistory.get(source.src)
@@ -288,7 +286,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 
 		// Strategy-based decision
 		if (strategy === "conservative") {
-			return priority === "high" && source.type === "hls"
+			return priority === "high" && (source.type as string) === "hls"
 		}
 
 		if (strategy === "aggressive") {
@@ -302,7 +300,7 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 	function shouldAdaptivePreload(
 		source: MediaSource,
 		priority: string,
-		networkInfo: NetworkInformation | null
+		networkInfo: any
 	): boolean {
 		// Consider network conditions
 		if (networkInfo) {
@@ -310,10 +308,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 as string) === "hls"
 			}
 			if (effectiveType === "3g") {
-				return ["hls", "m3u8"].includes(source.type)
+				return ["hls", "m3u8"].includes(source.type || "")
 			}
 		}
 
@@ -329,7 +327,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 as string) === "hls"
 	}
 
 	function getPreloadType(mediaType: string): string {

package/src/components/unified/base-media-player.tsx

@@ -111,9 +111,16 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 
 		// Determine the media element based on type
 		const MediaElement = useMemo(() => {
+			type MediaSource = { src: string; type?: string }
+
+			const srcString = typeof src === "string"
+				? src
+				: Array.isArray(src)
+					? (typeof src[0] === "string" ? src[0] : ((src[0] as unknown) as MediaSource)?.src || "")
+					: ""
+
 			const commonProps = {
-				ref: mediaRef,
-				src,
+				src: srcString,
 				className: cn(
 					"w-full h-full",
 					state.isLoading && "opacity-0",
@@ -129,8 +136,8 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 
 			if (detectedMediaType === "audio") {
 				return (
-					<audio {...commonProps} controls={!customControls && showControls}>
-						{src && <source src={typeof src === "string" ? src : src.src} />}
+					<audio {...commonProps} ref={mediaRef as React.RefObject<HTMLAudioElement>} controls={!customControls && showControls}>
+						{typeof src === "string" && <source src={src} />}
 						Your browser does not support the audio element.
 					</audio>
 				)
@@ -140,14 +147,21 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 			return (
 				<video
 					{...commonProps}
+					ref={mediaRef as React.RefObject<HTMLVideoElement>}
 					poster={poster}
 					muted={state.isMuted}
 					playsInline
 					controls={!customControls && showControls}>
 					{Array.isArray(src) ? (
-						src.map((source, index) => <source key={index} src={source.src} type={source.type} />)
+						src.map((source, index) => (
+							<source
+								key={index}
+								src={typeof source === "string" ? source : ((source as unknown) as MediaSource).src}
+								type={typeof source === "string" ? undefined : ((source as unknown) as MediaSource).type}
+							/>
+						))
 					) : src ? (
-						<source src={typeof src === "string" ? src : src.src} />
+						<source src={srcString} />
 					) : null}
 					Your browser does not support the video element.
 				</video>
@@ -208,7 +222,7 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 							<div className="p-4 text-center text-white">
 								<div className="mb-2 text-lg text-red-400">⚠️</div>
 								<p className="text-sm">Failed to load media</p>
-								<p className="mt-1 text-xs opacity-75">{state.error.message}</p>
+								<p className="mt-1 text-xs opacity-75">{state.error}</p>
 							</div>
 						</div>
 					)}
@@ -216,9 +230,7 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 					{/* Custom controls or children */}
 					{children && (
 						<div className="pointer-events-none absolute inset-0">
-							{typeof children === "function"
-								? children({ state, controls, mediaType: detectedMediaType })
-								: children}
+							{typeof children === "function" ? children({ state, controls }) : children}
 						</div>
 					)}