@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/hooks/accessibility/use-keyboard-shortcuts.ts

@@ -1,152 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"
-
-export interface KeyboardShortcut {
-	key: string
-	ctrlKey?: boolean
-	altKey?: boolean
-	shiftKey?: boolean
-	action: () => void
-	description: string
-	preventDefault?: boolean
-}
-
-export interface UseKeyboardShortcutsOptions {
-	shortcuts: KeyboardShortcut[]
-	enabled?: boolean
-	target?: HTMLElement | null
-}
-
-export function useKeyboardShortcuts({
-	shortcuts,
-	enabled = true,
-	target
-}: UseKeyboardShortcutsOptions) {
-	const shortcutsRef = useRef(shortcuts)
-	shortcutsRef.current = shortcuts
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent) => {
-			if (!enabled) return
-
-			// Don't trigger shortcuts when user is typing in inputs
-			if (
-				event.target instanceof HTMLInputElement ||
-				event.target instanceof HTMLTextAreaElement ||
-				(event.target as HTMLElement)?.contentEditable === "true"
-			) {
-				return
-			}
-
-			const shortcut = shortcutsRef.current.find(
-				(s) =>
-					s.key.toLowerCase() === event.key.toLowerCase() &&
-					!!s.ctrlKey === event.ctrlKey &&
-					!!s.altKey === event.altKey &&
-					!!s.shiftKey === event.shiftKey
-			)
-
-			if (shortcut) {
-				if (shortcut.preventDefault !== false) {
-					event.preventDefault()
-				}
-				shortcut.action()
-			}
-		},
-		[enabled]
-	)
-
-	useEffect(() => {
-		const element = target || document
-		element.addEventListener("keydown", handleKeyDown as EventListener)
-
-		return () => {
-			element.removeEventListener("keydown", handleKeyDown as EventListener)
-		}
-	}, [handleKeyDown, target])
-
-	return {
-		shortcuts: shortcuts.map((s) => ({
-			key: s.key,
-			description: s.description,
-			modifiers: {
-				ctrl: s.ctrlKey,
-				alt: s.altKey,
-				shift: s.shiftKey
-			}
-		}))
-	}
-}
-
-// Pre-defined media player shortcuts
-export const createMediaKeyboardShortcuts = (controls: {
-	play: () => void
-	pause: () => void
-	togglePlayPause: () => void
-	seekForward: (seconds?: number) => void
-	seekBackward: (seconds?: number) => void
-	volumeUp: () => void
-	volumeDown: () => void
-	toggleMute: () => void
-	toggleFullscreen: () => void
-	showHelp?: () => void
-}): KeyboardShortcut[] => [
-	{
-		key: " ",
-		action: controls.togglePlayPause,
-		description: "Play/Pause"
-	},
-	{
-		key: "k",
-		action: controls.togglePlayPause,
-		description: "Play/Pause (K)"
-	},
-	{
-		key: "ArrowLeft",
-		action: () => controls.seekBackward(10),
-		description: "Seek backward 10 seconds"
-	},
-	{
-		key: "ArrowRight",
-		action: () => controls.seekForward(10),
-		description: "Seek forward 10 seconds"
-	},
-	{
-		key: "j",
-		action: () => controls.seekBackward(10),
-		description: "Seek backward 10 seconds (J)"
-	},
-	{
-		key: "l",
-		action: () => controls.seekForward(10),
-		description: "Seek forward 10 seconds (L)"
-	},
-	{
-		key: "ArrowUp",
-		action: controls.volumeUp,
-		description: "Volume up"
-	},
-	{
-		key: "ArrowDown",
-		action: controls.volumeDown,
-		description: "Volume down"
-	},
-	{
-		key: "m",
-		action: controls.toggleMute,
-		description: "Toggle mute"
-	},
-	{
-		key: "f",
-		action: controls.toggleFullscreen,
-		description: "Toggle fullscreen"
-	},
-	...(controls.showHelp
-		? [
-				{
-					key: "?",
-					action: controls.showHelp,
-					description: "Show keyboard shortcuts help"
-				}
-			]
-		: [])
-]

package/src/hooks/accessibility/use-screen-reader.ts

@@ -1,212 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"
-
-export type AnnouncementPriority = "assertive" | "polite" | "off"
-
-export interface UseScreenReaderOptions {
-	defaultPriority?: AnnouncementPriority
-	debounceMs?: number
-}
-
-export function useScreenReader({
-	defaultPriority = "polite",
-	debounceMs = 100
-}: UseScreenReaderOptions = {}) {
-	const liveRegionRef = useRef<HTMLDivElement | null>(null)
-	const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
-
-	// Create or get the live region for announcements
-	const getLiveRegion = useCallback((priority: AnnouncementPriority) => {
-		if (!liveRegionRef.current) {
-			const liveRegion = document.createElement("div")
-			liveRegion.setAttribute("aria-live", priority)
-			liveRegion.setAttribute("aria-atomic", "true")
-			liveRegion.setAttribute("class", "sr-only")
-			liveRegion.style.cssText = `
-        position: absolute !important;
-        width: 1px !important;
-        height: 1px !important;
-        padding: 0 !important;
-        margin: -1px !important;
-        overflow: hidden !important;
-        clip: rect(0, 0, 0, 0) !important;
-        white-space: nowrap !important;
-        border: 0 !important;
-      `
-			document.body.appendChild(liveRegion)
-			liveRegionRef.current = liveRegion
-		}
-
-		// Update priority if needed
-		if (liveRegionRef.current.getAttribute("aria-live") !== priority) {
-			liveRegionRef.current.setAttribute("aria-live", priority)
-		}
-
-		return liveRegionRef.current
-	}, [])
-
-	// Announce a message to screen readers
-	const announce = useCallback(
-		(message: string, priority: AnnouncementPriority = defaultPriority) => {
-			if (!message.trim() || priority === "off") return
-
-			// Clear existing timeout
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current)
-			}
-
-			// Debounce announcements
-			timeoutRef.current = setTimeout(() => {
-				const liveRegion = getLiveRegion(priority)
-
-				// Clear and then set the message to ensure it's announced
-				liveRegion.textContent = ""
-
-				// Use requestAnimationFrame to ensure the clear happens first
-				requestAnimationFrame(() => {
-					liveRegion.textContent = message
-				})
-			}, debounceMs)
-		},
-		[defaultPriority, debounceMs, getLiveRegion]
-	)
-
-	// Cleanup on unmount
-	useEffect(() => {
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current)
-			}
-			if (liveRegionRef.current) {
-				document.body.removeChild(liveRegionRef.current)
-				liveRegionRef.current = null
-			}
-		}
-	}, [])
-
-	return { announce }
-}
-
-// Hook specifically for media player screen reader announcements
-export function useMediaScreenReader() {
-	const { announce } = useScreenReader({ defaultPriority: "polite" })
-
-	// Announce playback state changes
-	const announcePlaybackState = useCallback(
-		(isPlaying: boolean) => {
-			announce(isPlaying ? "Playing" : "Paused", "assertive")
-		},
-		[announce]
-	)
-
-	// Announce volume changes
-	const announceVolume = useCallback(
-		(volume: number, isMuted: boolean) => {
-			if (isMuted) {
-				announce("Muted", "assertive")
-			} else {
-				const volumePercent = Math.round(volume * 100)
-				announce(`Volume ${volumePercent}%`, "polite")
-			}
-		},
-		[announce]
-	)
-
-	// Announce time position changes
-	const announceTime = useCallback(
-		(currentTime: number, duration: number) => {
-			const formatTime = (seconds: number) => {
-				const hours = Math.floor(seconds / 3600)
-				const minutes = Math.floor((seconds % 3600) / 60)
-				const secs = Math.floor(seconds % 60)
-
-				if (hours > 0) {
-					return `${hours}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
-				}
-				return `${minutes}:${secs.toString().padStart(2, "0")}`
-			}
-
-			const current = formatTime(currentTime)
-			const total = formatTime(duration)
-			announce(`${current} of ${total}`, "polite")
-		},
-		[announce]
-	)
-
-	// Announce fullscreen state changes
-	const announceFullscreen = useCallback(
-		(isFullscreen: boolean) => {
-			announce(isFullscreen ? "Entered fullscreen" : "Exited fullscreen", "assertive")
-		},
-		[announce]
-	)
-
-	// Announce subtitle state changes
-	const announceSubtitles = useCallback(
-		(enabled: boolean, language?: string) => {
-			if (enabled) {
-				announce(language ? `Subtitles enabled in ${language}` : "Subtitles enabled", "assertive")
-			} else {
-				announce("Subtitles disabled", "assertive")
-			}
-		},
-		[announce]
-	)
-
-	// Announce playback speed changes
-	const announcePlaybackSpeed = useCallback(
-		(speed: number) => {
-			if (speed === 1) {
-				announce("Normal playback speed", "assertive")
-			} else {
-				announce(`Playback speed ${speed}x`, "assertive")
-			}
-		},
-		[announce]
-	)
-
-	// Announce quality changes
-	const announceQuality = useCallback(
-		(quality: string) => {
-			announce(`Quality changed to ${quality}`, "polite")
-		},
-		[announce]
-	)
-
-	// Announce loading state
-	const announceLoading = useCallback(
-		(isLoading: boolean) => {
-			announce(isLoading ? "Loading..." : "Loading complete", "polite")
-		},
-		[announce]
-	)
-
-	// Announce errors
-	const announceError = useCallback(
-		(error: string) => {
-			announce(`Error: ${error}`, "assertive")
-		},
-		[announce]
-	)
-
-	// Announce buffering state
-	const announceBuffering = useCallback(
-		(isBuffering: boolean) => {
-			announce(isBuffering ? "Buffering..." : "Buffering complete", "polite")
-		},
-		[announce]
-	)
-
-	return {
-		announce,
-		announcePlaybackState,
-		announceVolume,
-		announceTime,
-		announceFullscreen,
-		announceSubtitles,
-		announcePlaybackSpeed,
-		announceQuality,
-		announceLoading,
-		announceError,
-		announceBuffering
-	}
-}

package/src/hooks/core/index.ts

@@ -1,47 +0,0 @@
-// Core Media Player Hooks
-export { useKeyboardControls } from "../use-keyboard-controls"
-export { useMediaPlayer } from "../use-media-player"
-
-// Media State Hooks
-export {
-	useAdaptiveMediaState,
-	useEnhancedMediaState,
-	useMediaState
-} from "../use-media-state"
-
-// React 19 Advanced Hooks
-export {
-	useMediaActions,
-	useMediaActionState
-} from "../use-media-actions"
-export type { MediaActionPayloads } from "../use-media-actions"
-
-export {
-	useMediaOptimistic,
-	useMediaStateComparison,
-	useOptimisticUpdates
-} from "../use-media-optimistic"
-
-// Mobile-First Touch Gestures
-export {
-	useMediaGestures,
-	useTouchGestures
-} from "../use-touch-gestures"
-export type {
-	GestureConfig,
-	GestureEvent,
-	GestureType
-} from "../use-touch-gestures"
-
-// Refactored Hooks (React 19 optimized)
-export { useVideoPlayer } from "../useVideoPlayer"
-export { useSubtitles } from "../useSubtitles"
-export { useEnhancedSubtitles } from "../useEnhancedSubtitles"
-export type { SubtitleTrack, UseEnhancedSubtitlesOptions } from "../useEnhancedSubtitles"
-export { useMediaControls } from "../useMediaControls"
-export { useScreenshot } from "../useScreenshot"
-export type { VideoState, VideoControls } from "../useVideoPlayer"
-
-// Specialized hooks
-export { useMediaMetadata } from "../use-media-metadata"
-export { useOptimisticMediaState } from "../use-optimistic-controls"

package/src/hooks/legacy.ts

@@ -1,21 +0,0 @@
-/**
- * Legacy Hooks (Deprecated)
- * These hooks are wrapped with deprecation warnings
- */
-
-import { showDeprecationWarning } from "../lib/deprecation"
-
-// Import current hooks
-import { useMediaPlayer } from "./use-media-player"
-import { useSubtitles } from "./useSubtitles"
-
-// Legacy hook wrappers with deprecation warnings
-export function useVideoPlayer(props: any) {
-	showDeprecationWarning("useVideoPlayer", "useMediaPlayer (the primary media player hook)")
-	return useMediaPlayer(props)
-}
-
-export function useEnhancedSubtitles(props: any) {
-	showDeprecationWarning("useEnhancedSubtitles", "useSubtitles (the current subtitle hook)")
-	return useSubtitles(props)
-}

package/src/hooks/use-buffer-health.ts

@@ -1,218 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react"
-
-export interface BufferHealthMetrics {
-	bufferedDuration: number
-	bufferedPercent: number
-	playheadDistance: number
-	stallCount: number
-	isStalled: boolean
-	lastStallDuration: number | null
-	bitrate: number | null
-	droppedFrames: number
-	audioLevel: number | null
-}
-
-export interface UseBufferHealthOptions {
-	minBufferDuration?: number
-	maxStallDuration?: number
-	stallThreshold?: number
-	onStall?: (duration: number) => void
-	onRecover?: () => void
-}
-
-const DEFAULT_OPTIONS: UseBufferHealthOptions = {
-	minBufferDuration: 5,
-	maxStallDuration: 3000,
-	stallThreshold: 1000,
-	onStall: undefined,
-	onRecover: undefined
-}
-
-export function useBufferHealth(
-	videoRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>,
-	options: UseBufferHealthOptions = {}
-): BufferHealthMetrics {
-	const opts = { ...DEFAULT_OPTIONS, ...options }
-	const [metrics, setMetrics] = useState<BufferHealthMetrics>({
-		bufferedDuration: 0,
-		bufferedPercent: 0,
-		playheadDistance: 0,
-		stallCount: 0,
-		isStalled: false,
-		lastStallDuration: null,
-		bitrate: null,
-		droppedFrames: 0,
-		audioLevel: null
-	})
-
-	const stallStartRef = useRef<number | null>(null)
-	const lastPlayheadRef = useRef<number>(0)
-	const lastTimeRef = useRef<number>(0)
-
-	const calculateMetrics = useCallback(() => {
-		const video = videoRef.current
-		if (!video) return
-
-		const currentTime = video.currentTime
-		const duration = video.duration || 1
-		const buffered = video.buffered
-
-		let bufferedDuration = 0
-		if (buffered.length > 0) {
-			for (let i = 0; i < buffered.length; i++) {
-				const start = buffered.start(i)
-				const end = buffered.end(i)
-				if (start <= currentTime && end >= currentTime) {
-					bufferedDuration = end - currentTime
-					break
-				}
-			}
-		}
-
-		const bufferedPercent = (bufferedDuration / duration) * 100
-		const playheadDistance = 0
-
-		const now = Date.now()
-		const timeDelta = now - lastTimeRef.current
-		const playheadDelta = Math.abs(currentTime - lastPlayheadRef.current)
-
-		let isStalled = false
-		let stallDuration: number | null = null
-		let stallCount = metrics.stallCount
-
-		if (video.paused || video.ended) {
-			if (stallStartRef.current !== null) {
-				stallDuration = Date.now() - stallStartRef.current
-				if (stallDuration > (opts.stallThreshold || 1000)) {
-					isStalled = true
-					stallCount++
-					opts.onStall?.(stallDuration)
-				}
-				stallStartRef.current = null
-			}
-		} else if (timeDelta > 500 && playheadDelta < 0.1) {
-			if (stallStartRef.current === null) {
-				stallStartRef.current = now
-			}
-			isStalled = true
-		} else if (playheadDelta > 0.1 && stallStartRef.current !== null) {
-			stallDuration = Date.now() - stallStartRef.current
-			stallStartRef.current = null
-			if (stallDuration > (opts.stallThreshold || 1000)) {
-				stallCount++
-				opts.onStall?.(stallDuration)
-			}
-			opts.onRecover?.()
-		}
-
-		let droppedFrames = 0
-		let bitrate: number | null = null
-		let audioLevel: number | null = null
-
-		if ("getVideoPlaybackQuality" in video) {
-			const quality = (video as any).getVideoPlaybackQuality()
-			droppedFrames = quality?.droppedVideoFrames || 0
-		}
-
-		if ("getBitrateInfo" in video) {
-			const info = (video as any).getBitrateInfo()
-			bitrate = info?.bitrate || null
-		}
-
-		if ("audioTracks" in video) {
-			const tracks = (video as any).audioTracks
-			if (tracks && tracks.length > 0) {
-				audioLevel = tracks[0]?.volume || null
-			}
-		}
-
-		lastPlayheadRef.current = currentTime
-		lastTimeRef.current = now
-
-		setMetrics({
-			bufferedDuration,
-			bufferedPercent,
-			playheadDistance,
-			stallCount,
-			isStalled,
-			lastStallDuration: stallDuration,
-			bitrate,
-			droppedFrames,
-			audioLevel
-		})
-	}, [videoRef, opts, metrics.stallCount, opts.onStall, opts.onRecover, opts.stallThreshold])
-
-	useEffect(() => {
-		const video = videoRef.current
-		if (!video) return
-
-		const interval = setInterval(calculateMetrics, 250)
-
-		const handleWaiting = () => {
-			stallStartRef.current = Date.now()
-		}
-
-		const handlePlaying = () => {
-			if (stallStartRef.current !== null) {
-				const stallDuration = Date.now() - stallStartRef.current
-				if (stallDuration > (opts.stallThreshold || 1000)) {
-					setMetrics((prev) => ({
-						...prev,
-						stallCount: prev.stallCount + 1,
-						isStalled: false,
-						lastStallDuration: stallDuration
-					}))
-					opts.onStall?.(stallDuration)
-				}
-				stallStartRef.current = null
-			}
-			opts.onRecover?.()
-		}
-
-		video.addEventListener("waiting", handleWaiting)
-		video.addEventListener("playing", handlePlaying)
-
-		return () => {
-			clearInterval(interval)
-			video.removeEventListener("waiting", handleWaiting)
-			video.removeEventListener("playing", handlePlaying)
-		}
-	}, [videoRef, calculateMetrics, opts.stallThreshold, opts.onStall, opts.onRecover])
-
-	return metrics
-}
-
-export function useAdaptiveBuffering(
-	videoRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>,
-	options?: UseBufferHealthOptions
-) {
-	const metrics = useBufferHealth(videoRef, options)
-
-	const getRecommendedBufferSize = useCallback(() => {
-		if (metrics.isStalled) {
-			return 30
-		}
-		if (metrics.stallCount > 3) {
-			return 20
-		}
-		if (metrics.bufferedPercent < 5) {
-			return 15
-		}
-		return 10
-	}, [metrics.isStalled, metrics.stallCount, metrics.bufferedPercent])
-
-	const shouldIncreaseBuffer = useCallback(() => {
-		return metrics.stallCount > 0 && metrics.bufferedPercent < 10
-	}, [metrics.stallCount, metrics.bufferedPercent])
-
-	const shouldReduceQuality = useCallback(() => {
-		return metrics.isStalled || metrics.stallCount > 5
-	}, [metrics.isStalled, metrics.stallCount])
-
-	return {
-		...metrics,
-		recommendedBufferSize: getRecommendedBufferSize(),
-		shouldIncreaseBuffer: shouldIncreaseBuffer(),
-		shouldReduceQuality: shouldReduceQuality()
-	}
-}