@viewlift/player-backup 1.0.0 → 1.0.1-lighteningjs

package/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": { "ie": "11" },
+      "modules": false
+    }]
+  ]
+}

package/.browserslistrc

@@ -0,0 +1,2 @@
+IE 11
+last 2 versions

package/README.md

@@ -0,0 +1,29 @@
+# @viewlift/ligheningjs-video-player
+
+A LightningJS video player component for Smart TV app development.
+
+## Features
+- Video player component for LightningJS
+- TypeScript support
+- Easy to use in LightningJS-based projects
+
+## Installation
+```bash
+npm install @viewlift/ligheningjs-video-player
+```
+
+## Usage
+```ts
+import { LightningVideoPlayer } from '@viewlift/ligheningjs-video-player';
+
+const player = new LightningVideoPlayer();
+player.play();
+```
+
+## Build
+```bash
+npm run build
+```
+
+## License
+ISC

package/babel.config.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": { "ie": "11" },
+      "modules": false
+    }]
+  ]
+}

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

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,45 @@
+export interface VideoPlayerOptions {
+    onPlaybackSuccess?: () => void;
+    onPlaybackEnded?: () => void;
+    onPlaybackError?: (error?: any) => void;
+    src: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    width?: number;
+    height?: number;
+}
+type EventHandler = (...args: any[]) => void;
+type VideoPlayerEvent = 'play' | 'pause' | 'ended' | 'timeupdate' | 'error' | 'loadedmetadata' | 'seeking' | 'seeked' | 'volumechange';
+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);
+    attachTo(container: HTMLElement): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    destroy(): void;
+    get element(): HTMLVideoElement;
+    onPlay(e: Event): void;
+    onPause(e: Event): void;
+    onEnded(e: Event): void;
+    onTimeupdate(e: Event): void;
+    onError(e: Event): void;
+    onLoadedmetadata(e: Event): void;
+    onSeeking(e: Event): void;
+    onSeeked(e: Event): void;
+    onVolumechange(e: Event): void;
+    on(event: VideoPlayerEvent, handler: EventHandler): void;
+    off(event: VideoPlayerEvent, handler: EventHandler): void;
+    once(event: VideoPlayerEvent, handler: EventHandler): void;
+    private emitEvent;
+    private removeAllListeners;
+}
+export {};

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

@@ -0,0 +1 @@
+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,17 +1,33 @@
 {
-    "name": "@viewlift/player-backup",
-    "version": "1.0.0",
-    "main": "dist/bundle.cjs.js",
-    "amdName": "_playerCore",
-    "dependencies": {
-        "@silvermine/videojs-airplay": "^1.2.0",
-        "@silvermine/videojs-chromecast": "^1.4.1",
-        "axios": "^1.2.3",
-        "js-cookie": "^3.0.5",
-        "video.js": "^7.20.3",
-        "videojs-contrib-ads": "^6.9.0",
-        "videojs-contrib-dash": "^5.1.1",
-        "videojs-contrib-eme": "^3.11.0",
-        "videojs-ima": "^2.1.0"
-    }
+  "name": "@viewlift/player-backup",
+  "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",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "author": "ViewLift",
+  "license": "ISC",
+  "keywords": [
+    "LightningJS",
+    "SmartTV",
+    "video-player"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "rollup": "^4.16.4",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
+    "rollup-plugin-postcss": "^4.0.2"
+  }
 }

package/rollup.config.mjs

@@ -0,0 +1,37 @@
+import resolve from '@rollup/plugin-node-resolve';
+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/playerInitializer.ts',
+  output: [
+    {
+      file: 'dist/index.cjs.js',
+      format: 'cjs',
+      exports: 'auto',
+    },
+    {
+      file: 'dist/index.esm.js',
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({ tsconfig: './tsconfig.json' }),
+    babel({
+      babelHelpers: 'bundled',
+      extensions: ['.js', '.ts'],
+      exclude: 'node_modules/**',
+    }),
+    postcss({
+      extract: true, // creates a separate CSS file
+      minimize: true,
+      sourceMap: true,
+    }),
+    terser(),
+  ],
+};

package/src/index.ts

@@ -0,0 +1,242 @@
+// LightningJS-compatible Video Player Component (ES5 compatible)
+
+export interface VideoPlayerOptions {
+  // Optional playback callbacks
+  onPlaybackSuccess?: () => void;
+  onPlaybackEnded?: () => void;
+  onPlaybackError?: (error?: any) => void;
+  src: string;
+  autoplay?: boolean;
+  controls?: boolean;
+  width?: number;
+  height?: number;
+// Event callbacks
+}
+
+type EventHandler = (...args: any[]) => void;
+
+type VideoPlayerEvent =
+  | 'play'
+  | 'pause'
+  | 'ended'
+  | 'timeupdate'
+  | 'error'
+  | 'loadedmetadata'
+  | 'seeking'
+  | 'seeked'
+  | 'volumechange';
+
+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[] } = {};
+  private boundEmitters: { [event: string]: EventListener } = {};
+  private boundHandlerMap: { [K in VideoPlayerEvent]?: (e: Event) => void } = {};
+
+  constructor(options: VideoPlayerOptions) {
+    this.options = options;
+    this.videoElement = document.createElement('video');
+    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';
+    this.videoElement.style.background = 'black';
+
+    // Attach class event handlers for all player events
+    const handlerMap: { [K in VideoPlayerEvent]: (e: Event) => void } = {
+      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(handlerMap) as VideoPlayerEvent[]).forEach(event => {
+      const boundHandler = handlerMap[event].bind(this);
+      this.boundHandlerMap[event] = boundHandler;
+      this.videoElement.addEventListener(event, boundHandler);
+    });
+  }
+
+  attachTo(container: HTMLElement) {
+    container.appendChild(this.videoElement);
+  }
+
+  play() {
+    this.videoElement.play();
+  }
+
+  pause() {
+    this.videoElement.pause();
+  }
+
+  stop() {
+    this.videoElement.pause();
+    this.videoElement.currentTime = 0;
+  }
+
+  destroy() {
+    if (this.videoElement.parentNode) {
+      this.videoElement.parentNode.removeChild(this.videoElement);
+    }
+    this.removeAllListeners();
+    // Remove class event handlers
+    (Object.keys(this.boundHandlerMap) as VideoPlayerEvent[]).forEach(event => {
+      if (this.boundHandlerMap[event]) {
+        this.videoElement.removeEventListener(event, this.boundHandlerMap[event]!);
+        delete this.boundHandlerMap[event];
+      }
+    });
+  }
+
+  get element(): HTMLVideoElement {
+    return this.videoElement;
+  }
+
+  // Event callback function definitions
+  onPlay(e: Event) {
+    // Called when playback starts
+    if (typeof this.options.onPlaybackSuccess === 'function') {
+      this.options.onPlaybackSuccess();
+    }
+  }
+
+  onPause(e: Event) {
+    // Called when playback is paused
+    // Override or pass as option
+  }
+
+  onEnded(e: Event) {
+    // Called when playback ends
+    if (typeof this.options.onPlaybackEnded === 'function') {
+      this.options.onPlaybackEnded();
+    }
+  }
+
+  onTimeupdate(e: Event) {
+    // Called when playback position changes
+    // Override or pass as option
+  }
+
+  onError(e: Event) {
+    // Called on playback error
+    if (typeof this.options.onPlaybackError === 'function') {
+      this.options.onPlaybackError(e);
+    }
+  }
+
+  onLoadedmetadata(e: Event) {
+    // Called when metadata is loaded
+    // Override or pass as option
+  }
+
+  onSeeking(e: Event) {
+    // Called when seeking starts
+    // Override or pass as option
+  }
+
+  onSeeked(e: Event) {
+    // Called when seeking ends
+    // Override or pass as option
+  }
+
+  onVolumechange(e: Event) {
+    // Called when volume changes
+    // Override or pass as option
+  }
+
+  // Event system
+  on(event: VideoPlayerEvent, handler: EventHandler) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+      if (!this.boundEmitters[event]) {
+        this.boundEmitters[event] = this.emitEvent(event);
+        this.videoElement.addEventListener(event, this.boundEmitters[event]);
+      }
+    }
+    this.listeners[event].push(handler);
+  }
+
+  off(event: VideoPlayerEvent, handler: EventHandler) {
+    if (!this.listeners[event]) return;
+    this.listeners[event] = this.listeners[event].filter(h => h !== handler);
+    if (this.listeners[event].length === 0) {
+      if (this.boundEmitters[event]) {
+        this.videoElement.removeEventListener(event, this.boundEmitters[event]);
+        delete this.boundEmitters[event];
+      }
+      delete this.listeners[event];
+    }
+  }
+
+  once(event: VideoPlayerEvent, handler: EventHandler) {
+    const onceHandler: EventHandler = (...args) => {
+      handler(...args);
+      this.off(event, onceHandler);
+    };
+    this.on(event, onceHandler);
+  }
+
+  private emitEvent(event: VideoPlayerEvent) {
+    return (e: Event) => {
+      if (this.listeners[event]) {
+        this.listeners[event].forEach(handler => handler(e));
+      }
+    };
+  }
+
+  private removeAllListeners() {
+    (Object.keys(this.listeners) as VideoPlayerEvent[]).forEach(event => {
+      if (this.boundEmitters[event]) {
+        this.videoElement.removeEventListener(event, this.boundEmitters[event]);
+        delete this.boundEmitters[event];
+      }
+    });
+    this.listeners = {};
+  }
+}
+
+function getHandlerMethodName(event: string): string {
+  return 'on' + event.charAt(0).toUpperCase() + event.slice(1);
+}