@obipascal/player 1.0.8 → 1.0.9

package/README.md

@@ -34,6 +34,7 @@ A modern, feature-rich HLS video player SDK for educational platforms with Cloud
 - ⚛️ **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
+- 🔌 **Real-time Analytics**: Native WebSocket and Socket.IO support for live analytics streaming
 - 🎯 **25 Events**: Complete event system compatible with Mux Player
 - 📱 **Responsive**: Mobile-friendly with touch support
 - 🎬 **Quality Selector**: Automatic quality switching with manual override
@@ -50,6 +51,12 @@ Or with yarn:
 yarn add @obipascal/player hls.js
 ```
 
+**Optional:** For Socket.IO real-time analytics support:
+
+```bash
+npm install socket.io-client
+```
+
 ## 🚀 Quick Start
 
 ### Vanilla JavaScript
@@ -691,7 +698,19 @@ Modern vertical volume slider with popup interface - hover over volume button to
 
 ## 📊 Analytics
 
-Track video engagement and quality metrics:
+Track video engagement and quality metrics with HTTP endpoints or real-time WebSocket/Socket.IO streaming:
+
+**Features:**
+
+- ✅ HTTP endpoint support for traditional analytics
+- ✅ Native WebSocket support for real-time streaming
+- ✅ Socket.IO support with full TypeScript types
+- ✅ Dual streaming (HTTP + Socket simultaneously)
+- ✅ Event transformation and filtering
+- ✅ Auto-reconnection with configurable delays
+- ✅ Quality of Experience (QoE) metrics included in every event
+
+### HTTP Analytics
 
 ```typescript
 const player = new WontumPlayer({
@@ -720,6 +739,206 @@ console.log(metrics)
 // }
 ```
 
+### WebSocket Real-Time Analytics
+
+Stream analytics events in real-time using native WebSocket for live dashboards and monitoring:
+
+```typescript
+const player = new WontumPlayer({
+	src: "https://example.com/video.m3u8",
+	container: "#player",
+	analytics: {
+		enabled: true,
+		userId: "user_456",
+		videoId: "video_789",
+		// Native WebSocket configuration
+		webSocket: {
+			type: "websocket", // Specify native WebSocket
+			connection: "wss://analytics.example.com/stream",
+			// Optional: Transform events before sending
+			transform: (event) => ({
+				type: event.eventType,
+				video_id: event.videoId,
+				user_id: event.userId,
+				timestamp: event.timestamp,
+				metrics: event.data,
+			}),
+			// Optional: Handle errors
+			onError: (error) => {
+				console.error("Analytics WebSocket error:", error)
+			},
+			// Optional: Connection opened
+			onOpen: (event) => {
+				console.log("Analytics WebSocket connected")
+			},
+			// Optional: Connection closed
+			onClose: (event) => {
+				console.log("Analytics WebSocket disconnected")
+			},
+			// Auto-reconnect on disconnect (default: true)
+			autoReconnect: true,
+			// Reconnect delay in milliseconds (default: 3000)
+			reconnectDelay: 3000,
+		},
+	},
+})
+```
+
+### Socket.IO Real-Time Analytics
+
+For Socket.IO-based real-time analytics (requires `socket.io-client` to be loaded):
+
+```typescript
+// Option 1: Let the SDK create the Socket.IO connection
+const player = new WontumPlayer({
+	src: "https://example.com/video.m3u8",
+	container: "#player",
+	analytics: {
+		enabled: true,
+		userId: "user_456",
+		videoId: "video_789",
+		webSocket: {
+			type: "socket.io",
+			connection: "https://analytics.example.com", // Socket.IO server URL
+			options: {
+				path: "/socket.io/",
+				transports: ["websocket", "polling"],
+				auth: {
+					token: "your-auth-token",
+				},
+				reconnection: true,
+				reconnectionDelay: 1000,
+			},
+			eventName: "video_analytics", // Event name to emit (default: "analytics")
+			transform: (event) => ({
+				event: event.eventType,
+				video: event.videoId,
+				user: event.userId,
+				data: event.data,
+			}),
+			onConnect: () => {
+				console.log("Socket.IO connected")
+			},
+			onDisconnect: (reason) => {
+				console.log("Socket.IO disconnected:", reason)
+			},
+			onError: (error) => {
+				console.error("Socket.IO error:", error)
+			},
+		},
+	},
+})
+```
+
+```typescript
+// Option 2: Use existing Socket.IO connection
+import { io } from "socket.io-client"
+
+const socket = io("https://analytics.example.com", {
+	auth: {
+		token: "your-auth-token",
+	},
+})
+
+const player = new WontumPlayer({
+	src: "https://example.com/video.m3u8",
+	container: "#player",
+	analytics: {
+		enabled: true,
+		userId: "user_456",
+		videoId: "video_789",
+		webSocket: {
+			type: "socket.io",
+			connection: socket, // Use existing Socket.IO instance
+			eventName: "analytics",
+		},
+	},
+})
+```
+
+### Using Existing WebSocket Connection
+
+```typescript
+// Create your own WebSocket connection
+const ws = new WebSocket("wss://analytics.example.com/stream")
+
+// Configure authentication or custom headers before connecting
+ws.addEventListener("open", () => {
+	// Send authentication message
+	ws.send(
+		JSON.stringify({
+			type: "auth",
+			token: "your-auth-token",
+		}),
+	)
+})
+
+const player = new WontumPlayer({
+	src: "https://example.com/video.m3u8",
+	container: "#player",
+	analytics: {
+		enabled: true,
+		userId: "user_456",
+		videoId: "video_789",
+		webSocket: {
+			type: "websocket",
+			connection: ws, // Use existing connection
+			transform: (event) => ({
+				// Custom format for your backend
+				action: "video_event",
+				payload: {
+					event: event.eventType,
+					data: event.data,
+				},
+			}),
+		},
+	},
+})
+```
+
+### Dual Analytics (HTTP + WebSocket/Socket.IO)
+
+Send analytics to both HTTP endpoint and real-time socket simultaneously:
+
+```typescript
+const player = new WontumPlayer({
+	src: "https://example.com/video.m3u8",
+	container: "#player",
+	analytics: {
+		enabled: true,
+		endpoint: "https://api.example.com/analytics", // HTTP fallback/storage
+		webSocket: {
+			type: "socket.io",
+			connection: "https://realtime.example.com", // Real-time monitoring
+			eventName: "video_analytics",
+		},
+		userId: "user_456",
+		videoId: "video_789",
+	},
+})
+```
+
+### Analytics Events Tracked
+
+The SDK automatically tracks these events:
+
+- **Session**: `session_start`, `session_end`
+- **Playback**: `play`, `pause`, `ended`, `playing`
+- **Buffering**: `buffering_start`, `buffering_end`, `waiting`, `stalled`
+- **Seeking**: `seeking`, `seeked`
+- **Quality**: `qualitychange`, `renditionchange`
+- **Errors**: `error`
+- **User Actions**: Volume changes, fullscreen, playback rate changes
+
+Each event includes Quality of Experience (QoE) metrics:
+
+- `sessionDuration` - Total session time
+- `totalPlayTime` - Actual video play time
+- `totalBufferTime` - Time spent buffering
+- `bufferingRatio` - Buffer time / play time ratio
+- `rebufferCount` - Number of rebuffer events
+- `seekCount` - Number of seek operations
+
 ## API Reference
 
 ### WontumPlayer
@@ -750,6 +969,39 @@ interface S3Config {
 	region?: string // S3 region
 	endpoint?: string // Custom S3 endpoint
 }
+
+interface AnalyticsConfig {
+	enabled?: boolean // Enable analytics tracking
+	endpoint?: string // HTTP endpoint for analytics events
+	webSocket?: WebSocketAnalyticsHandler | SocketIOAnalyticsHandler // Real-time streaming
+	sessionId?: string // Session identifier
+	userId?: string // User identifier
+	videoId?: string // Video identifier
+}
+
+// Native WebSocket Configuration
+interface WebSocketAnalyticsHandler {
+	type: "websocket"
+	connection: WebSocket | string // WebSocket instance or URL
+	transform?: (event: AnalyticsEvent) => any // Transform before sending
+	onError?: (error: Event) => void
+	onOpen?: (event: Event) => void
+	onClose?: (event: CloseEvent) => void
+	autoReconnect?: boolean // Default: true
+	reconnectDelay?: number // Default: 3000ms
+}
+
+// Socket.IO Configuration
+interface SocketIOAnalyticsHandler {
+	type: "socket.io"
+	connection: Socket | string // Socket.IO instance or URL
+	options?: Partial<ManagerOptions & SocketOptions> // Socket.IO options
+	eventName?: string // Event name to emit (default: "analytics")
+	transform?: (event: AnalyticsEvent) => any
+	onError?: (error: Error) => void
+	onConnect?: () => void
+	onDisconnect?: (reason: string) => void
+}
 ```
 
 #### Methods

package/dist/src/analytics.d.ts

@@ -14,6 +14,10 @@ export declare class Analytics {
     private bufferStartTime;
     private rebufferCount;
     private seekCount;
+    private webSocket;
+    private socketIO;
+    private wsReconnectTimeout;
+    private isDestroyed;
     constructor(config?: AnalyticsConfig);
     trackEvent(eventType: string, data?: Record<string, any>): void;
     private updateMetrics;
@@ -22,6 +26,10 @@ export declare class Analytics {
     private getConnectionInfo;
     private sendEvent;
     private generateSessionId;
+    private initializeSocketIO;
+    private sendToSocketIO;
+    private initializeWebSocket;
+    private sendToWebSocket;
     getEvents(): AnalyticsEvent[];
     getMetrics(): Record<string, any>;
     destroy(): void;

package/dist/src/index.d.ts

@@ -4,6 +4,6 @@ export { S3Handler } from './s3-handler';
 export { UIController } from './ui-controller';
 export { WontumFileInfo } from './file-info';
 export { WontumPlayerReact, useWontumPlayer, WontumPlayerProvider, useWontumPlayerContext } from './react';
-export type { WontumPlayerConfig, PlayerTheme, S3Config, AnalyticsConfig, PlayerState, PlayerEvent, PlayerEventType, AnalyticsEvent, QualityLevel } from './types';
+export type { WontumPlayerConfig, PlayerTheme, S3Config, AnalyticsConfig, WebSocketAnalyticsHandler, SocketIOAnalyticsHandler, PlayerState, PlayerEvent, PlayerEventType, AnalyticsEvent, QualityLevel, } from './types';
 export type { VideoFileInfo } from './file-info';
 export type { WontumPlayerReactProps } from './react';

package/dist/src/types.d.ts

@@ -1,3 +1,5 @@
+import { Socket } from 'socket.io-client';
+
 /**
  * Player configuration options
  */
@@ -55,8 +57,10 @@ export interface S3Config {
 export interface AnalyticsConfig {
     /** Enable analytics */
     enabled?: boolean;
-    /** Custom analytics endpoint */
+    /** Custom analytics endpoint (HTTP/HTTPS) */
     endpoint?: string;
+    /** WebSocket handler for real-time analytics streaming (supports both native WebSocket and Socket.IO) */
+    webSocket?: WebSocketAnalyticsHandler | SocketIOAnalyticsHandler;
     /** Session identifier */
     sessionId?: string;
     /** User identifier */
@@ -64,6 +68,48 @@ export interface AnalyticsConfig {
     /** Video identifier */
     videoId?: string;
 }
+/**
+ * Native WebSocket handler for real-time analytics
+ */
+export interface WebSocketAnalyticsHandler {
+    /** Type identifier for native WebSocket */
+    type: "websocket";
+    /** WebSocket connection instance or URL to connect to */
+    connection: WebSocket | string;
+    /** Optional: Transform event before sending (allows filtering, formatting, etc.) */
+    transform?: (event: AnalyticsEvent) => any;
+    /** Optional: Error handler for WebSocket errors */
+    onError?: (error: Event) => void;
+    /** Optional: Handler for when WebSocket connection opens */
+    onOpen?: (event: Event) => void;
+    /** Optional: Handler for when WebSocket connection closes */
+    onClose?: (event: CloseEvent) => void;
+    /** Optional: Reconnect automatically on disconnect (default: true) */
+    autoReconnect?: boolean;
+    /** Optional: Reconnect delay in milliseconds (default: 3000) */
+    reconnectDelay?: number;
+}
+/**
+ * Socket.IO handler for real-time analytics
+ */
+export interface SocketIOAnalyticsHandler {
+    /** Type identifier for Socket.IO */
+    type: "socket.io";
+    /** Socket.IO client instance or URL to connect to */
+    connection: typeof Socket | string;
+    /** Optional: Socket.IO connection options (used when connection is a URL) */
+    options?: Record<string, any>;
+    /** Optional: Event name to emit (default: "analytics") */
+    eventName?: string;
+    /** Optional: Transform event before sending (allows filtering, formatting, etc.) */
+    transform?: (event: AnalyticsEvent) => any;
+    /** Optional: Error handler */
+    onError?: (error: Error) => void;
+    /** Optional: Handler for when connection is established */
+    onConnect?: () => void;
+    /** Optional: Handler for when connection is lost */
+    onDisconnect?: (reason: string) => void;
+}
 /**
  * Player state
  */

package/dist/wontum-player.cjs.js

@@ -1,14 +1,14 @@
-"use strict";var W=Object.defineProperty;var j=(c,t,e)=>t in c?W(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var o=(c,t,e)=>j(c,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("hls.js"),B=require("react/jsx-runtime"),h=require("react");function N(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>c[e]})}}return t.default=c,Object.freeze(t)}const F=N(h);class ${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 n;if(!((n=this.config)!=null&&n.enabled))return;const i={eventType:t,timestamp:Date.now(),sessionId:this.sessionId,videoId:this.config.videoId,userId:this.config.userId,data:{...e,...this.getQoEMetrics()}};this.events.push(i),this.updateMetrics(t,e),this.config.endpoint&&this.sendEvent(i),process.env.NODE_ENV==="development"&&console.log("[Analytics]",t,i.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(i){console.error("Failed to send analytics event:",i)}}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 A{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,"volumeContainer");o(this,"fullscreenButton");o(this,"pipButton");o(this,"settingsButton");o(this,"volumeSlider");o(this,"progressInput");o(this,"hideControlsTimeout",null);o(this,"stickyControls",!1);o(this,"isVolumeSliderActive",!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.volumeContainer=this.controlsContainer.querySelector(".wontum-volume-container"),this.fullscreenButton=this.controlsContainer.querySelector(".wontum-fullscreen-btn"),this.pipButton=this.controlsContainer.querySelector(".wontum-pip-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||{},i=e.primaryColor||"#3b82f6",n=e.accentColor||"#2563eb",s=e.fontFamily||"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",r=e.controlsBackground||"linear-gradient(to top, rgba(0,0,0,0.8), transparent)",a=e.buttonHoverBg||"rgba(255, 255, 255, 0.1)",l=e.progressHeight||"6px",u=e.borderRadius||"4px",p=document.createElement("style");p.id=t,p.textContent=`
+"use strict";var V=Object.create;var k=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var Y=(l,t,e)=>t in l?k(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var X=(l,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of _(t))!Q.call(l,n)&&n!==e&&k(l,n,{get:()=>t[n],enumerable:!(i=N(t,n))||i.enumerable});return l};var G=(l,t,e)=>(e=l!=null?V(j(l)):{},X(t||!l||!l.__esModule?k(e,"default",{value:l,enumerable:!0}):e,l));var s=(l,t,e)=>Y(l,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("hls.js"),B=require("react/jsx-runtime"),h=require("react");function K(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const F=K(h);class O{constructor(t){s(this,"config");s(this,"sessionId");s(this,"events",[]);s(this,"sessionStartTime");s(this,"playbackStartTime",null);s(this,"totalPlayTime",0);s(this,"totalBufferTime",0);s(this,"bufferStartTime",null);s(this,"rebufferCount",0);s(this,"seekCount",0);s(this,"webSocket",null);s(this,"socketIO",null);s(this,"wsReconnectTimeout",null);s(this,"isDestroyed",!1);var e,i;if(this.config=t,this.sessionId=(t==null?void 0:t.sessionId)||this.generateSessionId(),this.sessionStartTime=Date.now(),(e=this.config)!=null&&e.webSocket){const n=this.config.webSocket;"type"in n?n.type==="socket.io"?this.initializeSocketIO():this.initializeWebSocket():this.initializeWebSocket()}(i=this.config)!=null&&i.enabled&&this.trackEvent("session_start",this.getSessionData())}trackEvent(t,e={}){var n;if(!((n=this.config)!=null&&n.enabled))return;const i={eventType:t,timestamp:Date.now(),sessionId:this.sessionId,videoId:this.config.videoId,userId:this.config.userId,data:{...e,...this.getQoEMetrics()}};this.events.push(i),this.updateMetrics(t,e),this.webSocket&&this.webSocket.readyState===WebSocket.OPEN&&this.sendToWebSocket(i),this.socketIO&&this.socketIO.connected&&this.sendToSocketIO(i),this.config.endpoint&&this.sendEvent(i),process.env.NODE_ENV==="development"&&console.log("[Analytics]",t,i.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(i){console.error("Failed to send analytics event:",i)}}generateSessionId(){return`session_${Date.now()}_${Math.random().toString(36).substr(2,9)}`}async initializeSocketIO(){var e;if(!((e=this.config)!=null&&e.webSocket)||!("type"in this.config.webSocket))return;const t=this.config.webSocket;if(t.type==="socket.io")try{if(typeof t.connection=="string"){const n=(await import("socket.io-client")).default;this.socketIO=n(t.connection,t.options||{})}else this.socketIO=t.connection;if(!this.socketIO)return;this.socketIO.on("connect",()=>{process.env.NODE_ENV==="development"&&console.log("[Analytics Socket.IO] Connected"),t.onConnect&&t.onConnect()}),this.socketIO.on("connect_error",i=>{console.error("[Analytics Socket.IO] Connection error:",i),t.onError&&t.onError(i)}),this.socketIO.on("disconnect",i=>{process.env.NODE_ENV==="development"&&console.log("[Analytics Socket.IO] Disconnected:",i),t.onDisconnect&&t.onDisconnect(i)}),this.socketIO.on("error",i=>{console.error("[Analytics Socket.IO] Error:",i),t.onError&&t.onError(i)})}catch(i){console.error("[Analytics Socket.IO] Failed to initialize:",i)}}sendToSocketIO(t){var e;if(!(!this.socketIO||!this.socketIO.connected))try{const i=(e=this.config)==null?void 0:e.webSocket,n=i!=null&&i.transform?i.transform(t):t,o=(i==null?void 0:i.eventName)||"analytics";this.socketIO.emit(o,n),process.env.NODE_ENV==="development"&&console.log(`[Analytics Socket.IO] Emitted (${o}):`,t.eventType)}catch(i){console.error("[Analytics Socket.IO] Failed to emit event:",i)}}initializeWebSocket(){var e;if(!((e=this.config)!=null&&e.webSocket))return;const t=this.config.webSocket;try{typeof t.connection=="string"?this.webSocket=new WebSocket(t.connection):this.webSocket=t.connection,this.webSocket.onopen=i=>{process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Connected"),t.onOpen&&t.onOpen(i)},this.webSocket.onerror=i=>{console.error("[Analytics WebSocket] Error:",i),t.onError&&t.onError(i)},this.webSocket.onclose=i=>{if(process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Disconnected"),t.onClose&&t.onClose(i),t.autoReconnect!==!1&&!this.isDestroyed){const o=t.reconnectDelay||3e3;process.env.NODE_ENV==="development"&&console.log(`[Analytics WebSocket] Reconnecting in ${o}ms...`),this.wsReconnectTimeout=window.setTimeout(()=>{this.initializeWebSocket()},o)}}}catch(i){console.error("[Analytics WebSocket] Failed to initialize:",i)}}sendToWebSocket(t){var e;if(!(!this.webSocket||this.webSocket.readyState!==WebSocket.OPEN))try{const i=(e=this.config)==null?void 0:e.webSocket,n=i!=null&&i.transform?i.transform(t):t;this.webSocket.send(JSON.stringify(n)),process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Sent:",t.eventType)}catch(i){console.error("[Analytics WebSocket] Failed to send event:",i)}}getEvents(){return[...this.events]}getMetrics(){return{sessionId:this.sessionId,...this.getQoEMetrics(),eventCount:this.events.length}}destroy(){var t;this.isDestroyed=!0,(t=this.config)!=null&&t.enabled&&this.trackEvent("session_end",this.getSessionData()),this.wsReconnectTimeout&&(clearTimeout(this.wsReconnectTimeout),this.wsReconnectTimeout=null),this.webSocket&&(this.webSocket.close(),this.webSocket=null),this.socketIO&&(this.socketIO.removeAllListeners(),this.socketIO.disconnect(),this.socketIO=null),this.events=[]}}class ${constructor(t,e){s(this,"container");s(this,"player");s(this,"controlsContainer");s(this,"progressContainer");s(this,"progressBar");s(this,"playButton");s(this,"skipBackwardButton");s(this,"skipForwardButton");s(this,"volumeButton");s(this,"volumeContainer");s(this,"fullscreenButton");s(this,"pipButton");s(this,"settingsButton");s(this,"volumeSlider");s(this,"progressInput");s(this,"hideControlsTimeout",null);s(this,"stickyControls",!1);s(this,"isVolumeSliderActive",!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.volumeContainer=this.controlsContainer.querySelector(".wontum-volume-container"),this.fullscreenButton=this.controlsContainer.querySelector(".wontum-fullscreen-btn"),this.pipButton=this.controlsContainer.querySelector(".wontum-pip-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||{},i=e.primaryColor||"#3b82f6",n=e.accentColor||"#2563eb",o=e.fontFamily||"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",r=e.controlsBackground||"linear-gradient(to top, rgba(0,0,0,0.8), transparent)",a=e.buttonHoverBg||"rgba(255, 255, 255, 0.1)",c=e.progressHeight||"6px",u=e.borderRadius||"4px",p=document.createElement("style");p.id=t,p.textContent=`
       .wontum-player-container {
         position: relative;
         background: #000;
-        font-family: ${s};
+        font-family: ${o};
         overflow: hidden;
         --primary-color: ${i};
         --accent-color: ${n};
         --controls-bg: ${r};
         --button-hover: ${a};
-        --progress-height: ${l};
+        --progress-height: ${c};
         --border-radius: ${u};
       }
       
@@ -562,28 +562,28 @@
       <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",i=>{const n=i.target,s=parseFloat(n.value),r=this.player.getState(),a=s/100*r.duration;this.player.seek(a)}),this.volumeSlider.addEventListener("input",i=>{const n=i.target,s=parseFloat(n.value)/100;this.player.setVolume(s)}),this.volumeButton.addEventListener("click",()=>{this.player.getState().muted?this.player.unmute():this.player.mute()}),this.volumeContainer.addEventListener("mouseenter",()=>{this.isVolumeSliderActive=!0}),this.volumeContainer.addEventListener("mouseleave",()=>{this.isVolumeSliderActive=!1}),this.volumeSlider.addEventListener("input",()=>{this.isVolumeSliderActive=!0,this.resetHideControlsTimeout()}),this.volumeSlider.addEventListener("change",()=>{setTimeout(()=>{this.isVolumeSliderActive=!1},500)}),this.fullscreenButton.addEventListener("click",()=>{this.player.getState().fullscreen?this.player.exitFullscreen():this.player.enterFullscreen()}),this.pipButton.addEventListener("click",async()=>{try{await this.player.togglePictureInPicture()}catch(i){console.error("PiP error:",i)}}),this.settingsButton.addEventListener("click",()=>{const i=this.controlsContainer.querySelector(".wontum-settings-panel");i.classList.toggle("active"),i.classList.contains("active")&&(this.updateSettingsMenu(),this.updateQualityMenu(),this.updateSpeedMenu(),this.updateSubtitleMenu())});const t=this.controlsContainer.querySelectorAll(".wontum-tab");t.forEach(i=>{i.addEventListener("click",n=>{const s=n.currentTarget,r=s.getAttribute("data-tab");t.forEach(u=>u.classList.remove("active")),s.classList.add("active"),this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach(u=>u.classList.remove("active"));const l=this.controlsContainer.querySelector(`[data-panel="${r}"]`);l==null||l.classList.add("active")})}),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,i=this.player.getState();if(i.duration>0){const s=e/i.duration*100;this.progressBar.style.width=`${s}%`,this.progressInput.value=s.toString()}const n=this.controlsContainer.querySelector(".wontum-current-time");n.textContent=this.formatTime(e)}),this.player.on("loadedmetadata",t=>{const{duration:e}=t.data,i=this.controlsContainer.querySelector(".wontum-duration");i.textContent=this.formatTime(e),t.data.qualities&&this.updateQualityMenu(t.data.qualities)}),this.player.on("volumechange",t=>{const{volume:e,muted:i}=t.data;this.volumeSlider.value=(e*100).toString(),this.volumeButton.innerHTML=i?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 i=e.findIndex(n=>n.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",i=>{const n=i.target,o=parseFloat(n.value),r=this.player.getState(),a=o/100*r.duration;this.player.seek(a)}),this.volumeSlider.addEventListener("input",i=>{const n=i.target,o=parseFloat(n.value)/100;this.player.setVolume(o)}),this.volumeButton.addEventListener("click",()=>{this.player.getState().muted?this.player.unmute():this.player.mute()}),this.volumeContainer.addEventListener("mouseenter",()=>{this.isVolumeSliderActive=!0}),this.volumeContainer.addEventListener("mouseleave",()=>{this.isVolumeSliderActive=!1}),this.volumeSlider.addEventListener("input",()=>{this.isVolumeSliderActive=!0,this.resetHideControlsTimeout()}),this.volumeSlider.addEventListener("change",()=>{setTimeout(()=>{this.isVolumeSliderActive=!1},500)}),this.fullscreenButton.addEventListener("click",()=>{this.player.getState().fullscreen?this.player.exitFullscreen():this.player.enterFullscreen()}),this.pipButton.addEventListener("click",async()=>{try{await this.player.togglePictureInPicture()}catch(i){console.error("PiP error:",i)}}),this.settingsButton.addEventListener("click",()=>{const i=this.controlsContainer.querySelector(".wontum-settings-panel");i.classList.toggle("active"),i.classList.contains("active")&&(this.updateSettingsMenu(),this.updateQualityMenu(),this.updateSpeedMenu(),this.updateSubtitleMenu())});const t=this.controlsContainer.querySelectorAll(".wontum-tab");t.forEach(i=>{i.addEventListener("click",n=>{const o=n.currentTarget,r=o.getAttribute("data-tab");t.forEach(u=>u.classList.remove("active")),o.classList.add("active"),this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach(u=>u.classList.remove("active"));const c=this.controlsContainer.querySelector(`[data-panel="${r}"]`);c==null||c.classList.add("active")})}),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,i=this.player.getState();if(i.duration>0){const o=e/i.duration*100;this.progressBar.style.width=`${o}%`,this.progressInput.value=o.toString()}const n=this.controlsContainer.querySelector(".wontum-current-time");n.textContent=this.formatTime(e)}),this.player.on("loadedmetadata",t=>{const{duration:e}=t.data,i=this.controlsContainer.querySelector(".wontum-duration");i.textContent=this.formatTime(e),t.data.qualities&&this.updateQualityMenu(t.data.qualities)}),this.player.on("volumechange",t=>{const{volume:e,muted:i}=t.data;this.volumeSlider.value=(e*100).toString(),this.volumeButton.innerHTML=i?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 i=e.findIndex(n=>n.mode==="showing");t.innerHTML=`
       <div class="wontum-subtitle-option ${i===-1?"active":""}" data-track="-1">Off</div>
-      ${e.map((n,s)=>`
-        <div class="wontum-subtitle-option ${s===i?"active":""}" data-track="${s}">
-          ${n.label||n.language||`Track ${s+1}`}
+      ${e.map((n,o)=>`
+        <div class="wontum-subtitle-option ${o===i?"active":""}" data-track="${o}">
+          ${n.label||n.language||`Track ${o+1}`}
         </div>
       `).join("")}
-    `,t.querySelectorAll(".wontum-subtitle-option").forEach(n=>{n.addEventListener("click",s=>{const r=s.target,a=parseInt(r.dataset.track||"-1");a===-1?this.player.disableSubtitles():this.player.enableSubtitles(a),t.querySelectorAll(".wontum-subtitle-option").forEach(l=>l.classList.remove("active")),r.classList.add("active")})})}updateSpeedMenu(){const t=this.controlsContainer.querySelector(".wontum-speed-menu"),i=this.player.getState().playbackRate||1,n=[.25,.5,.75,1,1.25,1.5,1.75,2];t.innerHTML=n.map(s=>`
-        <div class="wontum-speed-option ${i===s?"active":""}" data-speed="${s}">
-          ${s===1?"Normal":s+"x"}
+    `,t.querySelectorAll(".wontum-subtitle-option").forEach(n=>{n.addEventListener("click",o=>{const r=o.target,a=parseInt(r.dataset.track||"-1");a===-1?this.player.disableSubtitles():this.player.enableSubtitles(a),t.querySelectorAll(".wontum-subtitle-option").forEach(c=>c.classList.remove("active")),r.classList.add("active")})})}updateSpeedMenu(){const t=this.controlsContainer.querySelector(".wontum-speed-menu"),i=this.player.getState().playbackRate||1,n=[.25,.5,.75,1,1.25,1.5,1.75,2];t.innerHTML=n.map(o=>`
+        <div class="wontum-speed-option ${i===o?"active":""}" data-speed="${o}">
+          ${o===1?"Normal":o+"x"}
         </div>
-      `).join(""),t.querySelectorAll(".wontum-speed-option").forEach(s=>{s.addEventListener("click",r=>{const a=r.target,l=parseFloat(a.dataset.speed||"1");this.player.setPlaybackRate(l),t.querySelectorAll(".wontum-speed-option").forEach(u=>u.classList.remove("active")),a.classList.add("active")})})}updateSettingsMenu(){const t=this.controlsContainer.querySelector(".wontum-settings-menu");t.innerHTML=`
+      `).join(""),t.querySelectorAll(".wontum-speed-option").forEach(o=>{o.addEventListener("click",r=>{const a=r.target,c=parseFloat(a.dataset.speed||"1");this.player.setPlaybackRate(c),t.querySelectorAll(".wontum-speed-option").forEach(u=>u.classList.remove("active")),a.classList.add("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>
       </div>
     `;const e=t.querySelector('[data-setting="sticky-controls"]');e.addEventListener("click",()=>{this.stickyControls=!this.stickyControls,e.querySelector(".wontum-toggle-switch").classList.toggle("active"),this.stickyControls?(this.controlsContainer.classList.add("sticky"),this.progressContainer.classList.add("sticky")):(this.controlsContainer.classList.remove("sticky"),this.progressContainer.classList.remove("sticky"))})}updateQualityMenu(t){const e=this.controlsContainer.querySelector(".wontum-quality-menu"),i=t||this.player.getQualities();if(!i||i.length===0){e.innerHTML='<div class="wontum-quality-option">No qualities available</div>';return}e.innerHTML=`
       <div class="wontum-quality-option active" data-quality="-1">Auto</div>
-      ${i.map((n,s)=>`
-        <div class="wontum-quality-option" data-quality="${s}">${n.name}</div>
+      ${i.map((n,o)=>`
+        <div class="wontum-quality-option" data-quality="${o}">${n.name}</div>
       `).join("")}
-    `,e.querySelectorAll(".wontum-quality-option").forEach(n=>{n.addEventListener("click",s=>{const r=s.target,a=parseInt(r.dataset.quality||"-1");this.player.setQuality(a),e.querySelectorAll(".wontum-quality-option").forEach(l=>l.classList.remove("active")),r.classList.add("active")})})}showControls(){this.controlsContainer.classList.remove("hidden"),this.progressContainer.classList.remove("hidden")}hideControls(){if(this.stickyControls||this.isVolumeSliderActive)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),i=Math.floor(t%60);return`${e}:${i.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>'}getPipIcon(){return'<svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></svg>'}getSkipBackwardIcon(){return`<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    `,e.querySelectorAll(".wontum-quality-option").forEach(n=>{n.addEventListener("click",o=>{const r=o.target,a=parseInt(r.dataset.quality||"-1");this.player.setQuality(a),e.querySelectorAll(".wontum-quality-option").forEach(c=>c.classList.remove("active")),r.classList.add("active")})})}showControls(){this.controlsContainer.classList.remove("hidden"),this.progressContainer.classList.remove("hidden")}hideControls(){if(this.stickyControls||this.isVolumeSliderActive)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),i=Math.floor(t%60);return`${e}:${i.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>'}getPipIcon(){return'<svg viewBox="0 0 24 24"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></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"/>
@@ -595,4 +595,4 @@
 			<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>`}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 z{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 i=new URL(t);return this.config.cloudFrontDomains.some(n=>i.hostname.includes(n))}catch{return!1}}isS3Url(t){return t.includes(".s3.")||t.includes("s3.amazonaws.com")||t.startsWith("s3://")}async signCloudFrontUrl(t,e=0){var s,r;if(this.signedUrls.has(t))return t;if((s=this.config)!=null&&s.signUrl)try{const a=await this.config.signUrl(t);return this.signedUrls.add(t),a}catch(a){const l=(a==null?void 0:a.name)==="AbortError"||((r=a==null?void 0:a.message)==null?void 0:r.includes("aborted"));if(l&&e<2)return console.warn(`Sign URL aborted, retrying (${e+1}/2)...`),await new Promise(u=>setTimeout(u,300)),this.signCloudFrontUrl(t,e+1);throw console.error("Failed to sign CloudFront URL:",a),l?new Error("Failed to sign CloudFront URL: Request was aborted. If using Apollo Client or other GraphQL clients, consider moving the query outside component lifecycle or using useQuery with skip option."):new Error(`Failed to sign CloudFront URL: ${(a==null?void 0:a.message)||"Unknown error"}`)}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 i=t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);return i?i[2]:t}async getPresignedUrl(t){var n;const e=this.extractS3Key(t),i=this.urlCache.get(e);if(i&&i.expiresAt>Date.now())return i.url;if((n=this.config)!=null&&n.getPresignedUrl)try{const s=await this.config.getPresignedUrl(e);return this.urlCache.set(e,{url:s,expiresAt:Date.now()+50*60*1e3}),s}catch(s){throw console.error("Failed to generate presigned URL:",s),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,i="us-east-1"){return`https://${t}.s3.${i}.amazonaws.com/${e}`}static parseS3Uri(t){if(!t.startsWith("s3://"))return null;const e=t.replace("s3://","").split("/"),i=e[0],n=e.slice(1).join("/");return{bucket:i,key:n}}clearCache(){this.urlCache.clear(),this.signedUrls.clear()}}class k{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,"qualities",[]);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 $(t.analytics),this.s3Handler=new z(t.s3Config),this.videoElement=this.createVideoElement(),this.container.appendChild(this.videoElement),this.uiController=new A(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 i=document.createElement("track");i.kind="subtitles",i.label=e.label,i.src=e.src,i.srclang=e.srclang,e.default&&(i.default=!0),this.videoElement.appendChild(i)})}createVideoElement(){const t=document.createElement("video");return t.className="wontum-player-video",t.style.width="100%",t.style.height="100%",t.playsInline=!0,t.crossOrigin="use-credentials",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){var e;try{const i=await this.s3Handler.processUrl(t);if(g.isSupported()){const n=((e=this.config.s3Config)==null?void 0:e.withCredentials)??!1,s={...this.config.hlsConfig,xhrSetup:(r,a)=>{var l;n&&(r.withCredentials=!0),(l=this.config.hlsConfig)!=null&&l.xhrSetup&&this.config.hlsConfig.xhrSetup(r,a)}};this.hls=new g(s),this.hls.loadSource(i),this.hls.attachMedia(this.videoElement),this.hls.on(g.Events.MANIFEST_PARSED,(r,a)=>{const l=this.extractQualities(a.levels);this.qualities=l}),this.hls.on(g.Events.LEVEL_SWITCHED,(r,a)=>{var u;const l=(u=this.hls)==null?void 0:u.levels[a.level];l&&(this.state.quality=`${l.height}p`,this.emit("qualitychange",{quality:this.state.quality}))}),this.hls.on(g.Events.ERROR,(r,a)=>{a.fatal&&this.handleHlsError(a)})}else if(this.videoElement.canPlayType("application/vnd.apple.mpegurl"))this.videoElement.src=i;else throw new Error("HLS is not supported in this browser")}catch(i){console.error("Failed to load video source:",i),this.emit("error",{error:i})}}extractQualities(t){return t.map(e=>({height:e.height,width:e.width,bitrate:e.bitrate,name:`${e.height}p`}))}handleHlsError(t){var e,i;switch(t.type){case g.ErrorTypes.NETWORK_ERROR:console.error("Network error occurred"),(e=this.hls)==null||e.startLoad();break;case g.ErrorTypes.MEDIA_ERROR:console.error("Media error occurred"),(i=this.hls)==null||i.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)}getQualities(){return this.qualities}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}))}async enterPictureInPicture(){if(document.pictureInPictureEnabled&&!this.videoElement.disablePictureInPicture)try{await this.videoElement.requestPictureInPicture(),this.emit("pictureinpictureenter",{})}catch(t){throw console.error("Failed to enter Picture-in-Picture:",t),t}}async exitPictureInPicture(){if(document.pictureInPictureElement)try{await document.exitPictureInPicture(),this.emit("pictureinpictureexit",{})}catch(t){throw console.error("Failed to exit Picture-in-Picture:",t),t}}async togglePictureInPicture(){document.pictureInPictureElement?await this.exitPictureInPicture():await this.enterPictureInPicture()}getState(){return{...this.state}}getVideoElement(){return this.videoElement}enableSubtitles(t){const e=this.videoElement.textTracks;for(let i=0;i<e.length;i++)e[i].mode=i===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(i=>i.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 i;(i=this.eventListeners.get(t))==null||i.delete(e)}emit(t,e){var n;const i={type:t,data:e,timestamp:Date.now()};(n=this.eventListeners.get(t))==null||n.forEach(s=>{s(i)})}destroy(){this.hls&&(this.hls.destroy(),this.hls=null),this.uiController.destroy(),this.videoElement.remove(),this.eventListeners.clear(),this.analytics.destroy()}}class O{constructor(t){o(this,"file");o(this,"videoElement",null);o(this,"info",null);if(!this.isVideoFile(t))throw new Error(`Invalid file type: ${t.type}. Expected a video file.`);this.file=t}isVideoFile(t){if(t.type.startsWith("video/"))return!0;const e=[".mp4",".webm",".ogg",".mov",".avi",".mkv",".flv",".wmv",".m4v",".3gp",".ts",".m3u8"],i=t.name.toLowerCase();return e.some(n=>i.endsWith(n))}async extract(){return new Promise((t,e)=>{try{this.videoElement=document.createElement("video"),this.videoElement.preload="metadata",this.videoElement.muted=!0;const i=URL.createObjectURL(this.file);this.videoElement.onloadedmetadata=()=>{try{if(!this.videoElement){e(new Error("Video element not initialized"));return}const n=this.videoElement.videoWidth,s=this.videoElement.videoHeight,r=this.videoElement.duration,a=this.calculateAspectRatio(n,s),l=this.file.size,u=this.formatBytes(l),p=this.formatDuration(r),v=this.getFileExtension(this.file.name),f=r>0?Math.round(l*8/r/1e3):void 0;this.info={width:n,height:s,aspectRatio:a,size:l,sizeInBytes:l,sizeFormatted:u,duration:r,durationInSeconds:r,durationFormatted:p,mimeType:this.file.type||"video/unknown",fileName:this.file.name,fileExtension:v,bitrate:f},URL.revokeObjectURL(i),this.videoElement.remove(),t(this.info)}catch(n){URL.revokeObjectURL(i),e(n)}},this.videoElement.onerror=()=>{URL.revokeObjectURL(i),e(new Error(`Failed to load video file: ${this.file.name}`))},this.videoElement.src=i}catch(i){e(i)}})}calculateAspectRatio(t,e){const i=this.getGCD(t,e),n=t/i,s=e/i,r=n/s;return Math.abs(r-16/9)<.01?"16:9":Math.abs(r-4/3)<.01?"4:3":Math.abs(r-21/9)<.01?"21:9":Math.abs(r-1)<.01?"1:1":`${n}:${s}`}getGCD(t,e){return e===0?t:this.getGCD(e,t%e)}formatBytes(t){if(t===0)return"0 Bytes";const e=1024,i=["Bytes","KB","MB","GB","TB"],n=Math.floor(Math.log(t)/Math.log(e));return`${parseFloat((t/Math.pow(e,n)).toFixed(2))} ${i[n]}`}formatDuration(t){if(!isFinite(t)||t<0)return"00:00";const e=Math.floor(t/3600),i=Math.floor(t%3600/60),n=Math.floor(t%60);return e>0?`${e.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`:`${i.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`}getFileExtension(t){const e=t.split(".");return e.length>1?`.${e[e.length-1].toLowerCase()}`:""}get width(){var t;return((t=this.info)==null?void 0:t.width)||0}get height(){var t;return((t=this.info)==null?void 0:t.height)||0}get aspectRatio(){var t;return((t=this.info)==null?void 0:t.aspectRatio)||"unknown"}get size(){var t;return((t=this.info)==null?void 0:t.size)||0}get sizeInBytes(){var t;return((t=this.info)==null?void 0:t.sizeInBytes)||0}get sizeFormatted(){var t;return((t=this.info)==null?void 0:t.sizeFormatted)||"0 Bytes"}get duration(){var t;return((t=this.info)==null?void 0:t.duration)||0}get durationInSeconds(){var t;return((t=this.info)==null?void 0:t.durationInSeconds)||0}get durationFormatted(){var t;return((t=this.info)==null?void 0:t.durationFormatted)||"00:00"}get mimeType(){var t;return((t=this.info)==null?void 0:t.mimeType)||this.file.type||"video/unknown"}get fileName(){return this.file.name}get fileExtension(){var t;return((t=this.info)==null?void 0:t.fileExtension)||""}get bitrate(){var t;return(t=this.info)==null?void 0:t.bitrate}get quality(){if(!this.info)return"unknown";const t=this.info.height;return t>=2160?"4K (2160p)":t>=1440?"2K (1440p)":t>=1080?"Full HD (1080p)":t>=720?"HD (720p)":t>=480?"SD (480p)":t>=360?"360p":"Low Quality"}getInfo(){return this.info}destroy(){this.videoElement&&(this.videoElement.remove(),this.videoElement=null),this.info=null}}const _=c=>{const{src:t,autoplay:e,muted:i,controls:n=!0,poster:s,preload:r,theme:a,s3Config:l,analytics:u,hlsConfig:p,subtitles:v,stickyControls:f,onReady:E,onPlay:x,onPause:S,onEnded:C,onTimeUpdate:L,onVolumeChange:T,onError:P,onLoadedMetadata:I,onQualityChange:M,style:D,className:H,width:y="100%",height:w="500px"}=c,b=h.useRef(null),q=h.useRef(null);return h.useEffect(()=>{if(!b.current)return;const V={src:t,container:b.current,autoplay:e,muted:i,controls:n,poster:s,preload:r,theme:a,s3Config:l,analytics:u,hlsConfig:p,subtitles:v,stickyControls:f},d=new k(V);return q.current=d,x&&d.on("play",x),S&&d.on("pause",S),C&&d.on("ended",C),P&&d.on("error",m=>{var R;return P((R=m.data)==null?void 0:R.error)}),I&&d.on("loadedmetadata",I),M&&d.on("qualitychange",m=>M(m.data.level)),L&&d.on("timeupdate",m=>L(m.data.currentTime)),T&&d.on("volumechange",m=>T(m.data.volume,m.data.muted)),E&&E(d),()=>{d.destroy(),q.current=null}},[t]),B.jsx("div",{ref:b,className:H,style:{width:typeof y=="number"?`${y}px`:y,height:typeof w=="number"?`${w}px`:w,...D}})},Q=c=>{const[t,e]=h.useState(null),[i,n]=h.useState(null),s=h.useRef(null);return h.useEffect(()=>{if(!s.current)return;const r=new k({...c,container:s.current});e(r);const a=()=>{n(r.getState())};return r.on("play",a),r.on("pause",a),r.on("timeupdate",a),r.on("volumechange",a),r.on("loadedmetadata",a),()=>{r.destroy()}},[c.src]),{containerRef:s,player:t,state:i}},U=F.createContext({player:null,state:null}),Y=c=>{const{player:t,children:e}=c,[i,n]=h.useState(t.getState());return h.useEffect(()=>{const s=()=>{n(t.getState())};return t.on("play",s),t.on("pause",s),t.on("timeupdate",s),t.on("volumechange",s),t.on("loadedmetadata",s),()=>{}},[t]),B.jsx(U.Provider,{value:{player:t,state:i},children:e})},X=()=>{const c=F.useContext(U);if(!c.player)throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");return c};exports.Analytics=$;exports.S3Handler=z;exports.UIController=A;exports.WontumFileInfo=O;exports.WontumPlayer=k;exports.WontumPlayerProvider=Y;exports.WontumPlayerReact=_;exports.useWontumPlayer=Q;exports.useWontumPlayerContext=X;
+		</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 z{constructor(t){s(this,"config");s(this,"urlCache",new Map);s(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 i=new URL(t);return this.config.cloudFrontDomains.some(n=>i.hostname.includes(n))}catch{return!1}}isS3Url(t){return t.includes(".s3.")||t.includes("s3.amazonaws.com")||t.startsWith("s3://")}async signCloudFrontUrl(t,e=0){var o,r;if(this.signedUrls.has(t))return t;if((o=this.config)!=null&&o.signUrl)try{const a=await this.config.signUrl(t);return this.signedUrls.add(t),a}catch(a){const c=(a==null?void 0:a.name)==="AbortError"||((r=a==null?void 0:a.message)==null?void 0:r.includes("aborted"));if(c&&e<2)return console.warn(`Sign URL aborted, retrying (${e+1}/2)...`),await new Promise(u=>setTimeout(u,300)),this.signCloudFrontUrl(t,e+1);throw console.error("Failed to sign CloudFront URL:",a),c?new Error("Failed to sign CloudFront URL: Request was aborted. If using Apollo Client or other GraphQL clients, consider moving the query outside component lifecycle or using useQuery with skip option."):new Error(`Failed to sign CloudFront URL: ${(a==null?void 0:a.message)||"Unknown error"}`)}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 i=t.match(/([^.]+)\.s3\.amazonaws\.com\/(.+)/);return i?i[2]:t}async getPresignedUrl(t){var n;const e=this.extractS3Key(t),i=this.urlCache.get(e);if(i&&i.expiresAt>Date.now())return i.url;if((n=this.config)!=null&&n.getPresignedUrl)try{const o=await this.config.getPresignedUrl(e);return this.urlCache.set(e,{url:o,expiresAt:Date.now()+50*60*1e3}),o}catch(o){throw console.error("Failed to generate presigned URL:",o),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,i="us-east-1"){return`https://${t}.s3.${i}.amazonaws.com/${e}`}static parseS3Uri(t){if(!t.startsWith("s3://"))return null;const e=t.replace("s3://","").split("/"),i=e[0],n=e.slice(1).join("/");return{bucket:i,key:n}}clearCache(){this.urlCache.clear(),this.signedUrls.clear()}}class E{constructor(t){s(this,"container");s(this,"videoElement");s(this,"hls",null);s(this,"config");s(this,"eventListeners",new Map);s(this,"analytics");s(this,"s3Handler");s(this,"uiController");s(this,"qualities",[]);s(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 O(t.analytics),this.s3Handler=new z(t.s3Config),this.videoElement=this.createVideoElement(),this.container.appendChild(this.videoElement),this.uiController=new $(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 i=document.createElement("track");i.kind="subtitles",i.label=e.label,i.src=e.src,i.srclang=e.srclang,e.default&&(i.default=!0),this.videoElement.appendChild(i)})}createVideoElement(){const t=document.createElement("video");return t.className="wontum-player-video",t.style.width="100%",t.style.height="100%",t.playsInline=!0,t.crossOrigin="use-credentials",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){var e;try{const i=await this.s3Handler.processUrl(t);if(g.isSupported()){const n=((e=this.config.s3Config)==null?void 0:e.withCredentials)??!1,o={...this.config.hlsConfig,xhrSetup:(r,a)=>{var c;n&&(r.withCredentials=!0),(c=this.config.hlsConfig)!=null&&c.xhrSetup&&this.config.hlsConfig.xhrSetup(r,a)}};this.hls=new g(o),this.hls.loadSource(i),this.hls.attachMedia(this.videoElement),this.hls.on(g.Events.MANIFEST_PARSED,(r,a)=>{const c=this.extractQualities(a.levels);this.qualities=c}),this.hls.on(g.Events.LEVEL_SWITCHED,(r,a)=>{var u;const c=(u=this.hls)==null?void 0:u.levels[a.level];c&&(this.state.quality=`${c.height}p`,this.emit("qualitychange",{quality:this.state.quality}))}),this.hls.on(g.Events.ERROR,(r,a)=>{a.fatal&&this.handleHlsError(a)})}else if(this.videoElement.canPlayType("application/vnd.apple.mpegurl"))this.videoElement.src=i;else throw new Error("HLS is not supported in this browser")}catch(i){console.error("Failed to load video source:",i),this.emit("error",{error:i})}}extractQualities(t){return t.map(e=>({height:e.height,width:e.width,bitrate:e.bitrate,name:`${e.height}p`}))}handleHlsError(t){var e,i;switch(t.type){case g.ErrorTypes.NETWORK_ERROR:console.error("Network error occurred"),(e=this.hls)==null||e.startLoad();break;case g.ErrorTypes.MEDIA_ERROR:console.error("Media error occurred"),(i=this.hls)==null||i.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)}getQualities(){return this.qualities}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}))}async enterPictureInPicture(){if(document.pictureInPictureEnabled&&!this.videoElement.disablePictureInPicture)try{await this.videoElement.requestPictureInPicture(),this.emit("pictureinpictureenter",{})}catch(t){throw console.error("Failed to enter Picture-in-Picture:",t),t}}async exitPictureInPicture(){if(document.pictureInPictureElement)try{await document.exitPictureInPicture(),this.emit("pictureinpictureexit",{})}catch(t){throw console.error("Failed to exit Picture-in-Picture:",t),t}}async togglePictureInPicture(){document.pictureInPictureElement?await this.exitPictureInPicture():await this.enterPictureInPicture()}getState(){return{...this.state}}getVideoElement(){return this.videoElement}enableSubtitles(t){const e=this.videoElement.textTracks;for(let i=0;i<e.length;i++)e[i].mode=i===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(i=>i.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 i;(i=this.eventListeners.get(t))==null||i.delete(e)}emit(t,e){var n;const i={type:t,data:e,timestamp:Date.now()};(n=this.eventListeners.get(t))==null||n.forEach(o=>{o(i)})}destroy(){this.hls&&(this.hls.destroy(),this.hls=null),this.uiController.destroy(),this.videoElement.remove(),this.eventListeners.clear(),this.analytics.destroy()}}class J{constructor(t){s(this,"file");s(this,"videoElement",null);s(this,"info",null);if(!this.isVideoFile(t))throw new Error(`Invalid file type: ${t.type}. Expected a video file.`);this.file=t}isVideoFile(t){if(t.type.startsWith("video/"))return!0;const e=[".mp4",".webm",".ogg",".mov",".avi",".mkv",".flv",".wmv",".m4v",".3gp",".ts",".m3u8"],i=t.name.toLowerCase();return e.some(n=>i.endsWith(n))}async extract(){return new Promise((t,e)=>{try{this.videoElement=document.createElement("video"),this.videoElement.preload="metadata",this.videoElement.muted=!0;const i=URL.createObjectURL(this.file);this.videoElement.onloadedmetadata=()=>{try{if(!this.videoElement){e(new Error("Video element not initialized"));return}const n=this.videoElement.videoWidth,o=this.videoElement.videoHeight,r=this.videoElement.duration,a=this.calculateAspectRatio(n,o),c=this.file.size,u=this.formatBytes(c),p=this.formatDuration(r),v=this.getFileExtension(this.file.name),f=r>0?Math.round(c*8/r/1e3):void 0;this.info={width:n,height:o,aspectRatio:a,size:c,sizeInBytes:c,sizeFormatted:u,duration:r,durationInSeconds:r,durationFormatted:p,mimeType:this.file.type||"video/unknown",fileName:this.file.name,fileExtension:v,bitrate:f},URL.revokeObjectURL(i),this.videoElement.remove(),t(this.info)}catch(n){URL.revokeObjectURL(i),e(n)}},this.videoElement.onerror=()=>{URL.revokeObjectURL(i),e(new Error(`Failed to load video file: ${this.file.name}`))},this.videoElement.src=i}catch(i){e(i)}})}calculateAspectRatio(t,e){const i=this.getGCD(t,e),n=t/i,o=e/i,r=n/o;return Math.abs(r-16/9)<.01?"16:9":Math.abs(r-4/3)<.01?"4:3":Math.abs(r-21/9)<.01?"21:9":Math.abs(r-1)<.01?"1:1":`${n}:${o}`}getGCD(t,e){return e===0?t:this.getGCD(e,t%e)}formatBytes(t){if(t===0)return"0 Bytes";const e=1024,i=["Bytes","KB","MB","GB","TB"],n=Math.floor(Math.log(t)/Math.log(e));return`${parseFloat((t/Math.pow(e,n)).toFixed(2))} ${i[n]}`}formatDuration(t){if(!isFinite(t)||t<0)return"00:00";const e=Math.floor(t/3600),i=Math.floor(t%3600/60),n=Math.floor(t%60);return e>0?`${e.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`:`${i.toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`}getFileExtension(t){const e=t.split(".");return e.length>1?`.${e[e.length-1].toLowerCase()}`:""}get width(){var t;return((t=this.info)==null?void 0:t.width)||0}get height(){var t;return((t=this.info)==null?void 0:t.height)||0}get aspectRatio(){var t;return((t=this.info)==null?void 0:t.aspectRatio)||"unknown"}get size(){var t;return((t=this.info)==null?void 0:t.size)||0}get sizeInBytes(){var t;return((t=this.info)==null?void 0:t.sizeInBytes)||0}get sizeFormatted(){var t;return((t=this.info)==null?void 0:t.sizeFormatted)||"0 Bytes"}get duration(){var t;return((t=this.info)==null?void 0:t.duration)||0}get durationInSeconds(){var t;return((t=this.info)==null?void 0:t.durationInSeconds)||0}get durationFormatted(){var t;return((t=this.info)==null?void 0:t.durationFormatted)||"00:00"}get mimeType(){var t;return((t=this.info)==null?void 0:t.mimeType)||this.file.type||"video/unknown"}get fileName(){return this.file.name}get fileExtension(){var t;return((t=this.info)==null?void 0:t.fileExtension)||""}get bitrate(){var t;return(t=this.info)==null?void 0:t.bitrate}get quality(){if(!this.info)return"unknown";const t=this.info.height;return t>=2160?"4K (2160p)":t>=1440?"2K (1440p)":t>=1080?"Full HD (1080p)":t>=720?"HD (720p)":t>=480?"SD (480p)":t>=360?"360p":"Low Quality"}getInfo(){return this.info}destroy(){this.videoElement&&(this.videoElement.remove(),this.videoElement=null),this.info=null}}const Z=l=>{const{src:t,autoplay:e,muted:i,controls:n=!0,poster:o,preload:r,theme:a,s3Config:c,analytics:u,hlsConfig:p,subtitles:v,stickyControls:f,onReady:S,onPlay:x,onPause:C,onEnded:L,onTimeUpdate:T,onVolumeChange:I,onError:P,onLoadedMetadata:R,onQualityChange:M,style:U,className:H,width:y="100%",height:w="500px"}=l,b=h.useRef(null),q=h.useRef(null);return h.useEffect(()=>{if(!b.current)return;const W={src:t,container:b.current,autoplay:e,muted:i,controls:n,poster:o,preload:r,theme:a,s3Config:c,analytics:u,hlsConfig:p,subtitles:v,stickyControls:f},d=new E(W);return q.current=d,x&&d.on("play",x),C&&d.on("pause",C),L&&d.on("ended",L),P&&d.on("error",m=>{var A;return P((A=m.data)==null?void 0:A.error)}),R&&d.on("loadedmetadata",R),M&&d.on("qualitychange",m=>M(m.data.level)),T&&d.on("timeupdate",m=>T(m.data.currentTime)),I&&d.on("volumechange",m=>I(m.data.volume,m.data.muted)),S&&S(d),()=>{d.destroy(),q.current=null}},[t]),B.jsx("div",{ref:b,className:H,style:{width:typeof y=="number"?`${y}px`:y,height:typeof w=="number"?`${w}px`:w,...U}})},tt=l=>{const[t,e]=h.useState(null),[i,n]=h.useState(null),o=h.useRef(null);return h.useEffect(()=>{if(!o.current)return;const r=new E({...l,container:o.current});e(r);const a=()=>{n(r.getState())};return r.on("play",a),r.on("pause",a),r.on("timeupdate",a),r.on("volumechange",a),r.on("loadedmetadata",a),()=>{r.destroy()}},[l.src]),{containerRef:o,player:t,state:i}},D=F.createContext({player:null,state:null}),et=l=>{const{player:t,children:e}=l,[i,n]=h.useState(t.getState());return h.useEffect(()=>{const o=()=>{n(t.getState())};return t.on("play",o),t.on("pause",o),t.on("timeupdate",o),t.on("volumechange",o),t.on("loadedmetadata",o),()=>{}},[t]),B.jsx(D.Provider,{value:{player:t,state:i},children:e})},it=()=>{const l=F.useContext(D);if(!l.player)throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");return l};exports.Analytics=O;exports.S3Handler=z;exports.UIController=$;exports.WontumFileInfo=J;exports.WontumPlayer=E;exports.WontumPlayerProvider=et;exports.WontumPlayerReact=Z;exports.useWontumPlayer=tt;exports.useWontumPlayerContext=it;

package/dist/wontum-player.esm.js

@@ -1,24 +1,32 @@
-var V = Object.defineProperty;
-var N = (c, t, e) => t in c ? V(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var o = (c, t, e) => N(c, typeof t != "symbol" ? t + "" : t, e);
+var H = Object.defineProperty;
+var V = (c, t, e) => t in c ? H(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var s = (c, t, e) => V(c, typeof t != "symbol" ? t + "" : t, e);
 import p from "hls.js";
-import { jsx as F } from "react/jsx-runtime";
-import * as $ from "react";
+import { jsx as A } from "react/jsx-runtime";
+import * as F from "react";
 import { useRef as b, useEffect as E, useState as k } from "react";
-class W {
+class N {
   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());
+    s(this, "config");
+    s(this, "sessionId");
+    s(this, "events", []);
+    s(this, "sessionStartTime");
+    s(this, "playbackStartTime", null);
+    s(this, "totalPlayTime", 0);
+    s(this, "totalBufferTime", 0);
+    s(this, "bufferStartTime", null);
+    s(this, "rebufferCount", 0);
+    s(this, "seekCount", 0);
+    s(this, "webSocket", null);
+    s(this, "socketIO", null);
+    s(this, "wsReconnectTimeout", null);
+    s(this, "isDestroyed", !1);
+    var e, i;
+    if (this.config = t, this.sessionId = (t == null ? void 0 : t.sessionId) || this.generateSessionId(), this.sessionStartTime = Date.now(), (e = this.config) != null && e.webSocket) {
+      const n = this.config.webSocket;
+      "type" in n ? n.type === "socket.io" ? this.initializeSocketIO() : this.initializeWebSocket() : this.initializeWebSocket();
+    }
+    (i = this.config) != null && i.enabled && this.trackEvent("session_start", this.getSessionData());
   }
   trackEvent(t, e = {}) {
     var n;
@@ -34,7 +42,7 @@ class W {
         ...this.getQoEMetrics()
       }
     };
-    this.events.push(i), this.updateMetrics(t, e), this.config.endpoint && this.sendEvent(i), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, i.data);
+    this.events.push(i), this.updateMetrics(t, e), this.webSocket && this.webSocket.readyState === WebSocket.OPEN && this.sendToWebSocket(i), this.socketIO && this.socketIO.connected && this.sendToSocketIO(i), this.config.endpoint && this.sendEvent(i), process.env.NODE_ENV === "development" && console.log("[Analytics]", t, i.data);
   }
   updateMetrics(t, e) {
     switch (t) {
@@ -104,6 +112,72 @@ class W {
   generateSessionId() {
     return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
   }
+  async initializeSocketIO() {
+    var e;
+    if (!((e = this.config) != null && e.webSocket) || !("type" in this.config.webSocket)) return;
+    const t = this.config.webSocket;
+    if (t.type === "socket.io")
+      try {
+        if (typeof t.connection == "string") {
+          const n = (await import("socket.io-client")).default;
+          this.socketIO = n(t.connection, t.options || {});
+        } else
+          this.socketIO = t.connection;
+        if (!this.socketIO) return;
+        this.socketIO.on("connect", () => {
+          process.env.NODE_ENV === "development" && console.log("[Analytics Socket.IO] Connected"), t.onConnect && t.onConnect();
+        }), this.socketIO.on("connect_error", (i) => {
+          console.error("[Analytics Socket.IO] Connection error:", i), t.onError && t.onError(i);
+        }), this.socketIO.on("disconnect", (i) => {
+          process.env.NODE_ENV === "development" && console.log("[Analytics Socket.IO] Disconnected:", i), t.onDisconnect && t.onDisconnect(i);
+        }), this.socketIO.on("error", (i) => {
+          console.error("[Analytics Socket.IO] Error:", i), t.onError && t.onError(i);
+        });
+      } catch (i) {
+        console.error("[Analytics Socket.IO] Failed to initialize:", i);
+      }
+  }
+  sendToSocketIO(t) {
+    var e;
+    if (!(!this.socketIO || !this.socketIO.connected))
+      try {
+        const i = (e = this.config) == null ? void 0 : e.webSocket, n = i != null && i.transform ? i.transform(t) : t, o = (i == null ? void 0 : i.eventName) || "analytics";
+        this.socketIO.emit(o, n), process.env.NODE_ENV === "development" && console.log(`[Analytics Socket.IO] Emitted (${o}):`, t.eventType);
+      } catch (i) {
+        console.error("[Analytics Socket.IO] Failed to emit event:", i);
+      }
+  }
+  initializeWebSocket() {
+    var e;
+    if (!((e = this.config) != null && e.webSocket)) return;
+    const t = this.config.webSocket;
+    try {
+      typeof t.connection == "string" ? this.webSocket = new WebSocket(t.connection) : this.webSocket = t.connection, this.webSocket.onopen = (i) => {
+        process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Connected"), t.onOpen && t.onOpen(i);
+      }, this.webSocket.onerror = (i) => {
+        console.error("[Analytics WebSocket] Error:", i), t.onError && t.onError(i);
+      }, this.webSocket.onclose = (i) => {
+        if (process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Disconnected"), t.onClose && t.onClose(i), t.autoReconnect !== !1 && !this.isDestroyed) {
+          const o = t.reconnectDelay || 3e3;
+          process.env.NODE_ENV === "development" && console.log(`[Analytics WebSocket] Reconnecting in ${o}ms...`), this.wsReconnectTimeout = window.setTimeout(() => {
+            this.initializeWebSocket();
+          }, o);
+        }
+      };
+    } catch (i) {
+      console.error("[Analytics WebSocket] Failed to initialize:", i);
+    }
+  }
+  sendToWebSocket(t) {
+    var e;
+    if (!(!this.webSocket || this.webSocket.readyState !== WebSocket.OPEN))
+      try {
+        const i = (e = this.config) == null ? void 0 : e.webSocket, n = i != null && i.transform ? i.transform(t) : t;
+        this.webSocket.send(JSON.stringify(n)), process.env.NODE_ENV === "development" && console.log("[Analytics WebSocket] Sent:", t.eventType);
+      } catch (i) {
+        console.error("[Analytics WebSocket] Failed to send event:", i);
+      }
+  }
   getEvents() {
     return [...this.events];
   }
@@ -116,42 +190,42 @@ class W {
   }
   destroy() {
     var t;
-    (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.events = [];
+    this.isDestroyed = !0, (t = this.config) != null && t.enabled && this.trackEvent("session_end", this.getSessionData()), this.wsReconnectTimeout && (clearTimeout(this.wsReconnectTimeout), this.wsReconnectTimeout = null), this.webSocket && (this.webSocket.close(), this.webSocket = null), this.socketIO && (this.socketIO.removeAllListeners(), this.socketIO.disconnect(), this.socketIO = null), this.events = [];
   }
 }
-class j {
+class W {
   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, "volumeContainer");
-    o(this, "fullscreenButton");
-    o(this, "pipButton");
-    o(this, "settingsButton");
+    s(this, "container");
+    s(this, "player");
+    s(this, "controlsContainer");
+    s(this, "progressContainer");
+    s(this, "progressBar");
+    s(this, "playButton");
+    s(this, "skipBackwardButton");
+    s(this, "skipForwardButton");
+    s(this, "volumeButton");
+    s(this, "volumeContainer");
+    s(this, "fullscreenButton");
+    s(this, "pipButton");
+    s(this, "settingsButton");
     // private timeDisplay: HTMLElement
-    o(this, "volumeSlider");
-    o(this, "progressInput");
+    s(this, "volumeSlider");
+    s(this, "progressInput");
     // private controlsVisible = true
-    o(this, "hideControlsTimeout", null);
-    o(this, "stickyControls", !1);
-    o(this, "isVolumeSliderActive", !1);
+    s(this, "hideControlsTimeout", null);
+    s(this, "stickyControls", !1);
+    s(this, "isVolumeSliderActive", !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.volumeContainer = this.controlsContainer.querySelector(".wontum-volume-container"), this.fullscreenButton = this.controlsContainer.querySelector(".wontum-fullscreen-btn"), this.pipButton = this.controlsContainer.querySelector(".wontum-pip-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 || {}, i = e.primaryColor || "#3b82f6", n = e.accentColor || "#2563eb", s = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", r = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", a = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", l = e.progressHeight || "6px", u = e.borderRadius || "4px", m = document.createElement("style");
+    const e = this.player.config.theme || {}, i = e.primaryColor || "#3b82f6", n = e.accentColor || "#2563eb", o = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", r = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", a = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", l = e.progressHeight || "6px", u = e.borderRadius || "4px", m = document.createElement("style");
     m.id = t, m.textContent = `
       .wontum-player-container {
         position: relative;
         background: #000;
-        font-family: ${s};
+        font-family: ${o};
         overflow: hidden;
         --primary-color: ${i};
         --accent-color: ${n};
@@ -729,11 +803,11 @@ class j {
     }), this.skipForwardButton.addEventListener("click", () => {
       this.player.skipForward(10);
     }), this.progressInput.addEventListener("input", (i) => {
-      const n = i.target, s = parseFloat(n.value), r = this.player.getState(), a = s / 100 * r.duration;
+      const n = i.target, o = parseFloat(n.value), r = this.player.getState(), a = o / 100 * r.duration;
       this.player.seek(a);
     }), this.volumeSlider.addEventListener("input", (i) => {
-      const n = i.target, s = parseFloat(n.value) / 100;
-      this.player.setVolume(s);
+      const n = i.target, o = parseFloat(n.value) / 100;
+      this.player.setVolume(o);
     }), this.volumeButton.addEventListener("click", () => {
       this.player.getState().muted ? this.player.unmute() : this.player.mute();
     }), this.volumeContainer.addEventListener("mouseenter", () => {
@@ -761,8 +835,8 @@ class j {
     const t = this.controlsContainer.querySelectorAll(".wontum-tab");
     t.forEach((i) => {
       i.addEventListener("click", (n) => {
-        const s = n.currentTarget, r = s.getAttribute("data-tab");
-        t.forEach((u) => u.classList.remove("active")), s.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((u) => u.classList.remove("active"));
+        const o = n.currentTarget, r = o.getAttribute("data-tab");
+        t.forEach((u) => u.classList.remove("active")), o.classList.add("active"), this.controlsContainer.querySelectorAll(".wontum-tab-panel").forEach((u) => u.classList.remove("active"));
         const l = this.controlsContainer.querySelector(`[data-panel="${r}"]`);
         l == null || l.classList.add("active");
       });
@@ -782,8 +856,8 @@ class j {
     }), this.player.on("timeupdate", (t) => {
       const { currentTime: e } = t.data, i = this.player.getState();
       if (i.duration > 0) {
-        const s = e / i.duration * 100;
-        this.progressBar.style.width = `${s}%`, this.progressInput.value = s.toString();
+        const o = e / i.duration * 100;
+        this.progressBar.style.width = `${o}%`, this.progressInput.value = o.toString();
       }
       const n = this.controlsContainer.querySelector(".wontum-current-time");
       n.textContent = this.formatTime(e);
@@ -811,15 +885,15 @@ class j {
     t.innerHTML = `
       <div class="wontum-subtitle-option ${i === -1 ? "active" : ""}" data-track="-1">Off</div>
       ${e.map(
-      (n, s) => `
-        <div class="wontum-subtitle-option ${s === i ? "active" : ""}" data-track="${s}">
-          ${n.label || n.language || `Track ${s + 1}`}
+      (n, o) => `
+        <div class="wontum-subtitle-option ${o === i ? "active" : ""}" data-track="${o}">
+          ${n.label || n.language || `Track ${o + 1}`}
         </div>
       `
     ).join("")}
     `, t.querySelectorAll(".wontum-subtitle-option").forEach((n) => {
-      n.addEventListener("click", (s) => {
-        const r = s.target, a = parseInt(r.dataset.track || "-1");
+      n.addEventListener("click", (o) => {
+        const r = o.target, a = parseInt(r.dataset.track || "-1");
         a === -1 ? this.player.disableSubtitles() : this.player.enableSubtitles(a), t.querySelectorAll(".wontum-subtitle-option").forEach((l) => l.classList.remove("active")), r.classList.add("active");
       });
     });
@@ -827,13 +901,13 @@ class j {
   updateSpeedMenu() {
     const t = this.controlsContainer.querySelector(".wontum-speed-menu"), i = this.player.getState().playbackRate || 1, n = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
     t.innerHTML = n.map(
-      (s) => `
-        <div class="wontum-speed-option ${i === s ? "active" : ""}" data-speed="${s}">
-          ${s === 1 ? "Normal" : s + "x"}
+      (o) => `
+        <div class="wontum-speed-option ${i === o ? "active" : ""}" data-speed="${o}">
+          ${o === 1 ? "Normal" : o + "x"}
         </div>
       `
-    ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((s) => {
-      s.addEventListener("click", (r) => {
+    ).join(""), t.querySelectorAll(".wontum-speed-option").forEach((o) => {
+      o.addEventListener("click", (r) => {
         const a = r.target, l = parseFloat(a.dataset.speed || "1");
         this.player.setPlaybackRate(l), t.querySelectorAll(".wontum-speed-option").forEach((u) => u.classList.remove("active")), a.classList.add("active");
       });
@@ -861,13 +935,13 @@ class j {
     e.innerHTML = `
       <div class="wontum-quality-option active" data-quality="-1">Auto</div>
       ${i.map(
-      (n, s) => `
-        <div class="wontum-quality-option" data-quality="${s}">${n.name}</div>
+      (n, o) => `
+        <div class="wontum-quality-option" data-quality="${o}">${n.name}</div>
       `
     ).join("")}
     `, e.querySelectorAll(".wontum-quality-option").forEach((n) => {
-      n.addEventListener("click", (s) => {
-        const r = s.target, a = parseInt(r.dataset.quality || "-1");
+      n.addEventListener("click", (o) => {
+        const r = o.target, a = parseInt(r.dataset.quality || "-1");
         this.player.setQuality(a), e.querySelectorAll(".wontum-quality-option").forEach((l) => l.classList.remove("active")), r.classList.add("active");
       });
     });
@@ -933,11 +1007,11 @@ class j {
     this.hideControlsTimeout && clearTimeout(this.hideControlsTimeout), this.controlsContainer.remove();
   }
 }
-class Q {
+class _ {
   constructor(t) {
-    o(this, "config");
-    o(this, "urlCache", /* @__PURE__ */ new Map());
-    o(this, "signedUrls", /* @__PURE__ */ new Set());
+    s(this, "config");
+    s(this, "urlCache", /* @__PURE__ */ new Map());
+    s(this, "signedUrls", /* @__PURE__ */ new Set());
     this.config = t;
   }
   /**
@@ -971,10 +1045,10 @@ class Q {
    * The endpoint should set signed cookies and return the URL
    */
   async signCloudFrontUrl(t, e = 0) {
-    var s, r;
+    var o, r;
     if (this.signedUrls.has(t))
       return t;
-    if ((s = this.config) != null && s.signUrl)
+    if ((o = this.config) != null && o.signUrl)
       try {
         const a = await this.config.signUrl(t);
         return this.signedUrls.add(t), a;
@@ -1010,13 +1084,13 @@ class Q {
       return i.url;
     if ((n = this.config) != null && n.getPresignedUrl)
       try {
-        const s = await this.config.getPresignedUrl(e);
+        const o = await this.config.getPresignedUrl(e);
         return this.urlCache.set(e, {
-          url: s,
+          url: o,
           expiresAt: Date.now() + 50 * 60 * 1e3
-        }), s;
-      } catch (s) {
-        throw console.error("Failed to generate presigned URL:", s), new Error("Failed to generate presigned URL for S3 object");
+        }), o;
+      } catch (o) {
+        throw console.error("Failed to generate presigned URL:", o), 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;
   }
@@ -1042,18 +1116,18 @@ class Q {
     this.urlCache.clear(), this.signedUrls.clear();
   }
 }
-class A {
+class $ {
   constructor(t) {
-    o(this, "container");
-    o(this, "videoElement");
-    o(this, "hls", null);
-    o(this, "config");
-    o(this, "eventListeners", /* @__PURE__ */ new Map());
-    o(this, "analytics");
-    o(this, "s3Handler");
-    o(this, "uiController");
-    o(this, "qualities", []);
-    o(this, "state", {
+    s(this, "container");
+    s(this, "videoElement");
+    s(this, "hls", null);
+    s(this, "config");
+    s(this, "eventListeners", /* @__PURE__ */ new Map());
+    s(this, "analytics");
+    s(this, "s3Handler");
+    s(this, "uiController");
+    s(this, "qualities", []);
+    s(this, "state", {
       playing: !1,
       paused: !0,
       ended: !1,
@@ -1069,7 +1143,7 @@ class A {
     });
     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 W(t.analytics), this.s3Handler = new Q(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new j(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 N(t.analytics), this.s3Handler = new _(t.s3Config), this.videoElement = this.createVideoElement(), this.container.appendChild(this.videoElement), this.uiController = new W(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) => {
@@ -1139,14 +1213,14 @@ class A {
     try {
       const i = await this.s3Handler.processUrl(t);
       if (p.isSupported()) {
-        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, s = {
+        const n = ((e = this.config.s3Config) == null ? void 0 : e.withCredentials) ?? !1, o = {
           ...this.config.hlsConfig,
           xhrSetup: (r, a) => {
             var l;
             n && (r.withCredentials = !0), (l = this.config.hlsConfig) != null && l.xhrSetup && this.config.hlsConfig.xhrSetup(r, a);
           }
         };
-        this.hls = new p(s), this.hls.loadSource(i), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (r, a) => {
+        this.hls = new p(o), this.hls.loadSource(i), this.hls.attachMedia(this.videoElement), this.hls.on(p.Events.MANIFEST_PARSED, (r, a) => {
           const l = this.extractQualities(a.levels);
           this.qualities = l;
         }), this.hls.on(p.Events.LEVEL_SWITCHED, (r, a) => {
@@ -1313,8 +1387,8 @@ class A {
       data: e,
       timestamp: Date.now()
     };
-    (n = this.eventListeners.get(t)) == null || n.forEach((s) => {
-      s(i);
+    (n = this.eventListeners.get(t)) == null || n.forEach((o) => {
+      o(i);
     });
   }
   destroy() {
@@ -1323,9 +1397,9 @@ class A {
 }
 class G {
   constructor(t) {
-    o(this, "file");
-    o(this, "videoElement", null);
-    o(this, "info", null);
+    s(this, "file");
+    s(this, "videoElement", null);
+    s(this, "info", null);
     if (!this.isVideoFile(t))
       throw new Error(`Invalid file type: ${t.type}. Expected a video file.`);
     this.file = t;
@@ -1353,10 +1427,10 @@ class G {
               e(new Error("Video element not initialized"));
               return;
             }
-            const n = this.videoElement.videoWidth, s = this.videoElement.videoHeight, r = this.videoElement.duration, a = this.calculateAspectRatio(n, s), l = this.file.size, u = this.formatBytes(l), m = this.formatDuration(r), g = this.getFileExtension(this.file.name), v = r > 0 ? Math.round(l * 8 / r / 1e3) : void 0;
+            const n = this.videoElement.videoWidth, o = this.videoElement.videoHeight, r = this.videoElement.duration, a = this.calculateAspectRatio(n, o), l = this.file.size, u = this.formatBytes(l), m = this.formatDuration(r), g = this.getFileExtension(this.file.name), v = r > 0 ? Math.round(l * 8 / r / 1e3) : void 0;
             this.info = {
               width: n,
-              height: s,
+              height: o,
               aspectRatio: a,
               size: l,
               sizeInBytes: l,
@@ -1386,8 +1460,8 @@ class G {
    * Calculate aspect ratio (e.g., "16:9", "4:3")
    */
   calculateAspectRatio(t, e) {
-    const i = this.getGCD(t, e), n = t / i, s = e / i, r = n / s;
-    return Math.abs(r - 16 / 9) < 0.01 ? "16:9" : Math.abs(r - 4 / 3) < 0.01 ? "4:3" : Math.abs(r - 21 / 9) < 0.01 ? "21:9" : Math.abs(r - 1) < 0.01 ? "1:1" : `${n}:${s}`;
+    const i = this.getGCD(t, e), n = t / i, o = e / i, r = n / o;
+    return Math.abs(r - 16 / 9) < 0.01 ? "16:9" : Math.abs(r - 4 / 3) < 0.01 ? "4:3" : Math.abs(r - 21 / 9) < 0.01 ? "21:9" : Math.abs(r - 1) < 0.01 ? "1:1" : `${n}:${o}`;
   }
   /**
    * Get Greatest Common Divisor
@@ -1494,7 +1568,7 @@ const K = (c) => {
     autoplay: e,
     muted: i,
     controls: n = !0,
-    poster: s,
+    poster: o,
     preload: r,
     theme: a,
     s3Config: l,
@@ -1502,29 +1576,29 @@ const K = (c) => {
     hlsConfig: m,
     subtitles: g,
     stickyControls: v,
-    onReady: x,
-    onPlay: S,
+    onReady: S,
+    onPlay: x,
     onPause: C,
     onEnded: L,
     onTimeUpdate: T,
     onVolumeChange: I,
     onError: M,
-    onLoadedMetadata: q,
+    onLoadedMetadata: R,
     onQualityChange: P,
-    style: U,
-    className: D,
+    style: D,
+    className: O,
     width: f = "100%",
-    height: w = "500px"
-  } = c, y = b(null), B = b(null);
+    height: y = "500px"
+  } = c, w = b(null), q = b(null);
   return E(() => {
-    if (!y.current) return;
-    const H = {
+    if (!w.current) return;
+    const U = {
       src: t,
-      container: y.current,
+      container: w.current,
       autoplay: e,
       muted: i,
       controls: n,
-      poster: s,
+      poster: o,
       preload: r,
       theme: a,
       s3Config: l,
@@ -1532,32 +1606,32 @@ const K = (c) => {
       hlsConfig: m,
       subtitles: g,
       stickyControls: v
-    }, d = new A(H);
-    return B.current = d, S && d.on("play", S), C && d.on("pause", C), L && d.on("ended", L), M && d.on("error", (h) => {
-      var R;
-      return M((R = h.data) == null ? void 0 : R.error);
-    }), q && d.on("loadedmetadata", q), P && d.on("qualitychange", (h) => P(h.data.level)), T && d.on("timeupdate", (h) => T(h.data.currentTime)), I && d.on("volumechange", (h) => I(h.data.volume, h.data.muted)), x && x(d), () => {
-      d.destroy(), B.current = null;
+    }, d = new $(U);
+    return q.current = d, x && d.on("play", x), C && d.on("pause", C), L && d.on("ended", L), M && d.on("error", (h) => {
+      var B;
+      return M((B = h.data) == null ? void 0 : B.error);
+    }), R && d.on("loadedmetadata", R), P && d.on("qualitychange", (h) => P(h.data.level)), T && d.on("timeupdate", (h) => T(h.data.currentTime)), I && d.on("volumechange", (h) => I(h.data.volume, h.data.muted)), S && S(d), () => {
+      d.destroy(), q.current = null;
     };
-  }, [t]), /* @__PURE__ */ F(
+  }, [t]), /* @__PURE__ */ A(
     "div",
     {
-      ref: y,
-      className: D,
+      ref: w,
+      className: O,
       style: {
         width: typeof f == "number" ? `${f}px` : f,
-        height: typeof w == "number" ? `${w}px` : w,
-        ...U
+        height: typeof y == "number" ? `${y}px` : y,
+        ...D
       }
     }
   );
 }, J = (c) => {
-  const [t, e] = k(null), [i, n] = k(null), s = b(null);
+  const [t, e] = k(null), [i, n] = k(null), o = b(null);
   return E(() => {
-    if (!s.current) return;
-    const r = new A({
+    if (!o.current) return;
+    const r = new $({
       ...c,
-      container: s.current
+      container: o.current
     });
     e(r);
     const a = () => {
@@ -1567,34 +1641,34 @@ const K = (c) => {
       r.destroy();
     };
   }, [c.src]), {
-    containerRef: s,
+    containerRef: o,
     player: t,
     state: i
   };
-}, z = $.createContext({
+}, z = F.createContext({
   player: null,
   state: null
 }), Z = (c) => {
   const { player: t, children: e } = c, [i, n] = k(t.getState());
   return E(() => {
-    const s = () => {
+    const o = () => {
       n(t.getState());
     };
-    return t.on("play", s), t.on("pause", s), t.on("timeupdate", s), t.on("volumechange", s), t.on("loadedmetadata", s), () => {
+    return t.on("play", o), t.on("pause", o), t.on("timeupdate", o), t.on("volumechange", o), t.on("loadedmetadata", o), () => {
     };
-  }, [t]), /* @__PURE__ */ F(z.Provider, { value: { player: t, state: i }, children: e });
+  }, [t]), /* @__PURE__ */ A(z.Provider, { value: { player: t, state: i }, children: e });
 }, tt = () => {
-  const c = $.useContext(z);
+  const c = F.useContext(z);
   if (!c.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
   return c;
 };
 export {
-  W as Analytics,
-  Q as S3Handler,
-  j as UIController,
+  N as Analytics,
+  _ as S3Handler,
+  W as UIController,
   G as WontumFileInfo,
-  A as WontumPlayer,
+  $ as WontumPlayer,
   Z as WontumPlayerProvider,
   K as WontumPlayerReact,
   J as useWontumPlayer,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@obipascal/player",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"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",
@@ -33,8 +33,10 @@
 		"@types/node": "^20.10.0",
 		"@types/react": "^19.2.8",
 		"@types/react-dom": "^19.2.3",
+		"@types/socket.io-client": "^1.4.36",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
+		"socket.io-client": "^4.8.3",
 		"typescript": "^5.3.3",
 		"vite": "^5.0.8",
 		"vite-plugin-dts": "^3.7.0"
@@ -53,5 +55,8 @@
 		"react-dom": {
 			"optional": true
 		}
+	},
+	"optionalDependencies": {
+		"socket.io-client": "^4.8.3"
 	}
 }