@obipascal/player 1.0.0

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

@@ -0,0 +1,25 @@
+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 \"@wontum/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

@@ -0,0 +1,124 @@
+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 '@wontum/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

@@ -0,0 +1,52 @@
+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 '@wontum/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

@@ -0,0 +1,38 @@
+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 '@wontum/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

@@ -0,0 +1,32 @@
+/**
+ * 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

@@ -0,0 +1,56 @@
+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/index.d.ts

@@ -0,0 +1 @@
+export * from './src/index'

package/dist/src/analytics.d.ts

@@ -0,0 +1,28 @@
+import { AnalyticsConfig, AnalyticsEvent } from './types';
+
+/**
+ * Analytics - Tracks player events and quality metrics
+ */
+export declare class Analytics {
+    private config;
+    private sessionId;
+    private events;
+    private sessionStartTime;
+    private playbackStartTime;
+    private totalPlayTime;
+    private totalBufferTime;
+    private bufferStartTime;
+    private rebufferCount;
+    private seekCount;
+    constructor(config?: AnalyticsConfig);
+    trackEvent(eventType: string, data?: Record<string, any>): void;
+    private updateMetrics;
+    private getQoEMetrics;
+    private getSessionData;
+    private getConnectionInfo;
+    private sendEvent;
+    private generateSessionId;
+    getEvents(): AnalyticsEvent[];
+    getMetrics(): Record<string, any>;
+    destroy(): void;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,7 @@
+export { WontumPlayer } from './player';
+export { Analytics } from './analytics';
+export { S3Handler } from './s3-handler';
+export { UIController } from './ui-controller';
+export { WontumPlayerReact, useWontumPlayer, WontumPlayerProvider, useWontumPlayerContext } from './react';
+export type { WontumPlayerConfig, PlayerTheme, S3Config, AnalyticsConfig, PlayerState, PlayerEvent, PlayerEventType, AnalyticsEvent, QualityLevel } from './types';
+export type { WontumPlayerReactProps } from './react';

package/dist/src/player.d.ts

@@ -0,0 +1,63 @@
+import { WontumPlayerConfig, PlayerState, PlayerEvent, PlayerEventType } from './types';
+import { Analytics } from './analytics';
+
+/**
+ * WontumPlayer - A modern HLS video player for educational platforms
+ */
+export declare class WontumPlayer {
+    private container;
+    private videoElement;
+    private hls;
+    private config;
+    private eventListeners;
+    analytics: Analytics;
+    private s3Handler;
+    private uiController;
+    private state;
+    constructor(config: WontumPlayerConfig);
+    private addSubtitleTracks;
+    private createVideoElement;
+    private setupVideoListeners;
+    private loadSource;
+    private extractQualities;
+    private handleHlsError;
+    private getAnalyticsData;
+    play(): Promise<void>;
+    pause(): void;
+    seek(time: number): void;
+    skipForward(seconds?: number): void;
+    skipBackward(seconds?: number): void;
+    setVolume(volume: number): void;
+    mute(): void;
+    unmute(): void;
+    setPlaybackRate(rate: number): void;
+    setQuality(qualityIndex: number): void;
+    enterFullscreen(): void;
+    exitFullscreen(): void;
+    getState(): PlayerState;
+    getVideoElement(): HTMLVideoElement;
+    /**
+     * Enable subtitles for a specific track
+     */
+    enableSubtitles(trackIndex: number): void;
+    /**
+     * Disable all subtitles
+     */
+    disableSubtitles(): void;
+    /**
+     * Toggle subtitles on/off
+     */
+    toggleSubtitles(): boolean;
+    /**
+     * Get available subtitle tracks
+     */
+    getSubtitleTracks(): TextTrack[];
+    /**
+     * Check if subtitles are currently enabled
+     */
+    areSubtitlesEnabled(): boolean;
+    on(eventType: PlayerEventType, callback: (event: PlayerEvent) => void): void;
+    off(eventType: PlayerEventType, callback: (event: PlayerEvent) => void): void;
+    private emit;
+    destroy(): void;
+}

package/dist/src/react.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { WontumPlayer } from './player';
+import { WontumPlayerConfig, PlayerState } from './types';
+
+export interface WontumPlayerReactProps extends Omit<WontumPlayerConfig, "container"> {
+    /** Callback when player is ready */
+    onReady?: (player: WontumPlayer) => void;
+    /** Callback for player events */
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number) => void;
+    onVolumeChange?: (volume: number, muted: boolean) => void;
+    onError?: (error: any) => void;
+    /** Container style */
+    style?: React.CSSProperties;
+    /** Container className */
+    className?: string;
+    /** Width of player */
+    width?: string | number;
+    /** Height of player */
+    height?: string | number;
+}
+/**
+ * WontumPlayerReact - React component wrapper for WontumPlayer
+ */
+export declare const WontumPlayerReact: React.FC<WontumPlayerReactProps>;
+/**
+ * useWontumPlayer - React hook for imperative player control
+ */
+export declare const useWontumPlayer: (config: Omit<WontumPlayerConfig, "container">) => {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    player: WontumPlayer | null;
+    state: PlayerState | null;
+};
+/**
+ * WontumPlayerProvider - Context provider for player instance
+ */
+interface WontumPlayerContextValue {
+    player: WontumPlayer | null;
+    state: PlayerState | null;
+}
+export declare const WontumPlayerProvider: React.FC<{
+    player: WontumPlayer;
+    children: React.ReactNode;
+}>;
+export declare const useWontumPlayerContext: () => WontumPlayerContextValue;
+export {};

package/dist/src/s3-handler.d.ts

@@ -0,0 +1,95 @@
+import { S3Config } from './types';
+
+/**
+ * S3Handler - Manages S3/CloudFront URLs and signed cookie authentication
+ */
+export declare class S3Handler {
+    private config;
+    private urlCache;
+    private signedUrls;
+    constructor(config?: S3Config);
+    /**
+     * Process a URL - sign with CloudFront cookies or generate presigned URL for S3
+     */
+    processUrl(url: string): Promise<string>;
+    /**
+     * Check if URL is a CloudFront URL that needs signing
+     */
+    private isCloudFrontUrl;
+    /**
+     * Check if URL is an S3 URL
+     */
+    private isS3Url;
+    /**
+     * Sign CloudFront URL by calling the signing endpoint
+     * The endpoint should set signed cookies and return the URL
+     */
+    private signCloudFrontUrl;
+    /**
+     * Extract S3 key from URL
+     */
+    private extractS3Key;
+    /**
+     * Get presigned URL from cache or generate new one
+     */
+    private getPresignedUrl;
+    /**
+     * Helper to construct S3 URL from bucket and key
+     */
+    static constructS3Url(bucket: string, key: string, region?: string): string;
+    /**
+     * Helper to parse S3 URI (s3://bucket/key)
+     */
+    static parseS3Uri(uri: string): {
+        bucket: string;
+        key: string;
+    } | null;
+    /**
+     * Clear URL cache and signed URLs
+     */
+    clearCache(): void;
+}
+/**
+ * Example CloudFront signed cookie implementation:
+ *
+ * async function signUrl(url: string): Promise<string> {
+ *   const response = await fetch('/api/cloudfront/sign', {
+ *     method: 'POST',
+ *     headers: { 'Content-Type': 'application/json' },
+ *     body: JSON.stringify({ url }),
+ *     credentials: 'include' // Important: include cookies in request
+ *   });
+ *
+ *   const data = await response.json();
+ *   // Backend sets CloudFront signed cookies in response
+ *   // and returns the original URL
+ *   return data.url;
+ * }
+ *
+ * const player = new WontumPlayer({
+ *   src: 'https://media.domain.com/path/to/video/index.m3u8',
+ *   container: '#player',
+ *   s3Config: {
+ *     signUrl,
+ *     cloudFrontDomains: ['media.domain.com']
+ *   }
+ * });
+ *
+ * ---
+ *
+ * Legacy S3 presigned URL example:
+ *
+ * import { S3Client, GetObjectCommand } from '@aws-sdk/client-s3';
+ * import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+ *
+ * const s3Client = new S3Client({ region: 'us-east-1' });
+ *
+ * async function getPresignedUrl(key: string): Promise<string> {
+ *   const command = new GetObjectCommand({
+ *     Bucket: 'your-bucket-name',
+ *     Key: key,
+ *   });
+ *
+ *   return getSignedUrl(s3Client, command, { expiresIn: 3600 });
+ * }
+ */