@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/components/examples/basic-video-player.tsx

@@ -1,55 +1,50 @@
 "use client"
 
 import React from "react"
-import { MediaPlayerRoot } from "../media-player-root"
-import { MediaPlayerVideo } from "../media-player-video"
 import { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls"
+import { MediaPlayerError } from "../media-player-error"
+import { MediaPlayerFullscreen } from "../media-player-fullscreen"
+import { MediaPlayerLoading } from "../media-player-loading"
 import { MediaPlayerPlay } from "../media-player-play"
+import { MediaPlayerRoot } from "../media-player-root"
 import { MediaPlayerSeek } from "../media-player-seek"
-import { MediaPlayerVolume } from "../media-player-volume"
 import { MediaPlayerTime } from "../media-player-time"
-import { MediaPlayerFullscreen } from "../media-player-fullscreen"
-import { MediaPlayerLoading } from "../media-player-loading"
-import { MediaPlayerError } from "../media-player-error"
+import { MediaPlayerVideo } from "../media-player-video"
+import { MediaPlayerVolume } from "../media-player-volume"
 
 export interface BasicVideoPlayerProps {
-  src: string
-  poster?: string
-  className?: string
+	src: string
+	poster?: string
+	className?: string
 }
 
 export function BasicVideoPlayer({ src, poster, className }: BasicVideoPlayerProps) {
-  return (
-    <MediaPlayerRoot className={className}>
-      <MediaPlayerVideo
-        src={src}
-        poster={poster}
-        crossOrigin="anonymous"
-        playsInline
-      />
-      
-      <MediaPlayerLoading />
-      <MediaPlayerError />
-      
-      <MediaPlayerControlsOverlay />
-      <MediaPlayerControls>
-        <div className="flex items-center gap-2">
-          <MediaPlayerPlay />
-          <MediaPlayerVolume />
-          <MediaPlayerTime variant="current" />
-        </div>
-        
-        <div className="flex-1 px-2">
-          <MediaPlayerSeek />
-        </div>
-        
-        <div className="flex items-center gap-2">
-          <MediaPlayerTime variant="duration" />
-          <MediaPlayerFullscreen />
-        </div>
-      </MediaPlayerControls>
-    </MediaPlayerRoot>
-  )
+	return (
+		<MediaPlayerRoot className={className}>
+			<MediaPlayerVideo src={src} poster={poster} crossOrigin="anonymous" playsInline />
+
+			<MediaPlayerLoading />
+			<MediaPlayerError />
+
+			<MediaPlayerControlsOverlay />
+			<MediaPlayerControls>
+				<div className="flex items-center gap-2">
+					<MediaPlayerPlay />
+					<MediaPlayerVolume />
+					<MediaPlayerTime variant="current" />
+				</div>
+
+				<div className="flex-1 px-2">
+					<MediaPlayerSeek />
+				</div>
+
+				<div className="flex items-center gap-2">
+					<MediaPlayerTime variant="duration" />
+					<MediaPlayerFullscreen />
+				</div>
+			</MediaPlayerControls>
+		</MediaPlayerRoot>
+	)
 }
 
 BasicVideoPlayer.displayName = "BasicVideoPlayer"

package/src/components/examples/enhanced-controls-example.tsx

@@ -2,17 +2,17 @@
 
 import React from "react"
 import { MediaProvider } from "../../context/media-provider"
-import { MediaPlayerRoot } from "../media-player-root"
-import { MediaPlayerVideo } from "../media-player-video"
 import {
+	EnhancedBackwardButton,
 	EnhancedControlBar,
+	EnhancedForwardButton,
 	EnhancedPlayButton,
 	EnhancedSeekBar,
-	EnhancedBackwardButton,
-	EnhancedForwardButton,
-	EnhancedVolumeControl,
-	EnhancedTimeDisplay
+	EnhancedTimeDisplay,
+	EnhancedVolumeControl
 } from "../enhanced/enhanced-controls"
+import { MediaPlayerRoot } from "../media-player-root"
+import { MediaPlayerVideo } from "../media-player-video"
 
 export interface EnhancedControlsExampleProps {
 	src: string
@@ -21,18 +21,14 @@ export interface EnhancedControlsExampleProps {
 }
 
 // Complete example with all enhanced controls
-export function EnhancedControlsExample({
-	src,
-	poster,
-	className
-}: EnhancedControlsExampleProps) {
+export function EnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps) {
 	return (
 		<MediaProvider>
 			<MediaPlayerRoot className={className}>
 				<MediaPlayerVideo src={src} poster={poster} />
-				
+
 				{/* Complete control bar with all features */}
-				<EnhancedControlBar 
+				<EnhancedControlBar
 					className="absolute right-0 bottom-0 left-0"
 					showSkipButtons={true}
 					showVolumeControl={true}
@@ -56,11 +52,11 @@ export function CustomEnhancedControlsExample({
 		<MediaProvider>
 			<MediaPlayerRoot className={className}>
 				<MediaPlayerVideo src={src} poster={poster} />
-				
+
 				<div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4">
 					{/* Seek bar */}
 					<EnhancedSeekBar className="mb-4" />
-					
+
 					{/* Custom control layout */}
 					<div className="flex items-center justify-between">
 						{/* Left side controls */}
@@ -70,7 +66,7 @@ export function CustomEnhancedControlsExample({
 							<EnhancedForwardButton skipTime={15} size="md" />
 							<EnhancedVolumeControl />
 						</div>
-						
+
 						{/* Right side info */}
 						<div className="flex items-center gap-2 font-mono text-sm text-white">
 							<EnhancedTimeDisplay variant="current" />
@@ -85,27 +81,17 @@ export function CustomEnhancedControlsExample({
 }
 
 // Minimal example with just skip buttons
-export function SkipButtonsOnlyExample({
-	src,
-	poster,
-	className
-}: EnhancedControlsExampleProps) {
+export function SkipButtonsOnlyExample({ src, poster, className }: EnhancedControlsExampleProps) {
 	return (
 		<MediaProvider>
 			<MediaPlayerRoot className={className}>
 				<MediaPlayerVideo src={src} poster={poster} />
-				
+
 				<div className="-translate-x-1/2 absolute bottom-4 left-1/2 transform">
 					<div className="flex items-center gap-4">
-						<EnhancedBackwardButton 
-							skipTime={10} 
-							size="lg"
-						/>
+						<EnhancedBackwardButton skipTime={10} size="lg" />
 						<EnhancedPlayButton size="xl" />
-						<EnhancedForwardButton 
-							skipTime={10} 
-							size="lg"
-						/>
+						<EnhancedForwardButton skipTime={10} size="lg" />
 					</div>
 				</div>
 			</MediaPlayerRoot>

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

@@ -1,12 +1,12 @@
 "use client"
 
 import { useState } from "react"
+import { cn } from "../../lib/utils"
 import { MediaPlayer } from "../media-player"
 import { PlayButton } from "../ui/play-button"
 import { SeekBar } from "../ui/seek-bar"
 import { TimeDisplay } from "../ui/time-display"
 import { VolumeControl } from "../ui/volume-control"
-import { cn } from "../../lib/utils"
 
 interface EnhancedMediaPlayerProps {
 	src: string | string[]
@@ -15,14 +15,14 @@ interface EnhancedMediaPlayerProps {
 	description?: string
 }
 
-export function EnhancedMediaPlayerExample({ 
-	src, 
+export function EnhancedMediaPlayerExample({
+	src,
 	className,
 	title = "Sample Media",
 	description = "Demonstrating the new BaroiPlayer design system"
 }: EnhancedMediaPlayerProps) {
 	const [isControlsVisible, setIsControlsVisible] = useState(true)
-	
+
 	return (
 		<div className={cn("mx-auto w-full max-w-4xl space-y-6", className)}>
 			{/* Media Player Title */}
@@ -30,13 +30,11 @@ export function EnhancedMediaPlayerExample({
 				<h2 className="font-semibold text-[color:var(--color-text-primary)] text-fluid-xl">
 					{title}
 				</h2>
-				<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">
-					{description}
-				</p>
+				<p className="text-[color:var(--color-text-secondary)] text-fluid-sm">{description}</p>
 			</div>
 
 			{/* Enhanced Media Player with Custom Controls */}
-			<div 
+			<div
 				className={cn(
 					"group relative",
 					"hover:shadow-2xl hover:shadow-[color:var(--color-brand-primary)]/10",
@@ -44,209 +42,220 @@ export function EnhancedMediaPlayerExample({
 				)}
 				onMouseEnter={() => setIsControlsVisible(true)}
 				onMouseLeave={() => setIsControlsVisible(false)}>
-				<MediaPlayer
-					src={src}
-					customControls={true}>
-				{({ state, controls }) => (
-					<>
-						{/* Main Control Overlay */}
-						<div 
-							className={cn(
-								"absolute inset-0 z-20 flex items-center justify-center",
-								"transition-all duration-300",
-								state.isLoading && "pointer-events-none"
-							)}>
-							<div className={cn(
-								"relative",
-								"transition-all duration-300 ease-out",
-								"hover:scale-105"
-							)}>
-								<PlayButton
-									isPlaying={state.isPlaying}
-									onToggle={controls.toggle}
-									disabled={state.isLoading}
-									size="xl"
+				<MediaPlayer src={src} customControls={true}>
+					{({ state, controls }) => (
+						<>
+							{/* Main Control Overlay */}
+							<div
+								className={cn(
+									"absolute inset-0 z-20 flex items-center justify-center",
+									"transition-all duration-300",
+									state.isLoading && "pointer-events-none"
+								)}>
+								<div
 									className={cn(
-										"transform transition-all duration-300",
-										!isControlsVisible && !state.isLoading && "scale-75 opacity-60",
-										isControlsVisible && "scale-100 opacity-100"
-									)}
-								/>
-							</div>
-						</div>
-
-						{/* Bottom Control Panel */}
-						<div className={cn(
-							"absolute right-0 bottom-0 left-0 z-30",
-							"glass-strong border-[color:var(--media-border)]/30 border-t",
-							"transition-all duration-300 ease-out",
-							!isControlsVisible && "translate-y-full opacity-0",
-							isControlsVisible && "translate-y-0 opacity-100"
-						)}>
-							{/* Seek Bar Container */}
-							<div className="-mt-2 px-4">
-								<SeekBar
-									currentTime={state.currentTime}
-									duration={state.duration}
-									buffered={state.buffered}
-									onSeek={controls.seek}
-									className="w-full"
-								/>
-							</div>
-
-							{/* Main Controls Row */}
-							<div className={cn(
-								"flex items-center justify-between gap-4 p-4",
-								"media-md:px-8 media-sm:px-6"
-							)}>
-								{/* Left Side - Playback Controls */}
-								<div className="flex items-center gap-3 media-sm:gap-4">
+										"relative",
+										"transition-all duration-300 ease-out",
+										"hover:scale-105"
+									)}>
 									<PlayButton
 										isPlaying={state.isPlaying}
 										onToggle={controls.toggle}
 										disabled={state.isLoading}
-										size="md"
+										size="xl"
+										className={cn(
+											"transform transition-all duration-300",
+											!isControlsVisible && !state.isLoading && "scale-75 opacity-60",
+											isControlsVisible && "scale-100 opacity-100"
+										)}
 									/>
-									
-									<div className="media-sm:block hidden">
-										<TimeDisplay
-											currentTime={state.currentTime}
-											duration={state.duration}
-											className="font-mono text-fluid-sm"
-										/>
-									</div>
 								</div>
+							</div>
 
-								{/* Center - Media Information */}
-								<div className={cn(
-									"media-md:block hidden flex-1 text-center",
-									"space-y-1"
+							{/* Bottom Control Panel */}
+							<div
+								className={cn(
+									"absolute right-0 bottom-0 left-0 z-30",
+									"glass-strong border-[color:var(--media-border)]/30 border-t",
+									"transition-all duration-300 ease-out",
+									!isControlsVisible && "translate-y-full opacity-0",
+									isControlsVisible && "translate-y-0 opacity-100"
 								)}>
-									<p className="truncate font-medium text-[color:var(--media-text)] text-fluid-sm">
-										{title}
-									</p>
-									{state.duration > 0 && (
-										<div className="text-[color:var(--media-text-secondary)] text-xs">
-											{Math.round((state.currentTime / state.duration) * 100)}% complete
-										</div>
-									)}
+								{/* Seek Bar Container */}
+								<div className="-mt-2 px-4">
+									<SeekBar
+										currentTime={state.currentTime}
+										duration={state.duration}
+										buffered={state.buffered}
+										onSeek={controls.seek}
+										className="w-full"
+									/>
 								</div>
 
-								{/* Right Side - Volume & Settings */}
-								<div className="flex items-center gap-3 media-sm:gap-4">
-									<div className="media-sm:block hidden">
-										<VolumeControl
-											volume={state.volume}
-											isMuted={state.isMuted}
-											onVolumeChange={controls.setVolume}
-											onToggleMute={controls.toggleMute}
+								{/* Main Controls Row */}
+								<div
+									className={cn(
+										"flex items-center justify-between gap-4 p-4",
+										"media-md:px-8 media-sm:px-6"
+									)}>
+									{/* Left Side - Playback Controls */}
+									<div className="flex items-center gap-3 media-sm:gap-4">
+										<PlayButton
+											isPlaying={state.isPlaying}
+											onToggle={controls.toggle}
+											disabled={state.isLoading}
 											size="md"
 										/>
+
+										<div className="media-sm:block hidden">
+											<TimeDisplay
+												currentTime={state.currentTime}
+												duration={state.duration}
+												className="font-mono text-fluid-sm"
+											/>
+										</div>
 									</div>
-									
-									{/* Fullscreen Button */}
-									<button
-										onClick={controls.toggleFullscreen}
-										className={cn(
-											"group glass-strong media-control relative",
-											"size-10 touch-manipulation rounded-xl contain-layout",
-											"bg-[color:var(--media-control-bg)] backdrop-blur-sm",
-											"border border-[color:var(--media-border)]/30",
-											"text-[color:var(--media-text)] transition-all duration-300",
-											"hover:bg-[color:var(--media-control-hover)]",
-											"hover:border-[color:var(--media-border)]/50",
-											"hover:-translate-y-0.5 hover:scale-105",
-											"active:translate-y-0 active:scale-100",
-											"focus-ring"
+
+									{/* Center - Media Information */}
+									<div className={cn("media-md:block hidden flex-1 text-center", "space-y-1")}>
+										<p className="truncate font-medium text-[color:var(--media-text)] text-fluid-sm">
+											{title}
+										</p>
+										{state.duration > 0 && (
+											<div className="text-[color:var(--media-text-secondary)] text-xs">
+												{Math.round((state.currentTime / state.duration) * 100)}% complete
+											</div>
 										)}
-										aria-label="Enter fullscreen">
-										<svg 
-											className="m-auto size-5 transition-transform duration-200 group-hover:scale-110"
-											fill="none" 
-											stroke="currentColor" 
-											viewBox="0 0 24 24">
-											<path 
-												strokeLinecap="round" 
-												strokeLinejoin="round" 
-												strokeWidth={2} 
-												d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" 
+									</div>
+
+									{/* Right Side - Volume & Settings */}
+									<div className="flex items-center gap-3 media-sm:gap-4">
+										<div className="media-sm:block hidden">
+											<VolumeControl
+												volume={state.volume}
+												isMuted={state.isMuted}
+												onVolumeChange={controls.setVolume}
+												onToggleMute={controls.toggleMute}
+												size="md"
 											/>
-										</svg>
-									</button>
+										</div>
+
+										{/* Fullscreen Button */}
+										<button
+											onClick={controls.toggleFullscreen}
+											className={cn(
+												"group glass-strong media-control relative",
+												"size-10 touch-manipulation rounded-xl contain-layout",
+												"bg-[color:var(--media-control-bg)] backdrop-blur-sm",
+												"border border-[color:var(--media-border)]/30",
+												"text-[color:var(--media-text)] transition-all duration-300",
+												"hover:bg-[color:var(--media-control-hover)]",
+												"hover:border-[color:var(--media-border)]/50",
+												"hover:-translate-y-0.5 hover:scale-105",
+												"active:translate-y-0 active:scale-100",
+												"focus-ring"
+											)}
+											aria-label="Enter fullscreen">
+											<svg
+												className="m-auto size-5 transition-transform duration-200 group-hover:scale-110"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24">
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+												/>
+											</svg>
+										</button>
+									</div>
 								</div>
-							</div>
 
-							{/* Mobile Time Display */}
-							<div className="media-sm:hidden px-4 pb-3">
-								<TimeDisplay
-									currentTime={state.currentTime}
-									duration={state.duration}
-									className="text-center font-mono text-sm"
-								/>
+								{/* Mobile Time Display */}
+								<div className="media-sm:hidden px-4 pb-3">
+									<TimeDisplay
+										currentTime={state.currentTime}
+										duration={state.duration}
+										className="text-center font-mono text-sm"
+									/>
+								</div>
 							</div>
-						</div>
 
-						{/* Loading State Overlay */}
-						{state.isLoading && (
-							<div className={cn(
-								"absolute inset-0 z-40 flex items-center justify-center",
-								"glass animate-enter rounded-lg",
-								"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
-							)}>
-								<div className="space-y-4 text-center text-[color:var(--media-text)]">
-									<div className="relative">
-										<div className={cn(
-											"size-16 animate-spin rounded-full border-2",
-											"border-[color:var(--color-brand-accent)]/30",
-											"border-t-[color:var(--color-brand-accent)]"
-										)}></div>
-										<div className={cn(
-											"absolute inset-0 size-16 rounded-full",
-											"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
-											"animate-pulse opacity-20 blur-lg"
-										)}></div>
+							{/* Loading State Overlay */}
+							{state.isLoading && (
+								<div
+									className={cn(
+										"absolute inset-0 z-40 flex items-center justify-center",
+										"glass animate-enter rounded-lg",
+										"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
+									)}>
+									<div className="space-y-4 text-center text-[color:var(--media-text)]">
+										<div className="relative">
+											<div
+												className={cn(
+													"size-16 animate-spin rounded-full border-2",
+													"border-[color:var(--color-brand-accent)]/30",
+													"border-t-[color:var(--color-brand-accent)]"
+												)}></div>
+											<div
+												className={cn(
+													"absolute inset-0 size-16 rounded-full",
+													"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
+													"animate-pulse opacity-20 blur-lg"
+												)}></div>
+										</div>
+										<p className="font-medium text-[color:var(--media-text-secondary)] text-fluid-base">
+											Loading {title}...
+										</p>
 									</div>
-									<p className="font-medium text-[color:var(--media-text-secondary)] text-fluid-base">
-										Loading {title}...
-									</p>
 								</div>
-							</div>
-						)}
+							)}
 
-						{/* Error State */}
-						{state.error && (
-							<div className={cn(
-								"absolute inset-0 z-40 flex items-center justify-center",
-								"glass-strong animate-enter rounded-lg",
-								"bg-[color:var(--color-error)]/10 backdrop-blur-md"
-							)}>
-								<div className="mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]">
-									<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4">
-										<svg className="size-8 text-[color:var(--color-error)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-										</svg>
-									</div>
-									<div>
-										<h3 className="mb-2 font-semibold text-fluid-lg">Playback Error</h3>
-										<p className="text-[color:var(--media-text-secondary)] text-fluid-sm">
-											{state.error}
-										</p>
+							{/* Error State */}
+							{state.error && (
+								<div
+									className={cn(
+										"absolute inset-0 z-40 flex items-center justify-center",
+										"glass-strong animate-enter rounded-lg",
+										"bg-[color:var(--color-error)]/10 backdrop-blur-md"
+									)}>
+									<div className="mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]">
+										<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4">
+											<svg
+												className="size-8 text-[color:var(--color-error)]"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor">
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+												/>
+											</svg>
+										</div>
+										<div>
+											<h3 className="mb-2 font-semibold text-fluid-lg">Playback Error</h3>
+											<p className="text-[color:var(--media-text-secondary)] text-fluid-sm">
+												{state.error}
+											</p>
+										</div>
+										<button
+											onClick={() => window.location.reload()}
+											className={cn(
+												"rounded-lg px-6 py-2 font-medium transition-all duration-200",
+												"bg-[color:var(--color-brand-primary)] text-[color:var(--media-text)]",
+												"hover:scale-105 hover:bg-[color:var(--color-brand-accent)]",
+												"focus-ring active:scale-95"
+											)}>
+											Try Again
+										</button>
 									</div>
-									<button
-										onClick={() => window.location.reload()}
-										className={cn(
-											"rounded-lg px-6 py-2 font-medium transition-all duration-200",
-											"bg-[color:var(--color-brand-primary)] text-[color:var(--media-text)]",
-											"hover:scale-105 hover:bg-[color:var(--color-brand-accent)]",
-											"focus-ring active:scale-95"
-										)}>
-										Try Again
-									</button>
 								</div>
-							</div>
-						)}
-					</>
-				)}
+							)}
+						</>
+					)}
 				</MediaPlayer>
 			</div>
 
@@ -290,4 +299,4 @@ export function EnhancedMediaPlayerExample({
 			</div>
 		</div>
 	)
-}
+}