Custom listeners for HLS.js events

[joaopaulovieira]

This PR depends on #14 to works with all HLS.js events (including events triggered before the media started).

Summary

This PR creates one new option (hlsPlayback.customListeners) to add the possibility to create listeners for HLS.js events. Also, creates the possibility to remove those custom listeners.

Changes

• Creates new option hlsPlayback.customListeners;
• Add Docs for the new option;
• Creates bindCustomListeners method;
• Creates unbindCustomListeners method;
• Cover all new code with tests;

How to test

Testing listeners to listen each time the select event is triggered:

• Configure one custom listeners for one HLS.js event on thehlsPlayback.customListeners array;
  • E.g.: { eventName: 'FRAG_LOADED', callback: (evt, data) => { console.log(evt, data) } }
• Run the project locally;
• Open the console tab of your browser developer tools;
  • The configured console on the callback should be printed on every time the selected event is triggered.

Testing listeners to listen just one time:

• Configure one custom listeners for one HLS.js event on thehlsPlayback.customListeners array with the once option;
  • E.g.: { eventName: 'FRAG_LOADED', callback: (evt, data) => { console.log(evt, data) }, once: true }
• Run the project locally;
• Open the console tab of your browser developer tools;
  • The configured console on the callback should be printed just one time for the selected event.

Testing unbindCustomListeners:

• Configure one custom listeners for one HLS.js event on thehlsPlayback.customListeners array;
  • E.g.: { eventName: 'FRAG_LOADED', callback: (evt, data) => { console.log(evt, data) } }
• Run the project locally;
• Open the console tab of your browser developer tools;
  • The configured console on the callback should be printed.
• Call unbindCustomListeners method;
  • E.g.: Call on the console tab of your browser developer tools -> player.core.activePlayback._hls.unbindCustomListeners().
  • The configured log on the callback should not be printed anymore.

A picture/video tells a thousand words

After this PR

Testing listeners to listen each time the select event is triggered:

Screen.Recording.2021-01-31.at.21.48.04.mov

---

Testing listeners to listen just one time:

Screen.Recording.2021-01-31.at.21.46.22.mov

---

Testing unbindCustomListeners:

Screen.Recording.2021-01-31.at.21.53.00.mov

[jhonatangcavalcanti]

What about creating a getter for customListeners?

Suggested change

	bindCustomListeners() {
	this.options.hlsPlayback &&
	this.options.hlsPlayback.customListeners &&
	this.options.hlsPlayback.customListeners.forEach(item => {
	get customListeners() {
	return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || []
	}
	bindCustomListeners() {
	this.customListeners.forEach(item => {

This way we'll also have less code on unbindCustomListeners method