Feat: event emitter

demo/src/App.tsx

@@ -98,12 +98,14 @@ function App() {
   };
 
   if (!hlsEngine.current) {
-    hlsEngine.current = new HlsJsEngine({ onSegmentLoaded });
+    hlsEngine.current = new HlsJsEngine();
+    hlsEngine.current.addEventListener("onSegmentLoaded", onSegmentLoaded);
   }
 
   if (!shakaEngine.current) {
     ShakaEngine.setGlobalSettings();
-    shakaEngine.current = new ShakaEngine(window.shaka, { onSegmentLoaded });
+    shakaEngine.current = new ShakaEngine(window.shaka);
+    shakaEngine.current.addEventListener("onSegmentLoaded", onSegmentLoaded);
   }
 
   useEffect(() => {
@@ -127,6 +129,7 @@ function App() {
     const hls = new window.Hls({
       ...engine.getConfig(),
     });
+
     engine.setHls(hls);
     hls.attachMedia(videoRef.current);
     hls.loadSource(url);

packages/p2p-media-loader-core/src/core.ts

@@ -5,16 +5,18 @@ import {
   Segment,
   Settings,
   SegmentBase,
-  CoreEventHandlers,
   BandwidthCalculators,
   StreamDetails,
+  CoreEventMap,
 } from "./types";
 import * as StreamUtils from "./utils/stream";
 import { BandwidthCalculator } from "./bandwidth-calculator";
 import { EngineCallbacks } from "./requests/engine-request";
 import { SegmentsMemoryStorage } from "./segments-storage";
+import { EventEmitter } from "./utils/event-emitter";
 
 export class Core<TStream extends Stream = Stream> {
+  private readonly eventEmitter = new EventEmitter<CoreEventMap>();
   private manifestResponseUrl?: string;
   private readonly streams = new Map<string, StreamWithSegments<TStream>>();
   private readonly settings: Settings = {
@@ -44,7 +46,21 @@ export class Core<TStream extends Stream = Stream> {
     activeLevelBitrate: 0,
   };
 
-  constructor(private readonly eventHandlers?: CoreEventHandlers) {}
+  constructor() {}
+
+  addEventListener<K extends keyof CoreEventMap>(
+    eventName: K,
+    listener: CoreEventMap[K],
+  ) {
+    this.eventEmitter.addEventListener(eventName, listener);
+  }
+
+  removeEventListener<K extends keyof CoreEventMap>(
+    eventName: K,
+    listener: CoreEventMap[K],
+  ) {
+    this.eventEmitter.removeEventListener(eventName, listener);
+  }
 
   setManifestResponseUrl(url: string): void {
     this.manifestResponseUrl = url.split("?")[0];
@@ -170,7 +186,7 @@ export class Core<TStream extends Stream = Stream> {
         this.settings,
         this.bandwidthCalculators,
         this.segmentStorage,
-        this.eventHandlers,
+        this.eventEmitter,
       );
     };
 

packages/p2p-media-loader-core/src/hybrid-loader.ts

@@ -3,10 +3,10 @@ import { HttpRequestExecutor } from "./http-loader";
 import { SegmentsMemoryStorage } from "./segments-storage";
 import {
   Settings,
-  CoreEventHandlers,
   Playback,
   BandwidthCalculators,
   StreamDetails,
+  CoreEventMap,
 } from "./types";
 import { P2PLoadersContainer } from "./p2p/loaders-container";
 import { RequestsContainer } from "./requests/request-container";
@@ -17,6 +17,7 @@ import * as StreamUtils from "./utils/stream";
 import * as Utils from "./utils/utils";
 import debug from "debug";
 import { QueueItem } from "./utils/queue";
+import { EventEmitter } from "./utils/event-emitter";
 
 const FAILED_ATTEMPTS_CLEAR_INTERVAL = 60000;
 
@@ -32,6 +33,7 @@ export class HybridLoader {
   private lastQueueProcessingTimeStamp?: number;
   private randomHttpDownloadInterval?: number;
   private isProcessQueueMicrotaskCreated = false;
+  private readonly onSegmentLoaded: CoreEventMap["onSegmentLoaded"];
 
   constructor(
     private streamManifestUrl: string,
@@ -40,7 +42,7 @@ export class HybridLoader {
     private readonly settings: Settings,
     private readonly bandwidthCalculators: BandwidthCalculators,
     private readonly segmentStorage: SegmentsMemoryStorage,
-    private readonly eventHandlers?: Pick<CoreEventHandlers, "onSegmentLoaded">,
+    eventEmitter: EventEmitter<CoreEventMap>,
   ) {
     const activeStream = this.lastRequestedSegment.stream;
     this.playback = { position: this.lastRequestedSegment.startTime, rate: 1 };
@@ -52,6 +54,8 @@ export class HybridLoader {
       this.settings,
     );
 
+    this.onSegmentLoaded = eventEmitter.getEventDispatcher("onSegmentLoaded");
+
     if (!this.segmentStorage.isInitialized) {
       throw new Error("Segment storage is not initialized.");
     }
@@ -167,7 +171,7 @@ export class HybridLoader {
           }
           this.requests.remove(request);
           void this.segmentStorage.storeSegment(request.segment, request.data);
-          this.eventHandlers?.onSegmentLoaded?.(request.data.byteLength, type);
+          this.onSegmentLoaded(request.data.byteLength, type);
           break;
 
         case "failed":

packages/p2p-media-loader-core/src/types.d.ts

@@ -56,8 +56,8 @@ export type Settings = {
   validateP2PSegment?: (url: string, byteRange?: ByteRange) => Promise<boolean>;
 };
 
-export type CoreEventHandlers = {
-  onSegmentLoaded?: (byteLength: number, type: RequestAttempt["type"]) => void;
+export type CoreEventMap = {
+  onSegmentLoaded: (byteLength: number, type: RequestAttempt["type"]) => void;
 };
 
 export type Playback = {

packages/p2p-media-loader-core/src/utils/event-emitter.ts

@@ -0,0 +1,61 @@
+export class EventEmitter<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  EventTypesMap extends { [key: string]: (...args: any[]) => unknown },
+> {
+  private events = new Map<
+    keyof EventTypesMap,
+    EventTypesMap[keyof EventTypesMap][]
+  >();
+
+  public dispatchEvent<K extends keyof EventTypesMap>(
+    eventName: K,
+    ...args: Parameters<EventTypesMap[K]>
+  ) {
+    const listeners = this.events.get(eventName);
+    if (!listeners) return;
+    for (const listener of listeners) {
+      listener(...args);
+    }
+  }
+
+  public getEventDispatcher<K extends keyof EventTypesMap>(eventName: K) {
+    let listeners = this.events.get(eventName);
+    if (!listeners) {
+      listeners = [];
+      this.events.set(eventName, listeners);
+    }
+
+    const definedListeners = listeners;
+
+    return (...args: Parameters<EventTypesMap[K]>) => {
+      for (const listener of definedListeners) {
+        listener(...args);
+      }
+    };
+  }
+
+  public addEventListener<K extends keyof EventTypesMap>(
+    eventName: K,
+    listener: EventTypesMap[K],
+  ) {
+    const listeners = this.events.get(eventName);
+    if (!listeners) {
+      this.events.set(eventName, [listener]);
+    } else {
+      listeners.push(listener);
+    }
+  }
+
+  public removeEventListener<K extends keyof EventTypesMap>(
+    eventName: K,
+    listener: EventTypesMap[K],
+  ) {
+    const listeners = this.events.get(eventName);
+    if (listeners) {
+      const index = listeners.indexOf(listener);
+      if (index !== -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+}

packages/p2p-media-loader-hlsjs/src/engine.ts

@@ -10,19 +10,33 @@ import type { HlsConfig, Events } from "hls.js";
 import { FragmentLoaderBase } from "./fragment-loader";
 import { PlaylistLoaderBase } from "./playlist-loader";
 import { SegmentManager } from "./segment-mananger";
-import { Core, CoreEventHandlers } from "p2p-media-loader-core";
+import { Core, CoreEventMap } from "p2p-media-loader-core";
 
 export class Engine {
   private readonly core: Core;
   private readonly segmentManager: SegmentManager;
   private hlsInstanceGetter?: () => Hls;
   private currentHlsInstance?: Hls;
 
-  constructor(eventHandlers?: CoreEventHandlers) {
-    this.core = new Core(eventHandlers);
+  constructor() {
+    this.core = new Core();
     this.segmentManager = new SegmentManager(this.core);
   }
 
+  public addEventListener<K extends keyof CoreEventMap>(
+    eventName: K,
+    listener: CoreEventMap[K],
+  ) {
+    this.core.addEventListener(eventName, listener);
+  }
+
+  public removeEventListener<K extends keyof CoreEventMap>(
+    eventName: K,
+    listener: CoreEventMap[K],
+  ) {
+    this.core.removeEventListener(eventName, listener);
+  }
+
   public getConfig(): Partial<HlsConfig> {
     return {
       fLoader: this.createFragmentLoaderClass(),

packages/p2p-media-loader-shaka/src/engine.ts

@@ -13,7 +13,7 @@ import {
   P2PMLShakaData,
 } from "./types";
 import { Loader } from "./loading-handler";
-import { Core, CoreEventHandlers } from "p2p-media-loader-core";
+import { Core, CoreEventMap } from "p2p-media-loader-core";
 
 const LIVE_EDGE_DELAY = 25;
 
@@ -25,9 +25,9 @@ export class Engine {
   private readonly segmentManager: SegmentManager;
   private requestFilter?: shaka.extern.RequestFilter;
 
-  constructor(shaka?: unknown, eventHandlers?: CoreEventHandlers) {
+  constructor(shaka?: unknown) {
     this.shaka = (shaka as Shaka | undefined) ?? window.shaka;
-    this.core = new Core(eventHandlers);
+    this.core = new Core();
     this.segmentManager = new SegmentManager(this.streamInfo, this.core);
   }
 
@@ -44,6 +44,20 @@ export class Engine {
     this.updatePlayerEventHandlers("register");
   }
 
+  public addEventListener<K extends keyof CoreEventMap>(
+    eventName: K,
+    listener: CoreEventMap[K],
+  ) {
+    this.core.addEventListener(eventName, listener);
+  }
+
+  public removeEventListener<K extends keyof CoreEventMap>(
+    eventName: K,
+    listener: CoreEventMap[K],
+  ) {
+    this.core.removeEventListener(eventName, listener);
+  }
+
   private updatePlayerEventHandlers = (type: "register" | "unregister") => {
     const { player } = this;
     if (!player) return;