@obipascal/player 1.0.1 → 1.0.3

package/README.md

@@ -5,6 +5,7 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 ## ✨ Features
 
 ### Core Playback
+
 - 🎬 **HLS Streaming**: Full HLS.js support with adaptive bitrate streaming
 - 🔒 **CloudFront Integration**: Native support for CloudFront signed cookies and S3-hosted videos
 - 🎯 **Skip Controls**: 10-second forward/backward skip with circular arrow buttons
@@ -13,11 +14,13 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 - 🎛️ **Playback Rate**: Adjustable speed (0.5x - 2x)
 
 ### Subtitle & Accessibility
+
 - 📝 **Subtitle Support**: Full subtitle/caption support with programmatic API
 - 🌐 **Multi-language**: Support for multiple subtitle tracks with language selection
 - ♿ **Accessibility**: WCAG compliant with keyboard navigation
 
 ### UI & Controls
+
 - 🎨 **Modern UI Design**: Beautiful controls with blur effects, gradients, and smooth animations
 - 🖱️ **Smart Controls**: Auto-hide on inactivity, fade on hover
 - 📍 **Sticky Controls**: Optional persistent controls (toggle in settings)
@@ -27,6 +30,7 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 - 🎨 **Custom Theming**: Full CSS variable theming with 8 customizable properties
 
 ### Developer Experience
+
 - ⚛️ **React Support**: Component, Hook, and Context Provider patterns
 - 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
 - 📊 **Analytics & QoE**: Built-in analytics tracking and Quality of Experience metrics
@@ -98,7 +102,7 @@ yarn add @obipascal/player hls.js
 			player.on("timeupdate", (event) => {
 				console.log("Current time:", event.data.currentTime)
 			})
-			
+
 			// Programmatic subtitle control
 			player.enableSubtitles(0) // Enable first subtitle track
 			player.toggleSubtitles() // Toggle subtitles on/off
@@ -213,43 +217,165 @@ function ControlPanel() {
 
 ## 🔒 CloudFront & S3 Integration
 
-### CloudFront with Signed Cookies (Recommended)
+This player supports **three video hosting scenarios**. Choose the one that fits your needs:
+
+### Scenario 1: Public Videos (Easiest - No Authentication Required)
+
+**When to use:** Your videos are publicly accessible and don't require user authentication.
 
-For secure video delivery, use CloudFront with signed cookies:
+**Setup:** Just provide the video URL!
 
 ```typescript
 import { WontumPlayer } from "@obipascal/player"
 
-// Your backend sets signed cookies for CloudFront
-// Cookie names: CloudFront-Policy, CloudFront-Signature, CloudFront-Key-Pair-Id
-
 const player = new WontumPlayer({
-	src: "https://media.yourdomain.com/video/playlist.m3u8",
+	src: "https://d1234567890.cloudfront.net/video/playlist.m3u8",
 	container: "#player",
-	s3Config: {
-		cloudfront: {
-			domain: "media.yourdomain.com",
-			// Cookies are automatically sent by browser
-		},
-	},
 })
 ```
 
-### CloudFront Signed Cookie Setup (Backend)
+✅ **That's it!** No backend needed. Works for public S3 buckets or CloudFront distributions.
+
+---
+
+### Scenario 2: Private Videos with CloudFront Signed Cookies (Recommended)
+
+**When to use:** You want to restrict video access to authorized users (e.g., paid courses, premium content).
+
+**How it works:**
+
+1. User logs into your app
+2. Your backend verifies the user and sets CloudFront signed cookies
+3. Player automatically sends these cookies with every video request
+4. CloudFront checks the cookies and allows/denies access
+
+**Frontend Setup:**
+
+```typescript
+import { WontumPlayer } from "@obipascal/player"
+
+// STEP 1: Call your backend to set signed cookies BEFORE creating the player
+async function initializePlayer() {
+	// This endpoint sets CloudFront cookies in the browser
+	await fetch("/api/auth/video-access", {
+		credentials: "include", // Important: include cookies
+	})
+
+	// STEP 2: Create player - it will automatically use the cookies
+	const player = new WontumPlayer({
+		src: "https://media.yourdomain.com/videos/lesson-1/playlist.m3u8",
+		container: "#player",
+		s3Config: {
+			cloudFrontDomains: ["media.yourdomain.com"], // Your CloudFront domain
+			signUrl: async (url) => {
+				// This function is called when player needs to access a video
+				// Call your backend to refresh/set cookies if needed
+				const response = await fetch("/api/auth/sign-url", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					credentials: "include",
+					body: JSON.stringify({ url }),
+				})
+
+				if (!response.ok) {
+					throw new Error("Failed to authenticate video access")
+				}
+
+				// Backend sets cookies, return the URL
+				return url
+			},
+		},
+	})
+}
+
+initializePlayer()
+```
+
+**Backend Setup (Node.js/Express):**
 
 ```typescript
-// Node.js backend example
-import { CloudFrontClient } from "@aws-sdk/client-cloudfront"
+import express from "express"
 import { getSignedCookies } from "@aws-sdk/cloudfront-signer"
+import fs from "fs"
+
+const app = express()
+
+// STEP 1: Create endpoint that sets CloudFront signed cookies
+app.get("/api/auth/video-access", (req, res) => {
+	// Check if user is logged in (your authentication logic)
+	if (!req.user) {
+		return res.status(401).json({ error: "Not authenticated" })
+	}
 
-app.get("/api/video-auth", async (req, res) => {
+	// Define what resources user can access
+	const policy = {
+		Statement: [
+			{
+				Resource: "https://media.yourdomain.com/*", // All videos on this domain
+				Condition: {
+					DateLessThan: {
+						"AWS:EpochTime": Math.floor(Date.now() / 1000) + 3600, // Expires in 1 hour
+					},
+				},
+			},
+		],
+	}
+
+	// Generate CloudFront signed cookies
+	const cookies = getSignedCookies({
+		keyPairId: process.env.CLOUDFRONT_KEY_PAIR_ID!, // Your CloudFront key pair ID
+		privateKey: fs.readFileSync("./cloudfront-private-key.pem", "utf8"), // Your private key
+		policy: JSON.stringify(policy),
+	})
+
+	// Set the three required cookies
+	res.cookie("CloudFront-Policy", cookies["CloudFront-Policy"], {
+		domain: ".yourdomain.com", // Use your domain
+		path: "/",
+		secure: true, // HTTPS only
+		httpOnly: true, // Prevent JavaScript access
+		sameSite: "none",
+	})
+
+	res.cookie("CloudFront-Signature", cookies["CloudFront-Signature"], {
+		domain: ".yourdomain.com",
+		path: "/",
+		secure: true,
+		httpOnly: true,
+		sameSite: "none",
+	})
+
+	res.cookie("CloudFront-Key-Pair-Id", cookies["CloudFront-Key-Pair-Id"], {
+		domain: ".yourdomain.com",
+		path: "/",
+		secure: true,
+		httpOnly: true,
+		sameSite: "none",
+	})
+
+	res.json({ success: true })
+})
+
+// STEP 2: Optional endpoint for on-demand signing (called by signUrl function)
+app.post("/api/auth/sign-url", (req, res) => {
+	const { url } = req.body
+
+	// Verify user is authorized
+	if (!req.user) {
+		return res.status(401).json({ error: "Not authenticated" })
+	}
+
+	// You can add additional authorization logic here
+	// For example, check if user has access to this specific video
+
+	// Refresh cookies (same code as above)
 	const policy = {
 		Statement: [
 			{
 				Resource: "https://media.yourdomain.com/*",
 				Condition: {
 					DateLessThan: {
-						"AWS:EpochTime": Math.floor(Date.now() / 1000) + 3600, // 1 hour
+						"AWS:EpochTime": Math.floor(Date.now() / 1000) + 3600,
 					},
 				},
 			},
@@ -257,43 +383,142 @@ app.get("/api/video-auth", async (req, res) => {
 	}
 
 	const cookies = getSignedCookies({
-		keyPairId: process.env.CLOUDFRONT_KEY_PAIR_ID,
-		privateKey: process.env.CLOUDFRONT_PRIVATE_KEY,
+		keyPairId: process.env.CLOUDFRONT_KEY_PAIR_ID!,
+		privateKey: fs.readFileSync("./cloudfront-private-key.pem", "utf8"),
 		policy: JSON.stringify(policy),
 	})
 
-	// Set cookies
 	res.cookie("CloudFront-Policy", cookies["CloudFront-Policy"], {
 		domain: ".yourdomain.com",
+		path: "/",
 		secure: true,
 		httpOnly: true,
+		sameSite: "none",
 	})
+
 	res.cookie("CloudFront-Signature", cookies["CloudFront-Signature"], {
 		domain: ".yourdomain.com",
+		path: "/",
 		secure: true,
 		httpOnly: true,
+		sameSite: "none",
 	})
+
 	res.cookie("CloudFront-Key-Pair-Id", cookies["CloudFront-Key-Pair-Id"], {
 		domain: ".yourdomain.com",
+		path: "/",
 		secure: true,
 		httpOnly: true,
+		sameSite: "none",
 	})
 
 	res.json({ success: true })
 })
 ```
 
-### Public S3/CloudFront (No Authentication)
+**AWS CloudFront Setup:**
+
+1. Create a CloudFront key pair in AWS Console → CloudFront → Key pairs
+2. Download the private key file
+3. Set up environment variables:
+   ```bash
+   CLOUDFRONT_KEY_PAIR_ID=APKA...
+   ```
+4. Configure your CloudFront distribution to require signed cookies
+
+---
+
+### Scenario 3: Private S3 Videos with Presigned URLs
+
+**When to use:** Videos are in private S3 buckets without CloudFront.
+
+**How it works:**
+
+1. Your backend generates temporary presigned URLs for S3 objects
+2. Player uses these URLs to access videos
+3. URLs expire after a set time (e.g., 1 hour)
 
-For public videos:
+**Frontend Setup:**
 
 ```typescript
+import { WontumPlayer } from "@obipascal/player"
+
 const player = new WontumPlayer({
-	src: "https://d1234567890.cloudfront.net/video/playlist.m3u8",
+	src: "s3://my-bucket/videos/lesson-1/playlist.m3u8", // S3 URI
 	container: "#player",
+	s3Config: {
+		getPresignedUrl: async (s3Key) => {
+			// Call your backend to generate presigned URL
+			const response = await fetch("/api/s3/presigned-url", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ key: s3Key }),
+			})
+
+			if (!response.ok) {
+				throw new Error("Failed to get presigned URL")
+			}
+
+			const data = await response.json()
+			return data.url // Return the presigned URL
+		},
+	},
 })
 ```
 
+**Backend Setup (Node.js):**
+
+```typescript
+import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3"
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner"
+
+const s3Client = new S3Client({
+	region: "us-east-1",
+	credentials: {
+		accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+		secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+	},
+})
+
+app.post("/api/s3/presigned-url", async (req, res) => {
+	const { key } = req.body
+
+	// Verify user is authorized to access this video
+	if (!req.user) {
+		return res.status(401).json({ error: "Not authenticated" })
+	}
+
+	try {
+		// Generate presigned URL
+		const command = new GetObjectCommand({
+			Bucket: "my-bucket",
+			Key: key, // e.g., "videos/lesson-1/playlist.m3u8"
+		})
+
+		const url = await getSignedUrl(s3Client, command, {
+			expiresIn: 3600, // URL valid for 1 hour
+		})
+
+		res.json({ url })
+	} catch (error) {
+		console.error("Error generating presigned URL:", error)
+		res.status(500).json({ error: "Failed to generate presigned URL" })
+	}
+})
+```
+
+---
+
+### Which Method Should I Use?
+
+| Method                 | Best For                                       | Complexity  | Performance  |
+| ---------------------- | ---------------------------------------------- | ----------- | ------------ |
+| **Public Videos**      | Free content, marketing videos                 | ⭐ Easy     | ⚡ Fast      |
+| **CloudFront Cookies** | ⭐ **Recommended** for paid courses, premium   | ⭐⭐ Medium | ⚡⚡ Fastest |
+| **S3 Presigned URLs**  | Direct S3 access, simple private video hosting | ⭐⭐ Medium | ⚡ Good      |
+
+💡 **Tip:** Use CloudFront with signed cookies for production. It's more secure and performant for HLS videos (which have many file segments).
+
 ## 📝 Subtitle Support
 
 ### Adding Subtitles
@@ -568,15 +793,7 @@ function CustomPlayer() {
 Wontum Player comes with 7 beautiful pre-made themes:
 
 ```typescript
-import {
-	netflixTheme,
-	youtubeTheme,
-	modernTheme,
-	greenTheme,
-	cyberpunkTheme,
-	pastelTheme,
-	educationTheme,
-} from "@obipascal/player"
+import { netflixTheme, youtubeTheme, modernTheme, greenTheme, cyberpunkTheme, pastelTheme, educationTheme } from "@obipascal/player"
 
 const player = new WontumPlayer({
 	src: "https://media.example.com/video/playlist.m3u8",
@@ -586,6 +803,7 @@ const player = new WontumPlayer({
 ```
 
 **Available Themes:**
+
 - `netflixTheme()` - Netflix-inspired red and black
 - `youtubeTheme()` - YouTube-inspired red and white
 - `modernTheme()` - Modern blue gradient
@@ -634,6 +852,7 @@ const player = new WontumPlayer({
 ```
 
 **Available Brand Colors:**
+
 - `blue`, `lightBlue`, `darkBlue`
 - `red`, `lightRed`, `darkRed`
 - `green`, `lightGreen`, `darkGreen`
@@ -788,6 +1007,7 @@ For detailed API documentation including all methods, events, types, and configu
 ### Quick Reference
 
 **Player Methods:**
+
 - **Playback:** `play()`, `pause()`, `seek(time)`, `skipForward(seconds)`, `skipBackward(seconds)`
 - **Volume:** `setVolume(level)`, `mute()`, `unmute()`
 - **Subtitles:** `enableSubtitles(index)`, `disableSubtitles()`, `toggleSubtitles()`, `getSubtitleTracks()`, `areSubtitlesEnabled()`
@@ -798,6 +1018,7 @@ For detailed API documentation including all methods, events, types, and configu
 - **Lifecycle:** `destroy()`
 
 **Events (25 total):**
+
 - **Playback:** `play`, `pause`, `ended`, `timeupdate`, `durationchange`
 - **Loading:** `loadstart`, `loadedmetadata`, `loadeddata`, `canplay`, `canplaythrough`
 - **Buffering:** `waiting`, `playing`, `stalled`, `suspend`, `abort`
@@ -812,13 +1033,13 @@ For detailed API documentation including all methods, events, types, and configu
 
 ## 🌐 Browser Support
 
-| Browser | Minimum Version |
-|---------|----------------|
-| Chrome | Latest 2 versions |
-| Edge | Latest 2 versions |
-| Firefox | Latest 2 versions |
-| Safari | Latest 2 versions |
-| iOS Safari | iOS 12+ |
+| Browser        | Minimum Version   |
+| -------------- | ----------------- |
+| Chrome         | Latest 2 versions |
+| Edge           | Latest 2 versions |
+| Firefox        | Latest 2 versions |
+| Safari         | Latest 2 versions |
+| iOS Safari     | iOS 12+           |
 | Android Chrome | Latest 2 versions |
 
 **Note:** HLS playback requires HLS.js support. Native HLS playback is supported on Safari.

package/dist/src/react.d.ts

@@ -1,7 +1,6 @@
-import { default as React } from 'react';
 import { WontumPlayer } from './player';
 import { WontumPlayerConfig, PlayerState } from './types';
-
+import * as React from "react";
 export interface WontumPlayerReactProps extends Omit<WontumPlayerConfig, "container"> {
     /** Callback when player is ready */
     onReady?: (player: WontumPlayer) => void;
@@ -12,6 +11,8 @@ export interface WontumPlayerReactProps extends Omit<WontumPlayerConfig, "contai
     onTimeUpdate?: (currentTime: number) => void;
     onVolumeChange?: (volume: number, muted: boolean) => void;
     onError?: (error: any) => void;
+    onLoadedMetadata?: () => void;
+    onQualityChange?: (level: number) => void;
     /** Container style */
     style?: React.CSSProperties;
     /** Container className */

package/dist/wontum-player.cjs.js

@@ -1,4 +1,4 @@
-"use strict";var at=Object.defineProperty;var lt=(c,t,e)=>t in c?at(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var o=(c,t,e)=>lt(c,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("hls.js"),v=require("react");class tt{constructor(t){o(this,"config");o(this,"sessionId");o(this,"events",[]);o(this,"sessionStartTime");o(this,"playbackStartTime",null);o(this,"totalPlayTime",0);o(this,"totalBufferTime",0);o(this,"bufferStartTime",null);o(this,"rebufferCount",0);o(this,"seekCount",0);var e;this.config=t,this.sessionId=(t==null?void 0:t.sessionId)||this.generateSessionId(),this.sessionStartTime=Date.now(),(e=this.config)!=null&&e.enabled&&this.trackEvent("session_start",this.getSessionData())}trackEvent(t,e={}){var r;if(!((r=this.config)!=null&&r.enabled))return;const s={eventType:t,timestamp:Date.now(),sessionId:this.sessionId,videoId:this.config.videoId,userId:this.config.userId,data:{...e,...this.getQoEMetrics()}};this.events.push(s),this.updateMetrics(t,e),this.config.endpoint&&this.sendEvent(s),process.env.NODE_ENV==="development"&&console.log("[Analytics]",t,s.data)}updateMetrics(t,e){switch(t){case"play":this.playbackStartTime=Date.now();break;case"pause":case"ended":this.playbackStartTime&&(this.totalPlayTime+=Date.now()-this.playbackStartTime,this.playbackStartTime=null);break;case"buffering_start":this.bufferStartTime=Date.now(),this.rebufferCount++;break;case"buffering_end":this.bufferStartTime&&(this.totalBufferTime+=Date.now()-this.bufferStartTime,this.bufferStartTime=null);break;case"seeked":this.seekCount++;break}}getQoEMetrics(){const t=Date.now()-this.sessionStartTime,e=this.totalPlayTime>0?this.totalBufferTime/this.totalPlayTime:0;return{sessionDuration:t,totalPlayTime:this.totalPlayTime,totalBufferTime:this.totalBufferTime,bufferingRatio:Math.round(e*1e3)/1e3,rebufferCount:this.rebufferCount,seekCount:this.seekCount}}getSessionData(){return{userAgent:navigator.userAgent,platform:navigator.platform,language:navigator.language,screenResolution:`${screen.width}x${screen.height}`,viewport:`${window.innerWidth}x${window.innerHeight}`,connection:this.getConnectionInfo()}}getConnectionInfo(){const t=navigator,e=t.connection||t.mozConnection||t.webkitConnection;return e?{effectiveType:e.effectiveType,downlink:e.downlink,rtt:e.rtt,saveData:e.saveData}:null}async sendEvent(t){var e;if((e=this.config)!=null&&e.endpoint)try{await fetch(this.config.endpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)})}catch(s){console.error("Failed to send analytics event:",s)}}generateSessionId(){return`session_${Date.now()}_${Math.random().toString(36).substr(2,9)}`}getEvents(){return[...this.events]}getMetrics(){return{sessionId:this.sessionId,...this.getQoEMetrics(),eventCount:this.events.length}}destroy(){var t;(t=this.config)!=null&&t.enabled&&this.trackEvent("session_end",this.getSessionData()),this.events=[]}}class et{constructor(t,e){o(this,"container");o(this,"player");o(this,"controlsContainer");o(this,"progressContainer");o(this,"progressBar");o(this,"playButton");o(this,"skipBackwardButton");o(this,"skipForwardButton");o(this,"volumeButton");o(this,"fullscreenButton");o(this,"qualityButton");o(this,"subtitleButton");o(this,"speedButton");o(this,"settingsButton");o(this,"volumeSlider");o(this,"progressInput");o(this,"hideControlsTimeout",null);o(this,"stickyControls",!1);this.container=t,this.player=e,this.injectStyles(),this.createProgressBar(),this.controlsContainer=this.createControls(),this.container.appendChild(this.controlsContainer),this.playButton=this.controlsContainer.querySelector(".wontum-play-btn"),this.skipBackwardButton=this.controlsContainer.querySelector(".wontum-skip-backward-btn"),this.skipForwardButton=this.controlsContainer.querySelector(".wontum-skip-forward-btn"),this.volumeButton=this.controlsContainer.querySelector(".wontum-volume-btn"),this.fullscreenButton=this.controlsContainer.querySelector(".wontum-fullscreen-btn"),this.qualityButton=this.controlsContainer.querySelector(".wontum-quality-btn"),this.subtitleButton=this.controlsContainer.querySelector(".wontum-subtitle-btn"),this.speedButton=this.controlsContainer.querySelector(".wontum-speed-btn"),this.settingsButton=this.controlsContainer.querySelector(".wontum-settings-btn"),this.volumeSlider=this.controlsContainer.querySelector(".wontum-volume-slider"),this.progressInput=this.container.querySelector(".wontum-progress-input"),this.progressBar=this.container.querySelector(".wontum-progress-filled"),this.stickyControls=this.player.config.stickyControls||!1,this.stickyControls&&this.controlsContainer.classList.add("sticky"),this.setupEventListeners(),this.setupPlayerEventListeners()}injectStyles(){const t="wontum-player-styles";if(document.getElementById(t))return;const e=this.player.config.theme||{},s=e.primaryColor||"#3b82f6",r=e.accentColor||"#2563eb",i=e.fontFamily||"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",l=e.controlsBackground||"linear-gradient(to top, rgba(0,0,0,0.8), transparent)",u=e.buttonHoverBg||"rgba(255, 255, 255, 0.1)",g=e.progressHeight||"6px",b=e.borderRadius||"4px",f=document.createElement("style");f.id=t,f.textContent=`
+"use strict";var lt=Object.defineProperty;var ct=(l,t,e)=>t in l?lt(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var o=(l,t,e)=>ct(l,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("hls.js"),v=require("react");function ut(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const et=ut(v);class nt{constructor(t){o(this,"config");o(this,"sessionId");o(this,"events",[]);o(this,"sessionStartTime");o(this,"playbackStartTime",null);o(this,"totalPlayTime",0);o(this,"totalBufferTime",0);o(this,"bufferStartTime",null);o(this,"rebufferCount",0);o(this,"seekCount",0);var e;this.config=t,this.sessionId=(t==null?void 0:t.sessionId)||this.generateSessionId(),this.sessionStartTime=Date.now(),(e=this.config)!=null&&e.enabled&&this.trackEvent("session_start",this.getSessionData())}trackEvent(t,e={}){var r;if(!((r=this.config)!=null&&r.enabled))return;const s={eventType:t,timestamp:Date.now(),sessionId:this.sessionId,videoId:this.config.videoId,userId:this.config.userId,data:{...e,...this.getQoEMetrics()}};this.events.push(s),this.updateMetrics(t,e),this.config.endpoint&&this.sendEvent(s),process.env.NODE_ENV==="development"&&console.log("[Analytics]",t,s.data)}updateMetrics(t,e){switch(t){case"play":this.playbackStartTime=Date.now();break;case"pause":case"ended":this.playbackStartTime&&(this.totalPlayTime+=Date.now()-this.playbackStartTime,this.playbackStartTime=null);break;case"buffering_start":this.bufferStartTime=Date.now(),this.rebufferCount++;break;case"buffering_end":this.bufferStartTime&&(this.totalBufferTime+=Date.now()-this.bufferStartTime,this.bufferStartTime=null);break;case"seeked":this.seekCount++;break}}getQoEMetrics(){const t=Date.now()-this.sessionStartTime,e=this.totalPlayTime>0?this.totalBufferTime/this.totalPlayTime:0;return{sessionDuration:t,totalPlayTime:this.totalPlayTime,totalBufferTime:this.totalBufferTime,bufferingRatio:Math.round(e*1e3)/1e3,rebufferCount:this.rebufferCount,seekCount:this.seekCount}}getSessionData(){return{userAgent:navigator.userAgent,platform:navigator.platform,language:navigator.language,screenResolution:`${screen.width}x${screen.height}`,viewport:`${window.innerWidth}x${window.innerHeight}`,connection:this.getConnectionInfo()}}getConnectionInfo(){const t=navigator,e=t.connection||t.mozConnection||t.webkitConnection;return e?{effectiveType:e.effectiveType,downlink:e.downlink,rtt:e.rtt,saveData:e.saveData}:null}async sendEvent(t){var e;if((e=this.config)!=null&&e.endpoint)try{await fetch(this.config.endpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)})}catch(s){console.error("Failed to send analytics event:",s)}}generateSessionId(){return`session_${Date.now()}_${Math.random().toString(36).substr(2,9)}`}getEvents(){return[...this.events]}getMetrics(){return{sessionId:this.sessionId,...this.getQoEMetrics(),eventCount:this.events.length}}destroy(){var t;(t=this.config)!=null&&t.enabled&&this.trackEvent("session_end",this.getSessionData()),this.events=[]}}class st{constructor(t,e){o(this,"container");o(this,"player");o(this,"controlsContainer");o(this,"progressContainer");o(this,"progressBar");o(this,"playButton");o(this,"skipBackwardButton");o(this,"skipForwardButton");o(this,"volumeButton");o(this,"fullscreenButton");o(this,"qualityButton");o(this,"subtitleButton");o(this,"speedButton");o(this,"settingsButton");o(this,"volumeSlider");o(this,"progressInput");o(this,"hideControlsTimeout",null);o(this,"stickyControls",!1);this.container=t,this.player=e,this.injectStyles(),this.createProgressBar(),this.controlsContainer=this.createControls(),this.container.appendChild(this.controlsContainer),this.playButton=this.controlsContainer.querySelector(".wontum-play-btn"),this.skipBackwardButton=this.controlsContainer.querySelector(".wontum-skip-backward-btn"),this.skipForwardButton=this.controlsContainer.querySelector(".wontum-skip-forward-btn"),this.volumeButton=this.controlsContainer.querySelector(".wontum-volume-btn"),this.fullscreenButton=this.controlsContainer.querySelector(".wontum-fullscreen-btn"),this.qualityButton=this.controlsContainer.querySelector(".wontum-quality-btn"),this.subtitleButton=this.controlsContainer.querySelector(".wontum-subtitle-btn"),this.speedButton=this.controlsContainer.querySelector(".wontum-speed-btn"),this.settingsButton=this.controlsContainer.querySelector(".wontum-settings-btn"),this.volumeSlider=this.controlsContainer.querySelector(".wontum-volume-slider"),this.progressInput=this.container.querySelector(".wontum-progress-input"),this.progressBar=this.container.querySelector(".wontum-progress-filled"),this.stickyControls=this.player.config.stickyControls||!1,this.stickyControls&&this.controlsContainer.classList.add("sticky"),this.setupEventListeners(),this.setupPlayerEventListeners()}injectStyles(){const t="wontum-player-styles";if(document.getElementById(t))return;const e=this.player.config.theme||{},s=e.primaryColor||"#3b82f6",r=e.accentColor||"#2563eb",i=e.fontFamily||"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",c=e.controlsBackground||"linear-gradient(to top, rgba(0,0,0,0.8), transparent)",u=e.buttonHoverBg||"rgba(255, 255, 255, 0.1)",f=e.progressHeight||"6px",b=e.borderRadius||"4px",y=document.createElement("style");y.id=t,y.textContent=`
       .wontum-player-container {
         position: relative;
         background: #000;
@@ -6,9 +6,9 @@
         overflow: hidden;
         --primary-color: ${s};
         --accent-color: ${r};
-        --controls-bg: ${l};
+        --controls-bg: ${c};
         --button-hover: ${u};
-        --progress-height: ${g};
+        --progress-height: ${f};
         --border-radius: ${b};
       }
       
@@ -463,7 +463,7 @@
         transform: translateY(0) !important;
         pointer-events: all !important;
       }
-    `,document.head.appendChild(f),this.container.classList.add("wontum-player-container")}createProgressBar(){const t=document.createElement("div");t.className="wontum-progress-container",t.innerHTML=`
+    `,document.head.appendChild(y),this.container.classList.add("wontum-player-container")}createProgressBar(){const t=document.createElement("div");t.className="wontum-progress-container",t.innerHTML=`
       <div class="wontum-progress-track"></div>
       <div class="wontum-progress-filled"></div>
       <input type="range" class="wontum-progress-input" min="0" max="100" value="0" step="0.1">
@@ -535,18 +535,18 @@
       <div class="wontum-loading" style="display: none;">
         <div class="wontum-spinner"></div>
       </div>
-    `,t}setupEventListeners(){this.playButton.addEventListener("click",()=>{this.player.getState().playing?this.player.pause():this.player.play()}),this.skipBackwardButton.addEventListener("click",()=>{this.player.skipBackward(10)}),this.skipForwardButton.addEventListener("click",()=>{this.player.skipForward(10)}),this.progressInput.addEventListener("input",e=>{const s=e.target,r=parseFloat(s.value),i=this.player.getState(),l=r/100*i.duration;this.player.seek(l)}),this.volumeSlider.addEventListener("input",e=>{const s=e.target,r=parseFloat(s.value)/100;this.player.setVolume(r)}),this.volumeButton.addEventListener("click",()=>{this.player.getState().muted?this.player.unmute():this.player.mute()}),this.fullscreenButton.addEventListener("click",()=>{this.player.getState().fullscreen?this.player.exitFullscreen():this.player.enterFullscreen()}),this.qualityButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-quality-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-settings-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-subtitle-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-speed-menu"))==null||i.classList.remove("active")}),this.subtitleButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-subtitle-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-settings-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-quality-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-speed-menu"))==null||i.classList.remove("active"),this.updateSubtitleMenu()}),this.speedButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-speed-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-settings-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-quality-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-subtitle-menu"))==null||i.classList.remove("active"),this.updateSpeedMenu()}),this.settingsButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-settings-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-quality-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-subtitle-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-speed-menu"))==null||i.classList.remove("active"),this.updateSettingsMenu()}),this.player.getVideoElement().addEventListener("click",()=>{this.player.getState().playing?this.player.pause():this.player.play()}),this.container.addEventListener("mousemove",()=>{this.showControls(),this.resetHideControlsTimeout()}),this.container.addEventListener("mouseleave",()=>{this.hideControls()})}setupPlayerEventListeners(){this.player.on("play",()=>{this.playButton.innerHTML=this.getPauseIcon()}),this.player.on("pause",()=>{this.playButton.innerHTML=this.getPlayIcon()}),this.player.on("timeupdate",t=>{const{currentTime:e}=t.data,s=this.player.getState();if(s.duration>0){const i=e/s.duration*100;this.progressBar.style.width=`${i}%`,this.progressInput.value=i.toString()}const r=this.controlsContainer.querySelector(".wontum-current-time");r.textContent=this.formatTime(e)}),this.player.on("loadedmetadata",t=>{const{duration:e}=t.data,s=this.controlsContainer.querySelector(".wontum-duration");s.textContent=this.formatTime(e),t.data.qualities&&this.updateQualityMenu(t.data.qualities)}),this.player.on("volumechange",t=>{const{volume:e,muted:s}=t.data;this.volumeSlider.value=(e*100).toString(),this.volumeButton.innerHTML=s?this.getMutedIcon():this.getVolumeIcon()}),this.player.on("waiting",()=>{const t=this.controlsContainer.querySelector(".wontum-loading");t.style.display="block"}),this.player.on("canplay",()=>{const t=this.controlsContainer.querySelector(".wontum-loading");t.style.display="none"})}updateSubtitleMenu(){const t=this.controlsContainer.querySelector(".wontum-subtitle-menu"),e=this.player.getSubtitleTracks();if(e.length===0){t.innerHTML='<div class="wontum-subtitle-option">No subtitles available</div>';return}const s=e.findIndex(r=>r.mode==="showing");t.innerHTML=`
+    `,t}setupEventListeners(){this.playButton.addEventListener("click",()=>{this.player.getState().playing?this.player.pause():this.player.play()}),this.skipBackwardButton.addEventListener("click",()=>{this.player.skipBackward(10)}),this.skipForwardButton.addEventListener("click",()=>{this.player.skipForward(10)}),this.progressInput.addEventListener("input",e=>{const s=e.target,r=parseFloat(s.value),i=this.player.getState(),c=r/100*i.duration;this.player.seek(c)}),this.volumeSlider.addEventListener("input",e=>{const s=e.target,r=parseFloat(s.value)/100;this.player.setVolume(r)}),this.volumeButton.addEventListener("click",()=>{this.player.getState().muted?this.player.unmute():this.player.mute()}),this.fullscreenButton.addEventListener("click",()=>{this.player.getState().fullscreen?this.player.exitFullscreen():this.player.enterFullscreen()}),this.qualityButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-quality-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-settings-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-subtitle-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-speed-menu"))==null||i.classList.remove("active")}),this.subtitleButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-subtitle-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-settings-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-quality-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-speed-menu"))==null||i.classList.remove("active"),this.updateSubtitleMenu()}),this.speedButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-speed-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-settings-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-quality-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-subtitle-menu"))==null||i.classList.remove("active"),this.updateSpeedMenu()}),this.settingsButton.addEventListener("click",()=>{var s,r,i;this.controlsContainer.querySelector(".wontum-settings-menu").classList.toggle("active"),(s=this.controlsContainer.querySelector(".wontum-quality-menu"))==null||s.classList.remove("active"),(r=this.controlsContainer.querySelector(".wontum-subtitle-menu"))==null||r.classList.remove("active"),(i=this.controlsContainer.querySelector(".wontum-speed-menu"))==null||i.classList.remove("active"),this.updateSettingsMenu()}),this.player.getVideoElement().addEventListener("click",()=>{this.player.getState().playing?this.player.pause():this.player.play()}),this.container.addEventListener("mousemove",()=>{this.showControls(),this.resetHideControlsTimeout()}),this.container.addEventListener("mouseleave",()=>{this.hideControls()})}setupPlayerEventListeners(){this.player.on("play",()=>{this.playButton.innerHTML=this.getPauseIcon()}),this.player.on("pause",()=>{this.playButton.innerHTML=this.getPlayIcon()}),this.player.on("timeupdate",t=>{const{currentTime:e}=t.data,s=this.player.getState();if(s.duration>0){const i=e/s.duration*100;this.progressBar.style.width=`${i}%`,this.progressInput.value=i.toString()}const r=this.controlsContainer.querySelector(".wontum-current-time");r.textContent=this.formatTime(e)}),this.player.on("loadedmetadata",t=>{const{duration:e}=t.data,s=this.controlsContainer.querySelector(".wontum-duration");s.textContent=this.formatTime(e),t.data.qualities&&this.updateQualityMenu(t.data.qualities)}),this.player.on("volumechange",t=>{const{volume:e,muted:s}=t.data;this.volumeSlider.value=(e*100).toString(),this.volumeButton.innerHTML=s?this.getMutedIcon():this.getVolumeIcon()}),this.player.on("waiting",()=>{const t=this.controlsContainer.querySelector(".wontum-loading");t.style.display="block"}),this.player.on("canplay",()=>{const t=this.controlsContainer.querySelector(".wontum-loading");t.style.display="none"})}updateSubtitleMenu(){const t=this.controlsContainer.querySelector(".wontum-subtitle-menu"),e=this.player.getSubtitleTracks();if(e.length===0){t.innerHTML='<div class="wontum-subtitle-option">No subtitles available</div>';return}const s=e.findIndex(r=>r.mode==="showing");t.innerHTML=`
       <div class="wontum-subtitle-option ${s===-1?"active":""}" data-track="-1">Off</div>
       ${e.map((r,i)=>`
         <div class="wontum-subtitle-option ${i===s?"active":""}" data-track="${i}">
           ${r.label||r.language||`Track ${i+1}`}
         </div>
       `).join("")}
-    `,t.querySelectorAll(".wontum-subtitle-option").forEach(r=>{r.addEventListener("click",i=>{const l=i.target,u=parseInt(l.dataset.track||"-1");u===-1?this.player.disableSubtitles():this.player.enableSubtitles(u),t.querySelectorAll(".wontum-subtitle-option").forEach(g=>g.classList.remove("active")),l.classList.add("active"),t.classList.remove("active")})})}updateSpeedMenu(){const t=this.controlsContainer.querySelector(".wontum-speed-menu"),s=this.player.getState().playbackRate||1,r=[.25,.5,.75,1,1.25,1.5,1.75,2];t.innerHTML=r.map(i=>`
+    `,t.querySelectorAll(".wontum-subtitle-option").forEach(r=>{r.addEventListener("click",i=>{const c=i.target,u=parseInt(c.dataset.track||"-1");u===-1?this.player.disableSubtitles():this.player.enableSubtitles(u),t.querySelectorAll(".wontum-subtitle-option").forEach(f=>f.classList.remove("active")),c.classList.add("active"),t.classList.remove("active")})})}updateSpeedMenu(){const t=this.controlsContainer.querySelector(".wontum-speed-menu"),s=this.player.getState().playbackRate||1,r=[.25,.5,.75,1,1.25,1.5,1.75,2];t.innerHTML=r.map(i=>`
         <div class="wontum-speed-option ${s===i?"active":""}" data-speed="${i}">
           ${i===1?"Normal":i+"x"}
         </div>
-      `).join(""),t.querySelectorAll(".wontum-speed-option").forEach(i=>{i.addEventListener("click",l=>{const u=l.target,g=parseFloat(u.dataset.speed||"1");this.player.setPlaybackRate(g),t.querySelectorAll(".wontum-speed-option").forEach(b=>b.classList.remove("active")),u.classList.add("active"),t.classList.remove("active")})})}updateSettingsMenu(){const t=this.controlsContainer.querySelector(".wontum-settings-menu");t.innerHTML=`
+      `).join(""),t.querySelectorAll(".wontum-speed-option").forEach(i=>{i.addEventListener("click",c=>{const u=c.target,f=parseFloat(u.dataset.speed||"1");this.player.setPlaybackRate(f),t.querySelectorAll(".wontum-speed-option").forEach(b=>b.classList.remove("active")),u.classList.add("active"),t.classList.remove("active")})})}updateSettingsMenu(){const t=this.controlsContainer.querySelector(".wontum-settings-menu");t.innerHTML=`
       <div class="wontum-settings-option" data-setting="sticky-controls">
         <span>Sticky Controls</span>
         <div class="wontum-toggle-switch ${this.stickyControls?"active":""}"></div>
@@ -556,7 +556,7 @@
       ${t.map((s,r)=>`
         <div class="wontum-quality-option" data-quality="${r}">${s.name}</div>
       `).join("")}
-    `,e.querySelectorAll(".wontum-quality-option").forEach(s=>{s.addEventListener("click",r=>{const i=r.target,l=parseInt(i.dataset.quality||"-1");this.player.setQuality(l),e.querySelectorAll(".wontum-quality-option").forEach(u=>u.classList.remove("active")),i.classList.add("active"),e.classList.remove("active")})})}showControls(){this.controlsContainer.classList.remove("hidden"),this.progressContainer.classList.remove("hidden")}hideControls(){if(this.stickyControls)return;this.player.getState().playing&&(this.controlsContainer.classList.add("hidden"),this.progressContainer.classList.add("hidden"))}resetHideControlsTimeout(){this.stickyControls||(this.hideControlsTimeout&&clearTimeout(this.hideControlsTimeout),this.hideControlsTimeout=window.setTimeout(()=>{this.hideControls()},1e4))}formatTime(t){if(isNaN(t))return"0:00";const e=Math.floor(t/60),s=Math.floor(t%60);return`${e}:${s.toString().padStart(2,"0")}`}getPlayIcon(){return'<svg viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>'}getPauseIcon(){return'<svg viewBox="0 0 24 24"><path fill="white" d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>'}getVolumeIcon(){return'<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>'}getMutedIcon(){return'<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'}getFullscreenIcon(){return'<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>'}getQualityIcon(){return'<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/></svg>'}getSkipBackwardIcon(){return`<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    `,e.querySelectorAll(".wontum-quality-option").forEach(s=>{s.addEventListener("click",r=>{const i=r.target,c=parseInt(i.dataset.quality||"-1");this.player.setQuality(c),e.querySelectorAll(".wontum-quality-option").forEach(u=>u.classList.remove("active")),i.classList.add("active"),e.classList.remove("active")})})}showControls(){this.controlsContainer.classList.remove("hidden"),this.progressContainer.classList.remove("hidden")}hideControls(){if(this.stickyControls)return;this.player.getState().playing&&(this.controlsContainer.classList.add("hidden"),this.progressContainer.classList.add("hidden"))}resetHideControlsTimeout(){this.stickyControls||(this.hideControlsTimeout&&clearTimeout(this.hideControlsTimeout),this.hideControlsTimeout=window.setTimeout(()=>{this.hideControls()},1e4))}formatTime(t){if(isNaN(t))return"0:00";const e=Math.floor(t/60),s=Math.floor(t%60);return`${e}:${s.toString().padStart(2,"0")}`}getPlayIcon(){return'<svg viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>'}getPauseIcon(){return'<svg viewBox="0 0 24 24"><path fill="white" d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>'}getVolumeIcon(){return'<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>'}getMutedIcon(){return'<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'}getFullscreenIcon(){return'<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>'}getQualityIcon(){return'<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/></svg>'}getSkipBackwardIcon(){return`<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<circle cx="30" cy="30" r="28" stroke="white" stroke-width="2"/>
 			<!-- Circular arrow backward -->
 			<path d="M30 12 A18 18 0 1 0 30 48" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
@@ -568,7 +568,7 @@
 			<path d="M30 12 A18 18 0 1 1 30 48" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
 			<path d="M35 12 L30 12 L30 17" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
 			<text x="30" y="35" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">10</text>
-		</svg>`}getSubtitleIcon(){return'<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/></svg>'}getSpeedIcon(){return'<svg viewBox="0 0 24 24"><path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/></svg>'}getSettingsIcon(){return'<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>'}destroy(){this.hideControlsTimeout&&clearTimeout(this.hideControlsTimeout),this.controlsContainer.remove()}}class nt{constructor(t){o(this,"config");o(this,"urlCache",new Map);o(this,"signedUrls",new Set);this.config=t}async processUrl(t){return this.isCloudFrontUrl(t)?this.signCloudFrontUrl(t):this.isS3Url(t)?this.getPresignedUrl(t):t}isCloudFrontUrl(t){var e;if(!((e=this.config)!=null&&e.cloudFrontDomains)||this.config.cloudFrontDomains.length===0)return!1;try{const s=new URL(t);return this.config.cloudFrontDomains.some(r=>s.hostname.includes(r))}catch{return!1}}isS3Url(t){return t.includes(".s3.")||t.includes("s3.amazonaws.com")||t.startsWith("s3://")}async signCloudFrontUrl(t){var e;if(this.signedUrls.has(t))return t;if((e=this.config)!=null&&e.signUrl)try{const s=await this.config.signUrl(t);return this.signedUrls.add(t),s}catch(s){throw console.error("Failed to sign CloudFront URL:",s),new Error("Failed to sign CloudFront URL")}return console.warn("No signUrl function provided. CloudFront cookies may not be set."),t}extractS3Key(t){if(t.startsWith("s3://"))return t.replace("s3://","").split("/").slice(1).join("/");const e=t.match(/s3[.-]([^.]+)\.amazonaws\.com\/(.+)/);if(e)return e[2];const s=t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);return s?s[2]:t}async getPresignedUrl(t){var r;const e=this.extractS3Key(t),s=this.urlCache.get(e);if(s&&s.expiresAt>Date.now())return s.url;if((r=this.config)!=null&&r.getPresignedUrl)try{const i=await this.config.getPresignedUrl(e);return this.urlCache.set(e,{url:i,expiresAt:Date.now()+50*60*1e3}),i}catch(i){throw console.error("Failed to generate presigned URL:",i),new Error("Failed to generate presigned URL for S3 object")}return console.warn("No getPresignedUrl function provided. Using direct S3 URL (requires public bucket)"),t}static constructS3Url(t,e,s="us-east-1"){return`https://${t}.s3.${s}.amazonaws.com/${e}`}static parseS3Uri(t){if(!t.startsWith("s3://"))return null;const e=t.replace("s3://","").split("/"),s=e[0],r=e.slice(1).join("/");return{bucket:s,key:r}}clearCache(){this.urlCache.clear(),this.signedUrls.clear()}}class V{constructor(t){o(this,"container");o(this,"videoElement");o(this,"hls",null);o(this,"config");o(this,"eventListeners",new Map);o(this,"analytics");o(this,"s3Handler");o(this,"uiController");o(this,"state",{playing:!1,paused:!0,ended:!1,buffering:!1,currentTime:0,duration:0,volume:1,muted:!1,playbackRate:1,quality:"auto",availableQualities:[],fullscreen:!1});if(this.config=t,this.container=typeof t.container=="string"?document.querySelector(t.container):t.container,!this.container)throw new Error("Container element not found");this.analytics=new tt(t.analytics),this.s3Handler=new nt(t.s3Config),this.videoElement=this.createVideoElement(),this.container.appendChild(this.videoElement),this.uiController=new et(this.container,this),this.setupVideoListeners(),this.loadSource(t.src),t.autoplay&&(this.videoElement.autoplay=!0),t.muted&&this.mute(),t.poster&&(this.videoElement.poster=t.poster),t.preload&&(this.videoElement.preload=t.preload),t.subtitles&&this.addSubtitleTracks(t.subtitles)}addSubtitleTracks(t){t.forEach(e=>{const s=document.createElement("track");s.kind="subtitles",s.label=e.label,s.src=e.src,s.srclang=e.srclang,e.default&&(s.default=!0),this.videoElement.appendChild(s)})}createVideoElement(){const t=document.createElement("video");return t.className="wontum-player-video",t.style.width="100%",t.style.height="100%",t.playsInline=!0,t}setupVideoListeners(){this.videoElement.addEventListener("play",()=>{this.state.playing=!0,this.state.paused=!1,this.emit("play"),this.analytics.trackEvent("play",this.getAnalyticsData())}),this.videoElement.addEventListener("pause",()=>{this.state.playing=!1,this.state.paused=!0,this.emit("pause"),this.analytics.trackEvent("pause",this.getAnalyticsData())}),this.videoElement.addEventListener("ended",()=>{this.state.ended=!0,this.state.playing=!1,this.emit("ended"),this.analytics.trackEvent("ended",this.getAnalyticsData())}),this.videoElement.addEventListener("timeupdate",()=>{this.state.currentTime=this.videoElement.currentTime,this.emit("timeupdate",{currentTime:this.state.currentTime})}),this.videoElement.addEventListener("loadedmetadata",()=>{this.state.duration=this.videoElement.duration,this.emit("loadedmetadata",{duration:this.state.duration}),this.analytics.trackEvent("loadedmetadata",this.getAnalyticsData())}),this.videoElement.addEventListener("volumechange",()=>{this.state.volume=this.videoElement.volume,this.state.muted=this.videoElement.muted,this.emit("volumechange",{volume:this.state.volume,muted:this.state.muted})}),this.videoElement.addEventListener("ratechange",()=>{this.state.playbackRate=this.videoElement.playbackRate,this.emit("ratechange",{playbackRate:this.state.playbackRate})}),this.videoElement.addEventListener("waiting",()=>{this.state.buffering=!0,this.emit("waiting"),this.analytics.trackEvent("buffering_start",this.getAnalyticsData())}),this.videoElement.addEventListener("canplay",()=>{this.state.buffering=!1,this.emit("canplay"),this.analytics.trackEvent("buffering_end",this.getAnalyticsData())}),this.videoElement.addEventListener("seeking",()=>{this.emit("seeking")}),this.videoElement.addEventListener("seeked",()=>{this.emit("seeked",{currentTime:this.state.currentTime}),this.analytics.trackEvent("seeked",this.getAnalyticsData())}),this.videoElement.addEventListener("error",t=>{const e=this.videoElement.error;this.emit("error",{error:e}),this.analytics.trackEvent("error",{...this.getAnalyticsData(),error:e==null?void 0:e.message})}),this.videoElement.addEventListener("loadstart",()=>{this.emit("loadstart")}),this.videoElement.addEventListener("loadeddata",()=>{this.emit("loadeddata")}),this.videoElement.addEventListener("canplaythrough",()=>{this.emit("canplaythrough")}),this.videoElement.addEventListener("playing",()=>{this.state.playing=!0,this.state.buffering=!1,this.emit("playing")}),this.videoElement.addEventListener("durationchange",()=>{this.state.duration=this.videoElement.duration,this.emit("durationchange",{duration:this.state.duration})}),this.videoElement.addEventListener("progress",()=>{this.emit("progress",{buffered:this.videoElement.buffered})}),this.videoElement.addEventListener("stalled",()=>{this.emit("stalled")}),this.videoElement.addEventListener("suspend",()=>{this.emit("suspend")}),this.videoElement.addEventListener("abort",()=>{this.emit("abort")}),this.videoElement.addEventListener("emptied",()=>{this.emit("emptied")}),this.videoElement.addEventListener("resize",()=>{this.emit("resize",{videoWidth:this.videoElement.videoWidth,videoHeight:this.videoElement.videoHeight})})}async loadSource(t){try{const e=await this.s3Handler.processUrl(t);if(k.isSupported())this.hls=new k(this.config.hlsConfig),this.hls.loadSource(e),this.hls.attachMedia(this.videoElement),this.hls.on(k.Events.MANIFEST_PARSED,(s,r)=>{const i=this.extractQualities(r.levels);this.state.availableQualities=i.map(l=>l.name),this.emit("loadedmetadata",{qualities:i})}),this.hls.on(k.Events.LEVEL_SWITCHED,(s,r)=>{var l;const i=(l=this.hls)==null?void 0:l.levels[r.level];i&&(this.state.quality=`${i.height}p`,this.emit("qualitychange",{quality:this.state.quality}))}),this.hls.on(k.Events.ERROR,(s,r)=>{r.fatal&&this.handleHlsError(r)});else if(this.videoElement.canPlayType("application/vnd.apple.mpegurl"))this.videoElement.src=e;else throw new Error("HLS is not supported in this browser")}catch(e){console.error("Failed to load video source:",e),this.emit("error",{error:e})}}extractQualities(t){return t.map(e=>({height:e.height,width:e.width,bitrate:e.bitrate,name:`${e.height}p`}))}handleHlsError(t){var e,s;switch(t.type){case k.ErrorTypes.NETWORK_ERROR:console.error("Network error occurred"),(e=this.hls)==null||e.startLoad();break;case k.ErrorTypes.MEDIA_ERROR:console.error("Media error occurred"),(s=this.hls)==null||s.recoverMediaError();break;default:console.error("Fatal error occurred:",t),this.destroy();break}}getAnalyticsData(){return{currentTime:this.state.currentTime,duration:this.state.duration,quality:this.state.quality,playbackRate:this.state.playbackRate,volume:this.state.volume,muted:this.state.muted}}play(){return this.videoElement.play()}pause(){this.videoElement.pause()}seek(t){this.videoElement.currentTime=t}skipForward(t=10){const e=Math.min(this.state.currentTime+t,this.state.duration);this.seek(e)}skipBackward(t=10){const e=Math.max(this.state.currentTime-t,0);this.seek(e)}setVolume(t){this.videoElement.volume=Math.max(0,Math.min(1,t))}mute(){this.videoElement.muted=!0}unmute(){this.videoElement.muted=!1}setPlaybackRate(t){this.videoElement.playbackRate=t}setQuality(t){this.hls&&(this.hls.currentLevel=t)}enterFullscreen(){this.container.requestFullscreen&&(this.container.requestFullscreen(),this.state.fullscreen=!0,this.emit("fullscreenchange",{fullscreen:!0}))}exitFullscreen(){document.exitFullscreen&&(document.exitFullscreen(),this.state.fullscreen=!1,this.emit("fullscreenchange",{fullscreen:!1}))}getState(){return{...this.state}}getVideoElement(){return this.videoElement}enableSubtitles(t){const e=this.videoElement.textTracks;for(let s=0;s<e.length;s++)e[s].mode=s===t?"showing":"hidden"}disableSubtitles(){const t=this.videoElement.textTracks;for(let e=0;e<t.length;e++)t[e].mode="hidden"}toggleSubtitles(){const t=this.videoElement.textTracks;return Array.from(t).some(s=>s.mode==="showing")?(this.disableSubtitles(),!1):t.length>0?(this.enableSubtitles(0),!0):!1}getSubtitleTracks(){return Array.from(this.videoElement.textTracks)}areSubtitlesEnabled(){const t=this.videoElement.textTracks;return Array.from(t).some(e=>e.mode==="showing")}on(t,e){this.eventListeners.has(t)||this.eventListeners.set(t,new Set),this.eventListeners.get(t).add(e)}off(t,e){var s;(s=this.eventListeners.get(t))==null||s.delete(e)}emit(t,e){var r;const s={type:t,data:e,timestamp:Date.now()};(r=this.eventListeners.get(t))==null||r.forEach(i=>{i(s)})}destroy(){this.hls&&(this.hls.destroy(),this.hls=null),this.uiController.destroy(),this.videoElement.remove(),this.eventListeners.clear(),this.analytics.destroy()}}var N={exports:{}},P={};/**
+		</svg>`}getSubtitleIcon(){return'<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"/></svg>'}getSpeedIcon(){return'<svg viewBox="0 0 24 24"><path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/></svg>'}getSettingsIcon(){return'<svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>'}destroy(){this.hideControlsTimeout&&clearTimeout(this.hideControlsTimeout),this.controlsContainer.remove()}}class rt{constructor(t){o(this,"config");o(this,"urlCache",new Map);o(this,"signedUrls",new Set);this.config=t}async processUrl(t){return this.isCloudFrontUrl(t)?this.signCloudFrontUrl(t):this.isS3Url(t)?this.getPresignedUrl(t):t}isCloudFrontUrl(t){var e;if(!((e=this.config)!=null&&e.cloudFrontDomains)||this.config.cloudFrontDomains.length===0)return!1;try{const s=new URL(t);return this.config.cloudFrontDomains.some(r=>s.hostname.includes(r))}catch{return!1}}isS3Url(t){return t.includes(".s3.")||t.includes("s3.amazonaws.com")||t.startsWith("s3://")}async signCloudFrontUrl(t){var e;if(this.signedUrls.has(t))return t;if((e=this.config)!=null&&e.signUrl)try{const s=await this.config.signUrl(t);return this.signedUrls.add(t),s}catch(s){throw console.error("Failed to sign CloudFront URL:",s),new Error("Failed to sign CloudFront URL")}return console.warn("No signUrl function provided. CloudFront cookies may not be set."),t}extractS3Key(t){if(t.startsWith("s3://"))return t.replace("s3://","").split("/").slice(1).join("/");const e=t.match(/s3[.-]([^.]+)\.amazonaws\.com\/(.+)/);if(e)return e[2];const s=t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);return s?s[2]:t}async getPresignedUrl(t){var r;const e=this.extractS3Key(t),s=this.urlCache.get(e);if(s&&s.expiresAt>Date.now())return s.url;if((r=this.config)!=null&&r.getPresignedUrl)try{const i=await this.config.getPresignedUrl(e);return this.urlCache.set(e,{url:i,expiresAt:Date.now()+50*60*1e3}),i}catch(i){throw console.error("Failed to generate presigned URL:",i),new Error("Failed to generate presigned URL for S3 object")}return console.warn("No getPresignedUrl function provided. Using direct S3 URL (requires public bucket)"),t}static constructS3Url(t,e,s="us-east-1"){return`https://${t}.s3.${s}.amazonaws.com/${e}`}static parseS3Uri(t){if(!t.startsWith("s3://"))return null;const e=t.replace("s3://","").split("/"),s=e[0],r=e.slice(1).join("/");return{bucket:s,key:r}}clearCache(){this.urlCache.clear(),this.signedUrls.clear()}}class Y{constructor(t){o(this,"container");o(this,"videoElement");o(this,"hls",null);o(this,"config");o(this,"eventListeners",new Map);o(this,"analytics");o(this,"s3Handler");o(this,"uiController");o(this,"state",{playing:!1,paused:!0,ended:!1,buffering:!1,currentTime:0,duration:0,volume:1,muted:!1,playbackRate:1,quality:"auto",availableQualities:[],fullscreen:!1});if(this.config=t,this.container=typeof t.container=="string"?document.querySelector(t.container):t.container,!this.container)throw new Error("Container element not found");this.analytics=new nt(t.analytics),this.s3Handler=new rt(t.s3Config),this.videoElement=this.createVideoElement(),this.container.appendChild(this.videoElement),this.uiController=new st(this.container,this),this.setupVideoListeners(),this.loadSource(t.src),t.autoplay&&(this.videoElement.autoplay=!0),t.muted&&this.mute(),t.poster&&(this.videoElement.poster=t.poster),t.preload&&(this.videoElement.preload=t.preload),t.subtitles&&this.addSubtitleTracks(t.subtitles)}addSubtitleTracks(t){t.forEach(e=>{const s=document.createElement("track");s.kind="subtitles",s.label=e.label,s.src=e.src,s.srclang=e.srclang,e.default&&(s.default=!0),this.videoElement.appendChild(s)})}createVideoElement(){const t=document.createElement("video");return t.className="wontum-player-video",t.style.width="100%",t.style.height="100%",t.playsInline=!0,t}setupVideoListeners(){this.videoElement.addEventListener("play",()=>{this.state.playing=!0,this.state.paused=!1,this.emit("play"),this.analytics.trackEvent("play",this.getAnalyticsData())}),this.videoElement.addEventListener("pause",()=>{this.state.playing=!1,this.state.paused=!0,this.emit("pause"),this.analytics.trackEvent("pause",this.getAnalyticsData())}),this.videoElement.addEventListener("ended",()=>{this.state.ended=!0,this.state.playing=!1,this.emit("ended"),this.analytics.trackEvent("ended",this.getAnalyticsData())}),this.videoElement.addEventListener("timeupdate",()=>{this.state.currentTime=this.videoElement.currentTime,this.emit("timeupdate",{currentTime:this.state.currentTime})}),this.videoElement.addEventListener("loadedmetadata",()=>{this.state.duration=this.videoElement.duration,this.emit("loadedmetadata",{duration:this.state.duration}),this.analytics.trackEvent("loadedmetadata",this.getAnalyticsData())}),this.videoElement.addEventListener("volumechange",()=>{this.state.volume=this.videoElement.volume,this.state.muted=this.videoElement.muted,this.emit("volumechange",{volume:this.state.volume,muted:this.state.muted})}),this.videoElement.addEventListener("ratechange",()=>{this.state.playbackRate=this.videoElement.playbackRate,this.emit("ratechange",{playbackRate:this.state.playbackRate})}),this.videoElement.addEventListener("waiting",()=>{this.state.buffering=!0,this.emit("waiting"),this.analytics.trackEvent("buffering_start",this.getAnalyticsData())}),this.videoElement.addEventListener("canplay",()=>{this.state.buffering=!1,this.emit("canplay"),this.analytics.trackEvent("buffering_end",this.getAnalyticsData())}),this.videoElement.addEventListener("seeking",()=>{this.emit("seeking")}),this.videoElement.addEventListener("seeked",()=>{this.emit("seeked",{currentTime:this.state.currentTime}),this.analytics.trackEvent("seeked",this.getAnalyticsData())}),this.videoElement.addEventListener("error",t=>{const e=this.videoElement.error;this.emit("error",{error:e}),this.analytics.trackEvent("error",{...this.getAnalyticsData(),error:e==null?void 0:e.message})}),this.videoElement.addEventListener("loadstart",()=>{this.emit("loadstart")}),this.videoElement.addEventListener("loadeddata",()=>{this.emit("loadeddata")}),this.videoElement.addEventListener("canplaythrough",()=>{this.emit("canplaythrough")}),this.videoElement.addEventListener("playing",()=>{this.state.playing=!0,this.state.buffering=!1,this.emit("playing")}),this.videoElement.addEventListener("durationchange",()=>{this.state.duration=this.videoElement.duration,this.emit("durationchange",{duration:this.state.duration})}),this.videoElement.addEventListener("progress",()=>{this.emit("progress",{buffered:this.videoElement.buffered})}),this.videoElement.addEventListener("stalled",()=>{this.emit("stalled")}),this.videoElement.addEventListener("suspend",()=>{this.emit("suspend")}),this.videoElement.addEventListener("abort",()=>{this.emit("abort")}),this.videoElement.addEventListener("emptied",()=>{this.emit("emptied")}),this.videoElement.addEventListener("resize",()=>{this.emit("resize",{videoWidth:this.videoElement.videoWidth,videoHeight:this.videoElement.videoHeight})})}async loadSource(t){try{const e=await this.s3Handler.processUrl(t);if(E.isSupported())this.hls=new E(this.config.hlsConfig),this.hls.loadSource(e),this.hls.attachMedia(this.videoElement),this.hls.on(E.Events.MANIFEST_PARSED,(s,r)=>{const i=this.extractQualities(r.levels);this.state.availableQualities=i.map(c=>c.name),this.emit("loadedmetadata",{qualities:i})}),this.hls.on(E.Events.LEVEL_SWITCHED,(s,r)=>{var c;const i=(c=this.hls)==null?void 0:c.levels[r.level];i&&(this.state.quality=`${i.height}p`,this.emit("qualitychange",{quality:this.state.quality}))}),this.hls.on(E.Events.ERROR,(s,r)=>{r.fatal&&this.handleHlsError(r)});else if(this.videoElement.canPlayType("application/vnd.apple.mpegurl"))this.videoElement.src=e;else throw new Error("HLS is not supported in this browser")}catch(e){console.error("Failed to load video source:",e),this.emit("error",{error:e})}}extractQualities(t){return t.map(e=>({height:e.height,width:e.width,bitrate:e.bitrate,name:`${e.height}p`}))}handleHlsError(t){var e,s;switch(t.type){case E.ErrorTypes.NETWORK_ERROR:console.error("Network error occurred"),(e=this.hls)==null||e.startLoad();break;case E.ErrorTypes.MEDIA_ERROR:console.error("Media error occurred"),(s=this.hls)==null||s.recoverMediaError();break;default:console.error("Fatal error occurred:",t),this.destroy();break}}getAnalyticsData(){return{currentTime:this.state.currentTime,duration:this.state.duration,quality:this.state.quality,playbackRate:this.state.playbackRate,volume:this.state.volume,muted:this.state.muted}}play(){return this.videoElement.play()}pause(){this.videoElement.pause()}seek(t){this.videoElement.currentTime=t}skipForward(t=10){const e=Math.min(this.state.currentTime+t,this.state.duration);this.seek(e)}skipBackward(t=10){const e=Math.max(this.state.currentTime-t,0);this.seek(e)}setVolume(t){this.videoElement.volume=Math.max(0,Math.min(1,t))}mute(){this.videoElement.muted=!0}unmute(){this.videoElement.muted=!1}setPlaybackRate(t){this.videoElement.playbackRate=t}setQuality(t){this.hls&&(this.hls.currentLevel=t)}enterFullscreen(){this.container.requestFullscreen&&(this.container.requestFullscreen(),this.state.fullscreen=!0,this.emit("fullscreenchange",{fullscreen:!0}))}exitFullscreen(){document.exitFullscreen&&(document.exitFullscreen(),this.state.fullscreen=!1,this.emit("fullscreenchange",{fullscreen:!1}))}getState(){return{...this.state}}getVideoElement(){return this.videoElement}enableSubtitles(t){const e=this.videoElement.textTracks;for(let s=0;s<e.length;s++)e[s].mode=s===t?"showing":"hidden"}disableSubtitles(){const t=this.videoElement.textTracks;for(let e=0;e<t.length;e++)t[e].mode="hidden"}toggleSubtitles(){const t=this.videoElement.textTracks;return Array.from(t).some(s=>s.mode==="showing")?(this.disableSubtitles(),!1):t.length>0?(this.enableSubtitles(0),!0):!1}getSubtitleTracks(){return Array.from(this.videoElement.textTracks)}areSubtitlesEnabled(){const t=this.videoElement.textTracks;return Array.from(t).some(e=>e.mode==="showing")}on(t,e){this.eventListeners.has(t)||this.eventListeners.set(t,new Set),this.eventListeners.get(t).add(e)}off(t,e){var s;(s=this.eventListeners.get(t))==null||s.delete(e)}emit(t,e){var r;const s={type:t,data:e,timestamp:Date.now()};(r=this.eventListeners.get(t))==null||r.forEach(i=>{i(s)})}destroy(){this.hls&&(this.hls.destroy(),this.hls=null),this.uiController.destroy(),this.videoElement.remove(),this.eventListeners.clear(),this.analytics.destroy()}}var W={exports:{}},q={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -576,7 +576,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Z;function ct(){if(Z)return P;Z=1;var c=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function e(s,r,i){var l=null;if(i!==void 0&&(l=""+i),r.key!==void 0&&(l=""+r.key),"key"in r){i={};for(var u in r)u!=="key"&&(i[u]=r[u])}else i=r;return r=i.ref,{$$typeof:c,type:s,key:l,ref:r!==void 0?r:null,props:i}}return P.Fragment=t,P.jsx=e,P.jsxs=e,P}var A={};/**
+ */var K;function dt(){if(K)return q;K=1;var l=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function e(s,r,i){var c=null;if(i!==void 0&&(c=""+i),r.key!==void 0&&(c=""+r.key),"key"in r){i={};for(var u in r)u!=="key"&&(i[u]=r[u])}else i=r;return r=i.ref,{$$typeof:l,type:s,key:c,ref:r!==void 0?r:null,props:i}}return q.Fragment=t,q.jsx=e,q.jsxs=e,q}var P={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -584,9 +584,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var K;function ut(){return K||(K=1,process.env.NODE_ENV!=="production"&&function(){function c(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===B?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case E:return"Fragment";case F:return"Profiler";case I:return"StrictMode";case q:return"Suspense";case _:return"SuspenseList";case y:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case M:return"Portal";case L:return n.displayName||"Context";case O:return(n._context.displayName||"Context")+".Consumer";case R:var a=n.render;return n=n.displayName,n||(n=a.displayName||a.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case j:return a=n.displayName||null,a!==null?a:c(n.type)||"Memo";case p:a=n._payload,n=n._init;try{return c(n(a))}catch{}}return null}function t(n){return""+n}function e(n){try{t(n);var a=!1}catch{a=!0}if(a){a=console;var d=a.error,h=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return d.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",h),t(n)}}function s(n){if(n===E)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===p)return"<...>";try{var a=c(n);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function r(){var n=z.A;return n===null?null:n.getOwner()}function i(){return Error("react-stack-top-frame")}function l(n){if(W.call(n,"key")){var a=Object.getOwnPropertyDescriptor(n,"key").get;if(a&&a.isReactWarning)return!1}return n.key!==void 0}function u(n,a){function d(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}d.isReactWarning=!0,Object.defineProperty(n,"key",{get:d,configurable:!0})}function g(){var n=c(this.type);return Q[n]||(Q[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function b(n,a,d,h,$,D){var m=d.ref;return n={$$typeof:T,type:n,key:a,props:d,_owner:h},(m!==void 0?m:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:g}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:$}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function f(n,a,d,h,$,D){var m=a.children;if(m!==void 0)if(h)if(it(m)){for(h=0;h<m.length;h++)S(m[h]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else S(m);if(W.call(a,"key")){m=c(n);var x=Object.keys(a).filter(function(ot){return ot!=="key"});h=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",G[m+h]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var tt;function ht(){return tt||(tt=1,process.env.NODE_ENV!=="production"&&function(){function l(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===z?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case x:return"Fragment";case $:return"Profiler";case B:return"StrictMode";case H:return"Suspense";case N:return"SuspenseList";case R:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case I:return"Portal";case j:return n.displayName||"Context";case O:return(n._context.displayName||"Context")+".Consumer";case F:var a=n.render;return n=n.displayName,n||(n=a.displayName||a.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case L:return a=n.displayName||null,a!==null?a:l(n.type)||"Memo";case k:a=n._payload,n=n._init;try{return l(n(a))}catch{}}return null}function t(n){return""+n}function e(n){try{t(n);var a=!1}catch{a=!0}if(a){a=console;var d=a.error,h=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return d.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",h),t(n)}}function s(n){if(n===x)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===k)return"<...>";try{var a=l(n);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function r(){var n=_.A;return n===null?null:n.getOwner()}function i(){return Error("react-stack-top-frame")}function c(n){if(p.call(n,"key")){var a=Object.getOwnPropertyDescriptor(n,"key").get;if(a&&a.isReactWarning)return!1}return n.key!==void 0}function u(n,a){function d(){Q||(Q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}d.isReactWarning=!0,Object.defineProperty(n,"key",{get:d,configurable:!0})}function f(){var n=l(this.type);return J[n]||(J[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function b(n,a,d,h,D,U){var m=d.ref;return n={$$typeof:T,type:n,key:a,props:d,_owner:h},(m!==void 0?m:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:f}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function y(n,a,d,h,D,U){var m=a.children;if(m!==void 0)if(h)if(g(m)){for(h=0;h<m.length;h++)A(m[h]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(m);if(p.call(a,"key")){m=l(n);var C=Object.keys(a).filter(function(at){return at!=="key"});h=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",Z[m+h]||(C=0<C.length?"{"+C.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,h,m,x,m),G[m+h]=!0)}if(m=null,d!==void 0&&(e(d),m=""+d),l(a)&&(e(a.key),m=""+a.key),"key"in a){d={};for(var U in a)U!=="key"&&(d[U]=a[U])}else d=a;return m&&u(d,typeof n=="function"?n.displayName||n.name||"Unknown":n),b(n,m,d,r(),$,D)}function S(n){C(n)?n._store&&(n._store.validated=1):typeof n=="object"&&n!==null&&n.$$typeof===p&&(n._payload.status==="fulfilled"?C(n._payload.value)&&n._payload.value._store&&(n._payload.value._store.validated=1):n._store&&(n._store.validated=1))}function C(n){return typeof n=="object"&&n!==null&&n.$$typeof===T}var w=v,T=Symbol.for("react.transitional.element"),M=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),I=Symbol.for("react.strict_mode"),F=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),L=Symbol.for("react.context"),R=Symbol.for("react.forward_ref"),q=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),y=Symbol.for("react.activity"),B=Symbol.for("react.client.reference"),z=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,it=Array.isArray,H=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(n){return n()}};var Y,Q={},J=w.react_stack_bottom_frame.bind(w,i)(),X=H(s(i)),G={};A.Fragment=E,A.jsx=function(n,a,d){var h=1e4>z.recentlyCreatedOwnerStacks++;return f(n,a,d,!1,h?Error("react-stack-top-frame"):J,h?H(s(n)):X)},A.jsxs=function(n,a,d){var h=1e4>z.recentlyCreatedOwnerStacks++;return f(n,a,d,!0,h?Error("react-stack-top-frame"):J,h?H(s(n)):X)}}()),A}process.env.NODE_ENV==="production"?N.exports=ct():N.exports=ut();var st=N.exports;const dt=c=>{const{src:t,autoplay:e,muted:s,controls:r=!0,poster:i,preload:l,theme:u,s3Config:g,analytics:b,hlsConfig:f,onReady:S,onPlay:C,onPause:w,onEnded:T,onTimeUpdate:M,onVolumeChange:E,onError:I,style:F,className:O,width:L="100%",height:R="500px"}=c,q=v.useRef(null),_=v.useRef(null);return v.useEffect(()=>{if(!q.current)return;const j={src:t,container:q.current,autoplay:e,muted:s,controls:r,poster:i,preload:l,theme:u,s3Config:g,analytics:b,hlsConfig:f},p=new V(j);return _.current=p,C&&p.on("play",C),w&&p.on("pause",w),T&&p.on("ended",T),I&&p.on("error",y=>{var B;return I((B=y.data)==null?void 0:B.error)}),M&&p.on("timeupdate",y=>M(y.data.currentTime)),E&&p.on("volumechange",y=>E(y.data.volume,y.data.muted)),S&&S(p),()=>{p.destroy(),_.current=null}},[t]),v.useEffect(()=>{_.current},[e,s,r]),st.jsx("div",{ref:q,className:O,style:{width:typeof L=="number"?`${L}px`:L,height:typeof R=="number"?`${R}px`:R,...F}})},ht=c=>{const[t,e]=v.useState(null),[s,r]=v.useState(null),i=v.useRef(null);return v.useEffect(()=>{if(!i.current)return;const l=new V({...c,container:i.current});e(l);const u=()=>{r(l.getState())};return l.on("play",u),l.on("pause",u),l.on("timeupdate",u),l.on("volumechange",u),l.on("loadedmetadata",u),()=>{l.destroy()}},[c.src]),{containerRef:i,player:t,state:s}},rt=v.createContext({player:null,state:null}),mt=c=>{const{player:t,children:e}=c,[s,r]=v.useState(t.getState());return v.useEffect(()=>{const i=()=>{r(t.getState())};return t.on("play",i),t.on("pause",i),t.on("timeupdate",i),t.on("volumechange",i),t.on("loadedmetadata",i),()=>{}},[t]),st.jsx(rt.Provider,{value:{player:t,state:s},children:e})},pt=()=>{const c=v.useContext(rt);if(!c.player)throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");return c};exports.Analytics=tt;exports.S3Handler=nt;exports.UIController=et;exports.WontumPlayer=V;exports.WontumPlayerProvider=mt;exports.WontumPlayerReact=dt;exports.useWontumPlayer=ht;exports.useWontumPlayerContext=pt;
+  <%s key={someKey} {...props} />`,h,m,C,m),Z[m+h]=!0)}if(m=null,d!==void 0&&(e(d),m=""+d),c(a)&&(e(a.key),m=""+a.key),"key"in a){d={};for(var V in a)V!=="key"&&(d[V]=a[V])}else d=a;return m&&u(d,typeof n=="function"?n.displayName||n.name||"Unknown":n),b(n,m,d,r(),D,U)}function A(n){M(n)?n._store&&(n._store.validated=1):typeof n=="object"&&n!==null&&n.$$typeof===k&&(n._payload.status==="fulfilled"?M(n._payload.value)&&n._payload.value._store&&(n._payload.value._store.validated=1):n._store&&(n._store.validated=1))}function M(n){return typeof n=="object"&&n!==null&&n.$$typeof===T}var w=v,T=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),$=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),j=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),H=Symbol.for("react.suspense"),N=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),R=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),_=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,p=Object.prototype.hasOwnProperty,g=Array.isArray,S=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(n){return n()}};var Q,J={},X=w.react_stack_bottom_frame.bind(w,i)(),G=S(s(i)),Z={};P.Fragment=x,P.jsx=function(n,a,d){var h=1e4>_.recentlyCreatedOwnerStacks++;return y(n,a,d,!1,h?Error("react-stack-top-frame"):X,h?S(s(n)):G)},P.jsxs=function(n,a,d){var h=1e4>_.recentlyCreatedOwnerStacks++;return y(n,a,d,!0,h?Error("react-stack-top-frame"):X,h?S(s(n)):G)}}()),P}process.env.NODE_ENV==="production"?W.exports=dt():W.exports=ht();var it=W.exports;const mt=l=>{const{src:t,autoplay:e,muted:s,controls:r=!0,poster:i,preload:c,theme:u,s3Config:f,analytics:b,hlsConfig:y,subtitles:A,stickyControls:M,onReady:w,onPlay:T,onPause:I,onEnded:x,onTimeUpdate:B,onVolumeChange:$,onError:O,onLoadedMetadata:j,onQualityChange:F,style:H,className:N,width:L="100%",height:k="500px"}=l,R=v.useRef(null),z=v.useRef(null);return v.useEffect(()=>{if(!R.current)return;const _={src:t,container:R.current,autoplay:e,muted:s,controls:r,poster:i,preload:c,theme:u,s3Config:f,analytics:b,hlsConfig:y,subtitles:A,stickyControls:M},p=new Y(_);return z.current=p,T&&p.on("play",T),I&&p.on("pause",I),x&&p.on("ended",x),O&&p.on("error",g=>{var S;return O((S=g.data)==null?void 0:S.error)}),j&&p.on("loadedmetadata",j),F&&p.on("qualitychange",g=>F(g.data.level)),B&&p.on("timeupdate",g=>B(g.data.currentTime)),$&&p.on("volumechange",g=>$(g.data.volume,g.data.muted)),w&&w(p),()=>{p.destroy(),z.current=null}},[t]),it.jsx("div",{ref:R,className:N,style:{width:typeof L=="number"?`${L}px`:L,height:typeof k=="number"?`${k}px`:k,...H}})},pt=l=>{const[t,e]=v.useState(null),[s,r]=v.useState(null),i=v.useRef(null);return v.useEffect(()=>{if(!i.current)return;const c=new Y({...l,container:i.current});e(c);const u=()=>{r(c.getState())};return c.on("play",u),c.on("pause",u),c.on("timeupdate",u),c.on("volumechange",u),c.on("loadedmetadata",u),()=>{c.destroy()}},[l.src]),{containerRef:i,player:t,state:s}},ot=et.createContext({player:null,state:null}),vt=l=>{const{player:t,children:e}=l,[s,r]=v.useState(t.getState());return v.useEffect(()=>{const i=()=>{r(t.getState())};return t.on("play",i),t.on("pause",i),t.on("timeupdate",i),t.on("volumechange",i),t.on("loadedmetadata",i),()=>{}},[t]),it.jsx(ot.Provider,{value:{player:t,state:s},children:e})},gt=()=>{const l=et.useContext(ot);if(!l.player)throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");return l};exports.Analytics=nt;exports.S3Handler=rt;exports.UIController=st;exports.WontumPlayer=Y;exports.WontumPlayerProvider=vt;exports.WontumPlayerReact=mt;exports.useWontumPlayer=pt;exports.useWontumPlayerContext=gt;

package/dist/wontum-player.esm.js

@@ -1,9 +1,10 @@
 var at = Object.defineProperty;
 var lt = (c, t, e) => t in c ? at(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
 var o = (c, t, e) => lt(c, typeof t != "symbol" ? t + "" : t, e);
-import w from "hls.js";
-import Y, { useRef as U, useEffect as $, useState as V } from "react";
-class ct {
+import k from "hls.js";
+import * as nt from "react";
+import ct, { useRef as V, useEffect as Q, useState as W } from "react";
+class ut {
   constructor(t) {
     o(this, "config");
     o(this, "sessionId");
@@ -117,7 +118,7 @@ class ct {
     (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.events = [];
   }
 }
-class ut {
+class dt {
   constructor(t, e) {
     o(this, "container");
     o(this, "player");
@@ -144,8 +145,8 @@ class ut {
   injectStyles() {
     const t = "wontum-player-styles";
     if (document.getElementById(t)) return;
-    const e = this.player.config.theme || {}, s = e.primaryColor || "#3b82f6", r = e.accentColor || "#2563eb", i = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", l = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", u = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", v = e.progressHeight || "6px", y = e.borderRadius || "4px", g = document.createElement("style");
-    g.id = t, g.textContent = `
+    const e = this.player.config.theme || {}, s = e.primaryColor || "#3b82f6", r = e.accentColor || "#2563eb", i = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", l = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", u = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", g = e.progressHeight || "6px", y = e.borderRadius || "4px", f = document.createElement("style");
+    f.id = t, f.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
@@ -155,7 +156,7 @@ class ut {
         --accent-color: ${r};
         --controls-bg: ${l};
         --button-hover: ${u};
-        --progress-height: ${v};
+        --progress-height: ${g};
         --border-radius: ${y};
       }
       
@@ -610,7 +611,7 @@ class ut {
         transform: translateY(0) !important;
         pointer-events: all !important;
       }
-    `, document.head.appendChild(g), this.container.classList.add("wontum-player-container");
+    `, document.head.appendChild(f), this.container.classList.add("wontum-player-container");
   }
   createProgressBar() {
     const t = document.createElement("div");
@@ -775,7 +776,7 @@ class ut {
     `, t.querySelectorAll(".wontum-subtitle-option").forEach((r) => {
       r.addEventListener("click", (i) => {
         const l = i.target, u = parseInt(l.dataset.track || "-1");
-        u === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(u), t.querySelectorAll(".wontum-subtitle-option").forEach((v) => v.classList.remove("active")), l.classList.add("active"), t.classList.remove("active");
+        u === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(u), t.querySelectorAll(".wontum-subtitle-option").forEach((g) => g.classList.remove("active")), l.classList.add("active"), t.classList.remove("active");
       });
     });
   }
@@ -789,8 +790,8 @@ class ut {
       `
     ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((i) => {
       i.addEventListener("click", (l) => {
-        const u = l.target, v = parseFloat(u.dataset.speed || "1");
-        this.player.setPlaybackRate(v), t.querySelectorAll(".wontum-speed-option").forEach((y) => y.classList.remove("active")), u.classList.add("active"), t.classList.remove("active");
+        const u = l.target, g = parseFloat(u.dataset.speed || "1");
+        this.player.setPlaybackRate(g), t.querySelectorAll(".wontum-speed-option").forEach((y) => y.classList.remove("active")), u.classList.add("active"), t.classList.remove("active");
       });
     });
   }
@@ -890,7 +891,7 @@ class ut {
     this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
   }
 }
-class dt {
+class ht {
   constructor(t) {
     o(this, "config");
     o(this, "urlCache", /* @__PURE__ */ new Map());
@@ -994,7 +995,7 @@ class dt {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class nt {
+class st {
   constructor(t) {
     o(this, "container");
     o(this, "videoElement");
@@ -1020,7 +1021,7 @@ class nt {
     });
     if (this.config = t, this.container = typeof t.container == "string" ? document.querySelector(t.container) : t.container, !this.container)
       throw new Error("Container element not found");
-    this.analytics = new ct(t.analytics), this.s3Handler = new dt(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new ut(this.container, this), this.setupVideoListeners(), this.loadSource(t.src), t.autoplay && (this.videoElement.autoplay = !0), t.muted && this.mute(), t.poster && (this.videoElement.poster = t.poster), t.preload && (this.videoElement.preload = t.preload), t.subtitles && this.addSubtitleTracks(t.subtitles);
+    this.analytics = new ut(t.analytics), this.s3Handler = new ht(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new dt(this.container, this), this.setupVideoListeners(), this.loadSource(t.src), t.autoplay && (this.videoElement.autoplay = !0), t.muted && this.mute(), t.poster && (this.videoElement.poster = t.poster), t.preload && (this.videoElement.preload = t.preload), t.subtitles && this.addSubtitleTracks(t.subtitles);
   }
   addSubtitleTracks(t) {
     t.forEach((e) => {
@@ -1088,15 +1089,15 @@ class nt {
   async loadSource(t) {
     try {
       const e = await this.s3Handler.processUrl(t);
-      if (w.isSupported())
-        this.hls = new w(this.config.hlsConfig), this.hls.loadSource(e), this.hls.attachMedia(this.videoElement), this.hls.on(w.Events.MANIFEST_PARSED, (s, r) => {
+      if (k.isSupported())
+        this.hls = new k(this.config.hlsConfig), this.hls.loadSource(e), this.hls.attachMedia(this.videoElement), this.hls.on(k.Events.MANIFEST_PARSED, (s, r) => {
           const i = this.extractQualities(r.levels);
           this.state.availableQualities = i.map((l) => l.name), this.emit("loadedmetadata", { qualities: i });
-        }), this.hls.on(w.Events.LEVEL_SWITCHED, (s, r) => {
+        }), this.hls.on(k.Events.LEVEL_SWITCHED, (s, r) => {
           var l;
           const i = (l = this.hls) == null ? void 0 : l.levels[r.level];
           i && (this.state.quality = `${i.height}p`, this.emit("qualitychange", { quality: this.state.quality }));
-        }), this.hls.on(w.Events.ERROR, (s, r) => {
+        }), this.hls.on(k.Events.ERROR, (s, r) => {
           r.fatal && this.handleHlsError(r);
         });
       else if (this.videoElement.canPlayType("application/vnd.apple.mpegurl"))
@@ -1118,10 +1119,10 @@ class nt {
   handleHlsError(t) {
     var e, s;
     switch (t.type) {
-      case w.ErrorTypes.NETWORK_ERROR:
+      case k.ErrorTypes.NETWORK_ERROR:
         console.error("Network error occurred"), (e = this.hls) == null || e.startLoad();
         break;
-      case w.ErrorTypes.MEDIA_ERROR:
+      case k.ErrorTypes.MEDIA_ERROR:
         console.error("Media error occurred"), (s = this.hls) == null || s.recoverMediaError();
         break;
       default:
@@ -1242,7 +1243,7 @@ class nt {
     this.hls && (this.hls.destroy(), this.hls = null), this.uiController.destroy(), this.videoElement.remove(), this.eventListeners.clear(), this.analytics.destroy();
   }
 }
-var W = { exports: {} }, q = {};
+var Y = { exports: {} }, _ = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -1253,8 +1254,8 @@ var W = { exports: {} }, q = {};
  * LICENSE file in the root directory of this source tree.
  */
 var tt;
-function ht() {
-  if (tt) return q;
+function mt() {
+  if (tt) return _;
   tt = 1;
   var c = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
   function e(s, r, i) {
@@ -1272,9 +1273,9 @@ function ht() {
       props: i
     };
   }
-  return q.Fragment = t, q.jsx = e, q.jsxs = e, q;
+  return _.Fragment = t, _.jsx = e, _.jsxs = e, _;
 }
-var P = {};
+var q = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -1285,43 +1286,43 @@ var P = {};
  * LICENSE file in the root directory of this source tree.
  */
 var et;
-function mt() {
+function pt() {
   return et || (et = 1, process.env.NODE_ENV !== "production" && function() {
     function c(n) {
       if (n == null) return null;
       if (typeof n == "function")
-        return n.$$typeof === I ? null : n.displayName || n.name || null;
+        return n.$$typeof === O ? null : n.displayName || n.name || null;
       if (typeof n == "string") return n;
       switch (n) {
-        case k:
+        case E:
           return "Fragment";
-        case F:
+        case B:
           return "Profiler";
-        case M:
+        case I:
           return "StrictMode";
-        case R:
+        case D:
           return "Suspense";
-        case _:
+        case H:
           return "SuspenseList";
-        case f:
+        case L:
           return "Activity";
       }
       if (typeof n == "object")
         switch (typeof n.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), n.$$typeof) {
-          case A:
+          case M:
             return "Portal";
-          case T:
+          case F:
             return n.displayName || "Context";
-          case z:
+          case $:
             return (n._context.displayName || "Context") + ".Consumer";
-          case L:
+          case z:
             var a = n.render;
             return n = n.displayName, n || (n = a.displayName || a.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
-          case O:
+          case T:
             return a = n.displayName || null, a !== null ? a : c(n.type) || "Memo";
-          case p:
+          case w:
             a = n._payload, n = n._init;
             try {
               return c(n(a));
@@ -1351,8 +1352,8 @@ function mt() {
       }
     }
     function s(n) {
-      if (n === k) return "<>";
-      if (typeof n == "object" && n !== null && n.$$typeof === p)
+      if (n === E) return "<>";
+      if (typeof n == "object" && n !== null && n.$$typeof === w)
         return "<...>";
       try {
         var a = c(n);
@@ -1362,14 +1363,14 @@ function mt() {
       }
     }
     function r() {
-      var n = j.A;
+      var n = R.A;
       return n === null ? null : n.getOwner();
     }
     function i() {
       return Error("react-stack-top-frame");
     }
     function l(n) {
-      if (Q.call(n, "key")) {
+      if (p.call(n, "key")) {
         var a = Object.getOwnPropertyDescriptor(n, "key").get;
         if (a && a.isReactWarning) return !1;
       }
@@ -1387,13 +1388,13 @@ function mt() {
         configurable: !0
       });
     }
-    function v() {
+    function g() {
       var n = c(this.type);
       return X[n] || (X[n] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), n = this.props.ref, n !== void 0 ? n : null;
     }
-    function y(n, a, d, h, B, H) {
+    function y(n, a, d, h, j, N) {
       var m = d.ref;
       return n = {
         $$typeof: C,
@@ -1403,7 +1404,7 @@ function mt() {
         _owner: h
       }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(n, "ref", {
         enumerable: !1,
-        get: v
+        get: g
       }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -1418,33 +1419,33 @@ function mt() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: B
+        value: j
       }), Object.defineProperty(n, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: H
+        value: N
       }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
     }
-    function g(n, a, d, h, B, H) {
+    function f(n, a, d, h, j, N) {
       var m = a.children;
       if (m !== void 0)
         if (h)
-          if (it(m)) {
+          if (v(m)) {
             for (h = 0; h < m.length; h++)
-              x(m[h]);
+              P(m[h]);
             Object.freeze && Object.freeze(m);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else x(m);
-      if (Q.call(a, "key")) {
+        else P(m);
+      if (p.call(a, "key")) {
         m = c(n);
-        var E = Object.keys(a).filter(function(ot) {
+        var S = Object.keys(a).filter(function(ot) {
           return ot !== "key";
         });
-        h = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", K[m + h] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+        h = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", K[m + h] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -1453,14 +1454,14 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           h,
           m,
-          E,
+          S,
           m
         ), K[m + h] = !0);
       }
       if (m = null, d !== void 0 && (e(d), m = "" + d), l(a) && (e(a.key), m = "" + a.key), "key" in a) {
         d = {};
-        for (var N in a)
-          N !== "key" && (d[N] = a[N]);
+        for (var U in a)
+          U !== "key" && (d[U] = a[U]);
       } else d = a;
       return m && u(
         d,
@@ -1470,17 +1471,17 @@ React keys must be passed directly to JSX without using spread:
         m,
         d,
         r(),
-        B,
-        H
+        j,
+        N
       );
     }
-    function x(n) {
-      S(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === p && (n._payload.status === "fulfilled" ? S(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
+    function P(n) {
+      A(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === w && (n._payload.status === "fulfilled" ? A(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
     }
-    function S(n) {
+    function A(n) {
       return typeof n == "object" && n !== null && n.$$typeof === C;
     }
-    var b = Y, C = Symbol.for("react.transitional.element"), A = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), T = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), _ = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), f = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), j = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, it = Array.isArray, D = console.createTask ? console.createTask : function() {
+    var b = ct, C = Symbol.for("react.transitional.element"), M = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), I = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), F = Symbol.for("react.context"), z = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), w = Symbol.for("react.lazy"), L = Symbol.for("react.activity"), O = Symbol.for("react.client.reference"), R = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, p = Object.prototype.hasOwnProperty, v = Array.isArray, x = console.createTask ? console.createTask : function() {
       return null;
     };
     b = {
@@ -1491,33 +1492,33 @@ React keys must be passed directly to JSX without using spread:
     var J, X = {}, G = b.react_stack_bottom_frame.bind(
       b,
       i
-    )(), Z = D(s(i)), K = {};
-    P.Fragment = k, P.jsx = function(n, a, d) {
-      var h = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return g(
+    )(), Z = x(s(i)), K = {};
+    q.Fragment = E, q.jsx = function(n, a, d) {
+      var h = 1e4 > R.recentlyCreatedOwnerStacks++;
+      return f(
         n,
         a,
         d,
         !1,
         h ? Error("react-stack-top-frame") : G,
-        h ? D(s(n)) : Z
+        h ? x(s(n)) : Z
       );
-    }, P.jsxs = function(n, a, d) {
-      var h = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return g(
+    }, q.jsxs = function(n, a, d) {
+      var h = 1e4 > R.recentlyCreatedOwnerStacks++;
+      return f(
         n,
         a,
         d,
         !0,
         h ? Error("react-stack-top-frame") : G,
-        h ? D(s(n)) : Z
+        h ? x(s(n)) : Z
       );
     };
-  }()), P;
+  }()), q;
 }
-process.env.NODE_ENV === "production" ? W.exports = ht() : W.exports = mt();
-var st = W.exports;
-const ft = (c) => {
+process.env.NODE_ENV === "production" ? Y.exports = mt() : Y.exports = pt();
+var rt = Y.exports;
+const yt = (c) => {
   const {
     src: t,
     autoplay: e,
@@ -1526,61 +1527,65 @@ const ft = (c) => {
     poster: i,
     preload: l,
     theme: u,
-    s3Config: v,
+    s3Config: g,
     analytics: y,
-    hlsConfig: g,
-    onReady: x,
-    onPlay: S,
-    onPause: b,
-    onEnded: C,
-    onTimeUpdate: A,
-    onVolumeChange: k,
-    onError: M,
-    style: F,
-    className: z,
+    hlsConfig: f,
+    subtitles: P,
+    stickyControls: A,
+    onReady: b,
+    onPlay: C,
+    onPause: M,
+    onEnded: E,
+    onTimeUpdate: I,
+    onVolumeChange: B,
+    onError: $,
+    onLoadedMetadata: F,
+    onQualityChange: z,
+    style: D,
+    className: H,
     width: T = "100%",
-    height: L = "500px"
-  } = c, R = U(null), _ = U(null);
-  return $(() => {
-    if (!R.current) return;
-    const O = {
+    height: w = "500px"
+  } = c, L = V(null), O = V(null);
+  return Q(() => {
+    if (!L.current) return;
+    const R = {
       src: t,
-      container: R.current,
+      container: L.current,
       autoplay: e,
       muted: s,
       controls: r,
       poster: i,
       preload: l,
       theme: u,
-      s3Config: v,
+      s3Config: g,
       analytics: y,
-      hlsConfig: g
-    }, p = new nt(O);
-    return _.current = p, S && p.on("play", S), b && p.on("pause", b), C && p.on("ended", C), M && p.on("error", (f) => {
-      var I;
-      return M((I = f.data) == null ? void 0 : I.error);
-    }), A && p.on("timeupdate", (f) => A(f.data.currentTime)), k && p.on("volumechange", (f) => k(f.data.volume, f.data.muted)), x && x(p), () => {
-      p.destroy(), _.current = null;
+      hlsConfig: f,
+      subtitles: P,
+      stickyControls: A
+    }, p = new st(R);
+    return O.current = p, C && p.on("play", C), M && p.on("pause", M), E && p.on("ended", E), $ && p.on("error", (v) => {
+      var x;
+      return $((x = v.data) == null ? void 0 : x.error);
+    }), F && p.on("loadedmetadata", F), z && p.on("qualitychange", (v) => z(v.data.level)), I && p.on("timeupdate", (v) => I(v.data.currentTime)), B && p.on("volumechange", (v) => B(v.data.volume, v.data.muted)), b && b(p), () => {
+      p.destroy(), O.current = null;
     };
-  }, [t]), $(() => {
-    _.current;
-  }, [e, s, r]), /* @__PURE__ */ st.jsx(
+  }, [t]), /* @__PURE__ */ rt.jsx(
     "div",
     {
-      ref: R,
-      className: z,
+      ref: L,
+      className: H,
       style: {
         width: typeof T == "number" ? `${T}px` : T,
-        height: typeof L == "number" ? `${L}px` : L,
-        ...F
+        height: typeof w == "number" ? `${w}px` : w,
+        ...D
       }
     }
   );
-}, yt = (c) => {
-  const [t, e] = V(null), [s, r] = V(null), i = U(null);
-  return $(() => {
+}, bt = (c) => {
+  const [t, e] = W(null), [s, r] = W(null), i = V(null);
+  return Q(() => {
     if (!i.current) return;
-    const l = new nt({
+    const l = new st({
       ...c,
       container: i.current
     });
@@ -1596,31 +1601,31 @@ const ft = (c) => {
     player: t,
     state: s
   };
-}, rt = Y.createContext({
+}, it = nt.createContext({
   player: null,
   state: null
-}), bt = (c) => {
-  const { player: t, children: e } = c, [s, r] = V(t.getState());
-  return $(() => {
+}), wt = (c) => {
+  const { player: t, children: e } = c, [s, r] = W(t.getState());
+  return Q(() => {
     const i = () => {
       r(t.getState());
     };
     return t.on("play", i), t.on("pause", i), t.on("timeupdate", i), t.on("volumechange", i), t.on("loadedmetadata", i), () => {
     };
-  }, [t]), /* @__PURE__ */ st.jsx(rt.Provider, { value: { player: t, state: s }, children: e });
-}, wt = () => {
-  const c = Y.useContext(rt);
+  }, [t]), /* @__PURE__ */ rt.jsx(it.Provider, { value: { player: t, state: s }, children: e });
+}, kt = () => {
+  const c = nt.useContext(it);
   if (!c.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
   return c;
 };
 export {
-  ct as Analytics,
-  dt as S3Handler,
-  ut as UIController,
-  nt as WontumPlayer,
-  bt as WontumPlayerProvider,
-  ft as WontumPlayerReact,
-  yt as useWontumPlayer,
-  wt as useWontumPlayerContext
+  ut as Analytics,
+  ht as S3Handler,
+  dt as UIController,
+  st as WontumPlayer,
+  wt as WontumPlayerProvider,
+  yt as WontumPlayerReact,
+  bt as useWontumPlayer,
+  kt as useWontumPlayerContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@obipascal/player",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"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",