@therealtinhtute/baroiplayer 1.0.0

package/src/components/unified/media-player.tsx

@@ -0,0 +1,75 @@
+/**
+ * Unified MediaPlayer - The primary media player component
+ * Consolidates MediaPlayer, VideoPlayer, and AudioPlayer into one component
+ */
+
+"use client"
+
+import { forwardRef } from "react"
+import { BaseMediaPlayer } from "./base-media-player"
+import type { MediaPlayerProps } from "../../types"
+
+export interface UnifiedMediaPlayerProps extends MediaPlayerProps {
+	// Media type - auto-detect if not specified
+	mediaType?: 'video' | 'audio' | 'auto'
+
+	// Video-specific props (ignored for audio)
+	poster?: string
+	aspectRatio?: string
+	width?: string | number
+	height?: string | number
+}
+
+/**
+ * The primary MediaPlayer component
+ *
+ * @example
+ * // Video player (auto-detected)
+ * <MediaPlayer src="/video.mp4" poster="/poster.jpg" />
+ *
+ * @example
+ * // Audio player (auto-detected)
+ * <MediaPlayer src="/audio.mp3" />
+ *
+ * @example
+ * // Explicit media type
+ * <MediaPlayer src="/media.mp4" mediaType="video" />
+ */
+export const MediaPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((props, ref) => {
+	return <BaseMediaPlayer {...props} ref={ref} />
+})
+
+MediaPlayer.displayName = "MediaPlayer"
+
+/**
+ * Video-specific component with video defaults
+ */
+export const VideoPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((props, ref) => {
+	return (
+		<BaseMediaPlayer
+			{...props}
+			ref={ref}
+			mediaType="video"
+			aspectRatio={props.aspectRatio || "16/9"}
+			showControls={props.showControls ?? true}
+		/>
+	)
+})
+
+VideoPlayer.displayName = "VideoPlayer"
+
+/**
+ * Audio-specific component with audio defaults
+ */
+export const AudioPlayer = forwardRef<HTMLDivElement, UnifiedMediaPlayerProps>((props, ref) => {
+	return (
+		<BaseMediaPlayer
+			{...props}
+			ref={ref}
+			mediaType="audio"
+			showControls={props.showControls ?? true}
+		/>
+	)
+})
+
+AudioPlayer.displayName = "AudioPlayer"

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

@@ -0,0 +1,561 @@
+"use client"
+
+import React, { useCallback, useEffect, useRef, useState } from "react"
+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'
+
+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
+}
+
+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,
+}: 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>{`
+        .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)'};
+        }
+
+        .accessible-minimal-player:focus-visible {
+          outline: var(--media-focus-outline);
+          outline-offset: 2px;
+        }
+
+        .accessible-minimal-player .focus-visible-enabled button:focus-visible,
+        .accessible-minimal-player .focus-visible-enabled [role="slider"]:focus-visible {
+          outline: var(--media-focus-outline);
+          outline-offset: 2px;
+        }
+
+        /* High contrast mode support */
+        @media (prefers-contrast: high) {
+          .accessible-minimal-player {
+            --media-bg-opacity: 1;
+            --media-border-width: 2px;
+          }
+        }
+
+        /* Reduced motion support */
+        @media (prefers-reduced-motion: reduce) {
+          .accessible-minimal-player * {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+          }
+        }
+
+        /* Screen reader only class */
+        .sr-only {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          white-space: nowrap;
+          border: 0;
+        }
+      `}</style>
+    </>
+  )
+}