@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,131 +0,0 @@
-import React, { memo, useState, useRef } from "react"
-import { cn } from "../../../../lib/utils"
-import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
-
-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/dist/src/components/variants/minimal/components/SettingsDropdown.d.ts

@@ -1,9 +0,0 @@
-interface SettingsDropdownProps {
-    showSettings: boolean;
-    playbackRate: number;
-    onToggleSettings: () => void;
-    onChangePlaybackRate: (rate: number) => void;
-}
-export declare const SettingsDropdown: ({ showSettings, playbackRate, onToggleSettings, onChangePlaybackRate }: SettingsDropdownProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=SettingsDropdown.d.ts.map

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

@@ -1,70 +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/dist/src/components/variants/minimal/components/SubtitleDisplay.d.ts

@@ -1,7 +0,0 @@
-interface SubtitleDisplayProps {
-    subtitlesEnabled: boolean;
-    subtitleText: string;
-}
-export declare const SubtitleDisplay: ({ subtitlesEnabled, subtitleText }: SubtitleDisplayProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=SubtitleDisplay.d.ts.map

package/dist/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/dist/src/components/variants/minimal/components/TimeDisplay.d.ts

@@ -1,7 +0,0 @@
-interface TimeDisplayProps {
-    currentTime: number;
-    duration: number;
-}
-export declare const TimeDisplay: ({ currentTime, duration }: TimeDisplayProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=TimeDisplay.d.ts.map

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

@@ -1,18 +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/dist/src/components/variants/minimal/components/VideoElement.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-interface VideoElementProps {
-    videoRef: React.RefObject<HTMLVideoElement | null>;
-    src: string;
-    poster?: string;
-    subtitleSrc?: string;
-    subtitlesEnabled: boolean;
-    crossOrigin?: "anonymous" | "use-credentials";
-    onTogglePlay: () => void;
-}
-export declare const VideoElement: ({ videoRef, src, poster, subtitleSrc, subtitlesEnabled, crossOrigin, onTogglePlay }: VideoElementProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=VideoElement.d.ts.map

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

@@ -1,40 +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/dist/src/components/variants/minimal/components/VolumeControl.d.ts

@@ -1,13 +0,0 @@
-interface VolumeControlProps {
-    volume: number;
-    isMuted: boolean;
-    showVolumeSlider: boolean;
-    onToggleMute: () => void;
-    onVolumeChange: (volume: number) => void;
-    onShowVolumeSlider: (show: boolean) => void;
-    orientation?: "horizontal" | "vertical";
-    className?: string;
-}
-export declare const VolumeControl: ({ volume, isMuted, showVolumeSlider, onToggleMute, onVolumeChange, onShowVolumeSlider, orientation, className }: VolumeControlProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=VolumeControl.d.ts.map

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

@@ -1,217 +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/dist/src/components/variants/minimal/index.d.ts

@@ -1,17 +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";
-//# sourceMappingURL=index.d.ts.map

package/dist/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/dist/src/components/video-player.d.ts

@@ -1,3 +0,0 @@
-import type { VideoPlayerProps } from "../types/index";
-export declare const VideoPlayer: import("react").ForwardRefExoticComponent<VideoPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=video-player.d.ts.map