@clappr/hlsjs-playback 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "HLS Playback based on hls.js",
   "main": "./dist/hlsjs-playback.js",
   "module": "./dist/hlsjs-playback.esm.js",
@@ -36,13 +36,13 @@
   },
   "homepage": "https://github.com/clappr/hlsjs-playback",
   "peerDependencies": {
-    "@clappr/core": "^0.4.27",
-    "hls.js": "^1.2.4"
+    "@clappr/core": "*",
+    "hls.js": "1.5.14"
   },
   "devDependencies": {
     "@babel/core": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
-    "@clappr/core": "^0.4.27",
+    "@clappr/core": "^0.9.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -51,7 +51,7 @@
     "coveralls": "^3.1.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.26.0",
-    "hls.js": "^1.2.4",
+    "hls.js": "1.5.14",
     "jest": "^26.6.3",
     "rollup": "^2.47.0",
     "rollup-plugin-filesize": "^9.1.1",
@@ -65,5 +65,14 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "nx": {
+    "targets": {
+      "test": {
+        "dependsOn": [
+          "^release"
+        ]
+      }
+    }
   }
 }

package/src/hls.js

@@ -143,6 +143,8 @@ export default class HlsjsPlayback extends HTML5Video {
   constructor(...args) {
     super(...args)
     this.options.hlsPlayback = { ...this.defaultOptions, ...this.options.hlsPlayback }
+    this._timeUpdateFiringRate = 0.2
+    this._durationChangeMinOffset = 0.5
     this._setInitialState()
   }
 
@@ -155,7 +157,7 @@ export default class HlsjsPlayback extends HTML5Video {
     this._extrapolatedWindowNumSegments = !this.options.playback || typeof (this.options.playback.extrapolatedWindowNumSegments) === 'undefined' ? 2 :  this.options.playback.extrapolatedWindowNumSegments
 
     this._playbackType = Playback.VOD
-    this._lastTimeUpdate = { current: 0, total: 0 }
+    this._lastTimeUpdate = { current: 0, total: 0, firstFragDateTime: 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
@@ -196,7 +198,7 @@ export default class HlsjsPlayback extends HTML5Video {
 
   _destroyHLSInstance() {
     if (!this._hls) return
-    this._manifestParsed = false
+    this._manifestLoading = false
     this._ccIsSetup = false
     this._ccTracksUpdated = false
     this._setInitialState()
@@ -217,7 +219,7 @@ export default class HlsjsPlayback extends HTML5Video {
   _listenHLSEvents() {
     if (!this._hls) return
     this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => { this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src) })
-    this._hls.on(HLSJS.Events.MANIFEST_PARSED, () => this._manifestParsed = true)
+    this._hls.on(HLSJS.Events.MANIFEST_LOADING, () => this._manifestLoading = true)
     this._hls.on(HLSJS.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data))
     this._hls.on(HLSJS.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data))
     this._hls.on(HLSJS.Events.LEVEL_SWITCHING, (evt,data) => this._onLevelSwitch(evt, data))
@@ -265,10 +267,12 @@ export default class HlsjsPlayback extends HTML5Video {
     if (!this._recoveredDecodingError) {
       this._recoveredDecodingError = true
       this._hls.recoverMediaError()
+      this.play()
     } else if (!this._recoveredAudioCodecError) {
       this._recoveredAudioCodecError = true
       this._hls.swapAudioCodec()
       this._hls.recoverMediaError()
+      this.play()
     } else {
       Log.error('hlsjs: failed to recover', { evt, data })
       error.level = PlayerError.Levels.FATAL
@@ -333,8 +337,6 @@ export default class HlsjsPlayback extends HTML5Video {
       Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.')
       time = this.getDuration()
     }
-    // assume live if time within 3 seconds of end of stream
-    this.dvrEnabled && this._updateDvr(time < this.getDuration()-3)
     time += this._startTime
     this.el.currentTime = time
   }
@@ -343,11 +345,6 @@ export default class HlsjsPlayback extends HTML5Video {
     this.seek(this.getDuration())
   }
 
-  _updateDvr(status) {
-    this.trigger(Events.PLAYBACK_DVR, status)
-    this.trigger(Events.PLAYBACK_STATS_ADD, { 'dvr': status })
-  }
-
   _updateSettings() {
     if (this._playbackType === Playback.VOD)
       this.settings.left = ['playpause', 'position', 'duration']
@@ -441,9 +438,10 @@ export default class HlsjsPlayback extends HTML5Video {
 
   _onTimeUpdate() {
     const update = { current: this.getCurrentTime(), total: this.getDuration(), firstFragDateTime: this.getProgramDateTime() }
-    const isSame = this._lastTimeUpdate && (
-      update.current === this._lastTimeUpdate.current &&
-      update.total === this._lastTimeUpdate.total)    
+    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)
@@ -451,7 +449,8 @@ export default class HlsjsPlayback extends HTML5Video {
 
   _onDurationChange() {
     const duration = this.getDuration()
-    if (this._lastDuration === duration) return
+    const isSameDuration = Math.abs(this._lastDuration - duration) < this._durationChangeMinOffset
+    if (isSameDuration) return
     this._lastDuration = duration
     super._onDurationChange()
   }
@@ -486,7 +485,7 @@ export default class HlsjsPlayback extends HTML5Video {
 
   play() {
     !this._hls && this._setup()
-    !this._manifestParsed && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
+    !this._manifestLoading && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
     super.play()
     this._startTimeUpdateTimer()
   }
@@ -494,7 +493,6 @@ export default class HlsjsPlayback extends HTML5Video {
   pause() {
     if (!this._hls) return
     this.el.pause()
-    if (this.dvrEnabled) this._updateDvr(true)
   }
 
   stop() {

package/src/hls.test.js

@@ -151,13 +151,13 @@ describe('HlsjsPlayback', () => {
   })
 
   describe('_setup method', () => {
-    test('sets _manifestParsed flag to false', () => {
+    test('sets _manifestLoading flag to false', () => {
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
-      expect(playback._manifestParsed).toBeUndefined()
+      expect(playback._manifestLoading).toBeUndefined()
 
       playback._setup()
 
-      expect(playback._manifestParsed).toBeFalsy()
+      expect(playback._manifestLoading).toBeFalsy()
     })
 
     test('calls this._hls.loadSource when MEDIA_ATTACHED event is triggered and hlsPlayback.preload is true', () => {
@@ -176,15 +176,16 @@ describe('HlsjsPlayback', () => {
       expect(playback._hls.loadSource).toHaveBeenCalledTimes(1)
     })
 
-    test('updates _manifestParsed flag value to true if MANIFEST_PARSED event is triggered', () => {
-      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
+    test('updates _manifestLoading flag value to true if MANIFEST_LOADING event is triggered', () => {
+      const src = 'http://clappr.io/foo.m3u8'
+      const playback = new HlsjsPlayback({ src })
 
-      expect(playback._manifestParsed).toBeUndefined()
+      expect(playback._manifestLoading).toBeUndefined()
 
       playback._setup()
-      playback._hls.trigger(HLSJS.Events.MANIFEST_PARSED, { levels: [] })
+      playback._hls.trigger(HLSJS.Events.MANIFEST_LOADING, { url: src })
 
-      expect(playback._manifestParsed).toBeTruthy()
+      expect(playback._manifestLoading).toBeTruthy()
     })
 
     test('calls bindCustomListeners method', () => {
@@ -241,24 +242,29 @@ describe('HlsjsPlayback', () => {
   })
 
   describe('play method', () => {
-    test('calls this._hls.loadSource if _manifestParsed flag and options.hlsPlayback.preload are falsy', () => {
-      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8', hlsPlayback: { preload: true } })
+    test('calls this._hls.loadSource once if _manifestLoading flag and options.hlsPlayback.preload are falsy', () => {
+      jest.spyOn(HLSJS.prototype, 'loadSource').mockImplementation()
+      const src = 'http://clappr.io/foo.m3u8'
+      const playback = new HlsjsPlayback({ src, hlsPlayback: { preload: false } })
       playback._setup()
-      jest.spyOn(playback._hls, 'loadSource')
-      playback.play()
+      playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHED, { media: playback.el })
 
       expect(playback._hls.loadSource).not.toHaveBeenCalled()
 
-      playback.options.hlsPlayback.preload = false
-      playback._manifestParsed = true
       playback.play()
+      playback._hls.trigger(HLSJS.Events.MANIFEST_LOADING, { url: src })
 
-      expect(playback._hls.loadSource).not.toHaveBeenCalled()
+      expect(playback._hls.loadSource).toHaveBeenCalledTimes(1)
 
-      playback._manifestParsed = false
+      // do not call loadSource again while loading a manifest
       playback.play()
-
       expect(playback._hls.loadSource).toHaveBeenCalledTimes(1)
+
+      playback._manifestLoading = false
+      playback.play()
+
+      expect(playback._hls.loadSource).toHaveBeenCalledTimes(2)
+      HLSJS.prototype.loadSource.mockRestore()
     })
   })