@therealtinhtute/baroiplayer 1.0.0

package/src/components/LoadingState.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import React from "react"
+import { cn } from "../lib/utils"
+import { AnimateLoading } from "./AnimateLoading"
+
+export type LoadingVariant = "animate" | "spinner" | "skeleton" | "dots"
+export type LoadingContext = "initial" | "seeking" | "buffering"
+export type LoadingSize = "sm" | "md" | "lg" | "xl"
+
+export interface LoadingStateProps {
+  variant?: LoadingVariant
+  context?: LoadingContext
+  size?: LoadingSize
+  color?: string
+  message?: string
+  showMessage?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+const sizeMap: Record<LoadingSize, { container: string; spinner: string; dots: string }> = {
+  sm: {
+    container: "h-8 w-8",
+    spinner: "h-6 w-6 border-2",
+    dots: "h-1.5 w-1.5"
+  },
+  md: {
+    container: "h-12 w-12",
+    spinner: "h-10 w-10 border-3",
+    dots: "h-2 w-2"
+  },
+  lg: {
+    container: "h-16 w-16",
+    spinner: "h-14 w-14 border-4",
+    dots: "h-2.5 w-2.5"
+  },
+  xl: {
+    container: "h-20 w-20",
+    spinner: "h-18 w-18 border-4",
+    dots: "h-3 w-3"
+  }
+}
+
+const contextStyles: Record<LoadingContext, { wrapper: string; background: string }> = {
+  initial: {
+    wrapper: "absolute inset-0 z-50 flex items-center justify-center",
+    background: "bg-black/80"
+  },
+  seeking: {
+    wrapper: "absolute inset-0 z-40 flex items-center justify-center",
+    background: "bg-black/40"
+  },
+  buffering: {
+    wrapper: "absolute inset-0 z-45 flex items-center justify-center",
+    background: "bg-black/60"
+  }
+}
+
+// Default AnimateLoading wrapper component
+export const AnimateLoadingWrapper = function AnimateLoadingWrapper({
+  context = "initial",
+  message,
+  className,
+  textSize = "text-sm"
+}: {
+  context?: LoadingContext
+  message?: string
+  className?: string
+  textSize?: string
+}) {
+  const contextStyle = contextStyles[context]
+  
+  const getLoadingText = () => {
+    if (message) return message
+    
+    switch (context) {
+      case "initial":
+        return "Loading video..."
+      case "seeking":
+        return "Seeking..."
+      case "buffering":
+        return "Buffering..."
+      default:
+        return "Loading..."
+    }
+  }
+  
+  return (
+    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
+      <AnimateLoading 
+        loadingText={getLoadingText()}
+        className={cn("text-white", textSize)}
+      />
+    </div>
+  )
+}
+
+export const LoadingState = function LoadingState({
+  variant = "animate",
+  context = "initial",
+  size = "md",
+  color,
+  message,
+  showMessage = true,
+  className,
+  style
+}: LoadingStateProps) {
+  const sizes = sizeMap[size]
+  const contextStyle = contextStyles[context]
+
+  // Use AnimateLoading as default
+  if (variant === "animate") {
+    return (
+      <AnimateLoadingWrapper
+        context={context}
+        message={message}
+        className={className}
+        textSize={size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm"}
+      />
+    )
+  }
+
+  const renderLoadingIndicator = () => {
+    switch (variant) {
+      case "spinner":
+        return (
+          <div
+            className={cn(
+              "minimal-loading-spinner animate-spin rounded-full",
+              "border-white/20 border-t-cyan-500",
+              sizes.spinner,
+              className
+            )}
+            style={{
+              borderTopColor: color || undefined,
+              ...style
+            }}
+          />
+        )
+
+      case "dots":
+        return (
+          <div className="flex items-center gap-1">
+            {[0, 1, 2].map((i) => (
+              <div
+                key={i}
+                className={cn(
+                  "minimal-loading-dot rounded-full bg-cyan-500",
+                  sizes.dots,
+                  className
+                )}
+                style={{
+                  backgroundColor: color || undefined,
+                  animationDelay: `${i * 150}ms`,
+                  ...style
+                }}
+              />
+            ))}
+          </div>
+        )
+
+      case "skeleton":
+        return (
+          <div className={cn("space-y-3", className)}>
+            <div className="minimal-loading-skeleton h-4 w-32 rounded bg-white/10" />
+            <div className="minimal-loading-skeleton h-3 w-24 rounded bg-white/10" />
+            <div className="minimal-loading-skeleton h-3 w-28 rounded bg-white/10" />
+          </div>
+        )
+
+      default:
+        return null
+    }
+  }
+
+  const getMessage = () => {
+    if (message) return message
+    
+    switch (context) {
+      case "initial":
+        return "Loading video..."
+      case "seeking":
+        return "Seeking..."
+      case "buffering":
+        return "Buffering..."
+      default:
+        return "Loading..."
+    }
+  }
+
+  return (
+    <div className={cn(contextStyle.wrapper, contextStyle.background)}>
+      <div className="flex flex-col items-center gap-4">
+        <div className={cn(sizes.container, "flex items-center justify-center")}>
+          {renderLoadingIndicator()}
+        </div>
+        
+        {showMessage && (
+          <div className="text-center">
+            <p className="font-medium text-sm text-white/90">
+              {getMessage()}
+            </p>
+            {context === "buffering" && (
+              <p className="mt-1 text-white/60 text-xs">
+                Please wait...
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Custom loading component wrapper
+export interface CustomLoadingProps {
+  children: React.ReactNode
+  context?: LoadingContext
+  className?: string
+}
+
+export const CustomLoading = function CustomLoading({
+  children,
+  context = "initial",
+  className
+}: CustomLoadingProps) {
+  const contextStyle = contextStyles[context]
+  
+  return (
+    <div className={cn(contextStyle.wrapper, contextStyle.background, className)}>
+      {children}
+    </div>
+  )
+}
+
+// Export default presets
+export const LoadingPresets = {
+  Initial: (props: Partial<LoadingStateProps>) => (
+    <LoadingState variant="animate" context="initial" size="md" {...props} />
+  ),
+  Seeking: (props: Partial<LoadingStateProps>) => (
+    <LoadingState variant="animate" context="seeking" size="sm" {...props} />
+  ),
+  Buffering: (props: Partial<LoadingStateProps>) => (
+    <LoadingState variant="animate" context="buffering" size="sm" {...props} />
+  )
+}

package/src/components/accessibility/keyboard-help-overlay.tsx

@@ -0,0 +1,213 @@
+import React from 'react'
+import { cn } from '../../lib/utils'
+import type { KeyboardShortcut } from '../../hooks/accessibility/use-keyboard-shortcuts'
+
+interface KeyboardHelpOverlayProps {
+  isOpen: boolean
+  onClose: () => void
+  shortcuts: Array<{
+    key: string
+    description: string
+    modifiers?: {
+      ctrl?: boolean
+      alt?: boolean
+      shift?: boolean
+    }
+  }>
+  className?: string
+}
+
+export function KeyboardHelpOverlay({
+  isOpen,
+  onClose,
+  shortcuts,
+  className
+}: KeyboardHelpOverlayProps) {
+  // Handle escape key to close
+  React.useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  // Focus trap within the overlay
+  React.useEffect(() => {
+    if (!isOpen) return
+
+    const overlay = document.querySelector('[data-keyboard-help-overlay]')
+    if (!overlay) return
+
+    const focusableElements = Array.from(
+      overlay.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ) as HTMLElement[]
+
+    if (focusableElements.length === 0) return
+
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    // Focus the close button initially
+    const closeButton = overlay.querySelector('[data-close-button]') as HTMLElement
+    closeButton?.focus()
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement.focus()
+        }
+      }
+    }
+
+    document.addEventListener('keydown', handleTabKey)
+    return () => document.removeEventListener('keydown', handleTabKey)
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  const formatKey = (key: string, modifiers?: { ctrl?: boolean; alt?: boolean; shift?: boolean }) => {
+    const parts = []
+    
+    if (modifiers?.ctrl) parts.push('Ctrl')
+    if (modifiers?.alt) parts.push('Alt')
+    if (modifiers?.shift) parts.push('Shift')
+    
+    // Format special keys
+    let keyDisplay = key
+    switch (key) {
+      case ' ':
+        keyDisplay = 'Space'
+        break
+      case 'ArrowUp':
+        keyDisplay = '↑'
+        break
+      case 'ArrowDown':
+        keyDisplay = '↓'
+        break
+      case 'ArrowLeft':
+        keyDisplay = '←'
+        break
+      case 'ArrowRight':
+        keyDisplay = '→'
+        break
+      default:
+        keyDisplay = key.toUpperCase()
+    }
+    
+    parts.push(keyDisplay)
+    return parts.join(' + ')
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center bg-black/50',
+        'backdrop-blur-sm',
+        className
+      )}
+      data-keyboard-help-overlay
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose()
+        }
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="keyboard-help-title"
+      aria-describedby="keyboard-help-description"
+    >
+      <div className={cn(
+        'w-full max-w-md rounded-lg bg-white p-6 shadow-xl',
+        'dark:bg-gray-900 dark:text-white',
+        'focus-within:outline-none',
+        "fade-in-0 zoom-in-95 animate-in duration-200"
+      )}>
+        <div className="mb-4 flex items-center justify-between">
+          <h2
+            id="keyboard-help-title"
+            className="font-semibold text-lg"
+          >
+            Keyboard Shortcuts
+          </h2>
+          <button
+            data-close-button
+            onClick={onClose}
+            className={cn(
+              'rounded-md p-2 text-gray-500 transition-colors',
+              'hover:bg-gray-100 hover:text-gray-700',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500',
+              'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'
+            )}
+            aria-label="Close keyboard shortcuts help"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <p
+          id="keyboard-help-description"
+          className="mb-4 text-gray-600 text-sm dark:text-gray-400"
+        >
+          Use these keyboard shortcuts to control the media player:
+        </p>
+
+        <div className="max-h-64 overflow-y-auto">
+          <dl className="space-y-3">
+            {shortcuts.map(({ key, description, modifiers }, index) => (
+              <div
+                key={`${key}-${index}`}
+                className="flex items-center justify-between"
+              >
+                <dt className="text-gray-600 text-sm dark:text-gray-400">
+                  {description}
+                </dt>
+                <dd>
+                  <kbd className={cn(
+                    "inline-flex items-center rounded px-2 py-1 font-mono text-xs",
+                    "border border-gray-300 bg-gray-100 text-gray-800",
+                    "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+                  )}>
+                    {formatKey(key, modifiers)}
+                  </kbd>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+
+        <div className="mt-4 text-gray-500 text-xs dark:text-gray-400">
+          Press <kbd className="rounded bg-gray-100 px-1 dark:bg-gray-800">Esc</kbd> to close this help
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/audio-player.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { forwardRef } from "react"
+import { useKeyboardControls } from "../hooks/use-keyboard-controls"
+import { useMediaPlayer } from "../hooks/use-media-player"
+import { cn } from "../lib/utils"
+import type { AudioPlayerProps } from "../types/index"
+
+export const AudioPlayer = forwardRef<HTMLDivElement, AudioPlayerProps>(
+	(
+		{
+			src,
+			className,
+			children,
+			keyboardControls = true,
+			showControls = true,
+			customControls = false,
+			...options
+		},
+		ref
+	) => {
+		const { state, controls, mediaRef, containerRef } = useMediaPlayer({
+			src,
+			...options
+		})
+
+		useKeyboardControls({
+			enabled: keyboardControls,
+			state,
+			controls
+		})
+
+		const renderSources = () => {
+			if (Array.isArray(src)) {
+				return src.map((source, index) => <source key={index} src={source} />)
+			}
+			return null
+		}
+
+		const audioProps = {
+			ref: mediaRef as React.RefObject<HTMLAudioElement>,
+			controls: showControls && !customControls,
+			className: "w-full",
+			...(Array.isArray(src) ? {} : { src })
+		}
+
+		return (
+			<div
+				ref={ref || containerRef}
+				className={cn("relative", "focus-within:outline-none", className)}
+				tabIndex={0}>
+				<audio {...audioProps}>
+					{Array.isArray(src) && renderSources()}
+					Your browser does not support the audio element.
+				</audio>
+
+				{state.error && (
+					<div className="mt-2 rounded-md border border-red-300 bg-red-100 p-3">
+						<div className="text-red-800">
+							<p className="font-semibold">Error</p>
+							<p className="text-sm">{state.error}</p>
+						</div>
+					</div>
+				)}
+
+				{state.isLoading && (
+					<div className="mt-2 rounded-md border border-gray-300 bg-gray-100 p-3">
+						<div className="flex items-center space-x-2 text-gray-600">
+							<div className="h-4 w-4 animate-spin rounded-full border-gray-600 border-b-2"></div>
+							<span className="text-sm">Loading...</span>
+						</div>
+					</div>
+				)}
+
+				{customControls && typeof children === "function" && (
+					<div className="mt-2">{children({ state, controls })}</div>
+				)}
+
+				{customControls && typeof children !== "function" && <div className="mt-2">{children}</div>}
+			</div>
+		)
+	}
+)
+
+AudioPlayer.displayName = "AudioPlayer"

package/src/components/basic/index.ts

@@ -0,0 +1,37 @@
+// Basic Media Player Components
+export { AudioPlayer } from "../audio-player";
+export { MediaPlayer } from "../media-player"; 
+export { VideoPlayer } from "../video-player";
+export { SimpleVideoPlayer } from "../simple-video-player";
+
+// Modern React Player
+export { ModernMediaPlayer } from "../react-player-wrapper";
+export type { ModernMediaPlayerProps } from "../react-player-wrapper";
+
+// Basic UI Components  
+export { FullscreenButton } from "../ui/fullscreen-button";
+export { PlayButton } from "../ui/play-button";
+export { SeekBar } from "../ui/seek-bar";
+export { TimeDisplay } from "../ui/time-display";
+export { VolumeControl } from "../ui/volume-control";
+
+// DiceUI-style Basic Components
+export { MediaPlayerAudio } from "../media-player-audio";
+export {
+  MediaPlayerControls,
+  MediaPlayerControlsOverlay
+} from "../media-player-controls";
+export { MediaPlayerError } from "../media-player-error";
+export { MediaPlayerFullscreen } from "../media-player-fullscreen";
+export { MediaPlayerLoading } from "../media-player-loading";
+export { MediaPlayerPlay } from "../media-player-play";
+export { MediaPlayerRoot } from "../media-player-root";
+export { MediaPlayerSeek } from "../media-player-seek";
+export { MediaPlayerTime } from "../media-player-time";
+export { MediaPlayerTooltip } from "../media-player-tooltip";
+export { MediaPlayerVideo } from "../media-player-video";
+export { MediaPlayerVolume } from "../media-player-volume";
+
+// Basic Examples
+export { BasicVideoPlayer } from "../examples/basic-video-player";
+export { CustomControlsExample } from "../examples/custom-controls-example";