@therealtinhtute/baroiplayer 1.0.0

package/src/hooks/use-optimized-media.ts

@@ -0,0 +1,263 @@
+"use client"
+
+import React from "react"
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../context/media-context"
+
+// Optimized hook for media state with memoized selectors
+export function useOptimizedMediaState() {
+	// Memoized selectors to prevent unnecessary re-renders
+	const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []))
+	const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []))
+	const duration = useMediaSelector(React.useCallback(state => state.duration, []))
+	const volume = useMediaSelector(React.useCallback(state => state.volume, []))
+	const isMuted = useMediaSelector(React.useCallback(state => state.isMuted, []))
+	const isLoading = useMediaSelector(React.useCallback(state => state.isLoading, []))
+	const error = useMediaSelector(React.useCallback(state => state.error, []))
+	const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []))
+	const isPictureInPicture = useMediaSelector(React.useCallback(state => state.isPictureInPicture, []))
+	const buffered = useMediaSelector(React.useCallback(state => state.buffered, []))
+	const playbackRate = useMediaSelector(React.useCallback(state => state.playbackRate, []))
+
+	// Derived state with memoization
+	const progress = React.useMemo(() => {
+		return duration > 0 ? (currentTime / duration) * 100 : 0
+	}, [currentTime, duration])
+
+	const remainingTime = React.useMemo(() => {
+		return Math.max(0, duration - currentTime)
+	}, [duration, currentTime])
+
+	const bufferedRanges = React.useMemo(() => {
+		if (!buffered || duration === 0) return []
+		const ranges = []
+		for (let i = 0; i < buffered.length; i++) {
+			ranges.push({
+				start: (buffered.start(i) / duration) * 100,
+				end: (buffered.end(i) / duration) * 100
+			})
+		}
+		return ranges
+	}, [buffered, duration])
+
+	const canPlay = React.useMemo(() => {
+		return !isLoading && !error && duration > 0
+	}, [isLoading, error, duration])
+
+	return {
+		// Basic state
+		isPlaying,
+		currentTime,
+		duration,
+		volume,
+		isMuted,
+		isLoading,
+		error,
+		isFullscreen,
+		isPictureInPicture,
+		buffered,
+		playbackRate,
+		
+		// Derived state
+		progress,
+		remainingTime,
+		bufferedRanges,
+		canPlay
+	}
+}
+
+// Optimized hook for media controls with memoized callbacks
+export function useOptimizedMediaControls() {
+	const dispatch = useMediaDispatch()
+
+	// Memoized control functions
+	const play = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.PLAY })
+	}, [dispatch])
+
+	const pause = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.PAUSE })
+	}, [dispatch])
+
+	const toggle = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.PLAY })
+	}, [dispatch])
+
+	const seek = React.useCallback((time: number) => {
+		dispatch({ type: MediaActionTypes.SEEK, detail: time })
+	}, [dispatch])
+
+	const setVolume = React.useCallback((volume: number) => {
+		dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume })
+	}, [dispatch])
+
+	const mute = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.MUTE })
+	}, [dispatch])
+
+	const unmute = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.UNMUTE })
+	}, [dispatch])
+
+	const toggleMute = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.TOGGLE_MUTE })
+	}, [dispatch])
+
+	const enterFullscreen = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.ENTER_FULLSCREEN })
+	}, [dispatch])
+
+	const exitFullscreen = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.EXIT_FULLSCREEN })
+	}, [dispatch])
+
+	const toggleFullscreen = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.ENTER_FULLSCREEN })
+	}, [dispatch])
+
+	const enterPictureInPicture = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.ENTER_PIP })
+	}, [dispatch])
+
+	const exitPictureInPicture = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.EXIT_PIP })
+	}, [dispatch])
+
+	const togglePictureInPicture = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.ENTER_PIP })
+	}, [dispatch])
+
+	const setPlaybackRate = React.useCallback((rate: number) => {
+		dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: rate })
+	}, [dispatch])
+
+	const skipForward = React.useCallback((seconds: number = 10) => {
+		dispatch({ type: MediaActionTypes.SEEK, detail: seconds })
+	}, [dispatch])
+
+	const skipBackward = React.useCallback((seconds: number = 10) => {
+		dispatch({ type: MediaActionTypes.SEEK, detail: -seconds })
+	}, [dispatch])
+
+	return {
+		play,
+		pause,
+		toggle,
+		seek,
+		setVolume,
+		mute,
+		unmute,
+		toggleMute,
+		enterFullscreen,
+		exitFullscreen,
+		toggleFullscreen,
+		enterPictureInPicture,
+		exitPictureInPicture,
+		togglePictureInPicture,
+		setPlaybackRate,
+		skipForward,
+		skipBackward
+	}
+}
+
+// Hook for debounced seek operations
+export function useDebouncedSeek(delay: number = 100) {
+	const dispatch = useMediaDispatch()
+	const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+	const debouncedSeek = React.useCallback((time: number) => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+		}
+		
+		timeoutRef.current = setTimeout(() => {
+			dispatch({ type: MediaActionTypes.SEEK, detail: time })
+		}, delay)
+	}, [dispatch, delay])
+
+	React.useEffect(() => {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+	}, [])
+
+	return debouncedSeek
+}
+
+// Hook for throttled volume changes
+export function useThrottledVolume(delay: number = 50) {
+	const dispatch = useMediaDispatch()
+	const lastUpdateRef = React.useRef<number>(0)
+
+	const throttledSetVolume = React.useCallback((volume: number) => {
+		const now = Date.now()
+		if (now - lastUpdateRef.current >= delay) {
+			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume })
+			lastUpdateRef.current = now
+		}
+	}, [dispatch, delay])
+
+	return throttledSetVolume
+}
+
+// Hook for optimized time formatting
+export function useFormattedTime(time: number) {
+	return React.useMemo(() => {
+		const hours = Math.floor(time / 3600)
+		const minutes = Math.floor((time % 3600) / 60)
+		const seconds = Math.floor(time % 60)
+
+		if (hours > 0) {
+			return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+		}
+		return `${minutes}:${seconds.toString().padStart(2, '0')}`
+	}, [time])
+}
+
+// Hook for intersection observer (for lazy loading)
+export function useIntersectionObserver(
+	elementRef: React.RefObject<Element>,
+	options?: IntersectionObserverInit
+) {
+	const [isIntersecting, setIsIntersecting] = React.useState(false)
+
+	React.useEffect(() => {
+		const element = elementRef.current
+		if (!element) return
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				setIsIntersecting(entry?.isIntersecting ?? false)
+			},
+			options
+		)
+
+		observer.observe(element)
+
+		return () => {
+			observer.unobserve(element)
+		}
+	}, [elementRef, options])
+
+	return isIntersecting
+}
+
+// Hook for media queries (responsive behavior)
+export function useMediaQuery(query: string) {
+	const [matches, setMatches] = React.useState(false)
+
+	React.useEffect(() => {
+		const mediaQuery = window.matchMedia(query)
+		setMatches(mediaQuery.matches)
+
+		const handler = (event: MediaQueryListEvent) => {
+			setMatches(event.matches)
+		}
+
+		mediaQuery.addEventListener('change', handler)
+		return () => mediaQuery.removeEventListener('change', handler)
+	}, [query])
+
+	return matches
+}

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

@@ -0,0 +1,417 @@
+"use client"
+
+import * as React from "react"
+import { useDeviceInfo, useHapticFeedback } from "@rp/ui/hooks/use-mobile"
+
+// 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)
+}