@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,651 @@
+"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

@@ -0,0 +1,60 @@
+"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"