feat(hls): add support for custom headers on hls streams

User can provide a map of key value pairs to add as headers when using the hls directive

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"

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();
 
@@ -59,6 +60,9 @@ export class VgHLS implements OnInit, OnChanges, OnDestroy {
             this.config.xhrSetup = (xhr, url) => {
                 // Send cookies
                 xhr.withCredentials = true;
+                for (const key of Object.keys(this.vgHlsHeaders)) {
+                    xhr.setRequestHeader(key, this.vgHlsHeaders[key]);
+                }
             };
         }