@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,587 +0,0 @@
-"use client"
-
-import React, { useCallback, useEffect, useRef, useState } from "react"
-import {
-	createMediaKeyboardShortcuts,
-	useAccessibilityStyles,
-	useFocusVisible,
-	useKeyboardShortcuts,
-	useMediaPlayerFocus,
-	useMediaScreenReader
-} from "../../../hooks/accessibility"
-import { cn } from "../../../lib/utils"
-import { KeyboardHelpOverlay } from "../../accessibility/keyboard-help-overlay"
-import type { IconSet } from "../../icons"
-import { defaultMinimalIcons } from "../../icons"
-import { MediaPlayerRoot } from "../../media-player-root"
-import { MediaPlayerVideo } from "../../media-player-video"
-import { MinimalControls } from "./MinimalControls"
-import { MinimalLoading } from "./MinimalLoading"
-import { MinimalOverlay } from "./MinimalOverlay"
-
-/**
- * Safely sets currentTime on a video element, ensuring the value is finite
- */
-function safeSetCurrentTime(video: HTMLVideoElement, time: number): boolean {
-	if (!Number.isFinite(time)) {
-		console.warn(`Attempted to set non-finite currentTime: ${time}`)
-		return false
-	}
-
-	if (time < 0) {
-		console.warn(`Attempted to set negative currentTime: ${time}`)
-		return false
-	}
-
-	try {
-		video.currentTime = time
-		return true
-	} catch (error) {
-		console.error(`Failed to set currentTime to ${time}:`, error)
-		return false
-	}
-}
-
-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 validDuration = Number.isFinite(duration) && duration > 0 ? duration : Number.isFinite(videoRef.current.duration) ? videoRef.current.duration : 0
-			if (validDuration === 0) {
-				console.warn("Cannot seek forward: duration is not available")
-				return
-			}
-
-			const currentTime = Number.isFinite(videoRef.current.currentTime) ? videoRef.current.currentTime : 0
-			const newTime = Math.min(currentTime + seconds, validDuration)
-			if (safeSetCurrentTime(videoRef.current, newTime)) {
-				screenReader.announceTime(newTime, validDuration)
-			}
-		},
-		[duration, screenReader]
-	)
-
-	const seekBackward = useCallback(
-		(seconds = 10) => {
-			if (!videoRef.current) return
-
-			const currentTime = Number.isFinite(videoRef.current.currentTime) ? videoRef.current.currentTime : 0
-			const newTime = Math.max(currentTime - seconds, 0)
-			if (safeSetCurrentTime(videoRef.current, 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">
-					<MediaPlayerVideo
-						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
-						visible={showCenterPlayButton && (!isPlaying || isLoading)}
-						showCenterButton={showCenterPlayButton}
-						isPlaying={isPlaying}
-						icons={icons}
-						onPlayPause={togglePlayPause}
-					/>
-
-					<MinimalControls
-						visible={controlsVisible || !autoHideControls || isHovered}
-						isPlaying={isPlaying}
-						icons={icons}
-						qualities={qualities}
-						showQualitySelector={showQualitySelector}
-						showSpeedControl={showSpeedControl}
-						thumbnails={thumbnails}
-						onUserInteractionStart={handleUserInteractionStart}
-						onUserInteractionEnd={handleUserInteractionEnd}
-						onSeek={(time) => {
-							if (videoRef.current) {
-								const validDuration = Number.isFinite(duration) && duration > 0 ? duration : Number.isFinite(videoRef.current.duration) ? videoRef.current.duration : 0
-								if (validDuration === 0) {
-									console.warn("Cannot seek: duration is not available")
-									return
-								}
-								const clampedTime = Math.max(0, Math.min(time, validDuration))
-								if (safeSetCurrentTime(videoRef.current, clampedTime)) {
-									onSeek?.(clampedTime)
-								}
-							}
-						}}
-					/>
-
-					{showLoadingSpinner && isLoading && <MinimalLoading />}
-				</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 suppressHydrationWarning>{`
-        .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>
-		</>
-	)
-}