fix(FEC-7207): listen to shaka buffering event (#31)

Author: yairans

src/dash-adapter.js

@@ -59,6 +59,13 @@ export default class DashAdapter extends BaseMediaSourceAdapter {
    * @private
    */
   _loadPromise: ?Promise<Object>;
+  /**
+   * The buffering state flag
+   * @member {boolean} - _buffering
+   * @type {boolean}
+   * @private
+   */
+  _buffering: boolean = false;
 
   /**
    * Factory method to create media source adapter.
@@ -182,6 +189,9 @@ export default class DashAdapter extends BaseMediaSourceAdapter {
   _addBindings(): void {
     this._shaka.addEventListener('adaptation', this._onAdaptation.bind(this));
     this._shaka.addEventListener('error', this._onError.bind(this));
+    this._shaka.addEventListener('buffering', this._onBuffering.bind(this));
+    //TODO use events enum when available
+    this._videoElement.addEventListener('playing', this._onPlaying.bind(this));
   }
 
   /**
@@ -193,6 +203,9 @@ export default class DashAdapter extends BaseMediaSourceAdapter {
   _removeBindings(): void {
     this._shaka.removeEventListener('adaptation', this._onAdaptation);
     this._shaka.removeEventListener('error', this._onError);
+    this._shaka.removeEventListener('buffering', this._onBuffering.bind(this));
+    //TODO use events enum when available
+    this._videoElement.removeEventListener('playing', this._onPlaying.bind(this));
   }
 
   /**
@@ -231,6 +244,7 @@ export default class DashAdapter extends BaseMediaSourceAdapter {
     super.destroy();
     this._loadPromise = null;
     this._sourceObj = null;
+    this._buffering = false;
     if (this._shaka) {
       this._removeBindings();
       this._shaka.destroy();
@@ -508,6 +522,36 @@ export default class DashAdapter extends BaseMediaSourceAdapter {
     DashAdapter._logger.error(error);
   }
 
+  /**
+   * An handler to shaka buffering event
+   * @function _onBuffering
+   * @param {any} event - the buffering event
+   * @returns {void}
+   * @private
+   */
+  _onBuffering(event: any): void {
+    this._buffering = event.buffering;
+    if (this._buffering) { //the player enters the buffering state.
+      //TODO use events enum when available
+      this._videoElement.dispatchEvent(new window.Event('waiting'));
+    } else if (!this._videoElement.paused) { //the player leaves the buffering state.
+      this._videoElement.dispatchEvent(new window.Event('playing'));
+    }
+  }
+
+  /**
+   * An handler to HTMLVideoElement playing event
+   * @function _onPlaying
+   * @returns {void}
+   * @private
+   */
+  _onPlaying(): void {
+    if (this._buffering) { //the player is in buffering state.
+      //TODO use events enum when available
+      this._videoElement.dispatchEvent(new window.Event('waiting'));
+    }
+  }
+
   /**
    * Getter for the src that the adapter plays on the video element.
    * In case the adapter preformed a load it will return the manifest url.

test/src/dash-adapter.spec.js

@@ -213,10 +213,12 @@ describe('DashAdapter: destroy', () => {
       dashInstance._loadPromise.should.be.exist;
       dashInstance._sourceObj.should.be.exist;
       dashInstance._config.should.be.exist;
+      dashInstance._buffering = true;
       dashInstance.destroy();
       (!dashInstance._loadPromise).should.be.true;
       (!dashInstance._sourceObj).should.be.true;
       (!dashInstance._config).should.be.true;
+      dashInstance._buffering.should.be.false;
       done();
     });
   });
@@ -878,5 +880,96 @@ describe('DashAdapter: get duration', () => {
   });
 });
 
+describe('DashAdapter: _onBuffering', () => {
+  let video, dashInstance, config;
+
+  beforeEach(() => {
+    video = document.createElement("video");
+    config = {playback: {options: {html5: {dash: {}}}}};
+  });
+
+  afterEach(() => {
+    dashInstance.destroy();
+    dashInstance = null;
+  });
+
+  after(() => {
+    TestUtils.removeVideoElementsFromTestPage();
+  });
+
+  it('should dispatch waiting event when buffering is true', (done) => {
+    dashInstance = DashAdapter.createAdapter(video, vodSource, config);
+    dashInstance._videoElement.addEventListener('waiting', () => {
+      done();
+    });
+    dashInstance._onBuffering({buffering: true});
+  });
+
+  it('should dispatch playing event when buffering is false and video is playing', (done) => {
+    dashInstance = DashAdapter.createAdapter(video, vodSource, config);
+    let hasPlaying = false;
+    let onPlaying = () => {
+      if (hasPlaying) {
+        dashInstance._videoElement.removeEventListener('playing', onPlaying);
+        done();
+      } else {
+        hasPlaying = true;
+        dashInstance._onBuffering({buffering: false});
+      }
+    };
+    dashInstance._videoElement.addEventListener('playing', onPlaying);
+    dashInstance.load().then(() => {
+      dashInstance._videoElement.play();
+    });
+  });
+
+  it('should not dispatch playing event when buffering is false but video is paused', (done) => {
+    dashInstance = DashAdapter.createAdapter(video, vodSource, config);
+    let t = setTimeout(done, 0);
+    dashInstance._videoElement.addEventListener('playing', () => {
+      done(new Error("test fail"));
+      clearTimeout(t);
+    });
+    dashInstance._onBuffering({buffering: false});
+  });
+});
+
+describe('DashAdapter: _onPlaying', () => {
+  let video, dashInstance, config;
+
+  beforeEach(() => {
+    video = document.createElement("video");
+    config = {playback: {options: {html5: {dash: {}}}}};
+  });
+
+  afterEach(() => {
+    dashInstance.destroy();
+    dashInstance = null;
+  });
+
+  after(() => {
+    TestUtils.removeVideoElementsFromTestPage();
+  });
+
+  it('should dispatch waiting event when buffering is true', (done) => {
+    dashInstance = DashAdapter.createAdapter(video, vodSource, config);
+    dashInstance._videoElement.addEventListener('waiting', () => {
+      done();
+    });
+    dashInstance._buffering = true;
+    dashInstance._onPlaying();
+  });
+
+  it('should not dispatch waiting event when buffering is false', (done) => {
+    dashInstance = DashAdapter.createAdapter(video, vodSource, config);
+    let t = setTimeout(done, 0);
+    dashInstance._videoElement.addEventListener('waiting', () => {
+      done(new Error("test fail"));
+      clearTimeout(t);
+    });
+    dashInstance._onPlaying();
+  });
+});
+