@100mslive/hls-stats 0.0.1

package/dist/adapters/BaseAdapter.d.ts

@@ -0,0 +1,10 @@
+import { HlsInstance, HlsPlayerStats } from '../interfaces';
+export declare abstract class BaseAdapter {
+    hlsInstance: HlsInstance;
+    videoEl: HTMLVideoElement;
+    hlsStatsState: HlsPlayerStats;
+    constructor(hlsInstance: HlsInstance, videoEl: HTMLVideoElement);
+    abstract startGatheringStats(): void;
+    abstract finishGatheringStats(): void;
+    getState(): HlsPlayerStats;
+}

package/dist/adapters/HlsJsAdapter.d.ts

@@ -0,0 +1,17 @@
+import { BaseAdapter } from './BaseAdapter';
+export declare class HlsJsAdapter extends BaseAdapter {
+    timeUpdateHandler: () => void;
+    levelLoadedHandler: (_: any, { level }: {
+        level: number;
+    }) => void;
+    fragChangedHandler: (_: any, { frag }: {
+        frag: {
+            stats: {
+                bwEstimate: number;
+            };
+            baseurl: string;
+        };
+    }) => void;
+    startGatheringStats(): void;
+    finishGatheringStats(): void;
+}

package/dist/controllers/HlsStats.d.ts

@@ -0,0 +1,11 @@
+import { BaseAdapter } from '../adapters/BaseAdapter';
+import { HlsInstance, HlsPlayerStats } from '../interfaces';
+import { IHlsStats } from '../interfaces/IHlsStats';
+export declare class HlsStats implements IHlsStats {
+    adapter: BaseAdapter;
+    intervalFunctionId: number;
+    constructor(hlsLibraryInstance: HlsInstance, videoEl: HTMLVideoElement);
+    subscribe(callback: (state: HlsPlayerStats) => void, interval?: number): () => void;
+    unsubscribe(): void;
+    getState(): HlsPlayerStats;
+}

package/dist/index.cjs.js

@@ -0,0 +1,2 @@
+var u=Object.create;var n=Object.defineProperty,E=Object.defineProperties,I=Object.getOwnPropertyDescriptor,b=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols,L=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var v=(e,t,s)=>t in e?n(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,l=(e,t)=>{for(var s in t||(t={}))m.call(t,s)&&v(e,s,t[s]);if(p)for(var s of p(t))A.call(t,s)&&v(e,s,t[s]);return e},d=(e,t)=>E(e,b(t)),H=e=>n(e,"__esModule",{value:!0});var y=(e,t)=>{H(e);for(var s in t)n(e,s,{get:t[s],enumerable:!0})},G=(e,t,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!m.call(e,a)&&a!=="default"&&n(e,a,{get:()=>t[a],enumerable:!(s=I(t,a))||s.enumerable});return e},F=e=>G(H(n(e!=null?u(L(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);y(exports,{HlsStats:()=>S});var r=F(require("hls.js"));var h=class{constructor(t,s){this.hlsInstance={};this.hlsStatsState={};this.hlsInstance=t,this.videoEl=s}getState(){return this.hlsStatsState}};var c=class extends h{constructor(){super(...arguments);this.timeUpdateHandler=()=>{let t=this.videoEl.buffered.length>0?this.videoEl.buffered.end(0)-this.videoEl.buffered.start(0):0,s=(this.hlsInstance.liveSyncPosition?this.hlsInstance.liveSyncPosition-this.videoEl.currentTime:0)*1e3,i=this.videoEl.getVideoPlaybackQuality().droppedVideoFrames;this.hlsStatsState=d(l({},this.hlsStatsState),{distanceFromLive:s>0?s:0,bufferedDuration:t,droppedFrames:i})};this.levelLoadedHandler=(t,{level:s})=>{let a=this.hlsInstance.levels[s],{bitrate:i,height:o,width:f}=a;this.hlsStatsState=d(l({},this.hlsStatsState),{bitrate:i,videoSize:{height:o,width:f}})};this.fragChangedHandler=(t,{frag:s})=>{let{stats:a,baseurl:i}=s,{bwEstimate:o}=a;this.hlsStatsState=d(l({},this.hlsStatsState),{bandwidthEstimate:o,url:i})}}startGatheringStats(){this.hlsInstance.on(r.default.Events.FRAG_CHANGED,this.fragChangedHandler),this.hlsInstance.on(r.default.Events.LEVEL_LOADED,this.levelLoadedHandler),this.videoEl.addEventListener("timeupdate",this.timeUpdateHandler)}finishGatheringStats(){this.videoEl.removeEventListener("timeupdate",this.timeUpdateHandler),this.hlsInstance.off(r.default.Events.FRAG_CHANGED,this.fragChangedHandler),this.hlsInstance.off(r.default.Events.LEVEL_LOADED,this.levelLoadedHandler)}};var S=class{constructor(t,s){this.intervalFunctionId=-1;let a=new c(t,s);this.adapter=a}subscribe(t,s=2e3){return this.adapter.startGatheringStats(),this.intervalFunctionId=setInterval(()=>{t(this.getState())},s),this.unsubscribe.bind(this)}unsubscribe(){clearInterval(this.intervalFunctionId),this.adapter.finishGatheringStats()}getState(){return this.adapter.getState()}};
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/adapters/HlsJsAdapter.ts", "../src/adapters/BaseAdapter.ts", "../src/controllers/HlsStats.ts"],
+  "sourcesContent": ["export { HlsStats } from './controllers/HlsStats';\nexport type { IHlsStats } from './interfaces/IHlsStats';\n", "import Hls from 'hls.js';\nimport { BaseAdapter } from './BaseAdapter';\n\nexport class HlsJsAdapter extends BaseAdapter {\n  timeUpdateHandler = () => {\n    const bufferedDuration =\n      this.videoEl.buffered.length > 0 ? this.videoEl.buffered.end(0) - this.videoEl.buffered.start(0) : 0;\n    const distanceFromLive =\n      (this.hlsInstance.liveSyncPosition ? this.hlsInstance.liveSyncPosition - this.videoEl.currentTime : 0) * 1000;\n    const quality = this.videoEl.getVideoPlaybackQuality();\n    const droppedFrames = quality.droppedVideoFrames;\n    this.hlsStatsState = {\n      ...this.hlsStatsState,\n      distanceFromLive: distanceFromLive > 0 ? distanceFromLive : 0,\n      bufferedDuration,\n      droppedFrames,\n    };\n  };\n\n  levelLoadedHandler = (_: any, { level }: { level: number }) => {\n    const currentLevel = this.hlsInstance.levels[level];\n    const { bitrate, height, width } = currentLevel;\n    this.hlsStatsState = {\n      ...this.hlsStatsState,\n      bitrate,\n      videoSize: {\n        height,\n        width,\n      },\n    };\n  };\n\n  fragChangedHandler = (_: any, { frag }: { frag: { stats: { bwEstimate: number }; baseurl: string } }) => {\n    const { stats, baseurl } = frag;\n    const { bwEstimate } = stats;\n    this.hlsStatsState = {\n      ...this.hlsStatsState,\n      bandwidthEstimate: bwEstimate,\n      url: baseurl,\n    };\n  };\n\n  startGatheringStats(): void {\n    this.hlsInstance.on(Hls.Events.FRAG_CHANGED, this.fragChangedHandler);\n    this.hlsInstance.on(Hls.Events.LEVEL_LOADED, this.levelLoadedHandler);\n    this.videoEl.addEventListener('timeupdate', this.timeUpdateHandler);\n  }\n\n  finishGatheringStats(): void {\n    this.videoEl.removeEventListener('timeupdate', this.timeUpdateHandler);\n    this.hlsInstance.off(Hls.Events.FRAG_CHANGED, this.fragChangedHandler);\n    this.hlsInstance.off(Hls.Events.LEVEL_LOADED, this.levelLoadedHandler);\n  }\n}\n", "import { HlsInstance, HlsPlayerStats } from '../interfaces';\n\nexport abstract class BaseAdapter {\n  hlsInstance: HlsInstance = {} as HlsInstance;\n  videoEl: HTMLVideoElement;\n  hlsStatsState: HlsPlayerStats = {};\n  constructor(hlsInstance: HlsInstance, videoEl: HTMLVideoElement) {\n    this.hlsInstance = hlsInstance;\n    this.videoEl = videoEl;\n  }\n  abstract startGatheringStats(): void;\n  abstract finishGatheringStats(): void;\n  getState() {\n    return this.hlsStatsState;\n  }\n}\n", "import { BaseAdapter } from '../adapters/BaseAdapter';\nimport { HlsJsAdapter } from '../adapters/HlsJsAdapter';\nimport { HlsInstance, HlsPlayerStats } from '../interfaces';\nimport { IHlsStats } from '../interfaces/IHlsStats';\n\nexport class HlsStats implements IHlsStats {\n  adapter: BaseAdapter;\n  intervalFunctionId = -1;\n  constructor(hlsLibraryInstance: HlsInstance, videoEl: HTMLVideoElement) {\n    const hlsJsAdapter = new HlsJsAdapter(hlsLibraryInstance, videoEl);\n    this.adapter = hlsJsAdapter;\n  }\n\n  subscribe(callback: (state: HlsPlayerStats) => void, interval = 2000) {\n    this.adapter.startGatheringStats();\n    //@ts-ignore\n    this.intervalFunctionId = setInterval(() => {\n      callback(this.getState());\n    }, interval);\n    return this.unsubscribe.bind(this);\n  }\n  unsubscribe() {\n    clearInterval(this.intervalFunctionId);\n    this.adapter.finishGatheringStats();\n  }\n\n  getState() {\n    return this.adapter.getState();\n  }\n}\n"],
+  "mappings": "s6BAAA,4BCAA,MAAgB,qBCET,WAA2B,CAIhC,YAAY,EAA0B,EAA2B,CAHjE,iBAA2B,GAE3B,mBAAgC,GAE9B,KAAK,YAAc,EACnB,KAAK,QAAU,EAIjB,UAAW,CACT,MAAO,MAAK,gBDVT,mBAA2B,EAAY,CAAvC,aAHP,CAGO,oBACL,uBAAoB,IAAM,CACxB,GAAM,GACJ,KAAK,QAAQ,SAAS,OAAS,EAAI,KAAK,QAAQ,SAAS,IAAI,GAAK,KAAK,QAAQ,SAAS,MAAM,GAAK,EAC/F,EACH,MAAK,YAAY,iBAAmB,KAAK,YAAY,iBAAmB,KAAK,QAAQ,YAAc,GAAK,IAErG,EAAgB,AADN,KAAK,QAAQ,0BACC,mBAC9B,KAAK,cAAgB,OAChB,KAAK,eADW,CAEnB,iBAAkB,EAAmB,EAAI,EAAmB,EAC5D,mBACA,mBAIJ,wBAAqB,CAAC,EAAQ,CAAE,WAA+B,CAC7D,GAAM,GAAe,KAAK,YAAY,OAAO,GACvC,CAAE,UAAS,SAAQ,SAAU,EACnC,KAAK,cAAgB,OAChB,KAAK,eADW,CAEnB,UACA,UAAW,CACT,SACA,YAKN,wBAAqB,CAAC,EAAQ,CAAE,UAAyE,CACvG,GAAM,CAAE,QAAO,WAAY,EACrB,CAAE,cAAe,EACvB,KAAK,cAAgB,OAChB,KAAK,eADW,CAEnB,kBAAmB,EACnB,IAAK,KAIT,qBAA4B,CAC1B,KAAK,YAAY,GAAG,UAAI,OAAO,aAAc,KAAK,oBAClD,KAAK,YAAY,GAAG,UAAI,OAAO,aAAc,KAAK,oBAClD,KAAK,QAAQ,iBAAiB,aAAc,KAAK,mBAGnD,sBAA6B,CAC3B,KAAK,QAAQ,oBAAoB,aAAc,KAAK,mBACpD,KAAK,YAAY,IAAI,UAAI,OAAO,aAAc,KAAK,oBACnD,KAAK,YAAY,IAAI,UAAI,OAAO,aAAc,KAAK,sBE9ChD,WAAoC,CAGzC,YAAY,EAAiC,EAA2B,CADxE,wBAAqB,GAEnB,GAAM,GAAe,GAAI,GAAa,EAAoB,GAC1D,KAAK,QAAU,EAGjB,UAAU,EAA2C,EAAW,IAAM,CACpE,YAAK,QAAQ,sBAEb,KAAK,mBAAqB,YAAY,IAAM,CAC1C,EAAS,KAAK,aACb,GACI,KAAK,YAAY,KAAK,MAE/B,aAAc,CACZ,cAAc,KAAK,oBACnB,KAAK,QAAQ,uBAGf,UAAW,CACT,MAAO,MAAK,QAAQ",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { HlsStats } from './controllers/HlsStats';
+export type { IHlsStats } from './interfaces/IHlsStats';

package/dist/index.js

@@ -0,0 +1,2 @@
+var v=Object.defineProperty,H=Object.defineProperties;var f=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var S=(s,e,t)=>e in s?v(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,n=(s,e)=>{for(var t in e||(e={}))u.call(e,t)&&S(s,t,e[t]);if(c)for(var t of c(e))E.call(e,t)&&S(s,t,e[t]);return s},r=(s,e)=>H(s,f(e));import l from"hls.js";var o=class{constructor(e,t){this.hlsInstance={};this.hlsStatsState={};this.hlsInstance=e,this.videoEl=t}getState(){return this.hlsStatsState}};var h=class extends o{constructor(){super(...arguments);this.timeUpdateHandler=()=>{let e=this.videoEl.buffered.length>0?this.videoEl.buffered.end(0)-this.videoEl.buffered.start(0):0,t=(this.hlsInstance.liveSyncPosition?this.hlsInstance.liveSyncPosition-this.videoEl.currentTime:0)*1e3,i=this.videoEl.getVideoPlaybackQuality().droppedVideoFrames;this.hlsStatsState=r(n({},this.hlsStatsState),{distanceFromLive:t>0?t:0,bufferedDuration:e,droppedFrames:i})};this.levelLoadedHandler=(e,{level:t})=>{let a=this.hlsInstance.levels[t],{bitrate:i,height:d,width:m}=a;this.hlsStatsState=r(n({},this.hlsStatsState),{bitrate:i,videoSize:{height:d,width:m}})};this.fragChangedHandler=(e,{frag:t})=>{let{stats:a,baseurl:i}=t,{bwEstimate:d}=a;this.hlsStatsState=r(n({},this.hlsStatsState),{bandwidthEstimate:d,url:i})}}startGatheringStats(){this.hlsInstance.on(l.Events.FRAG_CHANGED,this.fragChangedHandler),this.hlsInstance.on(l.Events.LEVEL_LOADED,this.levelLoadedHandler),this.videoEl.addEventListener("timeupdate",this.timeUpdateHandler)}finishGatheringStats(){this.videoEl.removeEventListener("timeupdate",this.timeUpdateHandler),this.hlsInstance.off(l.Events.FRAG_CHANGED,this.fragChangedHandler),this.hlsInstance.off(l.Events.LEVEL_LOADED,this.levelLoadedHandler)}};var p=class{constructor(e,t){this.intervalFunctionId=-1;let a=new h(e,t);this.adapter=a}subscribe(e,t=2e3){return this.adapter.startGatheringStats(),this.intervalFunctionId=setInterval(()=>{e(this.getState())},t),this.unsubscribe.bind(this)}unsubscribe(){clearInterval(this.intervalFunctionId),this.adapter.finishGatheringStats()}getState(){return this.adapter.getState()}};export{p as HlsStats};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/adapters/HlsJsAdapter.ts", "../src/adapters/BaseAdapter.ts", "../src/controllers/HlsStats.ts"],
+  "sourcesContent": ["import Hls from 'hls.js';\nimport { BaseAdapter } from './BaseAdapter';\n\nexport class HlsJsAdapter extends BaseAdapter {\n  timeUpdateHandler = () => {\n    const bufferedDuration =\n      this.videoEl.buffered.length > 0 ? this.videoEl.buffered.end(0) - this.videoEl.buffered.start(0) : 0;\n    const distanceFromLive =\n      (this.hlsInstance.liveSyncPosition ? this.hlsInstance.liveSyncPosition - this.videoEl.currentTime : 0) * 1000;\n    const quality = this.videoEl.getVideoPlaybackQuality();\n    const droppedFrames = quality.droppedVideoFrames;\n    this.hlsStatsState = {\n      ...this.hlsStatsState,\n      distanceFromLive: distanceFromLive > 0 ? distanceFromLive : 0,\n      bufferedDuration,\n      droppedFrames,\n    };\n  };\n\n  levelLoadedHandler = (_: any, { level }: { level: number }) => {\n    const currentLevel = this.hlsInstance.levels[level];\n    const { bitrate, height, width } = currentLevel;\n    this.hlsStatsState = {\n      ...this.hlsStatsState,\n      bitrate,\n      videoSize: {\n        height,\n        width,\n      },\n    };\n  };\n\n  fragChangedHandler = (_: any, { frag }: { frag: { stats: { bwEstimate: number }; baseurl: string } }) => {\n    const { stats, baseurl } = frag;\n    const { bwEstimate } = stats;\n    this.hlsStatsState = {\n      ...this.hlsStatsState,\n      bandwidthEstimate: bwEstimate,\n      url: baseurl,\n    };\n  };\n\n  startGatheringStats(): void {\n    this.hlsInstance.on(Hls.Events.FRAG_CHANGED, this.fragChangedHandler);\n    this.hlsInstance.on(Hls.Events.LEVEL_LOADED, this.levelLoadedHandler);\n    this.videoEl.addEventListener('timeupdate', this.timeUpdateHandler);\n  }\n\n  finishGatheringStats(): void {\n    this.videoEl.removeEventListener('timeupdate', this.timeUpdateHandler);\n    this.hlsInstance.off(Hls.Events.FRAG_CHANGED, this.fragChangedHandler);\n    this.hlsInstance.off(Hls.Events.LEVEL_LOADED, this.levelLoadedHandler);\n  }\n}\n", "import { HlsInstance, HlsPlayerStats } from '../interfaces';\n\nexport abstract class BaseAdapter {\n  hlsInstance: HlsInstance = {} as HlsInstance;\n  videoEl: HTMLVideoElement;\n  hlsStatsState: HlsPlayerStats = {};\n  constructor(hlsInstance: HlsInstance, videoEl: HTMLVideoElement) {\n    this.hlsInstance = hlsInstance;\n    this.videoEl = videoEl;\n  }\n  abstract startGatheringStats(): void;\n  abstract finishGatheringStats(): void;\n  getState() {\n    return this.hlsStatsState;\n  }\n}\n", "import { BaseAdapter } from '../adapters/BaseAdapter';\nimport { HlsJsAdapter } from '../adapters/HlsJsAdapter';\nimport { HlsInstance, HlsPlayerStats } from '../interfaces';\nimport { IHlsStats } from '../interfaces/IHlsStats';\n\nexport class HlsStats implements IHlsStats {\n  adapter: BaseAdapter;\n  intervalFunctionId = -1;\n  constructor(hlsLibraryInstance: HlsInstance, videoEl: HTMLVideoElement) {\n    const hlsJsAdapter = new HlsJsAdapter(hlsLibraryInstance, videoEl);\n    this.adapter = hlsJsAdapter;\n  }\n\n  subscribe(callback: (state: HlsPlayerStats) => void, interval = 2000) {\n    this.adapter.startGatheringStats();\n    //@ts-ignore\n    this.intervalFunctionId = setInterval(() => {\n      callback(this.getState());\n    }, interval);\n    return this.unsubscribe.bind(this);\n  }\n  unsubscribe() {\n    clearInterval(this.intervalFunctionId);\n    this.adapter.finishGatheringStats();\n  }\n\n  getState() {\n    return this.adapter.getState();\n  }\n}\n"],
+  "mappings": "6aAAA,sBCEO,WAA2B,CAIhC,YAAY,EAA0B,EAA2B,CAHjE,iBAA2B,GAE3B,mBAAgC,GAE9B,KAAK,YAAc,EACnB,KAAK,QAAU,EAIjB,UAAW,CACT,MAAO,MAAK,gBDVT,mBAA2B,EAAY,CAAvC,aAHP,CAGO,oBACL,uBAAoB,IAAM,CACxB,GAAM,GACJ,KAAK,QAAQ,SAAS,OAAS,EAAI,KAAK,QAAQ,SAAS,IAAI,GAAK,KAAK,QAAQ,SAAS,MAAM,GAAK,EAC/F,EACH,MAAK,YAAY,iBAAmB,KAAK,YAAY,iBAAmB,KAAK,QAAQ,YAAc,GAAK,IAErG,EAAgB,AADN,KAAK,QAAQ,0BACC,mBAC9B,KAAK,cAAgB,OAChB,KAAK,eADW,CAEnB,iBAAkB,EAAmB,EAAI,EAAmB,EAC5D,mBACA,mBAIJ,wBAAqB,CAAC,EAAQ,CAAE,WAA+B,CAC7D,GAAM,GAAe,KAAK,YAAY,OAAO,GACvC,CAAE,UAAS,SAAQ,SAAU,EACnC,KAAK,cAAgB,OAChB,KAAK,eADW,CAEnB,UACA,UAAW,CACT,SACA,YAKN,wBAAqB,CAAC,EAAQ,CAAE,UAAyE,CACvG,GAAM,CAAE,QAAO,WAAY,EACrB,CAAE,cAAe,EACvB,KAAK,cAAgB,OAChB,KAAK,eADW,CAEnB,kBAAmB,EACnB,IAAK,KAIT,qBAA4B,CAC1B,KAAK,YAAY,GAAG,EAAI,OAAO,aAAc,KAAK,oBAClD,KAAK,YAAY,GAAG,EAAI,OAAO,aAAc,KAAK,oBAClD,KAAK,QAAQ,iBAAiB,aAAc,KAAK,mBAGnD,sBAA6B,CAC3B,KAAK,QAAQ,oBAAoB,aAAc,KAAK,mBACpD,KAAK,YAAY,IAAI,EAAI,OAAO,aAAc,KAAK,oBACnD,KAAK,YAAY,IAAI,EAAI,OAAO,aAAc,KAAK,sBE9ChD,WAAoC,CAGzC,YAAY,EAAiC,EAA2B,CADxE,wBAAqB,GAEnB,GAAM,GAAe,GAAI,GAAa,EAAoB,GAC1D,KAAK,QAAU,EAGjB,UAAU,EAA2C,EAAW,IAAM,CACpE,YAAK,QAAQ,sBAEb,KAAK,mBAAqB,YAAY,IAAM,CAC1C,EAAS,KAAK,aACb,GACI,KAAK,YAAY,KAAK,MAE/B,aAAc,CACZ,cAAc,KAAK,oBACnB,KAAK,QAAQ,uBAGf,UAAW,CACT,MAAO,MAAK,QAAQ",
+  "names": []
+}

package/dist/interfaces/IHlsStats.d.ts

@@ -0,0 +1,5 @@
+import { HlsPlayerStats } from '.';
+export interface IHlsStats {
+    subscribe(callback: (state: HlsPlayerStats) => void, interval: number): () => void;
+    getState(): HlsPlayerStats;
+}

package/dist/interfaces/index.d.ts

@@ -0,0 +1,25 @@
+import Hls from 'hls.js';
+/**
+ * this is a universal type to be passed for BaseAdapter.
+ * Union more Types to this type as we support different libraries.
+ */
+export declare type HlsInstance = Hls;
+export interface HlsPlayerStats {
+    /** Estimated bandwidth in bits/sec. Could be used to show connection speed. */
+    bandwidthEstimate?: number;
+    /** The bitrate of the current level that is playing. Given in bits/sec */
+    bitrate?: number;
+    /** the amount of video available in forward buffer. Given in ms */
+    bufferedDuration?: number;
+    /** how far is the current playback from live edge.*/
+    distanceFromLive?: number;
+    /** total Frames dropped since started watching the stream. */
+    droppedFrames?: number;
+    /** the m3u8 url of the current level that is being played */
+    url?: string;
+    /** the resolution of the level of the video that is being played */
+    videoSize?: {
+        height: number;
+        width: number;
+    };
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@100mslive/hls-stats",
+  "version": "0.0.1",
+  "description": "A simple library that provides stats for your hls stream",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "prestart": "rm -rf dist && yarn types:build",
+    "start": "concurrently \"yarn dev\" \"yarn types\"",
+    "dev": "node ../../scripts/dev",
+    "build:only": "node ../../scripts/build",
+    "prebuild": "rm -rf dist",
+    "build": "yarn build:only && yarn types:build",
+    "types": "tsc -w",
+    "types:build": "tsc -p tsconfig.json",
+    "lint": "eslint -c ../../.eslintrc .",
+    "lint:fix": "yarn lint --fix"
+  },
+  "author": "Ragzzy-R",
+  "license": "MIT",
+  "devDependencies": {
+    "hls.js": "^1.2.5"
+  },
+  "peerDependencies": {
+    "hls.js": "^1.2.5"
+  }
+}

package/src/adapters/BaseAdapter.ts

@@ -0,0 +1,16 @@
+import { HlsInstance, HlsPlayerStats } from '../interfaces';
+
+export abstract class BaseAdapter {
+  hlsInstance: HlsInstance = {} as HlsInstance;
+  videoEl: HTMLVideoElement;
+  hlsStatsState: HlsPlayerStats = {};
+  constructor(hlsInstance: HlsInstance, videoEl: HTMLVideoElement) {
+    this.hlsInstance = hlsInstance;
+    this.videoEl = videoEl;
+  }
+  abstract startGatheringStats(): void;
+  abstract finishGatheringStats(): void;
+  getState() {
+    return this.hlsStatsState;
+  }
+}

package/src/adapters/HlsJsAdapter.ts

@@ -0,0 +1,54 @@
+import Hls from 'hls.js';
+import { BaseAdapter } from './BaseAdapter';
+
+export class HlsJsAdapter extends BaseAdapter {
+  timeUpdateHandler = () => {
+    const bufferedDuration =
+      this.videoEl.buffered.length > 0 ? this.videoEl.buffered.end(0) - this.videoEl.buffered.start(0) : 0;
+    const distanceFromLive =
+      (this.hlsInstance.liveSyncPosition ? this.hlsInstance.liveSyncPosition - this.videoEl.currentTime : 0) * 1000;
+    const quality = this.videoEl.getVideoPlaybackQuality();
+    const droppedFrames = quality.droppedVideoFrames;
+    this.hlsStatsState = {
+      ...this.hlsStatsState,
+      distanceFromLive: distanceFromLive > 0 ? distanceFromLive : 0,
+      bufferedDuration,
+      droppedFrames,
+    };
+  };
+
+  levelLoadedHandler = (_: any, { level }: { level: number }) => {
+    const currentLevel = this.hlsInstance.levels[level];
+    const { bitrate, height, width } = currentLevel;
+    this.hlsStatsState = {
+      ...this.hlsStatsState,
+      bitrate,
+      videoSize: {
+        height,
+        width,
+      },
+    };
+  };
+
+  fragChangedHandler = (_: any, { frag }: { frag: { stats: { bwEstimate: number }; baseurl: string } }) => {
+    const { stats, baseurl } = frag;
+    const { bwEstimate } = stats;
+    this.hlsStatsState = {
+      ...this.hlsStatsState,
+      bandwidthEstimate: bwEstimate,
+      url: baseurl,
+    };
+  };
+
+  startGatheringStats(): void {
+    this.hlsInstance.on(Hls.Events.FRAG_CHANGED, this.fragChangedHandler);
+    this.hlsInstance.on(Hls.Events.LEVEL_LOADED, this.levelLoadedHandler);
+    this.videoEl.addEventListener('timeupdate', this.timeUpdateHandler);
+  }
+
+  finishGatheringStats(): void {
+    this.videoEl.removeEventListener('timeupdate', this.timeUpdateHandler);
+    this.hlsInstance.off(Hls.Events.FRAG_CHANGED, this.fragChangedHandler);
+    this.hlsInstance.off(Hls.Events.LEVEL_LOADED, this.levelLoadedHandler);
+  }
+}

package/src/controllers/HlsStats.ts

@@ -0,0 +1,30 @@
+import { BaseAdapter } from '../adapters/BaseAdapter';
+import { HlsJsAdapter } from '../adapters/HlsJsAdapter';
+import { HlsInstance, HlsPlayerStats } from '../interfaces';
+import { IHlsStats } from '../interfaces/IHlsStats';
+
+export class HlsStats implements IHlsStats {
+  adapter: BaseAdapter;
+  intervalFunctionId = -1;
+  constructor(hlsLibraryInstance: HlsInstance, videoEl: HTMLVideoElement) {
+    const hlsJsAdapter = new HlsJsAdapter(hlsLibraryInstance, videoEl);
+    this.adapter = hlsJsAdapter;
+  }
+
+  subscribe(callback: (state: HlsPlayerStats) => void, interval = 2000) {
+    this.adapter.startGatheringStats();
+    //@ts-ignore
+    this.intervalFunctionId = setInterval(() => {
+      callback(this.getState());
+    }, interval);
+    return this.unsubscribe.bind(this);
+  }
+  unsubscribe() {
+    clearInterval(this.intervalFunctionId);
+    this.adapter.finishGatheringStats();
+  }
+
+  getState() {
+    return this.adapter.getState();
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { HlsStats } from './controllers/HlsStats';
+export type { IHlsStats } from './interfaces/IHlsStats';

package/src/interfaces/IHlsStats.ts

@@ -0,0 +1,6 @@
+import { HlsPlayerStats } from '.';
+
+export interface IHlsStats {
+  subscribe(callback: (state: HlsPlayerStats) => void, interval: number): () => void;
+  getState(): HlsPlayerStats;
+}

package/src/interfaces/index.ts

@@ -0,0 +1,24 @@
+import Hls from 'hls.js';
+
+/**
+ * this is a universal type to be passed for BaseAdapter.
+ * Union more Types to this type as we support different libraries.
+ */
+export type HlsInstance = Hls;
+
+export interface HlsPlayerStats {
+  /** Estimated bandwidth in bits/sec. Could be used to show connection speed. */
+  bandwidthEstimate?: number;
+  /** The bitrate of the current level that is playing. Given in bits/sec */
+  bitrate?: number;
+  /** the amount of video available in forward buffer. Given in ms */
+  bufferedDuration?: number;
+  /** how far is the current playback from live edge.*/
+  distanceFromLive?: number;
+  /** total Frames dropped since started watching the stream. */
+  droppedFrames?: number;
+  /** the m3u8 url of the current level that is being played */
+  url?: string;
+  /** the resolution of the level of the video that is being played */
+  videoSize?: { height: number; width: number };
+}