@clappr/hlsjs-playback 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "1.3.0",
+  "version": "1.4.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",
+    "@clappr/core": "*",
     "hls.js": "^1.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
-    "@clappr/core": "^0.4.27",
+    "@clappr/core": "^0.8.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -65,5 +65,14 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "nx": {
+    "targets": {
+      "test": {
+        "dependsOn": [
+          "^release"
+        ]
+      }
+    }
   }
 }

package/src/hls.js

@@ -196,7 +196,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 +217,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))
@@ -486,7 +486,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()
   }

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()
     })
   })