@therealtinhtute/baroiplayer 1.0.0

package/src/adapters/videojs-adapter.tsx

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

@@ -0,0 +1,115 @@
+"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>
+  )
+}