@obipascal/player 1.0.12 → 1.0.13

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(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);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=`
       .wontum-player-container {
         position: relative;
         background: #000;
@@ -486,7 +486,7 @@
         transform: translateY(0) !important;
         pointer-events: all !important;
       }
-    `,document.head.appendChild(h),this.container.classList.add("wontum-player-container")}createProgressBar(){const t=document.createElement("div");t.className="wontum-progress-container",t.innerHTML=`
+    `,document.head.appendChild(h)}createProgressBar(){const t=document.createElement("div");t.className="wontum-progress-container",t.innerHTML=`
       <div class="wontum-progress-track"></div>
       <div class="wontum-progress-filled"></div>
       <input type="range" class="wontum-progress-input" min="0" max="100" value="0" step="0.1">

package/dist/wontum-player.esm.js

@@ -219,7 +219,7 @@ class Q {
   }
   injectStyles() {
     const t = "wontum-player-styles";
-    if (document.getElementById(t)) return;
+    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)", l = e.progressHeight || "6px", c = e.borderRadius || "4px", d = document.createElement("style");
     d.id = t, d.textContent = `
       .wontum-player-container {
@@ -709,7 +709,7 @@ class Q {
         transform: translateY(0) !important;
         pointer-events: all !important;
       }
-    `, document.head.appendChild(d), this.container.classList.add("wontum-player-container");
+    `, document.head.appendChild(d);
   }
   createProgressBar() {
     const t = document.createElement("div");

package/package.json

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