@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,246 +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, useMemo, useTransition, startTransition } 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"
-import type { MediaPlayerProps } from "../../types"
-
-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(() => {
-			const commonProps = {
-				ref: mediaRef,
-				src,
-				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} controls={!customControls && showControls}>
-						{src && <source src={typeof src === 'string' ? src : src.src} />}
-						Your browser does not support the audio element.
-					</audio>
-				)
-			}
-
-			// Video (default)
-			return (
-				<video
-					{...commonProps}
-					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 ? (
-						<source src={typeof src === 'string' ? src : src.src} />
-					) : 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.message}</p>
-							</div>
-						</div>
-					)}
-
-					{/* Custom controls or children */}
-					{children && (
-						<div className="pointer-events-none absolute inset-0">
-							{typeof children === "function"
-								? children({ state, controls, mediaType: detectedMediaType })
-								: 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/dist/src/components/unified/media-player.d.ts

@@ -1,37 +0,0 @@
-/**
- * Unified MediaPlayer - The primary media player component
- * Consolidates MediaPlayer, VideoPlayer, and AudioPlayer into one component
- */
-import type { MediaPlayerProps } from "../../types";
-export interface UnifiedMediaPlayerProps extends MediaPlayerProps {
-    mediaType?: 'video' | 'audio' | 'auto';
-    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 declare const MediaPlayer: import("react").ForwardRefExoticComponent<UnifiedMediaPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * Video-specific component with video defaults
- */
-export declare const VideoPlayer: import("react").ForwardRefExoticComponent<UnifiedMediaPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * Audio-specific component with audio defaults
- */
-export declare const AudioPlayer: import("react").ForwardRefExoticComponent<UnifiedMediaPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=media-player.d.ts.map

package/dist/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 { BaseMediaPlayer } from "./base-media-player"
-import type { MediaPlayerProps } from "../../types"
-
-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"

package/dist/src/components/variants/minimal/AccessibleMinimalPlayer.d.ts

@@ -1,42 +0,0 @@
-import type { IconSet } from "../../icons";
-export interface AccessibleMinimalPlayerProps {
-    src: string | string[];
-    poster?: string;
-    autoPlay?: boolean;
-    muted?: boolean;
-    loop?: boolean;
-    autoHideControls?: boolean;
-    hideDelay?: number;
-    theme?: "dark" | "light" | "transparent";
-    customIcons?: IconSet;
-    showCenterPlayButton?: boolean;
-    showLoadingSpinner?: boolean;
-    className?: string;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnded?: () => void;
-    onTimeUpdate?: (currentTime: number) => void;
-    onVolumeChange?: (volume: number) => void;
-    onSeek?: (time: number) => void;
-    onError?: (error: Error) => void;
-    watermark?: {
-        src: string;
-        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-        opacity?: number;
-        size?: "small" | "medium" | "large";
-    };
-    qualities?: Array<{
-        src: string;
-        quality: string;
-        default?: boolean;
-    }>;
-    showQualitySelector?: boolean;
-    showSpeedControl?: boolean;
-    thumbnails?: string;
-    enableKeyboardShortcuts?: boolean;
-    showKeyboardHelpButton?: boolean;
-    ariaLabel?: string;
-    ariaDescribedBy?: string;
-}
-export declare function AccessibleMinimalPlayer({ src, poster, autoPlay, muted, loop, autoHideControls, hideDelay, theme, customIcons, showCenterPlayButton, showLoadingSpinner, className, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onSeek, onError, watermark, qualities, showQualitySelector, showSpeedControl, thumbnails, enableKeyboardShortcuts, showKeyboardHelpButton, ariaLabel, ariaDescribedBy, }: AccessibleMinimalPlayerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AccessibleMinimalPlayer.d.ts.map