@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,252 +0,0 @@
-/**
- * Base Media Player - Core unified functionality for video and audio
- * This consolidates the logic from MediaPlayer, VideoPlayer, and AudioPlayer
- */
-
-"use client"
-
-import { forwardRef, startTransition, useMemo, useTransition } from "react"
-import { useEnhancedMediaPlayer } from "../../hooks/use-enhanced-media-player"
-import { useKeyboardControls } from "../../hooks/use-keyboard-controls"
-import { useMemoryOptimization } from "../../hooks/use-memory-optimization"
-import { cn } from "../../lib/utils"
-import type { MediaPlayerProps } from "../../types"
-import { EnhancedMediaWrapper } from "../media-suspense"
-
-export interface BaseMediaPlayerProps
-	extends Omit<MediaPlayerProps, "poster" | "aspectRatio" | "width" | "height"> {
-	// Media type detection
-	mediaType?: "video" | "audio" | "auto"
-
-	// Video-specific props (only used for video content)
-	poster?: string
-	aspectRatio?: string
-	width?: string | number
-	height?: string | number
-
-	// Enhanced features
-	enablePerformanceMonitoring?: boolean
-	bufferingStrategy?: "adaptive" | "conservative" | "aggressive"
-	preloadStrategy?: "progressive" | "eager" | "lazy"
-	enableOptimizations?: boolean
-}
-
-export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
-	(
-		{
-			src,
-			mediaType = "auto",
-			className,
-			children,
-			keyboardControls = true,
-			showControls = true,
-			customControls = false,
-			crossOrigin,
-			enablePerformanceMonitoring = true,
-			bufferingStrategy = "adaptive",
-			preloadStrategy = "progressive",
-			enableOptimizations = true,
-			// Video-specific props
-			poster,
-			aspectRatio = "16/9",
-			width = "100%",
-			height = "auto",
-			...options
-		},
-		ref
-	) => {
-		// React 19 concurrent features
-		const [isPending] = useTransition()
-
-		// Auto-detect media type if not specified
-		const detectedMediaType = useMemo(() => {
-			if (mediaType !== "auto") return mediaType
-
-			// Simple detection based on file extension
-			if (typeof src === "string") {
-				const videoExtensions = [".mp4", ".webm", ".ogg", ".mov", ".avi", ".mkv"]
-				const audioExtensions = [".mp3", ".wav", ".ogg", ".aac", ".flac", ".m4a"]
-
-				const extension = src.toLowerCase().split(".").pop()
-				if (extension && videoExtensions.some((ext) => extension.endsWith(ext))) {
-					return "video"
-				}
-				if (extension && audioExtensions.some((ext) => extension.endsWith(ext))) {
-					return "audio"
-				}
-			}
-
-			// Default to video for unknown types
-			return "video"
-		}, [src, mediaType])
-
-		// 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
-		useKeyboardControls({
-			enabled: keyboardControls,
-			state,
-			controls
-		})
-
-		// 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 = {
-				src: srcString,
-				className: cn(
-					"w-full h-full",
-					state.isLoading && "opacity-0",
-					!customControls && showControls && "cursor-pointer"
-				),
-				onPlay: controls.play,
-				onPause: controls.pause,
-				onVolumeChange: (e: any) => controls.setVolume(e.target.volume),
-				onTimeUpdate: (e: any) => controls.setCurrentTime(e.target.currentTime),
-				onSeeked: (e: any) => controls.setCurrentTime(e.target.currentTime),
-				crossOrigin
-			}
-
-			if (detectedMediaType === "audio") {
-				return (
-					<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>
-				)
-			}
-
-			// Video (default)
-			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={typeof source === "string" ? source : ((source as unknown) as MediaSource).src}
-								type={typeof source === "string" ? undefined : ((source as unknown) as MediaSource).type}
-							/>
-						))
-					) : src ? (
-						<source src={srcString} />
-					) : null}
-					Your browser does not support the video element.
-				</video>
-			)
-		}, [detectedMediaType, src, mediaRef, state, controls, customControls, showControls, poster])
-
-		// Container styles based on media type
-		const containerStyles = useMemo(() => {
-			if (detectedMediaType === "audio") {
-				return cn(
-					"relative bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden",
-					"flex items-center justify-center p-8",
-					className
-				)
-			}
-
-			// Video styles
-			return cn("relative bg-black rounded-lg overflow-hidden", className)
-		}, [detectedMediaType, className])
-
-		// Video-specific aspect ratio
-		const aspectRatioStyles = useMemo(() => {
-			if (detectedMediaType === "video" && aspectRatio) {
-				return {
-					aspectRatio,
-					width: typeof width === "number" ? `${width}px` : width,
-					height: typeof height === "number" ? `${height}px` : height
-				}
-			}
-			return {}
-		}, [detectedMediaType, aspectRatio, width, height])
-
-		return (
-			<EnhancedMediaWrapper>
-				<div
-					ref={containerRef}
-					className={containerStyles}
-					style={aspectRatioStyles}
-					data-media-type={detectedMediaType}
-					data-enhanced={isEnhanced}>
-					{MediaElement}
-
-					{/* Loading state */}
-					{state.isLoading && (
-						<div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-							<div className="text-center">
-								<div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-white"></div>
-								<p className="font-medium text-sm text-white">
-									{state.isBuffering ? "Buffering..." : "Loading..."}
-								</p>
-							</div>
-						</div>
-					)}
-
-					{/* Error state */}
-					{state.error && (
-						<div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-							<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}</p>
-							</div>
-						</div>
-					)}
-
-					{/* Custom controls or children */}
-					{children && (
-						<div className="pointer-events-none absolute inset-0">
-							{typeof children === "function" ? children({ state, controls }) : children}
-						</div>
-					)}
-
-					{/* Performance indicator for development */}
-					{process.env.NODE_ENV === "development" && enablePerformanceMonitoring && (
-						<div className="absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs">
-							<div>FPS: {performanceMetrics.frameRate || 0}</div>
-							<div>Memory: {memoryStats.usage.toFixed(1)}MB</div>
-							<div>Type: {detectedMediaType}</div>
-							{isEnhanced && <div>Enhanced ✓</div>}
-						</div>
-					)}
-				</div>
-			</EnhancedMediaWrapper>
-		)
-	}
-)
-
-BaseMediaPlayer.displayName = "BaseMediaPlayer"

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

@@ -1,75 +0,0 @@
-/**
- * Unified MediaPlayer - The primary media player component
- * Consolidates MediaPlayer, VideoPlayer, and AudioPlayer into one component
- */
-
-"use client"
-
-import { forwardRef } from "react"
-import type { MediaPlayerProps } from "../../types"
-import { BaseMediaPlayer } from "./base-media-player"
-
-export interface UnifiedMediaPlayerProps extends MediaPlayerProps {
-	// Media type - auto-detect if not specified
-	mediaType?: "video" | "audio" | "auto"
-
-	// Video-specific props (ignored for audio)
-	poster?: string
-	aspectRatio?: string
-	width?: string | number
-	height?: string | number
-}
-
-/**
- * The primary MediaPlayer component
- *
- * @example
- * // Video player (auto-detected)
- * <MediaPlayer src="/video.mp4" poster="/poster.jpg" />
- *
- * @example
- * // Audio player (auto-detected)
- * <MediaPlayer src="/audio.mp3" />
- *
- * @example
- * // Explicit media type
- * <MediaPlayer src="/media.mp4" mediaType="video" />
- */
-export const MediaPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((props, ref) => {
-	return <BaseMediaPlayer {...props} ref={ref} />
-})
-
-MediaPlayer.displayName = "MediaPlayer"
-
-/**
- * Video-specific component with video defaults
- */
-export const VideoPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((props, ref) => {
-	return (
-		<BaseMediaPlayer
-			{...props}
-			ref={ref}
-			mediaType="video"
-			aspectRatio={props.aspectRatio || "16/9"}
-			showControls={props.showControls ?? true}
-		/>
-	)
-})
-
-VideoPlayer.displayName = "VideoPlayer"
-
-/**
- * Audio-specific component with audio defaults
- */
-export const AudioPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((props, ref) => {
-	return (
-		<BaseMediaPlayer
-			{...props}
-			ref={ref}
-			mediaType="audio"
-			showControls={props.showControls ?? true}
-		/>
-	)
-})
-
-AudioPlayer.displayName = "AudioPlayer"