@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -4,29 +4,25 @@ import React from "react"
 import { cn } from "../../../lib/utils"
 
 export interface MinimalLoadingProps {
-  icon?: React.FC<{ size?: number; className?: string }>
-  className?: string
+	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>
-  )
+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,315 +1,318 @@
 "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 { MinimalOverlay } from "./MinimalOverlay"
 import { MinimalLoading } from "./MinimalLoading"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-import { defaultMinimalIcons } from "../../icons"
+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
+	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,
+	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)
+	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 }
+	// Merge default icons with custom icons
+	const icons = { ...defaultMinimalIcons, ...customIcons }
 
-  // Auto-hide controls logic
-  const resetHideTimer = () => {
-      if (!autoHideControls) return
+	// Auto-hide controls logic
+	const resetHideTimer = () => {
+		if (!autoHideControls) return
 
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-      setControlsVisible(true)
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+		setControlsVisible(true)
 
-      if (!userInteracting && isPlaying) {
-        hideTimeoutRef.current = setTimeout(() => {
-          setControlsVisible(false)
-        }, hideDelay)
-      }
-    }
+		if (!userInteracting && isPlaying) {
+			hideTimeoutRef.current = setTimeout(() => {
+				setControlsVisible(false)
+			}, hideDelay)
+		}
+	}
 
-  // Handle mouse movement
-  const handleMouseMove = () => {
-      resetHideTimer()
-    }
+	// Handle mouse movement
+	const handleMouseMove = () => {
+		resetHideTimer()
+	}
 
-  // Handle mouse enter/leave
-  const handleMouseEnter = () => {
-      setIsHovered(true)
-      setControlsVisible(true)
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-    }
+	// 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)
-      }
-    }
+	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)
-      }
-    }
+	// Handle user interaction
+	const handleUserInteractionStart = () => {
+		setUserInteracting(true)
+		setControlsVisible(true)
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+	}
 
-  const handleUserInteractionEnd = () => {
-      setUserInteracting(false)
-      resetHideTimer()
-    }
+	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 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)
-    }
+	// Handle loading state
+	const handleLoadStart = () => {
+		setIsLoading(true)
+		setError(null)
+	}
 
-  const handleLoadedData = () => {
-      setIsLoading(false)
-    }
+	const handleLoadedData = () => {
+		setIsLoading(false)
+	}
 
-  // Handle errors
-  const handleError = (e: Error) => {
-      setIsLoading(false)
-      setError(e.message || "An error occurred")
-      onError?.(e)
-    }
+	// 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)
-      }
-    }
-  }, [])
+	// 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])
+	// 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"))}
-        />
+	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} />
-        )}
+				{/* 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>
-        )}
+				{/* 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>
-        )}
+				{/* 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()
-                }
-              }
-            }}
-          />
-        )}
+				{/* 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>
-  )
+				{/* 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>
+	)
 }