@clappr/hlsjs-playback 0.5.3 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "0.5.3",
+  "version": "1.0.1",
   "description": "HLS Playback based on hls.js",
   "main": "./dist/hlsjs-playback.js",
   "module": "./dist/hlsjs-playback.esm.js",
@@ -11,7 +11,7 @@
     "watch": "rollup --config --watch",
     "bundle-check": "ANALYZE_BUNDLE=true rollup --config",
     "release": "MINIMIZE=true rollup --config",
-    "test": "jest ./src --coverage",
+    "test": "jest ./src --coverage --silent",
     "test:debug": "node --inspect node_modules/.bin/jest ./src --runInBand",
     "test:watch": "jest ./src --watch",
     "lint": "eslint *.js ./src",
@@ -35,30 +35,30 @@
   },
   "homepage": "https://github.com/clappr/hlsjs-playback",
   "peerDependencies": {
-    "@clappr/core": "^0.4.11",
-    "hls.js": "^0.13.2"
+    "@clappr/core": "^0.4.27",
+    "hls.js": "^1.2.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@clappr/core": "^0.4.11",
-    "@rollup/plugin-babel": "^5.0.3",
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.1",
-    "@rollup/plugin-replace": "^2.3.3",
-    "babel-jest": "^26.0.1",
-    "coveralls": "^3.0.0",
-    "cz-conventional-changelog": "^2.1.0",
-    "eslint": "^4.18.2",
-    "hls.js": "^0.13.2",
-    "jest": "^26.0.1",
-    "rollup": "^2.15.0",
-    "rollup-plugin-filesize": "^9.0.0",
-    "rollup-plugin-livereload": "^1.3.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-sizes": "^1.0.2",
-    "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-visualizer": "^4.0.4"
+    "@babel/core": "^7.14.2",
+    "@babel/preset-env": "^7.14.2",
+    "@clappr/core": "^0.4.27",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "babel-jest": "^26.6.3",
+    "coveralls": "^3.1.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.26.0",
+    "hls.js": "^1.2.4",
+    "jest": "^26.6.3",
+    "rollup": "^2.47.0",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-sizes": "^1.0.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.5.0"
   },
   "config": {
     "commitizen": {

package/src/hls.js

@@ -109,6 +109,14 @@ export default class HlsjsPlayback extends HTML5Video {
     return this._hls && this._hls.bandwidthEstimate
   }
 
+  get defaultOptions() {
+    return { preload: true }
+  }
+
+  get customListeners() {
+    return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || []
+  }
+
   static get HLSJS() {
     return HLSJS
   }
@@ -117,6 +125,7 @@ export default class HlsjsPlayback extends HTML5Video {
     super(...args)
     // backwards compatibility (TODO: remove on 0.3.0)
     this.options.playback = { ...this.options, ...this.options.playback }
+    this.options.hlsPlayback = { ...this.defaultOptions, ...this.options.hlsPlayback }
     this._minDvrSize = typeof (this.options.hlsMinimumDvrSize) === 'undefined' ? 60 : this.options.hlsMinimumDvrSize
     // The size of the start time extrapolation window measured as a multiple of segments.
     // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is
@@ -158,11 +167,13 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _setup() {
+    this._manifestParsed = false
     this._ccIsSetup = false
     this._ccTracksUpdated = false
     this._hls && this._hls.destroy()
     this._hls = new HLSJS(assign({}, this.options.playback.hlsjsConfig))
-    this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => this._hls.loadSource(this.options.src))
+    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.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))
@@ -172,9 +183,27 @@ export default class HlsjsPlayback extends HTML5Video {
     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))
     this._hls.on(HLSJS.Events.SUBTITLE_TRACKS_UPDATED, () => this._ccTracksUpdated = true)
+
+    this.bindCustomListeners()
+
     this._hls.attachMedia(this.el)
   }
 
+  bindCustomListeners() {
+    this.customListeners.forEach(item => {
+      const requestedEventName = item.eventName
+      const typeOfListener = item.once ? 'once': 'on'
+      requestedEventName && this._hls[`${typeOfListener}`](requestedEventName, item.callback)
+    })
+  }
+
+  unbindCustomListeners() {
+    this.customListeners.forEach(item => {
+      const requestedEventName = item.eventName
+      requestedEventName && this._hls.off(requestedEventName, item.callback)
+    })
+  }
+
   _onFragmentParsingMetadata(evt, data) {
     this.trigger(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, { evt, data })
   }
@@ -185,6 +214,8 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _ready() {
+    if (this._isReadyState) return
+    !this._hls && this._setup()
     this._isReadyState = true
     this.trigger(Events.PLAYBACK_READY, this.name)
   }
@@ -416,8 +447,8 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   play() {
-    if (!this._hls)
-      this._setup()
+    !this._hls && this._setup()
+    !this._manifestParsed && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
 
     super.play()
     this._startTimeUpdateTimer()

package/src/hls.test.js

@@ -2,16 +2,34 @@ import { Core, Events } from '@clappr/core'
 import HlsjsPlayback from './hls.js'
 import HLSJS from 'hls.js'
 
-describe('HLS playback', function() {
-  beforeEach(() => {
-    this.isSupportedStub = jest.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
+const simplePlaybackMock = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
+
+describe('HlsjsPlayback', () => {
+  test('have a getter called defaultOptions', () => {
+    expect(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(simplePlaybackMock), 'defaultOptions').get).toBeTruthy()
+  })
+
+  test('defaultOptions getter returns all the default options values into one object', () => {
+    expect(simplePlaybackMock.defaultOptions).toEqual({ preload: true })
+  })
+
+  test('have a getter called customListeners', () => {
+    expect(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(simplePlaybackMock), 'customListeners').get).toBeTruthy()
   })
 
-  // afterEach(() => {
-  //   this.isSupportedStub.restore()
-  // })
+  test('customListeners getter returns all configured custom listeners for each hls.js event', () => {
+    const cb = () => {}
+    const playback = new HlsjsPlayback({
+      src: 'http://clappr.io/foo.m3u8',
+      hlsPlayback: {
+        customListeners: [{ eventName: 'hlsMediaAttaching', callback: cb }]
+      }
+    })
+    expect(playback.customListeners).toEqual(playback.options.hlsPlayback.customListeners)
+  })
 
-  it('should be able to identify it can play resources independently of the file extension case', function() {
+  test('should be able to identify it can play resources independently of the file extension case', () => {
+    jest.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
     expect(HlsjsPlayback.canPlay('/relative/video.m3u8')).toBeTruthy()
     expect(HlsjsPlayback.canPlay('/relative/VIDEO.M3U8')).toBeTruthy()
     expect(HlsjsPlayback.canPlay('/relative/video.m3u8?foobarQuery=1234#somefragment')).toBeTruthy()
@@ -19,12 +37,13 @@ describe('HLS playback', function() {
     expect(HlsjsPlayback.canPlay('//whatever_no_extension?foobarQuery=1234#somefragment', 'application/x-mpegURL' )).toBeTruthy()
   })
 
-  it('can play regardless of any mime type letter case', function() {
+  test('can play regardless of any mime type letter case', () => {
+    jest.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
     expect(HlsjsPlayback.canPlay('/path/list.m3u8', 'APPLICATION/VND.APPLE.MPEGURL' )).toBeTruthy()
     expect(HlsjsPlayback.canPlay('whatever_no_extension?foobarQuery=1234#somefragment', 'application/x-mpegurl' )).toBeTruthy()
   })
 
-  it('should ensure it does not create an audio tag if audioOnly is not set', function() {
+  test('should ensure it does not create an audio tag if audioOnly is not set', () => {
     let options = { src: 'http://clappr.io/video.m3u8' },
       playback = new HlsjsPlayback(options)
     expect(playback.tagName).toEqual('video')
@@ -33,26 +52,67 @@ describe('HLS playback', function() {
     expect(playback.tagName).toEqual('video')
   })
 
-  it('should play on an audio tag if audioOnly is set', function() {
+  test('should play on an audio tag if audioOnly is set', () => {
     let options = { src: 'http://clappr.io/video.m3u8', playback: { audioOnly: true } },
       playback = new HlsjsPlayback(options)
     expect(playback.tagName).toEqual('audio')
   })
 
-  describe('options backwards compatibility', function() {
-    // backwards compatibility (TODO: remove on 0.3.0)
-    it('should set options.playback as a reference to options if options.playback not set', function() {
-      let options = { src: 'http://clappr.io/video.m3u8' },
-        hls = new HlsjsPlayback(options)
-      expect(hls.options.playback).toEqual(hls.options)
-      options = { src: 'http://clappr.io/video.m3u8', playback: { test: true } }
-      hls = new HlsjsPlayback(options)
-      expect(hls.options.playback.test).toEqual(true)
+  test('should trigger a playback error if source load failed', () => {
+    jest.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {})
+    let resolveFn = undefined
+    const promise = new Promise((resolve) => {
+      resolveFn = resolve
+    })
+    let options = {
+      src: 'http://clappr.io/notfound.m3u8',
+      hlsRecoverAttempts: 0,
+      mute: true
+    }
+
+    const core = new Core({})
+    const playback = new HlsjsPlayback(options, null, core.playerError)
+    playback.on(Events.PLAYBACK_ERROR, (e) => resolveFn(e))
+    playback.play()
+
+    promise.then((e) => {
+      expect(e.raw.type).toEqual(HLSJS.ErrorTypes.NETWORK_ERROR)
+      expect(e.raw.details).toEqual(HLSJS.ErrorDetails.MANIFEST_LOAD_ERROR)
     })
   })
 
-  describe('HlsjsPlayback.js configuration', function() {
-    it('should use hlsjsConfig from playback options', function() {
+  test('registers PLAYBACK_FRAGMENT_CHANGED event', () => {
+    expect(Events.Custom.PLAYBACK_FRAGMENT_CHANGED).toEqual('playbackFragmentChanged')
+  })
+
+  test('registers PLAYBACK_FRAGMENT_PARSING_METADATA event', () => {
+    expect(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA).toEqual('playbackFragmentParsingMetadata')
+  })
+
+  test('levels supports specifying the level', () => {
+    let playback
+    const options = { src: 'http://clappr.io/foo.m3u8' }
+    playback = new HlsjsPlayback(options)
+    playback._setup()
+    // NOTE: rather than trying to call playback.setupHls, we'll punch a new one in place
+    playback._hls = { levels: [] }
+    playback._fillLevels()
+
+    // AUTO by default (-1)
+    expect(playback.currentLevel).toEqual(-1)
+
+    // Supports other level specification. Should keep track of it
+    // on itself and by proxy on the HLS.js object.
+    playback.currentLevel = 0
+    expect(playback.currentLevel).toEqual(0)
+    expect(playback._hls.currentLevel).toEqual(0)
+    playback.currentLevel = 1
+    expect(playback.currentLevel).toEqual(1)
+    expect(playback._hls.currentLevel).toEqual(1)
+  })
+
+  describe('constructor', () => {
+    test('should use hlsjsConfig from playback options', () => {
       const options = {
         src: 'http://clappr.io/video.m3u8',
         playback: {
@@ -67,7 +127,7 @@ describe('HLS playback', function() {
       expect(playback._hls.config.someHlsjsOption).toEqual('value')
     })
 
-    it('should use hlsjsConfig from player options as fallback', function() {
+    test('should use hlsjsConfig from player options as fallback', () => {
       const options = {
         src: 'http://clappr.io/video.m3u8',
         hlsMinimumDvrSize: 1,
@@ -79,64 +139,199 @@ describe('HLS playback', function() {
       playback._setup()
       expect(playback._hls.config.someHlsjsOption).toEqual('value')
     })
+
+    test('merges defaultOptions with received options.hlsPlayback', () => {
+      const options = {
+        src: 'http://clappr.io/foo.m3u8',
+        hlsPlayback: { foo: 'bar' },
+      }
+      const playback = new HlsjsPlayback(options)
+      expect(playback.options.hlsPlayback).toEqual({ ...options.hlsPlayback, ...playback.defaultOptions })
+    })
   })
 
-  it('should trigger a playback error if source load failed', function() {
-    jest.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {})
-    let resolveFn = undefined
-    const promise = new Promise((resolve) => {
-      resolveFn = resolve
+  describe('_setup method', () => {
+    test('sets _manifestParsed flag to false', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
+      expect(playback._manifestParsed).toBeUndefined()
+
+      playback._setup()
+
+      expect(playback._manifestParsed).toBeFalsy()
     })
-    let options = {
-      src: 'http://clappr.io/notfound.m3u8',
-      hlsRecoverAttempts: 0,
-      mute: true
-    }
 
-    const core = new Core({})
-    const playback = new HlsjsPlayback(options, null, core.playerError)
-    playback.on(Events.PLAYBACK_ERROR, (e) => resolveFn(e))
-    playback.play()
+    test('calls this._hls.loadSource when MEDIA_ATTACHED event is triggered and hlsPlayback.preload is true', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8', hlsPlayback: { preload: false } })
+      playback._setup()
+      jest.spyOn(playback._hls, 'loadSource')
+      playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHED, { media: playback.el })
 
-    promise.then((e) => {
-      expect(e.raw.type).toEqual(HLSJS.ErrorTypes.NETWORK_ERROR)
-      expect(e.raw.details).toEqual(HLSJS.ErrorDetails.MANIFEST_LOAD_ERROR)
+      expect(playback._hls.loadSource).not.toHaveBeenCalled()
+
+      playback.options.hlsPlayback.preload = true
+      playback._setup()
+      jest.spyOn(playback._hls, 'loadSource')
+      playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHED, { media: playback.el })
+
+      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' })
+
+      expect(playback._manifestParsed).toBeUndefined()
+
+      playback._setup()
+      playback._hls.trigger(HLSJS.Events.MANIFEST_PARSED, { levels: [] })
+
+      expect(playback._manifestParsed).toBeTruthy()
+    })
+
+    test('calls bindCustomListeners method', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
+      jest.spyOn(playback, 'bindCustomListeners')
+      playback._setup()
+
+      expect(playback.bindCustomListeners).toHaveBeenCalledTimes(1)
     })
   })
 
-  it('registers PLAYBACK_FRAGMENT_CHANGED event', function() {
-    expect(Events.Custom.PLAYBACK_FRAGMENT_CHANGED).toEqual('playbackFragmentChanged')
+  describe('_ready method', () => {
+    test('avoid to run internal logic if _isReadyState flag is true', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
+      playback._isReadyState = true
+      jest.spyOn(playback, '_setup')
+      playback._ready()
+
+      expect(playback._setup).not.toHaveBeenCalled()
+    })
+
+    test('call _setup method if HLS.JS internal don\'t exists', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
+      jest.spyOn(playback, '_setup')
+      playback._ready()
+
+      expect(playback._setup).toHaveBeenCalledTimes(1)
+
+      playback._ready()
+      expect(playback._setup).toHaveBeenCalledTimes(1)
+    })
+
+    test('update _isReadyState flag value to true', () => {
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
+
+      expect(playback._isReadyState).toBeFalsy()
+
+      playback._ready()
+
+      expect(playback._isReadyState).toBeTruthy()
+    })
+
+    test('triggers PLAYBACK_READY event', done => {
+      const cb = jest.fn()
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
+
+      playback.listenTo(playback, Events.PLAYBACK_READY, cb)
+      playback.listenTo(playback, Events.PLAYBACK_READY, () => {
+        expect(cb).toHaveBeenCalledTimes(1)
+        done()
+      })
+      playback._ready()
+    })
   })
 
-  it('registers PLAYBACK_FRAGMENT_PARSING_METADATA event', function() {
-    expect(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA).toEqual('playbackFragmentParsingMetadata')
+  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 } })
+      playback._setup()
+      jest.spyOn(playback._hls, 'loadSource')
+      playback.play()
+
+      expect(playback._hls.loadSource).not.toHaveBeenCalled()
+
+      playback.options.hlsPlayback.preload = false
+      playback._manifestParsed = true
+      playback.play()
+
+      expect(playback._hls.loadSource).not.toHaveBeenCalled()
+
+      playback._manifestParsed = false
+      playback.play()
+
+      expect(playback._hls.loadSource).toHaveBeenCalledTimes(1)
+    })
   })
 
-  xit('levels', function() {
-    let playback
-    beforeEach(() => {
-      const options = { src: 'http://clappr.io/foo.m3u8' }
-      playback = new HlsjsPlayback(options)
-      playback.setupHls()
-      // NOTE: rather than trying to call playback.setupHls, we'll punch a new one in place
-      playback.hls = {
-        levels: []
-      }
-      playback.fillLevels()
+  describe('bindCustomListeners method', () => {
+    test('creates listeners for each item configured on customListeners array', () => {
+      const cb = jest.fn()
+      const playback = new HlsjsPlayback({
+        src: 'http://clappr.io/foo.m3u8',
+        hlsPlayback: {
+          customListeners: [{ eventName: HLSJS.Events.MEDIA_ATTACHING, callback: cb }]
+        }
+      })
+      playback._setup()
+
+      expect(cb).toHaveBeenCalledTimes(1)
+
+      playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHING, { media: playback.el })
+
+      expect(cb).toHaveBeenCalledTimes(2)
+    })
+
+    test('don\'t add one listener without a valid configuration', () => {
+      const cb = jest.fn()
+      const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
+      playback._setup()
+
+      expect(cb).not.toHaveBeenCalled()
+
+      playback.options.hlsPlayback = {}
+
+      expect(cb).not.toHaveBeenCalled()
+
+      playback.options.hlsPlayback.customListeners = []
+
+      expect(cb).not.toHaveBeenCalled()
+
+      playback.options.hlsPlayback.customListeners.push([{ eventName: 'invalid_name', callback: cb }])
+
+      expect(cb).not.toHaveBeenCalled()
+    })
+
+    test('adds a listener for one time when the customListeners array item is configured with the "once" param', () => {
+      const cb = jest.fn()
+      const playback = new HlsjsPlayback({
+        src: 'http://clappr.io/foo.m3u8',
+        hlsPlayback: {
+          customListeners: [{ eventName: HLSJS.Events.MEDIA_ATTACHING, callback: cb, once: true }]
+        }
+      })
+      playback._setup()
+
+      expect(cb).toHaveBeenCalledTimes(1)
+
+      playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHING)
+
+      expect(cb).toHaveBeenCalledTimes(1)
     })
+  })
 
-    it('supports specifying the level', () => {
-      // AUTO by default (-1)
-      expect(playback.currentLevel).to.equal(-1)
+  describe('unbindCustomListeners method', () => {
+    test('remove listeners for each item configured on customListeners array', () => {
+      const cb = jest.fn()
+      const playback = new HlsjsPlayback({
+        src: 'http://clappr.io/foo.m3u8',
+        hlsPlayback: {
+          customListeners: [{ eventName: 'hlsFragLoaded', callback: cb }]
+        }
+      })
+      playback._setup()
+      playback.unbindCustomListeners()
+      playback._hls.trigger(HLSJS.Events.FRAG_LOADED)
 
-      // Supports other level specification. Should keep track of it
-      // on itself and by proxy on the HLS.js object.
-      playback.currentLevel = 0
-      expect(playback.currentLevel).to.equal(0)
-      expect(playback.hls.currentLevel).to.equal(0)
-      playback.currentLevel = 1
-      expect(playback.currentLevel).to.equal(1)
-      expect(playback.hls.currentLevel).to.equal(1)
+      expect(cb).not.toHaveBeenCalled()
     })
   })
 })