Merge pull request #633 from videojs/xhr-beforerequest

Expose the ability to set an `beforeRequest` function on xhr

@@ -19,6 +19,7 @@ Play back HLS with video.js, even where it's not natively supported.
     - [hls.bandwidth](#hlsbandwidth)
     - [hls.bandwidth](#hlsbandwidth)
     - [hls.bytesReceived](#hlsbytesreceived)
     - [hls.bytesReceived](#hlsbytesreceived)
     - [hls.selectPlaylist](#hlsselectplaylist)
     - [hls.selectPlaylist](#hlsselectplaylist)
+    - [hls.xhr](#hlsxhr)
   - [Events](#events)
   - [Events](#events)
     - [loadedmetadata](#loadedmetadata)
     - [loadedmetadata](#loadedmetadata)
     - [loadedplaylist](#loadedplaylist)
     - [loadedplaylist](#loadedplaylist)
@@ -194,6 +195,44 @@ segment is downloaded. You can override this function to provide your
 adaptive streaming logic. You must, however, be sure to return a valid
 adaptive streaming logic. You must, however, be sure to return a valid
 media playlist object that is present in `player.hls.master`.
 media playlist object that is present in `player.hls.master`.
 
 
+#### hls.xhr
+Type: `function`
+
+The xhr function that is used by HLS internally is exposed on the per-
+player `hls` object. While it is possible, we do not recommend replacing
+the function with your own implementation. Instead, the `xhr` provides
+the ability to specify a `beforeRequest` function that will be called
+with an object containing the options that will be used to create the
+xhr request.
+
+Example:
+```javascript
+player.hls.xhr.beforeRequest = function(options) {
+  options.uri = options.uri.replace('example.com', 'foo.com');
+
+  return options;
+};
+```
+
+The global `videojs.Hls` also exposes an `xhr` property. Specifying a
+`beforeRequest` function on that will allow you to intercept the options
+for *all* requests in every player on a page.
+
+Example
+```javascript
+videojs.Hls.xhr.beforeRequest = function(options) {
+  /*
+   * Modifications to requests that will affect every player.
+   */
+
+  return options;
+};
+```
+
+For information on the type of options that you can modify see the
+documentation at [https://github.com/Raynos/xhr](https://github.com/Raynos/xhr).
+
+
 ### Events
 ### Events
 Standard HTML video events are handled by video.js automatically and
 Standard HTML video events are handled by video.js automatically and
 are triggered on the player object. In addition, there are a couple
 are triggered on the player object. In addition, there are a couple

@@ -6,7 +6,6 @@
  *
  *
  */
  */
 import resolveUrl from './resolve-url';
 import resolveUrl from './resolve-url';
-import XhrModule from './xhr';
 import {mergeOptions} from 'video.js';
 import {mergeOptions} from 'video.js';
 import Stream from './stream';
 import Stream from './stream';
 import m3u8 from './m3u8';
 import m3u8 from './m3u8';
@@ -86,7 +85,7 @@ const updateSegments = function(original, update, offset) {
 };
 };
 
 
 export default class PlaylistLoader extends Stream {
 export default class PlaylistLoader extends Stream {
-  constructor(srcUrl, withCredentials) {
+  constructor(srcUrl, hls, withCredentials) {
     super();
     super();
     let loader = this;
     let loader = this;
     let dispose;
     let dispose;
@@ -95,6 +94,8 @@ export default class PlaylistLoader extends Stream {
     let playlistRequestError;
     let playlistRequestError;
     let haveMetadata;
     let haveMetadata;
 
 
+    this.hls_ = hls;
+
     // a flag that disables "expired time"-tracking this setting has
     // a flag that disables "expired time"-tracking this setting has
     // no effect when not playing a live stream
     // no effect when not playing a live stream
     this.trackExpiredTime_ = false;
     this.trackExpiredTime_ = false;
@@ -261,7 +262,7 @@ export default class PlaylistLoader extends Stream {
       }
       }
 
 
       // request the new playlist
       // request the new playlist
-      request = XhrModule({
+      request = this.hls_.xhr({
         uri: resolveUrl(loader.master.uri, playlist.uri),
         uri: resolveUrl(loader.master.uri, playlist.uri),
         withCredentials
         withCredentials
       }, function(error, request) {
       }, function(error, request) {
@@ -298,7 +299,7 @@ export default class PlaylistLoader extends Stream {
       }
       }
 
 
       loader.state = 'HAVE_CURRENT_METADATA';
       loader.state = 'HAVE_CURRENT_METADATA';
-      request = XhrModule({
+      request = this.hls_.xhr({
         uri: resolveUrl(loader.master.uri, loader.media().uri),
         uri: resolveUrl(loader.master.uri, loader.media().uri),
         withCredentials
         withCredentials
       }, function(error, request) {
       }, function(error, request) {
@@ -310,7 +311,7 @@ export default class PlaylistLoader extends Stream {
     });
     });
 
 
     // request the specified URL
     // request the specified URL
-    request = XhrModule({
+    request = this.hls_.xhr({
       uri: srcUrl,
       uri: srcUrl,
       withCredentials
       withCredentials
     }, function(error, req) {
     }, function(error, req) {

@@ -5,7 +5,7 @@
  */
  */
 import PlaylistLoader from './playlist-loader';
 import PlaylistLoader from './playlist-loader';
 import Playlist from './playlist';
 import Playlist from './playlist';
-import xhr from './xhr';
+import xhrFactory from './xhr';
 import {Decrypter, AsyncStream, decrypt} from './decrypter';
 import {Decrypter, AsyncStream, decrypt} from './decrypter';
 import utils from './bin-utils';
 import utils from './bin-utils';
 import {MediaSource, URL} from 'videojs-contrib-media-sources';
 import {MediaSource, URL} from 'videojs-contrib-media-sources';
@@ -20,7 +20,7 @@ const Hls = {
   AsyncStream,
   AsyncStream,
   decrypt,
   decrypt,
   utils,
   utils,
-  xhr
+  xhr: xhrFactory()
 };
 };
 
 
 // the desired length of video to maintain in the buffer, in seconds
 // the desired length of video to maintain in the buffer, in seconds
@@ -416,6 +416,7 @@ export default class HlsHandler extends Component {
       this.options_.withCredentials = videojs.options.hls.withCredentials;
       this.options_.withCredentials = videojs.options.hls.withCredentials;
     }
     }
     this.playlists = new Hls.PlaylistLoader(this.source_.src,
     this.playlists = new Hls.PlaylistLoader(this.source_.src,
+                                            this.tech_.hls,
                                             this.options_.withCredentials);
                                             this.options_.withCredentials);
 
 
     this.tech_.one('canplay', this.setupFirstPlay.bind(this));
     this.tech_.one('canplay', this.setupFirstPlay.bind(this));
@@ -1224,7 +1225,7 @@ export default class HlsHandler extends Component {
     }
     }
 
 
     // request the next segment
     // request the next segment
-    this.segmentXhr_ = Hls.xhr({
+    this.segmentXhr_ = this.tech_.hls.xhr({
       uri: segmentInfo.uri,
       uri: segmentInfo.uri,
       responseType: 'arraybuffer',
       responseType: 'arraybuffer',
       withCredentials: this.source_.withCredentials,
       withCredentials: this.source_.withCredentials,
@@ -1504,7 +1505,7 @@ export default class HlsHandler extends Component {
 
 
     // request the key if the retry limit hasn't been reached
     // request the key if the retry limit hasn't been reached
     if (!key.bytes && !keyFailed(key)) {
     if (!key.bytes && !keyFailed(key)) {
-      this.keyXhr_ = Hls.xhr({
+      this.keyXhr_ = this.tech_.hls.xhr({
         uri: this.playlistUriToUrl(key.uri),
         uri: this.playlistUriToUrl(key.uri),
         responseType: 'arraybuffer',
         responseType: 'arraybuffer',
         withCredentials: settings.withCredentials
         withCredentials: settings.withCredentials
@@ -1563,6 +1564,14 @@ const HlsSourceHandler = function(mode) {
         source,
         source,
         mode
         mode
       });
       });
+
+      tech.hls.xhr = xhrFactory();
+      // Use a global `before` function if specified on videojs.Hls.xhr
+      // but still allow for a per-player override
+      if (videojs.Hls.xhr.beforeRequest) {
+        tech.hls.xhr.beforeRequest = videojs.Hls.xhr.beforeRequest;
+      }
+
       tech.hls.src(source.src);
       tech.hls.src(source.src);
       return tech.hls;
       return tech.hls;
     },
     },

@@ -2,12 +2,25 @@
  * A wrapper for videojs.xhr that tracks bandwidth.
  * A wrapper for videojs.xhr that tracks bandwidth.
  */
  */
 import {xhr as videojsXHR, mergeOptions} from 'video.js';
 import {xhr as videojsXHR, mergeOptions} from 'video.js';
-const xhr = function(options, callback) {
+
+const xhrFactory = function() {
+  const xhr = function XhrFunction(options, callback) {
     // Add a default timeout for all hls requests
     // Add a default timeout for all hls requests
     options = mergeOptions({
     options = mergeOptions({
       timeout: 45e3
       timeout: 45e3
     }, options);
     }, options);
 
 
+    // Allow an optional user-specified function to modify the option
+    // object before we construct the xhr request
+    if (XhrFunction.beforeRequest &&
+        typeof XhrFunction.beforeRequest === 'function') {
+      let newOptions = XhrFunction.beforeRequest(options);
+
+      if (newOptions) {
+        options = newOptions;
+      }
+    }
+
     let request = videojsXHR(options, function(error, response) {
     let request = videojsXHR(options, function(error, response) {
       if (!error && request.response) {
       if (!error && request.response) {
         request.responseTime = (new Date()).getTime();
         request.responseTime = (new Date()).getTime();
@@ -44,6 +57,9 @@ const xhr = function(options, callback) {
 
 
     request.requestTime = (new Date()).getTime();
     request.requestTime = (new Date()).getTime();
     return request;
     return request;
+  };
+
+  return xhr;
 };
 };
 
 
-export default xhr;
+export default xhrFactory;

@@ -3363,6 +3363,78 @@ QUnit.test('selectPlaylist does not fail if getComputedStyle returns null', func
   window.getComputedStyle = oldGetComputedStyle;
   window.getComputedStyle = oldGetComputedStyle;
 });
 });
 
 
+QUnit.test('Allows specifying the beforeRequest functionon the player', function() {
+  let beforeRequestCalled = false;
+
+  this.player.src({
+    src: 'master.m3u8',
+    type: 'application/vnd.apple.mpegurl'
+  });
+  openMediaSource(this.player, this.clock);
+
+  this.player.hls.xhr.beforeRequest = function() {
+    beforeRequestCalled = true;
+  };
+  // master
+  standardXHRResponse(this.requests.shift());
+  // media
+  standardXHRResponse(this.requests.shift());
+
+  QUnit.ok(beforeRequestCalled, 'beforeRequest was called');
+});
+
+QUnit.test('Allows specifying the beforeRequest function globally', function() {
+  let beforeRequestCalled = false;
+
+  videojs.Hls.xhr.beforeRequest = function() {
+    beforeRequestCalled = true;
+  };
+
+  this.player.src({
+    src: 'master.m3u8',
+    type: 'application/vnd.apple.mpegurl'
+  });
+  openMediaSource(this.player, this.clock);
+  // master
+  standardXHRResponse(this.requests.shift());
+
+  QUnit.ok(beforeRequestCalled, 'beforeRequest was called');
+
+  delete videojs.Hls.xhr.beforeRequest;
+});
+
+QUnit.test('Allows overriding the global beforeRequest function', function() {
+  let beforeGlobalRequestCalled = 0;
+  let beforeLocalRequestCalled = 0;
+
+  videojs.Hls.xhr.beforeRequest = function() {
+    beforeGlobalRequestCalled++;
+  };
+
+  this.player.src({
+    src: 'master.m3u8',
+    type: 'application/vnd.apple.mpegurl'
+  });
+  openMediaSource(this.player, this.clock);
+
+  this.player.hls.xhr.beforeRequest = function() {
+    beforeLocalRequestCalled++;
+  };
+  // master
+  standardXHRResponse(this.requests.shift());
+  // media
+  standardXHRResponse(this.requests.shift());
+  // ts
+  standardXHRResponse(this.requests.shift());
+
+  QUnit.equal(beforeLocalRequestCalled, 2, 'local beforeRequest was called twice ' +
+                                           'for the media playlist and media');
+  QUnit.equal(beforeGlobalRequestCalled, 1, 'global beforeRequest was called once ' +
+                                            'for the master playlist');
+
+  delete videojs.Hls.xhr.beforeRequest;
+});
+
 QUnit.module('Buffer Inspection');
 QUnit.module('Buffer Inspection');
 QUnit.test('detects time range end-point changed by updates', function() {
 QUnit.test('detects time range end-point changed by updates', function() {
   let edge;
   let edge;