unified-video-framework 1.4.387 → 1.4.388

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

@@ -432,31 +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' | 'blackout';
-    blackoutDuration?: number;
-    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) => {
@@ -1287,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') {
@@ -1303,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') {
@@ -1344,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) {
@@ -1360,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'
-  })
-};

package/packages/web/src/security/CanvasVideoRenderer.ts

@@ -1,246 +0,0 @@
-/**
- * Canvas Video Renderer
- *
- * IMPORTANT LIMITATION:
- * This canvas-based approach does NOT prevent screenshots/recordings from showing content.
- * - Screenshots capture the canvas output (not black screen)
- * - Screen recorders capture the rendered canvas frames
- * - Only DRM provides true black screen protection
- *
- * What this DOES provide:
- * - Obfuscation layer (makes automated piracy tools slightly harder)
- * - Dynamic noise/watermarking that's harder to remove
- * - Video element is hidden (minor deterrent only)
- *
- * Use this only as an ADDITIONAL layer on top of other protections, not as primary protection.
- */
-
-export interface CanvasRendererOptions {
-  sourceVideo: HTMLVideoElement;
-  containerElement: HTMLElement;
-  watermarkText?: string;
-  enableNoise?: boolean;
-  enableDynamicTransforms?: boolean;
-}
-
-export class CanvasVideoRenderer {
-  private opts: CanvasRendererOptions;
-  private canvas: HTMLCanvasElement;
-  private ctx: CanvasRenderingContext2D;
-  private animationFrameId: number | null = null;
-  private isActive: boolean = false;
-  private noiseOffset: number = 0;
-
-  constructor(opts: CanvasRendererOptions) {
-    this.opts = opts;
-
-    // Create canvas element
-    this.canvas = document.createElement('canvas');
-    this.canvas.className = 'uvf-canvas-video-renderer';
-    this.canvas.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      z-index: 2;
-    `;
-
-    const context = this.canvas.getContext('2d', {
-      alpha: false,
-      desynchronized: true, // Hint for better performance
-      willReadFrequently: false
-    });
-
-    if (!context) {
-      throw new Error('[CanvasRenderer] Failed to get 2D context');
-    }
-
-    this.ctx = context;
-  }
-
-  public activate(): void {
-    if (this.isActive) return;
-
-    console.log('[CanvasRenderer] Activating canvas-based video rendering...');
-    console.warn('[CanvasRenderer] WARNING: Canvas rendering does NOT prevent screenshots showing content.');
-    console.warn('[CanvasRenderer] This only adds obfuscation. Use DRM for true protection.');
-
-    // Hide the original video element
-    this.opts.sourceVideo.style.opacity = '0';
-    this.opts.sourceVideo.style.pointerEvents = 'none';
-
-    // Add canvas to container
-    this.opts.containerElement.appendChild(this.canvas);
-
-    // Set canvas dimensions to match video
-    this.updateCanvasSize();
-
-    // Start rendering loop
-    this.isActive = true;
-    this.renderFrame();
-
-    // Update canvas size on video resize
-    this.opts.sourceVideo.addEventListener('loadedmetadata', () => {
-      this.updateCanvasSize();
-    });
-
-    console.log('[CanvasRenderer] Canvas rendering active');
-  }
-
-  public deactivate(): void {
-    if (!this.isActive) return;
-
-    console.log('[CanvasRenderer] Deactivating canvas rendering...');
-
-    this.isActive = false;
-
-    // Stop animation loop
-    if (this.animationFrameId !== null) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
-    }
-
-    // Show original video
-    this.opts.sourceVideo.style.opacity = '1';
-    this.opts.sourceVideo.style.pointerEvents = 'auto';
-
-    // Remove canvas
-    if (this.canvas.parentElement) {
-      this.canvas.parentElement.removeChild(this.canvas);
-    }
-  }
-
-  public destroy(): void {
-    this.deactivate();
-  }
-
-  private updateCanvasSize(): void {
-    const video = this.opts.sourceVideo;
-
-    // Set internal canvas resolution to match video
-    this.canvas.width = video.videoWidth || 1920;
-    this.canvas.height = video.videoHeight || 1080;
-
-    console.log(`[CanvasRenderer] Canvas size: ${this.canvas.width}x${this.canvas.height}`);
-  }
-
-  private renderFrame = (): void => {
-    if (!this.isActive) return;
-
-    const video = this.opts.sourceVideo;
-
-    // Only render if video has content and is playing
-    if (video.readyState >= video.HAVE_CURRENT_DATA) {
-      // Clear canvas
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-      // Apply dynamic transforms (makes automated extraction slightly harder)
-      if (this.opts.enableDynamicTransforms) {
-        this.ctx.save();
-
-        // Subtle random positioning (imperceptible to humans, confuses some bots)
-        const jitterX = Math.sin(Date.now() / 1000) * 0.5;
-        const jitterY = Math.cos(Date.now() / 1000) * 0.5;
-        this.ctx.translate(jitterX, jitterY);
-      }
-
-      // Draw video frame to canvas
-      this.ctx.drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
-
-      // Apply noise layer (makes pixel-perfect extraction harder)
-      if (this.opts.enableNoise) {
-        this.applyNoiseLayer();
-      }
-
-      // Draw watermark overlay
-      if (this.opts.watermarkText) {
-        this.drawDynamicWatermark();
-      }
-
-      if (this.opts.enableDynamicTransforms) {
-        this.ctx.restore();
-      }
-    }
-
-    // Continue rendering loop
-    this.animationFrameId = requestAnimationFrame(this.renderFrame);
-  };
-
-  private applyNoiseLayer(): void {
-    // Create subtle noise that changes over time
-    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-    const data = imageData.data;
-
-    // Very subtle noise (imperceptible to humans, confuses some automated tools)
-    for (let i = 0; i < data.length; i += 4) {
-      const noise = (Math.random() - 0.5) * 2; // -1 to 1
-      data[i] += noise;     // R
-      data[i + 1] += noise; // G
-      data[i + 2] += noise; // B
-      // Alpha (i+3) unchanged
-    }
-
-    this.ctx.putImageData(imageData, 0, 0);
-  }
-
-  private drawDynamicWatermark(): void {
-    const text = this.opts.watermarkText!;
-    const fontSize = Math.floor(this.canvas.height / 30);
-
-    this.ctx.save();
-
-    // Configure text style
-    this.ctx.font = `${fontSize}px Arial, sans-serif`;
-    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-    this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
-    this.ctx.lineWidth = 1;
-    this.ctx.textAlign = 'center';
-    this.ctx.textBaseline = 'middle';
-
-    // Rotating watermark (harder to crop out)
-    const time = Date.now() / 1000;
-    const positions = [
-      { x: this.canvas.width * 0.25, y: this.canvas.height * 0.25 },
-      { x: this.canvas.width * 0.75, y: this.canvas.height * 0.25 },
-      { x: this.canvas.width * 0.25, y: this.canvas.height * 0.75 },
-      { x: this.canvas.width * 0.75, y: this.canvas.height * 0.75 },
-      { x: this.canvas.width * 0.5, y: this.canvas.height * 0.5 }
-    ];
-
-    positions.forEach((pos, index) => {
-      this.ctx.save();
-      this.ctx.translate(pos.x, pos.y);
-
-      // Rotate each watermark slightly
-      const rotation = (Math.sin(time + index) * 15 * Math.PI) / 180;
-      this.ctx.rotate(rotation);
-
-      // Pulsing opacity
-      const opacity = 0.2 + Math.sin(time * 2 + index) * 0.1;
-      this.ctx.globalAlpha = opacity;
-
-      this.ctx.strokeText(text, 0, 0);
-      this.ctx.fillText(text, 0, 0);
-
-      this.ctx.restore();
-    });
-
-    this.ctx.restore();
-  }
-
-  /**
-   * Get the canvas element (for external manipulation if needed)
-   */
-  public getCanvas(): HTMLCanvasElement {
-    return this.canvas;
-  }
-
-  /**
-   * Check if rendering is active
-   */
-  public isRendering(): boolean {
-    return this.isActive;
-  }
-}