Listen to end event

It seems not necessary to listen to 'onended'. Moreover, slightly refactor the Howl creation.
DocMarty84 · Apr 24, 2018 · 0397f42 · 0397f42
1 parent d9e3807
commit 0397f42
Showing 1 changed file with 14 additions and 20 deletions.
diff --git a/static/src/js/panel.js b/static/src/js/panel.js
@@ -253,16 +253,10 @@ var Panel = Widget.extend({
         // Create Howler sound. We use the cache if the track comes from a playlist and the user has
         // not seeked. If the user has previewed a track of has seeked, we do not use the cache.
         if (data_json.src && (self.user_seek || !data_json.playlist_line_id)) {
-            this.sound = new Howl({
-                src: data_json.src,
-                html5: true,
-            });
+            this.sound = self._newHowl(data_json)
         } else if (data_json.src) {
             if (!this.cache_sound[data_json.playlist_line_id]) {
-                this.cache_sound[data_json.playlist_line_id] = new Howl({
-                    src: data_json.src,
-                    html5: true,
-                });
+                this.cache_sound[data_json.playlist_line_id] = self._newHowl(data_json)
             }
             this.sound = this.cache_sound[data_json.playlist_line_id];
         }
@@ -277,14 +271,6 @@ var Panel = Widget.extend({
             this.$el.find('.oom_play').closest('li').show();
         }
 
-        // Define the ended event. For some unknown reason, Howler won't fire the 'end' event, so we
-        // directly listen on the media node.
-        if (this.sound && this.sound._sounds[0]) {
-            this.sound._sounds[0]._node.onended = function () {
-                self._onEnded();
-            };
-        }
-
         // Reset next sound
         this.next_playlist_line_id = undefined;
 
@@ -356,6 +342,17 @@ var Panel = Widget.extend({
         this.cache_data = {};
     },
 
+    _newHowl: function (data_json) {
+        var self = this;
+        return new Howl({
+            src: data_json.src,
+            html5: true,
+            onend: function () {
+                self._onEnded();
+            }
+        });
+    },
+
     _infUpdateProgress: function () {
         if (!this.sound || !this.sound.playing()) {
             return;
@@ -403,10 +400,7 @@ var Panel = Widget.extend({
                 self.next_playlist_line_id = data_json.playlist_line_id;
                 self.cache_data[data_json.playlist_line_id] = res;
                 if (data_json.src && !self.cache_sound[data_json.playlist_line_id]) {
-                    self.cache_sound[data_json.playlist_line_id] = new Howl({
-                        src: data_json.src,
-                        html5: true,
-                    });
+                    self.cache_sound[data_json.playlist_line_id] = self._newHowl(data_json)
                 }
             });
     },