Merge pull request #112 from salesh/feature/111-ability-to-pass-confi…

…g-to-hls feat(hls) 111: add ability to pass config to hls.js
videogular · Jan 10, 2023 · 93dfdf8 · 93dfdf8
2 parents 7c34c24 + f416c65
commit 93dfdf8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/docs/ngx-videogular-demo/modules/streaming/vg-hls/README.md b/docs/ngx-videogular-demo/modules/streaming/vg-hls/README.md
@@ -47,6 +47,7 @@ This module is dependant of `hls.js` library and you need to install via `npm in
 |--- |--- |
 | vgHls | Url to an HLS m3u8 file. |
 | vgHlsHeaders | Key/Value pairs that will be added as headers to the m3u8 file. Key is header name. Value is header value. |
+| config | Configuration parameters could be provided to hls.js upon instantiation of Hls object. Check out hls.js documentation. |
 
 ## Outputs
 

diff --git a/libs/ngx-videogular/streaming/src/lib/directives/vg-hls/vg-hls.directive.ts b/libs/ngx-videogular/streaming/src/lib/directives/vg-hls/vg-hls.directive.ts
@@ -29,6 +29,7 @@ declare let Hls: {
 export class VgHlsDirective implements OnInit, OnChanges, OnDestroy {
   @Input() vgHls: string;
   @Input() vgHlsHeaders: { [key: string]: string } = {};
+  @Input() config: IHLSConfig;
 
   @Output() onGetBitrates: EventEmitter<BitrateOptions[]> = new EventEmitter();
 
@@ -37,7 +38,6 @@ export class VgHlsDirective implements OnInit, OnChanges, OnDestroy {
   hls: any;
   preload: boolean;
   crossorigin: string;
-  config: IHLSConfig;
 
   subscriptions: Subscription[] = [];
 
@@ -66,20 +66,20 @@ export class VgHlsDirective implements OnInit, OnChanges, OnDestroy {
 
     this.config = {
       autoStartLoad: this.preload,
+      xhrSetup: (xhr: {
+        withCredentials: boolean;
+        setRequestHeader: (arg0: string, arg1: string) => void;
+      }) => {
+        // Send cookies
+        if (this.crossorigin === 'use-credentials') {
+          xhr.withCredentials = true;
+        }
+        for (const key of Object.keys(this.vgHlsHeaders)) {
+          xhr.setRequestHeader(key, this.vgHlsHeaders[key]);
+        }
+      },
+      ...this.config,
     } as IHLSConfig;
-    // @ts-ignore
-    this.config.xhrSetup = (xhr: {
-      withCredentials: boolean;
-      setRequestHeader: (arg0: string, arg1: string) => void;
-    }) => {
-      // Send cookies
-      if (this.crossorigin === 'use-credentials') {
-        xhr.withCredentials = true;
-      }
-      for (const key of Object.keys(this.vgHlsHeaders)) {
-        xhr.setRequestHeader(key, this.vgHlsHeaders[key]);
-      }
-    };
 
     this.createPlayer();