unified-video-framework 1.0.0

package/packages/web/src/__tests__/WebPlayer.test.ts

@@ -0,0 +1,314 @@
+import { WebPlayer } from '../WebPlayer';
+import { VideoSource } from '@unified-video/core';
+
+describe('WebPlayer', () => {
+  let player: WebPlayer;
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    player = new WebPlayer();
+  });
+
+  afterEach(async () => {
+    await player.destroy();
+    document.body.removeChild(container);
+  });
+
+  describe('initialization', () => {
+    it('should initialize with container element', async () => {
+      await expect(player.initialize(container)).resolves.not.toThrow();
+    });
+
+    it('should initialize with container selector', async () => {
+      container.id = 'test-container';
+      await expect(player.initialize('#test-container')).resolves.not.toThrow();
+    });
+
+    it('should throw error if container not found', async () => {
+      await expect(player.initialize('#non-existent')).rejects.toThrow(
+        'Container element not found'
+      );
+    });
+
+    it('should create video element inside container', async () => {
+      await player.initialize(container);
+      const video = container.querySelector('video');
+      expect(video).toBeTruthy();
+    });
+
+    it('should apply config options to video element', async () => {
+      await player.initialize(container, {
+        autoPlay: true,
+        muted: true,
+        controls: false
+      });
+      const video = container.querySelector('video') as HTMLVideoElement;
+      expect(video.autoplay).toBe(true);
+      expect(video.muted).toBe(true);
+      expect(video.controls).toBe(false);
+    });
+  });
+
+  describe('media loading', () => {
+    beforeEach(async () => {
+      await player.initialize(container);
+    });
+
+    it('should detect MP4 format', async () => {
+      const source: VideoSource = {
+        url: 'https://example.com/video.mp4'
+      };
+      
+      const spy = jest.spyOn(player as any, 'loadNative');
+      await player.load(source);
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should detect HLS format', async () => {
+      const source: VideoSource = {
+        url: 'https://example.com/video.m3u8'
+      };
+      
+      const spy = jest.spyOn(player as any, 'loadHLS');
+      await player.load(source);
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should detect DASH format', async () => {
+      const source: VideoSource = {
+        url: 'https://example.com/video.mpd'
+      };
+      
+      const spy = jest.spyOn(player as any, 'loadDASH');
+      await player.load(source);
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should use explicit type over detection', async () => {
+      const source: VideoSource = {
+        url: 'https://example.com/stream',
+        type: 'hls'
+      };
+      
+      const spy = jest.spyOn(player as any, 'loadHLS');
+      await player.load(source);
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should load subtitles when provided', async () => {
+      const source: VideoSource = {
+        url: 'https://example.com/video.mp4',
+        subtitles: [
+          {
+            url: 'https://example.com/subs.vtt',
+            language: 'en',
+            label: 'English',
+            kind: 'subtitles'
+          }
+        ]
+      };
+      
+      await player.load(source);
+      const tracks = container.querySelectorAll('track');
+      expect(tracks.length).toBe(1);
+      expect(tracks[0].getAttribute('srclang')).toBe('en');
+    });
+  });
+
+  describe('playback controls', () => {
+    beforeEach(async () => {
+      await player.initialize(container);
+      await player.load({ url: 'test.mp4' });
+    });
+
+    it('should play video', async () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      const playSpy = jest.spyOn(video, 'play').mockResolvedValue();
+      
+      await player.play();
+      expect(playSpy).toHaveBeenCalled();
+      expect(player.isPlaying()).toBe(true);
+    });
+
+    it('should pause video', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      const pauseSpy = jest.spyOn(video, 'pause');
+      
+      player.pause();
+      expect(pauseSpy).toHaveBeenCalled();
+      expect(player.isPaused()).toBe(true);
+    });
+
+    it('should seek to position', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      player.seek(10);
+      expect(video.currentTime).toBe(10);
+    });
+
+    it('should stop playback', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      player.stop();
+      expect(video.currentTime).toBe(0);
+      expect(player.isEnded()).toBe(true);
+    });
+  });
+
+  describe('volume controls', () => {
+    beforeEach(async () => {
+      await player.initialize(container);
+    });
+
+    it('should set volume', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      player.setVolume(0.5);
+      expect(video.volume).toBe(0.5);
+    });
+
+    it('should clamp volume between 0 and 1', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      
+      player.setVolume(-1);
+      expect(video.volume).toBe(0);
+      
+      player.setVolume(2);
+      expect(video.volume).toBe(1);
+    });
+
+    it('should mute video', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      player.mute();
+      expect(video.muted).toBe(true);
+    });
+
+    it('should unmute video', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      player.mute();
+      player.unmute();
+      expect(video.muted).toBe(false);
+    });
+
+    it('should toggle mute state', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      const initialMuted = video.muted;
+      
+      player.toggleMute();
+      expect(video.muted).toBe(!initialMuted);
+      
+      player.toggleMute();
+      expect(video.muted).toBe(initialMuted);
+    });
+  });
+
+  describe('event handling', () => {
+    beforeEach(async () => {
+      await player.initialize(container);
+    });
+
+    it('should emit play event', async () => {
+      const callback = jest.fn();
+      player.on('onPlay', callback);
+      
+      await player.play();
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it('should emit pause event', () => {
+      const callback = jest.fn();
+      player.on('onPause', callback);
+      
+      player.pause();
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it('should emit timeupdate event', () => {
+      const callback = jest.fn();
+      player.on('onTimeUpdate', callback);
+      
+      const video = container.querySelector('video') as HTMLVideoElement;
+      video.dispatchEvent(new Event('timeupdate'));
+      
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it('should remove event listener', () => {
+      const callback = jest.fn();
+      player.on('onPlay', callback);
+      player.off('onPlay', callback);
+      
+      player.play();
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it('should handle one-time event', async () => {
+      const callback = jest.fn();
+      player.once('onPlay', callback);
+      
+      await player.play();
+      await player.play();
+      
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('state management', () => {
+    beforeEach(async () => {
+      await player.initialize(container);
+    });
+
+    it('should return current player state', () => {
+      const state = player.getState();
+      
+      expect(state).toHaveProperty('isPlaying');
+      expect(state).toHaveProperty('isPaused');
+      expect(state).toHaveProperty('currentTime');
+      expect(state).toHaveProperty('duration');
+      expect(state).toHaveProperty('volume');
+    });
+
+    it('should update playback rate', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      
+      player.setPlaybackRate(1.5);
+      expect(video.playbackRate).toBe(1.5);
+      expect(player.getPlaybackRate()).toBe(1.5);
+    });
+
+    it('should get current time', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      Object.defineProperty(video, 'currentTime', {
+        value: 30,
+        configurable: true
+      });
+      
+      expect(player.getCurrentTime()).toBe(30);
+    });
+
+    it('should get duration', () => {
+      const video = container.querySelector('video') as HTMLVideoElement;
+      Object.defineProperty(video, 'duration', {
+        value: 120,
+        configurable: true
+      });
+      
+      const callback = jest.fn();
+      player.on('onLoadedMetadata', callback);
+      video.dispatchEvent(new Event('loadedmetadata'));
+      
+      expect(player.getDuration()).toBe(120);
+    });
+  });
+
+  describe('cleanup', () => {
+    it('should destroy player and clean up resources', async () => {
+      await player.initialize(container);
+      await player.load({ url: 'test.mp4' });
+      
+      await player.destroy();
+      
+      expect(container.innerHTML).toBe('');
+      expect(player.getState().isPlaying).toBe(false);
+    });
+  });
+});

package/packages/web/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @unified-video/web
+ * Web implementation of the Unified Video Framework
+ */
+
+// Re-export core interfaces for convenience
+export * from '@unified-video/core';
+
+// Export web player implementation
+export { WebPlayer } from './WebPlayer';
+export { WebPlayerView } from './react/WebPlayerView';
+
+// Version
+export const VERSION = '1.0.0';

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

@@ -0,0 +1,215 @@
+import { PaywallConfig } from '@unified-video/core';
+
+export type PaywallControllerOptions = {
+  getOverlayContainer: () => HTMLElement | null;
+  onResume: () => void;
+  onShow?: () => void;
+  onClose?: () => void;
+};
+
+export class PaywallController {
+  private config: PaywallConfig | null = null;
+  private opts: PaywallControllerOptions;
+  private overlayEl: HTMLElement | null = null;
+  private gatewayStepEl: HTMLElement | null = null;
+  private popup: Window | null = null;
+
+  constructor(config: PaywallConfig | null, opts: PaywallControllerOptions) {
+    this.config = config;
+    this.opts = opts;
+    try {
+      window.addEventListener('message', this.onMessage, false);
+    } catch (_) {}
+  }
+
+  updateConfig(config: PaywallConfig | null) {
+    this.config = config;
+  }
+
+  openOverlay() {
+    if (!this.config?.enabled) return;
+    const root = this.ensureOverlay();
+    if (!root) return;
+    root.style.display = 'flex';
+    root.classList.add('active');
+    this.opts.onShow?.();
+  }
+
+  closeOverlay() {
+    if (this.overlayEl) {
+      this.overlayEl.classList.remove('active');
+      this.overlayEl.style.display = 'none';
+    }
+    this.opts.onClose?.();
+  }
+
+  private ensureOverlay(): HTMLElement | null {
+    if (this.overlayEl && document.body.contains(this.overlayEl)) return this.overlayEl;
+
+    const container = this.opts.getOverlayContainer() || document.body;
+    const ov = document.createElement('div');
+    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.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: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)';
+    const hTitle = document.createElement('div');
+    hTitle.textContent = (this.config?.branding?.title || 'Continue watching');
+    hTitle.style.cssText = 'color:#fff;font-size:18px;font-weight:700';
+    const hDesc = document.createElement('div');
+    hDesc.textContent = (this.config?.branding?.description || 'Rent to continue watching this video.');
+    hDesc.style.cssText = 'color:rgba(255,255,255,0.75);font-size:14px;margin-top:4px';
+    const headerTextWrap = document.createElement('div');
+    headerTextWrap.appendChild(hTitle); headerTextWrap.appendChild(hDesc);
+
+    header.appendChild(headerTextWrap);
+
+    const content = document.createElement('div');
+    content.style.cssText = 'flex:1;display:flex;align-items:center;justify-content:center;padding:20px;';
+
+    const intro = document.createElement('div');
+    intro.style.cssText = 'display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;';
+    const msg = document.createElement('div');
+    msg.textContent = 'Free preview ended. Rent to continue watching.';
+    msg.style.cssText = 'color:#fff;font-size:16px;';
+    const rentBtn = document.createElement('button');
+    rentBtn.textContent = 'Rent Now';
+    rentBtn.className = 'uvf-btn-primary';
+    rentBtn.style.cssText = 'background:linear-gradient(135deg,#ff4d4f,#d9363e);color:#fff;border:1px solid rgba(255,77,79,0.6);border-radius:999px;padding:10px 18px;cursor:pointer;';
+    rentBtn.addEventListener('click', () => this.showGateways());
+    intro.appendChild(msg); intro.appendChild(rentBtn);
+
+    const step = document.createElement('div');
+    step.style.cssText = 'display:none;flex-direction:column;gap:16px;align-items:center;justify-content:center;';
+    this.gatewayStepEl = step;
+
+    content.appendChild(intro);
+    content.appendChild(step);
+    modal.appendChild(header); modal.appendChild(content);
+    ov.appendChild(modal);
+    container.appendChild(ov);
+    this.overlayEl = ov;
+    return ov;
+  }
+
+  private showGateways() {
+    if (!this.config) return;
+    this.gatewayStepEl!.innerHTML = '';
+    this.gatewayStepEl!.style.display = 'flex';
+
+    const title = document.createElement('div');
+    title.textContent = 'Choose a payment method';
+    title.style.cssText = 'color:#fff;font-size:16px;';
+    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) {
+      const btn = document.createElement('button');
+      btn.textContent = g === 'cashfree' ? 'Cashfree' : 'Stripe';
+      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));
+      wrap.appendChild(btn);
+    }
+    this.gatewayStepEl!.appendChild(title);
+    this.gatewayStepEl!.appendChild(wrap);
+  }
+
+  private async openGateway(gateway: 'stripe' | 'cashfree') {
+    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));
+
+      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();
+        }
+        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(_) {}
+        }
+        return;
+      }
+    } catch (_) {
+      // noop
+    }
+  }
+
+  private startPolling() {
+    // basic polling to detect entitlement or popup closed; the host page should also listen to postMessage
+    const timer = setInterval(async () => {
+      if (!this.config) { clearInterval(timer); return; }
+      if (this.popup && this.popup.closed) {
+        clearInterval(timer);
+        // user cancelled; leave overlay open at gateway selection
+        this.showGateways();
+        return;
+      }
+    }, 3000);
+  }
+
+  private onMessage = async (ev: MessageEvent) => {
+    const d: any = ev?.data || {};
+    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)}`);
+        }
+      } catch (_) {}
+      this.closeOverlay();
+      this.opts.onResume();
+    }
+  };
+}