@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/hooks/use-touch-gestures.ts

@@ -1,461 +0,0 @@
-"use client"
-
-import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile"
-import * as React from "react"
-
-// Gesture types
-export type GestureType =
-	| "tap"
-	| "double-tap"
-	| "long-press"
-	| "swipe-left"
-	| "swipe-right"
-	| "swipe-up"
-	| "swipe-down"
-	| "pinch-in"
-	| "pinch-out"
-
-// Gesture event data
-export interface GestureEvent {
-	type: GestureType
-	startPoint: { x: number; y: number }
-	currentPoint: { x: number; y: number }
-	velocity?: { x: number; y: number }
-	scale?: number
-	rotation?: number
-	distance?: number
-	duration: number
-	preventDefault: () => void
-	target: HTMLElement
-}
-
-// Gesture configuration
-export interface GestureConfig {
-	enabledGestures?: GestureType[]
-	tapThreshold?: number // ms
-	doubleTapThreshold?: number // ms
-	longPressThreshold?: number // ms
-	swipeThreshold?: number // px
-	swipeVelocityThreshold?: number // px/ms
-	pinchThreshold?: number // scale difference
-	rotationThreshold?: number // degrees
-	enableHapticFeedback?: boolean
-}
-
-// Default configuration
-const defaultConfig: Required<GestureConfig> = {
-	enabledGestures: [
-		"tap",
-		"double-tap",
-		"long-press",
-		"swipe-left",
-		"swipe-right",
-		"swipe-up",
-		"swipe-down",
-		"pinch-in",
-		"pinch-out"
-	],
-	tapThreshold: 200,
-	doubleTapThreshold: 300,
-	longPressThreshold: 500,
-	swipeThreshold: 50,
-	swipeVelocityThreshold: 0.5,
-	pinchThreshold: 0.1,
-	rotationThreshold: 15,
-	enableHapticFeedback: true
-}
-
-// Touch point interface
-interface TouchPoint {
-	id: number
-	x: number
-	y: number
-	timestamp: number
-}
-
-// Gesture state
-interface GestureState {
-	isTracking: boolean
-	touches: TouchPoint[]
-	startTouches: TouchPoint[]
-	lastTap?: { timestamp: number; point: { x: number; y: number } }
-	longPressTimer?: NodeJS.Timeout
-	initialDistance?: number
-	initialScale?: number
-	lastScale?: number
-}
-
-// Touch gesture hook
-export function useTouchGestures(
-	ref: React.RefObject<HTMLElement>,
-	onGesture: (event: GestureEvent) => void,
-	config: GestureConfig = {}
-) {
-	const mergedConfig = { ...defaultConfig, ...config }
-	const { isTouchDevice } = useDeviceInfo()
-	const { triggerHaptic } = useHapticFeedback()
-	const gestureState = React.useRef<GestureState>({
-		isTracking: false,
-		touches: [],
-		startTouches: []
-	})
-
-	// Helper functions
-	const getTouchPoint = (touch: Touch): TouchPoint => ({
-		id: touch.identifier,
-		x: touch.clientX,
-		y: touch.clientY,
-		timestamp: Date.now()
-	})
-
-	const getDistance = (p1: TouchPoint, p2: TouchPoint): number =>
-		Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
-
-	const getVelocity = (start: TouchPoint, end: TouchPoint): { x: number; y: number } => {
-		const timeDiff = Math.max(end.timestamp - start.timestamp, 1)
-		return {
-			x: (end.x - start.x) / timeDiff,
-			y: (end.y - start.y) / timeDiff
-		}
-	}
-
-	const createGestureEvent = (
-		type: GestureType,
-		startPoint: TouchPoint,
-		currentPoint: TouchPoint,
-		additionalData: Partial<GestureEvent> = {}
-	): GestureEvent => ({
-		type,
-		startPoint: { x: startPoint.x, y: startPoint.y },
-		currentPoint: { x: currentPoint.x, y: currentPoint.y },
-		duration: currentPoint.timestamp - startPoint.timestamp,
-		target: ref.current!,
-		preventDefault: () => {},
-		...additionalData
-	})
-
-	// Handle touch start
-	const handleTouchStart = React.useCallback(
-		(e: TouchEvent) => {
-			if (!mergedConfig.enabledGestures.length) return
-
-			const touches = Array.from(e.touches).map(getTouchPoint)
-			const state = gestureState.current
-
-			state.isTracking = true
-			state.touches = touches
-			state.startTouches = [...touches]
-
-			// Clear any existing long press timer
-			if (state.longPressTimer) {
-				clearTimeout(state.longPressTimer)
-			}
-
-			// Set up long press detection for single touch
-			if (touches.length === 1 && mergedConfig.enabledGestures.includes("long-press")) {
-				state.longPressTimer = setTimeout(() => {
-					if (state.touches.length === 1 && touches[0]) {
-						const gestureEvent = createGestureEvent("long-press", touches[0], touches[0])
-						onGesture(gestureEvent)
-
-						if (mergedConfig.enableHapticFeedback) {
-							triggerHaptic("heavy")
-						}
-					}
-				}, mergedConfig.longPressThreshold)
-			}
-
-			// Handle multi-touch gestures
-			if (touches.length === 2 && touches[0] && touches[1]) {
-				state.initialDistance = getDistance(touches[0], touches[1])
-				state.initialScale = 1
-				state.lastScale = 1
-			}
-		},
-		[mergedConfig, onGesture, triggerHaptic]
-	)
-
-	// Handle touch move
-	const handleTouchMove = React.useCallback(
-		(e: TouchEvent) => {
-			const state = gestureState.current
-			if (!state.isTracking) return
-
-			const touches = Array.from(e.touches).map(getTouchPoint)
-			state.touches = touches
-
-			// Handle pinch gesture
-			if (touches.length === 2 && state.initialDistance && touches[0] && touches[1]) {
-				const currentDistance = getDistance(touches[0], touches[1])
-				const scale = currentDistance / state.initialDistance
-				const scaleDiff = Math.abs(scale - (state.lastScale || 1))
-
-				if (scaleDiff > mergedConfig.pinchThreshold) {
-					const gestureType = scale > (state.lastScale || 1) ? "pinch-out" : "pinch-in"
-
-					if (mergedConfig.enabledGestures.includes(gestureType)) {
-						const centerPoint = {
-							x: (touches[0].x + touches[1].x) / 2,
-							y: (touches[0].y + touches[1].y) / 2,
-							id: -1,
-							timestamp: Date.now()
-						}
-
-						const startCenterPoint = {
-							x: ((state.startTouches[0]?.x ?? 0) + (state.startTouches[1]?.x ?? 0)) / 2,
-							y: ((state.startTouches[0]?.y ?? 0) + (state.startTouches[1]?.y ?? 0)) / 2,
-							id: -1,
-							timestamp: state.startTouches[0]?.timestamp ?? Date.now()
-						}
-
-						const gestureEvent = createGestureEvent(gestureType, startCenterPoint, centerPoint, {
-							scale,
-							distance: currentDistance
-						})
-
-						onGesture(gestureEvent)
-						state.lastScale = scale
-					}
-				}
-			}
-
-			// Clear long press timer on move
-			if (state.longPressTimer && touches.length === 1 && state.startTouches[0] && touches[0]) {
-				const startTouch = state.startTouches[0]
-				const currentTouch = touches[0]
-				const distance = getDistance(startTouch, currentTouch)
-
-				if (distance > mergedConfig.swipeThreshold) {
-					clearTimeout(state.longPressTimer)
-					state.longPressTimer = undefined
-				}
-			}
-		},
-		[mergedConfig, onGesture]
-	)
-
-	// Handle touch end
-	const handleTouchEnd = React.useCallback(
-		(e: TouchEvent) => {
-			const state = gestureState.current
-			if (!state.isTracking) return
-
-			const endTouches = Array.from(e.changedTouches).map(getTouchPoint)
-			const currentTime = Date.now()
-
-			// Clear long press timer
-			if (state.longPressTimer) {
-				clearTimeout(state.longPressTimer)
-				state.longPressTimer = undefined
-			}
-
-			// Handle single touch gestures
-			if (
-				state.startTouches.length === 1 &&
-				endTouches.length === 1 &&
-				state.startTouches[0] &&
-				endTouches[0]
-			) {
-				const startTouch = state.startTouches[0]
-				const endTouch = endTouches[0]
-				const distance = getDistance(startTouch, endTouch)
-				const duration = endTouch.timestamp - startTouch.timestamp
-
-				// Check for swipe gestures
-				if (distance > mergedConfig.swipeThreshold) {
-					const velocity = getVelocity(startTouch, endTouch)
-					const absVelX = Math.abs(velocity.x)
-					const absVelY = Math.abs(velocity.y)
-
-					if (
-						absVelX > mergedConfig.swipeVelocityThreshold ||
-						absVelY > mergedConfig.swipeVelocityThreshold
-					) {
-						let gestureType: GestureType
-
-						if (absVelX > absVelY) {
-							gestureType = velocity.x > 0 ? "swipe-right" : "swipe-left"
-						} else {
-							gestureType = velocity.y > 0 ? "swipe-down" : "swipe-up"
-						}
-
-						if (mergedConfig.enabledGestures.includes(gestureType)) {
-							const gestureEvent = createGestureEvent(gestureType, startTouch, endTouch, {
-								velocity,
-								distance
-							})
-
-							onGesture(gestureEvent)
-
-							if (mergedConfig.enableHapticFeedback) {
-								triggerHaptic("light")
-							}
-						}
-					}
-				}
-				// Check for tap gestures
-				else if (duration < mergedConfig.tapThreshold && distance < mergedConfig.swipeThreshold) {
-					// Check for double tap
-					if (
-						state.lastTap &&
-						currentTime - state.lastTap.timestamp < mergedConfig.doubleTapThreshold &&
-						getDistance(
-							{ ...state.lastTap.point, id: -1, timestamp: state.lastTap.timestamp },
-							endTouch
-						) < mergedConfig.swipeThreshold
-					) {
-						if (mergedConfig.enabledGestures.includes("double-tap")) {
-							const gestureEvent = createGestureEvent("double-tap", startTouch, endTouch)
-							onGesture(gestureEvent)
-
-							if (mergedConfig.enableHapticFeedback) {
-								triggerHaptic("medium")
-							}
-						}
-
-						state.lastTap = undefined
-					} else {
-						// Single tap
-						if (mergedConfig.enabledGestures.includes("tap")) {
-							const gestureEvent = createGestureEvent("tap", startTouch, endTouch)
-							onGesture(gestureEvent)
-
-							if (mergedConfig.enableHapticFeedback) {
-								triggerHaptic("light")
-							}
-						}
-
-						state.lastTap = {
-							timestamp: currentTime,
-							point: { x: endTouch.x, y: endTouch.y }
-						}
-					}
-				}
-			}
-
-			// Reset gesture state
-			if (e.touches.length === 0) {
-				state.isTracking = false
-				state.touches = []
-				state.startTouches = []
-				state.initialDistance = undefined
-				state.initialScale = undefined
-				state.lastScale = undefined
-			}
-		},
-		[mergedConfig, onGesture, triggerHaptic]
-	)
-
-	// Attach event listeners
-	React.useEffect(() => {
-		const element = ref.current
-		if (!element || !isTouchDevice) return
-
-		element.addEventListener("touchstart", handleTouchStart, { passive: false })
-		element.addEventListener("touchmove", handleTouchMove, { passive: false })
-		element.addEventListener("touchend", handleTouchEnd, { passive: false })
-		element.addEventListener("touchcancel", handleTouchEnd, { passive: false })
-
-		return () => {
-			element.removeEventListener("touchstart", handleTouchStart)
-			element.removeEventListener("touchmove", handleTouchMove)
-			element.removeEventListener("touchend", handleTouchEnd)
-			element.removeEventListener("touchcancel", handleTouchEnd)
-		}
-	}, [handleTouchStart, handleTouchMove, handleTouchEnd, isTouchDevice])
-
-	return {
-		isGestureEnabled: isTouchDevice && mergedConfig.enabledGestures.length > 0
-	}
-}
-
-// Media player specific gesture hook with predefined actions
-export function useMediaGestures(
-	ref: React.RefObject<HTMLElement>,
-	actions: {
-		onPlayPause?: () => void
-		onSeek?: (direction: "forward" | "backward", amount: number) => void
-		onVolumeChange?: (direction: "up" | "down", amount: number) => void
-		onToggleFullscreen?: () => void
-		onZoom?: (scale: number) => void
-	}
-) {
-	const handleGesture = React.useCallback(
-		(event: GestureEvent) => {
-			const { type, velocity, distance, scale } = event
-
-			switch (type) {
-				case "double-tap":
-					// Double tap to play/pause
-					actions.onPlayPause?.()
-					break
-
-				case "swipe-left":
-					// Swipe left to seek backward
-					const backwardAmount = Math.min((distance || 0) / 10, 30) // Max 30 seconds
-					actions.onSeek?.("backward", backwardAmount)
-					break
-
-				case "swipe-right":
-					// Swipe right to seek forward
-					const forwardAmount = Math.min((distance || 0) / 10, 30) // Max 30 seconds
-					actions.onSeek?.("forward", forwardAmount)
-					break
-
-				case "swipe-up":
-					// Swipe up on right side for volume up
-					if (event.startPoint.x > (ref.current?.clientWidth || 0) / 2) {
-						const volumeAmount = Math.min((distance || 0) / 100, 0.2) // Max 20%
-						actions.onVolumeChange?.("up", volumeAmount)
-					}
-					break
-
-				case "swipe-down":
-					// Swipe down on right side for volume down
-					if (event.startPoint.x > (ref.current?.clientWidth || 0) / 2) {
-						const volumeAmount = Math.min((distance || 0) / 100, 0.2) // Max 20%
-						actions.onVolumeChange?.("down", volumeAmount)
-					}
-					break
-
-				case "pinch-out":
-					// Pinch out to zoom in (for video zoom functionality)
-					actions.onZoom?.(scale || 1)
-					break
-
-				case "pinch-in":
-					// Pinch in to zoom out
-					actions.onZoom?.(scale || 1)
-					break
-
-				case "long-press":
-					// Long press for fullscreen toggle
-					actions.onToggleFullscreen?.()
-					break
-
-				default:
-					break
-			}
-		},
-		[actions, ref]
-	)
-
-	const gestureConfig: GestureConfig = {
-		enabledGestures: [
-			"tap",
-			"double-tap",
-			"long-press",
-			"swipe-left",
-			"swipe-right",
-			"swipe-up",
-			"swipe-down",
-			"pinch-in",
-			"pinch-out"
-		],
-		enableHapticFeedback: true,
-		swipeThreshold: 30,
-		swipeVelocityThreshold: 0.3
-	}
-
-	return useTouchGestures(ref, handleGesture, gestureConfig)
-}

package/src/hooks/useEnhancedSubtitles.ts

@@ -1,258 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
-
-interface SubtitleCue {
-	start: number
-	end: number
-	text: string
-}
-
-export interface SubtitleTrack {
-	id: string
-	label: string
-	language?: string
-	src?: string
-}
-
-export interface UseEnhancedSubtitlesOptions {
-	subtitleSrc?: string
-	subtitleTracks?: SubtitleTrack[]
-	defaultFontSize?: "small" | "medium" | "large"
-	onLoadError?: (error: Error) => void
-}
-
-export function useEnhancedSubtitles({
-	subtitleSrc,
-	subtitleTracks = [],
-	defaultFontSize = "medium",
-	onLoadError
-}: UseEnhancedSubtitlesOptions = {}) {
-	const [subtitlesEnabled, setSubtitlesEnabled] = useState(false)
-	const [subtitleCues, setSubtitleCues] = useState<SubtitleCue[]>([])
-	const [currentSubtitle, setCurrentSubtitle] = useState("")
-	const [currentTrackId, setCurrentTrackId] = useState<string | null>(null)
-	const [fontSize, setFontSize] = useState<"small" | "medium" | "large">(defaultFontSize)
-	const [loadError, setLoadError] = useState<Error | null>(null)
-	const [isLoading, setIsLoading] = useState(false)
-
-	// Size mapping for subtitle font sizes
-	const sizeMap = {
-		small: "text-sm",
-		medium: "text-base",
-		large: "text-lg"
-	}
-
-	// Determine if subtitles are available
-	const hasSubtitles = !!(subtitleSrc || (subtitleTracks && subtitleTracks.length > 0))
-
-	// Parse VTT/WebVTT timestamp
-	const parseVTTTime = (timeStr: string): number => {
-		const parts = timeStr.split(":")
-		const seconds = parts[2] ? parseFloat(parts[2]) : 0
-		const minutes = parts[1] ? parseInt(parts[1], 10) * 60 : 0
-		const hours = parts[0] ? parseInt(parts[0], 10) * 3600 : 0
-		return hours + minutes + seconds
-	}
-
-	// Parse SRT timestamp
-	const parseSRTTime = (timeStr: string): number => {
-		// SRT format: 00:00:00,000 (hours:minutes:seconds,milliseconds)
-		const [time, ms] = timeStr.split(",")
-		const parts = (time || "").split(":")
-		const milliseconds = ms ? parseInt(ms, 10) / 1000 : 0
-		const seconds = parts[2] ? parseInt(parts[2], 10) : 0
-		const minutes = parts[1] ? parseInt(parts[1], 10) * 60 : 0
-		const hours = parts[0] ? parseInt(parts[0], 10) * 3600 : 0
-		return hours + minutes + seconds + milliseconds
-	}
-
-	// Load and parse subtitle file
-	const loadSubtitles = async (url: string) => {
-		setIsLoading(true)
-		setLoadError(null)
-
-		try {
-			const response = await fetch(url)
-			if (!response.ok) {
-				throw new Error(`Failed to load subtitles: ${response.status} ${response.statusText}`)
-			}
-
-			const text = await response.text()
-			const cues: SubtitleCue[] = []
-			const lines = text.split("\n")
-			let i = 0
-
-			// Detect format (VTT or SRT)
-			const isVTT = text.includes("WEBVTT") || url.endsWith(".vtt")
-			const isSRT = url.endsWith(".srt") || /^\d+$/.test(lines[0]?.trim() || "")
-
-			if (isVTT) {
-				// Parse VTT format
-				while (i < lines.length) {
-					if (lines[i]?.includes("-->")) {
-						const [startStr, endStr] = (lines[i] || "").split("-->").map((s) => s.trim())
-						const start = parseVTTTime(startStr || "")
-						const end = parseVTTTime(endStr || "")
-
-						i++
-						let subtitleText = ""
-						while (i < lines.length && lines[i]?.trim() !== "") {
-							subtitleText += (subtitleText ? " " : "") + lines[i]?.trim()
-							i++
-						}
-
-						if (subtitleText) {
-							cues.push({ start, end, text: subtitleText })
-						}
-					}
-					i++
-				}
-			} else if (isSRT) {
-				// Parse SRT format
-				while (i < lines.length) {
-					// Skip the sequence number
-					if (/^\d+$/.test(lines[i]?.trim() || "")) {
-						i++
-						// Parse timestamp line
-						if (lines[i]?.includes("-->")) {
-							const [startStr, endStr] = (lines[i] || "").split("-->").map((s) => s.trim())
-							const start = parseSRTTime(startStr || "")
-							const end = parseSRTTime(endStr || "")
-
-							i++
-							let subtitleText = ""
-							while (i < lines.length && lines[i]?.trim() !== "") {
-								subtitleText += (subtitleText ? " " : "") + lines[i]?.trim()
-								i++
-							}
-
-							if (subtitleText) {
-								cues.push({ start, end, text: subtitleText })
-							}
-						}
-					}
-					i++
-				}
-			} else {
-				throw new Error("Unsupported subtitle format. Only VTT and SRT are supported.")
-			}
-
-			if (cues.length === 0) {
-				throw new Error("No subtitle cues found in file")
-			}
-
-			setSubtitleCues(cues)
-			setIsLoading(false)
-		} catch (error) {
-			const err = error instanceof Error ? error : new Error("Failed to load subtitles")
-			console.error("Failed to load subtitles:", err)
-			setLoadError(err)
-			setIsLoading(false)
-			setSubtitleCues([])
-			onLoadError?.(err)
-		}
-	}
-
-	// Get current subtitle text based on time
-	const getCurrentSubtitle = (currentTime: number) => {
-		if (!subtitlesEnabled || subtitleCues.length === 0) return ""
-
-		const currentCue = subtitleCues.find(
-			(cue) => currentTime >= cue.start && currentTime <= cue.end
-		)
-		return currentCue?.text || ""
-	}
-
-	// Toggle subtitles on/off
-	const toggleSubtitles = () => {
-		setSubtitlesEnabled((prev) => {
-			const newEnabled = !prev
-
-			if (newEnabled && !loadError) {
-				// Try to load subtitles if not already loaded
-				if (subtitleCues.length === 0 && !isLoading) {
-					// Load default subtitle source or first track
-					const srcToLoad = subtitleSrc || subtitleTracks[0]?.src
-					if (srcToLoad) {
-						loadSubtitles(srcToLoad)
-						if (subtitleTracks[0]) {
-							setCurrentTrackId(subtitleTracks[0].id)
-						}
-					}
-				}
-			} else if (!newEnabled) {
-				setCurrentSubtitle("")
-			}
-
-			return newEnabled
-		})
-	}
-
-	// Select a specific subtitle track
-	const selectSubtitleTrack = (trackId: string | null) => {
-		if (!trackId) {
-			// Turn off subtitles
-			setSubtitlesEnabled(false)
-			setCurrentTrackId(null)
-			setCurrentSubtitle("")
-			return
-		}
-
-		const track = subtitleTracks.find((t) => t.id === trackId)
-		if (track?.src) {
-			setCurrentTrackId(trackId)
-			loadSubtitles(track.src)
-			setSubtitlesEnabled(true)
-		}
-	}
-
-	// Change subtitle font size
-	const changeSubtitleFontSize = (size: "small" | "medium" | "large") => {
-		setFontSize(size)
-	}
-
-	// Get CSS classes for subtitle display
-	const getSubtitleStyles = {
-		fontSize: sizeMap[fontSize],
-		className: `${sizeMap[fontSize]} font-medium`
-	}
-
-	// Clear subtitle on disable
-	useEffect(() => {
-		if (!subtitlesEnabled) {
-			setCurrentSubtitle("")
-		}
-	}, [subtitlesEnabled])
-
-	// Auto-load default subtitles on mount if available
-	useEffect(() => {
-		if (subtitleSrc && !subtitleCues.length && !loadError && !isLoading) {
-			// Don't auto-load, wait for user to enable
-			// This prevents errors on initial load
-		}
-	}, [])
-
-	return {
-		// State
-		subtitlesEnabled,
-		currentSubtitle,
-		subtitleCues,
-		currentTrackId,
-		fontSize,
-		loadError,
-		isLoading,
-		hasSubtitles,
-
-		// Actions
-		toggleSubtitles,
-		selectSubtitleTrack,
-		changeSubtitleFontSize,
-		setCurrentSubtitle,
-
-		// Utilities
-		getCurrentSubtitle,
-		getSubtitleStyles,
-
-		// Track info
-		availableTracks: subtitleTracks
-	}
-}