@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/icons/provider.tsx

@@ -1,64 +1,58 @@
-import { createContext, useContext, type ReactNode } from 'react'
-import type { IconTheme, IconSet, IconName, IconComponent } from './types'
+import { type ReactNode, createContext, useContext } from "react"
+import type { IconComponent, IconName, IconSet, IconTheme } from "./types"
 
 interface IconContextValue {
-  theme: IconTheme
-  icons: Partial<IconSet>
+	theme: IconTheme
+	icons: Partial<IconSet>
 }
 
 const IconContext = createContext<IconContextValue | null>(null)
 
 interface IconProviderProps {
-  children: ReactNode
-  theme?: IconTheme
-  icons?: Partial<IconSet>
+	children: ReactNode
+	theme?: IconTheme
+	icons?: Partial<IconSet>
 }
 
-export function IconProvider({
-  children,
-  theme = {},
-  icons = {}
-}: IconProviderProps) {
-  const value: IconContextValue = {
-    theme: {
-      size: 24,
-      color: 'currentColor',
-      strokeWidth: 2,
-      ...theme
-    },
-    icons
-  }
-  
-  return (
-    <IconContext.Provider value={value}>
-      {children}
-    </IconContext.Provider>
-  )
+export function IconProvider({ children, theme = {}, icons = {} }: IconProviderProps) {
+	const value: IconContextValue = {
+		theme: {
+			size: 24,
+			color: "currentColor",
+			strokeWidth: 2,
+			...theme
+		},
+		icons
+	}
+
+	return <IconContext.Provider value={value}>{children}</IconContext.Provider>
 }
 
 export function useIconTheme(): IconTheme {
-  const context = useContext(IconContext)
-  return context?.theme ?? {
-    size: 24,
-    color: 'currentColor',
-    strokeWidth: 2
-  }
+	const context = useContext(IconContext)
+	return (
+		context?.theme ?? {
+			size: 24,
+			color: "currentColor",
+			strokeWidth: 2
+		}
+	)
 }
 
 export function useIcon(name: IconName): IconComponent | null {
-  const context = useContext(IconContext)
-  const customIcon = context?.icons?.[name]
-  
-  if (customIcon) {
-    return customIcon
-  }
-  
-  // If no custom icon found, we'll need to import the default one
-  // This will be handled by the individual icon components
-  return null
+	const context = useContext(IconContext)
+	const customIcon = context?.icons?.[name]
+
+	if (customIcon) {
+		return customIcon
+	}
+
+	// If no custom icon found, we'll need to import the default one
+	// This will be handled by the individual icon components
+	return null
 }
 
 export function useCustomIcon(name: IconName): IconComponent | null {
-  const context = useContext(IconContext)
-  return context?.icons?.[name] || null
-}
+	const context = useContext(IconContext)
+	return context?.icons?.[name] || null
+}

package/src/icons/types.ts

@@ -1,40 +1,60 @@
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react"
 
-export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'width' | 'height' | 'viewBox'> {
-  size?: number | string
-  color?: string
-  strokeWidth?: number | string
-  className?: string
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "width" | "height" | "viewBox"> {
+	size?: number | string
+	color?: string
+	strokeWidth?: number | string
+	className?: string
 }
 
 export interface IconTheme {
-  size?: number | string
-  color?: string
-  strokeWidth?: number | string
-  animation?: string
-  className?: string
+	size?: number | string
+	color?: string
+	strokeWidth?: number | string
+	animation?: string
+	className?: string
 }
 
-export type IconName = 
-  | 'play' | 'pause' | 'stop'
-  | 'skip-forward' | 'skip-backward'
-  | 'fast-forward' | 'rewind'
-  | 'loop' | 'shuffle'
-  | 'volume' | 'volume-off'
-  | 'volume-low' | 'volume-high'
-  | 'fullscreen' | 'exit-fullscreen'
-  | 'picture-in-picture' | 'exit-picture-in-picture'
-  | 'theater-mode'
-  | 'settings' | 'settings-gear'
-  | 'quality' | 'speed'
-  | 'subtitles' | 'closed-captions'
-  | 'download' | 'share'
-  | 'heart' | 'heart-filled'
-  | 'info' | 'warning' | 'error'
-  | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right'
-  | 'check' | 'close'
-  | 'loading'
+export type IconName =
+	| "play"
+	| "pause"
+	| "stop"
+	| "skip-forward"
+	| "skip-backward"
+	| "fast-forward"
+	| "rewind"
+	| "loop"
+	| "shuffle"
+	| "volume"
+	| "volume-off"
+	| "volume-low"
+	| "volume-high"
+	| "fullscreen"
+	| "exit-fullscreen"
+	| "picture-in-picture"
+	| "exit-picture-in-picture"
+	| "theater-mode"
+	| "settings"
+	| "settings-gear"
+	| "quality"
+	| "speed"
+	| "subtitles"
+	| "closed-captions"
+	| "download"
+	| "share"
+	| "heart"
+	| "heart-filled"
+	| "info"
+	| "warning"
+	| "error"
+	| "chevron-up"
+	| "chevron-down"
+	| "chevron-left"
+	| "chevron-right"
+	| "check"
+	| "close"
+	| "loading"
 
 export type IconComponent = React.FC<IconProps>
 
-export type IconSet = Record<IconName, IconComponent>
+export type IconSet = Record<IconName, IconComponent>

package/src/index-enhanced.ts

@@ -4,11 +4,11 @@
  */
 
 // Enhanced Core Components
-export { EnhancedMediaPlayer } from './components/enhanced/enhanced-media-player';
+export { EnhancedMediaPlayer } from "./components/enhanced/enhanced-media-player"
 
 // Enhanced HLS Provider
-export { EnhancedHLSProvider, ENHANCED_HLS_DEFAULTS } from './core/providers/enhanced-hls-provider';
-export type { EnhancedHLSConfig } from './core/providers/enhanced-hls-provider';
+export { EnhancedHLSProvider, ENHANCED_HLS_DEFAULTS } from "./core/providers/enhanced-hls-provider"
+export type { EnhancedHLSConfig } from "./core/providers/enhanced-hls-provider"
 
 // Enhanced Plugin System
 export {
@@ -17,19 +17,19 @@ export {
 	EnhancedPluginManager,
 	createPerformanceMiddleware,
 	createErrorHandlingMiddleware,
-	createLoggingMiddleware,
-} from './core/plugins/enhanced-plugin-system';
+	createLoggingMiddleware
+} from "./core/plugins/enhanced-plugin-system"
 export type {
 	MediaPluginHooks,
 	PluginMiddleware,
-	PluginContext,
-} from './core/plugins/enhanced-plugin-system';
+	PluginContext
+} from "./core/plugins/enhanced-plugin-system"
 
 // Enhanced Hooks
-export { useIntelligentPreloading } from './hooks/use-intelligent-preloading';
+export { useIntelligentPreloading } from "./hooks/use-intelligent-preloading"
 
 // Media Resource Preloader
-export { MediaResourcePreloader } from './components/ui/media-resource-preloader';
+export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"
 
 // Re-export all existing components and utilities
-export * from './index';
+export * from "./index"

package/src/index-legacy.ts

@@ -118,12 +118,12 @@ export {
 	EnhancedPluginManager,
 	createPerformanceMiddleware,
 	createErrorHandlingMiddleware,
-	createLoggingMiddleware,
+	createLoggingMiddleware
 } from "./core/plugins/enhanced-plugin-system"
 export type {
 	MediaPluginHooks,
 	PluginMiddleware,
-	PluginContext,
+	PluginContext
 } from "./core/plugins/enhanced-plugin-system"
 
 // Enhanced Hooks
@@ -133,11 +133,10 @@ export { useEnhancedMediaPlayer } from "./hooks/use-enhanced-media-player"
 // Performance Monitoring
 export {
 	PerformanceMonitor,
+	PerformanceMetrics,
 	usePerformanceMonitor as usePerformanceMonitoring
 } from "./core/performance"
 
-export type { PerformanceMetrics } from "./core/performance"
-
 // Media Resource Preloader
 export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"
 

package/src/index.css

@@ -3,92 +3,92 @@
 
 /* Custom theme layer */
 @layer theme {
-  :root {
-    /* Colors in oklch for better perception */
-    --color-primary: oklch(65% 0.3 250);
-    --color-primary-hover: oklch(60% 0.3 250);
-    --color-secondary: oklch(75% 0.15 150);
-    --color-background: oklch(10% 0 0);
-    --color-surface: oklch(15% 0 0);
-    --color-text: oklch(95% 0 0);
-    
-    /* Spacing scale */
-    --spacing-xs: 0.25rem;
-    --spacing-sm: 0.5rem;
-    --spacing-md: 1rem;
-    --spacing-lg: 1.5rem;
-    --spacing-xl: 2rem;
-    
-    /* Animation timing */
-    --duration-fast: 150ms;
-    --duration-normal: 300ms;
-    --duration-slow: 500ms;
-    
-    /* Container queries breakpoints */
-    --container-sm: 480px;
-    --container-md: 768px;
-    --container-lg: 1024px;
-  }
-  
-  /* Light theme */
-  [data-theme="light"] {
-    --color-background: oklch(98% 0 0);
-    --color-surface: oklch(100% 0 0);
-    --color-text: oklch(10% 0 0);
-  }
+	:root {
+		/* Colors in oklch for better perception */
+		--color-primary: oklch(65% 0.3 250);
+		--color-primary-hover: oklch(60% 0.3 250);
+		--color-secondary: oklch(75% 0.15 150);
+		--color-background: oklch(10% 0 0);
+		--color-surface: oklch(15% 0 0);
+		--color-text: oklch(95% 0 0);
+
+		/* Spacing scale */
+		--spacing-xs: 0.25rem;
+		--spacing-sm: 0.5rem;
+		--spacing-md: 1rem;
+		--spacing-lg: 1.5rem;
+		--spacing-xl: 2rem;
+
+		/* Animation timing */
+		--duration-fast: 150ms;
+		--duration-normal: 300ms;
+		--duration-slow: 500ms;
+
+		/* Container queries breakpoints */
+		--container-sm: 480px;
+		--container-md: 768px;
+		--container-lg: 1024px;
+	}
+
+	/* Light theme */
+	[data-theme="light"] {
+		--color-background: oklch(98% 0 0);
+		--color-surface: oklch(100% 0 0);
+		--color-text: oklch(10% 0 0);
+	}
 }
 
 /* Component styles with container queries */
 @layer components {
-  .player-container {
-    container-type: inline-size;
-    container-name: player;
-  }
-  
-  .player-controls {
-    display: grid;
-    gap: var(--spacing-sm);
-    
-    @container player (min-width: 480px) {
-      grid-template-columns: auto 1fr auto;
-    }
-    
-    @container player (min-width: 768px) {
-      grid-template-columns: auto 1fr auto auto;
-      gap: var(--spacing-md);
-    }
-  }
-  
-  /* Smooth entry animations with @starting-style */
-  .control-button {
-    @starting-style {
-      opacity: 0;
-      scale: 0.9;
-    }
-    
-    opacity: 1;
-    scale: 1;
-    transition: all var(--duration-normal);
-  }
+	.player-container {
+		container-type: inline-size;
+		container-name: player;
+	}
+
+	.player-controls {
+		display: grid;
+		gap: var(--spacing-sm);
+
+		@container player (min-width: 480px) {
+			grid-template-columns: auto 1fr auto;
+		}
+
+		@container player (min-width: 768px) {
+			grid-template-columns: auto 1fr auto auto;
+			gap: var(--spacing-md);
+		}
+	}
+
+	/* Smooth entry animations with @starting-style */
+	.control-button {
+		@starting-style {
+			opacity: 0;
+			scale: 0.9;
+		}
+
+		opacity: 1;
+		scale: 1;
+		transition: all var(--duration-normal);
+	}
 }
 
 /* Utility overrides */
 @layer utilities {
-  .text-primary {
-    color: var(--color-primary);
-  }
-  
-  .bg-surface {
-    background-color: var(--color-surface);
-  }
-  
-  .bg-primary {
-    background-color: var(--color-primary);
-  }
-  
-  .bg-primary-hover {
-    background-color: var(--color-primary-hover);
-  }
+	.text-primary {
+		color: var(--color-primary);
+	}
+
+	.bg-surface {
+		background-color: var(--color-surface);
+	}
+
+	.bg-primary {
+		background-color: var(--color-primary);
+	}
+
+	.bg-primary-hover {
+		background-color: var(--color-primary-hover);
+	}
 }
 
 /* Component Styles */
@@ -98,5 +98,5 @@
 
 /* Dark mode support */
 .dark {
-  color-scheme: dark;
-}
+	color-scheme: dark;
+}

package/src/index.ts

@@ -78,18 +78,12 @@ export { useMediaActions } from "./hooks/use-media-actions"
 export { useMediaActionState } from "./hooks/use-media-actions"
 
 // Performance & Optimization Hooks
-export {
-	useIntelligentPreloading
-} from "./hooks/use-intelligent-preloading"
+export { useIntelligentPreloading } from "./hooks/use-intelligent-preloading"
 
 // Specialized Hooks
-export {
-	useKeyboardControls
-} from "./hooks/use-keyboard-controls"
+export { useKeyboardControls } from "./hooks/use-keyboard-controls"
 
-export {
-	useTouchGestures
-} from "./hooks/use-touch-gestures"
+export { useTouchGestures } from "./hooks/use-touch-gestures"
 
 export { useScreenshot } from "./hooks/useScreenshot"
 export { useSubtitles } from "./hooks/useSubtitles"
@@ -114,9 +108,7 @@ export {
 } from "./types"
 
 // Performance Monitoring
-export {
-	PerformanceMonitor
-} from "./core/performance"
+export { PerformanceMonitor } from "./core/performance"
 
 // ========================================
 // 📚 Context & State
@@ -124,9 +116,7 @@ export {
 // React context and state management
 
 // Media Context
-export {
-	MediaProvider
-} from "./context/media-provider"
+export { MediaProvider } from "./context/media-provider"
 
 export {
 	useMediaContext,
@@ -136,9 +126,7 @@ export {
 } from "./context/media-context"
 
 // Enhanced State Management (React 19)
-export {
-	createEnhancedMediaStore
-} from "./context/media-store"
+export { createEnhancedMediaStore } from "./context/media-store"
 
 // ========================================
 // 🎨 Icons & Styling
@@ -198,7 +186,6 @@ export type {
 	MediaPlayerConfig,
 	MediaPlayerState,
 	MediaCapabilities,
-
 	// Event Types
 	MediaEventMap,
 	MediaEventType,
@@ -206,11 +193,9 @@ export type {
 	MediaProgressEvent,
 	MediaTimeUpdateEvent,
 	MediaVolumeChangeEvent,
-
 	// Component Props
 	VideoFormat,
 	AudioFormat,
 	VideoMimeType,
-	AudioMimeType,
-
-	} from "./types"
+	AudioMimeType
+} from "./types"