@obipascal/player 1.0.14 → 1.0.16

package/dist/index.d.ts

@@ -1 +1,9 @@
-export * from './src/index'
+export { WontumPlayer } from './player';
+export { Analytics } from './analytics';
+export { S3Handler } from './s3-handler';
+export { UIController } from './ui-controller';
+export { WontumFileInfo } from './file-info';
+export { WontumPlayerReact, useWontumPlayer, WontumPlayerProvider, useWontumPlayerContext, useVideoFileInfo, useAnalytics } from './react';
+export type { WontumPlayerConfig, PlayerTheme, S3Config, AnalyticsConfig, WebSocketAnalyticsHandler, SocketIOAnalyticsHandler, PlayerState, PlayerEvent, PlayerEventType, AnalyticsEvent, QualityLevel, } from './types';
+export type { VideoFileInfo } from './file-info';
+export type { WontumPlayerReactProps, UseVideoFileInfoResult, UseAnalyticsResult } from './react';

package/package.json

@@ -1,12 +1,14 @@
 {
 	"name": "@obipascal/player",
-	"version": "1.0.14",
+	"version": "1.0.16",
 	"description": "A modern HLS video player SDK for educational platforms with S3 integration",
 	"main": "dist/wontum-player.cjs.js",
 	"module": "dist/wontum-player.esm.js",
 	"types": "dist/index.d.ts",
 	"files": [
-		"dist"
+		"dist/wontum-player.esm.js",
+		"dist/wontum-player.cjs.js",
+		"dist/*.d.ts"
 	],
 	"scripts": {
 		"dev": "vite",

package/dist/examples/cloudfront-example.d.ts

@@ -1,25 +0,0 @@
-import { WontumPlayer } from '../src/index';
-
-/**
- * Example 1: Basic CloudFront Setup
- */
-export declare function basicCloudFrontExample(): WontumPlayer;
-/**
- * Example 2: With Error Handling and Retry
- */
-export declare function cloudFrontWithRetryExample(): WontumPlayer;
-/**
- * Example 3: React Component with CloudFront
- *
- * Note: This is a code example as a string. For actual React usage,
- * copy this to a .tsx file in your project.
- */
-export declare const ReactCloudFrontPlayerExample = "\nimport React from \"react\"\nimport { WontumPlayerReact } from \"@obipascal/player\"\n\nexport function CloudFrontPlayer({ videoUrl, userId }: { videoUrl: string; userId: string }) {\n\t// Sign URL function\n\tasync function signUrl(url: string): Promise<string> {\n\t\tconst response = await fetch(\"/api/cloudfront/sign\", {\n\t\t\tmethod: \"POST\",\n\t\t\theaders: {\n\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t},\n\t\t\tbody: JSON.stringify({ url, userId }),\n\t\t\tcredentials: \"include\",\n\t\t})\n\n\t\tconst data = await response.json()\n\t\treturn data.url\n\t}\n\n\treturn (\n\t\t<WontumPlayerReact\n\t\t\tsrc={videoUrl}\n\t\t\twidth=\"100%\"\n\t\t\theight=\"500px\"\n\t\t\ts3Config={{\n\t\t\t\tsignUrl,\n\t\t\t\tcloudFrontDomains: [\"media.domain.com\", \"cdn.domain.com\"], // Multiple domains\n\t\t\t}}\n\t\t\tanalytics={{\n\t\t\t\tenabled: true,\n\t\t\t\tuserId,\n\t\t\t\tvideoId: videoUrl,\n\t\t\t}}\n\t\t\tonError={(error) => {\n\t\t\t\tconsole.error(\"Player error:\", error)\n\t\t\t\t// Handle signing errors\n\t\t\t\tif (error?.message?.includes(\"sign\")) {\n\t\t\t\t\talert(\"Failed to authenticate video. Please refresh and try again.\")\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t)\n}\n";
-/**
- * Example 4: Backend Implementation (Node.js/Express)
- */
-export declare const backendExample = "\n// backend/routes/cloudfront.js\nconst express = require('express');\nconst AWS = require('aws-sdk');\nconst router = express.Router();\n\n// Initialize CloudFront signer\nconst cloudFront = new AWS.CloudFront.Signer(\n  process.env.CLOUDFRONT_KEY_PAIR_ID,\n  process.env.CLOUDFRONT_PRIVATE_KEY\n);\n\n// Middleware to verify user authentication\nfunction requireAuth(req, res, next) {\n  if (!req.user) {\n    return res.status(401).json({ error: 'Unauthorized' });\n  }\n  next();\n}\n\n// Middleware to verify user has access to video\nasync function verifyVideoAccess(req, res, next) {\n  const { url } = req.body;\n  const userId = req.user.id;\n  \n  // Extract video ID from URL\n  const videoId = extractVideoIdFromUrl(url);\n  \n  // Check database if user has access\n  const hasAccess = await checkUserVideoAccess(userId, videoId);\n  \n  if (!hasAccess) {\n    return res.status(403).json({ error: 'Access denied to this video' });\n  }\n  \n  next();\n}\n\n// Sign CloudFront URL endpoint\nrouter.post('/cloudfront/sign', requireAuth, verifyVideoAccess, (req, res) => {\n  try {\n    const { url } = req.body;\n    \n    if (!url) {\n      return res.status(400).json({ error: 'URL is required' });\n    }\n    \n    // Parse URL to get domain\n    const urlObj = new URL(url);\n    const domain = urlObj.hostname;\n    \n    // Create signed cookies\n    const policy = JSON.stringify({\n      Statement: [{\n        Resource: `https://${domain}/*`,\n        Condition: {\n          DateLessThan: {\n            'AWS:EpochTime': Math.floor(Date.now() / 1000) + 3600 // 1 hour\n          }\n        }\n      }]\n    });\n    \n    const signedCookies = cloudFront.getSignedCookie({\n      policy\n    });\n    \n    // Set signed cookies\n    const cookieOptions = {\n      domain: domain,\n      path: '/',\n      secure: true,\n      httpOnly: true,\n      sameSite: 'none',\n      maxAge: 3600000 // 1 hour\n    };\n    \n    res.cookie('CloudFront-Policy', signedCookies['CloudFront-Policy'], cookieOptions);\n    res.cookie('CloudFront-Signature', signedCookies['CloudFront-Signature'], cookieOptions);\n    res.cookie('CloudFront-Key-Pair-Id', signedCookies['CloudFront-Key-Pair-Id'], cookieOptions);\n    \n    // Return the original URL\n    // The cookies will authenticate subsequent requests\n    res.json({ url });\n    \n  } catch (error) {\n    console.error('Error signing CloudFront URL:', error);\n    res.status(500).json({ error: 'Failed to sign URL' });\n  }\n});\n\nmodule.exports = router;\n";
-/**
- * Example 5: Python/Django Backend
- */
-export declare const pythonBackendExample = "\n# backend/videos/views.py\nfrom django.http import JsonResponse\nfrom django.views.decorators.csrf import csrf_exempt\nfrom django.contrib.auth.decorators import login_required\nimport json\nfrom datetime import datetime, timedelta\nfrom cryptography.hazmat.primitives import hashes, serialization\nfrom cryptography.hazmat.primitives.asymmetric import padding\nimport base64\n\n@csrf_exempt\n@login_required\ndef sign_cloudfront_url(request):\n    if request.method != 'POST':\n        return JsonResponse({'error': 'Method not allowed'}, status=405)\n    \n    try:\n        data = json.loads(request.body)\n        url = data.get('url')\n        \n        if not url:\n            return JsonResponse({'error': 'URL is required'}, status=400)\n        \n        # Verify user has access to video\n        video_id = extract_video_id_from_url(url)\n        if not user_has_video_access(request.user, video_id):\n            return JsonResponse({'error': 'Access denied'}, status=403)\n        \n        # Create CloudFront signed cookies\n        expiration = datetime.utcnow() + timedelta(hours=1)\n        \n        policy = {\n            \"Statement\": [{\n                \"Resource\": f\"https://media.domain.com/*\",\n                \"Condition\": {\n                    \"DateLessThan\": {\n                        \"AWS:EpochTime\": int(expiration.timestamp())\n                    }\n                }\n            }]\n        }\n        \n        # Sign the policy\n        signed_cookies = create_signed_cookies(policy)\n        \n        # Set cookies\n        response = JsonResponse({'url': url})\n        response.set_cookie(\n            'CloudFront-Policy',\n            signed_cookies['CloudFront-Policy'],\n            domain='media.domain.com',\n            secure=True,\n            httponly=True,\n            samesite='None',\n            max_age=3600\n        )\n        response.set_cookie(\n            'CloudFront-Signature',\n            signed_cookies['CloudFront-Signature'],\n            domain='media.domain.com',\n            secure=True,\n            httponly=True,\n            samesite='None',\n            max_age=3600\n        )\n        response.set_cookie(\n            'CloudFront-Key-Pair-Id',\n            signed_cookies['CloudFront-Key-Pair-Id'],\n            domain='media.domain.com',\n            secure=True,\n            httponly=True,\n            samesite='None',\n            max_age=3600\n        )\n        \n        return response\n        \n    except Exception as e:\n        return JsonResponse({'error': str(e)}, status=500)\n";

package/dist/examples/custom-themes.d.ts

@@ -1,124 +0,0 @@
-import { WontumPlayer } from '../src/index';
-
-/**
- * Example 1: Netflix-style Dark Theme
- */
-export declare function netflixTheme(): WontumPlayer;
-/**
- * Example 2: YouTube-style Theme
- */
-export declare function youtubeTheme(): WontumPlayer;
-/**
- * Example 3: Modern Purple/Pink Theme
- */
-export declare function modernTheme(): WontumPlayer;
-/**
- * Example 4: Minimal Green Theme
- */
-export declare function minimalGreenTheme(): WontumPlayer;
-/**
- * Example 5: Bold Cyberpunk Theme
- */
-export declare function cyberpunkTheme(): WontumPlayer;
-/**
- * Example 6: Soft Pastel Theme
- */
-export declare function pastelTheme(): WontumPlayer;
-/**
- * Example 7: Education Platform Theme
- */
-export declare function educationTheme(): WontumPlayer;
-/**
- * React Example with Custom Theme
- */
-export declare const ReactCustomThemeExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@obipascal/player';\n\nfunction CustomStyledPlayer() {\n  return (\n    <WontumPlayerReact\n      src=\"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8\"\n      theme={{\n        primaryColor: '#ff6b6b',        // Coral red\n        accentColor: '#ee5a6f',\n        fontFamily: 'Helvetica, Arial, sans-serif',\n        controlsBackground: 'linear-gradient(to top, rgba(0,0,0,0.85), transparent)',\n        buttonHoverBg: 'rgba(255, 107, 107, 0.25)',\n        progressHeight: '5px',\n        borderRadius: '8px'\n      }}\n    />\n  );\n}\n";
-/**
- * All Available Theme Options
- */
-export declare const ThemeOptions: {
-    /**
-     * Primary color for progress bar, sliders, etc.
-     * Default: '#3b82f6' (blue)
-     */
-    primaryColor: string;
-    /**
-     * Accent color for hover states
-     * Default: '#2563eb' (darker blue)
-     */
-    accentColor: string;
-    /**
-     * Font family for all text
-     * Default: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-     */
-    fontFamily: string;
-    /**
-     * Background for controls overlay
-     * Can be solid color or gradient
-     * Default: 'linear-gradient(to top, rgba(0,0,0,0.8), transparent)'
-     */
-    controlsBackground: string;
-    /**
-     * Button hover background color
-     * Default: 'rgba(255, 255, 255, 0.1)'
-     */
-    buttonHoverBg: string;
-    /**
-     * Height of progress bar
-     * Default: '6px'
-     */
-    progressHeight: string;
-    /**
-     * Border radius for buttons and progress bar
-     * Default: '4px'
-     */
-    borderRadius: string;
-};
-/**
- * Brand Color Presets
- */
-export declare const BrandPresets: {
-    netflix: {
-        primary: string;
-        accent: string;
-    };
-    youtube: {
-        primary: string;
-        accent: string;
-    };
-    vimeo: {
-        primary: string;
-        accent: string;
-    };
-    spotify: {
-        primary: string;
-        accent: string;
-    };
-    twitch: {
-        primary: string;
-        accent: string;
-    };
-    disney: {
-        primary: string;
-        accent: string;
-    };
-    hulu: {
-        primary: string;
-        accent: string;
-    };
-    amazon: {
-        primary: string;
-        accent: string;
-    };
-    apple: {
-        primary: string;
-        accent: string;
-    };
-    hbo: {
-        primary: string;
-        accent: string;
-    };
-};
-/**
- * Quick Setup Helper
- */
-export declare function createThemedPlayer(containerId: string, streamUrl: string, brandName: keyof typeof BrandPresets): WontumPlayer;

package/dist/examples/events-demo.d.ts

@@ -1,52 +0,0 @@
-import { WontumPlayer } from '../src/index';
-
-/**
- * All available events in Wontum Player (Mux Player compatible)
- */
-export declare function allEventsDemo(): WontumPlayer;
-/**
- * Event categories breakdown
- */
-export declare const EventCategories: {
-    /**
-     * Playback Events - Control and playback state
-     */
-    readonly playback: readonly ["play", "pause", "playing", "ended", "timeupdate"];
-    /**
-     * Seeking Events - User navigation
-     */
-    readonly seeking: readonly ["seeking", "seeked"];
-    /**
-     * Loading Events - Media loading and buffering
-     */
-    readonly loading: readonly ["loadstart", "loadeddata", "loadedmetadata", "canplay", "canplaythrough", "progress", "waiting", "durationchange"];
-    /**
-     * Media State Events - Volume, rate, dimensions
-     */
-    readonly mediaState: readonly ["volumechange", "ratechange", "resize"];
-    /**
-     * Network/Error Events - Network issues and errors
-     */
-    readonly network: readonly ["abort", "emptied", "stalled", "suspend", "error"];
-    /**
-     * Custom Player Events - Wontum Player specific
-     */
-    readonly custom: readonly ["qualitychange", "fullscreenchange"];
-};
-/**
- * Minimal event listener example
- */
-export declare function minimalEventExample(): void;
-/**
- * React example with all events
- */
-export declare const ReactAllEventsExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@obipascal/player';\n\nfunction VideoPlayerWithEvents() {\n  return (\n    <WontumPlayerReact\n      src=\"https://media.domain.com/video.m3u8\"\n      \n      {/* Playback Events */}\n      onPlay={(e) => console.log('Play', e)}\n      onPause={(e) => console.log('Pause', e)}\n      onPlaying={(e) => console.log('Playing', e)}\n      onEnded={(e) => console.log('Ended', e)}\n      onTimeupdate={(e) => console.log('Time:', e.data.currentTime)}\n      \n      {/* Seeking */}\n      onSeeking={(e) => console.log('Seeking', e)}\n      onSeeked={(e) => console.log('Seeked', e)}\n      \n      {/* Loading Events */}\n      onLoadstart={(e) => console.log('Load Start', e)}\n      onLoadeddata={(e) => console.log('Loaded Data', e)}\n      onLoadedmetadata={(e) => console.log('Metadata', e)}\n      onCanplay={(e) => console.log('Can Play', e)}\n      onCanplaythrough={(e) => console.log('Can Play Through', e)}\n      onProgress={(e) => console.log('Progress', e)}\n      onWaiting={(e) => console.log('Buffering', e)}\n      onDurationchange={(e) => console.log('Duration', e)}\n      \n      {/* Media State */}\n      onVolumechange={(e) => console.log('Volume', e)}\n      onRatechange={(e) => console.log('Rate', e)}\n      onResize={(e) => console.log('Resize', e)}\n      \n      {/* Network/Error */}\n      onAbort={(e) => console.log('Abort', e)}\n      onEmptied={(e) => console.log('Emptied', e)}\n      onStalled={(e) => console.log('Stalled', e)}\n      onSuspend={(e) => console.log('Suspend', e)}\n      onError={(e) => console.error('Error', e)}\n      \n      {/* Custom Events */}\n      onQualitychange={(e) => console.log('Quality', e)}\n      onFullscreenchange={(e) => console.log('Fullscreen', e)}\n    />\n  );\n}\n";
-/**
- * Compare with Mux Player events
- */
-export declare const MuxPlayerCompatibility: {
-    muxPlayerEvents: string[];
-    wontumExtensions: string[];
-    allSupported: boolean;
-    totalEvents: number;
-};

package/dist/examples/public-stream-test.d.ts

@@ -1,38 +0,0 @@
-import { WontumPlayer } from '../src/index';
-
-/**
- * Example 1: Basic public stream
- */
-export declare function basicPublicStream(): WontumPlayer;
-/**
- * Example 2: With event logging
- */
-export declare function publicStreamWithEvents(): WontumPlayer;
-/**
- * Example 3: Multiple quality levels
- */
-export declare function adaptiveStreamTest(): WontumPlayer;
-/**
- * Public HLS Test Streams
- */
-export declare const PUBLIC_TEST_STREAMS: {
-    appleBasic: string;
-    apple4K: string;
-    muxDemo: string;
-    bigBuckBunny: string;
-    tearsOfSteel: string;
-    sintel: string;
-    multiBitrate: string;
-};
-/**
- * Quick test function - just paste into console
- */
-export declare function quickTest(streamUrl?: string): WontumPlayer;
-/**
- * HTML Example for quick testing
- */
-export declare const htmlExample = "\n<!DOCTYPE html>\n<html>\n<head>\n  <title>Wontum Player Test</title>\n  <style>\n    body { \n      margin: 0; \n      padding: 20px; \n      font-family: Arial, sans-serif; \n      background: #1a1a1a;\n      color: white;\n    }\n    #player { \n      width: 100%; \n      max-width: 1200px; \n      height: 600px; \n      background: #000;\n      margin: 20px auto;\n    }\n    .info {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 20px;\n    }\n  </style>\n</head>\n<body>\n  <div class=\"info\">\n    <h1>\uD83C\uDFAC Wontum Player Test</h1>\n    <p>Testing with public HLS stream (no authentication required)</p>\n  </div>\n  \n  <div id=\"player\"></div>\n\n  <script type=\"module\">\n    import { WontumPlayer } from './dist/index.js';\n    \n    const player = new WontumPlayer({\n      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',\n      container: '#player',\n      autoplay: true,\n      controls: true,\n      analytics: {\n        enabled: true\n      }\n    });\n\n    // Log events\n    player.on('loadedmetadata', (e) => {\n      console.log('Duration:', e.data.duration);\n    });\n    \n    player.on('play', () => console.log('Playing!'));\n    player.on('pause', () => console.log('Paused'));\n    player.on('error', (e) => console.error('Error:', e.data));\n    \n    // Make player available in console\n    window.player = player;\n  </script>\n</body>\n</html>\n";
-/**
- * React example with public stream
- */
-export declare const reactPublicStreamExample = "\nimport React from 'react';\nimport { WontumPlayerReact } from '@obipascal/player';\n\nfunction App() {\n  return (\n    <div style={{ width: '100%', height: '600px', background: '#000' }}>\n      <WontumPlayerReact\n        src=\"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8\"\n        autoplay\n        onLoadedmetadata={(e) => console.log('Duration:', e.data.duration)}\n        onPlay={() => console.log('Playing!')}\n        onError={(e) => console.error('Error:', e.data)}\n      />\n    </div>\n  );\n}\n\nexport default App;\n";

package/dist/examples/react-examples.d.ts

@@ -1,32 +0,0 @@
-/**
- * Example 1: Basic React Player
- */
-export declare function BasicPlayer(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example 2: Player with Event Handlers
- */
-export declare function PlayerWithEvents(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example 3: Custom Controls with useWontumPlayer Hook
- */
-export declare function CustomControls(): import("react/jsx-runtime").JSX.Element;
-export declare function S3Player(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example 5: Player with Analytics
- */
-export declare function AnalyticsPlayer({ videoId, userId }: {
-    videoId: string;
-    userId: string;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * Example 6: Playlist Player
- */
-export declare function PlaylistPlayer(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example 7: Player with Custom Theme
- */
-export declare function ThemedPlayer(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example 8: Responsive Player
- */
-export declare function ResponsivePlayer(): import("react/jsx-runtime").JSX.Element;

package/dist/examples/vanilla-js-examples.d.ts

@@ -1,56 +0,0 @@
-import { WontumPlayer } from '../src/index';
-
-/**
- * Example 1: Basic Player Setup
- */
-declare function basicPlayerExample(): WontumPlayer;
-/**
- * Example 2: Player with Event Listeners
- */
-declare function playerWithEventsExample(): WontumPlayer;
-/**
- * Example 3: Programmatic Control
- */
-declare function programmaticControlExample(): WontumPlayer;
-/**
- * Example 4: S3 Integration
- * Note: Install AWS SDK with: npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
- */
-declare function s3IntegrationExample(): Promise<WontumPlayer>;
-/**
- * Example 5: Backend Presigned URL Generation
- */
-declare function backendPresignedUrlExample(): Promise<WontumPlayer>;
-/**
- * Example 6: Analytics Integration
- */
-declare function analyticsExample(): WontumPlayer;
-/**
- * Example 7: Quality Selection
- */
-declare function qualitySelectionExample(): WontumPlayer;
-/**
- * Example 8: Multiple Players on One Page
- */
-declare function multiplePlayersExample(): WontumPlayer[];
-/**
- * Example 9: Custom HLS Configuration
- */
-declare function customHlsConfigExample(): WontumPlayer;
-/**
- * Example 10: Playlist with Auto-advance
- */
-declare function playlistExample(): {
-    next: () => void;
-    previous: () => void;
-    goto: (index: number) => void;
-};
-/**
- * Example 11: Save and Resume Playback Position
- */
-declare function saveResumeExample(): WontumPlayer;
-/**
- * Example 12: Picture-in-Picture
- */
-declare function pictureInPictureExample(): Promise<WontumPlayer>;
-export { basicPlayerExample, playerWithEventsExample, programmaticControlExample, s3IntegrationExample, backendPresignedUrlExample, analyticsExample, qualitySelectionExample, multiplePlayersExample, customHlsConfigExample, playlistExample, saveResumeExample, pictureInPictureExample, };

package/dist/src/index.d.ts

@@ -1,9 +0,0 @@
-export { WontumPlayer } from './player';
-export { Analytics } from './analytics';
-export { S3Handler } from './s3-handler';
-export { UIController } from './ui-controller';
-export { WontumFileInfo } from './file-info';
-export { WontumPlayerReact, useWontumPlayer, WontumPlayerProvider, useWontumPlayerContext, useVideoFileInfo, useAnalytics } from './react';
-export type { WontumPlayerConfig, PlayerTheme, S3Config, AnalyticsConfig, WebSocketAnalyticsHandler, SocketIOAnalyticsHandler, PlayerState, PlayerEvent, PlayerEventType, AnalyticsEvent, QualityLevel, } from './types';
-export type { VideoFileInfo } from './file-info';
-export type { WontumPlayerReactProps, UseVideoFileInfoResult, UseAnalyticsResult } from './react';

package/dist/src/test-app.d.ts

@@ -1 +0,0 @@
-export {};