@therealtinhtute/baroiplayer 1.0.0

package/src/core/plugins/utils.ts

@@ -0,0 +1,316 @@
+import type { Plugin, PluginLogger, PluginConfig } from './types'
+
+// Simple console logger implementation
+export class ConsolePluginLogger implements PluginLogger {
+  private prefix: string
+
+  constructor(prefix = '[Plugin]') {
+    this.prefix = prefix
+  }
+
+  info(message: string, data?: any): void {
+    if (data) {
+      console.info(`${this.prefix} ${message}`, data)
+    } else {
+      console.info(`${this.prefix} ${message}`)
+    }
+  }
+
+  warn(message: string, data?: any): void {
+    if (data) {
+      console.warn(`${this.prefix} ${message}`, data)
+    } else {
+      console.warn(`${this.prefix} ${message}`)
+    }
+  }
+
+  error(message: string, data?: any): void {
+    if (data) {
+      console.error(`${this.prefix} ${message}`, data)
+    } else {
+      console.error(`${this.prefix} ${message}`)
+    }
+  }
+
+  debug(message: string, data?: any): void {
+    if (process.env.NODE_ENV === 'development') {
+      if (data) {
+        console.debug(`${this.prefix} ${message}`, data)
+      } else {
+        console.debug(`${this.prefix} ${message}`)
+      }
+    }
+  }
+}
+
+// Plugin validation utilities
+export class PluginValidator {
+  static validateMetadata(plugin: Plugin): boolean {
+    const { metadata } = plugin
+    
+    if (!metadata.name || typeof metadata.name !== 'string') {
+      throw new Error('Plugin metadata must include a valid name')
+    }
+
+    if (!metadata.version || typeof metadata.version !== 'string') {
+      throw new Error('Plugin metadata must include a valid version')
+    }
+
+    if (!metadata.description || typeof metadata.description !== 'string') {
+      throw new Error('Plugin metadata must include a valid description')
+    }
+
+    if (!metadata.category) {
+      throw new Error('Plugin metadata must include a valid category')
+    }
+
+    if (!metadata.priority) {
+      throw new Error('Plugin metadata must include a valid priority')
+    }
+
+    return true
+  }
+
+  static validateConfig(config: PluginConfig, schema?: Record<string, any>): boolean {
+    if (!schema) return true
+
+    // Simple schema validation - could be enhanced with a proper schema validator
+    for (const [key, rules] of Object.entries(schema)) {
+      const value = config[key]
+
+      if (rules.required && (value === undefined || value === null)) {
+        throw new Error(`Configuration property '${key}' is required`)
+      }
+
+      if (value !== undefined && rules.type && typeof value !== rules.type) {
+        throw new Error(`Configuration property '${key}' must be of type '${rules.type}'`)
+      }
+
+      if (rules.enum && !rules.enum.includes(value)) {
+        throw new Error(`Configuration property '${key}' must be one of: ${rules.enum.join(', ')}`)
+      }
+
+      if (rules.min !== undefined && typeof value === 'number' && value < rules.min) {
+        throw new Error(`Configuration property '${key}' must be at least ${rules.min}`)
+      }
+
+      if (rules.max !== undefined && typeof value === 'number' && value > rules.max) {
+        throw new Error(`Configuration property '${key}' must be at most ${rules.max}`)
+      }
+    }
+
+    return true
+  }
+}
+
+// Plugin performance monitoring
+export class PluginPerformanceMonitor {
+  private metrics = new Map<string, {
+    calls: number
+    totalTime: number
+    averageTime: number
+    lastCall: number
+  }>()
+
+  measure<T>(pluginName: string, operation: string, fn: () => T | Promise<T>): T | Promise<T> {
+    const key = `${pluginName}.${operation}`
+    const startTime = performance.now()
+
+    const updateMetrics = () => {
+      const endTime = performance.now()
+      const duration = endTime - startTime
+
+      const existing = this.metrics.get(key) || {
+        calls: 0,
+        totalTime: 0,
+        averageTime: 0,
+        lastCall: 0
+      }
+
+      existing.calls++
+      existing.totalTime += duration
+      existing.averageTime = existing.totalTime / existing.calls
+      existing.lastCall = endTime
+
+      this.metrics.set(key, existing)
+    }
+
+    const result = fn()
+
+    if (result instanceof Promise) {
+      return result.then(
+        (value) => {
+          updateMetrics()
+          return value
+        },
+        (error) => {
+          updateMetrics()
+          throw error
+        }
+      )
+    } else {
+      updateMetrics()
+      return result
+    }
+  }
+
+  getMetrics(pluginName?: string) {
+    if (pluginName) {
+      const pluginMetrics: Record<string, any> = {}
+      for (const [key, value] of this.metrics.entries()) {
+        if (key.startsWith(`${pluginName}.`)) {
+          const operation = key.substring(pluginName.length + 1)
+          pluginMetrics[operation] = value
+        }
+      }
+      return pluginMetrics
+    }
+
+    return Object.fromEntries(this.metrics.entries())
+  }
+
+  reset(pluginName?: string): void {
+    if (pluginName) {
+      for (const key of this.metrics.keys()) {
+        if (key.startsWith(`${pluginName}.`)) {
+          this.metrics.delete(key)
+        }
+      }
+    } else {
+      this.metrics.clear()
+    }
+  }
+}
+
+// Plugin development helpers
+export const PluginDevelopmentHelpers = {
+  // Create a mock plugin context for testing
+  createMockContext(): any {
+    return {
+      state: {
+        isPlaying: false,
+        currentTime: 0,
+        duration: 0,
+        volume: 1,
+        isMuted: false,
+        isLoading: false,
+        error: null
+      },
+      controls: {
+        play: () => Promise.resolve(),
+        pause: () => Promise.resolve(),
+        seek: (time: number) => Promise.resolve(),
+        setVolume: (volume: number) => Promise.resolve(),
+        mute: () => Promise.resolve(),
+        unmute: () => Promise.resolve(),
+        toggleMute: () => Promise.resolve()
+      },
+      plugins: {
+        get: () => undefined,
+        getAll: () => [],
+        isEnabled: () => false
+      },
+      emit: () => {},
+      on: () => () => {},
+      element: null,
+      logger: new ConsolePluginLogger('[MockPlugin]')
+    }
+  },
+
+  // Create a test plugin for development
+  createTestPlugin(name: string, hooks: Partial<Plugin> = {}): Plugin {
+    return {
+      metadata: {
+        name,
+        version: '1.0.0',
+        description: `Test plugin: ${name}`,
+        category: 'ui',
+        priority: 'medium'
+      },
+      initialize: async () => {},
+      activate: async () => {},
+      deactivate: async () => {},
+      destroy: async () => {},
+      healthCheck: () => true,
+      ...hooks
+    }
+  },
+
+  // Plugin timing utilities
+  time: {
+    async: async <T>(label: string, fn: () => Promise<T>): Promise<T> => {
+      console.time(label)
+      try {
+        const result = await fn()
+        console.timeEnd(label)
+        return result
+      } catch (error) {
+        console.timeEnd(label)
+        throw error
+      }
+    },
+
+    sync: <T>(label: string, fn: () => T): T => {
+      console.time(label)
+      try {
+        const result = fn()
+        console.timeEnd(label)
+        return result
+      } catch (error) {
+        console.timeEnd(label)
+        throw error
+      }
+    }
+  }
+}
+
+// Plugin storage utilities for persistent data
+export class PluginStorage {
+  private prefix: string
+
+  constructor(pluginName: string) {
+    this.prefix = `baroi-plugin-${pluginName}`
+  }
+
+  get<T>(key: string, defaultValue?: T): T | undefined {
+    try {
+      const item = localStorage.getItem(`${this.prefix}-${key}`)
+      return item ? JSON.parse(item) as T : defaultValue
+    } catch {
+      return defaultValue
+    }
+  }
+
+  set<T>(key: string, value: T): void {
+    try {
+      localStorage.setItem(`${this.prefix}-${key}`, JSON.stringify(value))
+    } catch (error) {
+      console.warn(`Failed to store plugin data for key: ${key}`, error)
+    }
+  }
+
+  remove(key: string): void {
+    try {
+      localStorage.removeItem(`${this.prefix}-${key}`)
+    } catch (error) {
+      console.warn(`Failed to remove plugin data for key: ${key}`, error)
+    }
+  }
+
+  clear(): void {
+    try {
+      const keys = Object.keys(localStorage).filter(key => 
+        key.startsWith(`${this.prefix}-`)
+      )
+      keys.forEach(key => localStorage.removeItem(key))
+    } catch (error) {
+      console.warn('Failed to clear plugin data', error)
+    }
+  }
+}
+
+// Export default logger instance
+export const defaultPluginLogger = new ConsolePluginLogger()
+
+// Export default performance monitor instance
+export const defaultPerformanceMonitor = new PluginPerformanceMonitor()

package/src/core/progressive-loading.tsx

@@ -0,0 +1,322 @@
+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];
+
+// Progressive loading configuration
+export interface ProgressiveLoadingConfig {
+  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
+};
+
+// 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
+  ),
+};
+
+// 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;
+    }
+  }
+}
+
+// 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
+    };
+  }
+}
+
+// Global progressive loader instance
+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>;
+} {
+  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>
+) {
+  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 (error || !featureModule) {
+      const Fallback = fallback;
+      return Fallback ? <Fallback {...props} /> : null;
+    }
+
+    return <WrappedComponent {...props} />;
+  };
+}