@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/react-player-wrapper.tsx

@@ -1,651 +0,0 @@
-"use client"
-
-import "../styles/pixel-art.css"
-import { Button } from "@rp/ui"
-import {
-	DownloadIcon,
-	ExitFullscreenIcon,
-	Forward10Icon,
-	FullscreenIcon,
-	LoadingIcon,
-	MuteIcon,
-	PauseIcon,
-	PictureInPictureIcon,
-	PlayIcon,
-	QualityIcon,
-	Rewind10Icon,
-	SettingsIcon,
-	ShareIcon,
-	SkipBackwardIcon,
-	SkipForwardIcon,
-	SpeedIcon,
-	SubtitlesIcon,
-	VolumeIcon
-} from "@rp/ui"
-import { Slider } from "@rp/ui"
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger
-} from "@rp/ui"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@rp/ui"
-import React, { useState, useRef, useEffect, useCallback, Suspense, lazy } from "react"
-// Dynamic import for lazy loading
-const ReactPlayer = lazy(() => import("react-player"))
-import { cn } from "../lib/utils"
-
-// Minimal ref handle for the methods we call on the underlying player
-interface PlayerHandle {
-	seekTo: (amount: number, type?: "seconds" | "fraction") => void
-}
-
-interface QualityOption {
-	label: string
-	value: string
-}
-
-interface SubtitleTrack {
-	label: string
-	value: string
-	src: string
-}
-
-interface ProgressState {
-	playedSeconds: number
-	loaded: number
-}
-
-export interface ModernMediaPlayerProps {
-	className?: string
-	containerClassName?: string
-	url?: string | string[]
-	playing?: boolean
-	volume?: number
-	muted?: boolean
-	controls?: boolean
-	light?: boolean | string
-	loop?: boolean
-	playbackRate?: number
-	width?: string | number
-	height?: string | number
-	style?: React.CSSProperties
-	progressInterval?: number
-	playsinline?: boolean
-	pip?: boolean
-	stopOnUnmount?: boolean
-	fallback?: React.ReactNode
-	wrapper?: unknown
-	config?: unknown
-	showDownload?: boolean
-	showShare?: boolean
-	showSubtitles?: boolean
-	showQuality?: boolean
-	onDownload?: () => void
-	onShare?: () => void
-	qualityOptions?: QualityOption[]
-	subtitleTracks?: SubtitleTrack[]
-	onReady?: () => void
-	onStart?: () => void
-	onPlay?: () => void
-	onProgress?: (state: ProgressState) => void
-	onDuration?: (duration: number) => void
-	onPause?: () => void
-	onBuffer?: () => void
-	onBufferEnd?: () => void
-	onSeek?: (seconds: number) => void
-	onPlaybackRateChange?: (rate: number) => void
-	onEnded?: () => void
-	onError?: (error: unknown) => void
-	onClickPreview?: () => void
-	onEnablePIP?: () => void
-	onDisablePIP?: () => void
-	[key: string]: unknown
-}
-
-export function ModernMediaPlayer({
-	className,
-	containerClassName,
-	url,
-	playing = false,
-	volume = 1,
-	muted = false,
-	controls = false,
-	light = false,
-	loop = false,
-	playbackRate = 1,
-	width = "100%",
-	height = "100%",
-	style,
-	progressInterval = 1000,
-	playsinline = true,
-	pip = false,
-	stopOnUnmount = true,
-	fallback = <LoadingIcon className="size-12 text-white" />,
-	wrapper = "div",
-	config,
-	showDownload = false,
-	showShare = false,
-	showSubtitles = false,
-	showQuality = false,
-	onDownload,
-	onShare,
-	qualityOptions = [
-		{ label: "1080p", value: "1080" },
-		{ label: "720p", value: "720" },
-		{ label: "480p", value: "480" },
-		{ label: "360p", value: "360" }
-	],
-	subtitleTracks = [],
-	onReady,
-	onStart,
-	onPlay,
-	onProgress,
-	onDuration,
-	onPause,
-	onBuffer,
-	onBufferEnd,
-	onSeek,
-	onPlaybackRateChange,
-	onEnded,
-	onError,
-	onClickPreview,
-	onEnablePIP,
-	onDisablePIP,
-	...props
-}: ModernMediaPlayerProps) {
-	const [isPlaying, setIsPlaying] = useState(playing)
-	const [currentVolume, setCurrentVolume] = useState(volume)
-	const [isMuted, setIsMuted] = useState(muted)
-	const [duration, setDuration] = useState(0)
-	const [currentTime, setCurrentTime] = useState(0)
-	const [buffered, setBuffered] = useState(0)
-	const [isFullscreen, setIsFullscreen] = useState(false)
-	const [isPiP, setIsPiP] = useState(pip)
-	const [currentRate, setCurrentRate] = useState(playbackRate)
-	const [showControls, setShowControls] = useState(true)
-	const [isLoading, setIsLoading] = useState(true)
-	const [selectedQuality, setSelectedQuality] = useState(qualityOptions[0]?.value || "720")
-	const [selectedSubtitle, setSelectedSubtitle] = useState<string | null>(null)
-
-	const playerRef = useRef<PlayerHandle | null>(null)
-	const containerRef = useRef<HTMLDivElement>(null)
-	const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-	// Format time helper
-	const formatTime = (seconds: number) => {
-		const date = new Date(seconds * 1000)
-		const hh = date.getUTCHours()
-		const mm = date.getUTCMinutes()
-		const ss = date.getUTCSeconds().toString().padStart(2, "0")
-		if (hh) {
-			return `${hh}:${mm.toString().padStart(2, "0")}:${ss}`
-		}
-		return `${mm}:${ss}`
-	}
-
-	// Handle mouse movement for auto-hiding controls
-	const handleMouseMove = () => {
-		setShowControls(true)
-		if (controlsTimeoutRef.current) {
-			clearTimeout(controlsTimeoutRef.current)
-		}
-		if (isPlaying) {
-			controlsTimeoutRef.current = setTimeout(() => {
-				setShowControls(false)
-			}, 3000)
-		}
-	}
-
-	useEffect(() => {
-		return () => {
-			if (controlsTimeoutRef.current) {
-				clearTimeout(controlsTimeoutRef.current)
-			}
-		}
-	}, [])
-
-	// Fullscreen handling
-	const toggleFullscreen = () => {
-		if (!document.fullscreenElement) {
-			containerRef.current?.requestFullscreen()
-			setIsFullscreen(true)
-		} else {
-			document.exitFullscreen()
-			setIsFullscreen(false)
-		}
-	}
-
-	// Keyboard shortcuts
-	useEffect(() => {
-		const handleKeyPress = (e: KeyboardEvent) => {
-			if (!containerRef.current?.contains(document.activeElement)) return
-
-			switch (e.key.toLowerCase()) {
-				case " ":
-				case "k":
-					e.preventDefault()
-					setIsPlaying(!isPlaying)
-					break
-				case "f":
-					e.preventDefault()
-					toggleFullscreen()
-					break
-				case "m":
-					e.preventDefault()
-					setIsMuted(!isMuted)
-					break
-				case "arrowleft":
-					e.preventDefault()
-					playerRef.current?.seekTo(currentTime - 10)
-					break
-				case "arrowright":
-					e.preventDefault()
-					playerRef.current?.seekTo(currentTime + 10)
-					break
-				case "arrowup":
-					e.preventDefault()
-					setCurrentVolume(Math.min(1, currentVolume + 0.1))
-					break
-				case "arrowdown":
-					e.preventDefault()
-					setCurrentVolume(Math.max(0, currentVolume - 0.1))
-					break
-			}
-		}
-
-		window.addEventListener("keydown", handleKeyPress)
-		return () => window.removeEventListener("keydown", handleKeyPress)
-	}, [isPlaying, isMuted, currentTime, currentVolume, toggleFullscreen])
-
-	const playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2]
-
-	return (
-		<TooltipProvider>
-			<div
-				ref={containerRef}
-				className={cn(
-					"relative overflow-hidden rounded-lg bg-black",
-					"focus-within:outline-none",
-					containerClassName
-				)}
-				onMouseMove={handleMouseMove}
-				onMouseLeave={() => isPlaying && setShowControls(false)}
-				tabIndex={0}>
-				{/* React Player */}
-				<Suspense fallback={fallback}>
-					<ReactPlayer
-						ref={playerRef as unknown as React.Ref<any>}
-						url={url}
-						playing={isPlaying}
-						volume={isMuted ? 0 : currentVolume}
-						muted={isMuted}
-						controls={false}
-						light={light}
-						loop={loop}
-						playbackRate={currentRate}
-						width={width}
-						height={height}
-						style={{ ...style, aspectRatio: "16/9" }}
-						progressInterval={progressInterval}
-						playsinline={playsinline}
-						pip={isPiP}
-						stopOnUnmount={stopOnUnmount}
-						fallback={fallback}
-						wrapper={wrapper as any}
-						config={config as any}
-						className={cn("aspect-video", className)}
-						onReady={() => {
-							setIsLoading(false)
-							onReady?.()
-						}}
-						onStart={() => {
-							setIsLoading(false)
-							onStart?.()
-						}}
-						onPlay={() => {
-							setIsPlaying(true)
-							onPlay?.()
-						}}
-						onPause={() => {
-							setIsPlaying(false)
-							onPause?.()
-						}}
-						{...({
-							onProgress: (state: ProgressState) => {
-								setCurrentTime(state.playedSeconds)
-								setBuffered(state.loaded)
-								onProgress?.(state)
-							}
-						} as any)}
-						onDuration={(dur: number) => {
-							setDuration(dur)
-							onDuration?.(dur)
-						}}
-						onBuffer={() => {
-							setIsLoading(true)
-							onBuffer?.()
-						}}
-						onBufferEnd={() => {
-							setIsLoading(false)
-							onBufferEnd?.()
-						}}
-						onSeek={onSeek}
-						onPlaybackRateChange={(rate: number) => {
-							setCurrentRate(rate)
-							onPlaybackRateChange?.(rate)
-						}}
-						onEnded={onEnded}
-						onError={onError as any}
-						onClickPreview={onClickPreview}
-						onEnablePIP={() => {
-							setIsPiP(true)
-							onEnablePIP?.()
-						}}
-						onDisablePIP={() => {
-							setIsPiP(false)
-							onDisablePIP?.()
-						}}
-						{...props}
-					/>
-				</Suspense>
-
-				{/* Loading indicator */}
-				{isLoading && (
-					<div className="absolute inset-0 flex items-center justify-center bg-black/50">
-						<LoadingIcon className="size-12 text-white" />
-					</div>
-				)}
-
-				{/* Controls overlay */}
-				<div
-					className={cn(
-						"absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20",
-						"transition-opacity duration-300",
-						showControls ? "opacity-100" : "pointer-events-none opacity-0"
-					)}>
-					{/* Top controls */}
-					<div className="absolute top-0 right-0 left-0 flex items-center justify-between p-4">
-						<h3 className="font-medium text-lg text-white">Media Player</h3>
-						<div className="flex items-center gap-2">
-							{showShare && (
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={onShare}>
-											<ShareIcon className="size-5" />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Share</TooltipContent>
-								</Tooltip>
-							)}
-							{showDownload && (
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={onDownload}>
-											<DownloadIcon className="size-5" />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Download</TooltipContent>
-								</Tooltip>
-							)}
-						</div>
-					</div>
-
-					{/* Center play button */}
-					<div className="absolute inset-0 flex items-center justify-center">
-						<Button
-							variant="ghost"
-							size="icon"
-							className="pixel-button size-20 rounded-none border-2 border-gray-600 bg-gray-800/90 text-white shadow-xl transition-all duration-200 hover:scale-105 hover:border-gray-500 hover:bg-gray-700/90 active:scale-95"
-							onClick={() => setIsPlaying(!isPlaying)}>
-							{isPlaying ? <PauseIcon className="size-10" /> : <PlayIcon className="size-10" />}
-						</Button>
-					</div>
-
-					{/* Bottom controls */}
-					<div className="absolute right-0 bottom-0 left-0 space-y-2 p-4">
-						{/* Progress bar */}
-						<div className="relative">
-							<Slider
-								value={[currentTime]}
-								max={duration}
-								step={1}
-								onValueChange={([value]) => {
-									if (typeof value !== "number") return
-									playerRef.current?.seekTo(value)
-								}}
-								className="pixel-progress cursor-pointer [&>span]:rounded-none [&>span]:border [&>span]:border-gray-600 [&>span]:bg-gray-800 [&>span]:shadow-lg [&_[role=slider]]:size-4 [&_[role=slider]]:rounded-none [&_[role=slider]]:border-2 [&_[role=slider]]:border-gray-400 [&_[role=slider]]:bg-white [&_[role=slider]]:shadow-md"
-							/>
-							{/* Buffered progress */}
-							<div
-								className="pointer-events-none absolute top-0 left-0 h-full rounded-none border border-gray-500/30 bg-white/20"
-								style={{ width: `${buffered * 100}%` }}
-							/>
-						</div>
-
-						{/* Control buttons */}
-						<div className="flex items-center justify-between">
-							<div className="flex items-center gap-2">
-								{/* Play/Pause */}
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={() => setIsPlaying(!isPlaying)}>
-											{isPlaying ? (
-												<PauseIcon className="size-6" />
-											) : (
-												<PlayIcon className="size-6" />
-											)}
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>{isPlaying ? "Pause (k)" : "Play (k)"}</TooltipContent>
-								</Tooltip>
-
-								{/* Skip buttons */}
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={() => playerRef.current?.seekTo(currentTime - 10)}>
-											<Rewind10Icon className="size-6" />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Back 10s (←)</TooltipContent>
-								</Tooltip>
-
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={() => playerRef.current?.seekTo(currentTime + 10)}>
-											<Forward10Icon className="size-6" />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Forward 10s (→)</TooltipContent>
-								</Tooltip>
-
-								{/* Volume */}
-								<div className="flex items-center gap-2">
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-												onClick={() => setIsMuted(!isMuted)}>
-												{isMuted || currentVolume === 0 ? (
-													<MuteIcon className="size-6" />
-												) : (
-													<VolumeIcon className="size-6" />
-												)}
-											</Button>
-										</TooltipTrigger>
-										<TooltipContent>{isMuted ? "Unmute (m)" : "Mute (m)"}</TooltipContent>
-									</Tooltip>
-									<Slider
-										value={[isMuted ? 0 : currentVolume]}
-										max={1}
-										step={0.05}
-										onValueChange={([value]) => {
-											if (typeof value !== "number") return
-											setCurrentVolume(value)
-											setIsMuted(value === 0)
-										}}
-										className="pixel-progress w-20 cursor-pointer [&>span]:rounded-none [&>span]:border [&>span]:border-gray-600 [&>span]:bg-gray-800 [&>span]:shadow-lg [&_[role=slider]]:size-3 [&_[role=slider]]:rounded-none [&_[role=slider]]:border-2 [&_[role=slider]]:border-gray-400 [&_[role=slider]]:bg-white [&_[role=slider]]:shadow-md"
-									/>
-								</div>
-
-								{/* Time display */}
-								<span className="pixel-time-display rounded-none border border-gray-600/50 bg-gray-900/80 px-2 py-1 font-mono text-sm text-white shadow-lg">
-									{formatTime(currentTime)} / {formatTime(duration)}
-								</span>
-							</div>
-
-							<div className="flex items-center gap-2">
-								{/* Subtitles */}
-								{showSubtitles && subtitleTracks.length > 0 && (
-									<DropdownMenu>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<DropdownMenuTrigger asChild>
-													<Button
-														variant="ghost"
-														size="icon"
-														className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95">
-														<SubtitlesIcon className="size-6" />
-													</Button>
-												</DropdownMenuTrigger>
-											</TooltipTrigger>
-											<TooltipContent>Subtitles</TooltipContent>
-										</Tooltip>
-										<DropdownMenuContent>
-											<DropdownMenuLabel>Subtitles</DropdownMenuLabel>
-											<DropdownMenuSeparator />
-											<DropdownMenuItem onClick={() => setSelectedSubtitle(null)}>
-												Off
-											</DropdownMenuItem>
-											{subtitleTracks.map((track) => (
-												<DropdownMenuItem
-													key={track.value}
-													onClick={() => setSelectedSubtitle(track.value)}>
-													{track.label}
-												</DropdownMenuItem>
-											))}
-										</DropdownMenuContent>
-									</DropdownMenu>
-								)}
-
-								{/* Quality */}
-								{showQuality && (
-									<DropdownMenu>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<DropdownMenuTrigger asChild>
-													<Button
-														variant="ghost"
-														size="icon"
-														className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95">
-														<QualityIcon className="size-6" />
-													</Button>
-												</DropdownMenuTrigger>
-											</TooltipTrigger>
-											<TooltipContent>Quality</TooltipContent>
-										</Tooltip>
-										<DropdownMenuContent>
-											<DropdownMenuLabel>Quality</DropdownMenuLabel>
-											<DropdownMenuSeparator />
-											{qualityOptions.map((option) => (
-												<DropdownMenuItem
-													key={option.value}
-													onClick={() => setSelectedQuality(option.value)}>
-													{option.label} {selectedQuality === option.value && "✓"}
-												</DropdownMenuItem>
-											))}
-										</DropdownMenuContent>
-									</DropdownMenu>
-								)}
-
-								{/* Playback speed */}
-								<DropdownMenu>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<DropdownMenuTrigger asChild>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95">
-													<SpeedIcon className="size-6" />
-												</Button>
-											</DropdownMenuTrigger>
-										</TooltipTrigger>
-										<TooltipContent>Playback Speed</TooltipContent>
-									</Tooltip>
-									<DropdownMenuContent>
-										<DropdownMenuLabel>Speed</DropdownMenuLabel>
-										<DropdownMenuSeparator />
-										{playbackRates.map((rate) => (
-											<DropdownMenuItem key={rate} onClick={() => setCurrentRate(rate)}>
-												{rate}x {currentRate === rate && "✓"}
-											</DropdownMenuItem>
-										))}
-									</DropdownMenuContent>
-								</DropdownMenu>
-
-								{/* Picture in Picture */}
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={() => setIsPiP(!isPiP)}>
-											<PictureInPictureIcon className="size-6" />
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>Picture in Picture</TooltipContent>
-								</Tooltip>
-
-								{/* Fullscreen */}
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="pixel-button rounded-none border border-gray-600/50 bg-gray-800/80 text-white shadow-lg transition-all duration-150 hover:border-gray-500 hover:bg-gray-700/80 active:scale-95"
-											onClick={toggleFullscreen}>
-											{isFullscreen ? (
-												<ExitFullscreenIcon className="size-6" />
-											) : (
-												<FullscreenIcon className="size-6" />
-											)}
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>
-										{isFullscreen ? "Exit Fullscreen (f)" : "Fullscreen (f)"}
-									</TooltipContent>
-								</Tooltip>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</TooltipProvider>
-	)
-}

package/src/components/simple-video-player.tsx

@@ -1,62 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef } from "react"
-import "video.js/dist/video-js.css"
-
-export function SimpleVideoPlayer({ src, type = "video/mp4" }: { src: string; type?: string }) {
-	const videoRef = useRef<HTMLVideoElement>(null)
-	const playerRef = useRef<any>(null)
-
-	useEffect(() => {
-		const loadPlayer = async () => {
-			if (!videoRef.current || playerRef.current) return
-
-			// Dynamically import video.js
-			const videojs = (await import("video.js")).default
-
-			// Initialize player
-			const player = videojs(videoRef.current, {
-				controls: true,
-				autoplay: false,
-				preload: "auto",
-				fluid: true,
-				sources: [
-					{
-						src: src,
-						type: type
-					}
-				]
-			})
-
-			playerRef.current = player
-
-			player.ready(() => {
-				console.log("Player is ready!")
-			})
-		}
-
-		loadPlayer()
-
-		// Cleanup
-		return () => {
-			if (playerRef.current) {
-				playerRef.current.dispose()
-				playerRef.current = null
-			}
-		}
-	}, [src, type])
-
-	return (
-		<div className="w-full">
-			<div data-vjs-player>
-				<video
-					ref={videoRef}
-					className="video-js vjs-big-play-centered vjs-default-skin w-full"
-					playsInline
-				/>
-			</div>
-		</div>
-	)
-}
-
-SimpleVideoPlayer.displayName = "SimpleVideoPlayer"