@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,349 +0,0 @@
-"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/dist/src/components/examples/basic-video-player.d.ts

@@ -1,10 +0,0 @@
-export interface BasicVideoPlayerProps {
-    src: string;
-    poster?: string;
-    className?: string;
-}
-export declare function BasicVideoPlayer({ src, poster, className }: BasicVideoPlayerProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace BasicVideoPlayer {
-    var displayName: string;
-}
-//# sourceMappingURL=basic-video-player.d.ts.map

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

@@ -1,55 +0,0 @@
-"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/dist/src/components/examples/custom-controls-example.d.ts

@@ -1,10 +0,0 @@
-export interface CustomControlsExampleProps {
-    src: string;
-    poster?: string;
-    className?: string;
-}
-export declare function CustomControlsExample({ src, poster, className }: CustomControlsExampleProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace CustomControlsExample {
-    var displayName: string;
-}
-//# sourceMappingURL=custom-controls-example.d.ts.map

package/dist/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/dist/src/components/examples/enhanced-controls-example.d.ts

@@ -1,9 +0,0 @@
-export interface EnhancedControlsExampleProps {
-    src: string;
-    poster?: string;
-    className?: string;
-}
-export declare function EnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
-export declare function CustomEnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
-export declare function SkipButtonsOnlyExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=enhanced-controls-example.d.ts.map

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

@@ -1,114 +0,0 @@
-"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>
-	)
-}

package/dist/src/components/examples/enhanced-media-player-example.d.ts

@@ -1,9 +0,0 @@
-interface EnhancedMediaPlayerProps {
-    src: string | string[];
-    className?: string;
-    title?: string;
-    description?: string;
-}
-export declare function EnhancedMediaPlayerExample({ src, className, title, description }: EnhancedMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=enhanced-media-player-example.d.ts.map