unified-video-framework 1.4.21 → 1.4.22

package/packages/web/src/paywall/PaywallController.ts

@@ -1,5 +1,13 @@
 import { PaywallConfig } from '@unified-video/core';
 import { EmailAuthController, EmailAuthControllerOptions } from './EmailAuthController';
+import { 
+  PaymentGatewayManager, 
+  PaymentGatewayAdapter, 
+  CashfreePaymentGateway,
+  GenericPaymentGateway,
+  PaymentRequest,
+  PaymentResponse
+} from './PaymentGatewayAdapter';
 
 export type PaywallControllerOptions = {
   getOverlayContainer: () => HTMLElement | null;
@@ -17,11 +25,16 @@ export class PaywallController {
   private emailAuth: EmailAuthController | null = null;
   private authenticatedUserId: string | null = null;
   private sessionToken: string | null = null;
+  private paymentManager: PaymentGatewayManager = new PaymentGatewayManager();
+  private currentPaymentData: { gateway: string; orderId?: string; sessionId?: string } | null = null;
 
   constructor(config: PaywallConfig | null, opts: PaywallControllerOptions) {
     this.config = config;
     this.opts = opts;
     
+    // Initialize payment gateway manager with default gateways
+    this.initializePaymentGateways();
+    
     // Initialize EmailAuthController if email auth is enabled
     this.initializeEmailAuth();
     
@@ -34,29 +47,11 @@ export class PaywallController {
   }
 
   updateConfig(config: PaywallConfig | null) {
-    // Defensive logic: if new config is null/undefined but we have a working email auth,
-    // preserve the email auth instance to prevent destruction during re-initialization
-    const hadWorkingEmailAuth = this.config?.emailAuth?.enabled && !!this.emailAuth;
-    const newConfigLacksEmailAuth = !config?.emailAuth?.enabled;
-    
-    if (hadWorkingEmailAuth && newConfigLacksEmailAuth) {
-      console.log('[PaywallController] Preserving email auth instance during config update');
-      // Only update non-email auth related config, keep the email auth part
-      this.config = {
-        ...config,
-        emailAuth: this.config?.emailAuth // Preserve existing email auth config
-      };
-      
-      if (this.emailAuth) {
-        this.emailAuth.updateConfig(this.config);
-      }
-    } else {
-      // Normal config update
-      this.config = config;
-      this.initializeEmailAuth();
-      if (this.emailAuth) {
-        this.emailAuth.updateConfig(config);
-      }
+    this.config = config;
+    this.initializePaymentGateways();
+    this.initializeEmailAuth();
+    if (this.emailAuth) {
+      this.emailAuth.updateConfig(config);
     }
   }
 
@@ -74,34 +69,21 @@ export class PaywallController {
     // Check authentication first if email auth is enabled
     if (this.config.emailAuth?.enabled) {
       console.log('[PaywallController] Email auth is enabled, checking authentication');
+      const isAuthenticated = this.emailAuth?.isAuthenticated();
+      console.log('[PaywallController] User authenticated:', isAuthenticated);
       
-      // If email auth is enabled but instance doesn't exist, try to initialize it
-      if (!this.emailAuth) {
-        console.log('[PaywallController] Email auth enabled but no instance found, initializing now');
-        this.initializeEmailAuth();
-      }
-      
-      // If still no instance after initialization, show error
-      if (!this.emailAuth) {
-        console.error('[PaywallController] Failed to initialize email auth, proceeding to payment overlay');
-        // Continue to payment overlay as fallback
+      if (!isAuthenticated) {
+        console.log('[PaywallController] User not authenticated, opening email auth modal');
+        // Show email authentication modal first
+        this.emailAuth?.openAuthModal();
+        return;
       } else {
-        const isAuthenticated = this.emailAuth.isAuthenticated();
-        console.log('[PaywallController] User authenticated:', isAuthenticated);
-        
-        if (!isAuthenticated) {
-          console.log('[PaywallController] User not authenticated, opening email auth modal');
-          // Show email authentication modal first
-          this.emailAuth.openAuthModal();
-          return;
-        } else {
-          console.log('[PaywallController] User already authenticated, proceeding to payment overlay');
-          // Update userId for authenticated user
-          this.authenticatedUserId = this.emailAuth.getAuthenticatedUserId() || this.config.userId || null;
-          // Update config with authenticated userId for API calls
-          if (this.authenticatedUserId && this.config) {
-            this.config.userId = this.authenticatedUserId;
-          }
+        console.log('[PaywallController] User already authenticated, proceeding to payment overlay');
+        // Update userId for authenticated user
+        this.authenticatedUserId = this.emailAuth?.getAuthenticatedUserId() || this.config.userId || null;
+        // Update config with authenticated userId for API calls
+        if (this.authenticatedUserId && this.config) {
+          this.config.userId = this.authenticatedUserId;
         }
       }
     }
@@ -109,47 +91,16 @@ export class PaywallController {
     // Show payment overlay
     console.log('[PaywallController] Showing payment overlay');
     const root = this.ensureOverlay();
-    if (!root) {
-      console.log('[PaywallController] Failed to create overlay');
-      return;
-    }
-    
-    // Show overlay with proper animation
+    if (!root) return;
     root.style.display = 'flex';
     root.classList.add('active');
-    
-    // Force reflow then fade in with animation
-    void root.offsetWidth;
-    root.style.opacity = '1';
-    
-    // Also animate the modal inside
-    const modal = root.querySelector('.uvf-paywall-modal') as HTMLElement;
-    if (modal) {
-      modal.style.transform = 'translateY(0)';
-      modal.style.opacity = '1';
-    }
-    
-    console.log('[PaywallController] Payment overlay displayed successfully');
     this.opts.onShow?.();
   }
 
   closeOverlay() {
     if (this.overlayEl) {
-      // Animate out
-      this.overlayEl.style.opacity = '0';
-      const modal = this.overlayEl.querySelector('.uvf-paywall-modal') as HTMLElement;
-      if (modal) {
-        modal.style.transform = 'translateY(20px)';
-        modal.style.opacity = '0';
-      }
-      
-      // Hide after animation
-      setTimeout(() => {
-        if (this.overlayEl) {
-          this.overlayEl.classList.remove('active');
-          this.overlayEl.style.display = 'none';
-        }
-      }, 300); // Match the CSS transition duration
+      this.overlayEl.classList.remove('active');
+      this.overlayEl.style.display = 'none';
     }
     this.opts.onClose?.();
   }
@@ -162,38 +113,11 @@ export class PaywallController {
     ov.className = 'uvf-paywall-overlay';
     ov.setAttribute('role', 'dialog');
     ov.setAttribute('aria-modal', 'true');
-    ov.style.cssText = `
-      position: absolute;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.95);
-      z-index: 2147483647;
-      display: none;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    `;
+    ov.style.cssText = 'position:absolute;inset:0;background:rgba(0,0,0,0.85);z-index:2147483000;display:none;align-items:center;justify-content:center;';
 
     const modal = document.createElement('div');
     modal.className = 'uvf-paywall-modal';
-    modal.style.cssText = `
-      width: 90vw;
-      height: 85vh;
-      max-width: 1000px;
-      max-height: 700px;
-      background: #0f0f10;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 16px;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      box-shadow: 
-        0 20px 60px rgba(0, 0, 0, 0.7),
-        0 0 0 1px rgba(255, 255, 255, 0.1);
-      transform: translateY(20px);
-      opacity: 0;
-      transition: transform 0.3s ease, opacity 0.3s ease;
-    `;
+    modal.style.cssText = 'width:80vw;height:80vh;max-width:1100px;max-height:800px;background:#0f0f10;border:1px solid rgba(255,255,255,0.15);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.7)';
 
     const header = document.createElement('div');
     header.style.cssText = 'display:flex;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.1)';
@@ -247,68 +171,104 @@ export class PaywallController {
     const wrap = document.createElement('div');
     wrap.style.cssText = 'display:flex;gap:12px;flex-wrap:wrap;justify-content:center;';
 
-    for (const g of (this.config.gateways || [])) {
+    // Get available payment gateways from manager
+    const availableGateways = this.paymentManager.getGatewayNames();
+    const configuredGateways = this.config.gateways || availableGateways;
+    
+    for (const gatewayName of configuredGateways) {
+      const gateway = this.paymentManager.getGateway(gatewayName);
+      if (!gateway) continue;
+      
       const btn = document.createElement('button');
-      btn.textContent = g === 'cashfree' ? 'Cashfree' : 'Stripe';
+      btn.textContent = gateway.getDisplayName();
       btn.style.cssText = 'background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:12px 16px;cursor:pointer;min-width:120px;';
-      btn.addEventListener('click', () => this.openGateway(g as 'stripe' | 'cashfree'));
+      btn.addEventListener('click', () => this.openGateway(gatewayName));
       wrap.appendChild(btn);
     }
     this.gatewayStepEl!.appendChild(title);
     this.gatewayStepEl!.appendChild(wrap);
   }
 
-  private async openGateway(gateway: 'stripe' | 'cashfree') {
+  private async openGateway(gatewayName: string) {
     try {
       if (!this.config) return;
-      const { apiBase, userId, videoId } = this.config;
-      const w = Math.min(window.screen.width - 100, this.config.popup?.width || 1000);
-      const h = Math.min(window.screen.height - 100, this.config.popup?.height || 800);
-      const left = Math.max(0, Math.round((window.screen.width - w) / 2));
-      const top = Math.max(0, Math.round((window.screen.height - h) / 2));
+      
+      console.log(`[PaywallController] Opening gateway: ${gatewayName}`);
+      
+      // Get authenticated user email and video slug
+      const userEmail = this.emailAuth?.getAuthenticatedUserId() || this.authenticatedUserId;
+      const videoSlug = (this.config as any)?.metadata?.slug || this.config?.videoSlug;
+      
+      if (!userEmail) {
+        console.error('[PaywallController] User not authenticated - email required for payment');
+        alert('Please complete authentication first');
+        return;
+      }
+      
+      if (!videoSlug) {
+        console.error('[PaywallController] Missing video slug for payment');
+        alert('Video information missing. Please refresh and try again.');
+        return;
+      }
 
-      if (gateway === 'stripe') {
-        const res = await fetch(`${apiBase}/api/rentals/stripe/checkout-session`, {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            userId, videoId,
-            successUrl: window.location.origin + window.location.pathname + '?rental=success&popup=1',
-            cancelUrl: window.location.origin + window.location.pathname + '?rental=cancel&popup=1'
-          })
-        });
-        const data = await res.json();
-        if (data?.url) {
-          try { this.popup && !this.popup.closed && this.popup.close(); } catch (_) {}
-          this.popup = window.open(data.url, 'uvfCheckout', `popup=1,width=${w},height=${h},left=${left},top=${top}`);
-          this.startPolling();
+      // Prepare payment request using email as userId and slug as videoId
+      const paymentRequest: PaymentRequest = {
+        userId: userEmail, // Use email as user identifier
+        videoId: videoSlug, // Use slug as video identifier
+        amount: this.config.pricing?.amount || 100,
+        currency: this.config.pricing?.currency || 'INR',
+        successUrl: `${window.location.origin}${window.location.pathname}?payment=success&popup=1`,
+        cancelUrl: `${window.location.origin}${window.location.pathname}?payment=cancel&popup=1`,
+        metadata: {
+          videoSlug: videoSlug,
+          userEmail: userEmail,
+          title: this.config.pricing?.title || 'Video Access'
         }
+      };
+
+      console.log('[PaywallController] Payment request:', paymentRequest);
+
+      // Create payment using gateway manager
+      const paymentResponse = await this.paymentManager.createPayment(gatewayName, paymentRequest);
+      
+      console.log('[PaywallController] Payment response:', paymentResponse);
+
+      if (!paymentResponse.success) {
+        console.error('[PaywallController] Payment creation failed:', paymentResponse.error);
+        alert(paymentResponse.message || 'Payment creation failed');
         return;
       }
 
-      if (gateway === 'cashfree') {
-        const features = `popup=1,width=${w},height=${h},left=${left},top=${top}`;
-        // Pre-open a blank popup in direct response to the click to avoid popup blockers
-        let pre: Window | null = null;
-        try { pre = window.open('', 'uvfCheckout', features); } catch(_) { pre = null; }
-        const res = await fetch(`${apiBase}/api/rentals/cashfree/order`, {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ userId, videoId, returnUrl: window.location.origin + window.location.pathname })
-        });
-        const data = await res.json();
-        if (data?.paymentLink && data?.orderId) {
-          try { this.popup && !this.popup.closed && this.popup.close(); } catch (_) {}
-          this.popup = pre && !pre.closed ? pre : window.open('', 'uvfCheckout', features);
-          try { if (this.popup) this.popup.location.href = data.paymentLink; } catch(_) {}
-          (window as any)._uvf_cfOrderId = data.orderId;
-          this.startPolling();
-        } else {
-          // Close the pre-opened popup if we didn't get a link
-          try { pre && !pre.closed && pre.close(); } catch(_) {}
-        }
+      if (!paymentResponse.paymentUrl) {
+        console.error('[PaywallController] No payment URL received');
+        alert('Payment URL not available');
         return;
       }
-    } catch (_) {
-      // noop
+
+      // Store payment data for verification
+      this.currentPaymentData = {
+        gateway: gatewayName,
+        orderId: paymentResponse.orderId,
+        sessionId: paymentResponse.sessionId
+      };
+
+      // Open payment popup
+      const w = Math.min(window.screen.width - 100, this.config.popup?.width || 1000);
+      const h = Math.min(window.screen.height - 100, this.config.popup?.height || 800);
+      const left = Math.max(0, Math.round((window.screen.width - w) / 2));
+      const top = Math.max(0, Math.round((window.screen.height - h) / 2));
+      const features = `popup=1,width=${w},height=${h},left=${left},top=${top}`;
+
+      try { 
+        this.popup && !this.popup.closed && this.popup.close(); 
+      } catch (_) {}
+      
+      this.popup = window.open(paymentResponse.paymentUrl, 'uvfCheckout', features);
+      this.startPolling();
+
+    } catch (error) {
+      console.error('[PaywallController] Payment gateway error:', error);
+      alert('Payment system error. Please try again.');
     }
   }
 
@@ -330,49 +290,120 @@ export class PaywallController {
     if (!d || d.type !== 'uvfCheckout') return;
     try { if (this.popup && !this.popup.closed) this.popup.close(); } catch (_) {}
     this.popup = null;
+    
     if (d.status === 'cancel') {
       this.showGateways();
       return;
     }
+    
     if (d.status === 'success') {
       try {
-        if (d.sessionId && this.config) {
-          await fetch(`${this.config.apiBase}/api/rentals/stripe/confirm`, {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ sessionId: d.sessionId })
-          });
-        }
-        if (d.orderId && this.config) {
-          await fetch(`${this.config.apiBase}/api/rentals/cashfree/verify?orderId=${encodeURIComponent(d.orderId)}&userId=${encodeURIComponent(this.config.userId || '')}&videoId=${encodeURIComponent(this.config.videoId || '')}`);
+        // Get current user and video info
+        const userEmail = this.emailAuth?.getAuthenticatedUserId() || this.authenticatedUserId;
+        const videoSlug = (this.config as any)?.metadata?.slug || this.config?.videoSlug;
+        
+        // Verify payment using the appropriate gateway
+        if (this.currentPaymentData && this.config && userEmail && videoSlug) {
+          const verificationRequest = {
+            orderId: this.currentPaymentData.orderId || d.orderId,
+            sessionId: this.currentPaymentData.sessionId || d.sessionId,
+            userId: userEmail, // Use email
+            videoId: videoSlug, // Use slug
+            customData: {
+              email: userEmail,
+              slug: videoSlug,
+              ...d
+            }
+          };
+          
+          console.log('[PaywallController] Verifying payment:', verificationRequest);
+          
+          const verificationResult = await this.paymentManager.verifyPayment(
+            this.currentPaymentData.gateway,
+            verificationRequest
+          );
+          
+          console.log('[PaywallController] Payment verification result:', verificationResult);
+          
+          if (verificationResult.success && verificationResult.verified) {
+            console.log('[PaywallController] Payment verified successfully - unlocking video');
+            this.closeOverlay();
+            this.opts.onResume();
+          } else {
+            console.error('[PaywallController] Payment verification failed:', verificationResult.error);
+            alert('Payment verification failed. Please contact support.');
+            this.showGateways();
+          }
+        } else {
+          console.log('[PaywallController] Payment successful - assuming verification via return URL');
+          // For Cashfree, payment success via return URL usually means payment is complete
+          this.closeOverlay();
+          this.opts.onResume();
         }
-      } catch (_) {}
-      this.closeOverlay();
-      this.opts.onResume();
+      } catch (error) {
+        console.error('[PaywallController] Payment verification error:', error);
+        console.log('[PaywallController] Proceeding with video unlock despite verification error');
+        this.closeOverlay();
+        this.opts.onResume(); // Allow playback anyway since payment was marked as successful
+      }
     }
   };
 
 
+  /**
+   * Initialize payment gateways based on configuration
+   */
+  private initializePaymentGateways() {
+    if (!this.config?.apiBase) return;
+    
+    console.log('[PaywallController] Initializing payment gateways');
+    
+    // Clear existing gateways
+    this.paymentManager = new PaymentGatewayManager();
+    
+    // Register Cashfree gateway with your specific API endpoint
+    const cashfreeGateway = new CashfreePaymentGateway({
+      name: 'cashfree',
+      displayName: 'Cashfree',
+      apiBase: this.config.apiBase,
+      endpoints: {
+        createPayment: '/Front-End/cashfree/ppv-payment'
+      },
+      headers: {
+        'Accept': 'application/json'
+      }
+    });
+    
+    this.paymentManager.registerGateway(cashfreeGateway);
+    
+    // Register Stripe gateway (if needed)
+    if (this.config.gateways?.includes('stripe')) {
+      const stripeGateway = new GenericPaymentGateway({
+        name: 'stripe',
+        displayName: 'Stripe',
+        apiBase: this.config.apiBase,
+        endpoints: {
+          createPayment: '/api/rentals/stripe/checkout-session',
+          verifyPayment: '/api/rentals/stripe/confirm'
+        }
+      });
+      
+      this.paymentManager.registerGateway(stripeGateway);
+    }
+    
+    console.log('[PaywallController] Payment gateways initialized:', this.paymentManager.getGatewayNames());
+  }
+  
   /**
    * Initialize EmailAuthController if email authentication is enabled
    */
   private initializeEmailAuth() {
     console.log('[PaywallController] initializeEmailAuth called');
     console.log('[PaywallController] email auth config:', this.config?.emailAuth);
-    console.log('[PaywallController] config enabled:', this.config?.enabled);
     
-    // If paywall is disabled entirely, clean up everything
-    if (!this.config?.enabled) {
-      console.log('[PaywallController] Paywall completely disabled, cleaning up email auth');
-      if (this.emailAuth) {
-        this.emailAuth.destroy();
-        this.emailAuth = null;
-      }
-      return;
-    }
-    
-    // If email auth specifically is disabled, clean up only email auth
     if (!this.config?.emailAuth?.enabled) {
       console.log('[PaywallController] Email auth disabled, cleaning up existing instance');
+      // Clean up existing EmailAuth if disabled
       if (this.emailAuth) {
         this.emailAuth.destroy();
         this.emailAuth = null;
@@ -467,33 +498,11 @@ export class PaywallController {
    * Open payment overlay directly (bypassing auth check)
    */
   private openPaymentOverlay() {
-    console.log('[PaywallController] Opening payment overlay');
     const root = this.ensureOverlay();
-    if (!root) {
-      console.error('[PaywallController] Failed to create overlay');
-      return;
-    }
-
-    try {
-      root.style.display = 'flex';
-      root.classList.add('active');
-      
-      // Force reflow then fade in with animation
-      void root.offsetWidth;
-      root.style.opacity = '1';
-      
-      // Also animate the modal inside
-      const modal = root.querySelector('.uvf-paywall-modal') as HTMLElement;
-      if (modal) {
-        modal.style.transform = 'translateY(0)';
-        modal.style.opacity = '1';
-      }
-      
-      this.opts.onShow?.();
-      console.log('[PaywallController] Payment overlay shown');
-    } catch (err) {
-      console.error('[PaywallController] Error showing overlay:', err);
-    }
+    if (!root) return;
+    root.style.display = 'flex';
+    root.classList.add('active');
+    this.opts.onShow?.();
   }
 
   /**

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

@@ -405,16 +405,7 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
   useEffect(() => {
     const p = playerRef.current as any;
     if (p && typeof p.setPaywallConfig === 'function' && props.paywall) {
-      // Only update if paywall is enabled and properly configured
-      const paywall = props.paywall as any;
-      if (paywall.enabled && (paywall.apiBase || paywall.userId || paywall.videoId)) {
-        try { 
-          console.log('[WebPlayerView] Updating paywall config:', paywall);
-          p.setPaywallConfig(paywall); 
-        } catch(err) {
-          console.warn('[WebPlayerView] Failed to update paywall config:', err);
-        }
-      }
+      try { p.setPaywallConfig(props.paywall as any); } catch(_) {}
     }
   }, [JSON.stringify(props.paywall)]);
 

package/packages/ios/README.md

@@ -1,84 +0,0 @@
-# UnifiedVideoPlayer (iOS SDK)
-
-A unified iOS video player SDK with:
-- HLS playback (AVPlayer)
-- FairPlay DRM (SPC/CKC)
-- Subtitles/audio track selection (AVMediaSelection)
-- Picture-in-Picture (AVPictureInPictureController)
-- AirPlay (AVRoutePickerView)
-- Remote Command Center + Now Playing (lock screen controls)
-- Background audio (AVAudioSession)
-
-## Installation
-
-### CocoaPods
-1) Ensure this SDK is in a public Git repository. Update the podspec `s.source` to point at that repo and tag.
-2) In your Podfile:
-```ruby
-platform :ios, '13.0'
-use_frameworks!
-
-target 'YourApp' do
-  pod 'UnifiedVideoPlayer', :git => 'https://github.com/yourcompany/unified-video-ios.git', :tag => '1.0.0'
-end
-```
-3) Run:
-```bash
-pod install
-```
-
-### Swift Package Manager
-Add the package at the repository URL or use Add Local Package pointing to `packages/ios`.
-
-## Quick Start
-```swift
-import UnifiedVideoPlayer
-
-let containerView = UIView(frame: .zero)
-let player = UnifiedVideoPlayer()
-let config = PlayerConfiguration()
-config.autoPlay = true
-
-player.initialize(container: containerView, configuration: config)
-
-let source = MediaSource(url: "https://example.com/stream.m3u8")
-source.metadata = ["title": "Demo Stream"]
-player.onReady = { print("ready") }
-player.onQualityChange = { br in print("bitrate: \(br)") }
-
-player.load(source: source)
-```
-
-### FairPlay DRM
-```swift
-let drm = DRMConfiguration(type: "fairplay", licenseUrl: "https://license.example.com/fps")
-drm.certificateUrl = "https://license.example.com/cert"
-drm.headers = ["X-Tenant-ID": "default"]
-
-let source = MediaSource(url: "https://cdn.example.com/protected/playlist.m3u8")
-source.drm = drm
-player.load(source: source)
-```
-
-### Tracks
-```swift
-let audios = player.audioTracks()      // [String]
-let subs = player.subtitleTracks()     // [String]
-player.selectAudioTrack(index: 0)
-player.selectSubtitleTrack(index: -1)  // off
-```
-
-### PiP & AirPlay
-```swift
-player.startPictureInPicture()
-player.stopPictureInPicture()
-let airPlay = player.makeAirPlayPickerView()
-```
-
-## Capabilities
-- Enable Background Modes > Audio
-- For DRM endpoints, configure ATS exceptions if necessary.
-
-## License
-MIT
-