@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,127 +0,0 @@
-import React, { memo, useState, useRef } from "react"
-import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
-import { cn } from "../../../../lib/utils"
-
-interface SeekBarProps {
-	currentTime: number
-	duration: number
-	bufferedRanges?: BufferedRange[]
-	isSeeking?: boolean
-	onSeek: (time: number) => void
-}
-
-export const SeekBar = function SeekBar({
-	currentTime,
-	duration,
-	bufferedRanges = [],
-	isSeeking = false,
-	onSeek
-}: SeekBarProps) {
-	const [isHovering, setIsHovering] = useState(false)
-	const [hoverPosition, setHoverPosition] = useState(0)
-	const [showRipple, setShowRipple] = useState(false)
-	const [ripplePosition, setRipplePosition] = useState({ x: 0, y: 0 })
-	const seekBarRef = useRef<HTMLDivElement>(null)
-
-	const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-
-	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-		if (duration === 0) return
-
-		const rect = e.currentTarget.getBoundingClientRect()
-		const position = (e.clientX - rect.left) / rect.width
-		const newTime = Math.max(0, Math.min(duration, position * duration))
-
-		// Add ripple effect
-		setRipplePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
-		setShowRipple(true)
-		setTimeout(() => setShowRipple(false), 600)
-
-		onSeek(newTime)
-	}
-
-	const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-		if (!seekBarRef.current) return
-		const rect = seekBarRef.current.getBoundingClientRect()
-		const position = ((e.clientX - rect.left) / rect.width) * 100
-		setHoverPosition(Math.max(0, Math.min(100, position)))
-	}
-
-	const handleMouseEnter = () => setIsHovering(true)
-	const handleMouseLeave = () => setIsHovering(false)
-
-	return (
-		<div className="relative mb-3">
-			<div
-				ref={seekBarRef}
-				className={cn(
-					"minimal-seekbar group relative cursor-pointer",
-					isSeeking && "minimal-seekbar-seeking"
-				)}
-				onClick={handleClick}
-				onMouseMove={handleMouseMove}
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}>
-				{/* Buffered ranges */}
-				{bufferedRanges.map((range, index) => {
-					const startPercent = duration > 0 ? (range.start / duration) * 100 : 0
-					const widthPercent = duration > 0 ? ((range.end - range.start) / duration) * 100 : 0
-					return (
-						<div
-							key={index}
-							className="minimal-seekbar-buffered"
-							style={{
-								left: `${startPercent}%`,
-								width: `${widthPercent}%`
-							}}
-						/>
-					)
-				})}
-
-				{/* Progress bar */}
-				<div
-					className={cn(
-						"minimal-seekbar-progress",
-						isSeeking && "minimal-seekbar-progress-seeking"
-					)}
-					style={{ width: `${progress}%` }}
-				/>
-
-				{/* Hover indicator */}
-				{isHovering && !isSeeking && (
-					<div className="minimal-seekbar-hover-indicator" style={{ left: `${hoverPosition}%` }} />
-				)}
-
-				{/* Thumb */}
-				<div
-					className={cn(
-						"minimal-seekbar-thumb",
-						(isHovering || isSeeking) && "opacity-100",
-						isSeeking && "minimal-seekbar-thumb-seeking"
-					)}
-					style={{ left: `${progress}%` }}
-				/>
-
-				{/* Ripple effect */}
-				{showRipple && (
-					<div
-						className="minimal-seekbar-ripple"
-						style={{
-							left: ripplePosition.x,
-							top: ripplePosition.y
-						}}
-					/>
-				)}
-			</div>
-
-			{/* Seeking indicator */}
-			{isSeeking && (
-				<div className="-top-6 -translate-x-1/2 absolute left-1/2 transform">
-					<div className="rounded bg-black/80 px-2 py-1 text-white text-xs backdrop-blur-sm">
-						Seeking...
-					</div>
-				</div>
-			)}
-		</div>
-	)
-}

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

@@ -1,68 +0,0 @@
-import React, { memo, useCallback } from "react"
-import { cn } from "../../../../lib/utils"
-import { defaultMinimalIcons } from "../../../icons"
-
-interface SettingsDropdownProps {
-	showSettings: boolean
-	playbackRate: number
-	onToggleSettings: () => void
-	onChangePlaybackRate: (rate: number) => void
-}
-
-export const SettingsDropdown = function SettingsDropdown({
-	showSettings,
-	playbackRate,
-	onToggleSettings,
-	onChangePlaybackRate
-}: SettingsDropdownProps) {
-	const playbackRates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
-
-	const handleSettingsClick = useCallback(
-		(e: React.MouseEvent) => {
-			e.stopPropagation()
-			onToggleSettings()
-		},
-		[onToggleSettings]
-	)
-
-	const handleDropdownClick = useCallback((e: React.MouseEvent) => {
-		e.stopPropagation()
-	}, [])
-
-	return (
-		<div className="relative" style={{ zIndex: showSettings ? 60 : "auto" }}>
-			<button
-				className={cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500")}
-				onClick={handleSettingsClick}
-				aria-label="Settings">
-				{defaultMinimalIcons.settings && <defaultMinimalIcons.settings size={18} />}
-			</button>
-
-			{showSettings && (
-				<div
-					className="absolute right-0 mb-2 min-w-[200px] rounded-lg border border-gray-700 bg-gray-900 py-2 shadow-xl"
-					style={{
-						bottom: "100%",
-						zIndex: 1000
-					}}
-					onClick={handleDropdownClick}>
-					<div className="px-3 py-1 text-gray-400 text-xs uppercase tracking-wider">Speed</div>
-					<div className="px-1">
-						{playbackRates.map((rate) => (
-							<button
-								key={rate}
-								className={cn(
-									"w-full rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-gray-800",
-									"text-white",
-									playbackRate === rate && "bg-cyan-700/20 text-cyan-400"
-								)}
-								onClick={() => onChangePlaybackRate(rate)}>
-								{rate === 1 ? "Normal" : `${rate}x`}
-							</button>
-						))}
-					</div>
-				</div>
-			)}
-		</div>
-	)
-}

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

@@ -1,21 +0,0 @@
-import React, { memo } from "react"
-
-interface SubtitleDisplayProps {
-	subtitlesEnabled: boolean
-	subtitleText: string
-}
-
-export const SubtitleDisplay = function SubtitleDisplay({
-	subtitlesEnabled,
-	subtitleText
-}: SubtitleDisplayProps) {
-	if (!subtitlesEnabled || !subtitleText) return null
-
-	return (
-		<div className="pointer-events-none absolute right-0 bottom-20 left-0 px-4 text-center">
-			<div className="inline-block rounded bg-black/75 px-4 py-2 font-medium text-lg text-white">
-				{subtitleText}
-			</div>
-		</div>
-	)
-}

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

@@ -1,15 +0,0 @@
-import React, { memo } from "react"
-import { formatTime } from "../../../../lib/format-time"
-
-interface TimeDisplayProps {
-	currentTime: number
-	duration: number
-}
-
-export const TimeDisplay = function TimeDisplay({ currentTime, duration }: TimeDisplayProps) {
-	return (
-		<div className="font-mono text-sm text-white">
-			{formatTime(currentTime)} / {formatTime(duration)}
-		</div>
-	)
-}

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

@@ -1,33 +0,0 @@
-import React, { memo } from "react"
-
-interface VideoElementProps {
-	videoRef: React.RefObject<HTMLVideoElement | null>
-	src: string
-	poster?: string
-	subtitleSrc?: string
-	subtitlesEnabled: boolean
-	crossOrigin?: "anonymous" | "use-credentials"
-	onTogglePlay: () => void
-}
-
-export const VideoElement = function VideoElement({
-	videoRef,
-	src,
-	poster,
-	subtitleSrc,
-	subtitlesEnabled,
-	crossOrigin,
-	onTogglePlay
-}: VideoElementProps) {
-	return (
-		<video
-			ref={videoRef}
-			src={src}
-			poster={poster}
-			crossOrigin={crossOrigin}
-			className="h-full w-full object-contain"
-			onClick={onTogglePlay}>
-			{subtitleSrc && <track kind="subtitles" src={subtitleSrc} default={subtitlesEnabled} />}
-		</video>
-	)
-}

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

@@ -1,220 +0,0 @@
-import React, { memo, useCallback, useRef, useEffect } from "react"
-import { cn } from "../../../../lib/utils"
-import { defaultMinimalIcons } from "../../../icons"
-
-interface VolumeControlProps {
-	volume: number
-	isMuted: boolean
-	showVolumeSlider: boolean
-	onToggleMute: () => void
-	onVolumeChange: (volume: number) => void
-	onShowVolumeSlider: (show: boolean) => void
-	orientation?: "horizontal" | "vertical"
-	className?: string
-}
-
-export const VolumeControl = function VolumeControl({
-	volume,
-	isMuted,
-	showVolumeSlider,
-	onToggleMute,
-	onVolumeChange,
-	onShowVolumeSlider,
-	orientation = "horizontal",
-	className
-}: VolumeControlProps) {
-	const VolumeIcon = defaultMinimalIcons.volume
-	const VolumeMutedIcon = defaultMinimalIcons.volumeMuted
-	const sliderRefHorizontal = useRef<HTMLDivElement>(null)
-	const sliderRefVertical = useRef<HTMLDivElement>(null)
-	const isDragging = useRef(false)
-	const [isDraggingState, setIsDraggingState] = React.useState(false)
-	const [isHovering, setIsHovering] = React.useState(false)
-	const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-	const handleVolumeChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const newVolume = parseFloat(e.target.value)
-			onVolumeChange(newVolume)
-		},
-		[onVolumeChange]
-	)
-
-	const handleSliderClick = useCallback(
-		(e: React.MouseEvent<HTMLDivElement>, isVertical: boolean) => {
-			const sliderRef = isVertical ? sliderRefVertical : sliderRefHorizontal
-			if (!sliderRef.current) return
-			const rect = sliderRef.current.getBoundingClientRect()
-
-			let percentage: number
-			if (!isVertical) {
-				percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-			} else {
-				percentage = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
-			}
-
-			onVolumeChange(percentage)
-		},
-		[onVolumeChange]
-	)
-
-	const handleMouseDown = useCallback(
-		(e: React.MouseEvent<HTMLDivElement>, isVertical: boolean) => {
-			e.preventDefault()
-			e.stopPropagation()
-			isDragging.current = true
-			setIsDraggingState(true)
-			handleSliderClick(e, isVertical)
-		},
-		[handleSliderClick]
-	)
-
-	useEffect(() => {
-		const handleMouseMove = (e: MouseEvent) => {
-			if (!isDragging.current) return
-
-			const sliderRef = orientation === "vertical" ? sliderRefVertical : sliderRefHorizontal
-			if (!sliderRef.current) return
-
-			const rect = sliderRef.current.getBoundingClientRect()
-			let percentage: number
-
-			if (orientation === "horizontal") {
-				percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-			} else {
-				percentage = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
-			}
-
-			onVolumeChange(percentage)
-		}
-
-		const handleMouseUp = () => {
-			isDragging.current = false
-			setIsDraggingState(false)
-		}
-
-		if (isDraggingState) {
-			document.addEventListener("mousemove", handleMouseMove)
-			document.addEventListener("mouseup", handleMouseUp)
-
-			return () => {
-				document.removeEventListener("mousemove", handleMouseMove)
-				document.removeEventListener("mouseup", handleMouseUp)
-			}
-		}
-	}, [isDraggingState, orientation, onVolumeChange])
-
-	const handleMouseEnter = useCallback(() => {
-		if (hideTimeoutRef.current) {
-			clearTimeout(hideTimeoutRef.current)
-		}
-		setIsHovering(true)
-		onShowVolumeSlider(true)
-	}, [onShowVolumeSlider])
-
-	const handleMouseLeave = useCallback(() => {
-		// Add a small delay before hiding to prevent flickering
-		hideTimeoutRef.current = setTimeout(() => {
-			if (!isDragging.current) {
-				setIsHovering(false)
-				onShowVolumeSlider(false)
-			}
-		}, 200)
-	}, [onShowVolumeSlider])
-
-	// Clean up timeout on unmount
-	useEffect(() => {
-		return () => {
-			if (hideTimeoutRef.current) {
-				clearTimeout(hideTimeoutRef.current)
-			}
-		}
-	}, [])
-
-	const volumePercentage = (isMuted ? 0 : volume) * 100
-
-	return (
-		<div
-			className={cn(
-				"volume-control-wrapper",
-				orientation === "vertical" ? "relative" : "flex items-center gap-2",
-				className
-			)}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}>
-			{/* Volume slider for vertical orientation (appears above) */}
-			{orientation === "vertical" && (
-				<div
-					className={cn(
-						"volume-slider-vertical",
-						"-translate-x-1/2 absolute bottom-full left-1/2 mb-2",
-						"transition-all duration-300 ease-out",
-						showVolumeSlider || isHovering || isDraggingState
-							? "pointer-events-auto translate-y-0 opacity-100"
-							: "pointer-events-none translate-y-2 opacity-0"
-					)}>
-					<div className="rounded-lg bg-black/80 p-3 backdrop-blur-sm">
-						<div
-							ref={sliderRefVertical}
-							className="volume-slider-track-vertical group"
-							onMouseDown={(e) => handleMouseDown(e, true)}
-							onClick={(e) => handleSliderClick(e, true)}>
-							<div
-								className="volume-slider-fill-vertical pointer-events-none"
-								style={{ height: `${volumePercentage}%` }}
-							/>
-							<div
-								className={cn(
-									"volume-slider-thumb-vertical pointer-events-none",
-									isDraggingState && "active"
-								)}
-								style={{ bottom: `${volumePercentage}%` }}
-							/>
-						</div>
-						<div className="mt-2 text-center text-white/70 text-xs">
-							{Math.round(volumePercentage)}%
-						</div>
-					</div>
-				</div>
-			)}
-
-			{/* Volume button */}
-			<button
-				className="minimal-btn h-10 w-10"
-				onClick={onToggleMute}
-				aria-label={isMuted ? "Unmute" : "Mute"}>
-				{isMuted || volume === 0
-					? VolumeMutedIcon && <VolumeMutedIcon size={20} />
-					: VolumeIcon && <VolumeIcon size={20} />}
-			</button>
-
-			{/* Volume slider for horizontal orientation (appears beside) */}
-			{orientation === "horizontal" && (
-				<div
-					className={cn(
-						"volume-slider-horizontal-wrapper",
-						"overflow-hidden transition-all duration-300 ease-out",
-						showVolumeSlider || isHovering || isDraggingState ? "w-24 opacity-100" : "w-0 opacity-0"
-					)}>
-					<div
-						ref={sliderRefHorizontal}
-						className="volume-slider-track-horizontal group"
-						onMouseDown={(e) => handleMouseDown(e, false)}
-						onClick={(e) => handleSliderClick(e, false)}>
-						<div
-							className="volume-slider-fill-horizontal pointer-events-none"
-							style={{ width: `${volumePercentage}%` }}
-						/>
-						<div
-							className={cn(
-								"volume-slider-thumb-horizontal pointer-events-none",
-								isDraggingState && "active"
-							)}
-							style={{ left: `${volumePercentage}%` }}
-						/>
-					</div>
-				</div>
-			)}
-		</div>
-	)
-}

package/src/components/variants/minimal/index.ts

@@ -1,23 +0,0 @@
-export { MinimalMediaPlayer } from "./MinimalMediaPlayer"
-export type { MinimalMediaPlayerProps } from "./MinimalMediaPlayer"
-
-export { MinimalControls } from "./MinimalControls"
-export type { MinimalControlsProps } from "./MinimalControls"
-
-export { MinimalPlayButton } from "./MinimalPlayButton"
-export type { MinimalPlayButtonProps } from "./MinimalPlayButton"
-
-export { MinimalSeekBar } from "./MinimalSeekBar"
-export type { MinimalSeekBarProps } from "./MinimalSeekBar"
-
-export { MinimalVolumeControl } from "./MinimalVolumeControl"
-export type { MinimalVolumeControlProps } from "./MinimalVolumeControl"
-
-export { MinimalOverlay } from "./MinimalOverlay"
-export type { MinimalOverlayProps } from "./MinimalOverlay"
-
-export { MinimalLoading } from "./MinimalLoading"
-export type { MinimalLoadingProps } from "./MinimalLoading"
-
-export { SimpleMinimalPlayer } from "./SimpleMinimalPlayer"
-export type { SimpleMinimalPlayerProps } from "./SimpleMinimalPlayer"

package/src/components/video-player.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-import { forwardRef } from "react"
-import { useKeyboardControls } from "../hooks/use-keyboard-controls"
-import { useMediaPlayer } from "../hooks/use-media-player"
-import { cn } from "../lib/utils"
-import type { VideoPlayerProps } from "../types/index"
-
-export const VideoPlayer = forwardRef<HTMLDivElement, VideoPlayerProps>(
-	(
-		{
-			src,
-			poster,
-			width = "100%",
-			height = "auto",
-			aspectRatio = "16/9",
-			className,
-			children,
-			keyboardControls = true,
-			showControls = true,
-			customControls = false,
-			crossOrigin,
-			...options
-		},
-		ref
-	) => {
-		const { state, controls, mediaRef, containerRef } = useMediaPlayer({
-			src,
-			crossOrigin,
-			...options
-		})
-
-		useKeyboardControls({
-			enabled: keyboardControls,
-			state,
-			controls
-		})
-
-		const renderSources = () => {
-			if (Array.isArray(src)) {
-				return src.map((source, index) => <source key={index} src={source} />)
-			}
-			return null
-		}
-
-		const containerStyle = {
-			width,
-			height,
-			aspectRatio: height === "auto" ? aspectRatio : undefined
-		}
-
-		const videoProps = {
-			ref: mediaRef as React.RefObject<HTMLVideoElement>,
-			controls: showControls && !customControls,
-			poster,
-			className: "w-full h-full object-contain bg-black",
-			...(Array.isArray(src) ? {} : { src })
-		}
-
-		return (
-			<div
-				ref={ref || containerRef}
-				style={containerStyle}
-				className={cn("relative overflow-hidden bg-black", "focus-within:outline-none", className)}
-				tabIndex={0}>
-				<video {...videoProps}>
-					{Array.isArray(src) && renderSources()}
-					Your browser does not support the video element.
-				</video>
-
-				{state.error && (
-					<div className="absolute inset-0 flex items-center justify-center bg-black/80">
-						<div className="text-center text-white">
-							<p className="font-semibold text-lg">Error</p>
-							<p className="text-sm opacity-80">{state.error}</p>
-						</div>
-					</div>
-				)}
-
-				{state.isLoading && (
-					<div className="absolute inset-0 flex items-center justify-center bg-black/50">
-						<div className="text-white">
-							<div className="h-8 w-8 animate-spin rounded-full border-white border-b-2"></div>
-						</div>
-					</div>
-				)}
-
-				{customControls && typeof children === "function" && (
-					<div className="pointer-events-none absolute inset-0">
-						<div className="pointer-events-auto">{children({ state, controls })}</div>
-					</div>
-				)}
-
-				{customControls && typeof children !== "function" && children}
-			</div>
-		)
-	}
-)
-
-VideoPlayer.displayName = "VideoPlayer"