@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/__tests__/media-player-react19.test.tsx

@@ -1,457 +0,0 @@
-import { act, render, screen, waitFor } from "@testing-library/react"
-import { userEvent } from "@testing-library/user-event"
-import { beforeEach, describe, expect, it, vi } from "vitest"
-import { MediaProvider } from "../../context/media-provider"
-import { setupMediaMocks } from "../../test/media-mocks"
-import { MediaPlayer } from "../media-player"
-
-// Import React 19 hooks
-import { useActionState, useOptimistic, useTransition } from "react"
-
-describe("Media Player React 19 Features", () => {
-	beforeEach(() => {
-		setupMediaMocks()
-		vi.clearAllMocks()
-		vi.useFakeTimers()
-	})
-
-	afterEach(() => {
-		vi.useRealTimers()
-	})
-
-	describe("useTransition Implementation", () => {
-		it("should handle media state transitions with loading indicators", async () => {
-			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableTransitions={true} />
-				</MediaProvider>
-			)
-
-			const playButton = screen.getByRole("button", { name: /play/i })
-			expect(playButton).toBeInTheDocument()
-
-			// Start playback - should trigger transition
-			await user.click(playButton)
-
-			// Should show loading state during transition
-			await waitFor(() => {
-				expect(screen.getByTestId("transition-loading")).toBeInTheDocument()
-			})
-
-			// Complete transition
-			act(() => {
-				vi.advanceTimersByTime(100)
-			})
-
-			await waitFor(() => {
-				expect(screen.queryByTestId("transition-loading")).not.toBeInTheDocument()
-				expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
-			})
-		})
-
-		it("should handle seeking transitions separately from playback transitions", async () => {
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableTransitions={true} />
-				</MediaProvider>
-			)
-
-			// Start playback first
-			const playButton = screen.getByRole("button", { name: /play/i })
-			await user.click(playButton)
-
-			// Wait for playback to start
-			await waitFor(() => {
-				expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
-			})
-
-			// Then seek - should trigger separate transition
-			const seekBar = screen.getByRole("slider", { name: /seek/i })
-			await user.click(seekBar)
-			await user.keyboard("{ArrowRight}")
-
-			// Should show seeking state
-			await waitFor(() => {
-				expect(screen.getByTestId("seeking-transition")).toBeInTheDocument()
-			})
-
-			// Complete seeking transition
-			act(() => {
-				vi.advanceTimersByTime(50)
-			})
-
-			await waitFor(() => {
-				expect(screen.queryByTestId("seeking-transition")).not.toBeInTheDocument()
-			})
-		})
-	})
-
-	describe("useOptimistic Implementation", () => {
-		it("should provide immediate UI feedback for volume changes", async () => {
-			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableOptimistic={true} />
-				</MediaProvider>
-			)
-
-			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
-
-			// Initial volume should be 1.0
-			expect(volumeSlider).toHaveValue("1")
-
-			// Change volume - should update optimistically
-			await user.click(volumeSlider)
-			await user.keyboard("{ArrowDown}")
-
-			// Optimistic update should be immediate
-			expect(volumeSlider).toHaveValue("0.9")
-			expect(screen.getByTestId("optimistic-volume")).toHaveTextContent("90%")
-
-			// Simulate async operation completion
-			act(() => {
-				vi.advanceTimersByTime(100)
-			})
-
-			// State should be consistent after async operation
-			expect(volumeSlider).toHaveValue("0.9")
-		})
-
-		it("should handle optimistic seek operations", async () => {
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableOptimistic={true} duration={100} />
-				</MediaProvider>
-			)
-
-			const seekBar = screen.getByRole("slider", { name: /seek/i })
-			const timeDisplay = screen.getByTestId("time-display")
-
-			// Initial time should be 0:00
-			expect(timeDisplay).toHaveTextContent("0:00")
-
-			// Seek to 30 seconds - should update optimistically
-			await user.click(seekBar)
-			await user.keyboard("3") // Should seek to 30%
-
-			// Optimistic update should be immediate
-			expect(timeDisplay).toHaveTextContent("0:30")
-			expect(screen.getByTestId("optimistic-time")).toHaveTextContent("30%")
-
-			// Simulate media element updating
-			const video = screen.getByRole("application") as HTMLVideoElement
-			act(() => {
-				video.currentTime = 30
-				const seekingEvent = new Event("seeking")
-				video.dispatchEvent(seekingEvent)
-
-				vi.advanceTimersByTime(100)
-
-				const seekedEvent = new Event("seeked")
-				video.dispatchEvent(seekedEvent)
-			})
-
-			await waitFor(() => {
-				expect(timeDisplay).toHaveTextContent("0:30")
-			})
-		})
-
-		it("should revert optimistic updates on error", async () => {
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableOptimistic={true} />
-				</MediaProvider>
-			)
-
-			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
-
-			// Change volume
-			await user.click(volumeSlider)
-			await user.keyboard("{ArrowUp}")
-
-			// Optimistic update should show
-			expect(volumeSlider).toHaveValue("1")
-
-			// Simulate error
-			const video = screen.getByRole("application") as HTMLVideoElement
-			act(() => {
-				video.error = new Error("Volume change failed")
-				const errorEvent = new Event("error")
-				video.dispatchEvent(errorEvent)
-			})
-
-			await waitFor(() => {
-				expect(volumeSlider).toHaveValue("1") // Should revert to previous state
-				expect(screen.getByTestId("error-message")).toBeInTheDocument()
-			})
-		})
-	})
-
-	describe("useActionState Implementation", () => {
-		it("should handle media settings form with async submission", async () => {
-			const mockSubmit = vi.fn().mockResolvedValue({ success: true })
-			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" showSettings={true} onSettingsChange={mockSubmit} />
-				</MediaProvider>
-			)
-
-			// Open settings panel
-			const settingsButton = screen.getByRole("button", { name: /settings/i })
-			await user.click(settingsButton)
-
-			// Change playback speed
-			const speedSelect = screen.getByRole("combobox", { name: /playback speed/i })
-			await user.selectOptions(speedSelect, "1.5")
-
-			// Enable subtitles
-			const subtitleToggle = screen.getByRole("switch", { name: /subtitles/i })
-			await user.click(subtitleToggle)
-
-			// Submit form
-			const saveButton = screen.getByRole("button", { name: /save settings/i })
-			await user.click(saveButton)
-
-			// Should show loading state
-			expect(saveButton).toBeDisabled()
-			expect(screen.getByText(/saving/i)).toBeInTheDocument()
-
-			// Complete async operation
-			act(() => {
-				vi.advanceTimersByTime(200)
-			})
-
-			await waitFor(() => {
-				expect(saveButton).not.toBeDisabled()
-				expect(screen.getByText(/settings saved/i)).toBeInTheDocument()
-				expect(mockSubmit).toHaveBeenCalledWith({
-					playbackRate: 1.5,
-					subtitles: true
-				})
-			})
-		})
-
-		it("should handle form submission errors gracefully", async () => {
-			const mockSubmit = vi.fn().mockRejectedValue(new Error("Network error"))
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" showSettings={true} onSettingsChange={mockSubmit} />
-				</MediaProvider>
-			)
-
-			// Open settings and submit
-			const settingsButton = screen.getByRole("button", { name: /settings/i })
-			await user.click(settingsButton)
-
-			const saveButton = screen.getByRole("button", { name: /save settings/i })
-			await user.click(saveButton)
-
-			await waitFor(() => {
-				expect(screen.getByText(/network error/i)).toBeInTheDocument()
-				expect(saveButton).not.toBeDisabled()
-			})
-		})
-
-		it("should validate form inputs before submission", async () => {
-			const mockSubmit = vi.fn()
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" showSettings={true} onSettingsChange={mockSubmit} />
-				</MediaProvider>
-			)
-
-			const settingsButton = screen.getByRole("button", { name: /settings/i })
-			await user.click(settingsButton)
-
-			// Try to set invalid volume
-			const volumeInput = screen.getByRole("spinbutton", { name: /volume/i })
-			await user.clear(volumeInput)
-			await user.type(volumeInput, "150") // Invalid: > 100
-
-			const saveButton = screen.getByRole("button", { name: /save settings/i })
-			await user.click(saveButton)
-
-			// Should show validation error
-			await waitFor(() => {
-				expect(screen.getByText(/volume must be between 0 and 100/i)).toBeInTheDocument()
-				expect(mockSubmit).not.toHaveBeenCalled()
-			})
-		})
-	})
-
-	describe("React 19 Concurrent Features", () => {
-		it("should handle Suspense boundaries for media loading", async () => {
-			const LazyMediaPlayer = vi.fn().mockImplementation(() => {
-				throw new Promise(() => {}) // Never resolves to test loading state
-			})
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" component={LazyMediaPlayer} />
-				</MediaProvider>
-			)
-
-			// Should show loading fallback
-			expect(screen.getByTestId("media-loading-fallback")).toBeInTheDocument()
-			expect(screen.getByText(/loading media/i)).toBeInTheDocument()
-		})
-
-		it("should handle startTransition for non-urgent updates", async () => {
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableConcurrentFeatures={true} />
-				</MediaProvider>
-			)
-
-			const qualitySelector = screen.getByRole("combobox", { name: /quality/i })
-
-			// Change quality - should use startTransition
-			await user.selectOptions(qualitySelector, "1080p")
-
-			// UI should remain responsive during transition
-			const playButton = screen.getByRole("button", { name: /play/i })
-			expect(playButton).not.toBeDisabled()
-
-			// Should show quality change indicator
-			expect(screen.getByTestId("quality-changing")).toBeInTheDocument()
-
-			// Complete transition
-			act(() => {
-				vi.advanceTimersByTime(300)
-			})
-
-			await waitFor(() => {
-				expect(screen.queryByTestId("quality-changing")).not.toBeInTheDocument()
-				expect(screen.getByDisplayValue("1080p")).toBeInTheDocument()
-			})
-		})
-
-		it("should handle concurrent media operations", async () => {
-			const user = userEvent.setup()
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableConcurrentFeatures={true} />
-				</MediaProvider>
-			)
-
-			const playButton = screen.getByRole("button", { name: /play/i })
-			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
-			const seekBar = screen.getByRole("slider", { name: /seek/i })
-
-			// Trigger multiple operations concurrently
-			await user.click(playButton)
-			await user.click(volumeSlider)
-			await user.keyboard("{ArrowDown}")
-			await user.click(seekBar)
-			await user.keyboard("{ArrowRight}")
-
-			// All operations should complete without blocking UI
-			await waitFor(() => {
-				expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
-				expect(volumeSlider).toHaveValue("0.9")
-				expect(screen.getByTestId("current-time")).not.toHaveTextContent("0:00")
-			})
-		})
-	})
-
-	describe("React 19 Server Components Integration", () => {
-		it("should handle streaming server-side rendering", async () => {
-			// Mock streaming SSR
-			const mockStream = {
-				write: vi.fn(),
-				end: vi.fn()
-			}
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" streaming={true} stream={mockStream} />
-				</MediaProvider>
-			)
-
-			// Should render shell immediately
-			expect(screen.getByRole("application")).toBeInTheDocument()
-
-			// Should stream content when ready
-			await waitFor(() => {
-				expect(mockStream.write).toHaveBeenCalledWith('<div data-testid="media-content">')
-			})
-		})
-
-		it("should handle progressive hydration", async () => {
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" progressiveHydration={true} />
-				</MediaProvider>
-			)
-
-			// Should render static content immediately
-			expect(screen.getByTestId("media-player-shell")).toBeInTheDocument()
-
-			// Should hydrate interactive elements progressively
-			await waitFor(() => {
-				expect(screen.getByRole("button", { name: /play/i })).toBeInTheDocument()
-				expect(screen.getByRole("slider", { name: /volume/i })).toBeInTheDocument()
-			})
-		})
-	})
-
-	describe("Performance Optimizations with React 19", () => {
-		it("should use React Compiler optimizations", async () => {
-			const renderSpy = vi.spyOn(console, "log").mockImplementation(() => {})
-
-			render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableCompilerOptimizations={true} />
-				</MediaProvider>
-			)
-
-			// Should log compiler optimizations
-			expect(renderSpy).toHaveBeenCalledWith(
-				expect.stringContaining("React Compiler optimizations applied")
-			)
-
-			renderSpy.mockRestore()
-		})
-
-		it("should optimize re-renders with useMemo and useCallback", async () => {
-			const user = userEvent.setup()
-
-			const { rerender } = render(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableOptimizations={true} />
-				</MediaProvider>
-			)
-
-			const initialRenderCount = vi.fn().mockImplementation(() => {})
-			initialRenderCount()
-
-			// Re-render with same props
-			rerender(
-				<MediaProvider>
-					<MediaPlayer src="test-video.mp4" enableOptimizations={true} />
-				</MediaProvider>
-			)
-
-			// Component should not re-render unnecessarily
-			expect(initialRenderCount).toHaveBeenCalledTimes(1)
-		})
-	})
-})

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

@@ -1,207 +0,0 @@
-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
-}
-
-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]
-
-		if (!firstElement || !lastElement) return
-
-		// 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>
-	)
-}