@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,383 +0,0 @@
-"use client"
-
-import React from "react"
-import {
-	MediaActionTypes,
-	useMediaContext,
-	useMediaDispatch,
-	useMediaSelector
-} from "../../context/media-context"
-import { cn } from "../../lib/utils"
-
-// Utility function to compose refs
-function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
-	return (node: T) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") {
-				ref(node)
-			} else if (ref) {
-				;(ref as React.MutableRefObject<T>).current = node
-			}
-		})
-	}
-}
-
-// 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={composeRefs(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

@@ -1,50 +0,0 @@
-"use client"
-
-import React from "react"
-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 { MediaPlayerTime } from "../media-player-time"
-import { MediaPlayerVideo } from "../media-player-video"
-import { MediaPlayerVolume } from "../media-player-volume"
-
-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

@@ -1,63 +0,0 @@
-"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

@@ -1,100 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaProvider } from "../../context/media-provider"
-import {
-	EnhancedBackwardButton,
-	EnhancedControlBar,
-	EnhancedForwardButton,
-	EnhancedPlayButton,
-	EnhancedSeekBar,
-	EnhancedTimeDisplay,
-	EnhancedVolumeControl
-} from "../enhanced/enhanced-controls"
-import { MediaPlayerRoot } from "../media-player-root"
-import { MediaPlayerVideo } from "../media-player-video"
-
-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>
-	)
-}