@obipascal/player 1.0.13 → 1.0.15

package/dist/index.d.ts

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

package/dist/wontum-player.cjs.js

@@ -1,4 +1,4 @@
-"use strict";var j=Object.create;var q=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var K=(l,t,e)=>t in l?q(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var J=(l,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Y(t))!G.call(l,i)&&i!==e&&q(l,i,{get:()=>t[i],enumerable:!(n=Q(t,i))||n.enumerable});return l};var Z=(l,t,e)=>(e=l!=null?j(X(l)):{},J(t||!l||!l.__esModule?q(e,"default",{value:l,enumerable:!0}):e,l));var a=(l,t,e)=>K(l,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("hls.js"),O=require("react/jsx-runtime"),d=require("react");function tt(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,n.get?n:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const z=tt(d);class F{constructor(t){a(this,"config");a(this,"sessionId");a(this,"events",[]);a(this,"sessionStartTime");a(this,"playbackStartTime",null);a(this,"totalPlayTime",0);a(this,"totalBufferTime",0);a(this,"bufferStartTime",null);a(this,"rebufferCount",0);a(this,"seekCount",0);a(this,"webSocket",null);a(this,"socketIO",null);a(this,"wsReconnectTimeout",null);a(this,"isDestroyed",!1);var e,n;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 i=this.config.webSocket;"type"in i?i.type==="socket.io"?this.initializeSocketIO():this.initializeWebSocket():this.initializeWebSocket()}(n=this.config)!=null&&n.enabled&&this.trackEvent("session_start",this.getSessionData())}trackEvent(t,e={}){var i;if(!((i=this.config)!=null&&i.enabled))return;const n={eventType:t,timestamp:Date.now(),sessionId:this.sessionId,videoId:this.config.videoId,userId:this.config.userId,data:{...e,...this.getQoEMetrics()}};this.events.push(n),this.updateMetrics(t,e),this.webSocket&&this.webSocket.readyState===WebSocket.OPEN&&this.sendToWebSocket(n),this.socketIO&&this.socketIO.connected&&this.sendToSocketIO(n),this.config.endpoint&&this.sendEvent(n),process.env.NODE_ENV==="development"&&console.log("[Analytics]",t,n.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(n){console.error("Failed to send analytics event:",n)}}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 i=(await import("socket.io-client")).default;this.socketIO=i(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",n=>{console.error("[Analytics Socket.IO] Connection error:",n),t.onError&&t.onError(n)}),this.socketIO.on("disconnect",n=>{process.env.NODE_ENV==="development"&&console.log("[Analytics Socket.IO] Disconnected:",n),t.onDisconnect&&t.onDisconnect(n)}),this.socketIO.on("error",n=>{console.error("[Analytics Socket.IO] Error:",n),t.onError&&t.onError(n)})}catch(n){console.error("[Analytics Socket.IO] Failed to initialize:",n)}}sendToSocketIO(t){var e;if(!(!this.socketIO||!this.socketIO.connected))try{const n=(e=this.config)==null?void 0:e.webSocket,i=n!=null&&n.transform?n.transform(t):t,o=(n==null?void 0:n.eventName)||"analytics";this.socketIO.emit(o,i),process.env.NODE_ENV==="development"&&console.log(`[Analytics Socket.IO] Emitted (${o}):`,t.eventType)}catch(n){console.error("[Analytics Socket.IO] Failed to emit event:",n)}}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=n=>{process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Connected"),t.onOpen&&t.onOpen(n)},this.webSocket.onerror=n=>{console.error("[Analytics WebSocket] Error:",n),t.onError&&t.onError(n)},this.webSocket.onclose=n=>{if(process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Disconnected"),t.onClose&&t.onClose(n),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(n){console.error("[Analytics WebSocket] Failed to initialize:",n)}}sendToWebSocket(t){var e;if(!(!this.webSocket||this.webSocket.readyState!==WebSocket.OPEN))try{const n=(e=this.config)==null?void 0:e.webSocket,i=n!=null&&n.transform?n.transform(t):t;this.webSocket.send(JSON.stringify(i)),process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Sent:",t.eventType)}catch(n){console.error("[Analytics WebSocket] Failed to send event:",n)}}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 D{constructor(t,e){a(this,"container");a(this,"player");a(this,"controlsContainer");a(this,"progressContainer");a(this,"progressBar");a(this,"playButton");a(this,"skipBackwardButton");a(this,"skipForwardButton");a(this,"volumeButton");a(this,"volumeContainer");a(this,"fullscreenButton");a(this,"pipButton");a(this,"settingsButton");a(this,"volumeSlider");a(this,"progressInput");a(this,"hideControlsTimeout",null);a(this,"stickyControls",!1);a(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(this.container.classList.add("wontum-player-container"),document.getElementById(t))return;const e=this.player.config.theme||{},n=e.primaryColor||"#3b82f6",i=e.accentColor||"#2563eb",o=e.fontFamily||"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",s=e.controlsBackground||"linear-gradient(to top, rgba(0,0,0,0.8), transparent)",r=e.buttonHoverBg||"rgba(255, 255, 255, 0.1)",c=e.progressHeight||"6px",u=e.borderRadius||"4px",h=document.createElement("style");h.id=t,h.textContent=`
+"use strict";var j=Object.create;var q=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var K=(l,t,e)=>t in l?q(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var J=(l,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Y(t))!G.call(l,i)&&i!==e&&q(l,i,{get:()=>t[i],enumerable:!(n=Q(t,i))||n.enumerable});return l};var Z=(l,t,e)=>(e=l!=null?j(X(l)):{},J(t||!l||!l.__esModule?q(e,"default",{value:l,enumerable:!0}):e,l));var a=(l,t,e)=>K(l,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("hls.js"),O=require("react/jsx-runtime"),d=require("react");function tt(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,n.get?n:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const z=tt(d);class F{constructor(t){a(this,"config");a(this,"sessionId");a(this,"events",[]);a(this,"sessionStartTime");a(this,"playbackStartTime",null);a(this,"totalPlayTime",0);a(this,"totalBufferTime",0);a(this,"bufferStartTime",null);a(this,"rebufferCount",0);a(this,"seekCount",0);a(this,"webSocket",null);a(this,"socketIO",null);a(this,"wsReconnectTimeout",null);a(this,"isDestroyed",!1);var e,n;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 i=this.config.webSocket;"type"in i?i.type==="socket.io"?this.initializeSocketIO():this.initializeWebSocket():this.initializeWebSocket()}(n=this.config)!=null&&n.enabled&&this.trackEvent("session_start",this.getSessionData())}trackEvent(t,e={}){var i;if(!((i=this.config)!=null&&i.enabled))return;const n={eventType:t,timestamp:Date.now(),sessionId:this.sessionId,videoId:this.config.videoId,userId:this.config.userId,data:{...e,...this.getQoEMetrics()}};this.events.push(n),this.updateMetrics(t,e),this.webSocket&&this.webSocket.readyState===WebSocket.OPEN&&this.sendToWebSocket(n),this.socketIO&&this.socketIO.connected&&this.sendToSocketIO(n),this.config.endpoint&&this.sendEvent(n),process.env.NODE_ENV==="development"&&console.log("[Analytics]",t,n.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(n){console.error("Failed to send analytics event:",n)}}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 i=(await import("socket.io-client")).default;this.socketIO=i(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",n=>{console.error("[Analytics Socket.IO] Connection error:",n),t.onError&&t.onError(n)}),this.socketIO.on("disconnect",n=>{process.env.NODE_ENV==="development"&&console.log("[Analytics Socket.IO] Disconnected:",n),t.onDisconnect&&t.onDisconnect(n)}),this.socketIO.on("error",n=>{console.error("[Analytics Socket.IO] Error:",n),t.onError&&t.onError(n)})}catch(n){console.error("[Analytics Socket.IO] Failed to initialize:",n)}}sendToSocketIO(t){var e;if(!(!this.socketIO||!this.socketIO.connected))try{const n=(e=this.config)==null?void 0:e.webSocket,i=n!=null&&n.transform?n.transform(t):t,o=(n==null?void 0:n.eventName)||"analytics";this.socketIO.emit(o,i),process.env.NODE_ENV==="development"&&console.log(`[Analytics Socket.IO] Emitted (${o}):`,t.eventType)}catch(n){console.error("[Analytics Socket.IO] Failed to emit event:",n)}}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=n=>{process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Connected"),t.onOpen&&t.onOpen(n)},this.webSocket.onerror=n=>{console.error("[Analytics WebSocket] Error:",n),t.onError&&t.onError(n)},this.webSocket.onclose=n=>{if(process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Disconnected"),t.onClose&&t.onClose(n),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(n){console.error("[Analytics WebSocket] Failed to initialize:",n)}}sendToWebSocket(t){var e;if(!(!this.webSocket||this.webSocket.readyState!==WebSocket.OPEN))try{const n=(e=this.config)==null?void 0:e.webSocket,i=n!=null&&n.transform?n.transform(t):t;this.webSocket.send(JSON.stringify(i)),process.env.NODE_ENV==="development"&&console.log("[Analytics WebSocket] Sent:",t.eventType)}catch(n){console.error("[Analytics WebSocket] Failed to send event:",n)}}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 D{constructor(t,e){a(this,"container");a(this,"player");a(this,"controlsContainer");a(this,"progressContainer");a(this,"progressBar");a(this,"playButton");a(this,"skipBackwardButton");a(this,"skipForwardButton");a(this,"volumeButton");a(this,"volumeContainer");a(this,"fullscreenButton");a(this,"pipButton");a(this,"settingsButton");a(this,"volumeSlider");a(this,"progressInput");a(this,"hideControlsTimeout",null);a(this,"stickyControls",!1);a(this,"isVolumeSliderActive",!1);if(this.container=t,this.player=e,this.container.classList.add("wontum-player-container"),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.playButton||!this.progressInput||!this.progressBar)throw console.error("Failed to query UI elements. Container:",this.container),new Error("Failed to initialize UI controller - elements not found");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||{},n=e.primaryColor||"#3b82f6",i=e.accentColor||"#2563eb",o=e.fontFamily||"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",s=e.controlsBackground||"linear-gradient(to top, rgba(0,0,0,0.8), transparent)",r=e.buttonHoverBg||"rgba(255, 255, 255, 0.1)",c=e.progressHeight||"6px",u=e.borderRadius||"4px",h=document.createElement("style");h.id=t,h.textContent=`
       .wontum-player-container {
         position: relative;
         background: #000;

package/dist/wontum-player.esm.js

@@ -2,8 +2,8 @@ var _ = Object.defineProperty;
 var j = (u, t, e) => t in u ? _(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
 var a = (u, t, e) => j(u, typeof t != "symbol" ? t + "" : t, e);
 import y from "hls.js";
-import { jsx as $ } from "react/jsx-runtime";
-import * as z from "react";
+import { jsx as z } from "react/jsx-runtime";
+import * as $ from "react";
 import { useRef as E, useEffect as S, useState as v, useCallback as L } from "react";
 class O {
   constructor(t) {
@@ -215,11 +215,13 @@ class Q {
     a(this, "hideControlsTimeout", null);
     a(this, "stickyControls", !1);
     a(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();
+    if (this.container = t, this.player = e, this.container.classList.add("wontum-player-container"), 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.playButton || !this.progressInput || !this.progressBar)
+      throw console.error("Failed to query UI elements. Container:", this.container), new Error("Failed to initialize UI controller - elements not found");
+    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 (this.container.classList.add("wontum-player-container"), document.getElementById(t)) return;
+    if (document.getElementById(t)) return;
     const e = this.player.config.theme || {}, n = e.primaryColor || "#3b82f6", i = e.accentColor || "#2563eb", o = e.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", s = e.controlsBackground || "linear-gradient(to top, rgba(0,0,0,0.8), transparent)", r = e.buttonHoverBg || "rgba(255, 255, 255, 0.1)", l = e.progressHeight || "6px", c = e.borderRadius || "4px", d = document.createElement("style");
     d.id = t, d.textContent = `
       .wontum-player-container {
@@ -1715,7 +1717,7 @@ const tt = (u) => {
     A,
     R,
     b
-  ]), /* @__PURE__ */ $(
+  ]), /* @__PURE__ */ z(
     "div",
     {
       ref: f,
@@ -1747,7 +1749,7 @@ const tt = (u) => {
     player: t,
     state: n
   };
-}, U = z.createContext({
+}, U = $.createContext({
   player: null,
   state: null
 }), nt = (u) => {
@@ -1758,9 +1760,9 @@ const tt = (u) => {
     };
     return t.on("play", o), t.on("pause", o), t.on("timeupdate", o), t.on("volumechange", o), t.on("loadedmetadata", o), () => {
     };
-  }, [t]), /* @__PURE__ */ $(U.Provider, { value: { player: t, state: n }, children: e });
+  }, [t]), /* @__PURE__ */ z(U.Provider, { value: { player: t, state: n }, children: e });
 }, it = () => {
-  const u = z.useContext(U);
+  const u = $.useContext(U);
   if (!u.player)
     throw new Error("useWontumPlayerContext must be used within WontumPlayerProvider");
   return u;

package/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/analytics.d.ts

@@ -1,36 +0,0 @@
-import { AnalyticsConfig, AnalyticsEvent } from './types';
-
-/**
- * Analytics - Tracks player events and quality metrics
- */
-export declare class Analytics {
-    private config;
-    private sessionId;
-    private events;
-    private sessionStartTime;
-    private playbackStartTime;
-    private totalPlayTime;
-    private totalBufferTime;
-    private bufferStartTime;
-    private rebufferCount;
-    private seekCount;
-    private webSocket;
-    private socketIO;
-    private wsReconnectTimeout;
-    private isDestroyed;
-    constructor(config?: AnalyticsConfig);
-    trackEvent(eventType: string, data?: Record<string, any>): void;
-    private updateMetrics;
-    private getQoEMetrics;
-    private getSessionData;
-    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/file-info.d.ts

@@ -1,101 +0,0 @@
-/**
- * Video file information extractor
- * Extracts metadata from video files (width, height, duration, size, etc.)
- */
-declare global {
-    interface HTMLVideoElement {
-        mozHasAudio?: boolean;
-        webkitAudioDecodedByteCount?: number;
-        audioTracks?: {
-            length: number;
-        };
-    }
-}
-export interface VideoFileInfo {
-    width: number;
-    height: number;
-    aspectRatio: string;
-    size: number;
-    sizeInBytes: number;
-    sizeFormatted: string;
-    duration: number;
-    durationInSeconds: number;
-    durationFormatted: string;
-    mimeType: string;
-    fileName: string;
-    fileExtension: string;
-    bitrate?: number;
-    frameRate?: number;
-    audioChannels?: number;
-    videoCodec?: string;
-    audioCodec?: string;
-    hasAudio?: boolean;
-}
-export declare class WontumFileInfo {
-    private file;
-    private videoElement;
-    private audioContext;
-    private info;
-    constructor(file: File);
-    /**
-     * Check if the file is a valid video file
-     */
-    private isVideoFile;
-    /**
-     * Extract video metadata
-     */
-    extract(): Promise<VideoFileInfo>;
-    /**
-     * Calculate aspect ratio (e.g., "16:9", "4:3")
-     */
-    private calculateAspectRatio;
-    /**
-     * Detect frame rate by analyzing video playback
-     */
-    private detectFrameRate;
-    /**
-     * Detect audio channel information using Web Audio API
-     */
-    private detectAudioInfo;
-    /**
-     * Get Greatest Common Divisor
-     */
-    private getGCD;
-    /**
-     * Format bytes to human-readable size
-     */
-    private formatBytes;
-    /**
-     * Format duration to HH:MM:SS
-     */
-    private formatDuration;
-    /**
-     * Get file extension
-     */
-    private getFileExtension;
-    get width(): number;
-    get height(): number;
-    get aspectRatio(): string;
-    get size(): number;
-    get sizeInBytes(): number;
-    get sizeFormatted(): string;
-    get duration(): number;
-    get durationInSeconds(): number;
-    get durationFormatted(): string;
-    get mimeType(): string;
-    get fileName(): string;
-    get fileExtension(): string;
-    get bitrate(): number | undefined;
-    get frameRate(): number | undefined;
-    get audioChannels(): number | undefined;
-    get hasAudio(): boolean;
-    get quality(): string;
-    /**
-     * Get all information as object
-     */
-    getInfo(): VideoFileInfo | null;
-    /**
-     * Clean up resources
-     */
-    destroy(): void;
-}

package/dist/src/index.d.ts

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

package/dist/src/player.d.ts

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

package/dist/src/react.d.ts

@@ -1,104 +0,0 @@
-import { WontumPlayer } from './player';
-import { WontumPlayerConfig, PlayerState, AnalyticsConfig, AnalyticsEvent } from './types';
-import { VideoFileInfo } from './file-info';
-import * as React from "react";
-export interface WontumPlayerReactProps extends Omit<WontumPlayerConfig, "container"> {
-    /** Callback when player is ready */
-    onReady?: (player: WontumPlayer) => void;
-    /** Callback for player events */
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnded?: () => void;
-    onTimeUpdate?: (currentTime: number) => void;
-    onVolumeChange?: (volume: number, muted: boolean) => void;
-    onError?: (error: any) => void;
-    onLoadedMetadata?: () => void;
-    onQualityChange?: (level: number) => void;
-    /** Container style */
-    style?: React.CSSProperties;
-    /** Container className */
-    className?: string;
-    /** Width of player */
-    width?: string | number;
-    /** Height of player */
-    height?: string | number;
-}
-/**
- * WontumPlayerReact - React component wrapper for WontumPlayer
- */
-export declare const WontumPlayerReact: React.FC<WontumPlayerReactProps>;
-/**
- * useWontumPlayer - React hook for imperative player control
- */
-export declare const useWontumPlayer: (config: Omit<WontumPlayerConfig, "container">) => {
-    containerRef: React.RefObject<HTMLDivElement | null>;
-    player: WontumPlayer | null;
-    state: PlayerState | null;
-};
-/**
- * WontumPlayerProvider - Context provider for player instance
- */
-interface WontumPlayerContextValue {
-    player: WontumPlayer | null;
-    state: PlayerState | null;
-}
-export declare const WontumPlayerProvider: React.FC<{
-    player: WontumPlayer;
-    children: React.ReactNode;
-}>;
-export declare const useWontumPlayerContext: () => WontumPlayerContextValue;
-/**
- * Hook for extracting video file information
- * @param file - The video file to analyze (File object or null)
- * @returns Object containing loading state, error, and video info
- */
-export interface UseVideoFileInfoResult {
-    /** Video file information (null if not loaded or error occurred) */
-    info: VideoFileInfo | null;
-    /** Whether extraction is in progress */
-    loading: boolean;
-    /** Error message if extraction failed */
-    error: string | null;
-    /** Re-extract file info (useful for retry after error) */
-    refetch: () => Promise<void>;
-}
-export declare const useVideoFileInfo: (file: File | null | undefined) => UseVideoFileInfoResult;
-/**
- * Result type for useAnalytics hook
- */
-export interface UseAnalyticsResult {
-    /** Track a custom event */
-    trackEvent: (eventType: string, data?: Record<string, any>) => void;
-    /** Get all tracked events */
-    getEvents: () => AnalyticsEvent[];
-    /** Get analytics metrics (session duration, buffer time, etc.) */
-    getMetrics: () => Record<string, any>;
-    /** WebSocket connection status (for websocket/socket.io analytics) */
-    connected: boolean;
-    /** Session ID for this analytics instance */
-    sessionId: string;
-}
-/**
- * React hook for analytics tracking
- * Automatically handles lifecycle management and cleanup
- *
- * @example
- * ```tsx
- * const { trackEvent, getMetrics, connected } = useAnalytics({
- *   enabled: true,
- *   endpoint: "https://api.example.com/analytics",
- *   videoId: "video-123",
- *   userId: "user-456",
- *   webSocket: {
- *     type: "socket.io",
- *     url: "https://analytics.example.com",
- *     auth: { token: "your-token" }
- *   }
- * })
- *
- * // Track custom events
- * trackEvent("button_clicked", { buttonName: "share" })
- * ```
- */
-export declare const useAnalytics: (config?: AnalyticsConfig) => UseAnalyticsResult;
-export {};

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

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

package/dist/src/types.d.ts

@@ -1,161 +0,0 @@
-import { Socket } from 'socket.io-client';
-
-/**
- * Player configuration options
- */
-export interface WontumPlayerConfig {
-    /** The S3 URL or HLS manifest URL */
-    src: string;
-    /** Container element or selector */
-    container: HTMLElement | string;
-    /** Autoplay video (subject to browser policies) */
-    autoplay?: boolean;
-    /** Start muted */
-    muted?: boolean;
-    /** Show player controls */
-    controls?: boolean;
-    /** Video poster image URL */
-    poster?: string;
-    /** Preload strategy: 'none' | 'metadata' | 'auto' */
-    preload?: "none" | "metadata" | "auto";
-    /** Custom player theme */
-    theme?: PlayerTheme;
-    /** S3 configuration for presigned URLs */
-    s3Config?: S3Config;
-    /** Analytics configuration */
-    analytics?: AnalyticsConfig;
-    /** HLS.js configuration override */
-    hlsConfig?: Partial<any>;
-    /** Subtitle tracks */
-    subtitles?: SubtitleTrack[];
-    /** Keep controls always visible (sticky) */
-    stickyControls?: boolean;
-}
-export interface PlayerTheme {
-    primaryColor?: string;
-    accentColor?: string;
-    fontFamily?: string;
-    controlsBackground?: string;
-    buttonHoverBg?: string;
-    progressHeight?: string;
-    borderRadius?: string;
-}
-export interface S3Config {
-    /** Function to sign URL and set CloudFront cookies (returns the original URL after setting cookies) */
-    signUrl?: (url: string) => Promise<string>;
-    /** Legacy: Function to generate presigned URL (for S3 direct access) */
-    getPresignedUrl?: (key: string) => Promise<string>;
-    /** CloudFront domain patterns to match (e.g., ['media.domain.com']) */
-    cloudFrontDomains?: string[];
-    /** Enable credentials (cookies) for HLS requests - required for CloudFront signed cookies */
-    withCredentials?: boolean;
-    /** S3 bucket region */
-    region?: string;
-    /** Custom S3 endpoint */
-    endpoint?: string;
-}
-export interface AnalyticsConfig {
-    /** Enable analytics */
-    enabled?: boolean;
-    /** 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 */
-    userId?: string;
-    /** 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
- */
-export interface PlayerState {
-    playing: boolean;
-    paused: boolean;
-    ended: boolean;
-    buffering: boolean;
-    currentTime: number;
-    duration: number;
-    volume: number;
-    muted: boolean;
-    playbackRate: number;
-    quality: string;
-    availableQualities: string[];
-    fullscreen: boolean;
-}
-/**
- * Player events (compatible with Mux Player and HTML5 MediaElement events)
- */
-export type PlayerEventType = "play" | "pause" | "playing" | "ended" | "timeupdate" | "volumechange" | "ratechange" | "seeked" | "seeking" | "waiting" | "loadstart" | "loadeddata" | "loadedmetadata" | "canplay" | "canplaythrough" | "durationchange" | "progress" | "error" | "abort" | "emptied" | "stalled" | "suspend" | "qualitychange" | "fullscreenchange" | "pictureinpictureenter" | "pictureinpictureexit" | "resize" | "sourcechange";
-export interface PlayerEvent {
-    type: PlayerEventType;
-    data?: any;
-    timestamp: number;
-}
-/**
- * Analytics event types
- */
-export interface AnalyticsEvent {
-    eventType: string;
-    timestamp: number;
-    sessionId: string;
-    videoId?: string;
-    userId?: string;
-    data: Record<string, any>;
-}
-export interface QualityLevel {
-    height: number;
-    width: number;
-    bitrate: number;
-    name: string;
-}
-export interface SubtitleTrack {
-    label: string;
-    src: string;
-    srclang: string;
-    default?: boolean;
-}

package/dist/src/ui-controller.d.ts

@@ -1,49 +0,0 @@
-import { WontumPlayer } from './player';
-
-/**
- * UI Controller - Manages player controls and interface
- */
-export declare class UIController {
-    private container;
-    private player;
-    private controlsContainer;
-    private progressContainer;
-    private progressBar;
-    private playButton;
-    private skipBackwardButton;
-    private skipForwardButton;
-    private volumeButton;
-    private volumeContainer;
-    private fullscreenButton;
-    private pipButton;
-    private settingsButton;
-    private volumeSlider;
-    private progressInput;
-    private hideControlsTimeout;
-    private stickyControls;
-    private isVolumeSliderActive;
-    constructor(container: HTMLElement, player: WontumPlayer);
-    private injectStyles;
-    private createProgressBar;
-    private createControls;
-    private setupEventListeners;
-    private setupPlayerEventListeners;
-    private updateSubtitleMenu;
-    private updateSpeedMenu;
-    private updateSettingsMenu;
-    private updateQualityMenu;
-    private showControls;
-    private hideControls;
-    private resetHideControlsTimeout;
-    private formatTime;
-    private getPlayIcon;
-    private getPauseIcon;
-    private getVolumeIcon;
-    private getMutedIcon;
-    private getFullscreenIcon;
-    private getPipIcon;
-    private getSkipBackwardIcon;
-    private getSkipForwardIcon;
-    private getSettingsIcon;
-    destroy(): void;
-}