@therealtinhtute/baroiplayer 1.0.0

package/src/icons/types.ts

@@ -0,0 +1,40 @@
+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 IconTheme {
+  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 IconComponent = React.FC<IconProps>
+
+export type IconSet = Record<IconName, IconComponent>

package/src/index-enhanced.ts

@@ -0,0 +1,35 @@
+/**
+ * Enhanced BaroiPlayer Exports
+ * Includes all new optimized components and utilities
+ */
+
+// Enhanced Core Components
+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';
+
+// Enhanced Plugin System
+export {
+	EnhancedMediaPlugin,
+	EnhancedPluginRegistry,
+	EnhancedPluginManager,
+	createPerformanceMiddleware,
+	createErrorHandlingMiddleware,
+	createLoggingMiddleware,
+} from './core/plugins/enhanced-plugin-system';
+export type {
+	MediaPluginHooks,
+	PluginMiddleware,
+	PluginContext,
+} from './core/plugins/enhanced-plugin-system';
+
+// Enhanced Hooks
+export { useIntelligentPreloading } from './hooks/use-intelligent-preloading';
+
+// Media Resource Preloader
+export { MediaResourcePreloader } from './components/ui/media-resource-preloader';
+
+// Re-export all existing components and utilities
+export * from './index';

package/src/index-legacy.ts

@@ -0,0 +1,326 @@
+// Core Components (Legacy)
+export { AudioPlayer } from "./components/audio-player"
+export { MediaPlayer } from "./components/media-player"
+export { VideoPlayer } from "./components/video-player"
+
+// HLS Streaming Components
+export { MediaPlayerHLS } from "./components/media-player-hls"
+export type { MediaPlayerHLSProps } from "./components/media-player-hls"
+export { VideoJSAdapter } from "./adapters/videojs-adapter"
+export type { VideoSource, TextTrack, VideoJSAdapterProps } from "./adapters/videojs-adapter"
+export { SimpleVideoPlayer } from "./components/simple-video-player"
+
+// Modern React Player
+export { ModernMediaPlayer } from "./components/react-player-wrapper"
+export type { ModernMediaPlayerProps } from "./components/react-player-wrapper"
+
+// New DiceUI-style Components
+export { MediaPlayerAudio } from "./components/media-player-audio"
+export {
+	MediaPlayerControls,
+	MediaPlayerControlsOverlay
+} from "./components/media-player-controls"
+export { MediaPlayerError } from "./components/media-player-error"
+export { MediaPlayerFullscreen } from "./components/media-player-fullscreen"
+export { MediaPlayerLoading } from "./components/media-player-loading"
+export { MediaPlayerPlay } from "./components/media-player-play"
+export { MediaPlayerRoot } from "./components/media-player-root"
+export { MediaPlayerSeek } from "./components/media-player-seek"
+export { MediaPlayerTime } from "./components/media-player-time"
+export { MediaPlayerTooltip } from "./components/media-player-tooltip"
+export { MediaPlayerVideo } from "./components/media-player-video"
+export { MediaPlayerVolume } from "./components/media-player-volume"
+
+// Example Components
+export { BasicVideoPlayer } from "./components/examples/basic-video-player"
+export { CustomControlsExample } from "./components/examples/custom-controls-example"
+export {
+	EnhancedControlsExample,
+	CustomEnhancedControlsExample,
+	SkipButtonsOnlyExample
+} from "./components/examples/enhanced-controls-example"
+export type { EnhancedControlsExampleProps } from "./components/examples/enhanced-controls-example"
+
+// Minimal Variant Components (Doodstream-style)
+export {
+	MinimalMediaPlayer,
+	MinimalControls,
+	MinimalPlayButton,
+	MinimalSeekBar,
+	MinimalVolumeControl,
+	MinimalOverlay,
+	MinimalLoading,
+	SimpleMinimalPlayer
+} from "./components/variants/minimal"
+export type {
+	MinimalMediaPlayerProps,
+	MinimalControlsProps,
+	MinimalPlayButtonProps,
+	MinimalSeekBarProps,
+	MinimalVolumeControlProps,
+	MinimalOverlayProps,
+	MinimalLoadingProps
+} from "./components/variants/minimal"
+
+// Custom Icons
+export {
+	MinimalPlayIcon,
+	MinimalPauseIcon,
+	MinimalVolumeIcon,
+	MinimalVolumeMutedIcon,
+	MinimalFullscreenIcon,
+	MinimalExitFullscreenIcon,
+	MinimalSettingsIcon,
+	MinimalSpinner,
+	MinimalForwardIcon,
+	MinimalBackwardIcon,
+	defaultMinimalIcons
+} from "./components/icons"
+export type { IconProps, IconSet } from "./components/icons"
+
+// Enhanced Components
+export {
+	ChaptersPanel,
+	PictureInPictureButton,
+	PlaybackSpeedSelector,
+	QualitySelector,
+	SubtitleSelector
+} from "./components/enhanced/advanced-features"
+export {
+	EnhancedPlayButton,
+	EnhancedSeekBar,
+	EnhancedTimeDisplay,
+	EnhancedVolumeControl,
+	EnhancedBackwardButton,
+	EnhancedForwardButton,
+	EnhancedControlBar
+} from "./components/enhanced/enhanced-controls"
+export {
+	BufferHealthIndicator,
+	ConnectionStatus,
+	EnhancedError,
+	EnhancedLoading,
+	MediaPlayerErrorBoundary
+} from "./components/enhanced/error-handling"
+export { EnhancedMediaPlayer } from "./components/enhanced/media-player-enhanced"
+export type { EnhancedMediaPlayerProps } from "./components/enhanced/media-player-enhanced"
+
+// Enhanced Core System Exports
+export {
+	EnhancedHLSProvider,
+	ENHANCED_HLS_DEFAULTS
+} from "./core/providers/enhanced-hls-provider"
+export type { EnhancedHLSConfig } from "./core/providers/enhanced-hls-provider"
+
+export {
+	EnhancedMediaPlugin,
+	EnhancedPluginRegistry,
+	EnhancedPluginManager,
+	createPerformanceMiddleware,
+	createErrorHandlingMiddleware,
+	createLoggingMiddleware,
+} from "./core/plugins/enhanced-plugin-system"
+export type {
+	MediaPluginHooks,
+	PluginMiddleware,
+	PluginContext,
+} from "./core/plugins/enhanced-plugin-system"
+
+// Enhanced Hooks
+export { useIntelligentPreloading } from "./hooks/use-intelligent-preloading"
+export { useEnhancedMediaPlayer } from "./hooks/use-enhanced-media-player"
+
+// Performance Monitoring
+export {
+	PerformanceMonitor,
+	PerformanceMetrics,
+	usePerformanceMonitor as usePerformanceMonitoring
+} from "./core/performance"
+
+// Media Resource Preloader
+export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"
+
+// Development Tools
+export { DebugPanel, PerformanceDebugPanel } from "./components/enhanced/debug-panel"
+
+// React 19 Concurrent Components
+export {
+	ConcurrentMedia,
+	EnhancedMediaLoading,
+	EnhancedMediaSuspense,
+	EnhancedMediaWrapper,
+	MediaErrorBoundary,
+	MediaLoading,
+	MediaSuspense,
+	useDeferredMediaLoading,
+	// Hooks
+	useMediaConcurrent,
+	useMediaPerformance,
+	// HOCs
+	withMediaSuspense
+} from "./components/media-suspense"
+export type {
+	ConcurrentMediaProps,
+	EnhancedMediaWrapperProps,
+	MediaErrorBoundaryProps,
+	MediaLoadingProps,
+	MediaSuspenseProps
+} from "./components/media-suspense"
+
+// Context and Hooks
+export {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaEnhancements,
+	useMediaSelector,
+	// React 19 enhancements
+	useOptimisticMediaSelector
+} from "./context/media-context"
+export { MediaProvider } from "./context/media-provider"
+
+// React 19 Enhanced State Management
+export { createEnhancedMediaStore } from "./context/media-store"
+export type {
+	EnhancedMediaStore,
+	MediaActionState,
+	OptimisticMediaAction
+} from "./context/media-store"
+
+// React 19 Persistence Layer
+export {
+	defaultStorageAdapter,
+	MediaPersistenceManager,
+	STORAGE_KEYS,
+	useAutoMediaPersistence,
+	useMediaPersistence
+} from "./context/persistence"
+export type {
+	PersistenceConfig,
+	PlaybackHistoryItem,
+	SessionState,
+	StorageAdapter,
+	UserPreferences
+} from "./context/persistence"
+
+// React 19 Error Handling
+export {
+	MediaErrorHandler,
+	MediaErrorType,
+	useMediaErrorBoundary,
+	useMediaErrorHandler
+} from "./context/error-handling"
+export type {
+	ErrorRecoveryStrategy,
+	MediaError,
+	RetryConfig
+} from "./context/error-handling"
+
+// Core Architecture (New)
+export * from "./core"
+
+// Legacy UI Components
+export { FullscreenButton } from "./components/ui/fullscreen-button"
+export { PlayButton } from "./components/ui/play-button"
+export { SeekBar } from "./components/ui/seek-bar"
+export { TimeDisplay } from "./components/ui/time-display"
+export { VolumeControl } from "./components/ui/volume-control"
+
+// Legacy Hooks
+export { useKeyboardControls } from "./hooks/use-keyboard-controls"
+export { useMediaPlayer } from "./hooks/use-media-player"
+export {
+	useAdaptiveMediaState,
+	// React 19 enhanced versions
+	useEnhancedMediaState,
+	useMediaState
+} from "./hooks/use-media-state"
+
+// React 19 Advanced Hooks
+export {
+	useMediaActions,
+	useMediaActionState
+} from "./hooks/use-media-actions"
+export {
+	useMediaOptimistic,
+	useMediaStateComparison,
+	useOptimisticUpdates
+} from "./hooks/use-media-optimistic"
+
+// Optimized Hooks
+export {
+	useDebouncedSeek,
+	useFormattedTime,
+	useIntersectionObserver,
+	useMediaQuery,
+	useOptimizedMediaControls,
+	useOptimizedMediaState,
+	useThrottledVolume
+} from "./hooks/use-optimized-media"
+
+// Mobile-First Touch Gestures
+export {
+	useMediaGestures,
+	useTouchGestures
+} from "./hooks/use-touch-gestures"
+export type {
+	GestureConfig,
+	GestureEvent,
+	GestureType
+} from "./hooks/use-touch-gestures"
+
+// Refactored Hooks (React 19 optimized)
+export { useVideoPlayer } from "./hooks/useVideoPlayer"
+export { useSubtitles } from "./hooks/useSubtitles"
+export { useEnhancedSubtitles } from "./hooks/useEnhancedSubtitles"
+export type { SubtitleTrack, UseEnhancedSubtitlesOptions } from "./hooks/useEnhancedSubtitles"
+export { useMediaControls } from "./hooks/useMediaControls"
+export { useScreenshot } from "./hooks/useScreenshot"
+export type { VideoState, VideoControls } from "./hooks/useVideoPlayer"
+// Utilities
+export { formatTime, parseTime } from "./lib/format-time"
+export { cn } from "./lib/utils"
+// Types
+export type {
+	AudioFormat,
+	AudioMimeType,
+	AudioPlayerProps,
+	FullscreenButtonProps,
+	MediaCapabilities,
+	MediaErrorEvent,
+	// Event types
+	MediaEventMap,
+	MediaEventType,
+	MediaFormat,
+	MediaMimeType,
+	MediaPlayerConfig,
+	MediaPlayerControls as MediaPlayerControlsType,
+	MediaPlayerProps,
+	MediaPlayerState,
+	MediaProgressEvent,
+	MediaSource,
+	MediaTimeUpdateEvent,
+	MediaVolumeChangeEvent,
+	PlayButtonProps,
+	SeekBarProps,
+	SupportedFormats,
+	TimeDisplayProps,
+	// Format types
+	VideoFormat,
+	VideoMimeType,
+	VideoPlayerProps,
+	VolumeControlProps
+} from "./types"
+
+// React 19 Enhanced Types
+export type { MediaActionPayloads } from "./hooks/use-media-actions"
+
+// Format utilities and constants
+export {
+	AUDIO_MIME_TYPES,
+	getMediaTypeFromUrl,
+	getMimeTypeFromUrl,
+	SUPPORTED_AUDIO_FORMATS,
+	SUPPORTED_VIDEO_FORMATS,
+	VIDEO_MIME_TYPES
+} from "./types"

package/src/index.css

@@ -0,0 +1,102 @@
+/* Import Tailwind v4 */
+@import "tailwindcss";
+
+/* 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);
+  }
+}
+
+/* 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);
+  }
+}
+
+/* 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);
+  }
+}
+
+/* Component Styles */
+@import "./styles/minimal-player.css";
+@import "./styles/pixel-art.css";
+@import "./styles/videojs.css";
+
+/* Dark mode support */
+.dark {
+  color-scheme: dark;
+}