@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/adapters/videojs-adapter.tsx

@@ -1,470 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState, useCallback } from "react"
-import "../styles/videojs.css"
-import type VideoJsPlayer from "video.js/dist/types/player"
-import { MediaActionTypes, useMediaContext, useMediaDispatch } from "../context/media-context"
-import { cn } from "../lib/utils"
-
-// Lazy load Video.js and HLS.js for better performance
-let videojs: any = null
-let Hls: any = null
-
-async function loadVideoJS() {
-	if (!videojs) {
-		const [videojsModule, hlsModule] = await Promise.all([import("video.js"), import("hls.js")])
-		videojs = videojsModule.default
-		Hls = hlsModule.default
-
-		// Import plugins after Video.js is loaded
-		await Promise.all([
-			// @ts-ignore
-			import("@videojs/http-streaming"),
-			// @ts-ignore
-			import("videojs-contrib-quality-levels"),
-			// @ts-ignore
-			import("videojs-hls-quality-selector")
-		])
-	}
-	return { videojs, Hls }
-}
-
-export interface VideoSource {
-	src: string
-	type: string
-	label?: string
-	selected?: boolean
-}
-
-export interface TextTrack {
-	src: string
-	kind: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata"
-	srclang: string
-	label: string
-	default?: boolean
-}
-
-export interface VideoJSAdapterProps {
-	sources: VideoSource[]
-	poster?: string
-	textTracks?: TextTrack[]
-	autoplay?: boolean
-	muted?: boolean
-	controls?: boolean
-	preload?: "auto" | "metadata" | "none"
-	fluid?: boolean
-	responsive?: boolean
-	playbackRates?: number[]
-	className?: string
-	onReady?: (player: VideoJsPlayer) => void
-	onError?: (error: any) => void
-	hlsConfig?: any // HLS.js config
-	enableQualitySelector?: boolean
-	enableSubtitles?: boolean
-}
-
-export function VideoJSAdapter({
-	sources,
-	poster,
-	textTracks = [],
-	autoplay = false,
-	muted = false,
-	controls = false,
-	preload = "metadata",
-	fluid = true,
-	responsive = true,
-	playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2],
-	className,
-	onReady,
-	onError,
-	hlsConfig = {},
-	enableQualitySelector = true,
-	enableSubtitles = true
-}: VideoJSAdapterProps) {
-	const videoRef = useRef<HTMLVideoElement>(null)
-	const playerRef = useRef<VideoJsPlayer | null>(null)
-	const hlsRef = useRef<any | null>(null) // HLS.js instance
-	const [isLoading, setIsLoading] = useState(true)
-	const [error, setError] = useState<string | null>(null)
-
-	const context = useMediaContext()
-	const dispatch = useMediaDispatch()
-
-	// Initialize Video.js player
-	const initializePlayer = async () => {
-		if (!videoRef.current || playerRef.current) return
-
-		try {
-			setIsLoading(true)
-			const { videojs, Hls: HlsLib } = await loadVideoJS()
-
-			// Check if we need HLS.js (for non-Safari browsers)
-			const needsHlsJs =
-				sources.some((s) => s.type === "application/x-mpegURL") &&
-				!videoRef.current.canPlayType("application/vnd.apple.mpegurl")
-
-			// Video.js options
-			const options: any = {
-				autoplay,
-				muted,
-				controls,
-				preload,
-				fluid,
-				responsive,
-				playbackRates,
-				sources: needsHlsJs ? [] : sources, // Don't set sources if using HLS.js
-				poster,
-				html5: {
-					vhs: {
-						// Video.js HTTP Streaming options
-						overrideNative: !videoRef.current.canPlayType("application/vnd.apple.mpegurl"),
-						enableLowInitialPlaylist: true,
-						fastQualityChange: true,
-						handleManifestRedirects: true
-					}
-				}
-			}
-
-			// Create Video.js player
-			const player = videojs(videoRef.current, options, function () {
-				console.log("Video.js player ready")
-			}) as VideoJsPlayer
-
-			playerRef.current = player
-
-			// Add text tracks
-			textTracks.forEach((track) => {
-				player.addRemoteTextTrack(
-					{
-						kind: track.kind,
-						src: track.src,
-						srclang: track.srclang,
-						label: track.label,
-						default: track.default
-					},
-					false
-				)
-			})
-
-			// Setup HLS.js for non-Safari browsers if needed
-			if (needsHlsJs) {
-				const hlsSource = sources.find((s) => s.type === "application/x-mpegURL")
-				if (hlsSource) {
-					const hls = new HlsLib({
-						debug: false,
-						enableWorker: true,
-						lowLatencyMode: false,
-						backBufferLength: 30,
-						maxBufferLength: 30,
-						maxMaxBufferLength: 600,
-						maxBufferSize: 60 * 1000 * 1000,
-						maxBufferHole: 0.1,
-						highBufferWatchdogPeriod: 2,
-						// ABR settings
-						abrEwmaFastLive: 3.0,
-						abrEwmaSlowLive: 9.0,
-						abrEwmaFastVoD: 3.0,
-						abrEwmaSlowVoD: 9.0,
-						abrEwmaDefaultEstimate: 500000,
-						abrBandWidthFactor: 0.95,
-						abrBandWidthUpFactor: 0.7,
-						abrMaxWithRealBitrate: false,
-						maxStarvationDelay: 4,
-						maxLoadingDelay: 4,
-						capLevelToPlayerSize: true,
-						capLevelOnFPSDrop: true,
-						// Subtitle settings
-						renderTextTracksNatively: false,
-						subtitlePreference: {
-							lang: navigator.language.split("-")[0],
-							forced: false
-						},
-						...hlsConfig
-					})
-
-					hlsRef.current = hls
-
-					// Attach HLS to video element
-					hls.loadSource(hlsSource.src)
-					hls.attachMedia(videoRef.current)
-
-					// HLS.js event handlers
-					hls.on(HlsLib.Events.MANIFEST_PARSED, () => {
-						console.log("HLS manifest parsed", {
-							levels: hls.levels.map((l: any) => ({
-								height: l.height,
-								bitrate: l.bitrate,
-								codec: l.codecSet
-							}))
-						})
-
-						// Add quality levels to Video.js
-						if (enableQualitySelector && (player as any).qualityLevels) {
-							const qualityLevels = (player as any).qualityLevels()
-
-							hls.levels.forEach((level: any, index: number) => {
-								qualityLevels.addQualityLevel({
-									id: index.toString(),
-									label: `${level.height}p`,
-									width: level.width,
-									height: level.height,
-									bitrate: level.bitrate,
-									enabled: true
-								})
-							})
-						}
-					})
-
-					hls.on(HlsLib.Events.LEVEL_SWITCHED, (_event: any, data: any) => {
-						console.log(`HLS quality switched to level ${data.level}`)
-						dispatch({
-							type: MediaActionTypes.SET_QUALITY_LEVEL,
-							detail: data.level
-						})
-					})
-
-					hls.on(HlsLib.Events.ERROR, (_event: any, data: any) => {
-						if (data.fatal) {
-							switch (data.type) {
-								case HlsLib.ErrorTypes.NETWORK_ERROR:
-									console.error("Fatal network error encountered, try to recover")
-									hls.startLoad()
-									break
-								case HlsLib.ErrorTypes.MEDIA_ERROR:
-									console.error("Fatal media error encountered, try to recover")
-									hls.recoverMediaError()
-									break
-								default:
-									console.error("Fatal error, cannot recover")
-									setError("Streaming error occurred")
-									onError?.(data)
-									hls.destroy()
-									break
-							}
-						}
-					})
-
-					// Update bandwidth estimate in context
-					hls.on(HlsLib.Events.FRAG_LOADED, () => {
-						const estimate = hls.bandwidthEstimate
-						if (estimate) {
-							dispatch({
-								type: MediaActionTypes.SET_BANDWIDTH_ESTIMATE,
-								detail: estimate
-							})
-						}
-					})
-				}
-			}
-
-			// Enable quality selector plugin
-			if (enableQualitySelector && (player as any).qualityLevels) {
-				;(player as any).hlsQualitySelector({
-					displayCurrentQuality: true
-				})
-			}
-
-			// Video.js event handlers to sync with MediaContext
-			player.on("play", () => {
-				dispatch({ type: MediaActionTypes.PLAY })
-			})
-
-			player.on("pause", () => {
-				dispatch({ type: MediaActionTypes.PAUSE })
-			})
-
-			player.on("timeupdate", () => {
-				dispatch({
-					type: MediaActionTypes.SET_CURRENT_TIME,
-					detail: player.currentTime() || 0
-				})
-			})
-
-			player.on("durationchange", () => {
-				dispatch({
-					type: MediaActionTypes.SET_DURATION,
-					detail: player.duration() || 0
-				})
-			})
-
-			player.on("volumechange", () => {
-				dispatch({
-					type: MediaActionTypes.SET_VOLUME,
-					detail: player.volume() || 0
-				})
-				dispatch({
-					type: player.muted() ? MediaActionTypes.MUTE : MediaActionTypes.UNMUTE
-				})
-			})
-
-			player.on("ended", () => {
-				dispatch({ type: MediaActionTypes.PAUSE })
-			})
-
-			player.on("error", (e: any) => {
-				const error = player.error()
-				setError(error?.message || "An error occurred")
-				dispatch({
-					type: MediaActionTypes.SET_ERROR,
-					detail: error?.message || "Playback error"
-				})
-				onError?.(error)
-			})
-
-			player.on("loadstart", () => {
-				dispatch({ type: MediaActionTypes.SET_LOADING, detail: true })
-			})
-
-			player.on("loadeddata", () => {
-				setIsLoading(false)
-				dispatch({ type: MediaActionTypes.SET_LOADING, detail: false })
-			})
-
-			player.on("waiting", () => {
-				dispatch({ type: MediaActionTypes.SET_BUFFERING, detail: true })
-			})
-
-			player.on("playing", () => {
-				dispatch({ type: MediaActionTypes.SET_BUFFERING, detail: false })
-			})
-
-			// Text track changes
-			player.on("texttrackchange", () => {
-				const tracks = player.textTracks() as any
-				const activeTracks: any[] = []
-
-				if (tracks && tracks.length) {
-					for (let i = 0; i < tracks.length; i++) {
-						const track = tracks[i]
-						if (track.mode === "showing") {
-							activeTracks.push({
-								id: track.id,
-								label: track.label,
-								language: track.language,
-								kind: track.kind
-							})
-						}
-					}
-				}
-
-				dispatch({
-					type: MediaActionTypes.SET_ACTIVE_TEXT_TRACKS,
-					detail: activeTracks
-				})
-			})
-
-			// Update media ref in context for gesture/keyboard controls
-			if (context.mediaRef) {
-				context.mediaRef.current = videoRef.current
-			}
-
-			onReady?.(player)
-			setIsLoading(false)
-		} catch (err) {
-			console.error("Failed to initialize Video.js player:", err)
-			setError("Failed to initialize player")
-			setIsLoading(false)
-			onError?.(err)
-		}
-	}
-
-	// Cleanup on unmount
-	useEffect(() => {
-		initializePlayer()
-
-		return () => {
-			if (hlsRef.current) {
-				hlsRef.current.destroy()
-				hlsRef.current = null
-			}
-
-			if (playerRef.current) {
-				playerRef.current.dispose()
-				playerRef.current = null
-			}
-		}
-	}, [initializePlayer])
-
-	// Expose player methods to MediaContext
-	useEffect(() => {
-		if (!playerRef.current || !context.mediaRef) return
-
-		// Create a proxy object that bridges Video.js methods to native HTMLVideoElement methods
-		const proxyMethods = {
-			play: () => playerRef.current?.play(),
-			pause: () => playerRef.current?.pause(),
-			seekTo: (time: number) => {
-				if (playerRef.current) {
-					playerRef.current.currentTime(time)
-				}
-			},
-			setVolume: (volume: number) => {
-				if (playerRef.current) {
-					playerRef.current.volume(volume)
-				}
-			},
-			setMuted: (muted: boolean) => {
-				if (playerRef.current) {
-					playerRef.current.muted(muted)
-				}
-			},
-			setQualityLevel: (level: number) => {
-				if (hlsRef.current) {
-					hlsRef.current.currentLevel = level
-				}
-			},
-			getQualityLevels: () => {
-				if (hlsRef.current) {
-					return hlsRef.current.levels
-				}
-				return []
-			},
-			getCurrentQualityLevel: () => {
-				if (hlsRef.current) {
-					return hlsRef.current.currentLevel
-				}
-				return -1
-			},
-			getBandwidthEstimate: () => {
-				if (hlsRef.current) {
-					return hlsRef.current.bandwidthEstimate
-				}
-				return 0
-			}
-		}
-
-		// Attach proxy methods to video element for external access
-		if (videoRef.current) {
-			Object.assign(videoRef.current, proxyMethods)
-		}
-	}, [context.mediaRef])
-
-	return (
-		<div className={cn("relative h-full w-full", className)}>
-			<video
-				ref={videoRef}
-				className="video-js vjs-default-skin vjs-big-play-centered h-full w-full"
-				playsInline
-			/>
-
-			{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>
-			)}
-
-			{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">{error}</p>
-					</div>
-				</div>
-			)}
-		</div>
-	)
-}
-
-VideoJSAdapter.displayName = "VideoJSAdapter"

package/src/components/AnimateLoading.tsx

@@ -1,107 +0,0 @@
-"use client"
-
-import React, { useState, useEffect } from "react"
-import { cn } from "../lib/utils"
-
-// Try to import the GIF using direct import for better compatibility
-let monaLoadingGif: string | undefined
-
-// Import the GIF statically for bundling - this will be handled by Vite
-// @ts-ignore - Vite handles this import
-import monaGifSrc from "../assets/mona-loading.gif"
-
-try {
-	monaLoadingGif = monaGifSrc
-} catch {
-	// GIF import failed, will use fallback
-	monaLoadingGif = undefined
-}
-
-interface AnimateLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
-	loadingText?: string
-	gifSrc?: string
-	showFallback?: boolean
-}
-
-export function AnimateLoading({
-	loadingText = "Loading...",
-	gifSrc,
-	showFallback = true,
-	className,
-	...props
-}: AnimateLoadingProps) {
-	const [imageError, setImageError] = useState(false)
-	const [imageLoaded, setImageLoaded] = useState(false)
-
-	// Try multiple paths for the GIF
-	const gifPaths = [
-		gifSrc,
-		monaLoadingGif,
-		"/mona-loading.gif",
-		"./mona-loading.gif",
-		"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" // 1x1 transparent gif as last resort
-	].filter(Boolean) as string[]
-
-	const [currentGifIndex, setCurrentGifIndex] = useState(0)
-	const currentGif = gifPaths[currentGifIndex]
-
-	const handleImageError = () => {
-		if (currentGifIndex < gifPaths.length - 1) {
-			setCurrentGifIndex(currentGifIndex + 1)
-		} else {
-			setImageError(true)
-		}
-	}
-
-	// Enhanced fallback CSS animation
-	const FallbackAnimation = () => (
-		<div className="relative h-12 w-12">
-			{/* Outer spinning gradient ring */}
-			<div className="absolute inset-0 animate-spin rounded-full bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 opacity-75" />
-
-			{/* Inner background */}
-			<div className="absolute inset-1 rounded-full bg-black/90" />
-
-			{/* Center spinning element */}
-			<div className="absolute inset-0 flex items-center justify-center">
-				<div className="relative">
-					<div className="h-8 w-8 rounded-full border-2 border-white/20" />
-					<div className="absolute inset-0 h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-cyan-400" />
-
-					{/* Pulsing dot in center */}
-					<div className="absolute inset-0 flex items-center justify-center">
-						<div className="h-2 w-2 animate-pulse rounded-full bg-cyan-400" />
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-center justify-center space-y-2 rounded py-2 text-white",
-				className
-			)}
-			{...props}>
-			{/* Show fallback while image is loading or if error */}
-			{(!imageLoaded || imageError) && showFallback && <FallbackAnimation />}
-
-			{/* Try to load the actual GIF (hidden if not loaded) */}
-			{!imageError && currentGif && (
-				<img
-					alt="loading"
-					height={50}
-					width={50}
-					src={currentGif}
-					onError={handleImageError}
-					onLoad={() => setImageLoaded(true)}
-					className={cn("object-contain", !imageLoaded && "hidden")}
-					style={{ display: imageLoaded ? "block" : "none" }}
-				/>
-			)}
-
-			<span className="mt-2 text-sm tracking-wider">{loadingText}</span>
-		</div>
-	)
-}