@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/core/events/middleware.ts

@@ -0,0 +1,269 @@
+import type { MediaPlayerEvent } from './event-system'
+
+// Middleware function type
+export type EventMiddleware = (event: MediaPlayerEvent) => MediaPlayerEvent | null
+
+// Common middleware implementations
+export const eventMiddlewares = {
+  // Logging middleware
+  logger: (prefix = '[Event]'): EventMiddleware => (event) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`${prefix} ${event.type}`, event.detail)
+    }
+    return event
+  },
+
+  // Throttling middleware
+  throttle: (eventTypes: string[], delay = 100): EventMiddleware => {
+    const lastTimes = new Map<string, number>()
+    
+    return (event) => {
+      if (eventTypes.includes(event.type)) {
+        const lastTime = lastTimes.get(event.type) || 0
+        const now = event.timestamp
+        
+        if (now - lastTime < delay) {
+          return null // Throttle this event
+        }
+        
+        lastTimes.set(event.type, now)
+      }
+      
+      return event
+    }
+  },
+
+  // Debouncing middleware
+  debounce: (eventTypes: string[], delay = 100): EventMiddleware => {
+    const timeouts = new Map<string, NodeJS.Timeout>()
+    const eventQueue = new Map<string, MediaPlayerEvent>()
+    
+    return (event) => {
+      if (eventTypes.includes(event.type)) {
+        // Clear existing timeout
+        const existingTimeout = timeouts.get(event.type)
+        if (existingTimeout) {
+          clearTimeout(existingTimeout)
+        }
+        
+        // Store the latest event
+        eventQueue.set(event.type, event)
+        
+        // Set new timeout
+        const timeout = setTimeout(() => {
+          const queuedEvent = eventQueue.get(event.type)
+          if (queuedEvent) {
+            // Process the debounced event
+            // Note: This is a simplified approach - in a real implementation,
+            // you'd need to re-inject the event into the processing pipeline
+            eventQueue.delete(event.type)
+            timeouts.delete(event.type)
+          }
+        }, delay)
+        
+        timeouts.set(event.type, timeout)
+        
+        return null // Don't process immediately
+      }
+      
+      return event
+    }
+  },
+
+  // Filtering middleware
+  filter: (predicate: (event: MediaPlayerEvent) => boolean): EventMiddleware => (event) => {
+    return predicate(event) ? event : null
+  },
+
+  // Event transformation middleware
+  transform: (transformer: (event: MediaPlayerEvent) => MediaPlayerEvent): EventMiddleware => (event) => {
+    try {
+      return transformer(event)
+    } catch (error) {
+      console.error('Error in event transformer:', error)
+      return event
+    }
+  },
+
+  // Performance monitoring middleware
+  performance: (): EventMiddleware => {
+    const metrics = new Map<string, { count: number; totalTime: number }>()
+    
+    return (event) => {
+      const startTime = performance.now()
+      
+      // Update metrics
+      const existing = metrics.get(event.type) || { count: 0, totalTime: 0 }
+      existing.count++
+      existing.totalTime += performance.now() - startTime
+      metrics.set(event.type, existing)
+      
+      // Log metrics periodically (every 100 events)
+      if (existing.count % 100 === 0) {
+        const avgTime = existing.totalTime / existing.count
+        console.log(`Event ${event.type}: ${existing.count} calls, avg ${avgTime.toFixed(2)}ms`)
+      }
+      
+      return event
+    }
+  },
+
+  // Error handling middleware
+  errorHandler: (onError?: (error: Error, event: MediaPlayerEvent) => void): EventMiddleware => (event) => {
+    try {
+      // Validate event structure
+      if (!event.type || typeof event.type !== 'string') {
+        throw new Error('Invalid event: missing or invalid type')
+      }
+      
+      if (!event.timestamp || typeof event.timestamp !== 'number') {
+        throw new Error('Invalid event: missing or invalid timestamp')
+      }
+      
+      return event
+    } catch (error) {
+      if (onError) {
+        onError(error as Error, event)
+      } else {
+        console.error('Event validation error:', error)
+      }
+      return null
+    }
+  },
+
+  // Security middleware (prevent certain events or sanitize data)
+  security: (options: {
+    blockedEventTypes?: string[]
+    sanitizeDetail?: boolean
+    maxDetailSize?: number
+  } = {}): EventMiddleware => (event) => {
+    const { blockedEventTypes = [], sanitizeDetail = true, maxDetailSize = 10000 } = options
+    
+    // Block certain event types
+    if (blockedEventTypes.includes(event.type)) {
+      console.warn(`Blocked event type: ${event.type}`)
+      return null
+    }
+    
+    // Sanitize detail if needed
+    if (sanitizeDetail && event.detail) {
+      try {
+        const detailStr = JSON.stringify(event.detail)
+        if (detailStr.length > maxDetailSize) {
+          console.warn(`Event detail too large, truncating: ${event.type}`)
+          event.detail = { ...event.detail, _truncated: true }
+        }
+      } catch (error) {
+        console.warn(`Failed to serialize event detail: ${event.type}`)
+        event.detail = { _serializationError: true }
+      }
+    }
+    
+    return event
+  },
+
+  // Conditional middleware
+  when: (condition: (event: MediaPlayerEvent) => boolean, middleware: EventMiddleware): EventMiddleware => (event) => {
+    return condition(event) ? middleware(event) : event
+  },
+
+  // Chain multiple middleware
+  chain: (...middlewares: EventMiddleware[]): EventMiddleware => (event) => {
+    let currentEvent: MediaPlayerEvent | null = event
+    
+    for (const middleware of middlewares) {
+      if (currentEvent === null) break
+      currentEvent = middleware(currentEvent)
+    }
+    
+    return currentEvent
+  }
+}
+
+// Middleware builder class
+export class MiddlewareBuilder {
+  private middlewares: EventMiddleware[] = []
+
+  // Add middleware
+  use(middleware: EventMiddleware): this {
+    this.middlewares.push(middleware)
+    return this
+  }
+
+  // Add logging
+  log(prefix?: string): this {
+    return this.use(eventMiddlewares.logger(prefix))
+  }
+
+  // Add throttling
+  throttle(eventTypes: string[], delay?: number): this {
+    return this.use(eventMiddlewares.throttle(eventTypes, delay))
+  }
+
+  // Add debouncing
+  debounce(eventTypes: string[], delay?: number): this {
+    return this.use(eventMiddlewares.debounce(eventTypes, delay))
+  }
+
+  // Add filtering
+  filter(predicate: (event: MediaPlayerEvent) => boolean): this {
+    return this.use(eventMiddlewares.filter(predicate))
+  }
+
+  // Add transformation
+  transform(transformer: (event: MediaPlayerEvent) => MediaPlayerEvent): this {
+    return this.use(eventMiddlewares.transform(transformer))
+  }
+
+  // Add performance monitoring
+  performance(): this {
+    return this.use(eventMiddlewares.performance())
+  }
+
+  // Add error handling
+  errorHandler(onError?: (error: Error, event: MediaPlayerEvent) => void): this {
+    return this.use(eventMiddlewares.errorHandler(onError))
+  }
+
+  // Add security
+  security(options?: Parameters<typeof eventMiddlewares.security>[0]): this {
+    return this.use(eventMiddlewares.security(options))
+  }
+
+  // Add conditional middleware
+  when(condition: (event: MediaPlayerEvent) => boolean, middleware: EventMiddleware): this {
+    return this.use(eventMiddlewares.when(condition, middleware))
+  }
+
+  // Build the final middleware
+  build(): EventMiddleware {
+    return eventMiddlewares.chain(...this.middlewares)
+  }
+}
+
+// Helper to create middleware builder
+export const createMiddleware = () => new MiddlewareBuilder()
+
+// Export commonly used middleware combinations
+export const commonMiddlewares = {
+  // Development middleware stack
+  development: () => createMiddleware()
+    .log('[Dev Event]')
+    .performance()
+    .errorHandler()
+    .build(),
+
+  // Production middleware stack
+  production: () => createMiddleware()
+    .security()
+    .errorHandler()
+    .throttle(['media:timeupdate', 'user:mousemove'], 16) // ~60fps
+    .build(),
+
+  // Testing middleware stack
+  testing: () => createMiddleware()
+    .errorHandler((error, event) => {
+      throw new Error(`Event error in test: ${error.message} for event ${event.type}`)
+    })
+    .build()
+}

package/dist/src/core/index.d.ts

@@ -0,0 +1,8 @@
+export * from './plugins';
+export * from './events';
+export * from './providers/service-provider';
+export declare const CORE_ARCHITECTURE_VERSION = "1.0.0";
+export { createArchitecture } from './utils';
+export * from './progressive-loading';
+export * from './performance';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAA;AAGzB,cAAc,UAAU,CAAA;AAGxB,cAAc,8BAA8B,CAAA;AAG5C,eAAO,MAAM,yBAAyB,UAAU,CAAA;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAG5C,cAAc,uBAAuB,CAAA;AAGrC,cAAc,eAAe,CAAA"}

package/dist/src/core/index.js

@@ -0,0 +1,15 @@
+// Core architecture exports
+// Plugin system
+export * from './plugins';
+// Event system  
+export * from './events';
+// Service providers
+export * from './providers/service-provider';
+// Version
+export const CORE_ARCHITECTURE_VERSION = '1.0.0';
+// Architecture utilities
+export { createArchitecture } from './utils';
+// Progressive loading system
+export * from './progressive-loading';
+// Performance monitoring and testing
+export * from './performance';

package/dist/src/core/index.ts

@@ -0,0 +1,22 @@
+// Core architecture exports
+
+// Plugin system
+export * from './plugins'
+
+// Event system  
+export * from './events'
+
+// Service providers
+export * from './providers/service-provider'
+
+// Version
+export const CORE_ARCHITECTURE_VERSION = '1.0.0'
+
+// Architecture utilities
+export { createArchitecture } from './utils'
+
+// Progressive loading system
+export * from './progressive-loading'
+
+// Performance monitoring and testing
+export * from './performance'

package/dist/src/core/optimization/bundle-optimizer.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface LazyComponentConfig {
+    component: string;
+    fallback?: React.ReactNode;
+    preload?: boolean;
+    priority?: "high" | "normal" | "low";
+}
+export declare function BundleOptimizer({ children, lazyComponents, preloadStrategy }: {
+    children: React.ReactNode;
+    lazyComponents?: LazyComponentConfig[];
+    preloadStrategy?: "viewport" | "hover" | "immediate" | "never";
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useProgressiveLoading(): {
+    loadedComponents: Set<string>;
+    loadComponent: (componentName: string) => Promise<void>;
+    preloadComponents: (componentNames: string[]) => void;
+    isComponentLoaded: (componentName: string) => boolean;
+};
+export declare function createLazyComponent<T extends React.ComponentType<any>>(importFn: () => Promise<{
+    default: T;
+}>, componentName: string): any;
+export interface BundleMetrics {
+    totalSize: number;
+    chunkSizes: Record<string, number>;
+    loadedChunks: Set<string>;
+    pendingChunks: Set<string>;
+    compressionRatio: number;
+}
+export declare function useBundleMetrics(): {
+    largestChunk: [string, number] | null;
+    formatBytes: (bytes: number) => string;
+    totalSizeFormatted: string;
+    totalSize: number;
+    chunkSizes: Record<string, number>;
+    loadedChunks: Set<string>;
+    pendingChunks: Set<string>;
+    compressionRatio: number;
+};
+export declare const PreloadStrategies: {
+    onHover: (element: HTMLElement, importFn: () => Promise<any>) => () => void;
+    onViewport: (element: HTMLElement, importFn: () => Promise<any>) => () => void;
+    onIdle: (importFn: () => Promise<any>, delay?: number) => any;
+};
+//# sourceMappingURL=bundle-optimizer.d.ts.map

package/dist/src/core/optimization/bundle-optimizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-optimizer.d.ts","sourceRoot":"","sources":["bundle-optimizer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAA;AA6BtD,MAAM,WAAW,mBAAmB;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;CACpC;AAGD,wBAAgB,eAAe,CAAC,EAC/B,QAAQ,EACR,cAAmB,EACnB,eAA4B,EAC5B,EAAE;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,cAAc,CAAC,EAAE,mBAAmB,EAAE,CAAA;IACtC,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CAAA;CAC9D,2CAgFA;AAGD,wBAAgB,qBAAqB;;mCAG0B,MAAM;wCAsBP,MAAM,EAAE;uCAQjC,MAAM;EAE1C;AAGD,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EACrE,QAAQ,EAAE,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,CAAC,EACvC,aAAa,EAAE,MAAM,OAWrB;AAGD,MAAM,WAAW,aAAa;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,gBAAgB;;yBA2Ce,MAAM;;eAlDzC,MAAM;gBACL,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACpB,GAAG,CAAC,MAAM,CAAC;mBACV,GAAG,CAAC,MAAM,CAAC;sBACR,MAAM;EA4DxB;AAGD,eAAO,MAAM,iBAAiB;uBAEV,WAAW,YAAY,MAAM,OAAO,CAAC,GAAG,CAAC;0BA0BtC,WAAW,YAAY,MAAM,OAAO,CAAC,GAAG,CAAC;uBAkB5C,MAAM,OAAO,CAAC,GAAG,CAAC;CASrC,CAAA"}

package/dist/src/core/optimization/bundle-optimizer.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, lazy, useMemo } from "react";
+import { MediaLoading } from "../../components/media-suspense";
+// Lazy loaded components for bundle splitting
+const LazyAdvancedControls = lazy(() => import("../../components/advanced-controls").then(module => ({
+    default: module.AdvancedControls
+})));
+const LazyPlaylist = lazy(() => import("../../features/playlist/Playlist").then(module => ({
+    default: module.Playlist
+})));
+const LazySubtitles = lazy(() => import("../../features/subtitles/SubtitleDisplay").then(module => ({
+    default: module.SubtitleDisplay
+})));
+const LazyAnalytics = lazy(() => import("../../core/plugins/examples/analytics-plugin").then(module => ({
+    default: module.AnalyticsPlugin
+})));
+// Bundle optimization component
+export function BundleOptimizer({ children, lazyComponents = [], preloadStrategy = "viewport" }) {
+    // Memoize component mapping for performance
+    const componentMap = useMemo(() => ({
+        'advanced-controls': LazyAdvancedControls,
+        'playlist': LazyPlaylist,
+        'subtitles': LazySubtitles,
+        'analytics': LazyAnalytics
+    }), []);
+    // Preload components based on strategy
+    React.useEffect(() => {
+        if (preloadStrategy === "immediate") {
+            // Preload all components immediately
+            lazyComponents.forEach(({ component }) => {
+                const Component = componentMap[component];
+                if (Component) {
+                    // Trigger dynamic import
+                    Component.preload?.();
+                }
+            });
+        }
+        else if (preloadStrategy === "viewport") {
+            // Preload when component is likely to enter viewport
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        const componentName = entry.target.getAttribute('data-component');
+                        if (componentName) {
+                            const Component = componentMap[componentName];
+                            if (Component) {
+                                Component.preload?.();
+                            }
+                        }
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, { threshold: 0.1, rootMargin: '50px' });
+            // Observe lazy component containers
+            lazyComponents.forEach(({ component, priority }) => {
+                if (priority === "high") {
+                    const element = document.querySelector(`[data-component="${component}"]`);
+                    if (element) {
+                        observer.observe(element);
+                    }
+                }
+            });
+            return () => observer.disconnect();
+        }
+    }, [preloadStrategy, lazyComponents, componentMap]);
+    // Render lazy components with suspense boundaries
+    const renderLazyComponent = (config) => {
+        const Component = componentMap[config.component];
+        if (!Component)
+            return null;
+        const LazyComponent = Component;
+        return (_jsx(Suspense, { fallback: config.fallback || _jsx(MediaLoading, { size: "sm" }), children: _jsx("div", { "data-component": config.component, "data-priority": config.priority, children: _jsx(LazyComponent, {}) }) }, config.component));
+    };
+    return (_jsxs(_Fragment, { children: [children, lazyComponents.map(renderLazyComponent)] }));
+}
+// Progressive loading hook
+export function useProgressiveLoading() {
+    const [loadedComponents, setLoadedComponents] = React.useState(new Set());
+    const loadComponent = React.useCallback(async (componentName) => {
+        if (loadedComponents.has(componentName))
+            return;
+        try {
+            // Dynamic import based on component name
+            const imports = {
+                'advanced-controls': () => import("../../components/advanced-controls"),
+                'playlist': () => import("../../features/playlist/Playlist"),
+                'subtitles': () => import("../../features/subtitles/SubtitleDisplay"),
+                'analytics': () => import("../../core/plugins/examples/analytics-plugin")
+            };
+            const importFn = imports[componentName];
+            if (importFn) {
+                await importFn();
+                setLoadedComponents(prev => new Set([...prev, componentName]));
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to load component ${componentName}:`, error);
+        }
+    }, [loadedComponents]);
+    const preloadComponents = React.useCallback((componentNames) => {
+        componentNames.forEach(loadComponent);
+    }, [loadComponent]);
+    return {
+        loadedComponents,
+        loadComponent,
+        preloadComponents,
+        isComponentLoaded: (componentName) => loadedComponents.has(componentName)
+    };
+}
+// Tree shaking utilities
+export function createLazyComponent(importFn, componentName) {
+    const LazyComponent = React.lazy(importFn)(LazyComponent).preload = importFn;
+    // Add display name for debugging
+    LazyComponent.displayName = `Lazy${componentName}`;
+    return LazyComponent;
+}
+export function useBundleMetrics() {
+    const [metrics, setMetrics] = React.useState({
+        totalSize: 0,
+        chunkSizes: {},
+        loadedChunks: new Set(),
+        pendingChunks: new Set(),
+        compressionRatio: 1
+    });
+    React.useEffect(() => {
+        // Monitor bundle loading if performance observer is available
+        if (typeof window !== 'undefined' && 'PerformanceObserver' in window) {
+            const observer = new PerformanceObserver((list) => {
+                for (const entry of list.getEntries()) {
+                    if (entry.entryType === 'resource' && entry.name.includes('.js')) {
+                        const chunkName = entry.name.split('/').pop() || 'unknown';
+                        setMetrics(prev => ({
+                            ...prev,
+                            chunkSizes: {
+                                ...prev.chunkSizes,
+                                [chunkName]: entry.transferSize || 0
+                            },
+                            loadedChunks: new Set([...prev.loadedChunks, chunkName]),
+                            totalSize: prev.totalSize + (entry.transferSize || 0)
+                        }));
+                    }
+                }
+            });
+            observer.observe({ entryTypes: ['resource'] });
+            return () => observer.disconnect();
+        }
+    }, []);
+    const getLargestChunk = React.useCallback(() => {
+        const entries = Object.entries(metrics.chunkSizes);
+        if (entries.length === 0)
+            return null;
+        return entries.reduce((a, b) => a[1] > b[1] ? a : b);
+    }, [metrics.chunkSizes]);
+    const formatBytes = React.useCallback((bytes) => {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }, []);
+    return {
+        ...metrics,
+        largestChunk: getLargestChunk(),
+        formatBytes,
+        totalSizeFormatted: formatBytes(metrics.totalSize)
+    };
+}
+// Preloading strategies
+export const PreloadStrategies = {
+    // Preload when user hovers over trigger element
+    onHover: (element, importFn) => {
+        let timeoutId;
+        const handleMouseEnter = () => {
+            timeoutId = setTimeout(importFn, 200); // 200ms delay
+        };
+        const handleMouseLeave = () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    },
+    // Preload when component enters viewport
+    onViewport: (element, importFn) => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    importFn();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.1, rootMargin: '50px' });
+        observer.observe(element);
+        return () => observer.disconnect();
+    },
+    // Preload after idle time
+    onIdle: (importFn, delay = 1000) => {
+        if ('requestIdleCallback' in window) {
+            return window.requestIdleCallback(() => {
+                setTimeout(importFn, delay);
+            });
+        }
+        else {
+            return setTimeout(importFn, delay);
+        }
+    }
+};