@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/dist/package.json

@@ -1,62 +0,0 @@
-{
-  "name": "@therealtinhtute/baroiplayer",
-  "version": "1.0.7",
-  "type": "module",
-  "main": "./index.js",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.mjs",
-      "require": "./index.js"
-    },
-    "./globals.css": "./index.css",
-    "./minimal-player.css": "./minimal-components.css",
-    "./dist/styles/minimal-player.css": "./minimal-components.css",
-    "./styles/minimal-player.css": "./minimal-components.css",
-    "./dist/*": "./*",
-    "./lib/*": "./src/lib/*.ts",
-    "./components/*": "./src/components/*.tsx",
-    "./hooks/*": "./src/hooks/*.ts",
-    "./types/*": "./src/types/*.ts"
-  },
-  "files": [
-    "*.js",
-    "*.mjs",
-    "*.d.ts",
-    "*.css",
-    "src/",
-    "styles/"
-  ],
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "tailwindcss": ">=4.0.0",
-    "video.js": ">=7.0.0",
-    "hls.js": ">=1.0.0",
-    "@videojs/http-streaming": ">=2.0.0",
-    "videojs-contrib-quality-levels": ">=2.0.0",
-    "videojs-hls-quality-selector": ">=2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    },
-    "video.js": {
-      "optional": true
-    },
-    "hls.js": {
-      "optional": true
-    },
-    "@videojs/http-streaming": {
-      "optional": true
-    },
-    "videojs-contrib-quality-levels": {
-      "optional": true
-    },
-    "videojs-hls-quality-selector": {
-      "optional": true
-    }
-  }
-}

package/dist/src/adapters/videojs-adapter.d.ts

@@ -1,38 +0,0 @@
-import "../styles/videojs.css";
-import type VideoJsPlayer from "video.js/dist/types/player";
-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;
-    enableQualitySelector?: boolean;
-    enableSubtitles?: boolean;
-}
-export declare function VideoJSAdapter({ sources, poster, textTracks, autoplay, muted, controls, preload, fluid, responsive, playbackRates, className, onReady, onError, hlsConfig, enableQualitySelector, enableSubtitles }: VideoJSAdapterProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace VideoJSAdapter {
-    var displayName: string;
-}
-//# sourceMappingURL=videojs-adapter.d.ts.map

package/dist/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/dist/src/components/AnimateLoading.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface AnimateLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
-    loadingText?: string;
-    gifSrc?: string;
-    showFallback?: boolean;
-}
-export declare function AnimateLoading({ loadingText, gifSrc, showFallback, className, ...props }: AnimateLoadingProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AnimateLoading.d.ts.map

package/dist/src/components/AnimateLoading.tsx

@@ -1,115 +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 as unknown) as string
-} 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>
-  )
-}