diff --git a/src/js/playlist.js b/src/js/playlist.js index f9cd2b5..54d0207 100644 --- a/src/js/playlist.js +++ b/src/js/playlist.js @@ -6,12 +6,14 @@ class Playlist { const currentId = opts.player.videoData ? opts.player.videoData.id : opts.player.opts.id; this.currentIndex = currentId ? opts.queue.indexOf(currentId.toString()) : -1; - this.opts.player.containerEl.addEventListener('ended', this.next.bind(this), true); - this.cache = {}; - if (this.opts.autoplay && this.currentIndex === -1) { - this.next(); + if (this.opts.autoplay) { + this.opts.player.containerEl.addEventListener('ended', this.next.bind(this), true); + + if ( this.currentIndex === -1) { + this.next(); + } } } diff --git a/src/scss/_info.scss b/src/scss/_info.scss index 09e8c8c..59f678c 100644 --- a/src/scss/_info.scss +++ b/src/scss/_info.scss @@ -58,7 +58,7 @@ font-weight: 600; &:empty { - display: none; + display: none !important; } } diff --git a/test/playlist.test.js b/test/playlist.test.js index a97471e..2925d1e 100644 --- a/test/playlist.test.js +++ b/test/playlist.test.js @@ -46,10 +46,10 @@ describe('Playlist', () => { sinon.assert.calledOnce(player.update); }); - it('listens for the video to end to trigger the next in the queue', () => { + it('listens for the video to end to trigger the next in the queue when autoplay is set', () => { player.videoData = { id: 'bar' }; - new Subject({ player, queue }); + new Subject({ player, queue, autoplay: true }); // no DOM so trigger this on the listener directly player.containerEl.dispatchEvent(new CustomEvent('ended', { bubbles: false })); @@ -57,6 +57,16 @@ describe('Playlist', () => { sinon.assert.calledOnce(player.update); sinon.assert.calledWith(player.update, sinon.match({ id: 'baz' })); }); + + it('doesn\'t listen for the video to end when autoplay is not set', () => { + player.videoData = { id: 'bar' }; + + new Subject({ player, queue, autoplay: false }); + + player.containerEl.dispatchEvent(new CustomEvent('ended', { bubbles: false })); + + sinon.assert.notCalled(player.update); + }); }); describe('#next', () => {