@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,349 @@
+"use client"
+
+import React from "react"
+import { useMediaContext, useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import { cn } from "../../lib/utils"
+
+// Enhanced media player with better performance and mobile support
+export interface EnhancedMediaPlayerProps {
+	children: React.ReactNode
+	className?: string
+	autoHide?: boolean
+	autoHideDelay?: number
+	showControlsOnHover?: boolean
+	showControlsOnTouch?: boolean
+	enableKeyboardControls?: boolean
+	enableTouchGestures?: boolean
+	onPlay?: () => void
+	onPause?: () => void
+	onTimeUpdate?: (time: number) => void
+	onVolumeChange?: (volume: number) => void
+	onFullscreenChange?: (isFullscreen: boolean) => void
+}
+
+// Custom hook for auto-hide controls
+function useAutoHideControls(
+	autoHide: boolean,
+	delay: number,
+	showOnHover: boolean,
+	showOnTouch: boolean
+) {
+	const [showControls, setShowControls] = React.useState(true)
+	const [isHovering, setIsHovering] = React.useState(false)
+	const [isTouching, setIsTouching] = React.useState(false)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+	const resetTimeout = React.useCallback(() => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+		}
+		if (autoHide) {
+			timeoutRef.current = setTimeout(() => {
+				if (!isHovering && !isTouching) {
+					setShowControls(false)
+				}
+			}, delay)
+		}
+	}, [autoHide, delay, isHovering, isTouching])
+
+	const showControlsTemporarily = React.useCallback(() => {
+		setShowControls(true)
+		resetTimeout()
+	}, [resetTimeout])
+
+	React.useEffect(() => {
+		if (autoHide) {
+			resetTimeout()
+		} else {
+			setShowControls(true)
+		}
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+	}, [autoHide, resetTimeout])
+
+	const handleMouseEnter = React.useCallback(() => {
+		if (showOnHover) {
+			setIsHovering(true)
+			setShowControls(true)
+		}
+	}, [showOnHover])
+
+	const handleMouseLeave = React.useCallback(() => {
+		if (showOnHover) {
+			setIsHovering(false)
+			resetTimeout()
+		}
+	}, [showOnHover, resetTimeout])
+
+	const handleTouchStart = React.useCallback(() => {
+		if (showOnTouch) {
+			setIsTouching(true)
+			showControlsTemporarily()
+		}
+	}, [showOnTouch, showControlsTemporarily])
+
+	const handleTouchEnd = React.useCallback(() => {
+		if (showOnTouch) {
+			setIsTouching(false)
+			resetTimeout()
+		}
+	}, [showOnTouch, resetTimeout])
+
+	return {
+		showControls,
+		showControlsTemporarily,
+		handleMouseEnter,
+		handleMouseLeave,
+		handleTouchStart,
+		handleTouchEnd
+	}
+}
+
+// Custom hook for touch gestures
+function useTouchGestures(enabled: boolean) {
+	const dispatch = useMediaDispatch()
+	const isPlaying = useMediaSelector(state => state.isPlaying)
+	const currentTime = useMediaSelector(state => state.currentTime)
+	const duration = useMediaSelector(state => state.duration)
+	const volume = useMediaSelector(state => state.volume)
+
+	const [touchStart, setTouchStart] = React.useState<{ x: number; y: number; time: number } | null>(null)
+	const [isDoubleTap, setIsDoubleTap] = React.useState(false)
+
+	const handleTouchStart = React.useCallback((e: React.TouchEvent) => {
+		if (!enabled) return
+		
+		const touch = e.touches[0]
+		if (!touch) return
+		
+		const now = Date.now()
+		
+		if (touchStart && now - touchStart.time < 300) {
+			setIsDoubleTap(true)
+			// Double tap to play/pause
+			dispatch({
+				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+			})
+		} else {
+			setTouchStart({
+				x: touch.clientX,
+				y: touch.clientY,
+				time: now
+			})
+			setIsDoubleTap(false)
+		}
+	}, [enabled, touchStart, isPlaying, dispatch])
+
+	const handleTouchMove = React.useCallback((e: React.TouchEvent) => {
+		if (!enabled || !touchStart || isDoubleTap) return
+
+		const touch = e.touches[0]
+		if (!touch) return
+		
+		const deltaX = touch.clientX - touchStart.x
+		const deltaY = touch.clientY - touchStart.y
+
+		// Horizontal swipe for seeking
+		if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+			const seekAmount = (deltaX / window.innerWidth) * 30 // 30 seconds max
+			const newTime = Math.max(0, Math.min(duration, currentTime + seekAmount))
+			dispatch({
+				type: MediaActionTypes.SEEK,
+				detail: newTime
+			})
+		}
+
+		// Vertical swipe for volume (right side of screen)
+		if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50 && touchStart.x > window.innerWidth / 2) {
+			const volumeChange = -(deltaY / window.innerHeight) * 1 // Full range
+			const newVolume = Math.max(0, Math.min(1, volume + volumeChange))
+			dispatch({
+				type: MediaActionTypes.SET_VOLUME,
+				detail: newVolume
+			})
+		}
+	}, [enabled, touchStart, isDoubleTap, duration, currentTime, volume, dispatch])
+
+	const handleTouchEnd = React.useCallback(() => {
+		if (!enabled) return
+		// Reset touch state after a delay to allow for double tap detection
+		setTimeout(() => {
+			setTouchStart(null)
+			setIsDoubleTap(false)
+		}, 300)
+	}, [enabled])
+
+	return {
+		handleTouchStart,
+		handleTouchMove,
+		handleTouchEnd
+	}
+}
+
+export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
+	children,
+	className,
+	autoHide = true,
+	autoHideDelay = 3000,
+	showControlsOnHover = true,
+	showControlsOnTouch = true,
+	enableKeyboardControls = true,
+	enableTouchGestures = true,
+	onPlay,
+	onPause,
+	onTimeUpdate,
+	onVolumeChange,
+	onFullscreenChange
+}: EnhancedMediaPlayerProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+	
+	// State selectors with memoization
+	const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []))
+	const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []))
+	const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []))
+	const volume = useMediaSelector(React.useCallback(state => state.volume, []))
+	const error = useMediaSelector(React.useCallback(state => state.error, []))
+
+	// Custom hooks
+	const {
+		showControls,
+		showControlsTemporarily,
+		handleMouseEnter,
+		handleMouseLeave,
+		handleTouchStart: handleControlsTouch,
+		handleTouchEnd: handleControlsTouchEnd
+	} = useAutoHideControls(autoHide, autoHideDelay, showControlsOnHover, showControlsOnTouch)
+
+	const {
+		handleTouchStart: handleGestureStart,
+		handleTouchMove: handleGestureMove,
+		handleTouchEnd: handleGestureEnd
+	} = useTouchGestures(enableTouchGestures)
+
+	// Combine touch handlers
+	const handleTouchStart = React.useCallback((e: React.TouchEvent) => {
+		handleControlsTouch()
+		handleGestureStart(e)
+	}, [handleControlsTouch, handleGestureStart])
+
+	const handleTouchEnd = React.useCallback(() => {
+		handleControlsTouchEnd()
+		handleGestureEnd()
+	}, [handleControlsTouchEnd, handleGestureEnd])
+
+	// Event handlers with memoization
+	const handleClick = React.useCallback(() => {
+		showControlsTemporarily()
+	}, [showControlsTemporarily])
+
+	// Keyboard controls
+	React.useEffect(() => {
+		if (!enableKeyboardControls) return
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+				return
+			}
+
+			switch (e.code) {
+				case 'Space':
+				case 'KeyK':
+					e.preventDefault()
+					dispatch({
+						type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+					})
+					break
+				case 'KeyF':
+					e.preventDefault()
+					dispatch({
+						type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+					})
+					break
+				case 'KeyM':
+					e.preventDefault()
+					dispatch({ type: MediaActionTypes.TOGGLE_MUTE })
+					break
+				case 'ArrowLeft':
+					e.preventDefault()
+					dispatch({
+						type: MediaActionTypes.SEEK,
+						detail: Math.max(0, currentTime - 10)
+					})
+					break
+				case 'ArrowRight':
+					e.preventDefault()
+					dispatch({
+						type: MediaActionTypes.SEEK,
+						detail: currentTime + 10
+					})
+					break
+				case 'ArrowUp':
+					e.preventDefault()
+					dispatch({
+						type: MediaActionTypes.SET_VOLUME,
+						detail: Math.min(1, volume + 0.1)
+					})
+					break
+				case 'ArrowDown':
+					e.preventDefault()
+					dispatch({
+						type: MediaActionTypes.SET_VOLUME,
+						detail: Math.max(0, volume - 0.1)
+					})
+					break
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown)
+		return () => document.removeEventListener('keydown', handleKeyDown)
+	}, [enableKeyboardControls, dispatch, isPlaying, isFullscreen, currentTime, volume])
+
+	// Event callbacks
+	React.useEffect(() => {
+		if (isPlaying) onPlay?.()
+		else onPause?.()
+	}, [isPlaying, onPlay, onPause])
+
+	React.useEffect(() => {
+		onTimeUpdate?.(currentTime)
+	}, [currentTime, onTimeUpdate])
+
+	React.useEffect(() => {
+		onVolumeChange?.(volume)
+	}, [volume, onVolumeChange])
+
+	React.useEffect(() => {
+		onFullscreenChange?.(isFullscreen)
+	}, [isFullscreen, onFullscreenChange])
+
+	return (
+		<div
+			ref={context.rootRef}
+			className={cn(
+				"relative isolate flex flex-col overflow-hidden rounded-lg bg-black outline-none",
+				"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+				"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				isFullscreen && "fixed inset-0 z-50 rounded-none",
+				className
+			)}
+			data-state={isFullscreen ? "fullscreen" : "inline"}
+			data-disabled={error ? "" : undefined}
+			data-controls-visible={showControls ? "" : undefined}
+			tabIndex={0}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+			onTouchStart={handleTouchStart}
+			onTouchMove={handleGestureMove}
+			onTouchEnd={handleTouchEnd}
+			onClick={handleClick}
+		>
+			{children}
+		</div>
+	)
+}
+
+EnhancedMediaPlayer.displayName = "EnhancedMediaPlayer"

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

@@ -0,0 +1,55 @@
+"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 { MediaPlayerPlay } from "../media-player-play"
+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"
+
+export interface BasicVideoPlayerProps {
+  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>
+  )
+}
+
+BasicVideoPlayer.displayName = "BasicVideoPlayer"

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

@@ -0,0 +1,63 @@
+"use client"
+
+import { MediaPlayer } from "../media-player"
+import { FullscreenButton } from "../ui/fullscreen-button"
+import { PlayButton } from "../ui/play-button"
+import { SeekBar } from "../ui/seek-bar"
+import { TimeDisplay } from "../ui/time-display"
+import { VolumeControl } from "../ui/volume-control"
+
+export interface CustomControlsExampleProps {
+	src: string
+	poster?: string
+	className?: string
+}
+
+export function CustomControlsExample({ src, poster, className }: CustomControlsExampleProps) {
+	return (
+		<MediaPlayer src={src} customControls={true} showControls={false} className={className}>
+			{({ state, controls }) => (
+				<div className="absolute inset-0 flex flex-col justify-end">
+					{/* Background gradient */}
+					<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+
+					{/* Controls container */}
+					<div className="relative z-10 space-y-3 p-4">
+						{/* Seek bar */}
+						<div className="w-full">
+							<SeekBar
+								currentTime={state.currentTime}
+								duration={state.duration}
+								onSeek={controls.seek}
+								className="w-full"
+							/>
+						</div>
+
+						{/* Bottom controls */}
+						<div className="flex items-center justify-between">
+							<div className="flex items-center gap-3">
+								<PlayButton isPlaying={state.isPlaying} onToggle={controls.toggle} size="lg" />
+								<VolumeControl
+									volume={state.volume}
+									isMuted={state.isMuted}
+									onVolumeChange={controls.setVolume}
+									onToggleMute={controls.toggleMute}
+								/>
+								<TimeDisplay currentTime={state.currentTime} duration={state.duration} />
+							</div>
+
+							<div className="flex items-center gap-2">
+								<FullscreenButton
+									isFullscreen={state.isFullscreen}
+									onToggle={controls.toggleFullscreen}
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</MediaPlayer>
+	)
+}
+
+CustomControlsExample.displayName = "CustomControlsExample"

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

@@ -0,0 +1,114 @@
+"use client"
+
+import React from "react"
+import { MediaProvider } from "../../context/media-provider"
+import { MediaPlayerRoot } from "../media-player-root"
+import { MediaPlayerVideo } from "../media-player-video"
+import {
+	EnhancedControlBar,
+	EnhancedPlayButton,
+	EnhancedSeekBar,
+	EnhancedBackwardButton,
+	EnhancedForwardButton,
+	EnhancedVolumeControl,
+	EnhancedTimeDisplay
+} from "../enhanced/enhanced-controls"
+
+export interface EnhancedControlsExampleProps {
+	src: string
+	poster?: string
+	className?: string
+}
+
+// Complete example with all enhanced controls
+export function EnhancedControlsExample({
+	src,
+	poster,
+	className
+}: EnhancedControlsExampleProps) {
+	return (
+		<MediaProvider>
+			<MediaPlayerRoot className={className}>
+				<MediaPlayerVideo src={src} poster={poster} />
+				
+				{/* Complete control bar with all features */}
+				<EnhancedControlBar 
+					className="absolute right-0 bottom-0 left-0"
+					showSkipButtons={true}
+					showVolumeControl={true}
+					showTimeDisplay={true}
+					playButtonSize="xl"
+					skipButtonSize="md"
+					skipTime={10}
+				/>
+			</MediaPlayerRoot>
+		</MediaProvider>
+	)
+}
+
+// Example with individual components for custom layouts
+export function CustomEnhancedControlsExample({
+	src,
+	poster,
+	className
+}: EnhancedControlsExampleProps) {
+	return (
+		<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 */}
+						<div className="flex items-center gap-3">
+							<EnhancedBackwardButton skipTime={15} size="md" />
+							<EnhancedPlayButton size="xl" />
+							<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" />
+							<span className="text-white/60">/</span>
+							<EnhancedTimeDisplay variant="duration" />
+						</div>
+					</div>
+				</div>
+			</MediaPlayerRoot>
+		</MediaProvider>
+	)
+}
+
+// Minimal example with just skip buttons
+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"
+						/>
+						<EnhancedPlayButton size="xl" />
+						<EnhancedForwardButton 
+							skipTime={10} 
+							size="lg"
+						/>
+					</div>
+				</div>
+			</MediaPlayerRoot>
+		</MediaProvider>
+	)
+}