@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -1,213 +1,205 @@
-import React from 'react'
-import { cn } from '../../lib/utils'
-import type { KeyboardShortcut } from '../../hooks/accessibility/use-keyboard-shortcuts'
+import React from "react"
+import type { KeyboardShortcut } from "../../hooks/accessibility/use-keyboard-shortcuts"
+import { cn } from "../../lib/utils"
 
 interface KeyboardHelpOverlayProps {
-  isOpen: boolean
-  onClose: () => void
-  shortcuts: Array<{
-    key: string
-    description: string
-    modifiers?: {
-      ctrl?: boolean
-      alt?: boolean
-      shift?: boolean
-    }
-  }>
-  className?: string
+	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
+	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>
-  )
-}
+	// 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/basic/index.ts

@@ -1,37 +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";
+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";
+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";
+// 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 { 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";
+	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";
+export { BasicVideoPlayer } from "../examples/basic-video-player"
+export { CustomControlsExample } from "../examples/custom-controls-example"