Merge pull request #807 from jimbeck/feature/hls-headers

Feature/hls headers
videogular · Jan 11, 2019 · f82d320 · f82d320
2 parents fbbf1f5 + cabf471
commit f82d320
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/docs/modules/streaming/vg-hls/README.md b/docs/modules/streaming/vg-hls/README.md
@@ -46,6 +46,7 @@ This module is dependant of `hls.js` library and you need to install via `npm in
 | Input | Description |
 |--- |--- |
 | 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. |
 
 ## Outputs
 
@@ -59,6 +60,7 @@ This module is dependant of `hls.js` library and you need to install via `npm in
 <vg-player>
     <video #myMedia
            [vgHls]="'http://static.videogular.com/assets/videos/videogular.m3u8'"
+           [vgHlsHeaders]="headers"
            (onGetBitrates)="hlsBitrates = $event"
            id="my-video"
            type="video/mp4"

diff --git a/src/core/vg-media/vg-media.spec.ts b/src/core/vg-media/vg-media.spec.ts
@@ -39,6 +39,7 @@ describe('Videogular Media', () => {
     });
 
     it('Should load a new media if a change on dom have been happened', () => {
+        jasmine.clock().uninstall();
         jasmine.clock().install();
 
         spyOn(elem, 'load').and.callThrough();

diff --git a/src/streaming/vg-hls/vg-hls.ts b/src/streaming/vg-hls/vg-hls.ts
@@ -22,6 +22,7 @@ declare let Hls;
 })
 export class VgHLS implements OnInit, OnChanges, OnDestroy {
     @Input() vgHls:string;
+    @Input() vgHlsHeaders: {[key: string]: string} = {};
 
     @Output() onGetBitrates: EventEmitter<BitrateOption[]> = new EventEmitter();
 
@@ -55,12 +56,15 @@ export class VgHLS implements OnInit, OnChanges, OnDestroy {
             autoStartLoad: this.preload
         };
 
-        if (this.crossorigin === 'use-credentials') {
-            this.config.xhrSetup = (xhr, url) => {
-                // Send cookies
+        this.config.xhrSetup = (xhr, url) => {
+            // 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();
 
@@ -81,6 +85,9 @@ export class VgHLS implements OnInit, OnChanges, OnDestroy {
         if (changes['vgHls'] && changes['vgHls'].currentValue) {
             this.createPlayer();
         }
+        else if (changes['vgHlsHeaders'] && changes['vgHlsHeaders'].currentValue) {
+            // Do nothing. We don't want to create a or destroy a player if the headers change.
+        }
         else {
             this.destroyPlayer();
         }
@@ -92,7 +99,7 @@ export class VgHLS implements OnInit, OnChanges, OnDestroy {
         }
 
         // It's a HLS source
-        if (this.vgHls && this.vgHls.indexOf('m3u8') > -1 && Hls.isSupported()) {
+        if (this.vgHls && this.vgHls.indexOf('m3u8') > -1 && Hls.isSupported() && this.API.isPlayerReady) {
             let video:HTMLVideoElement = this.ref.nativeElement;
 
             this.hls = new Hls(this.config);