fix(player): Fixed way to attach/dispatch HLS events for hls.js

openplayerjs · Sep 7, 2018 · 129b68f · 129b68f
1 parent 8b4c475
commit 129b68f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 16 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -42,10 +42,11 @@ <h1>Video Sample</h1>
         </div>
     </div>
 
-    <div class="players">
+    <div class="players audio-player">
         <h1>Audio Sample</h1>
+        <div id="stream-info"></div>
         <audio class="om-player om-player__media" controls>
-            <source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
+            <source src="http://db3.indexcom.com/bucket/ram/00/05/64k/05.m3u8">
         </audio>
         <div>
             <label>Change source <select name="sources">
@@ -65,6 +66,7 @@ <h1>Audio Sample</h1>
         var captionBtn = document.querySelectorAll('button.load-caption');
 
         function loadMedia() {
+            document.getElementById('stream-info').innerHTML = '';
             var id = this.closest('.players').querySelector('.om-player').id;
             var player = OpenPlayer.instances[id];
 
@@ -105,6 +107,54 @@ <h1>Audio Sample</h1>
         for (var i = 0, total = captionBtn.length; i < total; i++) {
             captionBtn[i].addEventListener('click', loadCaption);
         }
+
+        var id = document.querySelector('.om-player__audio').id;
+        var audioPlayer = OpenPlayer.instances[id];
+
+        audioPlayer.getElement().addEventListener('hlsFragParsingMetadata', function (event) {
+            var encodedTag = event.detail.samples[0].data;
+            var parsedTag = [];
+
+            encodedTag.forEach(function (element) {
+                parsedTag.push(String.fromCharCode(element));
+            });
+
+            var tagAsString = parsedTag.toString().replace(/,/g, '');
+            extractMeta(tagAsString, audioPlayer.getElement());
+        });
+
+        function extractMeta (data, audio) {
+            var name, desc, title, artist, image, infoArea, metaInfo, startLoc, endLoc;
+
+            // name
+            startLoc = data.indexOf("TRSN") + 11;
+            endLoc = data.indexOf("TRSO");
+            name = data.substring(startLoc, endLoc);
+
+            // desc
+            startLoc = data.indexOf("TRSO") + 11;
+            endLoc = data.indexOf("TIT2");
+            desc = data.substring(startLoc, endLoc);
+
+            // artist
+            startLoc = data.indexOf("TPE1") + 11;
+            endLoc = data.indexOf("TPE2");
+            artist = data.substring(startLoc, endLoc);
+
+            // title
+            startLoc = data.indexOf("TIT2") + 11;
+            endLoc = data.indexOf("TPE1");
+            title = data.substring(startLoc, endLoc);
+
+
+            // image
+            image = data.match('(http:\/\/|https:\/\/).*\.(jpg|png|svg)')[0];
+            infoArea = document.getElementById('stream-info');
+            metaInfo = '<p>Name: ' + name + '</p>' + '<p>Desc: ' + desc + '</p>' + '<p>Artist: ' + artist + '</p>' + '<p>Title: ' + title + '</p>' + '<img src="' + image + '" width="300" />';
+
+            infoArea.innerHTML = metaInfo;
+            audio.poster = image;
+        }
     </script>
 </body>
 </html>
diff --git a/src/js/media/hls.ts b/src/js/media/hls.ts
@@ -69,12 +69,6 @@ class HlsMedia extends Native {
     constructor(element: HTMLMediaElement, mediaSource: Source, options: {}) {
         super(element, mediaSource);
         this.options = options;
-        /**
-         * @private
-         */
-        function createInstance() {
-            this.player = new Hls(options);
-        }
         this.element = element;
         this.media = mediaSource;
         this.promise = (typeof Hls === 'undefined') ?
@@ -84,7 +78,7 @@ class HlsMedia extends Native {
                 resolve();
             });
 
-        this.promise.then(createInstance.bind(this));
+        this.promise.then(this._create.bind(this));
         return this;
     }
 
@@ -111,7 +105,7 @@ class HlsMedia extends Native {
         if (!this.events) {
             this.events = Hls.Events;
             Object.keys(this.events).forEach(event => {
-                this.player.on(this.events[event], this._assign.bind(this));
+                this.player.on(this.events[event], (...args: any[]) => this._assign(this.events[event], args));
             });
         }
     }
@@ -139,11 +133,31 @@ class HlsMedia extends Native {
 
             this.events = Hls.Events;
             Object.keys(this.events).forEach(event => {
-                this.player.on(this.events[event], this._assign.bind(this));
+                this.player.on(this.events[event], (...args: any[]) => this._assign(this.events[event], args));
             });
         }
     }
 
+    /**
+     *
+     *
+     * @private
+     * @memberof HlsMedia
+     */
+    private _create() {
+        // let { options } = this;
+        // if (!options) {
+        //     options = {};
+        // }
+        // (options as any).autoStartLoad = this.element.autoplay || false;
+
+        this.player = new Hls(this.options);
+        this.events = Hls.Events;
+        Object.keys(this.events).forEach(event => {
+            this.player.on(this.events[event], (...args: any[]) => this._assign(this.events[event], args));
+        });
+    }
+
     /**
      * Custom HLS events
      *
@@ -153,9 +167,12 @@ class HlsMedia extends Native {
      * @see https://github.com/video-dev/hls.js/blob/master/src/errors.js
      * @see https://github.com/video-dev/hls.js/blob/master/doc/API.md#runtime-events
      * @see https://github.com/video-dev/hls.js/blob/master/doc/API.md#errors
+     * @param {string} event The name of the HLS event
+     * @param {any} data The data passed to the event, could be an object or an array
+     * @memberof HlsMedia
      */
     private _assign(event: string, data: any): void {
-        if (name === 'hlsError') {
+        if (event === 'hlsError') {
             console.warn(data);
             data = data[1];
 
@@ -187,7 +204,7 @@ class HlsMedia extends Native {
                 }
             }
         } else {
-            const e = addEvent(event, data);
+            const e = addEvent(event, data[1]);
             this.element.dispatchEvent(e);
         }
     }
@@ -199,7 +216,7 @@ class HlsMedia extends Native {
     private _revoke(): void {
         if (this.events) {
             Object.keys(this.events).forEach(event => {
-                this.player.off(this.events[event], this._assign.bind(this));
+                this.player.off(this.events[event], (...args: any[]) => this._assign(this.events[event], args));
             });
             this.events = null;
         }

diff --git a/src/js/utils/events.ts b/src/js/utils/events.ts
@@ -12,7 +12,7 @@ export function addEvent(event: string, details?: CustomEventInit): CustomEvent
         throw new Error('Event name must be a string');
     }
 
-    return new CustomEvent(event, details);
+    return new CustomEvent(event, { detail: details });
 }
 
 /**
@@ -24,6 +24,6 @@ export function addEvent(event: string, details?: CustomEventInit): CustomEvent
 export const events: string[] = [
     'loadstart', 'durationchange', 'loadedmetadata', 'loadeddata',
     'progress', 'canplay', 'canplaythrough', 'suspend', 'abort', 'error',
-    'emptied', 'stalled', 'play', 'playing',  'pause', 'waiting', 'seeking',
+    'emptied', 'stalled', 'play', 'playing', 'pause', 'waiting', 'seeking',
     'seeked', 'timeupdate', 'ended', 'ratechange', 'volumechange',
 ];