@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/adapters/videojs-adapter.tsx

@@ -11,460 +11,460 @@ 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 }
+	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
+	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
+	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
+	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
+	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>
-  )
+	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"