unified-video-framework 1.4.381 → 1.4.383

package/packages/web/src/WebPlayer.ts

@@ -22,6 +22,8 @@ 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 {
@@ -93,6 +95,9 @@ 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;
@@ -353,6 +358,11 @@ 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();
@@ -8110,10 +8120,27 @@ export class WebPlayer extends BasePlayer {
       }
 
       // Render the watermark
-      ctx.fillText(text, x, y);
+      // 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.restore();
 
-      this.debugLog('Watermark rendered:', { text, x, y });
+      this.debugLog('Watermark rendered:', { text, x, y, multiWatermark: !!((this.config as any).screenProtection && this.screenProtectionController) });
     };
 
     // Set up interval with configured frequency
@@ -8123,6 +8150,58 @@ 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;
+
+    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
+    if (!(this.config as any).watermark) {
+      (this.config as any).watermark = {
+        enabled: true,
+        text: 'PROTECTED CONTENT',
+        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
+      );
+    }
+    this.setupWatermark(); // Re-setup with new config
+
+    // Create protection controller
+    this.screenProtectionController = new ScreenProtectionController({
+      videoElement: this.video,
+      containerElement: this.container,
+      watermarkConfig: (this.config as any).watermark,
+      onDetection: (event: ScreenCaptureEvent) => {
+        console.warn('[Screen Protection] Detection:', event);
+        this.emit('onScreenCaptureDetected', event);
+        if ((this.config as any).onScreenCaptureDetected) {
+          (this.config as any).onScreenCaptureDetected(event);
+        }
+      },
+      onDevToolsDetected: () => {
+        console.warn('[Screen Protection] DevTools detected');
+        this.emit('onDevToolsDetected');
+        if ((this.config as any).onDevToolsDetected) {
+          (this.config as any).onDevToolsDetected();
+        }
+      }
+    });
+
+    this.screenProtectionController.activate();
+  }
+
   public setPaywallConfig(config: any) {
     try {
       if (!config) return;
@@ -11278,6 +11357,12 @@ 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,9 +11,6 @@ export { WebPlayer } from './WebPlayer';
 export { WebPlayerView } from './react/WebPlayerView';
 export { SecureVideoPlayer } from './SecureVideoPlayer';
 
-// Export DRM Protection
-export { WebDRMProtection } from './drm/WebDRMProtection';
-
 // Export EPG (Electronic Program Guide) components
 export * from './react/EPG';
 

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

@@ -432,6 +432,11 @@ export type WebPlayerViewProps = {
 
   // Flash News Ticker
   flashNewsTicker?: FlashNewsTickerConfig;                                         // Flash news ticker configuration
+
+  // Screen Protection
+  screenProtection?: boolean;                                                       // Enable screen recording/screenshot prevention (default: false)
+  onScreenCaptureDetected?: (event: any) => void;                                  // Called when potential screen capture detected
+  onDevToolsDetected?: () => void;                                                 // Called when DevTools opened
 };
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {

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

@@ -0,0 +1,276 @@
+import { ScreenCaptureEvent } from '@unified-video/core';
+
+export interface ScreenProtectionOptions {
+  videoElement: HTMLVideoElement;
+  containerElement: HTMLElement;
+  watermarkConfig?: any;
+  onDetection?: (event: ScreenCaptureEvent) => void;
+  onDevToolsDetected?: () => void;
+}
+
+export class ScreenProtectionController {
+  private opts: ScreenProtectionOptions;
+  private overlayElement: HTMLElement | null = null;
+  private detectionIntervals: NodeJS.Timeout[] = [];
+  private eventListeners: Array<{ target: any; event: string; handler: any }> = [];
+  private isActive: boolean = false;
+  private devToolsOpen: boolean = false;
+  private originalGetDisplayMedia: any = null;
+
+  constructor(opts: ScreenProtectionOptions) {
+    this.opts = opts;
+  }
+
+  public activate(): void {
+    if (this.isActive) return;
+
+    console.log('[ScreenProtectionController] Activating screen protection...');
+
+    // Apply video element protection
+    this.applyVideoProtection();
+
+    // Create interference overlay
+    this.createInterferenceOverlay();
+
+    // Setup behavioral detection
+    this.setupDetection();
+
+    this.isActive = true;
+  }
+
+  public deactivate(): void {
+    if (!this.isActive) return;
+
+    console.log('[ScreenProtectionController] Deactivating screen protection...');
+
+    // Remove overlay
+    if (this.overlayElement && this.overlayElement.parentElement) {
+      this.overlayElement.parentElement.removeChild(this.overlayElement);
+      this.overlayElement = null;
+    }
+
+    // Clear all intervals
+    this.detectionIntervals.forEach(interval => clearInterval(interval));
+    this.detectionIntervals = [];
+
+    // Remove all event listeners
+    this.eventListeners.forEach(({ target, event, handler }) => {
+      target.removeEventListener(event, handler);
+    });
+    this.eventListeners = [];
+
+    // Restore original getDisplayMedia
+    if (this.originalGetDisplayMedia && navigator.mediaDevices) {
+      navigator.mediaDevices.getDisplayMedia = this.originalGetDisplayMedia;
+      this.originalGetDisplayMedia = null;
+    }
+
+    this.isActive = false;
+  }
+
+  public destroy(): void {
+    this.deactivate();
+  }
+
+  private applyVideoProtection(): void {
+    const { videoElement, containerElement } = this.opts;
+
+    try {
+      // Prevent Picture-in-Picture
+      videoElement.disablePictureInPicture = true;
+      (videoElement as any).autoPictureInPicture = false;
+    } catch (e) {
+      console.warn('[ScreenProtection] Could not disable PiP:', e);
+    }
+
+    try {
+      // Set controlsList to hide download button (if supported)
+      if ('controlsList' in videoElement) {
+        (videoElement as any).controlsList.add('nodownload');
+      }
+    } catch (e) {
+      console.warn('[ScreenProtection] controlsList not supported:', e);
+    }
+
+    // Prevent text selection
+    containerElement.style.userSelect = 'none';
+    containerElement.style.webkitUserSelect = 'none';
+    (containerElement.style as any).webkitTouchCallout = 'none';
+
+    // Prevent right-click context menu
+    const contextMenuHandler = (e: Event): boolean => {
+      if (containerElement.contains(e.target as Node)) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+      return true;
+    };
+    document.addEventListener('contextmenu', contextMenuHandler);
+    this.eventListeners.push({ target: document, event: 'contextmenu', handler: contextMenuHandler });
+
+    console.log('[ScreenProtection] Video protection applied');
+  }
+
+  private createInterferenceOverlay(): void {
+    const { containerElement } = this.opts;
+
+    // Create transparent overlay
+    this.overlayElement = document.createElement('div');
+    this.overlayElement.className = 'uvf-screen-protection-overlay';
+    this.overlayElement.setAttribute('aria-hidden', 'true');
+
+    // Style the overlay
+    Object.assign(this.overlayElement.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none', // Don't block user interactions
+      zIndex: '3', // Between video (1) and watermark (5)
+      mixBlendMode: 'screen',
+      opacity: '0.01',
+      background: 'transparent',
+      // Add subtle noise pattern
+      backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noise\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noise)\' opacity=\'0.05\'/%3E%3C/svg%3E")',
+      transition: 'opacity 0.3s ease-in-out'
+    });
+
+    // Insert into container
+    const watermarkCanvas = containerElement.querySelector('.uvf-watermark-layer');
+    if (watermarkCanvas) {
+      containerElement.insertBefore(this.overlayElement, watermarkCanvas);
+    } else {
+      containerElement.appendChild(this.overlayElement);
+    }
+
+    // Start overlay animation
+    this.animateOverlay();
+
+    console.log('[ScreenProtection] Interference overlay created');
+  }
+
+  private animateOverlay(): void {
+    if (!this.overlayElement || !this.isActive) return;
+
+    // Subtle opacity pulsing
+    const baseOpacity = 0.01;
+    const variation = baseOpacity * 0.5;
+    const newOpacity = baseOpacity + (Math.random() * variation - variation / 2);
+
+    this.overlayElement.style.opacity = newOpacity.toString();
+
+    // Continue animation
+    setTimeout(() => this.animateOverlay(), 3000 + Math.random() * 2000);
+  }
+
+  private setupDetection(): void {
+    // DevTools detection
+    this.detectDevTools();
+
+    // Focus loss detection
+    this.detectFocusLoss();
+
+    // Visibility change detection
+    this.detectVisibilityChange();
+
+    // Screen Capture API detection
+    this.detectScreenCaptureAPI();
+
+    console.log('[ScreenProtection] Detection mechanisms active');
+  }
+
+  private detectDevTools(): void {
+    const threshold = 160;
+    let previousState = false;
+
+    const checkDevTools = () => {
+      if (!this.isActive) return;
+
+      const widthDiff = window.outerWidth - window.innerWidth;
+      const heightDiff = window.outerHeight - window.innerHeight;
+
+      const isOpen = widthDiff > threshold || heightDiff > threshold;
+
+      if (isOpen && !previousState) {
+        this.devToolsOpen = true;
+        this.handleDetection({
+          type: 'devtools',
+          timestamp: Date.now(),
+          details: { widthDiff, heightDiff }
+        });
+
+        if (this.opts.onDevToolsDetected) {
+          this.opts.onDevToolsDetected();
+        }
+      } else if (!isOpen && previousState) {
+        this.devToolsOpen = false;
+      }
+
+      previousState = isOpen;
+    };
+
+    const interval = setInterval(checkDevTools, 500);
+    this.detectionIntervals.push(interval);
+  }
+
+  private detectFocusLoss(): void {
+    const blurHandler = () => {
+      this.handleDetection({
+        type: 'focus-loss',
+        timestamp: Date.now(),
+        details: { documentHidden: document.hidden }
+      });
+    };
+
+    window.addEventListener('blur', blurHandler);
+    this.eventListeners.push({ target: window, event: 'blur', handler: blurHandler });
+  }
+
+  private detectVisibilityChange(): void {
+    const visibilityHandler = () => {
+      if (document.hidden) {
+        this.handleDetection({
+          type: 'visibility-change',
+          timestamp: Date.now(),
+          details: { visibilityState: document.visibilityState }
+        });
+      }
+    };
+
+    document.addEventListener('visibilitychange', visibilityHandler);
+    this.eventListeners.push({ target: document, event: 'visibilitychange', handler: visibilityHandler });
+  }
+
+  private detectScreenCaptureAPI(): void {
+    // Monkey-patch getDisplayMedia if it exists
+    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
+      this.originalGetDisplayMedia = navigator.mediaDevices.getDisplayMedia.bind(
+        navigator.mediaDevices
+      );
+
+      const self = this;
+      navigator.mediaDevices.getDisplayMedia = async function (...args: any[]) {
+        // Detected screen capture attempt
+        self.handleDetection({
+          type: 'screen-capture-api',
+          timestamp: Date.now(),
+          details: { api: 'getDisplayMedia', args: args.length }
+        });
+
+        // Still allow the call to proceed (can't block it)
+        return self.originalGetDisplayMedia(...args);
+      };
+    }
+  }
+
+  private handleDetection(event: ScreenCaptureEvent): void {
+    console.warn('[ScreenProtection] Detection event:', event);
+
+    // Trigger callback
+    if (this.opts.onDetection) {
+      this.opts.onDetection(event);
+    }
+  }
+}

package/scripts/fix-imports.js

@@ -10,17 +10,22 @@ const path = require('path');
 
 function fixImports(filePath) {
   let content = fs.readFileSync(filePath, 'utf8');
-
-  // Fix core imports - remove .js extension for webpack compatibility
+  
+  // Replace @unified-video/core imports with relative paths
   if (filePath.includes(path.join('packages', 'web', 'dist'))) {
-    // Remove .js extension from core imports (webpack can't resolve them in node_modules)
+    // Fix CommonJS require statements
+    content = content.replace(
+      /require\(["']@unified-video\/core["']\)/g,
+      'require("../../core/dist")'
+    );
+    // Fix ES module import statements
     content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist\/index\.js["']/g,
-      'from "../../core/dist/index"'
+      /from\s+["']@unified-video\/core["']/g,
+      'from "../../core/dist/index.js"'
     );
     content = content.replace(
-      /import\s+["']\.\.\/\.\.\/core\/dist\/index\.js["']/g,
-      'import "../../core/dist/index"'
+      /import\s+["']@unified-video\/core["']/g,
+      'import "../../core/dist/index.js"'
     );
     
     // Fix relative imports within the same package to include .js extension
@@ -38,14 +43,19 @@ function fixImports(filePath) {
       }
     );
   } else if (filePath.includes(path.join('packages', 'react-native', 'dist'))) {
-    // Remove .js extension from core imports
+    // Fix CommonJS require statements
+    content = content.replace(
+      /require\(["']@unified-video\/core["']\)/g,
+      'require("../../core/dist")'
+    );
+    // Fix ES module import statements
     content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist\/index\.js["']/g,
-      'from "../../core/dist/index"'
+      /from\s+["']@unified-video\/core["']/g,
+      'from "../../core/dist/index.js"'
     );
     content = content.replace(
-      /import\s+["']\.\.\/\.\.\/core\/dist\/index\.js["']/g,
-      'import "../../core/dist/index"'
+      /import\s+["']@unified-video\/core["']/g,
+      'import "../../core/dist/index.js"'
     );
     
     // Fix relative imports within the same package to include .js extension