@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/variants/minimal/AccessibleMinimalPlayer.tsx

@@ -1,518 +1,544 @@
 "use client"
 
 import React, { useCallback, useEffect, useRef, useState } from "react"
+import {
+	createMediaKeyboardShortcuts,
+	useAccessibilityStyles,
+	useFocusVisible,
+	useKeyboardShortcuts,
+	useMediaPlayerFocus,
+	useMediaScreenReader
+} from "../../../hooks/accessibility"
+import { cn } from "../../../lib/utils"
+import { KeyboardHelpOverlay } from "../../accessibility/keyboard-help-overlay"
+import type { IconSet } from "../../icons"
+import { defaultMinimalIcons } from "../../icons"
 import { MediaPlayerRoot } from "../../media-player-root"
 import { MediaPlayerVideo } from "../../media-player-video"
 import { MinimalControls } from "./MinimalControls"
-import { MinimalOverlay } from "./MinimalOverlay"
 import { MinimalLoading } from "./MinimalLoading"
-import { cn } from "../../../lib/utils"
-import type { IconSet } from "../../icons"
-import { defaultMinimalIcons } from "../../icons"
-import { 
-  useKeyboardShortcuts, 
-  createMediaKeyboardShortcuts,
-  useMediaPlayerFocus,
-  useMediaScreenReader,
-  useAccessibilityStyles,
-  useFocusVisible
-} from '../../../hooks/accessibility'
-import { KeyboardHelpOverlay } from '../../accessibility/keyboard-help-overlay'
+import { MinimalOverlay } from "./MinimalOverlay"
+
+/**
+ * Safely sets currentTime on a video element, ensuring the value is finite
+ */
+function safeSetCurrentTime(video: HTMLVideoElement, time: number): boolean {
+	if (!Number.isFinite(time)) {
+		console.warn(`Attempted to set non-finite currentTime: ${time}`)
+		return false
+	}
+
+	if (time < 0) {
+		console.warn(`Attempted to set negative currentTime: ${time}`)
+		return false
+	}
+
+	try {
+		video.currentTime = time
+		return true
+	} catch (error) {
+		console.error(`Failed to set currentTime to ${time}:`, error)
+		return false
+	}
+}
 
 export interface AccessibleMinimalPlayerProps {
-  src: string | string[]
-  poster?: string
-  autoPlay?: boolean
-  muted?: boolean
-  loop?: boolean
-  autoHideControls?: boolean
-  hideDelay?: number
-  theme?: "dark" | "light" | "transparent"
-  customIcons?: IconSet
-  showCenterPlayButton?: boolean
-  showLoadingSpinner?: boolean
-  className?: string
-  onPlay?: () => void
-  onPause?: () => void
-  onEnded?: () => void
-  onTimeUpdate?: (currentTime: number) => void
-  onVolumeChange?: (volume: number) => void
-  onSeek?: (time: number) => void
-  onError?: (error: Error) => void
-  watermark?: {
-    src: string
-    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-    opacity?: number
-    size?: "small" | "medium" | "large"
-  }
-  qualities?: Array<{
-    src: string
-    quality: string
-    default?: boolean
-  }>
-  showQualitySelector?: boolean
-  showSpeedControl?: boolean
-  thumbnails?: string
-  // Accessibility props
-  enableKeyboardShortcuts?: boolean
-  showKeyboardHelpButton?: boolean
-  ariaLabel?: string
-  ariaDescribedBy?: string
+	src: string | string[]
+	poster?: string
+	autoPlay?: boolean
+	muted?: boolean
+	loop?: boolean
+	autoHideControls?: boolean
+	hideDelay?: number
+	theme?: "dark" | "light" | "transparent"
+	customIcons?: IconSet
+	showCenterPlayButton?: boolean
+	showLoadingSpinner?: boolean
+	className?: string
+	onPlay?: () => void
+	onPause?: () => void
+	onEnded?: () => void
+	onTimeUpdate?: (currentTime: number) => void
+	onVolumeChange?: (volume: number) => void
+	onSeek?: (time: number) => void
+	onError?: (error: Error) => void
+	watermark?: {
+		src: string
+		position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+		opacity?: number
+		size?: "small" | "medium" | "large"
+	}
+	qualities?: Array<{
+		src: string
+		quality: string
+		default?: boolean
+	}>
+	showQualitySelector?: boolean
+	showSpeedControl?: boolean
+	thumbnails?: string
+	// Accessibility props
+	enableKeyboardShortcuts?: boolean
+	showKeyboardHelpButton?: boolean
+	ariaLabel?: string
+	ariaDescribedBy?: string
 }
 
 export function AccessibleMinimalPlayer({
-  src,
-  poster,
-  autoPlay = false,
-  muted = false,
-  loop = false,
-  autoHideControls = true,
-  hideDelay = 2500,
-  theme = "dark",
-  customIcons,
-  showCenterPlayButton = true,
-  showLoadingSpinner = true,
-  className,
-  onPlay,
-  onPause,
-  onEnded,
-  onTimeUpdate,
-  onVolumeChange,
-  onSeek,
-  onError,
-  watermark,
-  qualities,
-  showQualitySelector = false,
-  showSpeedControl = false,
-  thumbnails,
-  enableKeyboardShortcuts = true,
-  showKeyboardHelpButton = true,
-  ariaLabel = "Media player",
-  ariaDescribedBy,
+	src,
+	poster,
+	autoPlay = false,
+	muted = false,
+	loop = false,
+	autoHideControls = true,
+	hideDelay = 2500,
+	theme = "dark",
+	customIcons,
+	showCenterPlayButton = true,
+	showLoadingSpinner = true,
+	className,
+	onPlay,
+	onPause,
+	onEnded,
+	onTimeUpdate,
+	onVolumeChange,
+	onSeek,
+	onError,
+	watermark,
+	qualities,
+	showQualitySelector = false,
+	showSpeedControl = false,
+	thumbnails,
+	enableKeyboardShortcuts = true,
+	showKeyboardHelpButton = true,
+	ariaLabel = "Media player",
+	ariaDescribedBy
 }: AccessibleMinimalPlayerProps) {
-  // Existing state
-  const [controlsVisible, setControlsVisible] = useState(true)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [volume, setVolume] = useState(1)
-  const [isMuted, setIsMuted] = useState(muted)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(0)
-  const [isFullscreen, setIsFullscreen] = useState(false)
-  
-  // Accessibility state
-  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false)
-  
-  // Refs
-  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const videoRef = useRef<HTMLVideoElement | null>(null)
-  const [isHovered, setIsHovered] = useState(false)
-  const [userInteracting, setUserInteracting] = useState(false)
-
-  // Accessibility hooks
-  const { applyStyles, preferences } = useAccessibilityStyles()
-  const focusManager = useMediaPlayerFocus()
-  const screenReader = useMediaScreenReader()
-  const isFocusVisible = useFocusVisible()
-
-  // Merge default icons with custom icons
-  const icons = { ...defaultMinimalIcons, ...customIcons }
-
-  // Media control functions
-  const togglePlayPause = useCallback(() => {
-    if (!videoRef.current) return
-    
-    if (isPlaying) {
-      videoRef.current.pause()
-    } else {
-      videoRef.current.play()
-    }
-  }, [isPlaying])
-
-  const seekForward = useCallback((seconds = 10) => {
-    if (!videoRef.current) return
-    
-    const newTime = Math.min(videoRef.current.currentTime + seconds, duration)
-    videoRef.current.currentTime = newTime
-    screenReader.announceTime(newTime, duration)
-  }, [duration, screenReader])
-
-  const seekBackward = useCallback((seconds = 10) => {
-    if (!videoRef.current) return
-    
-    const newTime = Math.max(videoRef.current.currentTime - seconds, 0)
-    videoRef.current.currentTime = newTime
-    screenReader.announceTime(newTime, duration)
-  }, [duration, screenReader])
-
-  const volumeUp = useCallback(() => {
-    if (!videoRef.current) return
-    
-    const newVolume = Math.min(volume + 0.1, 1)
-    setVolume(newVolume)
-    videoRef.current.volume = newVolume
-    if (isMuted) {
-      setIsMuted(false)
-      videoRef.current.muted = false
-    }
-    screenReader.announceVolume(newVolume, false)
-  }, [volume, isMuted, screenReader])
-
-  const volumeDown = useCallback(() => {
-    if (!videoRef.current) return
-    
-    const newVolume = Math.max(volume - 0.1, 0)
-    setVolume(newVolume)
-    videoRef.current.volume = newVolume
-    if (isMuted) {
-      setIsMuted(false)
-      videoRef.current.muted = false
-    }
-    screenReader.announceVolume(newVolume, false)
-  }, [volume, isMuted, screenReader])
-
-  const toggleMute = useCallback(() => {
-    if (!videoRef.current) return
-    
-    const newMuted = !isMuted
-    setIsMuted(newMuted)
-    videoRef.current.muted = newMuted
-    screenReader.announceVolume(volume, newMuted)
-  }, [isMuted, volume, screenReader])
-
-  const toggleFullscreen = useCallback(async () => {
-    if (!containerRef.current) return
-
-    try {
-      if (!isFullscreen) {
-        if (containerRef.current.requestFullscreen) {
-          await containerRef.current.requestFullscreen()
-        }
-      } else {
-        if (document.exitFullscreen) {
-          await document.exitFullscreen()
-        }
-      }
-    } catch (error) {
-      console.error('Fullscreen toggle failed:', error)
-    }
-  }, [isFullscreen])
-
-  const showHelp = useCallback(() => {
-    setShowKeyboardHelp(true)
-  }, [])
-
-  // Create keyboard shortcuts
-  const keyboardShortcuts = createMediaKeyboardShortcuts({
-    play: () => videoRef.current?.play(),
-    pause: () => videoRef.current?.pause(),
-    togglePlayPause,
-    seekForward,
-    seekBackward,
-    volumeUp,
-    volumeDown,
-    toggleMute,
-    toggleFullscreen,
-    showHelp: showKeyboardHelpButton ? showHelp : undefined
-  })
-
-  // Enable keyboard shortcuts
-  const { shortcuts } = useKeyboardShortcuts({
-    shortcuts: enableKeyboardShortcuts ? keyboardShortcuts : [],
-    enabled: enableKeyboardShortcuts,
-    target: containerRef.current
-  })
-
-  // Auto-hide controls logic
-  const resetHideTimer = useCallback(() => {
-    if (!autoHideControls) return
-
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current)
-    }
-    setControlsVisible(true)
-
-    if (!userInteracting && isPlaying && !preferences.prefersReducedMotion) {
-      hideTimeoutRef.current = setTimeout(() => {
-        setControlsVisible(false)
-      }, hideDelay)
-    }
-  }, [autoHideControls, userInteracting, isPlaying, hideDelay, preferences.prefersReducedMotion])
-
-  // Handle mouse movement
-  const handleMouseMove = useCallback(() => {
-    resetHideTimer()
-  }, [resetHideTimer])
-
-  // Handle mouse enter/leave
-  const handleMouseEnter = useCallback(() => {
-    setIsHovered(true)
-    setControlsVisible(true)
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current)
-    }
-  }, [])
-
-  const handleMouseLeave = useCallback(() => {
-    setIsHovered(false)
-    if (isPlaying && autoHideControls && !userInteracting) {
-      hideTimeoutRef.current = setTimeout(() => {
-        setControlsVisible(false)
-      }, 500)
-    }
-  }, [isPlaying, autoHideControls, userInteracting])
-
-  // Handle user interaction
-  const handleUserInteractionStart = useCallback(() => {
-    setUserInteracting(true)
-    setControlsVisible(true)
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current)
-    }
-  }, [])
-
-  const handleUserInteractionEnd = useCallback(() => {
-    setUserInteracting(false)
-    resetHideTimer()
-  }, [resetHideTimer])
-
-  // Video event handlers
-  const handlePlayStateChange = useCallback((playing: boolean) => {
-    setIsPlaying(playing)
-    screenReader.announcePlaybackState(playing)
-    
-    if (playing) {
-      onPlay?.()
-      resetHideTimer()
-    } else {
-      onPause?.()
-      setControlsVisible(true)
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-    }
-  }, [onPlay, onPause, resetHideTimer, screenReader])
-
-  const handleTimeUpdate = useCallback((time: number) => {
-    setCurrentTime(time)
-    onTimeUpdate?.(time)
-  }, [onTimeUpdate])
-
-  const handleLoadedMetadata = useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
-    const video = event.currentTarget
-    setDuration(video.duration)
-    setIsLoading(false)
-  }, [])
-
-  const handleLoadStart = useCallback(() => {
-    setIsLoading(true)
-    setError(null)
-    screenReader.announceLoading(true)
-  }, [screenReader])
-
-  const handleLoadedData = useCallback(() => {
-    setIsLoading(false)
-    screenReader.announceLoading(false)
-  }, [screenReader])
-
-  const handleError = useCallback((e: Error) => {
-    setIsLoading(false)
-    setError(e.message || "An error occurred")
-    screenReader.announceError(e.message || "An error occurred")
-    onError?.(e)
-  }, [onError, screenReader])
-
-  const handleVolumeChange = useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
-    const video = event.currentTarget
-    const newVolume = video.volume
-    const newMuted = video.muted
-    
-    setVolume(newVolume)
-    setIsMuted(newMuted)
-    onVolumeChange?.(newVolume)
-  }, [onVolumeChange])
-
-  // Fullscreen change handler
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      const isCurrentlyFullscreen = !!document.fullscreenElement
-      setIsFullscreen(isCurrentlyFullscreen)
-      screenReader.announceFullscreen(isCurrentlyFullscreen)
-    }
-
-    document.addEventListener('fullscreenchange', handleFullscreenChange)
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange)
-    }
-  }, [screenReader])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  // Determine video source
-  const videoSrc = qualities && qualities.length > 0
-    ? qualities.find(q => q.default)?.src || qualities[0]?.src || (typeof src === 'string' ? src : src[0])
-    : (typeof src === 'string' ? src : src[0])
-
-  return (
-    <>
-      <div
-        ref={containerRef}
-        className={cn(
-          "accessible-minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black",
-          `theme-minimal-${theme}`,
-          isFocusVisible && "focus-visible-enabled",
-          className
-        )}
-        data-theme={theme}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        role="application"
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        tabIndex={0}
-        data-testid="media-player"
-      >
-        <MediaPlayerRoot
-          className="relative h-full w-full"
-          ref={focusManager.containerRef}
-        >
-          <MediaPlayerVideo
-            ref={videoRef}
-            src={videoSrc}
-            poster={poster}
-            autoPlay={autoPlay}
-            muted={muted}
-            loop={loop}
-            onPlay={() => handlePlayStateChange(true)}
-            onPause={() => handlePlayStateChange(false)}
-            onEnded={onEnded}
-            onTimeUpdate={(e) => handleTimeUpdate(e.currentTarget.currentTime)}
-            onLoadStart={handleLoadStart}
-            onLoadedData={handleLoadedData}
-            onLoadedMetadata={handleLoadedMetadata}
-            onError={(e) => handleError(new Error('Video loading failed'))}
-            onVolumeChange={handleVolumeChange}
-            className="h-full w-full object-contain"
-            aria-hidden="true"
-          />
-
-          {watermark && (
-            <div
-              className={cn(
-                "pointer-events-none absolute z-10",
-                {
-                  "top-4 left-4": watermark.position === "top-left",
-                  "top-4 right-4": watermark.position === "top-right",
-                  "bottom-4 left-4": watermark.position === "bottom-left",
-                  "right-4 bottom-4": watermark.position === "bottom-right",
-                }
-              )}
-              style={{ opacity: watermark.opacity || 0.7 }}
-              aria-hidden="true"
-            >
-              <img
-                src={watermark.src}
-                alt=""
-                className={cn(
-                  "h-auto",
-                  {
-                    "w-12": watermark.size === "small",
-                    "w-16": watermark.size === "medium",
-                    "w-24": watermark.size === "large",
-                  }
-                )}
-              />
-            </div>
-          )}
-
-          <MinimalOverlay
-            isVisible={showCenterPlayButton && (!isPlaying || isLoading)}
-            icons={icons}
-            onPlay={togglePlayPause}
-            isLoading={isLoading}
-            showLoadingSpinner={showLoadingSpinner}
-            error={error}
-            theme={theme}
-          />
-
-          <MinimalControls
-            isVisible={controlsVisible || !autoHideControls || isHovered}
-            isPlaying={isPlaying}
-            volume={volume}
-            isMuted={isMuted}
-            currentTime={currentTime}
-            duration={duration}
-            isFullscreen={isFullscreen}
-            icons={icons}
-            theme={theme}
-            qualities={qualities}
-            showQualitySelector={showQualitySelector}
-            showSpeedControl={showSpeedControl}
-            thumbnails={thumbnails}
-            onPlayPause={togglePlayPause}
-            onVolumeChange={(vol) => {
-              setVolume(vol)
-              if (videoRef.current) {
-                videoRef.current.volume = vol
-              }
-            }}
-            onMuteToggle={toggleMute}
-            onSeek={(time) => {
-              if (videoRef.current) {
-                videoRef.current.currentTime = time
-                onSeek?.(time)
-              }
-            }}
-            onFullscreenToggle={toggleFullscreen}
-            onUserInteractionStart={handleUserInteractionStart}
-            onUserInteractionEnd={handleUserInteractionEnd}
-            showKeyboardHelpButton={showKeyboardHelpButton}
-            onShowKeyboardHelp={showHelp}
-          />
-
-          {showLoadingSpinner && (
-            <MinimalLoading
-              isVisible={isLoading}
-              theme={theme}
-            />
-          )}
-        </MediaPlayerRoot>
-      </div>
-
-      {/* Keyboard Help Overlay */}
-      <KeyboardHelpOverlay
-        isOpen={showKeyboardHelp}
-        onClose={() => setShowKeyboardHelp(false)}
-        shortcuts={shortcuts}
-      />
-
-      {/* Screen reader only status region */}
-      <div
-        id={`${ariaDescribedBy || 'media-player'}-status`}
-        className="sr-only"
-        aria-live="polite"
-        aria-atomic="true"
-      >
-        {isLoading && "Loading media"}
-        {error && `Error: ${error}`}
-        {!isLoading && !error && (isPlaying ? "Playing" : "Paused")}
-      </div>
-
-      <style jsx global>{`
+	// Existing state
+	const [controlsVisible, setControlsVisible] = useState(true)
+	const [isPlaying, setIsPlaying] = useState(false)
+	const [isLoading, setIsLoading] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+	const [volume, setVolume] = useState(1)
+	const [isMuted, setIsMuted] = useState(muted)
+	const [currentTime, setCurrentTime] = useState(0)
+	const [duration, setDuration] = useState(0)
+	const [isFullscreen, setIsFullscreen] = useState(false)
+
+	// Accessibility state
+	const [showKeyboardHelp, setShowKeyboardHelp] = useState(false)
+
+	// Refs
+	const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+	const containerRef = useRef<HTMLDivElement | null>(null)
+	const videoRef = useRef<HTMLVideoElement | null>(null)
+	const [isHovered, setIsHovered] = useState(false)
+	const [userInteracting, setUserInteracting] = useState(false)
+
+	// Accessibility hooks
+	const { applyStyles, preferences } = useAccessibilityStyles()
+	const focusManager = useMediaPlayerFocus()
+	const screenReader = useMediaScreenReader()
+	const isFocusVisible = useFocusVisible()
+
+	// Merge default icons with custom icons
+	const icons = { ...defaultMinimalIcons, ...customIcons }
+
+	// Media control functions
+	const togglePlayPause = useCallback(() => {
+		if (!videoRef.current) return
+
+		if (isPlaying) {
+			videoRef.current.pause()
+		} else {
+			videoRef.current.play()
+		}
+	}, [isPlaying])
+
+	const seekForward = useCallback(
+		(seconds = 10) => {
+			if (!videoRef.current) return
+
+			const validDuration = Number.isFinite(duration) && duration > 0 ? duration : Number.isFinite(videoRef.current.duration) ? videoRef.current.duration : 0
+			if (validDuration === 0) {
+				console.warn("Cannot seek forward: duration is not available")
+				return
+			}
+
+			const currentTime = Number.isFinite(videoRef.current.currentTime) ? videoRef.current.currentTime : 0
+			const newTime = Math.min(currentTime + seconds, validDuration)
+			if (safeSetCurrentTime(videoRef.current, newTime)) {
+				screenReader.announceTime(newTime, validDuration)
+			}
+		},
+		[duration, screenReader]
+	)
+
+	const seekBackward = useCallback(
+		(seconds = 10) => {
+			if (!videoRef.current) return
+
+			const currentTime = Number.isFinite(videoRef.current.currentTime) ? videoRef.current.currentTime : 0
+			const newTime = Math.max(currentTime - seconds, 0)
+			if (safeSetCurrentTime(videoRef.current, newTime)) {
+				screenReader.announceTime(newTime, duration)
+			}
+		},
+		[duration, screenReader]
+	)
+
+	const volumeUp = useCallback(() => {
+		if (!videoRef.current) return
+
+		const newVolume = Math.min(volume + 0.1, 1)
+		setVolume(newVolume)
+		videoRef.current.volume = newVolume
+		if (isMuted) {
+			setIsMuted(false)
+			videoRef.current.muted = false
+		}
+		screenReader.announceVolume(newVolume, false)
+	}, [volume, isMuted, screenReader])
+
+	const volumeDown = useCallback(() => {
+		if (!videoRef.current) return
+
+		const newVolume = Math.max(volume - 0.1, 0)
+		setVolume(newVolume)
+		videoRef.current.volume = newVolume
+		if (isMuted) {
+			setIsMuted(false)
+			videoRef.current.muted = false
+		}
+		screenReader.announceVolume(newVolume, false)
+	}, [volume, isMuted, screenReader])
+
+	const toggleMute = useCallback(() => {
+		if (!videoRef.current) return
+
+		const newMuted = !isMuted
+		setIsMuted(newMuted)
+		videoRef.current.muted = newMuted
+		screenReader.announceVolume(volume, newMuted)
+	}, [isMuted, volume, screenReader])
+
+	const toggleFullscreen = useCallback(async () => {
+		if (!containerRef.current) return
+
+		try {
+			if (!isFullscreen) {
+				if (containerRef.current.requestFullscreen) {
+					await containerRef.current.requestFullscreen()
+				}
+			} else {
+				if (document.exitFullscreen) {
+					await document.exitFullscreen()
+				}
+			}
+		} catch (error) {
+			console.error("Fullscreen toggle failed:", error)
+		}
+	}, [isFullscreen])
+
+	const showHelp = useCallback(() => {
+		setShowKeyboardHelp(true)
+	}, [])
+
+	// Create keyboard shortcuts
+	const keyboardShortcuts = createMediaKeyboardShortcuts({
+		play: () => videoRef.current?.play(),
+		pause: () => videoRef.current?.pause(),
+		togglePlayPause,
+		seekForward,
+		seekBackward,
+		volumeUp,
+		volumeDown,
+		toggleMute,
+		toggleFullscreen,
+		showHelp: showKeyboardHelpButton ? showHelp : undefined
+	})
+
+	// Enable keyboard shortcuts
+	const { shortcuts } = useKeyboardShortcuts({
+		shortcuts: enableKeyboardShortcuts ? keyboardShortcuts : [],
+		enabled: enableKeyboardShortcuts,
+		target: containerRef.current
+	})
+
+	// Auto-hide controls logic
+	const resetHideTimer = useCallback(() => {
+		if (!autoHideControls) return
+
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+		setControlsVisible(true)
+
+		if (!userInteracting && isPlaying && !preferences.prefersReducedMotion) {
+			hideTimeoutRef.current = setTimeout(() => {
+				setControlsVisible(false)
+			}, hideDelay)
+		}
+	}, [autoHideControls, userInteracting, isPlaying, hideDelay, preferences.prefersReducedMotion])
+
+	// Handle mouse movement
+	const handleMouseMove = useCallback(() => {
+		resetHideTimer()
+	}, [resetHideTimer])
+
+	// Handle mouse enter/leave
+	const handleMouseEnter = useCallback(() => {
+		setIsHovered(true)
+		setControlsVisible(true)
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+	}, [])
+
+	const handleMouseLeave = useCallback(() => {
+		setIsHovered(false)
+		if (isPlaying && autoHideControls && !userInteracting) {
+			hideTimeoutRef.current = setTimeout(() => {
+				setControlsVisible(false)
+			}, 500)
+		}
+	}, [isPlaying, autoHideControls, userInteracting])
+
+	// Handle user interaction
+	const handleUserInteractionStart = useCallback(() => {
+		setUserInteracting(true)
+		setControlsVisible(true)
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+	}, [])
+
+	const handleUserInteractionEnd = useCallback(() => {
+		setUserInteracting(false)
+		resetHideTimer()
+	}, [resetHideTimer])
+
+	// Video event handlers
+	const handlePlayStateChange = useCallback(
+		(playing: boolean) => {
+			setIsPlaying(playing)
+			screenReader.announcePlaybackState(playing)
+
+			if (playing) {
+				onPlay?.()
+				resetHideTimer()
+			} else {
+				onPause?.()
+				setControlsVisible(true)
+				if (hideTimeoutRef.current) {
+					clearTimeout(hideTimeoutRef.current)
+				}
+			}
+		},
+		[onPlay, onPause, resetHideTimer, screenReader]
+	)
+
+	const handleTimeUpdate = useCallback(
+		(time: number) => {
+			setCurrentTime(time)
+			onTimeUpdate?.(time)
+		},
+		[onTimeUpdate]
+	)
+
+	const handleLoadedMetadata = useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
+		const video = event.currentTarget
+		setDuration(video.duration)
+		setIsLoading(false)
+	}, [])
+
+	const handleLoadStart = useCallback(() => {
+		setIsLoading(true)
+		setError(null)
+		screenReader.announceLoading(true)
+	}, [screenReader])
+
+	const handleLoadedData = useCallback(() => {
+		setIsLoading(false)
+		screenReader.announceLoading(false)
+	}, [screenReader])
+
+	const handleError = useCallback(
+		(e: Error) => {
+			setIsLoading(false)
+			setError(e.message || "An error occurred")
+			screenReader.announceError(e.message || "An error occurred")
+			onError?.(e)
+		},
+		[onError, screenReader]
+	)
+
+	const handleVolumeChange = useCallback(
+		(event: React.SyntheticEvent<HTMLVideoElement>) => {
+			const video = event.currentTarget
+			const newVolume = video.volume
+			const newMuted = video.muted
+
+			setVolume(newVolume)
+			setIsMuted(newMuted)
+			onVolumeChange?.(newVolume)
+		},
+		[onVolumeChange]
+	)
+
+	// Fullscreen change handler
+	useEffect(() => {
+		const handleFullscreenChange = () => {
+			const isCurrentlyFullscreen = !!document.fullscreenElement
+			setIsFullscreen(isCurrentlyFullscreen)
+			screenReader.announceFullscreen(isCurrentlyFullscreen)
+		}
+
+		document.addEventListener("fullscreenchange", handleFullscreenChange)
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange)
+		}
+	}, [screenReader])
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			if (hideTimeoutRef.current) {
+				clearTimeout(hideTimeoutRef.current)
+			}
+		}
+	}, [])
+
+	// Determine video source
+	const videoSrc =
+		qualities && qualities.length > 0
+			? qualities.find((q) => q.default)?.src ||
+				qualities[0]?.src ||
+				(typeof src === "string" ? src : src[0])
+			: typeof src === "string"
+				? src
+				: src[0]
+
+	return (
+		<>
+			<div
+				ref={containerRef}
+				className={cn(
+					"accessible-minimal-player theme-minimal relative overflow-hidden rounded-lg bg-black",
+					`theme-minimal-${theme}`,
+					isFocusVisible && "focus-visible-enabled",
+					className
+				)}
+				data-theme={theme}
+				onMouseMove={handleMouseMove}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				role="application"
+				aria-label={ariaLabel}
+				aria-describedby={ariaDescribedBy}
+				tabIndex={0}
+				data-testid="media-player">
+				<MediaPlayerRoot className="relative h-full w-full">
+					<MediaPlayerVideo
+						src={videoSrc}
+						poster={poster}
+						autoPlay={autoPlay}
+						muted={muted}
+						loop={loop}
+						onPlay={() => handlePlayStateChange(true)}
+						onPause={() => handlePlayStateChange(false)}
+						onEnded={onEnded}
+						onTimeUpdate={(e) => handleTimeUpdate(e.currentTarget.currentTime)}
+						onLoadStart={handleLoadStart}
+						onLoadedData={handleLoadedData}
+						onLoadedMetadata={handleLoadedMetadata}
+						onError={(e) => handleError(new Error("Video loading failed"))}
+						onVolumeChange={handleVolumeChange}
+						className="h-full w-full object-contain"
+						aria-hidden="true"
+					/>
+
+					{watermark && (
+						<div
+							className={cn("pointer-events-none absolute z-10", {
+								"top-4 left-4": watermark.position === "top-left",
+								"top-4 right-4": watermark.position === "top-right",
+								"bottom-4 left-4": watermark.position === "bottom-left",
+								"right-4 bottom-4": watermark.position === "bottom-right"
+							})}
+							style={{ opacity: watermark.opacity || 0.7 }}
+							aria-hidden="true">
+							<img
+								src={watermark.src}
+								alt=""
+								className={cn("h-auto", {
+									"w-12": watermark.size === "small",
+									"w-16": watermark.size === "medium",
+									"w-24": watermark.size === "large"
+								})}
+							/>
+						</div>
+					)}
+
+					<MinimalOverlay
+						visible={showCenterPlayButton && (!isPlaying || isLoading)}
+						showCenterButton={showCenterPlayButton}
+						isPlaying={isPlaying}
+						icons={icons}
+						onPlayPause={togglePlayPause}
+					/>
+
+					<MinimalControls
+						visible={controlsVisible || !autoHideControls || isHovered}
+						isPlaying={isPlaying}
+						icons={icons}
+						qualities={qualities}
+						showQualitySelector={showQualitySelector}
+						showSpeedControl={showSpeedControl}
+						thumbnails={thumbnails}
+						onUserInteractionStart={handleUserInteractionStart}
+						onUserInteractionEnd={handleUserInteractionEnd}
+						onSeek={(time) => {
+							if (videoRef.current) {
+								const validDuration = Number.isFinite(duration) && duration > 0 ? duration : Number.isFinite(videoRef.current.duration) ? videoRef.current.duration : 0
+								if (validDuration === 0) {
+									console.warn("Cannot seek: duration is not available")
+									return
+								}
+								const clampedTime = Math.max(0, Math.min(time, validDuration))
+								if (safeSetCurrentTime(videoRef.current, clampedTime)) {
+									onSeek?.(clampedTime)
+								}
+							}
+						}}
+					/>
+
+					{showLoadingSpinner && isLoading && <MinimalLoading />}
+				</MediaPlayerRoot>
+			</div>
+
+			{/* Keyboard Help Overlay */}
+			<KeyboardHelpOverlay
+				isOpen={showKeyboardHelp}
+				onClose={() => setShowKeyboardHelp(false)}
+				shortcuts={shortcuts}
+			/>
+
+			{/* Screen reader only status region */}
+			<div
+				id={`${ariaDescribedBy || "media-player"}-status`}
+				className="sr-only"
+				aria-live="polite"
+				aria-atomic="true">
+				{isLoading && "Loading media"}
+				{error && `Error: ${error}`}
+				{!isLoading && !error && (isPlaying ? "Playing" : "Paused")}
+			</div>
+
+			<style suppressHydrationWarning>{`
         .accessible-minimal-player {
           /* Accessibility-specific styles */
           --media-focus-outline: var(--media-focus-outline-width, 2px) solid #3b82f6;
-          --media-transition: ${preferences.prefersReducedMotion ? 'none' : 'var(--media-transition-duration, 200ms)'};
+          --media-transition: ${preferences.prefersReducedMotion ? "none" : "var(--media-transition-duration, 200ms)"};
         }
 
         .accessible-minimal-player:focus-visible {
@@ -556,6 +582,6 @@ export function AccessibleMinimalPlayer({
           border: 0;
         }
       `}</style>
-    </>
-  )
-}
+		</>
+	)
+}