unified-video-framework 1.0.0

package/apps/rental-api/src/routes/webhooks.ts

@@ -0,0 +1,73 @@
+import { Router, type Request, type Response } from 'express';
+import Stripe from 'stripe';
+import { config } from '../config.js';
+import { upsertPayment } from '../services/payments.js';
+import { issueRentalEntitlement, expireEntitlementsForPayment } from '../services/entitlements.js';
+import { db } from '../db.js';
+
+export const stripeWebhookRouter = Router();
+const stripe = new Stripe(config.stripeSecretKey, { apiVersion: '2024-06-20' });
+
+// Stripe requires raw body at server.ts level
+stripeWebhookRouter.post('/stripe', async (req: Request, res: Response) => {
+  const sig = req.headers['stripe-signature'];
+  if (!sig) return res.status(400).send('Missing signature');
+
+  try {
+    const event = stripe.webhooks.constructEvent(req.body, sig as string, config.stripeWebhookSecret);
+
+    if (event.type === 'checkout.session.completed') {
+      const session = event.data.object as Stripe.Checkout.Session;
+
+      const amountCents = session.amount_total ?? 0;
+      const currency = (session.currency || 'USD').toUpperCase();
+      const userId = session.metadata?.userId || '';
+      const videoId = session.metadata?.videoId || '';
+      const rentalDurationHours = Number(session.metadata?.rentalDurationHours || 48);
+
+      const payment = await upsertPayment({
+        gateway: 'stripe',
+        gatewayRef: session.id,
+        amountCents,
+        currency,
+        status: 'succeeded',
+        rawPayload: session,
+        userId,
+        videoId
+      });
+
+      // Store payment_intent as subref for refunds correlation
+      const pi = session.payment_intent ? String(session.payment_intent) : null;
+      if (pi) {
+        await db.query(
+          `UPDATE payments SET gateway_subref=$1 WHERE id=$2`,
+          [pi, payment.id]
+        );
+      }
+
+      await issueRentalEntitlement({
+        userId, videoId, paymentId: payment.id, rentalDurationHours
+      });
+    }
+
+    // Handle refunds: charge.refunded
+    if (event.type === 'charge.refunded') {
+      const charge = event.data.object as Stripe.Charge;
+      const pi = charge.payment_intent ? String(charge.payment_intent) : null;
+      if (pi) {
+        const { rows } = await db.query(
+          `SELECT id FROM payments WHERE gateway='stripe' AND gateway_subref=$1 LIMIT 1`,
+          [pi]
+        );
+        if (rows[0]?.id) {
+          await expireEntitlementsForPayment(rows[0].id);
+        }
+      }
+    }
+
+    res.status(200).send('ok');
+  } catch (err) {
+    return res.status(400).send('Webhook signature verification failed');
+  }
+});
+

package/apps/rental-api/src/server.ts

@@ -0,0 +1,41 @@
+import express from 'express';
+import bodyParser from 'body-parser';
+import cors from 'cors';
+import { rentalsRouter } from './routes/rentals.js';
+import { stripeWebhookRouter } from './routes/webhooks.js';
+// import { pesapalRouter } from './routes/pesapal.js';
+import { cashfreeRouter } from './routes/cashfree.js';
+import { initDb } from './db.js';
+import { config } from './config.js';
+
+const app = express();
+
+// Enable CORS for browser calls from the demo
+app.use(cors());
+
+// Stripe webhook must be raw body
+app.use('/api/webhooks/stripe', bodyParser.raw({ type: 'application/json' }));
+
+// JSON body for other routes
+app.use(bodyParser.json());
+
+app.use('/api/rentals', rentalsRouter);
+app.use('/api/webhooks', stripeWebhookRouter);
+app.use('/api/rentals', cashfreeRouter);
+
+const PORT = process.env.PORT ? Number(process.env.PORT) : 3000;
+
+(async () => {
+  try {
+    if (process.env.DISABLE_DB === '1' || !config.dbUrl) {
+      console.warn('[rental-api] DB disabled or no DATABASE_URL set - starting without database. Some endpoints may be unavailable.');
+    } else {
+      await initDb();
+    }
+    app.listen(PORT, () => console.log(`[rental-api] listening on :${PORT}`));
+  } catch (err) {
+    console.error('Failed to start server', err);
+    process.exit(1);
+  }
+})();
+

package/apps/rental-api/src/services/entitlements.ts

@@ -0,0 +1,45 @@
+import { db } from '../db.js';
+
+export async function getEntitlement(userId: string, videoId: string) {
+  const { rows } = await db.query(
+    `SELECT * FROM entitlements 
+     WHERE user_id=$1 AND video_id=$2 
+     ORDER BY created_at DESC LIMIT 1`,
+    [userId, videoId]
+  );
+  if (!rows[0]) return { entitled: false as const };
+  const e = rows[0];
+  const now = new Date();
+  const entitled = new Date(e.expires_at) > now && e.status === 'active';
+  return { entitled, expiresAt: e.expires_at };
+}
+
+export async function issueRentalEntitlement(args: {
+  userId: string; videoId: string; paymentId: string; rentalDurationHours: number;
+}) {
+  const startsAt = new Date();
+  const expiresAt = new Date(startsAt.getTime() + args.rentalDurationHours * 3600 * 1000);
+
+  await db.query(
+    `UPDATE entitlements SET status='expired' 
+     WHERE user_id=$1 AND video_id=$2 AND status='active' AND expires_at <= NOW()`,
+    [args.userId, args.videoId]
+  );
+
+  const { rows } = await db.query(
+    `INSERT INTO entitlements (user_id, video_id, type, starts_at, expires_at, status, source_payment_id)
+     VALUES ($1,$2,'rental',$3,$4,'active',$5)
+     RETURNING *`,
+    [args.userId, args.videoId, startsAt.toISOString(), expiresAt.toISOString(), args.paymentId]
+  );
+  return rows[0];
+}
+
+export async function expireEntitlementsForPayment(paymentId: string) {
+  await db.query(
+    `UPDATE entitlements SET status='expired', expires_at=LEAST(expires_at, NOW())
+     WHERE source_payment_id=$1 AND status='active'`,
+    [paymentId]
+  );
+}
+

package/apps/rental-api/src/services/payments.ts

@@ -0,0 +1,22 @@
+import { db } from '../db.js';
+
+export async function upsertPayment(args: {
+  gateway: 'stripe'|'pesapal'|'google_pay'|'cashfree',
+  gatewayRef: string,
+  amountCents: number,
+  currency: string,
+  status: 'succeeded'|'pending'|'failed'|'refunded',
+  rawPayload: any,
+  userId: string,
+  videoId: string
+}) {
+  const { rows } = await db.query(
+    `INSERT INTO payments (gateway,gateway_ref,amount_cents,currency,status,raw_payload,user_id,video_id)
+     VALUES ($1,$2,$3,$4,$5,$6,$7,$8)
+     ON CONFLICT (gateway_ref) DO UPDATE SET status=EXCLUDED.status, raw_payload=EXCLUDED.raw_payload
+     RETURNING *`,
+    [args.gateway, args.gatewayRef, args.amountCents, args.currency, args.status, args.rawPayload, args.userId, args.videoId]
+  );
+  return rows[0];
+}
+

package/apps/rental-api/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "Node",
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+

package/check-urls.ps1

@@ -0,0 +1,74 @@
+# Test video URLs in the framework
+
+Write-Host ""
+Write-Host "Testing Video URLs in Unified Video Framework" -ForegroundColor Cyan
+Write-Host "============================================================" -ForegroundColor Cyan
+
+$urls = @(
+    @{Name="Mux HLS Stream"; URL="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"; Type="HLS"},
+    @{Name="Unified Streaming HLS"; URL="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8"; Type="HLS"},
+    @{Name="Akamai DASH BBB"; URL="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"; Type="DASH"},
+    @{Name="Akamai DASH Envivio"; URL="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd"; Type="DASH"},
+    @{Name="Google Shaka DASH"; URL="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"; Type="DASH"},
+    @{Name="Big Buck Bunny MP4"; URL="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; Type="MP4"},
+    @{Name="Elephants Dream MP4"; URL="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"; Type="MP4"},
+    @{Name="Sintel MP4"; URL="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"; Type="MP4"}
+)
+
+$workingCount = 0
+$brokenCount = 0
+$uncertainCount = 0
+
+foreach ($item in $urls) {
+    Write-Host ""
+    Write-Host "Testing: $($item.Name) [$($item.Type)]" -ForegroundColor Yellow
+    
+    try {
+        $response = Invoke-WebRequest -Uri $item.URL -Method Head -TimeoutSec 5 -UseBasicParsing -ErrorAction Stop
+        Write-Host "[OK] URL is accessible" -ForegroundColor Green
+        $workingCount++
+    }
+    catch {
+        $errorMsg = $_.Exception.Message
+        
+        if ($errorMsg -match "403") {
+            Write-Host "[ERROR] 403 Forbidden - Access denied" -ForegroundColor Red
+            $brokenCount++
+        }
+        elseif ($errorMsg -match "404") {
+            Write-Host "[ERROR] 404 Not Found" -ForegroundColor Red
+            $brokenCount++
+        }
+        else {
+            # Try GET request with byte range
+            try {
+                $response2 = Invoke-WebRequest -Uri $item.URL -Method Get -Headers @{"Range"="bytes=0-1"} -TimeoutSec 5 -UseBasicParsing -ErrorAction Stop
+                Write-Host "[OK] URL is accessible (via GET)" -ForegroundColor Green
+                $workingCount++
+            }
+            catch {
+                Write-Host "[WARNING] Could not verify - may still work in browser" -ForegroundColor Yellow
+                $uncertainCount++
+            }
+        }
+    }
+}
+
+Write-Host ""
+Write-Host "============================================================" -ForegroundColor Cyan
+Write-Host "SUMMARY" -ForegroundColor Cyan
+Write-Host "============================================================" -ForegroundColor Cyan
+Write-Host ""
+Write-Host "Total URLs tested: $($urls.Count)"
+Write-Host "Working: $workingCount" -ForegroundColor Green
+Write-Host "Broken: $brokenCount" -ForegroundColor Red
+Write-Host "Uncertain: $uncertainCount" -ForegroundColor Yellow
+
+if ($brokenCount -gt 0) {
+    Write-Host ""
+    Write-Host "ACTION REQUIRED: Found broken URLs that need replacement" -ForegroundColor Red
+}
+else {
+    Write-Host ""
+    Write-Host "All URLs are working or accessible!" -ForegroundColor Green
+}

package/comparison-report.md

@@ -0,0 +1,181 @@
+# Comparison Report: Enhanced-Player.html vs WebPlayer.ts
+
+## Overview
+This document compares the `enhanced-player.html` standalone implementation with the `WebPlayer.ts` class implementation to ensure feature parity.
+
+## ✅ MATCHING FEATURES
+
+### 1. **UI Structure**
+Both implementations have identical UI components:
+- Player wrapper with gradient backgrounds
+- Video container with aspect ratio 16:9
+- Watermark canvas overlay
+- Top and bottom gradient overlays
+- Loading spinner
+- Center play button
+- Controls bar with all buttons
+
+### 2. **CSS Styles**
+Both use the same styling:
+- Identical gradient colors (#ff0080, #8b00ff)
+- Same backdrop-filter blur effects
+- Matching button sizes and animations
+- Same hover effects and transitions
+- Identical opacity and transform values
+
+### 3. **Control Elements**
+Both have the same controls:
+- Play/pause button (center and in controls)
+- Skip back/forward buttons (10 seconds)
+- Volume control with hover panel
+- Time display (current/duration)
+- Progress bar with buffered indicator
+- Settings button
+- Fullscreen button
+- All use same SVG icons
+
+### 4. **Auto-Hide Controls**
+Both implement identical behavior:
+- Show controls on mouse movement
+- Hide after 3 seconds of inactivity when playing
+- Immediate hide on mouse leave when playing
+- Keep visible when hovering over controls
+- Cursor hiding with controls
+
+### 5. **Volume Control**
+Both have matching implementation:
+- Volume button with mute toggle
+- Hover panel that appears with delay
+- Draggable volume slider
+- Volume percentage display
+- Smart panel persistence on hover/drag
+
+### 6. **Progress Bar**
+Both feature:
+- Click to seek
+- Drag to scrub
+- Buffered progress display
+- Progress handle that appears on hover
+- Percentage-based positioning
+
+### 7. **Watermark System**
+Both implement:
+- Canvas-based watermark
+- Gradient text effect
+- Random positioning every 5 seconds
+- Same "PREMIUM" text with timestamp
+
+### 8. **Event Handling**
+Both handle:
+- Context menu disabled
+- Play/pause events
+- Time updates
+- Volume changes
+- Loading states
+- Fullscreen changes
+
+## ⚠️ DIFFERENCES
+
+### 1. **Additional Features in enhanced-player.html**
+The HTML version includes extra features NOT in WebPlayer.ts:
+
+#### Top Bar Elements:
+- **Title Bar** - Video title and subtitle display
+- **Cast Button** - Chromecast support
+- **Playlist Button** - Add to playlist functionality  
+- **Share Button** - Share video functionality
+- **Quality Badge** - Visual quality indicator
+
+#### Advanced Features:
+- **Keyboard Shortcuts** - Full keyboard control (Space, arrows, numbers, etc.)
+- **Shortcut Indicator** - Visual feedback for keyboard actions
+- **Time Tooltip** - Hover preview on progress bar
+- **Settings Menu** - Playback speed and quality options
+- **Picture-in-Picture Button** - PiP mode support
+
+### 2. **Implementation Differences**
+
+| Feature | enhanced-player.html | WebPlayer.ts |
+|---------|---------------------|--------------|
+| Architecture | Standalone class | Extends BasePlayer |
+| Video Loading | Direct URL | HLS/DASH support |
+| Quality Control | Manual settings | Adaptive bitrate |
+| Subtitles | Not implemented | Full support |
+| Error Handling | Basic | Comprehensive |
+| Events | Internal only | Event emitter system |
+
+### 3. **Missing in WebPlayer.ts**
+To achieve complete parity, WebPlayer.ts needs:
+
+1. **Top Controls Section**
+   - Title bar with video metadata
+   - Cast, playlist, share buttons
+   - Quality badge display
+
+2. **Keyboard Shortcuts**
+   - Space/K for play/pause
+   - Arrow keys for seek/volume
+   - Number keys for percentage seek
+   - M for mute, F for fullscreen, P for PiP
+
+3. **Visual Feedback**
+   - Shortcut indicator overlay
+   - Time tooltip on progress hover
+   - Settings menu with speed/quality options
+
+4. **PiP Button**
+   - Picture-in-Picture toggle in controls
+
+5. **Advanced Volume Features**
+   - Keyboard volume control
+   - More refined hover timing
+
+## 📊 Feature Comparison Table
+
+| Feature | enhanced-player.html | WebPlayer.ts | Status |
+|---------|---------------------|--------------|--------|
+| Custom Controls | ✅ | ✅ | ✅ Matching |
+| Auto-hide Controls | ✅ | ✅ | ✅ Matching |
+| Volume Panel | ✅ | ✅ | ✅ Matching |
+| Progress Bar | ✅ | ✅ | ✅ Matching |
+| Watermark | ✅ | ✅ | ✅ Matching |
+| Loading Spinner | ✅ | ✅ | ✅ Matching |
+| Fullscreen | ✅ | ✅ | ✅ Matching |
+| Context Menu Disabled | ✅ | ✅ | ✅ Matching |
+| Keyboard Shortcuts | ✅ | ❌ | ⚠️ Missing |
+| Time Tooltip | ✅ | ❌ | ⚠️ Missing |
+| Settings Menu | ✅ | ❌ | ⚠️ Missing |
+| PiP Support | ✅ | ✅* | ⚠️ No UI button |
+| Title Bar | ✅ | ❌ | ⚠️ Missing |
+| Cast Support | ✅ | ❌ | ⚠️ Missing |
+| Share Feature | ✅ | ❌ | ⚠️ Missing |
+| Quality Badge | ✅ | ❌ | ⚠️ Missing |
+| Shortcut Indicator | ✅ | ❌ | ⚠️ Missing |
+| HLS/DASH Support | ❌ | ✅ | 🎯 WebPlayer only |
+| Subtitle Support | ❌ | ✅ | 🎯 WebPlayer only |
+| Event System | ❌ | ✅ | 🎯 WebPlayer only |
+
+*PiP methods exist but no UI button
+
+## 🔧 Recommendations
+
+To make WebPlayer.ts match enhanced-player.html completely:
+
+1. **Add keyboard event listener** in `setupControlsEventListeners()`
+2. **Create settings menu** with speed and quality options
+3. **Add time tooltip** to progress bar hover
+4. **Include PiP button** in controls bar
+5. **Add title bar** section with metadata display
+6. **Implement cast support** (optional, browser-specific)
+7. **Add share functionality** using Web Share API
+8. **Include quality badge** in controls
+9. **Create shortcut indicator** overlay
+
+## Conclusion
+
+The core functionality and visual design are **mostly matching** between both implementations. WebPlayer.ts has the essential premium UI features but lacks some of the advanced interactive features present in enhanced-player.html. The main differences are:
+
+- WebPlayer.ts focuses on **video format compatibility** (HLS/DASH)
+- enhanced-player.html focuses on **user interaction features** (keyboard, sharing, etc.)
+
+Both serve their purposes well, with WebPlayer.ts being more suitable for production use with streaming protocols, while enhanced-player.html provides a richer interactive experience for demonstration purposes.

package/docs/PAYWALL.md

@@ -0,0 +1,95 @@
+# Paywall Integration (Stripe + Cashfree)
+
+This document describes how to enable a dynamic paywall for rental flows across the Web player. It covers free preview gating, in-player paywall overlay (80% modal), popup checkout windows, entitlement polling/verification, and gateway configuration.
+
+## Features
+- Free preview limit (freeDuration) enforced locally and during casting
+- 80% in-player overlay on preview end showing metadata and a Rent Now CTA
+- Gateway selection list rendered dynamically from configuration
+- Popup checkout window (not a tab) for Stripe and Cashfree
+- Auto-close popup and resume playback on payment success
+- Cancel handling: popup closes and overlay returns to gateway list
+
+## Backend Requirements
+- Rental API exposes:
+  - Stripe: `POST /api/rentals/stripe/checkout-session` (returns { url })
+  - Cashfree: `POST /api/rentals/cashfree/order` (returns { paymentLink, orderId })
+  - Cashfree verify: `GET /api/rentals/cashfree/verify?orderId=&userId=&videoId=`
+- Environment variables:
+  - STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET
+  - CASHFREE_APP_ID, CASHFREE_SECRET_KEY, CASHFREE_BASE_URL (sandbox/live)
+
+## Core Types
+```
+export interface PaywallConfig {
+  enabled: boolean;
+  apiBase: string;
+  userId: string;
+  videoId: string;
+  gateways: Array<'stripe' | 'cashfree'>;
+  branding?: { title?: string; description?: string; logoUrl?: string; theme?: any };
+  popup?: { width?: number; height?: number };
+}
+
+export interface PlayerConfig {
+  ...
+  freeDuration?: number;
+  paywall?: PaywallConfig;
+}
+```
+
+## Web Player Usage
+```
+import { WebPlayerView } from '@unified-video/web/react';
+
+<WebPlayerView
+  url="https://.../movie.m3u8"
+  type="hls"
+  freeDuration={60}
+  paywall={{
+    enabled: true,
+    apiBase: 'http://localhost:3100',
+    userId: 'u1',
+    videoId: 'v1',
+    gateways: ['stripe','cashfree'],
+    branding: { title: 'Continue watching', description: 'Rent to continue watching this video.' },
+    popup: { width: 1000, height: 800 }
+  }}
+/>
+```
+
+Or fetch paywall config dynamically per tenant:
+```
+<WebPlayerView
+  url="..."
+  freeDuration={60}
+  paywallConfigUrl="/api/rentals/config?tenant=acme"
+/>
+```
+`paywallConfigUrl` should return PaywallConfig JSON.
+
+## Stripe
+- We open the exact Checkout URL returned from `stripe/checkout-session`.
+- successUrl: `.../enhanced-player.html?rental=success&popup=1`
+- cancelUrl:  `.../enhanced-player.html?rental=cancel&popup=1`
+- The popup page posts `{ type:'uvfCheckout', status:'success|cancel' }` to the opener and closes.
+- Entitlement is granted by webhook; the player polls entitlement and resumes on success.
+
+## Cashfree
+- We call `cashfree/order` to get `paymentLink` and `orderId`.
+- Open `paymentLink` in a popup; on success the return URL includes `?rental=success&popup=1&order_id=...`.
+- The popup posts a message with `{ type:'uvfCheckout', status:'success', orderId }` and closes.
+- The player verifies via `cashfree/verify` and grants entitlement immediately.
+
+## Styling & Branding
+- The overlay uses minimal inline styles for portability. You can pass `branding` and `popup` in `PaywallConfig` for per-tenant customization.
+
+## Removing Pesapal
+- Pesapal code is disabled and not wired in the server.
+- Demo and shared paywall UI list Stripe and Cashfree only.
+
+## Troubleshooting
+- Popup blocked: allow popups for your domain (localhost in dev).
+- Stripe “Something went wrong”: never append query params to the Checkout URL; only add `popup=1` to your own return/cancel URLs.
+- Entitlement doesn’t resume: ensure webhooks (Stripe) or `cashfree/verify` are reachable; check Rental API logs.
+