@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/dist/src/hooks/use-media-actions.ts

@@ -1,175 +0,0 @@
-"use client"
-
-import React from "react"
-import type { MediaActionType, MediaState } from "../context/media-context"
-import type { OptimisticMediaAction, MediaActionState, EnhancedMediaStore } from "../context/media-store"
-import { MediaActionTypes } from "../context/media-context"
-
-// Action payload types
-export interface MediaActionPayloads {
-	[MediaActionTypes.PLAY]: void
-	[MediaActionTypes.PAUSE]: void
-	[MediaActionTypes.SEEK]: number
-	[MediaActionTypes.SET_VOLUME]: number
-	[MediaActionTypes.MUTE]: void
-	[MediaActionTypes.UNMUTE]: void
-	[MediaActionTypes.TOGGLE_MUTE]: void
-	[MediaActionTypes.SET_DURATION]: number
-	[MediaActionTypes.SET_CURRENT_TIME]: number
-	[MediaActionTypes.SET_BUFFERED]: TimeRanges | null
-	[MediaActionTypes.SET_LOADING]: boolean
-	[MediaActionTypes.SET_ERROR]: string | null
-	[MediaActionTypes.ENTER_FULLSCREEN]: void
-	[MediaActionTypes.EXIT_FULLSCREEN]: void
-	[MediaActionTypes.ENTER_PIP]: void
-	[MediaActionTypes.EXIT_PIP]: void
-	[MediaActionTypes.SET_PLAYBACK_RATE]: number
-	[MediaActionTypes.SET_SUBTITLE_TRACK]: TextTrack | null
-	[MediaActionTypes.SET_RENDITION]: string | null
-	[MediaActionTypes.TOGGLE_SUBTITLES]: void
-	[MediaActionTypes.PREVIEW_TIME]: number | null
-	[MediaActionTypes.CLEAR_PREVIEW]: void
-}
-
-// Enhanced action creator that returns a Promise
-type OptimisticActionCreator<T extends keyof MediaActionPayloads> = MediaActionPayloads[T] extends void
-	? (optimistic?: boolean) => Promise<void>
-	: (payload: MediaActionPayloads[T], optimistic?: boolean) => Promise<void>
-
-// Action creator factory
-function createOptimisticAction<T extends keyof MediaActionPayloads>(
-	type: T,
-	store: EnhancedMediaStore
-): OptimisticActionCreator<T> {
-	return ((payload?: any, optimistic = false) => {
-		const action: OptimisticMediaAction = {
-			type,
-			detail: payload,
-			optimistic,
-			timestamp: Date.now()
-		}
-
-		if (optimistic) {
-			return store.dispatchOptimistic(action)
-		} else {
-			store.dispatch(action)
-			return Promise.resolve()
-		}
-	}) as OptimisticActionCreator<T>
-}
-
-// React 19 useActionState integration
-export function useMediaActionState(store: EnhancedMediaStore) {
-	const [actionState, setActionState] = React.useState<MediaActionState>(store.getActionState())
-
-	// Subscribe to action state changes
-	React.useEffect(() => {
-		const unsubscribe = store.subscribe(() => {
-			const newActionState = store.getActionState()
-			setActionState(current => 
-				JSON.stringify(current) !== JSON.stringify(newActionState) 
-					? newActionState 
-					: current
-			)
-		})
-		return unsubscribe
-	}, [store])
-
-	return actionState
-}
-
-// Media actions hook with React 19 optimistic updates
-export function useMediaActions(store: EnhancedMediaStore) {
-	// Create action creators with optimistic support
-	const actions = React.useMemo(() => ({
-		// Playback actions
-		play: createOptimisticAction(MediaActionTypes.PLAY, store),
-		pause: createOptimisticAction(MediaActionTypes.PAUSE, store),
-		seek: createOptimisticAction(MediaActionTypes.SEEK, store),
-		
-		// Volume actions  
-		setVolume: createOptimisticAction(MediaActionTypes.SET_VOLUME, store),
-		mute: createOptimisticAction(MediaActionTypes.MUTE, store),
-		unmute: createOptimisticAction(MediaActionTypes.UNMUTE, store),
-		toggleMute: createOptimisticAction(MediaActionTypes.TOGGLE_MUTE, store),
-		
-		// Media state actions
-		setDuration: createOptimisticAction(MediaActionTypes.SET_DURATION, store),
-		setCurrentTime: createOptimisticAction(MediaActionTypes.SET_CURRENT_TIME, store),
-		setBuffered: createOptimisticAction(MediaActionTypes.SET_BUFFERED, store),
-		setLoading: createOptimisticAction(MediaActionTypes.SET_LOADING, store),
-		setError: createOptimisticAction(MediaActionTypes.SET_ERROR, store),
-		
-		// Display actions
-		enterFullscreen: createOptimisticAction(MediaActionTypes.ENTER_FULLSCREEN, store),
-		exitFullscreen: createOptimisticAction(MediaActionTypes.EXIT_FULLSCREEN, store),
-		enterPiP: createOptimisticAction(MediaActionTypes.ENTER_PIP, store),
-		exitPiP: createOptimisticAction(MediaActionTypes.EXIT_PIP, store),
-		
-		// Advanced actions
-		setPlaybackRate: createOptimisticAction(MediaActionTypes.SET_PLAYBACK_RATE, store),
-		setSubtitleTrack: createOptimisticAction(MediaActionTypes.SET_SUBTITLE_TRACK, store),
-		setRendition: createOptimisticAction(MediaActionTypes.SET_RENDITION, store),
-		toggleSubtitles: createOptimisticAction(MediaActionTypes.TOGGLE_SUBTITLES, store),
-		
-		// Preview actions
-		previewTime: createOptimisticAction(MediaActionTypes.PREVIEW_TIME, store),
-		clearPreview: createOptimisticAction(MediaActionTypes.CLEAR_PREVIEW, store)
-	}), [store])
-
-	// Get action state for loading/error handling
-	const actionState = useMediaActionState(store)
-
-	// Convenience methods that commonly use optimistic updates
-	const optimisticActions = React.useMemo(() => ({
-		// These actions benefit from immediate UI feedback
-		togglePlayPause: async (isPlaying: boolean) => {
-			if (isPlaying) {
-				await actions.pause(true) // optimistic
-			} else {
-				await actions.play(true) // optimistic
-			}
-		},
-		
-		seekWithPreview: async (time: number) => {
-			// Immediate preview update, then actual seek
-			await actions.previewTime(time, true)
-			await actions.seek(time, true)
-		},
-		
-		adjustVolume: async (delta: number, currentVolume: number) => {
-			const newVolume = Math.max(0, Math.min(1, currentVolume + delta))
-			await actions.setVolume(newVolume, true)
-		},
-		
-		toggleFullscreenOptimistic: async (isFullscreen: boolean) => {
-			if (isFullscreen) {
-				await actions.exitFullscreen(true)
-			} else {
-				await actions.enterFullscreen(true)
-			}
-		}
-	}), [actions])
-
-	// Retry failed action
-	const retryLastAction = React.useCallback(async () => {
-		const { lastAction } = actionState
-		if (lastAction && actionState.error) {
-			await store.dispatchOptimistic({
-				...lastAction,
-				retryCount: (lastAction.retryCount || 0) + 1
-			})
-		}
-	}, [store, actionState])
-
-	return {
-		...actions,
-		...optimisticActions,
-		actionState,
-		retryLastAction,
-		isLoading: actionState.pending,
-		hasError: !!actionState.error,
-		errorMessage: actionState.error,
-		retryCount: actionState.retryCount
-	}
-}

package/dist/src/hooks/use-media-metadata.d.ts

@@ -1,11 +0,0 @@
-export interface MediaMetadata {
-    title?: string;
-    artist?: string;
-    duration: number;
-    format: string;
-    width?: number;
-    height?: number;
-}
-export declare function useMediaMetadata(src: string): MediaMetadata;
-export declare function formatTime(seconds: number): string;
-//# sourceMappingURL=use-media-metadata.d.ts.map

package/dist/src/hooks/use-media-metadata.ts

@@ -1,89 +0,0 @@
-import { use, cache } from 'react'
-
-export interface MediaMetadata {
-  title?: string
-  artist?: string
-  duration: number
-  format: string
-  width?: number
-  height?: number
-}
-
-// Cache metadata fetches to prevent duplicate requests
-const fetchMetadata = cache(async (src: string): Promise<MediaMetadata> => {
-  try {
-    // Create a video element to get metadata
-    const video = document.createElement('video')
-    video.crossOrigin = 'anonymous'
-    video.preload = 'metadata'
-    
-    return new Promise((resolve, reject) => {
-      const timeout = setTimeout(() => {
-        video.removeEventListener('loadedmetadata', onMetadata)
-        video.removeEventListener('error', onError)
-        reject(new Error('Metadata loading timeout'))
-      }, 10000) // 10 second timeout
-      
-      const onMetadata = () => {
-        clearTimeout(timeout)
-        video.removeEventListener('loadedmetadata', onMetadata)
-        video.removeEventListener('error', onError)
-        
-        const metadata: MediaMetadata = {
-          duration: video.duration || 0,
-          format: getFormatFromSrc(src),
-          width: video.videoWidth || undefined,
-          height: video.videoHeight || undefined,
-        }
-        
-        resolve(metadata)
-      }
-      
-      const onError = (error: Event) => {
-        clearTimeout(timeout)
-        video.removeEventListener('loadedmetadata', onMetadata)
-        video.removeEventListener('error', onError)
-        reject(new Error('Failed to load media metadata'))
-      }
-      
-      video.addEventListener('loadedmetadata', onMetadata)
-      video.addEventListener('error', onError)
-      video.src = src
-    })
-  } catch (error) {
-    throw new Error(`Failed to fetch metadata: ${error instanceof Error ? error.message : 'Unknown error'}`)
-  }
-})
-
-function getFormatFromSrc(src: string): string {
-  const url = new URL(src, window.location.href)
-  const pathname = url.pathname.toLowerCase()
-  
-  if (pathname.endsWith('.mp4')) return 'MP4'
-  if (pathname.endsWith('.webm')) return 'WebM'
-  if (pathname.endsWith('.ogg')) return 'OGG'
-  if (pathname.endsWith('.m3u8')) return 'HLS'
-  if (pathname.endsWith('.mpd')) return 'DASH'
-  
-  return 'Unknown'
-}
-
-export function useMediaMetadata(src: string): MediaMetadata {
-  // Use the React 19 use() hook for async data
-  return use(fetchMetadata(src))
-}
-
-// Utility function to format time
-export function formatTime(seconds: number): string {
-  if (!isFinite(seconds) || isNaN(seconds)) return '0:00'
-  
-  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')}`
-  } else {
-    return `${minutes}:${secs.toString().padStart(2, '0')}`
-  }
-}

package/dist/src/hooks/use-media-optimistic.d.ts

@@ -1,36 +0,0 @@
-import type { MediaState } from "../context/media-context";
-import type { OptimisticMediaAction, EnhancedMediaStore } from "../context/media-store";
-export declare function useMediaOptimistic(store: EnhancedMediaStore): {
-    dispatchOptimistic: (action: OptimisticMediaAction) => Promise<void>;
-    togglePlayPause: () => Promise<void>;
-    setVolumeOptimistic: (volume: number) => Promise<void>;
-    seekOptimistic: (time: number) => Promise<void>;
-    toggleMuteOptimistic: () => Promise<void>;
-    toggleFullscreenOptimistic: () => Promise<void>;
-    setPlaybackRateOptimistic: (rate: number) => Promise<void>;
-    toggleSubtitlesOptimistic: () => Promise<void>;
-    isPlaying: boolean;
-    currentTime: number;
-    volume: number;
-    isMuted: boolean;
-    isFullscreen: boolean;
-    playbackRate: number;
-    subtitlesShowing: boolean;
-    previewTime: number | null;
-    progress: number;
-    formattedTime: string;
-    formattedDuration: string;
-    canPlay: boolean;
-    hasError: boolean;
-    isBuffering: boolean;
-    state: MediaState;
-    actualState: MediaState;
-};
-export declare function useOptimisticUpdates(store: EnhancedMediaStore): boolean;
-export declare function useMediaStateComparison(store: EnhancedMediaStore): {
-    actualState: MediaState;
-    optimisticState: MediaState;
-    differences: any[];
-    hasOptimisticUpdates: boolean;
-};
-//# sourceMappingURL=use-media-optimistic.d.ts.map

package/dist/src/hooks/use-media-optimistic.ts

@@ -1,270 +0,0 @@
-"use client"
-
-import React, { useOptimistic } from "react"
-import type { MediaState } from "../context/media-context"
-import type { OptimisticMediaAction, EnhancedMediaStore } from "../context/media-store"
-
-// Optimistic update reducer function
-function optimisticMediaReducer(
-	state: MediaState, 
-	action: OptimisticMediaAction
-): MediaState {
-	if (!action.optimistic) return state
-
-	// Apply immediate optimistic updates for better UX
-	switch (action.type) {
-		case "PLAY":
-			return { ...state, isPlaying: true, error: null }
-		
-		case "PAUSE":
-			return { ...state, isPlaying: false }
-		
-		case "SEEK":
-			return { ...state, currentTime: action.detail }
-		
-		case "SET_VOLUME":
-			return { ...state, volume: Math.max(0, Math.min(1, action.detail)) }
-		
-		case "MUTE":
-			return { ...state, isMuted: true }
-		
-		case "UNMUTE":
-			return { ...state, isMuted: false }
-		
-		case "TOGGLE_MUTE":
-			return { ...state, isMuted: !state.isMuted }
-		
-		case "ENTER_FULLSCREEN":
-			return { ...state, isFullscreen: true }
-		
-		case "EXIT_FULLSCREEN":
-			return { ...state, isFullscreen: false }
-		
-		case "SET_PLAYBACK_RATE":
-			return { ...state, playbackRate: action.detail }
-		
-		case "TOGGLE_SUBTITLES":
-			return { ...state, subtitlesShowing: !state.subtitlesShowing }
-		
-		case "PREVIEW_TIME":
-			return { ...state, previewTime: action.detail }
-		
-		case "CLEAR_PREVIEW":
-			return { 
-				...state, 
-				previewTime: null, 
-				previewImage: null, 
-				previewCoords: null 
-			}
-		
-		default:
-			return state
-	}
-}
-
-// Media optimistic state hook using React 19's useOptimistic
-export function useMediaOptimistic(store: EnhancedMediaStore) {
-	const actualState = React.useSyncExternalStore(
-		store.subscribe,
-		store.getState,
-		store.getState
-	)
-
-	const [optimisticState, addOptimistic] = useOptimistic(
-		actualState,
-		optimisticMediaReducer
-	)
-
-	// Enhanced dispatch that uses optimistic updates
-	const dispatchOptimistic = React.useCallback(async (action: OptimisticMediaAction) => {
-		// Add optimistic update immediately
-		if (action.optimistic) {
-			addOptimistic(action)
-		}
-		
-		// Dispatch the actual action
-		await store.dispatchOptimistic(action)
-	}, [store, addOptimistic])
-
-	// Quick actions with optimistic updates
-	const optimisticActions = React.useMemo(() => ({
-		// Play/Pause with immediate feedback
-		togglePlayPause: async () => {
-			const action: OptimisticMediaAction = {
-				type: optimisticState.isPlaying ? "PAUSE" : "PLAY",
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
-
-		// Volume control with immediate slider feedback
-		setVolumeOptimistic: async (volume: number) => {
-			const action: OptimisticMediaAction = {
-				type: "SET_VOLUME",
-				detail: Math.max(0, Math.min(1, volume)),
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
-
-		// Seek with immediate scrub feedback
-		seekOptimistic: async (time: number) => {
-			const action: OptimisticMediaAction = {
-				type: "SEEK",
-				detail: time,
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
-
-		// Mute toggle with immediate icon change
-		toggleMuteOptimistic: async () => {
-			const action: OptimisticMediaAction = {
-				type: "TOGGLE_MUTE",
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
-
-		// Fullscreen toggle with immediate layout change
-		toggleFullscreenOptimistic: async () => {
-			const action: OptimisticMediaAction = {
-				type: optimisticState.isFullscreen ? "EXIT_FULLSCREEN" : "ENTER_FULLSCREEN",
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
-
-		// Playback rate with immediate feedback
-		setPlaybackRateOptimistic: async (rate: number) => {
-			const action: OptimisticMediaAction = {
-				type: "SET_PLAYBACK_RATE",
-				detail: rate,
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
-
-		// Subtitle toggle with immediate visibility change
-		toggleSubtitlesOptimistic: async () => {
-			const action: OptimisticMediaAction = {
-				type: "TOGGLE_SUBTITLES",
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		}
-	}), [optimisticState, dispatchOptimistic])
-
-	// State selectors that return optimistic values
-	const selectors = React.useMemo(() => ({
-		isPlaying: optimisticState.isPlaying,
-		currentTime: optimisticState.currentTime,
-		volume: optimisticState.volume,
-		isMuted: optimisticState.isMuted,
-		isFullscreen: optimisticState.isFullscreen,
-		playbackRate: optimisticState.playbackRate,
-		subtitlesShowing: optimisticState.subtitlesShowing,
-		previewTime: optimisticState.previewTime,
-		
-		// Computed values
-		progress: optimisticState.duration > 0 
-			? optimisticState.currentTime / optimisticState.duration 
-			: 0,
-		
-		formattedTime: formatTime(optimisticState.currentTime),
-		formattedDuration: formatTime(optimisticState.duration),
-		
-		// State checks
-		canPlay: !optimisticState.isLoading && !optimisticState.error,
-		hasError: !!optimisticState.error,
-		isBuffering: optimisticState.isLoading
-	}), [optimisticState])
-
-	return {
-		state: optimisticState,
-		actualState,
-		...selectors,
-		...optimisticActions,
-		dispatchOptimistic
-	}
-}
-
-// Time formatting utility
-function formatTime(seconds: number): string {
-	if (!seconds || !isFinite(seconds)) return "0:00"
-	
-	const mins = Math.floor(seconds / 60)
-	const secs = Math.floor(seconds % 60)
-	const hours = Math.floor(mins / 60)
-	
-	if (hours > 0) {
-		return `${hours}:${String(mins % 60).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
-	}
-	
-	return `${mins}:${String(secs).padStart(2, '0')}`
-}
-
-// Hook for components that need to detect optimistic updates
-export function useOptimisticUpdates(store: EnhancedMediaStore) {
-	const [hasOptimisticUpdates, setHasOptimisticUpdates] = React.useState(false)
-	
-	React.useEffect(() => {
-		const unsubscribe = store.subscribe(() => {
-			const actualState = store.getState()
-			const optimisticState = store.getOptimisticState()
-			
-			const hasUpdates = JSON.stringify(actualState) !== JSON.stringify(optimisticState)
-			setHasOptimisticUpdates(hasUpdates)
-		})
-		
-		return unsubscribe
-	}, [store])
-	
-	return hasOptimisticUpdates
-}
-
-// Hook to get both actual and optimistic state for debugging
-export function useMediaStateComparison(store: EnhancedMediaStore) {
-	const actualState = React.useSyncExternalStore(
-		store.subscribe,
-		store.getState,
-		store.getState
-	)
-	
-	const optimisticState = React.useSyncExternalStore(
-		store.subscribe,
-		store.getOptimisticState,
-		store.getOptimisticState
-	)
-	
-	const differences = React.useMemo(() => {
-		const diffs: any[] = []
-		
-		const stateKeys = Object.keys(actualState) as Array<keyof MediaState>
-		stateKeys.forEach(key => {
-			if (JSON.stringify(actualState[key]) !== JSON.stringify(optimisticState[key])) {
-				diffs.push({
-					key: key as string,
-					actual: actualState[key],
-					optimistic: optimisticState[key]
-				})
-			}
-		})
-		
-		return diffs
-	}, [actualState, optimisticState])
-	
-	return {
-		actualState,
-		optimisticState,
-		differences,
-		hasOptimisticUpdates: differences.length > 0
-	}
-}

package/dist/src/hooks/use-media-player.d.ts

@@ -1,31 +0,0 @@
-import type { MediaPlayerControls } from "../types/index";
-interface UseMediaPlayerOptions {
-    src: string | string[];
-    autoPlay?: boolean;
-    loop?: boolean;
-    muted?: boolean;
-    volume?: number;
-    preload?: "none" | "metadata" | "auto";
-    crossOrigin?: "anonymous" | "use-credentials";
-    playbackRates?: number[];
-    keyboardControls?: boolean;
-    showControls?: boolean;
-    customControls?: boolean;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onTimeUpdate?: (currentTime: number) => void;
-    onDurationChange?: (duration: number) => void;
-    onVolumeChange?: (volume: number) => void;
-    onError?: (error: string) => void;
-    onLoadStart?: () => void;
-    onLoadedData?: () => void;
-    onEnded?: () => void;
-}
-export declare function useMediaPlayer(options: UseMediaPlayerOptions): {
-    state: import("..").MediaPlayerState;
-    controls: MediaPlayerControls;
-    mediaRef: import("react").RefObject<HTMLVideoElement | HTMLAudioElement | null>;
-    containerRef: import("react").RefObject<HTMLDivElement | null>;
-};
-export {};
-//# sourceMappingURL=use-media-player.d.ts.map