@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

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

package/dist/src/components/variants/minimal/EnhancedMinimalMediaPlayer.d.ts

@@ -1,44 +0,0 @@
-import type { IconSet } from "../../icons";
-export interface EnhancedMinimalMediaPlayerProps {
-    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;
-    enableIntelligentPreloading?: boolean;
-    enablePerformanceMonitoring?: boolean;
-    showDebugPanel?: boolean;
-    preloadingStrategy?: 'conservative' | 'balanced' | 'aggressive';
-    enableReact19Optimizations?: boolean;
-}
-export declare function EnhancedMinimalMediaPlayer({ src, poster, autoPlay, muted, loop, autoHideControls, hideDelay, theme, customIcons, showCenterPlayButton, showLoadingSpinner, className, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onSeek, onError, watermark, qualities, showQualitySelector, showSpeedControl, thumbnails, enableIntelligentPreloading, enablePerformanceMonitoring, showDebugPanel, preloadingStrategy, enableReact19Optimizations, }: EnhancedMinimalMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
-export default EnhancedMinimalMediaPlayer;
-//# sourceMappingURL=EnhancedMinimalMediaPlayer.d.ts.map