@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/components/media-suspense.tsx

@@ -11,55 +11,46 @@ export interface MediaLoadingProps {
 	variant?: "spinner" | "skeleton" | "pulse"
 }
 
-export function MediaLoading({ 
-	children, 
-	className, 
-	size = "md", 
-	variant = "spinner" 
+export function MediaLoading({
+	children,
+	className,
+	size = "md",
+	variant = "spinner"
 }: MediaLoadingProps) {
 	const sizeClasses = {
 		sm: "w-4 h-4",
-		md: "w-8 h-8", 
+		md: "w-8 h-8",
 		lg: "w-12 h-12"
 	}
 
 	if (variant === "spinner") {
 		return (
-			<div className={cn(
-				"flex items-center justify-center",
-				className
-			)}>
-				<div className={cn(
-					"animate-spin rounded-full border-2 border-current border-t-transparent",
-					sizeClasses[size]
-				)} />
-				{children && (
-					<span className="ml-2 text-muted-foreground text-sm">
-						{children}
-					</span>
-				)}
+			<div className={cn("flex items-center justify-center", className)}>
+				<div
+					className={cn(
+						"animate-spin rounded-full border-2 border-current border-t-transparent",
+						sizeClasses[size]
+					)}
+				/>
+				{children && <span className="ml-2 text-muted-foreground text-sm">{children}</span>}
 			</div>
 		)
 	}
 
 	if (variant === "skeleton") {
-		return (
-			<div className={cn(
-				"animate-pulse rounded bg-muted",
-				sizeClasses[size],
-				className
-			)} />
-		)
+		return <div className={cn("animate-pulse rounded bg-muted", sizeClasses[size], className)} />
 	}
 
 	// Pulse variant
 	return (
-		<div className={cn(
-			"animate-pulse bg-gradient-to-r bg-pos-0 bg-size-200 from-muted via-muted/50 to-muted",
-			"animate-shimmer rounded",
-			sizeClasses[size], 
-			className
-		)} />
+		<div
+			className={cn(
+				"animate-pulse bg-gradient-to-r bg-pos-0 bg-size-200 from-muted via-muted/50 to-muted",
+				"animate-shimmer rounded",
+				sizeClasses[size],
+				className
+			)}
+		/>
 	)
 }
 
@@ -70,16 +61,14 @@ export interface MediaSuspenseProps {
 	className?: string
 }
 
-export function MediaSuspense({ 
-	children, 
-	fallback = <MediaLoading />, 
-	className 
+export function MediaSuspense({
+	children,
+	fallback = <MediaLoading />,
+	className
 }: MediaSuspenseProps) {
 	return (
 		<div className={className}>
-			<Suspense fallback={fallback}>
-				{children}
-			</Suspense>
+			<Suspense fallback={fallback}>{children}</Suspense>
 		</div>
 	)
 }
@@ -97,16 +86,16 @@ export function withMediaSuspense<P extends object>(
 			</MediaSuspense>
 		)
 	})
-	
+
 	WrappedComponent.displayName = `withMediaSuspense(${Component.displayName || Component.name})`
-	
+
 	return WrappedComponent
 }
 
 // Hook for managing concurrent state updates
 export function useMediaConcurrent() {
 	const [isPending, startTransition] = React.useTransition()
-	
+
 	// Wrap state updates in transitions for better performance
 	const updateWithTransition = React.useCallback(
 		(updateFn: () => any): Promise<any> => {
@@ -116,23 +105,23 @@ export function useMediaConcurrent() {
 					resolve(result)
 				})
 			})
-		}, 
+		},
 		[startTransition]
 	)
-	
+
 	// Batch multiple updates together
 	const batchUpdates = React.useCallback(
 		(updates: Array<() => any>): Promise<any[]> => {
 			return new Promise((resolve) => {
 				startTransition(() => {
-					const results = updates.map(update => update())
+					const results = updates.map((update) => update())
 					resolve(results)
 				})
 			})
 		},
 		[startTransition]
 	)
-	
+
 	return {
 		isPending,
 		updateWithTransition,
@@ -153,25 +142,20 @@ interface MediaErrorBoundaryState {
 }
 
 // Default error fallback component
-function DefaultErrorFallback({ 
-	error, 
-	resetError 
-}: { 
+function DefaultErrorFallback({
+	error,
+	resetError
+}: {
 	error: Error
-	resetError: () => void 
+	resetError: () => void
 }) {
 	return (
 		<div className="flex flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-6">
-			<div className="mb-2 font-semibold text-destructive text-lg">
-				Media Player Error
-			</div>
-			<div className="mb-4 text-center text-muted-foreground text-sm">
-				{error.message}
-			</div>
+			<div className="mb-2 font-semibold text-destructive text-lg">Media Player Error</div>
+			<div className="mb-4 text-center text-muted-foreground text-sm">{error.message}</div>
 			<button
 				onClick={resetError}
-				className="rounded bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90"
-			>
+				className="rounded bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90">
 				Try Again
 			</button>
 		</div>
@@ -193,7 +177,7 @@ export class MediaErrorBoundary extends React.Component<
 
 	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
 		this.props.onError?.(error, errorInfo)
-		console.error('MediaErrorBoundary caught an error:', error, errorInfo)
+		console.error("MediaErrorBoundary caught an error:", error, errorInfo)
 	}
 
 	resetError = () => {
@@ -217,60 +201,58 @@ export interface ConcurrentMediaProps {
 	deferredMs?: number
 }
 
-export function ConcurrentMedia({ 
-	children, 
-	priority = "normal", 
-	deferredMs = 0 
+export function ConcurrentMedia({
+	children,
+	priority = "normal",
+	deferredMs = 0
 }: ConcurrentMediaProps) {
 	const [isDeferred, setIsDeferred] = React.useState(deferredMs > 0)
-	
+
+	// Always call hooks unconditionally
+	const deferredChildren = React.useDeferredValue(children)
+
 	React.useEffect(() => {
 		if (deferredMs > 0) {
 			const timer = setTimeout(() => {
 				setIsDeferred(false)
 			}, deferredMs)
-			
+
 			return () => clearTimeout(timer)
 		}
 	}, [deferredMs])
-	
+
 	if (isDeferred) {
 		return <MediaLoading variant="skeleton" />
 	}
-	
+
 	// Use different rendering strategies based on priority
 	if (priority === "high") {
 		// Render immediately without deferring
 		return <>{children}</>
 	}
-	
+
 	if (priority === "low") {
 		// Use deferred value for lower priority updates
-		const deferredChildren = React.useDeferredValue(children)
 		return <>{deferredChildren}</>
 	}
-	
+
 	// Normal priority - use transition
-	return (
-		<React.Suspense fallback={<MediaLoading />}>
-			{children}
-		</React.Suspense>
-	)
+	return <React.Suspense fallback={<MediaLoading />}>{children}</React.Suspense>
 }
 
 // Hook for deferred loading of media resources
 export function useDeferredMediaLoading(delay: number = 100) {
 	const [isReady, setIsReady] = React.useState(false)
 	const deferredIsReady = React.useDeferredValue(isReady)
-	
+
 	React.useEffect(() => {
 		const timer = setTimeout(() => {
 			setIsReady(true)
 		}, delay)
-		
+
 		return () => clearTimeout(timer)
 	}, [delay])
-	
+
 	return {
 		isReady: deferredIsReady,
 		actualIsReady: isReady
@@ -322,36 +304,36 @@ export function useMediaPerformance() {
 		errorCount: 0,
 		transitionCount: 0
 	})
-	
+
 	const recordRenderTime = React.useCallback((startTime: number) => {
 		const renderTime = performance.now() - startTime
-		setMetrics(prev => ({
+		setMetrics((prev) => ({
 			...prev,
 			renderTime: Math.round(renderTime * 100) / 100
 		}))
 	}, [])
-	
+
 	const incrementSuspense = React.useCallback(() => {
-		setMetrics(prev => ({
+		setMetrics((prev) => ({
 			...prev,
 			suspenseCount: prev.suspenseCount + 1
 		}))
 	}, [])
-	
+
 	const incrementError = React.useCallback(() => {
-		setMetrics(prev => ({
+		setMetrics((prev) => ({
 			...prev,
 			errorCount: prev.errorCount + 1
 		}))
 	}, [])
-	
+
 	const incrementTransition = React.useCallback(() => {
-		setMetrics(prev => ({
+		setMetrics((prev) => ({
 			...prev,
 			transitionCount: prev.transitionCount + 1
 		}))
 	}, [])
-	
+
 	return {
 		metrics,
 		recordRenderTime,
@@ -359,4 +341,4 @@ export function useMediaPerformance() {
 		incrementError,
 		incrementTransition
 	}
-}
+}

package/src/components/player-settings-form.tsx

@@ -1,163 +1,158 @@
-import { useActionState } from 'react'
+import { useActionState } from "react"
 
 export interface PlayerSettings {
-  volume: number
-  quality: string
-  subtitles: boolean
-  playbackRate: number
+	volume: number
+	quality: string
+	subtitles: boolean
+	playbackRate: number
 }
 
 interface SettingsState {
-  values: PlayerSettings
-  error?: string
-  success?: boolean
+	values: PlayerSettings
+	error?: string
+	success?: boolean
 }
 
 const defaultSettings: PlayerSettings = {
-  volume: 0.8,
-  quality: 'auto',
-  subtitles: false,
-  playbackRate: 1
+	volume: 0.8,
+	quality: "auto",
+	subtitles: false,
+	playbackRate: 1
 }
 
 async function updateSettings(
-  prevState: SettingsState,
-  formData: FormData
+	prevState: SettingsState,
+	formData: FormData
 ): Promise<SettingsState> {
-  try {
-    // Simulate async operation
-    await new Promise(resolve => setTimeout(resolve, 500))
-    
-    const settings: PlayerSettings = {
-      volume: Number(formData.get('volume')) || 0.8,
-      quality: (formData.get('quality') as string) || 'auto',
-      subtitles: formData.get('subtitles') === 'on',
-      playbackRate: Number(formData.get('playbackRate')) || 1
-    }
-    
-    // Validate settings
-    if (settings.volume < 0 || settings.volume > 1) {
-      throw new Error('Volume must be between 0 and 1')
-    }
-    
-    if (settings.playbackRate < 0.25 || settings.playbackRate > 2) {
-      throw new Error('Playback rate must be between 0.25 and 2')
-    }
-    
-    // Save to localStorage or send to server
-    localStorage.setItem('player-settings', JSON.stringify(settings))
-    
-    return {
-      values: settings,
-      success: true
-    }
-  } catch (error) {
-    return {
-      values: prevState.values,
-      error: error instanceof Error ? error.message : 'Unknown error'
-    }
-  }
+	try {
+		// Simulate async operation
+		await new Promise((resolve) => setTimeout(resolve, 500))
+
+		const settings: PlayerSettings = {
+			volume: Number(formData.get("volume")) || 0.8,
+			quality: (formData.get("quality") as string) || "auto",
+			subtitles: formData.get("subtitles") === "on",
+			playbackRate: Number(formData.get("playbackRate")) || 1
+		}
+
+		// Validate settings
+		if (settings.volume < 0 || settings.volume > 1) {
+			throw new Error("Volume must be between 0 and 1")
+		}
+
+		if (settings.playbackRate < 0.25 || settings.playbackRate > 2) {
+			throw new Error("Playback rate must be between 0.25 and 2")
+		}
+
+		// Save to localStorage or send to server
+		localStorage.setItem("player-settings", JSON.stringify(settings))
+
+		return {
+			values: settings,
+			success: true
+		}
+	} catch (error) {
+		return {
+			values: prevState.values,
+			error: error instanceof Error ? error.message : "Unknown error"
+		}
+	}
 }
 
 export function PlayerSettingsForm() {
-  const [state, submitAction, isPending] = useActionState(
-    updateSettings,
-    {
-      values: defaultSettings,
-      success: false
-    }
-  )
-  
-  return (
-    <div className="mx-auto w-full max-w-md">
-      <h3 className="mb-4 font-semibold text-lg text-white">Player Settings</h3>
-      
-      <form action={submitAction} className="space-y-4">
-        {state.error && (
-          <div className="rounded-lg border border-red-700 bg-red-900/20 p-3">
-            <p className="text-red-400 text-sm">{state.error}</p>
-          </div>
-        )}
-        
-        {state.success && (
-          <div className="rounded-lg border border-green-700 bg-green-900/20 p-3">
-            <p className="text-green-400 text-sm">Settings saved successfully!</p>
-          </div>
-        )}
-        
-        <fieldset disabled={isPending} className="space-y-4 disabled:opacity-50">
-          <div>
-            <label htmlFor="volume" className="mb-2 block font-medium text-sm text-white">
-              Volume: {Math.round(state.values.volume * 100)}%
-            </label>
-            <input
-              type="range"
-              id="volume"
-              name="volume"
-              min="0"
-              max="1"
-              step="0.01"
-              defaultValue={state.values.volume}
-              className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-            />
-          </div>
-          
-          <div>
-            <label htmlFor="quality" className="mb-2 block font-medium text-sm text-white">
-              Quality
-            </label>
-            <select
-              id="quality"
-              name="quality"
-              defaultValue={state.values.quality}
-              className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white focus:ring-2 focus:ring-blue-500"
-            >
-              <option value="auto">Auto</option>
-              <option value="1080p">1080p</option>
-              <option value="720p">720p</option>
-              <option value="480p">480p</option>
-              <option value="360p">360p</option>
-            </select>
-          </div>
-          
-          <div>
-            <label htmlFor="playbackRate" className="mb-2 block font-medium text-sm text-white">
-              Playback Rate: {state.values.playbackRate}x
-            </label>
-            <input
-              type="range"
-              id="playbackRate"
-              name="playbackRate"
-              min="0.25"
-              max="2"
-              step="0.25"
-              defaultValue={state.values.playbackRate}
-              className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-            />
-          </div>
-          
-          <div className="flex items-center">
-            <input
-              type="checkbox"
-              id="subtitles"
-              name="subtitles"
-              defaultChecked={state.values.subtitles}
-              className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500"
-            />
-            <label htmlFor="subtitles" className="ml-2 font-medium text-sm text-white">
-              Enable Subtitles
-            </label>
-          </div>
-          
-          <button
-            type="submit"
-            disabled={isPending}
-            className="w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:bg-gray-600"
-          >
-            {isPending ? 'Saving...' : 'Save Settings'}
-          </button>
-        </fieldset>
-      </form>
-    </div>
-  )
-}
+	const [state, submitAction, isPending] = useActionState(updateSettings, {
+		values: defaultSettings,
+		success: false
+	})
+
+	return (
+		<div className="mx-auto w-full max-w-md">
+			<h3 className="mb-4 font-semibold text-lg text-white">Player Settings</h3>
+
+			<form action={submitAction} className="space-y-4">
+				{state.error && (
+					<div className="rounded-lg border border-red-700 bg-red-900/20 p-3">
+						<p className="text-red-400 text-sm">{state.error}</p>
+					</div>
+				)}
+
+				{state.success && (
+					<div className="rounded-lg border border-green-700 bg-green-900/20 p-3">
+						<p className="text-green-400 text-sm">Settings saved successfully!</p>
+					</div>
+				)}
+
+				<fieldset disabled={isPending} className="space-y-4 disabled:opacity-50">
+					<div>
+						<label htmlFor="volume" className="mb-2 block font-medium text-sm text-white">
+							Volume: {Math.round(state.values.volume * 100)}%
+						</label>
+						<input
+							type="range"
+							id="volume"
+							name="volume"
+							min="0"
+							max="1"
+							step="0.01"
+							defaultValue={state.values.volume}
+							className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
+						/>
+					</div>
+
+					<div>
+						<label htmlFor="quality" className="mb-2 block font-medium text-sm text-white">
+							Quality
+						</label>
+						<select
+							id="quality"
+							name="quality"
+							defaultValue={state.values.quality}
+							className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white focus:ring-2 focus:ring-blue-500">
+							<option value="auto">Auto</option>
+							<option value="1080p">1080p</option>
+							<option value="720p">720p</option>
+							<option value="480p">480p</option>
+							<option value="360p">360p</option>
+						</select>
+					</div>
+
+					<div>
+						<label htmlFor="playbackRate" className="mb-2 block font-medium text-sm text-white">
+							Playback Rate: {state.values.playbackRate}x
+						</label>
+						<input
+							type="range"
+							id="playbackRate"
+							name="playbackRate"
+							min="0.25"
+							max="2"
+							step="0.25"
+							defaultValue={state.values.playbackRate}
+							className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
+						/>
+					</div>
+
+					<div className="flex items-center">
+						<input
+							type="checkbox"
+							id="subtitles"
+							name="subtitles"
+							defaultChecked={state.values.subtitles}
+							className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500"
+						/>
+						<label htmlFor="subtitles" className="ml-2 font-medium text-sm text-white">
+							Enable Subtitles
+						</label>
+					</div>
+
+					<button
+						type="submit"
+						disabled={isPending}
+						className="w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:bg-gray-600">
+						{isPending ? "Saving..." : "Save Settings"}
+					</button>
+				</fieldset>
+			</form>
+		</div>
+	)
+}