Merge pull request #86 from clappr/feature/fix-buffering-and-play-events

Fix buffering, seeked and playing events

src/clappr-dash-shaka-playback.js

@@ -11,6 +11,8 @@ class DashShakaPlayback extends HTML5Video {
     }
   }
 
+  static get shakaPlayer() { return shaka }
+
   static canPlay (resource, mimeType = '') {
     shaka.polyfill.installAll()
     let browserSupported = shaka.Player.isBrowserSupported()
@@ -141,6 +143,31 @@ class DashShakaPlayback extends HTML5Video {
     this._startTimeUpdateTimer()
   }
 
+  _onPlaying() {
+    /*
+      The `_onPlaying` should not be called while buffering: https://github.com/google/shaka-player/issues/2230
+      It will be executed on bufferfull.
+    */
+    if (this._isBuffering) return
+    return super._onPlaying()
+  }
+
+  _onSeeking() {
+    this._isSeeking = true
+    return super._onSeeking()
+  }
+
+  _onSeeked() {
+    /*
+      The `_onSeeked` should not be called while buffering.
+      It will be executed on bufferfull.
+    */
+    if (this._isBuffering) return
+
+    this._isSeeking = false
+    return super._onSeeked()
+  }
+
   _startTimeUpdateTimer() {
     this._stopTimeUpdateTimer()
     this._timeUpdateTimer = setInterval(() => {
@@ -350,7 +377,7 @@ class DashShakaPlayback extends HTML5Video {
     let player = new shaka.Player(this.el)
     player.addEventListener('error', this._onError.bind(this))
     player.addEventListener('adaptation', this._onAdaptation.bind(this))
-    player.addEventListener('buffering', this._onBuffering.bind(this))
+    player.addEventListener('buffering', this._handleShakaBufferingEvents.bind(this))
     return player
   }
 
@@ -372,10 +399,24 @@ class DashShakaPlayback extends HTML5Video {
     this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
-  _onBuffering (e) {
+  // skipping HTML5 `_handleBufferingEvents` in favor of shaka buffering events
+  _handleBufferingEvents() {}
+
+  _handleShakaBufferingEvents(e) {
     if (this._stopped) return
-    let event = e.buffering ? Events.PLAYBACK_BUFFERING : Events.PLAYBACK_BUFFERFULL
-    this.trigger(event)
+
+    this._isBuffering = e.buffering
+    this._isBuffering ? this._onBuffering() : this._onBufferfull()
+  }
+
+  _onBuffering () {
+    this.trigger(Events.PLAYBACK_BUFFERING)
+  }
+
+  _onBufferfull() {
+    this.trigger(Events.PLAYBACK_BUFFERFULL)
+    if (this._isSeeking) this._onSeeked()
+    if (this.isPlaying()) this._onPlaying()
   }
 
   _loaded () {