@clappr/hlsjs-playback 1.5.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "HLS Playback based on hls.js",
   "main": "./dist/hlsjs-playback.js",
   "module": "./dist/hlsjs-playback.esm.js",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
-    "@clappr/core": "^0.10.0",
+    "@clappr/core": "^0.11.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",

package/src/hls.js

@@ -143,6 +143,7 @@ export default class HlsjsPlayback extends HTML5Video {
   constructor(...args) {
     super(...args)
     this.options.hlsPlayback = { ...this.defaultOptions, ...this.options.hlsPlayback }
+    this._timeUpdateThrottleDelay = 200
     this._timeUpdateFiringRate = 0.2
     this._durationChangeMinOffset = 0.5
     this._setInitialState()
@@ -158,6 +159,7 @@ export default class HlsjsPlayback extends HTML5Video {
 
     this._playbackType = Playback.VOD
     this._lastTimeUpdate = { current: 0, total: 0, firstFragDateTime: 0 }
+    this._lastTimeUpdateFiredTime = 0
     this._lastDuration = null
     // for hls streams which have dvr with a sliding window,
     // the content at the start of the playlist is removed as new
@@ -225,6 +227,7 @@ export default class HlsjsPlayback extends HTML5Video {
     this._hls.on(HLSJS.Events.LEVEL_SWITCHED, (evt,data) => this._onLevelSwitch(evt, data))
     this._hls.on(HLSJS.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data))
     this._hls.on(HLSJS.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data))
+    this._hls.on(HLSJS.Events.FRAG_BUFFERED, (evt, data) => this._onFragmentBuffered(evt, data))
     this._hls.on(HLSJS.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data))
     this._hls.on(HLSJS.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data))
     this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data))
@@ -438,13 +441,21 @@ export default class HlsjsPlayback extends HTML5Video {
 
   _onTimeUpdate() {
     const update = { current: this.getCurrentTime(), total: this.getDuration(), firstFragDateTime: this.getProgramDateTime() }
+    const shouldThrottle = this._shouldThrottleTimeUpdate(update)
+    if (shouldThrottle) return
+    this._lastTimeUpdate = update
+    this._lastTimeUpdateFiredTime = this._now
+    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
+  }
+
+  _shouldThrottleTimeUpdate(update) {
     const isSameTime = Math.abs(update.current - this._lastTimeUpdate.current) < this._timeUpdateFiringRate
     const isSameDuration = Math.abs(update.total - this._lastTimeUpdate.total) < this._durationChangeMinOffset
     const isSameFirstFragDateTime = update.firstFragDateTime === this._lastTimeUpdate.firstFragDateTime
-    const isSame = isSameTime && isSameDuration && isSameFirstFragDateTime
-    if (isSame) return
-    this._lastTimeUpdate = update
-    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
+    const isSameEventPayload = isSameTime && isSameDuration && isSameFirstFragDateTime
+    const isThrottled = this._now - this._lastTimeUpdateFiredTime < this._timeUpdateThrottleDelay
+
+    return isSameEventPayload && isThrottled
   }
 
   _onDurationChange() {
@@ -650,6 +661,10 @@ export default class HlsjsPlayback extends HTML5Video {
     this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data)
   }
 
+  _onFragmentBuffered(evt, data) {
+    this.trigger(Events.PLAYBACK_FRAGMENT_BUFFERED, data)
+  }
+
   _onSubtitleLoaded() {
     // This event may be triggered multiple times
     // Setup CC only once (disable CC by default)