@viewlift/player-backup 1.0.0-lighteningjs → 1.0.1-lighteningjs

package/dist/index.cjs.css

@@ -0,0 +1,2 @@
+.seekbar-container{background:#444;border-radius:6px;bottom:50px;cursor:pointer;height:12px;left:50%;margin:0;position:absolute;transform:translateX(-50%);user-select:none;width:90%;z-index:20}.seekbar-buffer{background:#888;z-index:1}.seekbar-buffer,.seekbar-progress{border-radius:6px;height:100%;position:absolute;width:0}.seekbar-progress{background:#4169e1;transition:width .1s linear;z-index:2}.seekbar-thumb{background:#fff;border:2px solid #4169e1;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background .2s;width:16px;z-index:3}.seekbar-thumb:hover{background:#ffeaea}.seekbar-tooltip{background:#222;border-radius:4px;bottom:24px;color:#fff;font-size:12px;left:0;padding:2px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:10}.seekbar-duration-label,.seekbar-time-label{color:#eee;font-size:13px;margin-right:4px;position:relative;top:18px;z-index:5}.play-pause-btn{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%);z-index:30}
+/*# sourceMappingURL=index.cjs.css.map */

package/dist/index.cjs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["playerSeekbar.css","player-ui.css"],"names":[],"mappings":"AAAA,mBAME,eAAgB,CAGhB,iBAAkB,CALlB,WAAY,CAIZ,cAAe,CAHf,WAAY,CAHZ,QAAS,CAQT,QAAS,CATT,iBAAkB,CAElB,0BAA2B,CAQ3B,gBAAiB,CAJjB,SAAU,CAKV,UACF,CAEA,gBAGE,eAAgB,CAGhB,SACF,CAEA,kCAJE,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAGlB,OAaF,CARA,kBAGE,kBAAmB,CAInB,2BAA6B,CAD7B,SAEF,CAEA,eAME,eAAgB,CAEhB,wBAAyB,CADzB,iBAAkB,CAGlB,mCAAqC,CACrC,cAAe,CANf,WAAY,CAJZ,iBAAkB,CAClB,OAAQ,CACR,8BAAgC,CAShC,yBAA2B,CAR3B,UAAW,CAKX,SAIF,CACA,qBACE,kBACF,CAEA,iBAKE,eAAgB,CAGhB,iBAAkB,CANlB,WAAY,CAIZ,UAAW,CAGX,cAAe,CANf,MAAO,CAIP,eAAgB,CAIhB,mBAAoB,CAVpB,iBAAkB,CAGlB,0BAA2B,CAM3B,kBAAmB,CAEnB,UACF,CAEA,4CAIE,UAAW,CADX,cAAe,CAEf,gBAAiB,CAJjB,iBAAkB,CAClB,QAAS,CAIT,SACF,CCzEA,gBAEE,QAAS,CADT,2BAA6B,CAE7B,OAAQ,CACR,8BAAgC,CAChC,UACF","file":"index.cjs.css","sourcesContent":[".seekbar-container {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 50px;\n  height: 12px;\n  background: #444;\n  width: 90%;\n  cursor: pointer;\n  border-radius: 6px;\n  margin: 0;\n  user-select: none;\n  z-index: 20;\n}\n\n.seekbar-buffer {\n  position: absolute;\n  height: 100%;\n  background: #888;\n  width: 0;\n  border-radius: 6px;\n  z-index: 1;\n}\n\n.seekbar-progress {\n  position: absolute;\n  height: 100%;\n  background: #4169E1;\n  width: 0;\n  border-radius: 6px;\n  z-index: 2;\n  transition: width 0.1s linear;\n}\n\n.seekbar-thumb {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 16px;\n  height: 16px;\n  background: #fff;\n  border-radius: 50%;\n  border: 2px solid #4169E1;\n  z-index: 3;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.seekbar-thumb:hover {\n  background: #ffeaea;\n}\n\n.seekbar-tooltip {\n  position: absolute;\n  bottom: 24px;\n  left: 0;\n  transform: translateX(-50%);\n  background: #222;\n  color: #fff;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n\n.seekbar-time-label, .seekbar-duration-label {\n  position: relative;\n  top: 18px;\n  font-size: 13px;\n  color: #eee;\n  margin-right: 4px;\n  z-index: 5;\n}\n","/* Center play/pause button absolutely in the middle of the player */\n.play-pause-btn {\n  position: absolute !important;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 30;\n} "]}

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";require("@viewlift/player-backup/esm/bundle.css");var t,e=function(t){return"lgTv"==t?"lg":"vizioTv"==t?"vizio":"xfinityX1"==t?"xfinityX1":"xbox"==t?"xBox":"samsung"};!function(t){t.LG="lgTv",t.Vizio="vizioTv",t.XfinityX1="xfinityX1",t.Xbox="xbox",t.Samsung="samsungTv"}(t||(t={}));var n=function(){function t(t){var e=this;this.listeners={},this.boundEmitters={},this.boundHandlerMap={},this.options=t,this.videoElement=document.createElement("video"),this.videoElement.id=t.playerId,this.videoElement.autoplay=!!t.autoplay,t.width&&(this.videoElement.width=t.width),t.height&&(this.videoElement.height=t.height),this.videoElement.style.display="block",this.videoElement.style.background="black";var n={play:this.onPlay,pause:this.onPause,ended:this.onEnded,timeupdate:this.onTimeupdate,error:this.onError,loadedmetadata:this.onLoadedmetadata,seeking:this.onSeeking,seeked:this.onSeeked,volumechange:this.onVolumechange};Object.keys(n).forEach(function(t){var i=n[t].bind(e);e.boundHandlerMap[t]=i,e.videoElement.addEventListener(t,i)})}return t.prototype.initialize=function(){return window.appMainConfig.apiBaseUrl,this.options.playerId,this.options.contentId,this.options.authToken,this.options.autoplay,this.options.profileId,this.options.deviceName,e(this.options.deviceName),window.appSettings.device,window.appMainConfig.internalName,!0},t.prototype.attachTo=function(t){t.appendChild(this.videoElement)},t.prototype.play=function(){this.videoElement.play()},t.prototype.pause=function(){this.videoElement.pause()},t.prototype.stop=function(){this.videoElement.pause(),this.videoElement.currentTime=0},t.prototype.destroy=function(){var t=this;this.videoElement.parentNode&&this.videoElement.parentNode.removeChild(this.videoElement),this.removeAllListeners(),Object.keys(this.boundHandlerMap).forEach(function(e){t.boundHandlerMap[e]&&(t.videoElement.removeEventListener(e,t.boundHandlerMap[e]),delete t.boundHandlerMap[e])})},Object.defineProperty(t.prototype,"element",{get:function(){return this.videoElement},enumerable:!1,configurable:!0}),t.prototype.onPlay=function(t){"function"==typeof this.options.onPlaybackSuccess&&this.options.onPlaybackSuccess()},t.prototype.onPause=function(t){},t.prototype.onEnded=function(t){"function"==typeof this.options.onPlaybackEnded&&this.options.onPlaybackEnded()},t.prototype.onTimeupdate=function(t){},t.prototype.onError=function(t){"function"==typeof this.options.onPlaybackError&&this.options.onPlaybackError(t)},t.prototype.onLoadedmetadata=function(t){},t.prototype.onSeeking=function(t){},t.prototype.onSeeked=function(t){},t.prototype.onVolumechange=function(t){},t.prototype.on=function(t,e){this.listeners[t]||(this.listeners[t]=[],this.boundEmitters[t]||(this.boundEmitters[t]=this.emitEvent(t),this.videoElement.addEventListener(t,this.boundEmitters[t]))),this.listeners[t].push(e)},t.prototype.off=function(t,e){this.listeners[t]&&(this.listeners[t]=this.listeners[t].filter(function(t){return t!==e}),0===this.listeners[t].length&&(this.boundEmitters[t]&&(this.videoElement.removeEventListener(t,this.boundEmitters[t]),delete this.boundEmitters[t]),delete this.listeners[t]))},t.prototype.once=function(t,e){var n=this,i=function(){for(var o=[],s=0;s<arguments.length;s++)o[s]=arguments[s];e.apply(void 0,o),n.off(t,i)};this.on(t,i)},t.prototype.emitEvent=function(t){var e=this;return function(n){e.listeners[t]&&e.listeners[t].forEach(function(t){return t(n)})}},t.prototype.removeAllListeners=function(){var t=this;Object.keys(this.listeners).forEach(function(e){t.boundEmitters[e]&&(t.videoElement.removeEventListener(e,t.boundEmitters[e]),delete t.boundEmitters[e])}),this.listeners={}},t}();exports.LightningVideoPlayer=n;
+"use strict";var t=function(){return t=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var s in e=arguments[n])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var e=function(){function t(t){if(this.imgSrc=t.imgSrc||"",this.imgAltText=t.imgAltText||"",this.buttonText=t.buttonText||"",this.klassname=t.klassname||"default-button",this.width=t.width||100,this.height=t.height||50,this.focused=t.focused||!1,this.disabled=t.disabled||!1,this.handleClick=t.handleClick||function(){},"function"!=typeof t.handleClick)throw new Error("Button Class: handleClick must be a function");this.disabled&&(this.klassname+=" disabled"),this.focused&&(this.klassname+=" focused"),this.handleClick=this.handleClick.bind(this)}return t.prototype.mount=function(t){var e=this,n=document.createElement("button");if(n.className=this.klassname,n.style.width="".concat(this.width,"px"),n.style.height="".concat(this.height,"px"),n.disabled=this.disabled,n.tabIndex=0,this.imgSrc){var i=document.createElement("img");i.src=this.imgSrc,i.alt=this.imgAltText,n.appendChild(i)}else{var s=document.createElement("span");s.textContent=this.buttonText,n.appendChild(s)}n.addEventListener("click",this.handleClick),n.addEventListener("focus",function(){e.focused=!0,n.classList.add("focused")}),n.addEventListener("blur",function(){e.focused=!1,n.classList.remove("focused")}),this.buttonElement=n,t.appendChild(n)},t.prototype.unmount=function(){this.buttonElement&&(this.buttonElement.removeEventListener("click",this.handleClick),this.buttonElement.removeEventListener("focus",this.handleClick),this.buttonElement.removeEventListener("blur",this.handleClick),this.buttonElement=void 0)},t.prototype.focus=function(){this.buttonElement&&(this.buttonElement.focus(),this.buttonElement.classList.add("focused"),this.focused=!0)},t.prototype.blur=function(){this.buttonElement&&(this.buttonElement.blur(),this.buttonElement.classList.remove("focused"),this.focused=!1)},t}(),n=function(){function t(t){var e=this;this.isDragging=!1,this.focused=!1,this.video=t,this.container=document.createElement("div"),this.container.className="seekbar-container",this.container.tabIndex=0,this.buffer=document.createElement("div"),this.buffer.className="seekbar-buffer",this.progress=document.createElement("div"),this.progress.className="seekbar-progress",this.thumb=document.createElement("div"),this.thumb.className="seekbar-thumb",this.tooltip=document.createElement("div"),this.tooltip.className="seekbar-tooltip",this.tooltip.style.display="none",this.timeLabel=document.createElement("span"),this.timeLabel.className="seekbar-time-label",this.durationLabel=document.createElement("span"),this.durationLabel.className="seekbar-duration-label",this.container.appendChild(this.buffer),this.container.appendChild(this.progress),this.container.appendChild(this.thumb),this.container.appendChild(this.tooltip),this.container.appendChild(this.timeLabel),this.container.appendChild(this.durationLabel),this.video.addEventListener("timeupdate",function(){return e.update()}),this.video.addEventListener("progress",function(){return e.updateBuffer()}),this.video.addEventListener("durationchange",function(){return e.update()}),this.container.addEventListener("click",function(t){return e.seek(t)}),this.thumb.addEventListener("mousedown",function(t){return e.startDrag(t)}),this.container.addEventListener("mousemove",function(t){return e.showTooltip(t)}),this.container.addEventListener("mouseleave",function(){return e.hideTooltip()}),this.container.addEventListener("focus",function(){e.focused=!0,e.container.classList.add("focused")}),this.container.addEventListener("blur",function(){e.focused=!1,e.container.classList.remove("focused")})}return t.prototype.focus=function(){this.container.focus(),this.container.classList.add("focused"),this.focused=!0},t.prototype.blur=function(){this.container.blur(),this.container.classList.remove("focused"),this.focused=!1},t.prototype.formatTime=function(t){if(isNaN(t))return"0:00";var e=Math.floor(t/60),n=Math.floor(t%60);return"".concat(e,":").concat(String(n).padStart(2,"0"))},t.prototype.update=function(){var t=this.video.currentTime/this.video.duration*100;this.progress.style.width=t+"%",this.thumb.style.left=t+"%",this.timeLabel.textContent=this.formatTime(this.video.currentTime),this.durationLabel.textContent=" / "+this.formatTime(this.video.duration)},t.prototype.updateBuffer=function(){if(this.video.buffered.length){var t=this.video.buffered.end(this.video.buffered.length-1)/this.video.duration*100;this.buffer.style.width=t+"%"}},t.prototype.seek=function(t){if(!this.isDragging){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width;this.video.currentTime=n*this.video.duration}},t.prototype.startDrag=function(t){var e=this;t.preventDefault(),this.isDragging=!0;var n=function(t){var n=e.container.getBoundingClientRect(),i=(t.clientX-n.left)/n.width;i=Math.max(0,Math.min(1,i)),e.progress.style.width=100*i+"%",e.thumb.style.left=100*i+"%",e.timeLabel.textContent=e.formatTime(i*e.video.duration)},i=function(t){var s=e.container.getBoundingClientRect(),o=(t.clientX-s.left)/s.width;o=Math.max(0,Math.min(1,o)),e.video.currentTime=o*e.video.duration,e.isDragging=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",i)},t.prototype.showTooltip=function(t){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width,i=n*this.video.duration;this.tooltip.textContent=this.formatTime(i),this.tooltip.style.display="block",this.tooltip.style.left="".concat(100*n,"%")},t.prototype.hideTooltip=function(){this.tooltip.style.display="none"},t.prototype.mount=function(t){t.appendChild(this.container),this.update(),this.updateBuffer()},t.prototype.getElement=function(){return this.container},t}(),i=function(){function t(t){var e=t.player;this.player=e,this.container=document.createElement("div"),this.container.className="video-player-ui",this.createControls()}return t.prototype.createControls=function(){var t,i,s,o=this;this.playPauseBtn=new e({imgSrc:"",imgAltText:"Play/Pause",buttonText:"Play",width:80,height:40,klassname:"play-pause-btn",focused:!1,disabled:!1,handleClick:function(){o.player.video.paused?(o.player.play(),o.playPauseBtn&&o.playPauseBtn.buttonElement&&(o.playPauseBtn.buttonElement.textContent="Pause")):(o.player.pause(),o.playPauseBtn&&o.playPauseBtn.buttonElement&&(o.playPauseBtn.buttonElement.textContent="Play"))}}),this.playPauseBtn.mount(this.container),this.container.appendChild(this.player.video),this.seekbar=new n(this.player.video),this.seekbar.mount(this.container),(null===(t=this.playPauseBtn)||void 0===t?void 0:t.buttonElement)&&this.seekbar&&(this.playPauseBtn.buttonElement.addEventListener("keydown",function(t){var e;"ArrowDown"===t.key&&(t.preventDefault(),null===(e=o.seekbar)||void 0===e||e.focus())}),null===(s=null===(i=this.seekbar)||void 0===i?void 0:i.getElement())||void 0===s||s.addEventListener("keydown",function(t){var e;"ArrowUp"===t.key&&(t.preventDefault(),null===(e=o.playPauseBtn)||void 0===e||e.focus())}))},t.prototype.attachTo=function(t){t.appendChild(this.container)},t.prototype.getElement=function(){return this.container},t}();exports.createHlsPlayer=function(e,n){var s=document.createElement("video");s.controls=!1,s.style.width="100%",s.style.height="100%";var o=null;if(window.Hls&&window.Hls.isSupported())(o=new window.Hls).loadSource(n),o.attachMedia(s),o.on(window.Hls.Events.MANIFEST_PARSED,function(){s.play()});else{if(!s.canPlayType("application/vnd.apple.mpegurl"))throw new Error("HLS is not supported in this browser.");s.src=n,s.addEventListener("loadedmetadata",function(){s.play()})}var a={video:s,play:function(){return s.play()},pause:function(){return s.pause()}},r=new i({player:a});return r.attachTo(e),t(t({},a),{ui:r})};

package/dist/index.d.ts

@@ -1,25 +1,12 @@
-import '@viewlift/player-backup/esm/bundle.css';
 export interface VideoPlayerOptions {
     onPlaybackSuccess?: () => void;
     onPlaybackEnded?: () => void;
     onPlaybackError?: (error?: any) => void;
-    playerId: string;
-    contentId: string;
-    profileId: string;
-    deviceId: string;
-    authToken: string;
+    src: string;
     autoplay?: boolean;
     controls?: boolean;
     width?: number;
     height?: number;
-    deviceName: DeviceType;
-}
-declare enum DeviceType {
-    LG = "lgTv",
-    Vizio = "vizioTv",
-    XfinityX1 = "xfinityX1",
-    Xbox = "xbox",
-    Samsung = "samsungTv"
 }
 type EventHandler = (...args: any[]) => void;
 type VideoPlayerEvent = 'play' | 'pause' | 'ended' | 'timeupdate' | 'error' | 'loadedmetadata' | 'seeking' | 'seeked' | 'volumechange';
@@ -27,13 +14,13 @@ export declare class LightningVideoPlayer {
     /**
      * Reinitialize the current videoElement with a new set of options and handle autoplay.
      */
+    reinitialize(options: VideoPlayerOptions): void;
     private videoElement;
     private options;
     private listeners;
     private boundEmitters;
     private boundHandlerMap;
     constructor(options: VideoPlayerOptions);
-    initialize(): boolean;
     attachTo(container: HTMLElement): void;
     play(): void;
     pause(): void;

package/dist/index.esm.css

@@ -0,0 +1,2 @@
+.seekbar-container{background:#444;border-radius:6px;bottom:50px;cursor:pointer;height:12px;left:50%;margin:0;position:absolute;transform:translateX(-50%);user-select:none;width:90%;z-index:20}.seekbar-buffer{background:#888;z-index:1}.seekbar-buffer,.seekbar-progress{border-radius:6px;height:100%;position:absolute;width:0}.seekbar-progress{background:#4169e1;transition:width .1s linear;z-index:2}.seekbar-thumb{background:#fff;border:2px solid #4169e1;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background .2s;width:16px;z-index:3}.seekbar-thumb:hover{background:#ffeaea}.seekbar-tooltip{background:#222;border-radius:4px;bottom:24px;color:#fff;font-size:12px;left:0;padding:2px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:10}.seekbar-duration-label,.seekbar-time-label{color:#eee;font-size:13px;margin-right:4px;position:relative;top:18px;z-index:5}.play-pause-btn{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%);z-index:30}
+/*# sourceMappingURL=index.esm.css.map */

package/dist/index.esm.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["playerSeekbar.css","player-ui.css"],"names":[],"mappings":"AAAA,mBAME,eAAgB,CAGhB,iBAAkB,CALlB,WAAY,CAIZ,cAAe,CAHf,WAAY,CAHZ,QAAS,CAQT,QAAS,CATT,iBAAkB,CAElB,0BAA2B,CAQ3B,gBAAiB,CAJjB,SAAU,CAKV,UACF,CAEA,gBAGE,eAAgB,CAGhB,SACF,CAEA,kCAJE,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAGlB,OAaF,CARA,kBAGE,kBAAmB,CAInB,2BAA6B,CAD7B,SAEF,CAEA,eAME,eAAgB,CAEhB,wBAAyB,CADzB,iBAAkB,CAGlB,mCAAqC,CACrC,cAAe,CANf,WAAY,CAJZ,iBAAkB,CAClB,OAAQ,CACR,8BAAgC,CAShC,yBAA2B,CAR3B,UAAW,CAKX,SAIF,CACA,qBACE,kBACF,CAEA,iBAKE,eAAgB,CAGhB,iBAAkB,CANlB,WAAY,CAIZ,UAAW,CAGX,cAAe,CANf,MAAO,CAIP,eAAgB,CAIhB,mBAAoB,CAVpB,iBAAkB,CAGlB,0BAA2B,CAM3B,kBAAmB,CAEnB,UACF,CAEA,4CAIE,UAAW,CADX,cAAe,CAEf,gBAAiB,CAJjB,iBAAkB,CAClB,QAAS,CAIT,SACF,CCzEA,gBAEE,QAAS,CADT,2BAA6B,CAE7B,OAAQ,CACR,8BAAgC,CAChC,UACF","file":"index.esm.css","sourcesContent":[".seekbar-container {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 50px;\n  height: 12px;\n  background: #444;\n  width: 90%;\n  cursor: pointer;\n  border-radius: 6px;\n  margin: 0;\n  user-select: none;\n  z-index: 20;\n}\n\n.seekbar-buffer {\n  position: absolute;\n  height: 100%;\n  background: #888;\n  width: 0;\n  border-radius: 6px;\n  z-index: 1;\n}\n\n.seekbar-progress {\n  position: absolute;\n  height: 100%;\n  background: #4169E1;\n  width: 0;\n  border-radius: 6px;\n  z-index: 2;\n  transition: width 0.1s linear;\n}\n\n.seekbar-thumb {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 16px;\n  height: 16px;\n  background: #fff;\n  border-radius: 50%;\n  border: 2px solid #4169E1;\n  z-index: 3;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.seekbar-thumb:hover {\n  background: #ffeaea;\n}\n\n.seekbar-tooltip {\n  position: absolute;\n  bottom: 24px;\n  left: 0;\n  transform: translateX(-50%);\n  background: #222;\n  color: #fff;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n\n.seekbar-time-label, .seekbar-duration-label {\n  position: relative;\n  top: 18px;\n  font-size: 13px;\n  color: #eee;\n  margin-right: 4px;\n  z-index: 5;\n}\n","/* Center play/pause button absolutely in the middle of the player */\n.play-pause-btn {\n  position: absolute !important;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 30;\n} "]}

package/dist/index.esm.js

@@ -1 +1 @@
-import"@viewlift/player-backup/esm/bundle.css";var t,e=function(t){return"lgTv"==t?"lg":"vizioTv"==t?"vizio":"xfinityX1"==t?"xfinityX1":"xbox"==t?"xBox":"samsung"};!function(t){t.LG="lgTv",t.Vizio="vizioTv",t.XfinityX1="xfinityX1",t.Xbox="xbox",t.Samsung="samsungTv"}(t||(t={}));var n=function(){function t(t){var e=this;this.listeners={},this.boundEmitters={},this.boundHandlerMap={},this.options=t,this.videoElement=document.createElement("video"),this.videoElement.id=t.playerId,this.videoElement.autoplay=!!t.autoplay,t.width&&(this.videoElement.width=t.width),t.height&&(this.videoElement.height=t.height),this.videoElement.style.display="block",this.videoElement.style.background="black";var n={play:this.onPlay,pause:this.onPause,ended:this.onEnded,timeupdate:this.onTimeupdate,error:this.onError,loadedmetadata:this.onLoadedmetadata,seeking:this.onSeeking,seeked:this.onSeeked,volumechange:this.onVolumechange};Object.keys(n).forEach(function(t){var i=n[t].bind(e);e.boundHandlerMap[t]=i,e.videoElement.addEventListener(t,i)})}return t.prototype.initialize=function(){return window.appMainConfig.apiBaseUrl,this.options.playerId,this.options.contentId,this.options.authToken,this.options.autoplay,this.options.profileId,this.options.deviceName,e(this.options.deviceName),window.appSettings.device,window.appMainConfig.internalName,!0},t.prototype.attachTo=function(t){t.appendChild(this.videoElement)},t.prototype.play=function(){this.videoElement.play()},t.prototype.pause=function(){this.videoElement.pause()},t.prototype.stop=function(){this.videoElement.pause(),this.videoElement.currentTime=0},t.prototype.destroy=function(){var t=this;this.videoElement.parentNode&&this.videoElement.parentNode.removeChild(this.videoElement),this.removeAllListeners(),Object.keys(this.boundHandlerMap).forEach(function(e){t.boundHandlerMap[e]&&(t.videoElement.removeEventListener(e,t.boundHandlerMap[e]),delete t.boundHandlerMap[e])})},Object.defineProperty(t.prototype,"element",{get:function(){return this.videoElement},enumerable:!1,configurable:!0}),t.prototype.onPlay=function(t){"function"==typeof this.options.onPlaybackSuccess&&this.options.onPlaybackSuccess()},t.prototype.onPause=function(t){},t.prototype.onEnded=function(t){"function"==typeof this.options.onPlaybackEnded&&this.options.onPlaybackEnded()},t.prototype.onTimeupdate=function(t){},t.prototype.onError=function(t){"function"==typeof this.options.onPlaybackError&&this.options.onPlaybackError(t)},t.prototype.onLoadedmetadata=function(t){},t.prototype.onSeeking=function(t){},t.prototype.onSeeked=function(t){},t.prototype.onVolumechange=function(t){},t.prototype.on=function(t,e){this.listeners[t]||(this.listeners[t]=[],this.boundEmitters[t]||(this.boundEmitters[t]=this.emitEvent(t),this.videoElement.addEventListener(t,this.boundEmitters[t]))),this.listeners[t].push(e)},t.prototype.off=function(t,e){this.listeners[t]&&(this.listeners[t]=this.listeners[t].filter(function(t){return t!==e}),0===this.listeners[t].length&&(this.boundEmitters[t]&&(this.videoElement.removeEventListener(t,this.boundEmitters[t]),delete this.boundEmitters[t]),delete this.listeners[t]))},t.prototype.once=function(t,e){var n=this,i=function(){for(var o=[],s=0;s<arguments.length;s++)o[s]=arguments[s];e.apply(void 0,o),n.off(t,i)};this.on(t,i)},t.prototype.emitEvent=function(t){var e=this;return function(n){e.listeners[t]&&e.listeners[t].forEach(function(t){return t(n)})}},t.prototype.removeAllListeners=function(){var t=this;Object.keys(this.listeners).forEach(function(e){t.boundEmitters[e]&&(t.videoElement.removeEventListener(e,t.boundEmitters[e]),delete t.boundEmitters[e])}),this.listeners={}},t}();export{n as LightningVideoPlayer};
+var t=function(){return t=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var e=function(){function t(t){if(this.imgSrc=t.imgSrc||"",this.imgAltText=t.imgAltText||"",this.buttonText=t.buttonText||"",this.klassname=t.klassname||"default-button",this.width=t.width||100,this.height=t.height||50,this.focused=t.focused||!1,this.disabled=t.disabled||!1,this.handleClick=t.handleClick||function(){},"function"!=typeof t.handleClick)throw new Error("Button Class: handleClick must be a function");this.disabled&&(this.klassname+=" disabled"),this.focused&&(this.klassname+=" focused"),this.handleClick=this.handleClick.bind(this)}return t.prototype.mount=function(t){var e=this,n=document.createElement("button");if(n.className=this.klassname,n.style.width="".concat(this.width,"px"),n.style.height="".concat(this.height,"px"),n.disabled=this.disabled,n.tabIndex=0,this.imgSrc){var i=document.createElement("img");i.src=this.imgSrc,i.alt=this.imgAltText,n.appendChild(i)}else{var o=document.createElement("span");o.textContent=this.buttonText,n.appendChild(o)}n.addEventListener("click",this.handleClick),n.addEventListener("focus",function(){e.focused=!0,n.classList.add("focused")}),n.addEventListener("blur",function(){e.focused=!1,n.classList.remove("focused")}),this.buttonElement=n,t.appendChild(n)},t.prototype.unmount=function(){this.buttonElement&&(this.buttonElement.removeEventListener("click",this.handleClick),this.buttonElement.removeEventListener("focus",this.handleClick),this.buttonElement.removeEventListener("blur",this.handleClick),this.buttonElement=void 0)},t.prototype.focus=function(){this.buttonElement&&(this.buttonElement.focus(),this.buttonElement.classList.add("focused"),this.focused=!0)},t.prototype.blur=function(){this.buttonElement&&(this.buttonElement.blur(),this.buttonElement.classList.remove("focused"),this.focused=!1)},t}(),n=function(){function t(t){var e=this;this.isDragging=!1,this.focused=!1,this.video=t,this.container=document.createElement("div"),this.container.className="seekbar-container",this.container.tabIndex=0,this.buffer=document.createElement("div"),this.buffer.className="seekbar-buffer",this.progress=document.createElement("div"),this.progress.className="seekbar-progress",this.thumb=document.createElement("div"),this.thumb.className="seekbar-thumb",this.tooltip=document.createElement("div"),this.tooltip.className="seekbar-tooltip",this.tooltip.style.display="none",this.timeLabel=document.createElement("span"),this.timeLabel.className="seekbar-time-label",this.durationLabel=document.createElement("span"),this.durationLabel.className="seekbar-duration-label",this.container.appendChild(this.buffer),this.container.appendChild(this.progress),this.container.appendChild(this.thumb),this.container.appendChild(this.tooltip),this.container.appendChild(this.timeLabel),this.container.appendChild(this.durationLabel),this.video.addEventListener("timeupdate",function(){return e.update()}),this.video.addEventListener("progress",function(){return e.updateBuffer()}),this.video.addEventListener("durationchange",function(){return e.update()}),this.container.addEventListener("click",function(t){return e.seek(t)}),this.thumb.addEventListener("mousedown",function(t){return e.startDrag(t)}),this.container.addEventListener("mousemove",function(t){return e.showTooltip(t)}),this.container.addEventListener("mouseleave",function(){return e.hideTooltip()}),this.container.addEventListener("focus",function(){e.focused=!0,e.container.classList.add("focused")}),this.container.addEventListener("blur",function(){e.focused=!1,e.container.classList.remove("focused")})}return t.prototype.focus=function(){this.container.focus(),this.container.classList.add("focused"),this.focused=!0},t.prototype.blur=function(){this.container.blur(),this.container.classList.remove("focused"),this.focused=!1},t.prototype.formatTime=function(t){if(isNaN(t))return"0:00";var e=Math.floor(t/60),n=Math.floor(t%60);return"".concat(e,":").concat(String(n).padStart(2,"0"))},t.prototype.update=function(){var t=this.video.currentTime/this.video.duration*100;this.progress.style.width=t+"%",this.thumb.style.left=t+"%",this.timeLabel.textContent=this.formatTime(this.video.currentTime),this.durationLabel.textContent=" / "+this.formatTime(this.video.duration)},t.prototype.updateBuffer=function(){if(this.video.buffered.length){var t=this.video.buffered.end(this.video.buffered.length-1)/this.video.duration*100;this.buffer.style.width=t+"%"}},t.prototype.seek=function(t){if(!this.isDragging){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width;this.video.currentTime=n*this.video.duration}},t.prototype.startDrag=function(t){var e=this;t.preventDefault(),this.isDragging=!0;var n=function(t){var n=e.container.getBoundingClientRect(),i=(t.clientX-n.left)/n.width;i=Math.max(0,Math.min(1,i)),e.progress.style.width=100*i+"%",e.thumb.style.left=100*i+"%",e.timeLabel.textContent=e.formatTime(i*e.video.duration)},i=function(t){var o=e.container.getBoundingClientRect(),s=(t.clientX-o.left)/o.width;s=Math.max(0,Math.min(1,s)),e.video.currentTime=s*e.video.duration,e.isDragging=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",i)},t.prototype.showTooltip=function(t){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width,i=n*this.video.duration;this.tooltip.textContent=this.formatTime(i),this.tooltip.style.display="block",this.tooltip.style.left="".concat(100*n,"%")},t.prototype.hideTooltip=function(){this.tooltip.style.display="none"},t.prototype.mount=function(t){t.appendChild(this.container),this.update(),this.updateBuffer()},t.prototype.getElement=function(){return this.container},t}(),i=function(){function t(t){var e=t.player;this.player=e,this.container=document.createElement("div"),this.container.className="video-player-ui",this.createControls()}return t.prototype.createControls=function(){var t,i,o,s=this;this.playPauseBtn=new e({imgSrc:"",imgAltText:"Play/Pause",buttonText:"Play",width:80,height:40,klassname:"play-pause-btn",focused:!1,disabled:!1,handleClick:function(){s.player.video.paused?(s.player.play(),s.playPauseBtn&&s.playPauseBtn.buttonElement&&(s.playPauseBtn.buttonElement.textContent="Pause")):(s.player.pause(),s.playPauseBtn&&s.playPauseBtn.buttonElement&&(s.playPauseBtn.buttonElement.textContent="Play"))}}),this.playPauseBtn.mount(this.container),this.container.appendChild(this.player.video),this.seekbar=new n(this.player.video),this.seekbar.mount(this.container),(null===(t=this.playPauseBtn)||void 0===t?void 0:t.buttonElement)&&this.seekbar&&(this.playPauseBtn.buttonElement.addEventListener("keydown",function(t){var e;"ArrowDown"===t.key&&(t.preventDefault(),null===(e=s.seekbar)||void 0===e||e.focus())}),null===(o=null===(i=this.seekbar)||void 0===i?void 0:i.getElement())||void 0===o||o.addEventListener("keydown",function(t){var e;"ArrowUp"===t.key&&(t.preventDefault(),null===(e=s.playPauseBtn)||void 0===e||e.focus())}))},t.prototype.attachTo=function(t){t.appendChild(this.container)},t.prototype.getElement=function(){return this.container},t}();function o(e,n){var o=document.createElement("video");o.controls=!1,o.style.width="100%",o.style.height="100%";var s=null;if(window.Hls&&window.Hls.isSupported())(s=new window.Hls).loadSource(n),s.attachMedia(o),s.on(window.Hls.Events.MANIFEST_PARSED,function(){o.play()});else{if(!o.canPlayType("application/vnd.apple.mpegurl"))throw new Error("HLS is not supported in this browser.");o.src=n,o.addEventListener("loadedmetadata",function(){o.play()})}var a={video:o,play:function(){return o.play()},pause:function(){return o.pause()}},r=new i({player:a});return r.attachTo(e),t(t({},a),{ui:r})}export{o as createHlsPlayer};

package/dist/main-player/player-ui.d.ts

@@ -0,0 +1,19 @@
+interface VideoPlayerUIOptions {
+    player: {
+        video: HTMLVideoElement;
+        play: () => void;
+        pause: () => void;
+    };
+    width?: string;
+    height?: string;
+}
+declare class VideoPlayerUI {
+    private player;
+    private container;
+    private playPauseBtn?;
+    private seekbar?;
+    constructor({ player, width, height }: VideoPlayerUIOptions);
+    private createControls;
+    attachTo(parent: HTMLElement): void;
+}
+export default VideoPlayerUI;

package/dist/player-components/player-buttons/playerButtons.d.ts

@@ -0,0 +1,38 @@
+import './playerButtons.css';
+type EventHandler = (event?: any) => void;
+type ButtonProps = {
+    imgSrc: string;
+    imgAltText: string;
+    width: number;
+    height: number;
+    klassname: string;
+    buttonText: string;
+    focused: boolean;
+    disabled: boolean;
+    handleClick: EventHandler;
+};
+export declare class Button {
+    private imgSrc;
+    private imgAltText;
+    private klassname;
+    private width;
+    private height;
+    private focused;
+    private disabled;
+    private handleClick;
+    private buttonText;
+    buttonElement?: HTMLButtonElement;
+    constructor(props: ButtonProps);
+    /**
+     * Mounts the button to the specified mount point
+     * @param mountPoint The HTML element to which the button will be appended
+     */
+    mount(mountPoint: HTMLElement): void;
+    /**
+     * Removes the click event listener from the button
+     */
+    unmount(): void;
+    focus(): void;
+    blur(): void;
+}
+export {};

package/dist/player-components/player-seekbar/playerSeekbar.d.ts

@@ -0,0 +1,25 @@
+import './playerSeekbar.css';
+export declare class PlayerSeekbar {
+    private container;
+    private progress;
+    private buffer;
+    private thumb;
+    private tooltip;
+    private video;
+    private timeLabel;
+    private durationLabel;
+    private isDragging;
+    private focused;
+    constructor(video: HTMLVideoElement);
+    focus(): void;
+    blur(): void;
+    private formatTime;
+    private update;
+    private updateBuffer;
+    private seek;
+    private startDrag;
+    private showTooltip;
+    private hideTooltip;
+    mount(parent: HTMLElement): void;
+    getElement(): HTMLDivElement;
+}

package/dist/player-ui/player-ui.d.ts

@@ -0,0 +1,18 @@
+import './player-ui.css';
+declare class VideoPlayerUI {
+    private player;
+    private container;
+    private playPauseBtn?;
+    private seekbar?;
+    constructor({ player }: {
+        player: {
+            video: HTMLVideoElement;
+            play: () => void;
+            pause: () => void;
+        };
+    });
+    private createControls;
+    attachTo(parent: HTMLElement): void;
+    getElement(): HTMLDivElement;
+}
+export default VideoPlayerUI;

package/dist/playerInitializer.d.ts

@@ -0,0 +1,13 @@
+import VideoPlayerUI from './player-ui/player-ui';
+declare global {
+    interface Window {
+        Hls: any;
+    }
+}
+export interface PlayerInstance {
+    video: HTMLVideoElement;
+    play: () => void;
+    pause: () => void;
+    ui: VideoPlayerUI;
+}
+export declare function createHlsPlayer(mountPoint: HTMLElement, streamUrl: string): PlayerInstance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewlift/player-backup",
-  "version": "1.0.0-lighteningjs",
+  "version": "1.0.1-lighteningjs",
   "description": "A LightningJS video player component for Smart TV apps.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -27,6 +27,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "rollup": "^4.16.4",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "rollup-plugin-postcss": "^4.0.2"
   }
 }

package/rollup.config.mjs

@@ -3,9 +3,10 @@ import commonjs from '@rollup/plugin-commonjs';
 import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
 
 export default {
-  input: 'src/index.ts',
+  input: 'src/playerInitializer.ts',
   output: [
     {
       file: 'dist/index.cjs.js',
@@ -26,6 +27,11 @@ export default {
       extensions: ['.js', '.ts'],
       exclude: 'node_modules/**',
     }),
+    postcss({
+      extract: true, // creates a separate CSS file
+      minimize: true,
+      sourceMap: true,
+    }),
     terser(),
   ],
 };

package/src/index.ts

@@ -1,33 +1,18 @@
 // LightningJS-compatible Video Player Component (ES5 compatible)
 
-import '@viewlift/player-backup/esm/bundle.css'
-import { getDeviceFullName, getDeviceShortName,getMacros } from './utility';
 export interface VideoPlayerOptions {
   // Optional playback callbacks
   onPlaybackSuccess?: () => void;
   onPlaybackEnded?: () => void;
   onPlaybackError?: (error?: any) => void;
-  playerId: string;
-  contentId: string;
-  profileId: string;
-  deviceId:string;
-  authToken: string
+  src: string;
   autoplay?: boolean;
   controls?: boolean;
   width?: number;
-  
   height?: number;
-  deviceName: DeviceType
 // Event callbacks
 }
 
-enum DeviceType {
-  LG = 'lgTv',
-  Vizio = 'vizioTv',
-  XfinityX1 = 'xfinityX1',
-  Xbox = 'xbox',
-  Samsung = 'samsungTv'
-}
 type EventHandler = (...args: any[]) => void;
 
 type VideoPlayerEvent =
@@ -45,7 +30,39 @@ export class LightningVideoPlayer {
   /**
    * Reinitialize the current videoElement with a new set of options and handle autoplay.
    */
-
+  reinitialize(options: VideoPlayerOptions) {
+    this.options = options;
+    this.videoElement.src = options.src;
+    this.videoElement.autoplay = !!options.autoplay;
+    this.videoElement.controls = !!options.controls;
+    if (options.width) {
+      this.videoElement.width = options.width;
+    } else {
+      this.videoElement.removeAttribute('width');
+    }
+    if (options.height) {
+      this.videoElement.height = options.height;
+    } else {
+      this.videoElement.removeAttribute('height');
+    }
+    // Reset playback state
+    this.videoElement.currentTime = 0;
+    this.videoElement.pause();
+    // If autoplay is set, start playback
+    if (options.autoplay) {
+      // Wait for metadata to be loaded before playing (for some browsers)
+      const playOnLoaded = () => {
+        this.videoElement.play();
+        this.videoElement.removeEventListener('loadedmetadata', playOnLoaded);
+      };
+      this.videoElement.addEventListener('loadedmetadata', playOnLoaded);
+      // If already loaded, play immediately
+      if (this.videoElement.readyState >= 1) {
+        this.videoElement.play();
+        this.videoElement.removeEventListener('loadedmetadata', playOnLoaded);
+      }
+    }
+  }
   private videoElement: HTMLVideoElement;
   private options: VideoPlayerOptions;
   private listeners: { [event: string]: EventHandler[] } = {};
@@ -55,8 +72,9 @@ export class LightningVideoPlayer {
   constructor(options: VideoPlayerOptions) {
     this.options = options;
     this.videoElement = document.createElement('video');
-    this.videoElement.id = options.playerId;
+    this.videoElement.src = options.src;
     this.videoElement.autoplay = !!options.autoplay;
+    this.videoElement.controls = !!options.controls;
     if (options.width) this.videoElement.width = options.width;
     if (options.height) this.videoElement.height = options.height;
     this.videoElement.style.display = 'block';
@@ -81,43 +99,6 @@ export class LightningVideoPlayer {
     });
   }
 
-  initialize() {
-     let configurationObject = {
-                apiBaseUrl: (window as any).appMainConfig.apiBaseUrl,
-                playerId: this.options.playerId,
-                videoId: this.options.contentId,
-                token: this.options.authToken,
-                disableControls: true,
-                autoplay:this.options.autoplay,
-                watchHistory:{
-                    enable:false,
-                    interval:30,
-                    profileId:this.options.profileId,
-                    apiVersion:'v2'
-                },
-                customData: {
-                    entitlement: {
-                        deviceType: getDeviceFullName(this.options.deviceName),
-                        contentConsumption: getDeviceShortName(this.options.deviceName),
-                       // hba_status: localStorage?.getItem("hba_status")?JSON.stringify(localStorage?.getItem("hba_status")):false,
-                       // householdID: localStorage?.getItem(window?.appMainConfig?.internalName + "_householdID"),
-                    },
-                    beacon: {
-                        params: {
-                            pfm: (window as any).appSettings.device
-                        },
-                        url: (window as any).appMainConfig.internalName,
-                    },
-                   // macros:getMacros(videoPlayBackObject,1920,1080,this.options.deviceName,this.options.deviceId),
-                    overrideNative:true,
-                    nativeAudioTracks:false,
-                    nativeVideoTracks:false,
-                    onlyPlayReadyDRM:true,
-                }
-            };
-    return  true
-  }
-
   attachTo(container: HTMLElement) {
     container.appendChild(this.videoElement);
   }

package/src/main-player/player-ui.ts

@@ -0,0 +1,65 @@
+import { Button } from '../player-components/player-buttons/playerButtons';
+import { PlayerSeekbar } from '../player-components/player-seekbar/playerSeekbar';
+
+interface VideoPlayerUIOptions {
+  player: { video: HTMLVideoElement; play: () => void; pause: () => void };
+  width?: string;
+  height?: string;
+}
+
+class VideoPlayerUI {
+  private player: { video: HTMLVideoElement; play: () => void; pause: () => void };
+  private container: HTMLDivElement;
+  private playPauseBtn?: Button;
+  private seekbar?: PlayerSeekbar;
+
+  constructor({ player, width = '1280px', height = '720px' }: VideoPlayerUIOptions) {
+    this.player = player;
+    this.container = document.createElement('div');
+    this.container.className = 'video-player-ui';
+    if (width) this.container.style.width = width;
+    if (height) this.container.style.height = height;
+    this.createControls(width, height);
+  }
+
+  private createControls(width?: string, height?: string) {
+    // Play/Pause button using Button class
+    this.playPauseBtn = new Button({
+      imgSrc: '', // Optionally provide an image
+      imgAltText: 'Play/Pause',
+      buttonText: 'Play',
+      width: 80,
+      height: 40,
+      klassname: 'play-pause-btn',
+      focused: false,
+      disabled: false,
+      handleClick: () => {
+        if (this.player.video.paused) {
+          this.player.play();
+          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.textContent = 'Pause';
+          }
+        } else {
+          this.player.pause();
+          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.textContent = 'Play';
+          }
+        }
+      }
+    });
+    this.playPauseBtn.mount(this.container);
+    // Attach the video element
+    if (width) this.player.video.style.width = width;
+    if (height) this.player.video.style.height = height;
+    this.container.appendChild(this.player.video);
+    // Add the seekbar below the video
+    this.seekbar = new PlayerSeekbar(this.player.video);
+    this.seekbar.mount(this.container);
+  }
+
+  attachTo(parent: HTMLElement) {
+    parent.appendChild(this.container);
+  }
+}
+
+export default VideoPlayerUI; 

package/src/player-components/player-buttons/playerButtons.ts

@@ -0,0 +1,127 @@
+import './playerButtons.css'; 
+
+type EventHandler = (event?: any) => void;
+
+type ButtonProps = {
+  imgSrc: string;
+  imgAltText: string;
+  width: number;
+  height: number;
+  klassname: string;  
+  buttonText: string; 
+  focused: boolean;
+  disabled: boolean;
+  handleClick: EventHandler
+};
+
+export class Button {
+
+    private imgSrc: string;
+    private imgAltText: string; 
+    private klassname: string;  
+    private width: number;
+    private height: number;
+    private focused: boolean;
+    private disabled: boolean;
+    private handleClick: EventHandler;
+    private buttonText: string;
+    public buttonElement?: HTMLButtonElement;
+
+
+
+    constructor(props: ButtonProps) {  
+        this.imgSrc = props.imgSrc || '';
+        this.imgAltText = props.imgAltText || '';
+        this.buttonText = props.buttonText || '';
+        this.klassname = props.klassname || 'default-button';
+        this.width = props.width || 100;
+        this.height = props.height  || 50;
+        this.focused = props.focused || false;
+        this.disabled = props.disabled || false;
+        this.handleClick = props.handleClick || (() => {});
+
+        if (typeof props.handleClick !== 'function') {
+            throw new Error('Button Class: handleClick must be a function');
+        }
+    
+        if (this.disabled) {
+            this.klassname += ' disabled';
+        }
+
+        if (this.focused) {
+            this.klassname += ' focused';
+        }
+    
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    /**
+     * Mounts the button to the specified mount point
+     * @param mountPoint The HTML element to which the button will be appended
+     */
+    mount(mountPoint: HTMLElement) {
+        // Create the button element
+        const button = document.createElement('button');
+        button.className = this.klassname;
+        button.style.width = `${this.width}px`;
+        button.style.height = `${this.height}px`;
+        button.disabled = this.disabled;
+        button.tabIndex = 0;
+
+        // Add image or text
+        if (this.imgSrc) {
+            const img = document.createElement('img');
+            img.src = this.imgSrc;
+            img.alt = this.imgAltText;
+            button.appendChild(img);
+        } else {
+            const span = document.createElement('span');
+            span.textContent = this.buttonText;
+            button.appendChild(span);
+        }
+
+        // Attach event listeners
+        button.addEventListener('click', this.handleClick);
+        button.addEventListener('focus', () => {
+            this.focused = true;
+            button.classList.add('focused');
+        });
+        button.addEventListener('blur', () => {
+            this.focused = false;
+            button.classList.remove('focused');
+        });
+
+        // Store reference and append
+        this.buttonElement = button;
+        mountPoint.appendChild(button);
+    }
+
+    /**
+     * Removes the click event listener from the button
+     */
+    unmount() {
+        if (this.buttonElement) {
+            this.buttonElement.removeEventListener('click', this.handleClick);
+            this.buttonElement.removeEventListener('focus', this.handleClick);
+            this.buttonElement.removeEventListener('blur', this.handleClick);
+            this.buttonElement = undefined;
+        }
+    }
+
+    focus() {
+        if (this.buttonElement) {
+            this.buttonElement.focus();
+            this.buttonElement.classList.add('focused');
+            this.focused = true;
+        }
+    }
+    
+    blur() {
+        if (this.buttonElement) {
+            this.buttonElement.blur();
+            this.buttonElement.classList.remove('focused');
+            this.focused = false;
+        }
+    }
+
+}

package/src/player-components/player-seekbar/playerSeekbar.css

@@ -0,0 +1,75 @@
+.seekbar-container {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 50px;
+  height: 12px;
+  background: #444;
+  width: 90%;
+  cursor: pointer;
+  border-radius: 6px;
+  margin: 0;
+  user-select: none;
+  z-index: 20;
+}
+
+.seekbar-buffer {
+  position: absolute;
+  height: 100%;
+  background: #888;
+  width: 0;
+  border-radius: 6px;
+  z-index: 1;
+}
+
+.seekbar-progress {
+  position: absolute;
+  height: 100%;
+  background: #4169E1;
+  width: 0;
+  border-radius: 6px;
+  z-index: 2;
+  transition: width 0.1s linear;
+}
+
+.seekbar-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  border: 2px solid #4169E1;
+  z-index: 3;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.seekbar-thumb:hover {
+  background: #ffeaea;
+}
+
+.seekbar-tooltip {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  transform: translateX(-50%);
+  background: #222;
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.seekbar-time-label, .seekbar-duration-label {
+  position: relative;
+  top: 18px;
+  font-size: 13px;
+  color: #eee;
+  margin-right: 4px;
+  z-index: 5;
+}

package/src/player-components/player-seekbar/playerSeekbar.ts

@@ -0,0 +1,158 @@
+import './playerSeekbar.css';
+
+export class PlayerSeekbar {
+  private container: HTMLDivElement;
+  private progress: HTMLDivElement;
+  private buffer: HTMLDivElement;
+  private thumb: HTMLDivElement;
+  private tooltip: HTMLDivElement;
+  private video: HTMLVideoElement;
+  private timeLabel: HTMLSpanElement;
+  private durationLabel: HTMLSpanElement;
+  private isDragging: boolean = false;
+  private focused: boolean = false;
+
+  constructor(video: HTMLVideoElement) {
+    this.video = video;
+    this.container = document.createElement('div');
+    this.container.className = 'seekbar-container';
+    this.container.tabIndex = 0; // Make focusable
+
+    this.buffer = document.createElement('div');
+    this.buffer.className = 'seekbar-buffer';
+
+    this.progress = document.createElement('div');
+    this.progress.className = 'seekbar-progress';
+
+    this.thumb = document.createElement('div');
+    this.thumb.className = 'seekbar-thumb';
+
+    this.tooltip = document.createElement('div');
+    this.tooltip.className = 'seekbar-tooltip';
+    this.tooltip.style.display = 'none';
+
+    this.timeLabel = document.createElement('span');
+    this.timeLabel.className = 'seekbar-time-label';
+    this.durationLabel = document.createElement('span');
+    this.durationLabel.className = 'seekbar-duration-label';
+
+    this.container.appendChild(this.buffer);
+    this.container.appendChild(this.progress);
+    this.container.appendChild(this.thumb);
+    this.container.appendChild(this.tooltip);
+    this.container.appendChild(this.timeLabel);
+    this.container.appendChild(this.durationLabel);
+
+    // Update UI as video plays
+    this.video.addEventListener('timeupdate', () => this.update());
+    this.video.addEventListener('progress', () => this.updateBuffer());
+    this.video.addEventListener('durationchange', () => this.update());
+
+    // Seek on click
+    this.container.addEventListener('click', (e) => this.seek(e));
+    // Dragging
+    this.thumb.addEventListener('mousedown', (e) => this.startDrag(e));
+    // Tooltip on hover
+    this.container.addEventListener('mousemove', (e) => this.showTooltip(e));
+    this.container.addEventListener('mouseleave', () => this.hideTooltip());
+
+    // Focus/blur events for accessibility and visual feedback
+    this.container.addEventListener('focus', () => {
+      this.focused = true;
+      this.container.classList.add('focused');
+    });
+    this.container.addEventListener('blur', () => {
+      this.focused = false;
+      this.container.classList.remove('focused');
+    });
+  }
+
+  public focus() {
+    this.container.focus();
+    this.container.classList.add('focused');
+    this.focused = true;
+  }
+
+  public blur() {
+    this.container.blur();
+    this.container.classList.remove('focused');
+    this.focused = false;
+  }
+
+  private formatTime(seconds: number): string {
+    if (isNaN(seconds)) return '0:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${String(s).padStart(2, '0')}`;
+  }
+
+  private update() {
+    const percent = (this.video.currentTime / this.video.duration) * 100;
+    this.progress.style.width = percent + '%';
+    this.thumb.style.left = percent + '%';
+    this.timeLabel.textContent = this.formatTime(this.video.currentTime);
+    this.durationLabel.textContent = ' / ' + this.formatTime(this.video.duration);
+  }
+
+  private updateBuffer() {
+    if (this.video.buffered.length) {
+      const end = this.video.buffered.end(this.video.buffered.length - 1);
+      const percent = (end / this.video.duration) * 100;
+      this.buffer.style.width = percent + '%';
+    }
+  }
+
+  private seek(e: MouseEvent) {
+    if (this.isDragging) return;
+    const rect = this.container.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    this.video.currentTime = percent * this.video.duration;
+  }
+
+  private startDrag(e: MouseEvent) {
+    e.preventDefault();
+    this.isDragging = true;
+    const onMove = (moveEvent: MouseEvent) => {
+      const rect = this.container.getBoundingClientRect();
+      let percent = (moveEvent.clientX - rect.left) / rect.width;
+      percent = Math.max(0, Math.min(1, percent));
+      this.progress.style.width = percent * 100 + '%';
+      this.thumb.style.left = percent * 100 + '%';
+      this.timeLabel.textContent = this.formatTime(percent * this.video.duration);
+    };
+    const onUp = (upEvent: MouseEvent) => {
+      const rect = this.container.getBoundingClientRect();
+      let percent = (upEvent.clientX - rect.left) / rect.width;
+      percent = Math.max(0, Math.min(1, percent));
+      this.video.currentTime = percent * this.video.duration;
+      this.isDragging = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  private showTooltip(e: MouseEvent) {
+    const rect = this.container.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    const time = percent * this.video.duration;
+    this.tooltip.textContent = this.formatTime(time);
+    this.tooltip.style.display = 'block';
+    this.tooltip.style.left = `${percent * 100}%`;
+  }
+
+  private hideTooltip() {
+    this.tooltip.style.display = 'none';
+  }
+
+  public mount(parent: HTMLElement) {
+    parent.appendChild(this.container);
+    this.update();
+    this.updateBuffer();
+  }
+
+  public getElement() {
+    return this.container;
+  }
+}

package/src/player-ui/player-ui.css

@@ -0,0 +1,8 @@
+/* Center play/pause button absolutely in the middle of the player */
+.play-pause-btn {
+  position: absolute !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 30;
+} 

package/src/player-ui/player-ui.ts

@@ -0,0 +1,79 @@
+import { Button } from '../player-components/player-buttons/playerButtons';
+import { PlayerSeekbar } from '../player-components/player-seekbar/playerSeekbar';
+import './player-ui.css';
+
+
+class VideoPlayerUI {
+  private player: { video: HTMLVideoElement; play: () => void; pause: () => void };
+  private container: HTMLDivElement;
+  private playPauseBtn?: Button;
+  private seekbar?: PlayerSeekbar;
+
+  constructor({ player }: { player: { video: HTMLVideoElement; play: () => void; pause: () => void } }) {
+    this.player = player;
+    this.container = document.createElement('div');
+    this.container.className = 'video-player-ui';
+    this.createControls();
+  }
+
+  private createControls() {
+
+    this.playPauseBtn = new Button({
+      imgSrc: '',
+      imgAltText: 'Play/Pause',
+      buttonText: 'Play',
+      width: 80,
+      height: 40,
+      klassname: 'play-pause-btn',
+      focused: false,
+      disabled: false,
+      handleClick: () => {
+        if (this.player.video.paused) {
+          this.player.play();
+          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.textContent = 'Pause';
+          }
+        } else {
+          this.player.pause();
+          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.textContent = 'Play';
+          }
+        }
+      }
+    });
+    this.playPauseBtn.mount(this.container);
+    // Attach the video element
+    this.container.appendChild(this.player.video);
+    // Add the seekbar below the video
+    this.seekbar = new PlayerSeekbar(this.player.video);
+    this.seekbar.mount(this.container);
+
+    if (this.playPauseBtn?.buttonElement && this.seekbar) {
+      // Down arrow from play button focuses seekbar
+      this.playPauseBtn.buttonElement.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          this.seekbar?.focus();
+        }
+      });
+
+      // Up arrow from seekbar focuses play button
+      this.seekbar?.getElement()?.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          this.playPauseBtn?.focus();
+        }
+      });
+    }
+  }
+
+  attachTo(parent: HTMLElement) {
+    parent.appendChild(this.container);
+  }
+
+  public getElement() {
+    return this.container;
+  }
+}
+
+export default VideoPlayerUI;

package/src/playerInitializer.ts

@@ -0,0 +1,54 @@
+import VideoPlayerUI from './player-ui/player-ui';
+
+// Declare Hls type for CDN usage
+declare global {
+  interface Window {
+    Hls: any;
+  }
+}
+
+export interface PlayerInstance {
+  video: HTMLVideoElement;
+  play: () => void;
+  pause: () => void;
+  ui: VideoPlayerUI;
+}
+
+export function createHlsPlayer(
+  mountPoint: HTMLElement,
+  streamUrl: string
+): PlayerInstance {
+  const video = document.createElement('video');
+  video.controls = false;
+  video.style.width = '100%';
+  video.style.height = '100%';
+
+  let hls: any = null;
+
+  if (window.Hls && window.Hls.isSupported()) {
+    hls = new window.Hls();
+    hls.loadSource(streamUrl);
+    hls.attachMedia(video);
+    hls.on(window.Hls.Events.MANIFEST_PARSED, function () {
+      video.play();
+    });
+  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = streamUrl;
+    video.addEventListener('loadedmetadata', function () {
+      video.play();
+    });
+  } else {
+    throw new Error('HLS is not supported in this browser.');
+  }
+
+  const player = {
+    video,
+    play: () => video.play(),
+    pause: () => video.pause(),
+  };
+
+  const ui = new VideoPlayerUI({ player });
+  ui.attachTo(mountPoint);
+
+  return { ...player, ui };
+}

package/tsconfig.json

@@ -4,10 +4,11 @@
     "module": "ESNext",
     "declaration": true,
     "outDir": "dist",
-    "strict": false,
+    "strict": true,
     "esModuleInterop": true,
     "moduleResolution": "node",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "lib": ["dom", "es2017"]
   },
   "include": ["src/**/*"]
 }

package/dist/utility.d.ts

@@ -1,6 +0,0 @@
-export declare const getDeviceMaker: (deviceName: string) => "LG" | "Vizio" | "xfinityX1" | "Microsoft" | "Samsung";
-export declare const getUserAgent: (deviceName: string) => "xfinityX1" | "SmartTV_LG_WebOS" | "SmartTV_Vizio_SmartCast" | "xboxOne" | "SmartTV_Samsung_Tizen";
-export declare const getOSName: (deviceName: string) => "xfinityX1" | "WebOS" | "SmartCast" | "Windows" | "Tizen";
-export declare const getDeviceShortName: (deviceName: string) => "xfinityX1" | "lg" | "vizio" | "xBox" | "samsung";
-export declare const getDeviceFullName: (deviceName: string) => "xfinityX1" | "vizioTv" | "smart_tv_lg" | "windows_xbox" | "smart_tv_samsung";
-export declare const getMacros: (width: any, height: any, deviceName: any, deviceId: any) => {};

package/src/utility.ts

@@ -1,109 +0,0 @@
-export const getDeviceMaker = (deviceName:string) => {
-    if (deviceName == "lgTv") {
-        return "LG";
-    } else if (deviceName == "vizioTv") {
-        return "Vizio";
-    } else if(deviceName == "xfinityX1"){
-        return "xfinityX1"
-    }else if(deviceName == "xbox"){
-        return "Microsoft"
-    }else {
-        return "Samsung";
-    }
-}
-
-
-export const getUserAgent = (deviceName:string) => {
-    if (deviceName == "lgTv") {
-        return "SmartTV_LG_WebOS";
-    } else if (deviceName == "vizioTv") {
-        return "SmartTV_Vizio_SmartCast";
-    } else if(deviceName == "xfinityX1"){
-        return "xfinityX1"
-    }else if(deviceName == "xbox"){
-        return "xboxOne"
-    }else {
-        return "SmartTV_Samsung_Tizen";
-    }
-}
-export const getOSName = (deviceName:string) => {
-    if (deviceName == "lgTv") {
-        return "WebOS";
-    } else if (deviceName == "vizioTv") {
-        return "SmartCast";
-    } else if(deviceName == "xfinityX1"){
-        return "xfinityX1"
-    }else if(deviceName == "xbox"){
-        return "Windows"
-    }else {
-        return "Tizen";
-    }
-}
-export const getDeviceShortName = (deviceName:string) => {
-    if (deviceName == "lgTv") {
-        return "lg";
-    } else if (deviceName == "vizioTv") {
-        return "vizio";
-    } else if(deviceName == "xfinityX1"){
-        return "xfinityX1"
-    }else if(deviceName == "xbox"){
-        return "xBox"
-    }else {
-        return "samsung";
-    }
-}
-export const getDeviceFullName = (deviceName:string) => {
-    if (deviceName == "lgTv") {
-        return "smart_tv_lg";
-    } else if (deviceName == "vizioTv") {
-        return "vizioTv";
-    } else if(deviceName == "xfinityX1"){
-        return "xfinityX1"
-    }else if(deviceName == "xbox"){
-        return "windows_xbox"
-    }else {
-        return "smart_tv_samsung";
-    }
-}
-
-export const getMacros=(width, height,deviceName,deviceId)=>{
-  let objMacros = {};
-  try{
-  objMacros["VIEWLIFT_WIDTH"] = width;
-  objMacros["VIEWLIFT_HEIGHT"] = height;
-  objMacros["VIEWLIFT_SIZE"] = width + "x" + height;
-  objMacros["VIEWLIFT_DOMAIN"] = (window as any).appMainConfig.domainName;
- 
-  objMacros["VIEWLIFT_CACHEBUSTER"] = (new Date()).getTime();
-  objMacros["VIEWLIFT_TIMESTAMP"] = Math.floor((new Date()).getTime() % 1000);
-  objMacros["VIEWLIFT_TIMESTAMP_MS"] = (new Date()).getTime();
-  objMacros["VIEWLIFT_USER_AGENT"] = window.navigator.userAgent;
- 
-  // objMacros["VIEWLIFT_DURATION"] = time;
-  objMacros["VIEWLIFT_MIN_DURATION"] = "0";
- 
-  objMacros["VIEWLIFT_AUTOPLAY"] = "1";
-  objMacros["VIEWLIFT_DNT"] = "0";
-  objMacros["VIEWLIFT_AD_POS"] = "1";
-  objMacros["VIEWLIFT_MUTE"] = "0";
-  objMacros["VIEWLIFT_DEVICE_MAKE"] = getDeviceMaker(deviceName);
-  objMacros["VIEWLIFT_OS"] = getOSName(deviceName);
-  objMacros["VIEWLIFT_LAT"] = (window as any).geoLocation?.latitude;
-  objMacros["VIEWLIFT_LON"] = (window as any).geoLocation?.longitude;
-  objMacros["VIEWLIFT_KEYWORDS"] = "720";
-  objMacros["VIEWLIFT_CONSENT"] = "0";
-  objMacros["VIEWLIFT_US_PRIVACY"] = "1";
-  objMacros["VIEWLIFT_COPPA"] = "0";
-  objMacros["VIEWLIFT_BRAND_NAME"] = getDeviceMaker(deviceName);
-  objMacros["VIEWLIFT_IP"] = (window as any).geoLocation?.origip;
-  objMacros["VIEWLIFT_MAX_POD_DURATION"] = "120";
-  objMacros["VIEWLIFT_MAX_POD_DURATION_MS"] = "120000";
-  
- // objMacros["VIEWLIFT_APP_ID"] = "";
-  objMacros["VIEWLIFT_DEVICE_ID"] = deviceId;
-  objMacros["VIEWLIFT_DID"] = deviceId;
-  //objMacros["VIEWLIFT_APP_NAME"] = "";
-  objMacros["VIEWLIFT_GDPR"] = "0";
-  }catch(e){}
-  return objMacros;
-}