unified-video-framework 1.4.386 → 1.4.388

package/packages/web/src/WebPlayer.ts

@@ -22,8 +22,6 @@ import {
 } from './chapters/types/ChapterTypes';
 import type { FlashNewsTickerConfig } from './react/types/FlashNewsTickerTypes';
 import YouTubeExtractor from './utils/YouTubeExtractor';
-import { ScreenProtectionController } from './security/ScreenProtectionController';
-import type { ScreenCaptureEvent } from '../../core/dist';
 
 // Dynamic imports for streaming libraries
 declare global {
@@ -95,9 +93,6 @@ export class WebPlayer extends BasePlayer {
   // Paywall
   private paywallController: any = null;
 
-  // Screen protection
-  private screenProtectionController: ScreenProtectionController | null = null;
-
   // Play/pause coordination to prevent race conditions
   private _playPromise: Promise<void> | null = null;
   private _deferredPause = false;
@@ -358,11 +353,6 @@ export class WebPlayer extends BasePlayer {
     this.setupFullscreenListeners();
     this.setupUserInteractionTracking();
 
-    // Setup screen protection if enabled
-    if ((this.config as any).screenProtection === true) {
-      this.initializeScreenProtection();
-    }
-
     // Initialize chapter manager if enabled
     if (this.chapterConfig.enabled && this.video) {
       this.setupChapterManager();
@@ -8120,27 +8110,10 @@ export class WebPlayer extends BasePlayer {
       }
 
       // Render the watermark
-      // If screen protection is active, render multiple watermarks
-      if ((this.config as any).screenProtection && this.screenProtectionController) {
-        const positions = [
-          { x: 20, y: 40 },
-          { x: Math.max(20, this.watermarkCanvas!.width - 200), y: 40 },
-          { x: 20, y: Math.max(40, this.watermarkCanvas!.height - 60) },
-          { x: Math.max(20, this.watermarkCanvas!.width - 200), y: Math.max(40, this.watermarkCanvas!.height - 60) }
-        ];
-
-        positions.forEach((pos) => {
-          const offsetX = Math.random() * 100 - 50;
-          const offsetY = Math.random() * 50 - 25;
-          ctx.fillText(text, pos.x + offsetX, pos.y + offsetY);
-        });
-      } else {
-        // Normal single watermark rendering
-        ctx.fillText(text, x, y);
-      }
+      ctx.fillText(text, x, y);
       ctx.restore();
 
-      this.debugLog('Watermark rendered:', { text, x, y, multiWatermark: !!((this.config as any).screenProtection && this.screenProtectionController) });
+      this.debugLog('Watermark rendered:', { text, x, y });
     };
 
     // Set up interval with configured frequency
@@ -8150,91 +8123,6 @@ export class WebPlayer extends BasePlayer {
     this.debugLog('Watermark setup complete with update interval:', config.updateInterval + 'ms');
   }
 
-  private initializeScreenProtection(): void {
-    if (!this.video || !this.container) return;
-
-    // Normalize config: convert boolean to EnhancedScreenProtectionConfig
-    const screenProtConfig = (this.config as any).screenProtection;
-    const enhancedConfig = typeof screenProtConfig === 'boolean'
-      ? { enabled: true }  // Simple mode: just { enabled: true }
-      : screenProtConfig;   // Advanced mode: full config object
-
-    if (!enhancedConfig || !enhancedConfig.enabled) return;
-
-    console.warn(
-      '[Unified Video Framework] Screen Protection Enabled\n' +
-      'Note: Browsers cannot completely block screen recording. ' +
-      'This provides detection and deterrence through watermarking and monitoring.\n' +
-      'For DRM-level protection, use encrypted content with Widevine/FairPlay.'
-    );
-
-    // Enhance watermark for protection
-    const watermarkText = enhancedConfig.forensicWatermark?.userId
-      ? `PROTECTED - ${enhancedConfig.forensicWatermark.userId}`
-      : 'PROTECTED CONTENT';
-
-    if (!(this.config as any).watermark) {
-      (this.config as any).watermark = {
-        enabled: true,
-        text: watermarkText,
-        randomPosition: true,
-        updateInterval: 1000 // Rapid updates
-      };
-    } else if ((this.config as any).watermark.enabled !== false) {
-      // Force aggressive watermarking
-      (this.config as any).watermark.randomPosition = true;
-      (this.config as any).watermark.updateInterval = Math.min(
-        (this.config as any).watermark.updateInterval || 5000,
-        1000
-      );
-      // Add forensic watermark user ID if provided
-      if (enhancedConfig.forensicWatermark?.userId) {
-        (this.config as any).watermark.text = watermarkText;
-      }
-    }
-    this.setupWatermark(); // Re-setup with new config
-
-    // Create protection controller
-    this.screenProtectionController = new ScreenProtectionController({
-      videoElement: this.video,
-      containerElement: this.container,
-      config: enhancedConfig,
-      watermarkConfig: (this.config as any).watermark,
-      onDetection: (event: ScreenCaptureEvent) => {
-        console.warn('[Screen Protection] Detection:', event);
-        this.emit('onScreenCaptureDetected', event);
-
-        // Call config callback if provided
-        if (enhancedConfig.onScreenCaptureDetected) {
-          enhancedConfig.onScreenCaptureDetected(event);
-        }
-        // Also check legacy callback
-        if ((this.config as any).onScreenCaptureDetected) {
-          (this.config as any).onScreenCaptureDetected(event);
-        }
-      },
-      onDevToolsDetected: () => {
-        console.warn('[Screen Protection] DevTools detected');
-        this.emit('onDevToolsDetected');
-
-        // Call config callback if provided
-        if (enhancedConfig.onDevToolsDetected) {
-          enhancedConfig.onDevToolsDetected();
-        }
-        // Also check legacy callback
-        if ((this.config as any).onDevToolsDetected) {
-          (this.config as any).onDevToolsDetected();
-        }
-      },
-      onPause: () => {
-        // Pause video when requested by protection controller
-        this.pause();
-      }
-    });
-
-    this.screenProtectionController.activate();
-  }
-
   public setPaywallConfig(config: any) {
     try {
       if (!config) return;
@@ -11390,12 +11278,6 @@ export class WebPlayer extends BasePlayer {
       this.paywallController = null;
     }
 
-    // Destroy screen protection controller
-    if (this.screenProtectionController) {
-      this.screenProtectionController.destroy();
-      this.screenProtectionController = null;
-    }
-
     // Destroy chapter managers
     if (this.chapterManager && typeof this.chapterManager.destroy === 'function') {
       this.chapterManager.destroy();

package/packages/web/src/index.ts

@@ -11,16 +11,6 @@ export { WebPlayer } from './WebPlayer';
 export { WebPlayerView } from './react/WebPlayerView';
 export { SecureVideoPlayer } from './SecureVideoPlayer';
 
-// Export DRM utilities
-export { DRMHelper, DRMProviderExamples } from './drm/DRMHelper';
-export type { DRMHelperOptions } from './drm/DRMHelper';
-
-// Export security controllers
-export { CanvasVideoRenderer } from './security/CanvasVideoRenderer';
-export { ScreenProtectionController } from './security/ScreenProtectionController';
-export type { CanvasRendererOptions } from './security/CanvasVideoRenderer';
-export type { ScreenProtectionOptions } from './security/ScreenProtectionController';
-
 // Export EPG (Electronic Program Guide) components
 export * from './react/EPG';
 

package/packages/web/src/react/WebPlayerView.tsx

@@ -432,30 +432,6 @@ export type WebPlayerViewProps = {
 
   // Flash News Ticker
   flashNewsTicker?: FlashNewsTickerConfig;                                         // Flash news ticker configuration
-
-  // Screen Protection (Simple: boolean | Advanced: config object)
-  screenProtection?: boolean | {
-    enabled: boolean;
-    forensicWatermark?: {
-      userId?: string;
-      sessionId?: string;
-      invisible?: boolean;
-    };
-    canvasRendering?: {
-      enabled: boolean;
-      enableNoise?: boolean;
-      enableDynamicTransforms?: boolean;
-    };
-    aggressiveMode?: boolean;
-    onDetection?: 'warn' | 'pause' | 'degrade';
-    warningMessage?: string;
-    trackingEndpoint?: string;
-    onScreenCaptureDetected?: (event: any) => void;
-    onDevToolsDetected?: () => void;
-  };
-  // Legacy callbacks (deprecated)
-  onScreenCaptureDetected?: (event: any) => void;
-  onDevToolsDetected?: () => void;
 };
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
@@ -1286,6 +1262,13 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                     midrollTimes: props.googleAds.midrollTimes,
                     companionAdSlots: props.googleAds.companionAdSlots,
                     onAdStart: () => {
+                      // Clear the fallback timeout since a pre-roll ad is actually starting
+                      if (prerollFallbackTimeout) {
+                        clearTimeout(prerollFallbackTimeout);
+                        prerollFallbackTimeout = null;
+                        console.log('✅ Pre-roll ad started, fallback timeout cleared');
+                      }
+
                       setIsAdPlaying(true);
                       // Notify player to block keyboard controls
                       if (typeof (player as any).setAdPlaying === 'function') {
@@ -1302,6 +1285,12 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                       props.googleAds?.onAdEnd?.();
                     },
                     onAdError: (error) => {
+                      // Clear the fallback timeout on ad error
+                      if (prerollFallbackTimeout) {
+                        clearTimeout(prerollFallbackTimeout);
+                        prerollFallbackTimeout = null;
+                      }
+
                       setIsAdPlaying(false);
                       // Notify player to unblock keyboard controls
                       if (typeof (player as any).setAdPlaying === 'function') {
@@ -1343,6 +1332,7 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                 // Initialize ad display container on first user interaction
                 // Chrome requires this to be called on a user gesture
                 let adContainerInitialized = false;
+                let prerollFallbackTimeout: NodeJS.Timeout | null = null;
 
                 const initAdsOnUserGesture = () => {
                   if (!adContainerInitialized && adsManagerRef.current) {
@@ -1359,6 +1349,20 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                 const handleFirstPlay = () => {
                   initAdsOnUserGesture();
                   if (adsManagerRef.current && adContainerInitialized) {
+                    // CRITICAL FIX: Pause video immediately to prevent content playback during ad loading
+                    // This prevents 2-4 seconds of video playing while pre-roll ads are being fetched
+                    console.log('🛑 Pausing video for pre-roll ads...');
+                    videoElement.pause();
+
+                    // Safety mechanism: If no pre-roll ad starts within 1 second, resume video
+                    // This handles cases where only mid-roll or post-roll ads are configured
+                    prerollFallbackTimeout = setTimeout(() => {
+                      if (!adsManagerRef.current?.isPlayingAd()) {
+                        console.log('⏩ No pre-roll ad detected, resuming video playback');
+                        videoElement.play().catch(() => {});
+                      }
+                    }, 1000);
+
                     adsManagerRef.current.requestAds();
                   }
                   videoElement.removeEventListener('play', handleFirstPlay);

package/scripts/fix-imports.js

@@ -28,24 +28,6 @@ function fixImports(filePath) {
       'import "../../core/dist/index.js"'
     );
     
-    // Fix imports to core/dist to use index.js (both with and without .js)
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/\.\.\/core\/dist\.js["']/g,
-      'from "../../../core/dist/index.js"'
-    );
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/\.\.\/core\/dist["']/g,
-      'from "../../../core/dist/index.js"'
-    );
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist\.js["']/g,
-      'from "../../core/dist/index.js"'
-    );
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist["']/g,
-      'from "../../core/dist/index.js"'
-    );
-
     // Fix relative imports within the same package to include .js extension
     content = content.replace(
       /from\s+["']\.\/([^"']+)(?<!\.js)["']/g,
@@ -54,10 +36,6 @@ function fixImports(filePath) {
     content = content.replace(
       /from\s+["']\.\.?\/([^"']+)(?<!\.js)["']/g,
       (match, p1) => {
-        // Skip if it's already been handled (ends with index.js)
-        if (p1.includes('index.js')) {
-          return match;
-        }
         if (p1.includes('/')) {
           return `from "../${p1.replace(/([^\/]+)$/, '$1.js')}"`;
         }
@@ -80,24 +58,6 @@ function fixImports(filePath) {
       'import "../../core/dist/index.js"'
     );
     
-    // Fix imports to core/dist to use index.js (both with and without .js)
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/\.\.\/core\/dist\.js["']/g,
-      'from "../../../core/dist/index.js"'
-    );
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/\.\.\/core\/dist["']/g,
-      'from "../../../core/dist/index.js"'
-    );
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist\.js["']/g,
-      'from "../../core/dist/index.js"'
-    );
-    content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist["']/g,
-      'from "../../core/dist/index.js"'
-    );
-
     // Fix relative imports within the same package to include .js extension
     content = content.replace(
       /from\s+["']\.\/([^"']+)(?<!\.js)["']/g,
@@ -106,10 +66,6 @@ function fixImports(filePath) {
     content = content.replace(
       /from\s+["']\.\.?\/([^"']+)(?<!\.js)["']/g,
       (match, p1) => {
-        // Skip if it's already been handled (ends with index.js)
-        if (p1.includes('index.js')) {
-          return match;
-        }
         if (p1.includes('/')) {
           return `from "../${p1.replace(/([^\/]+)$/, '$1.js')}"`;
         }

package/packages/web/src/drm/DRMHelper.ts

@@ -1,203 +0,0 @@
-/**
- * DRM Helper Utility
- *
- * Simplifies DRM configuration for users who need maximum security (true black screen protection).
- * This is Option B - for advanced users who can encrypt their videos and set up license servers.
- */
-
-import { DRMConfig, DRMType } from '../../../core/dist';
-
-export interface DRMHelperOptions {
-  licenseServerUrl: string;
-  certificateUrl?: string;  // Required for FairPlay (Safari)
-  headers?: Record<string, string>;
-  preferredDRM?: 'widevine' | 'playready' | 'fairplay' | 'auto';
-}
-
-export class DRMHelper {
-  /**
-   * Detect the best DRM system for the current browser
-   */
-  static detectBestDRM(): DRMType {
-    const ua = navigator.userAgent.toLowerCase();
-
-    // Safari - use FairPlay
-    if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
-      return DRMType.FAIRPLAY;
-    }
-
-    // Edge - prefer PlayReady, fallback to Widevine
-    if (ua.indexOf('edg') !== -1) {
-      return DRMType.PLAYREADY;
-    }
-
-    // Chrome, Firefox, Opera - use Widevine
-    return DRMType.WIDEVINE;
-  }
-
-  /**
-   * Create a simple DRM configuration
-   *
-   * @example
-   * const drmConfig = DRMHelper.createConfig({
-   *   licenseServerUrl: 'https://your-license-server.com/license',
-   *   certificateUrl: 'https://your-license-server.com/cert', // FairPlay only
-   *   headers: {
-   *     'Authorization': 'Bearer your-token'
-   *   }
-   * });
-   */
-  static createConfig(options: DRMHelperOptions): DRMConfig {
-    const preferredDRMMap: Record<string, DRMType> = {
-      'widevine': DRMType.WIDEVINE,
-      'playready': DRMType.PLAYREADY,
-      'fairplay': DRMType.FAIRPLAY
-    };
-
-    const drmType = options.preferredDRM === 'auto' || !options.preferredDRM
-      ? this.detectBestDRM()
-      : preferredDRMMap[options.preferredDRM];
-
-    return {
-      type: drmType,
-      licenseUrl: options.licenseServerUrl,
-      certificateUrl: options.certificateUrl,
-      headers: options.headers || {},
-      // Widevine security level (L1 = hardware-backed, most secure)
-      ...(drmType === DRMType.WIDEVINE && { securityLevel: 'L1' as any })
-    };
-  }
-
-  /**
-   * Check if browser supports DRM
-   */
-  static async checkDRMSupport(): Promise<{
-    widevine: boolean;
-    playready: boolean;
-    fairplay: boolean;
-    recommended: DRMType;
-  }> {
-    const keySystemMap = {
-      widevine: 'com.widevine.alpha',
-      playready: 'com.microsoft.playready',
-      fairplay: 'com.apple.fps'
-    };
-
-    const support = {
-      widevine: false,
-      playready: false,
-      fairplay: false,
-      recommended: 'widevine' as DRMType
-    };
-
-    if (!navigator.requestMediaKeySystemAccess) {
-      return support;
-    }
-
-    // Check Widevine
-    try {
-      await navigator.requestMediaKeySystemAccess(keySystemMap.widevine, [{
-        initDataTypes: ['cenc'],
-        videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
-      }]);
-      support.widevine = true;
-    } catch (e) {}
-
-    // Check PlayReady
-    try {
-      await navigator.requestMediaKeySystemAccess(keySystemMap.playready, [{
-        initDataTypes: ['cenc'],
-        videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
-      }]);
-      support.playready = true;
-    } catch (e) {}
-
-    // Check FairPlay
-    try {
-      await navigator.requestMediaKeySystemAccess(keySystemMap.fairplay, [{
-        initDataTypes: ['skd'],
-        videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
-      }]);
-      support.fairplay = true;
-    } catch (e) {}
-
-    // Set recommended based on what's supported
-    support.recommended = this.detectBestDRM();
-
-    return support;
-  }
-
-  /**
-   * Validate DRM configuration
-   */
-  static validateConfig(config: DRMConfig): { valid: boolean; errors: string[] } {
-    const errors: string[] = [];
-
-    if (!config.type) {
-      errors.push('DRM type is required');
-    }
-
-    if (!config.licenseUrl) {
-      errors.push('License server URL is required');
-    }
-
-    if (config.type === 'fairplay' && !config.certificateUrl) {
-      errors.push('Certificate URL is required for FairPlay DRM');
-    }
-
-    try {
-      new URL(config.licenseUrl || '');
-    } catch (e) {
-      errors.push('License URL must be a valid URL');
-    }
-
-    return {
-      valid: errors.length === 0,
-      errors
-    };
-  }
-}
-
-/**
- * Quick start examples for common DRM providers
- */
-export const DRMProviderExamples = {
-  /**
-   * BuyDRM KeyOS
-   * https://www.buydrm.com/
-   */
-  BuyDRM: (customerId: string, videoId: string): DRMHelperOptions => ({
-    licenseServerUrl: `https://wv.service.expressplay.com/hms/wv/rights/?ExpressPlayToken=${customerId}`,
-    preferredDRM: 'auto'
-  }),
-
-  /**
-   * Irdeto
-   * https://irdeto.com/
-   */
-  Irdeto: (licenseUrl: string): DRMHelperOptions => ({
-    licenseServerUrl: licenseUrl,
-    preferredDRM: 'auto'
-  }),
-
-  /**
-   * Verimatrix
-   * https://www.verimatrix.com/
-   */
-  Verimatrix: (licenseUrl: string, token: string): DRMHelperOptions => ({
-    licenseServerUrl: licenseUrl,
-    headers: {
-      'Authorization': `Bearer ${token}`
-    },
-    preferredDRM: 'auto'
-  }),
-
-  /**
-   * Custom DRM server
-   */
-  Custom: (licenseUrl: string, certificateUrl?: string): DRMHelperOptions => ({
-    licenseServerUrl: licenseUrl,
-    certificateUrl: certificateUrl,
-    preferredDRM: 'auto'
-  })
-};