@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/core/progressive-loading.tsx

@@ -1,322 +1,331 @@
-import React, { lazy, Suspense } from 'react';
+import React, { lazy, Suspense } from "react"
 
 // Feature flags for progressive loading
 export const FEATURES = {
-  SUBTITLES: 'subtitles',
-  PLAYLISTS: 'playlists', 
-  ADVANCED_CONTROLS: 'advanced_controls',
-  ANALYTICS: 'analytics',
-  PICTURE_IN_PICTURE: 'picture_in_picture',
-  QUALITY_SELECTOR: 'quality_selector',
-  PLAYBACK_SPEED: 'playback_speed',
-  CHAPTERS: 'chapters',
-  THUMBNAILS: 'thumbnails',
-  KEYBOARD_SHORTCUTS: 'keyboard_shortcuts'
-} as const;
-
-export type FeatureType = typeof FEATURES[keyof typeof FEATURES];
+	SUBTITLES: "subtitles",
+	PLAYLISTS: "playlists",
+	ADVANCED_CONTROLS: "advanced_controls",
+	ANALYTICS: "analytics",
+	PICTURE_IN_PICTURE: "picture_in_picture",
+	QUALITY_SELECTOR: "quality_selector",
+	PLAYBACK_SPEED: "playback_speed",
+	CHAPTERS: "chapters",
+	THUMBNAILS: "thumbnails",
+	KEYBOARD_SHORTCUTS: "keyboard_shortcuts"
+} as const
+
+export type FeatureType = (typeof FEATURES)[keyof typeof FEATURES]
 
 // Progressive loading configuration
 export interface ProgressiveLoadingConfig {
-  enabledFeatures: FeatureType[];
-  loadingStrategy: 'lazy' | 'preload' | 'immediate';
-  fallbackTimeout: number;
-  retryAttempts: number;
+	enabledFeatures: FeatureType[]
+	loadingStrategy: "lazy" | "preload" | "immediate"
+	fallbackTimeout: number
+	retryAttempts: number
 }
 
 export const defaultProgressiveConfig: ProgressiveLoadingConfig = {
-  enabledFeatures: [
-    FEATURES.SUBTITLES,
-    FEATURES.ADVANCED_CONTROLS,
-    FEATURES.KEYBOARD_SHORTCUTS
-  ],
-  loadingStrategy: 'lazy',
-  fallbackTimeout: 5000,
-  retryAttempts: 3
-};
+	enabledFeatures: [FEATURES.SUBTITLES, FEATURES.ADVANCED_CONTROLS, FEATURES.KEYBOARD_SHORTCUTS],
+	loadingStrategy: "lazy",
+	fallbackTimeout: 5000,
+	retryAttempts: 3
+}
 
 // Dynamic imports with error handling and retry logic
 export const lazyComponents = {
-  // Subtitle system
-  SubtitleSelector: lazy(() => 
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.SubtitleSelector }))
-  ),
-
-  // Playlist functionality  
-  PlaylistManager: lazy(() =>
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.SubtitleSelector })) // Use existing component as placeholder
-  ),
-
-  // Advanced controls
-  QualitySelector: lazy(() =>
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.QualitySelector }))
-  ),
-
-  PlaybackSpeedSelector: lazy(() =>
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.PlaybackSpeedSelector }))
-  ),
-
-  ChaptersPanel: lazy(() =>
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.ChaptersPanel }))
-  ),
-
-  PictureInPictureButton: lazy(() =>
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.PictureInPictureButton }))
-  ),
-
-  // Analytics
-  AnalyticsTracker: lazy(() =>
-    import('../components/enhanced/advanced-features')
-      .then(module => ({ default: module.SubtitleSelector })) // Use existing component as placeholder
-  ),
-};
+	// Subtitle system
+	SubtitleSelector: lazy(() =>
+		import("../components/enhanced/advanced-features").then((module) => ({
+			default: module.SubtitleSelector
+		}))
+	),
+
+	// Playlist functionality
+	PlaylistManager: lazy(
+		() =>
+			import("../components/enhanced/advanced-features").then((module) => ({
+				default: module.SubtitleSelector
+			})) // Use existing component as placeholder
+	),
+
+	// Advanced controls
+	QualitySelector: lazy(() =>
+		import("../components/enhanced/advanced-features").then((module) => ({
+			default: module.QualitySelector
+		}))
+	),
+
+	PlaybackSpeedSelector: lazy(() =>
+		import("../components/enhanced/advanced-features").then((module) => ({
+			default: module.PlaybackSpeedSelector
+		}))
+	),
+
+	ChaptersPanel: lazy(() =>
+		import("../components/enhanced/advanced-features").then((module) => ({
+			default: module.ChaptersPanel
+		}))
+	),
+
+	PictureInPictureButton: lazy(() =>
+		import("../components/enhanced/advanced-features").then((module) => ({
+			default: module.PictureInPictureButton
+		}))
+	),
+
+	// Analytics
+	AnalyticsTracker: lazy(
+		() =>
+			import("../components/enhanced/advanced-features").then((module) => ({
+				default: module.SubtitleSelector
+			})) // Use existing component as placeholder
+	)
+}
 
 // Feature detection utilities
 export class FeatureDetector {
-  private static cache = new Map<FeatureType, boolean>();
-
-  static async isSupported(feature: FeatureType): Promise<boolean> {
-    if (this.cache.has(feature)) {
-      return this.cache.get(feature)!;
-    }
-
-    const supported = await this.checkFeatureSupport(feature);
-    this.cache.set(feature, supported);
-    return supported;
-  }
-
-  private static async checkFeatureSupport(feature: FeatureType): Promise<boolean> {
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-      // Server-side rendering - assume basic support
-      return true;
-    }
-
-    switch (feature) {
-      case FEATURES.SUBTITLES:
-        return 'TextTrack' in window;
-        
-      case FEATURES.PICTURE_IN_PICTURE:
-        return 'pictureInPictureEnabled' in document;
-        
-      case FEATURES.ADVANCED_CONTROLS:
-        return true; // Always supported
-        
-      case FEATURES.PLAYLISTS:
-        return 'MediaSession' in window;
-        
-      case FEATURES.ANALYTICS:
-        return 'IntersectionObserver' in window;
-        
-      case FEATURES.QUALITY_SELECTOR:
-        return 'MediaSource' in window;
-        
-      case FEATURES.PLAYBACK_SPEED:
-        return true; // HTML5 video supports this
-        
-      case FEATURES.CHAPTERS:
-        return 'TextTrack' in window;
-        
-      case FEATURES.THUMBNAILS:
-        return 'OffscreenCanvas' in window || 'canvas' in document.createElement('canvas');
-        
-      case FEATURES.KEYBOARD_SHORTCUTS:
-        return 'KeyboardEvent' in window;
-        
-      default:
-        return false;
-    }
-  }
+	private static cache = new Map<FeatureType, boolean>()
+
+	static async isSupported(feature: FeatureType): Promise<boolean> {
+		if (this.cache.has(feature)) {
+			return this.cache.get(feature)!
+		}
+
+		const supported = await this.checkFeatureSupport(feature)
+		this.cache.set(feature, supported)
+		return supported
+	}
+
+	private static async checkFeatureSupport(feature: FeatureType): Promise<boolean> {
+		if (typeof window === "undefined" || typeof document === "undefined") {
+			// Server-side rendering - assume basic support
+			return true
+		}
+
+		switch (feature) {
+			case FEATURES.SUBTITLES:
+				return "TextTrack" in window
+
+			case FEATURES.PICTURE_IN_PICTURE:
+				return "pictureInPictureEnabled" in document
+
+			case FEATURES.ADVANCED_CONTROLS:
+				return true // Always supported
+
+			case FEATURES.PLAYLISTS:
+				return "MediaSession" in window
+
+			case FEATURES.ANALYTICS:
+				return "IntersectionObserver" in window
+
+			case FEATURES.QUALITY_SELECTOR:
+				return "MediaSource" in window
+
+			case FEATURES.PLAYBACK_SPEED:
+				return true // HTML5 video supports this
+
+			case FEATURES.CHAPTERS:
+				return "TextTrack" in window
+
+			case FEATURES.THUMBNAILS:
+				return "OffscreenCanvas" in window || "canvas" in document.createElement("canvas")
+
+			case FEATURES.KEYBOARD_SHORTCUTS:
+				return "KeyboardEvent" in window
+
+			default:
+				return false
+		}
+	}
 }
 
 // Progressive loading manager
 export class ProgressiveLoader {
-  private config: ProgressiveLoadingConfig;
-  private loadedFeatures = new Set<FeatureType>();
-  private loadingPromises = new Map<FeatureType, Promise<any>>();
-
-  constructor(config: Partial<ProgressiveLoadingConfig> = {}) {
-    this.config = { ...defaultProgressiveConfig, ...config };
-  }
-
-  async loadFeature<T = any>(feature: FeatureType): Promise<T | null> {
-    // Check if feature is enabled
-    if (!this.config.enabledFeatures.includes(feature)) {
-      return null;
-    }
-
-    // Check if already loaded
-    if (this.loadedFeatures.has(feature)) {
-      return this.getLoadedFeature(feature);
-    }
-
-    // Check if currently loading
-    if (this.loadingPromises.has(feature)) {
-      return this.loadingPromises.get(feature);
-    }
-
-    // Check browser support
-    const isSupported = await FeatureDetector.isSupported(feature);
-    if (!isSupported) {
-      console.warn(`Feature ${feature} is not supported in this browser`);
-      return null;
-    }
-
-    // Start loading with retry logic
-    const loadingPromise = this.loadWithRetry(feature);
-    this.loadingPromises.set(feature, loadingPromise);
-
-    try {
-      const result = await loadingPromise;
-      this.loadedFeatures.add(feature);
-      return result as T;
-    } catch (error) {
-      console.error(`Failed to load feature ${feature}:`, error);
-      this.loadingPromises.delete(feature);
-      return null;
-    }
-  }
-
-  private async loadWithRetry<T>(feature: FeatureType, attempt = 1): Promise<T> {
-    try {
-      const result = await this.loadFeatureModule(feature);
-      return result as T;
-    } catch (error) {
-      if (attempt < this.config.retryAttempts) {
-        console.warn(`Loading feature ${feature} failed, retrying (${attempt}/${this.config.retryAttempts})`);
-        await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
-        return this.loadWithRetry(feature, attempt + 1);
-      }
-      throw error;
-    }
-  }
-
-  private async loadFeatureModule(feature: FeatureType) {
-    switch (feature) {
-      case FEATURES.SUBTITLES:
-        return import('../hooks/useEnhancedSubtitles');
-        
-      case FEATURES.PLAYLISTS:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.ADVANCED_CONTROLS:
-        return import('../components/enhanced/advanced-features');
-        
-      case FEATURES.ANALYTICS:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.PICTURE_IN_PICTURE:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.QUALITY_SELECTOR:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.PLAYBACK_SPEED:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.CHAPTERS:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.THUMBNAILS:
-        return import('../components/enhanced/advanced-features'); // Use existing features
-        
-      case FEATURES.KEYBOARD_SHORTCUTS:
-        return import('../hooks/use-keyboard-controls');
-        
-      default:
-        throw new Error(`Unknown feature: ${feature}`);
-    }
-  }
-
-  private getLoadedFeature(feature: FeatureType) {
-    // Return cached feature instance
-    return this.loadingPromises.get(feature);
-  }
-
-  // Preload features for faster access
-  async preloadFeatures(features: FeatureType[] = this.config.enabledFeatures) {
-    const preloadPromises = features.map(feature => this.loadFeature(feature));
-    await Promise.allSettled(preloadPromises);
-  }
-
-  // Get loading state
-  getLoadingState() {
-    return {
-      loaded: Array.from(this.loadedFeatures),
-      loading: Array.from(this.loadingPromises.keys()),
-      enabled: this.config.enabledFeatures
-    };
-  }
+	private config: ProgressiveLoadingConfig
+	private loadedFeatures = new Set<FeatureType>()
+	private loadingPromises = new Map<FeatureType, Promise<any>>()
+
+	constructor(config: Partial<ProgressiveLoadingConfig> = {}) {
+		this.config = { ...defaultProgressiveConfig, ...config }
+	}
+
+	async loadFeature<T = any>(feature: FeatureType): Promise<T | null> {
+		// Check if feature is enabled
+		if (!this.config.enabledFeatures.includes(feature)) {
+			return null
+		}
+
+		// Check if already loaded
+		if (this.loadedFeatures.has(feature)) {
+			return this.getLoadedFeature(feature)
+		}
+
+		// Check if currently loading
+		if (this.loadingPromises.has(feature)) {
+			return this.loadingPromises.get(feature)
+		}
+
+		// Check browser support
+		const isSupported = await FeatureDetector.isSupported(feature)
+		if (!isSupported) {
+			console.warn(`Feature ${feature} is not supported in this browser`)
+			return null
+		}
+
+		// Start loading with retry logic
+		const loadingPromise = this.loadWithRetry(feature)
+		this.loadingPromises.set(feature, loadingPromise)
+
+		try {
+			const result = await loadingPromise
+			this.loadedFeatures.add(feature)
+			return result as T
+		} catch (error) {
+			console.error(`Failed to load feature ${feature}:`, error)
+			this.loadingPromises.delete(feature)
+			return null
+		}
+	}
+
+	private async loadWithRetry<T>(feature: FeatureType, attempt = 1): Promise<T> {
+		try {
+			const result = await this.loadFeatureModule(feature)
+			return result as T
+		} catch (error) {
+			if (attempt < this.config.retryAttempts) {
+				console.warn(
+					`Loading feature ${feature} failed, retrying (${attempt}/${this.config.retryAttempts})`
+				)
+				await new Promise((resolve) => setTimeout(resolve, 1000 * attempt))
+				return this.loadWithRetry(feature, attempt + 1)
+			}
+			throw error
+		}
+	}
+
+	private async loadFeatureModule(feature: FeatureType) {
+		switch (feature) {
+			case FEATURES.SUBTITLES:
+				return import("../hooks/useEnhancedSubtitles")
+
+			case FEATURES.PLAYLISTS:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.ADVANCED_CONTROLS:
+				return import("../components/enhanced/advanced-features")
+
+			case FEATURES.ANALYTICS:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.PICTURE_IN_PICTURE:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.QUALITY_SELECTOR:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.PLAYBACK_SPEED:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.CHAPTERS:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.THUMBNAILS:
+				return import("../components/enhanced/advanced-features") // Use existing features
+
+			case FEATURES.KEYBOARD_SHORTCUTS:
+				return import("../hooks/use-keyboard-controls")
+
+			default:
+				throw new Error(`Unknown feature: ${feature}`)
+		}
+	}
+
+	private getLoadedFeature(feature: FeatureType) {
+		// Return cached feature instance
+		return this.loadingPromises.get(feature)
+	}
+
+	// Preload features for faster access
+	async preloadFeatures(features: FeatureType[] = this.config.enabledFeatures) {
+		const preloadPromises = features.map((feature) => this.loadFeature(feature))
+		await Promise.allSettled(preloadPromises)
+	}
+
+	// Get loading state
+	getLoadingState() {
+		return {
+			loaded: Array.from(this.loadedFeatures),
+			loading: Array.from(this.loadingPromises.keys()),
+			enabled: this.config.enabledFeatures
+		}
+	}
 }
 
 // Global progressive loader instance
-export const progressiveLoader = new ProgressiveLoader();
+export const progressiveLoader = new ProgressiveLoader()
 
 // React hook for progressive loading
-export function useProgressiveFeature<T = any>(feature: FeatureType): {
-  feature: T | null;
-  loading: boolean;
-  error: Error | null;
-  load: () => Promise<void>;
+export function useProgressiveFeature<T = any>(
+	feature: FeatureType
+): {
+	feature: T | null
+	loading: boolean
+	error: Error | null
+	load: () => Promise<void>
 } {
-  const [featureModule, setFeatureModule] = React.useState<T | null>(null);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState<Error | null>(null);
-
-  const load = React.useCallback(async () => {
-    if (loading || featureModule) return;
-    
-    setLoading(true);
-    setError(null);
-    
-    try {
-      const module = await progressiveLoader.loadFeature<T>(feature);
-      setFeatureModule(module);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  }, [feature, loading, featureModule]);
-
-  // Auto-load if strategy is immediate
-  React.useEffect(() => {
-    if (progressiveLoader['config'].loadingStrategy === 'immediate') {
-      load();
-    }
-  }, [load]);
-
-  return {
-    feature: featureModule,
-    loading,
-    error,
-    load
-  };
+	const [featureModule, setFeatureModule] = React.useState<T | null>(null)
+	const [loading, setLoading] = React.useState(false)
+	const [error, setError] = React.useState<Error | null>(null)
+
+	const load = React.useCallback(async () => {
+		if (loading || featureModule) return
+
+		setLoading(true)
+		setError(null)
+
+		try {
+			const module = await progressiveLoader.loadFeature<T>(feature)
+			setFeatureModule(module)
+		} catch (err) {
+			setError(err as Error)
+		} finally {
+			setLoading(false)
+		}
+	}, [feature, loading, featureModule])
+
+	// Auto-load if strategy is immediate
+	React.useEffect(() => {
+		if (progressiveLoader["config"].loadingStrategy === "immediate") {
+			load()
+		}
+	}, [load])
+
+	return {
+		feature: featureModule,
+		loading,
+		error,
+		load
+	}
 }
 
 // HOC for progressive feature loading
 export function withProgressiveFeature<P extends object>(
-  WrappedComponent: React.ComponentType<P>,
-  feature: FeatureType,
-  fallback?: React.ComponentType<P>
+	WrappedComponent: React.ComponentType<P>,
+	feature: FeatureType,
+	fallback?: React.ComponentType<P>
 ) {
-  return function ProgressiveFeatureWrapper(props: P) {
-    const { feature: featureModule, loading, error } = useProgressiveFeature(feature);
+	return function ProgressiveFeatureWrapper(props: P) {
+		const { feature: featureModule, loading, error } = useProgressiveFeature(feature)
 
-    if (loading) {
-      return <div className="h-8 animate-pulse rounded bg-gray-200" />;
-    }
+		if (loading) {
+			return <div className="h-8 animate-pulse rounded bg-gray-200" />
+		}
 
-    if (error || !featureModule) {
-      const Fallback = fallback;
-      return Fallback ? <Fallback {...props} /> : null;
-    }
+		if (error || !featureModule) {
+			const Fallback = fallback
+			return Fallback ? <Fallback {...props} /> : null
+		}
 
-    return <WrappedComponent {...props} />;
-  };
+		return <WrappedComponent {...props} />
+	}
 }