@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/ui/time-display.tsx

@@ -1,15 +1,18 @@
 "use client"
 
-import { forwardRef } from "react"
+import { forwardRef, memo, useMemo } from "react"
 import { formatTime } from "../../lib/format-time"
 import { cn } from "../../lib/utils"
 import type { TimeDisplayProps } from "../../types/index"
 
-export const TimeDisplay = forwardRef<HTMLDivElement, TimeDisplayProps>(
-	({ currentTime, duration, showRemaining = false, size = "sm", className }, ref) => {
-		const current = formatTime(currentTime)
-		const total = formatTime(duration)
-		const remaining = formatTime(duration - currentTime)
+const TimeDisplayComponent = memo(
+	forwardRef<HTMLDivElement, TimeDisplayProps>(function TimeDisplay(
+		{ currentTime, duration, showRemaining = false, size = "sm", className },
+		ref
+	) {
+		const current = useMemo(() => formatTime(currentTime), [currentTime])
+		const total = useMemo(() => formatTime(duration), [duration])
+		const remaining = useMemo(() => formatTime(duration - currentTime), [duration, currentTime])
 
 		const sizeClasses: Record<"sm" | "md" | "lg" | "xl", string> = {
 			sm: "text-xs",
@@ -18,6 +21,11 @@ export const TimeDisplay = forwardRef<HTMLDivElement, TimeDisplayProps>(
 			xl: "text-lg"
 		}
 
+		const displayTime = useMemo(
+			() => (showRemaining ? `-${remaining}` : total),
+			[showRemaining, remaining, total]
+		)
+
 		return (
 			<div
 				ref={ref}
@@ -28,13 +36,26 @@ export const TimeDisplay = forwardRef<HTMLDivElement, TimeDisplayProps>(
 					sizeClasses[size],
 					"select-none",
 					className
-				)}>
-				<span className="tabular-nums">{current}</span>
-				<span className="mx-1 text-white">/</span>
-				<span className="tabular-nums">{showRemaining ? `-${remaining}` : total}</span>
+				)}
+				role="timer"
+				aria-label={`${showRemaining ? "Time remaining" : "Duration"}: ${displayTime}`}
+				aria-live="off">
+				<span className="tabular-nums" aria-label="Current time">
+					{current}
+				</span>
+				<span className="mx-1 text-white" aria-hidden="true">
+					/
+				</span>
+				<span
+					className="tabular-nums"
+					aria-label={showRemaining ? "Time remaining" : "Total duration"}>
+					{displayTime}
+				</span>
 			</div>
 		)
-	}
+	})
 )
 
-TimeDisplay.displayName = "TimeDisplay"
+TimeDisplayComponent.displayName = "TimeDisplay"
+
+export const TimeDisplay = TimeDisplayComponent

package/src/components/ui/volume-control.tsx

@@ -3,7 +3,7 @@
 import * as Slider from "@radix-ui/react-slider"
 import * as Tooltip from "@radix-ui/react-tooltip"
 import { Volume1, Volume2, VolumeX } from "lucide-react"
-import { forwardRef } from "react"
+import { forwardRef, memo, useCallback, useMemo } from "react"
 import { cn } from "../../lib/utils"
 import type { VolumeControlProps } from "../../types/index"
 
@@ -31,44 +31,84 @@ const sizeConfig = {
 	}
 } as const
 
-export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
-	({ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className }, ref) => {
-		const getVolumeIcon = () => {
+const VolumeControlComponent = memo(
+	forwardRef<HTMLDivElement, VolumeControlProps>(function VolumeControl(
+		{ volume, isMuted, onVolumeChange, onToggleMute, size = "lg", className },
+		ref
+	) {
+		const VolumeIcon = useMemo(() => {
 			if (isMuted || volume === 0) {
 				return VolumeX
 			} else if (volume < 0.5) {
 				return Volume1
-			} else {
-				return Volume2
 			}
-		}
-
-		const VolumeIcon = getVolumeIcon()
-		const buttonSizes: Record<"md" | "lg" | "xl", string> = {
-			md: "h-11 w-11",
-			lg: "h-12 w-12",
-			xl: "h-14 w-14"
-		}
-		const iconSizes: Record<"md" | "lg" | "xl", string> = {
-			md: "h-5 w-5",
-			lg: "h-6 w-6",
-			xl: "h-7 w-7"
-		}
-		const sliderHeight: Record<"md" | "lg" | "xl", string> = {
-			md: "h-6",
-			lg: "h-7",
-			xl: "h-8"
-		}
-		const thumbSize: Record<"md" | "lg" | "xl", string> = {
-			md: "h-4 w-4",
-			lg: "h-4 w-4",
-			xl: "h-5 w-5"
-		}
-		const trackHeight: Record<"md" | "lg" | "xl", string> = {
-			md: "h-1.5",
-			lg: "h-2",
-			xl: "h-2.5"
-		}
+			return Volume2
+		}, [isMuted, volume])
+
+		const buttonSizes: Record<"md" | "lg" | "xl", string> = useMemo(
+			() => ({
+				md: "h-11 w-11",
+				lg: "h-12 w-12",
+				xl: "h-14 w-14"
+			}),
+			[]
+		)
+
+		const iconSizes: Record<"md" | "lg" | "xl", string> = useMemo(
+			() => ({
+				md: "h-5 w-5",
+				lg: "h-6 w-6",
+				xl: "h-7 w-7"
+			}),
+			[]
+		)
+
+		const sliderHeight: Record<"md" | "lg" | "xl", string> = useMemo(
+			() => ({
+				md: "h-6",
+				lg: "h-7",
+				xl: "h-8"
+			}),
+			[]
+		)
+
+		const thumbSize: Record<"md" | "lg" | "xl", string> = useMemo(
+			() => ({
+				md: "h-4 w-4",
+				lg: "h-4 w-4",
+				xl: "h-5 w-5"
+			}),
+			[]
+		)
+
+		const trackHeight: Record<"md" | "lg" | "xl", string> = useMemo(
+			() => ({
+				md: "h-1.5",
+				lg: "h-2",
+				xl: "h-2.5"
+			}),
+			[]
+		)
+
+		const sliderValue = useMemo(() => [isMuted ? 0 : volume], [isMuted, volume])
+		const percentageText = useMemo(
+			() => Math.round((isMuted ? 0 : volume) * 100),
+			[isMuted, volume]
+		)
+
+		const handleToggleClick = useCallback(() => {
+			onToggleMute()
+		}, [onToggleMute])
+
+		const handleSliderChange = useCallback(
+			([value]: number[]) => {
+				onVolumeChange(value ?? 0)
+			},
+			[onVolumeChange]
+		)
+
+		const ariaLabel = isMuted ? "Unmute" : "Mute"
+		const tooltipText = ariaLabel
 
 		return (
 			<div ref={ref} className={cn("flex items-center space-x-3 text-white", className)}>
@@ -77,13 +117,14 @@ export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
 						<Tooltip.Trigger asChild>
 							<button
 								type="button"
-								onClick={onToggleMute}
+								onClick={handleToggleClick}
 								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",
 									buttonSizes[size]
 								)}
-								aria-label={isMuted ? "Unmute" : "Mute"}>
+								aria-label={ariaLabel}
+								aria-pressed={isMuted}>
 								<VolumeIcon className={cn(iconSizes[size])} />
 							</button>
 						</Tooltip.Trigger>
@@ -94,7 +135,7 @@ export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
 									"fade-in-0 zoom-in-95 animate-in"
 								)}
 								sideOffset={5}>
-								{isMuted ? "Unmute" : "Mute"}
+								{tooltipText}
 								<Tooltip.Arrow className="fill-black/80" />
 							</Tooltip.Content>
 						</Tooltip.Portal>
@@ -107,11 +148,15 @@ export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
 							"group relative flex w-full touch-none select-none items-center",
 							sliderHeight[size]
 						)}
-						value={[isMuted ? 0 : volume]}
+						value={sliderValue}
 						max={1}
 						step={0.01}
-						onValueChange={([value]) => onVolumeChange(value ?? 0)}
-						aria-label="Volume">
+						onValueChange={handleSliderChange}
+						aria-label="Volume"
+						aria-valuemin={0}
+						aria-valuemax={1}
+						aria-valuenow={volume}
+						aria-valuetext={`${percentageText} percent`}>
 						<Slider.Track
 							className={cn(
 								"relative grow rounded-full bg-white/20 shadow-inner transition-all duration-300 group-hover:bg-white/30",
@@ -132,12 +177,14 @@ export const VolumeControl = forwardRef<HTMLDivElement, VolumeControlProps>(
 					</Slider.Root>
 				</div>
 
-				<span className="w-10 text-right text-sm text-white">
-					{Math.round((isMuted ? 0 : volume) * 100)}
+				<span className="w-10 text-right text-sm text-white" aria-hidden="true">
+					{percentageText}
 				</span>
 			</div>
 		)
-	}
+	})
 )
 
-VolumeControl.displayName = "VolumeControl"
+VolumeControlComponent.displayName = "VolumeControl"
+
+export const VolumeControl = VolumeControlComponent

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

@@ -5,17 +5,18 @@
 
 "use client"
 
-import { forwardRef, useMemo, useTransition, startTransition } from "react"
-import { useKeyboardControls } from "../../hooks/use-keyboard-controls"
+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 { EnhancedMediaWrapper } from "../media-suspense"
 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'> {
+export interface BaseMediaPlayerProps
+	extends Omit<MediaPlayerProps, "poster" | "aspectRatio" | "width" | "height"> {
 	// Media type detection
-	mediaType?: 'video' | 'audio' | 'auto'
+	mediaType?: "video" | "audio" | "auto"
 
 	// Video-specific props (only used for video content)
 	poster?: string
@@ -25,8 +26,8 @@ export interface BaseMediaPlayerProps extends Omit<MediaPlayerProps, 'poster' |
 
 	// Enhanced features
 	enablePerformanceMonitoring?: boolean
-	bufferingStrategy?: 'adaptive' | 'conservative' | 'aggressive'
-	preloadStrategy?: 'progressive' | 'eager' | 'lazy'
+	bufferingStrategy?: "adaptive" | "conservative" | "aggressive"
+	preloadStrategy?: "progressive" | "eager" | "lazy"
 	enableOptimizations?: boolean
 }
 
@@ -34,7 +35,7 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 	(
 		{
 			src,
-			mediaType = 'auto',
+			mediaType = "auto",
 			className,
 			children,
 			keyboardControls = true,
@@ -59,38 +60,39 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 
 		// Auto-detect media type if not specified
 		const detectedMediaType = useMemo(() => {
-			if (mediaType !== 'auto') return mediaType
+			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']
+			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'
+				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'
+				if (extension && audioExtensions.some((ext) => extension.endsWith(ext))) {
+					return "audio"
 				}
 			}
 
 			// Default to video for unknown types
-			return 'video'
+			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
-		})
+		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({
@@ -109,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",
@@ -125,10 +134,10 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 				crossOrigin
 			}
 
-			if (detectedMediaType === 'audio') {
+			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>
 				)
@@ -138,17 +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}
-				>
+					controls={!customControls && showControls}>
 					{Array.isArray(src) ? (
 						src.map((source, index) => (
-							<source key={index} src={source.src} type={source.type} />
+							<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>
@@ -157,7 +170,7 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 
 		// Container styles based on media type
 		const containerStyles = useMemo(() => {
-			if (detectedMediaType === 'audio') {
+			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",
@@ -166,19 +179,16 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 			}
 
 			// Video styles
-			return cn(
-				"relative bg-black rounded-lg overflow-hidden",
-				className
-			)
+			return cn("relative bg-black rounded-lg overflow-hidden", className)
 		}, [detectedMediaType, className])
 
 		// Video-specific aspect ratio
 		const aspectRatioStyles = useMemo(() => {
-			if (detectedMediaType === 'video' && aspectRatio) {
+			if (detectedMediaType === "video" && aspectRatio) {
 				return {
 					aspectRatio,
-					width: typeof width === 'number' ? `${width}px` : width,
-					height: typeof height === 'number' ? `${height}px` : height
+					width: typeof width === "number" ? `${width}px` : width,
+					height: typeof height === "number" ? `${height}px` : height
 				}
 			}
 			return {}
@@ -191,8 +201,7 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 					className={containerStyles}
 					style={aspectRatioStyles}
 					data-media-type={detectedMediaType}
-					data-enhanced={isEnhanced}
-				>
+					data-enhanced={isEnhanced}>
 					{MediaElement}
 
 					{/* Loading state */}
@@ -213,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>
 					)}
@@ -221,15 +230,12 @@ 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>
 					)}
 
 					{/* Performance indicator for development */}
-					{process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (
+					{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>
@@ -243,4 +249,4 @@ export const BaseMediaPlayer = forwardRef<HTMLDivElement, BaseMediaPlayerProps>(
 	}
 )
 
-BaseMediaPlayer.displayName = "BaseMediaPlayer"
+BaseMediaPlayer.displayName = "BaseMediaPlayer"

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

@@ -6,12 +6,12 @@
 "use client"
 
 import { forwardRef } from "react"
-import { BaseMediaPlayer } from "./base-media-player"
 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'
+	mediaType?: "video" | "audio" | "auto"
 
 	// Video-specific props (ignored for audio)
 	poster?: string
@@ -72,4 +72,4 @@ export const AudioPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((
 	)
 })
 
-AudioPlayer.displayName = "AudioPlayer"
+AudioPlayer.displayName = "AudioPlayer"