@clappr/hlsjs-playback 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "1.2.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

@@ -127,6 +127,15 @@ export default class HlsjsPlayback extends HTML5Video {
     return this.options.src
   }
 
+  get currentTimestamp() {
+    if (!this._currentFragment) return null
+    const startTime = this._currentFragment.programDateTime
+    const playbackTime = this.el.currentTime
+    const playTimeOffSet = playbackTime - this._currentFragment.start
+    const currentTimestampInMs = startTime + playTimeOffSet * 1000
+    return currentTimestampInMs / 1000
+  }
+
   static get HLSJS() {
     return HLSJS
   }
@@ -187,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()
@@ -208,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))
@@ -477,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()
   }
@@ -635,6 +644,7 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _onFragmentChanged(evt, data) {
+    this._currentFragment = data.frag
     this.trigger(Events.Custom.PLAYBACK_FRAGMENT_CHANGED, data)
   }
 

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()
     })
   })
 
@@ -346,4 +352,27 @@ describe('HlsjsPlayback', () => {
       expect(cb).not.toHaveBeenCalled()
     })
   })
+
+  describe('currentTimestamp', () => {
+    it('returns the fragment time plus the current playback time', () => {
+      const fragmentMock = {
+        frag: {
+          programDateTime: 1556663040000, // 'Tue Apr 30 2019 19:24:00'
+          start: 0,
+        }
+      }
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
+      playback.el.currentTime = 5
+      playback._setup()
+      playback.unbindCustomListeners()
+      playback._hls.trigger(HLSJS.Events.FRAG_CHANGED, fragmentMock)
+      expect(playback.currentTimestamp).toBe(1556663045) // 'Tue Apr 30 2019 19:24:05'
+    })
+
+    it('returns null if the playback does not have a fragment', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
+      playback._setup()
+      expect(playback.currentTimestamp).toBe(null)
+    })
+  })
 })