@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/variants/minimal/MinimalLoading.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../../../lib/utils"
-
-export interface MinimalLoadingProps {
-	icon?: React.FC<{ size?: number; className?: string }>
-	className?: string
-}
-
-export function MinimalLoading({ icon: LoadingIcon, className }: MinimalLoadingProps) {
-	return (
-		<div
-			className={cn(
-				"absolute inset-0 z-40 flex items-center justify-center",
-				"bg-black/60 backdrop-blur-sm",
-				className
-			)}>
-			<div className="text-white">
-				{LoadingIcon ? (
-					<LoadingIcon size={48} className="animate-spin" />
-				) : (
-					<div className="minimal-spinner h-12 w-12 animate-spin rounded-full border-3 border-white/20 border-t-white" />
-				)}
-			</div>
-		</div>
-	)
-}

package/src/components/variants/minimal/MinimalMediaPlayer.tsx

@@ -1,318 +0,0 @@
-"use client"
-
-import React, { useCallback, useEffect, useRef, useState } from "react"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-import { defaultMinimalIcons } from "../../icons"
-import { MediaPlayerRoot } from "../../media-player-root"
-import { MediaPlayerVideo } from "../../media-player-video"
-import { MinimalControls } from "./MinimalControls"
-import { MinimalLoading } from "./MinimalLoading"
-import { MinimalOverlay } from "./MinimalOverlay"
-
-export interface MinimalMediaPlayerProps {
-	src: string | string[]
-	poster?: string
-	autoPlay?: boolean
-	muted?: boolean
-	loop?: boolean
-	autoHideControls?: boolean
-	hideDelay?: number
-	theme?: "dark" | "light" | "transparent"
-	customIcons?: IconSet
-	showCenterPlayButton?: boolean
-	showLoadingSpinner?: boolean
-	className?: string
-	onPlay?: () => void
-	onPause?: () => void
-	onEnded?: () => void
-	onTimeUpdate?: (currentTime: number) => void
-	onVolumeChange?: (volume: number) => void
-	onSeek?: (time: number) => void
-	onError?: (error: Error) => void
-	watermark?: {
-		src: string
-		position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-		opacity?: number
-		size?: "small" | "medium" | "large"
-	}
-	qualities?: Array<{
-		src: string
-		quality: string
-		default?: boolean
-	}>
-	showQualitySelector?: boolean
-	showSpeedControl?: boolean
-	thumbnails?: string
-}
-
-export function MinimalMediaPlayer({
-	src,
-	poster,
-	autoPlay = false,
-	muted = false,
-	loop = false,
-	autoHideControls = true,
-	hideDelay = 2500,
-	theme = "dark",
-	customIcons,
-	showCenterPlayButton = true,
-	showLoadingSpinner = true,
-	className,
-	onPlay,
-	onPause,
-	onEnded,
-	onTimeUpdate,
-	onVolumeChange,
-	onSeek,
-	onError,
-	watermark,
-	qualities,
-	showQualitySelector = false,
-	showSpeedControl = false,
-	thumbnails
-}: MinimalMediaPlayerProps) {
-	const [controlsVisible, setControlsVisible] = useState(true)
-	const [isPlaying, setIsPlaying] = useState(false)
-	const [isLoading, setIsLoading] = useState(false)
-	const [error, setError] = useState<string | null>(null)
-	const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-	const containerRef = useRef<HTMLDivElement | null>(null)
-	const [isHovered, setIsHovered] = useState(false)
-	const [userInteracting, setUserInteracting] = useState(false)
-
-	// Merge default icons with custom icons
-	const icons = { ...defaultMinimalIcons, ...customIcons }
-
-	// Auto-hide controls logic
-	const resetHideTimer = () => {
-		if (!autoHideControls) return
-
-		if (hideTimeoutRef.current) {
-			clearTimeout(hideTimeoutRef.current)
-		}
-		setControlsVisible(true)
-
-		if (!userInteracting && isPlaying) {
-			hideTimeoutRef.current = setTimeout(() => {
-				setControlsVisible(false)
-			}, hideDelay)
-		}
-	}
-
-	// Handle mouse movement
-	const handleMouseMove = () => {
-		resetHideTimer()
-	}
-
-	// Handle mouse enter/leave
-	const handleMouseEnter = () => {
-		setIsHovered(true)
-		setControlsVisible(true)
-		if (hideTimeoutRef.current) {
-			clearTimeout(hideTimeoutRef.current)
-		}
-	}
-
-	const handleMouseLeave = () => {
-		setIsHovered(false)
-		if (isPlaying && autoHideControls && !userInteracting) {
-			hideTimeoutRef.current = setTimeout(() => {
-				setControlsVisible(false)
-			}, 500)
-		}
-	}
-
-	// Handle user interaction
-	const handleUserInteractionStart = () => {
-		setUserInteracting(true)
-		setControlsVisible(true)
-		if (hideTimeoutRef.current) {
-			clearTimeout(hideTimeoutRef.current)
-		}
-	}
-
-	const handleUserInteractionEnd = () => {
-		setUserInteracting(false)
-		resetHideTimer()
-	}
-
-	// Handle play state changes
-	const handlePlayStateChange = (playing: boolean) => {
-		setIsPlaying(playing)
-		if (playing) {
-			onPlay?.()
-			resetHideTimer()
-		} else {
-			onPause?.()
-			setControlsVisible(true)
-			if (hideTimeoutRef.current) {
-				clearTimeout(hideTimeoutRef.current)
-			}
-		}
-	}
-
-	// Handle loading state
-	const handleLoadStart = () => {
-		setIsLoading(true)
-		setError(null)
-	}
-
-	const handleLoadedData = () => {
-		setIsLoading(false)
-	}
-
-	// Handle errors
-	const handleError = (e: Error) => {
-		setIsLoading(false)
-		setError(e.message || "An error occurred")
-		onError?.(e)
-	}
-
-	// Cleanup on unmount
-	useEffect(() => {
-		return () => {
-			if (hideTimeoutRef.current) {
-				clearTimeout(hideTimeoutRef.current)
-			}
-		}
-	}, [])
-
-	// Determine video source
-	const videoSrc =
-		qualities && qualities.length > 0
-			? qualities.find((q) => q.default)?.src ||
-				qualities[0]?.src ||
-				(typeof src === "string" ? src : src[0])
-			: typeof src === "string"
-				? src
-				: src[0]
-
-	return (
-		<div
-			ref={containerRef}
-			className={cn(
-				"minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black",
-				`theme-minimal-${theme}`,
-				className
-			)}
-			data-theme={theme}
-			onMouseMove={handleMouseMove}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}>
-			<MediaPlayerRoot
-				className="relative h-full w-full"
-				autoHide={false}
-				enableGestures={true}
-				enableMobileOptimizations={true}>
-				{/* Video Element */}
-				<MediaPlayerVideo
-					src={videoSrc}
-					poster={poster}
-					autoPlay={autoPlay}
-					muted={muted}
-					loop={loop}
-					playsInline
-					crossOrigin="anonymous"
-					onPlay={() => handlePlayStateChange(true)}
-					onPause={() => handlePlayStateChange(false)}
-					onEnded={onEnded}
-					onTimeUpdate={(e) => {
-						const video = e.currentTarget as HTMLVideoElement
-						onTimeUpdate?.(video.currentTime)
-					}}
-					onVolumeChange={(e) => {
-						const video = e.currentTarget as HTMLVideoElement
-						onVolumeChange?.(video.volume)
-					}}
-					onLoadStart={handleLoadStart}
-					onLoadedData={handleLoadedData}
-					onError={(e) => handleError(new Error("Failed to load video"))}
-				/>
-
-				{/* Loading State */}
-				{showLoadingSpinner && isLoading && <MinimalLoading icon={icons.spinner} />}
-
-				{/* Error State */}
-				{error && (
-					<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80">
-						<div className="text-center">
-							<div className="mb-4 text-red-500">
-								<svg
-									className="mx-auto h-12 w-12"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor">
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-									/>
-								</svg>
-							</div>
-							<p className="mb-2 text-lg text-white">Playback Error</p>
-							<p className="text-gray-400 text-sm">{error}</p>
-						</div>
-					</div>
-				)}
-
-				{/* Watermark */}
-				{watermark && (
-					<div
-						className={cn("pointer-events-none absolute z-20", {
-							"top-4 left-4": watermark.position === "top-left",
-							"top-4 right-4": watermark.position === "top-right",
-							"bottom-16 left-4": watermark.position === "bottom-left",
-							"right-4 bottom-16": watermark.position === "bottom-right"
-						})}
-						style={{ opacity: watermark.opacity || 0.7 }}>
-						<img
-							src={watermark.src}
-							alt=""
-							className={cn("object-contain", {
-								"h-8": watermark.size === "small",
-								"h-12": watermark.size === "medium" || !watermark.size,
-								"h-16": watermark.size === "large"
-							})}
-						/>
-					</div>
-				)}
-
-				{/* Center Play Button */}
-				{showCenterPlayButton && !isPlaying && !isLoading && (
-					<MinimalOverlay
-						visible={true}
-						showCenterButton={true}
-						isPlaying={isPlaying}
-						icons={icons}
-						onPlayPause={() => {
-							const video = containerRef.current?.querySelector("video")
-							if (video) {
-								if (isPlaying) {
-									video.pause()
-								} else {
-									video.play()
-								}
-							}
-						}}
-					/>
-				)}
-
-				{/* Controls */}
-				<MinimalControls
-					visible={controlsVisible || !isPlaying || isHovered}
-					icons={icons}
-					isPlaying={isPlaying}
-					showQualitySelector={showQualitySelector}
-					showSpeedControl={showSpeedControl}
-					qualities={qualities}
-					thumbnails={thumbnails}
-					onUserInteractionStart={handleUserInteractionStart}
-					onUserInteractionEnd={handleUserInteractionEnd}
-					onSeek={onSeek}
-				/>
-			</MediaPlayerRoot>
-		</div>
-	)
-}

package/src/components/variants/minimal/MinimalOverlay.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import React from "react"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-
-export interface MinimalOverlayProps {
-	visible: boolean
-	showCenterButton?: boolean
-	isPlaying?: boolean
-	icons: IconSet
-	onPlayPause?: () => void
-	className?: string
-}
-
-export function MinimalOverlay({
-	visible,
-	showCenterButton = false,
-	isPlaying = false,
-	icons,
-	onPlayPause,
-	className
-}: MinimalOverlayProps) {
-	if (!visible || !showCenterButton) return null
-
-	const PlayIcon = icons.play
-	const PauseIcon = icons.pause
-
-	if (!PlayIcon || !PauseIcon) return null
-
-	return (
-		<div
-			className={cn(
-				"absolute inset-0 z-30 flex items-center justify-center",
-				"bg-black/20 transition-opacity duration-200",
-				className
-			)}
-			onClick={onPlayPause}>
-			<button
-				className={cn(
-					"minimal-center-play",
-					"h-20 w-20 rounded-full",
-					"flex items-center justify-center",
-					"text-white",
-					"transition-all duration-200",
-					"hover:scale-110",
-					"active:scale-95"
-				)}
-				onClick={(e) => {
-					e.stopPropagation()
-					onPlayPause?.()
-				}}
-				aria-label={isPlaying ? "Pause" : "Play"}>
-				{isPlaying ? <PauseIcon size={48} /> : <PlayIcon size={48} className="ml-1" />}
-			</button>
-		</div>
-	)
-}

package/src/components/variants/minimal/MinimalPlayButton.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaActionTypes, useMediaContext, useMediaDispatch } from "../../../context/media-context"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-
-export interface MinimalPlayButtonProps {
-	isPlaying: boolean
-	icons: IconSet
-	size?: "sm" | "md" | "lg" | "xl"
-	className?: string
-}
-
-export function MinimalPlayButton({
-	isPlaying,
-	icons,
-	size = "md",
-	className
-}: MinimalPlayButtonProps) {
-	const dispatch = useMediaDispatch()
-
-	const handleClick = () => {
-		dispatch({
-			type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-		})
-	}
-
-	const sizeClasses = {
-		sm: "h-10 w-10",
-		md: "h-12 w-12 minimal-btn",
-		lg: "h-16 w-16 minimal-btn-lg",
-		xl: "h-20 w-20 minimal-btn-lg"
-	}
-
-	const iconSizes = {
-		sm: 27,
-		md: 30,
-		lg: 36,
-		xl: 42
-	}
-
-	const PlayIcon = icons.play
-	const PauseIcon = icons.pause
-
-	if (!PlayIcon || !PauseIcon) return null
-
-	return (
-		<button
-			className={cn("minimal-btn", sizeClasses[size], className)}
-			onClick={handleClick}
-			aria-label={isPlaying ? "Pause" : "Play"}>
-			{isPlaying ? <PauseIcon size={iconSizes[size]} /> : <PlayIcon size={iconSizes[size]} />}
-		</button>
-	)
-}

package/src/components/variants/minimal/MinimalSeekBar.tsx

@@ -1,140 +0,0 @@
-"use client"
-
-import React, { useRef, useState } from "react"
-import {
-	MediaActionTypes,
-	useMediaDispatch,
-	useMediaSelector
-} from "../../../context/media-context"
-import { formatTime } from "../../../lib/format-time"
-import { cn } from "../../../lib/utils"
-
-export interface MinimalSeekBarProps {
-	thumbnails?: string
-	onSeek?: (time: number) => void
-	className?: string
-}
-
-export function MinimalSeekBar({ thumbnails, onSeek, className }: MinimalSeekBarProps) {
-	const dispatch = useMediaDispatch()
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const duration = useMediaSelector((state) => state.duration)
-	const buffered = useMediaSelector((state) => state.buffered)
-
-	const [isDragging, setIsDragging] = useState(false)
-	const [hoverTime, setHoverTime] = useState(0)
-	const [hoverPosition, setHoverPosition] = useState(0)
-	const seekBarRef = useRef<HTMLDivElement>(null)
-
-	const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-	const bufferedProgress =
-		buffered && buffered.length > 0 && duration > 0
-			? (buffered.end(buffered.length - 1) / duration) * 100
-			: 0
-
-	const handleSeek = (clientX: number) => {
-		if (!seekBarRef.current || duration === 0) return
-
-		const rect = seekBarRef.current.getBoundingClientRect()
-		const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
-		const newTime = position * duration
-
-		dispatch({
-			type: MediaActionTypes.SEEK,
-			detail: newTime
-		})
-
-		onSeek?.(newTime)
-	}
-
-	const handleMouseDown = (e: React.MouseEvent) => {
-		e.preventDefault()
-		setIsDragging(true)
-		handleSeek(e.clientX)
-	}
-
-	const handleMouseMove = (e: React.MouseEvent) => {
-		if (!seekBarRef.current || duration === 0) return
-
-		const rect = seekBarRef.current.getBoundingClientRect()
-		const position = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-		const time = position * duration
-
-		setHoverTime(time)
-		setHoverPosition(e.clientX - rect.left)
-
-		if (isDragging) {
-			handleSeek(e.clientX)
-		}
-	}
-
-	const handleMouseUp = () => {
-		setIsDragging(false)
-	}
-
-	const handleMouseLeave = () => {
-		setIsDragging(false)
-		setHoverTime(0)
-	}
-
-	React.useEffect(() => {
-		if (isDragging) {
-			const handleGlobalMouseMove = (e: MouseEvent) => {
-				handleSeek(e.clientX)
-			}
-
-			const handleGlobalMouseUp = () => {
-				setIsDragging(false)
-			}
-
-			document.addEventListener("mousemove", handleGlobalMouseMove)
-			document.addEventListener("mouseup", handleGlobalMouseUp)
-
-			return () => {
-				document.removeEventListener("mousemove", handleGlobalMouseMove)
-				document.removeEventListener("mouseup", handleGlobalMouseUp)
-			}
-		}
-	}, [isDragging])
-
-	return (
-		<div className={cn("group relative", className)}>
-			{/* Preview Tooltip */}
-			{hoverTime > 0 && (
-				<div
-					className="pointer-events-none absolute bottom-full z-50 mb-2"
-					style={{ left: `${hoverPosition}px`, transform: "translateX(-50%)" }}>
-					{thumbnails && (
-						<div className="mb-1 rounded bg-black/90 p-1">
-							<div className="h-18 w-32 rounded bg-gray-800" />
-						</div>
-					)}
-					<div className="whitespace-nowrap rounded bg-black/90 px-2 py-1 text-white text-xs">
-						{formatTime(hoverTime)}
-					</div>
-				</div>
-			)}
-
-			{/* Seek Bar */}
-			<div
-				ref={seekBarRef}
-				className="minimal-seekbar"
-				onMouseDown={handleMouseDown}
-				onMouseMove={handleMouseMove}
-				onMouseUp={handleMouseUp}
-				onMouseLeave={handleMouseLeave}>
-				{/* Buffered Progress */}
-				<div className="minimal-seekbar-buffered" style={{ width: `${bufferedProgress}%` }} />
-
-				{/* Progress */}
-				<div className="minimal-seekbar-progress" style={{ width: `${progress}%` }} />
-
-				{/* Thumb */}
-				<div
-					className={cn("minimal-seekbar-thumb", isDragging && "active")}
-					style={{ left: `${progress}%` }}
-				/>
-			</div>
-		</div>
-	)
-}

package/src/components/variants/minimal/MinimalVolumeControl.tsx

@@ -1,75 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import {
-	MediaActionTypes,
-	useMediaDispatch,
-	useMediaSelector
-} from "../../../context/media-context"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-
-export interface MinimalVolumeControlProps {
-	icons: IconSet
-	className?: string
-}
-
-export function MinimalVolumeControl({ icons, className }: MinimalVolumeControlProps) {
-	const dispatch = useMediaDispatch()
-	const volume = useMediaSelector((state) => state.volume)
-	const isMuted = useMediaSelector((state) => state.isMuted)
-	const [isExpanded, setIsExpanded] = useState(false)
-
-	const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const newVolume = parseFloat(e.target.value)
-		dispatch({
-			type: MediaActionTypes.SET_VOLUME,
-			detail: newVolume
-		})
-	}
-
-	const handleMuteToggle = () => {
-		dispatch({
-			type: MediaActionTypes.TOGGLE_MUTE
-		})
-	}
-
-	const VolumeIcon = isMuted || volume === 0 ? icons.volumeMuted : icons.volume
-
-	if (!VolumeIcon) return null
-
-	return (
-		<div
-			className={cn("minimal-volume-group flex items-center gap-2", className)}
-			onMouseEnter={() => setIsExpanded(true)}
-			onMouseLeave={() => setIsExpanded(false)}>
-			{/* Volume Button */}
-			<button
-				className="minimal-btn inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-white transition-all duration-150 hover:border-white/30 hover:bg-white/20"
-				onClick={handleMuteToggle}
-				aria-label={isMuted ? "Unmute" : "Mute"}>
-				<VolumeIcon size={18} />
-			</button>
-
-			{/* Volume Slider */}
-			<div
-				className={cn(
-					"overflow-hidden transition-all duration-250",
-					isExpanded ? "w-20 opacity-100" : "w-0 opacity-0"
-				)}>
-				<input
-					type="range"
-					min="0"
-					max="1"
-					step="0.01"
-					value={isMuted ? 0 : volume}
-					onChange={handleVolumeChange}
-					className="minimal-volume-slider h-1 w-full cursor-pointer appearance-none rounded-full bg-white/20"
-					style={{
-						background: `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) ${(isMuted ? 0 : volume) * 100}%, rgba(255,255,255,0.2) 100%)`
-					}}
-				/>
-			</div>
-		</div>
-	)
-}