vimeoplaylist - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/index.esm.js

@@ -1,2 +0,2 @@
-import t from"@vimeo/player";import e from"isomorphic-fetch";function i(t){if(!t.ok)throw Error(t.statusText);return t.json()}function s(t){var e=Math.floor(t/3600),i=Math.floor(t%3600/60),s=t%60;return[e,i>9?i:e?"0"+i:i||"0",s>9?s:"0"+s].filter(Boolean).join(":")}function l(t){return!!document.body.contains(document.querySelector(t))}function n(e,i){i=i||{},Object.assign(this,n.defaults,i),this.hasPlayerId(e)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new t(e,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}n.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[],playlistTmpl:function(t){var e=s(t.duration);return'\n    <a class="plist-item__link" data-vimeo-id="'+t.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+t.thumbnail_large+'"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">'+t.title+'</span>\n        <span class="plist-item__user">'+t.user_name+'</span>\n        <span class="plist-item__time-dur">'+e+"</span>\n\n      </div>\n    </a>\n  "}},n.prototype={constructor:n,hasPlayerId:function(t){return!!l("#"+t)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1)},init:function(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings:function(){this.player.setColor(this.color)},listeners:function(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks()},loadVid:function(t){var e=this;this.player.loadVideo(t).then(function(){e.setActiveState()}).catch(function(t){console.error(t,"error loading video")})},onEnd:function(){var t=this;this.player.on("ended",function(){console.info("ended"),t.next()})},onPause:function(){var t=this;this.player.on("pause",function(){console.info("pause"),t.setPausedState()})},onPlay:function(){var t=this;this.player.on("play",function(){console.info("play"),t.setActiveState()})},onFullScreenToggle:function(){var t=this;this.fullscreenToggleKeyCode&&window.addEventListener("keydown",function(e){e.code===t.fullscreenToggleKeyCode&&t.toggleFullscreen()},!1),l("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,s=0;this.playlist.forEach(function(l){var n;(n="https://vimeo.com/api/v2/video/"+l.id+".json",console.log("fetch data"),e(n).then(i).then(function(t){return t}).catch(function(t){return console.log("failed",t)})).then(function(e){s++;var i,l,n,a=(i=t.playlistTmpl(e[0]),l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=i,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(a):console.warn("VimeoPlaylist: Provide a valid playlist id"),s===t.vidCount){if(t.setupFirstVid(),!t.hasPlaylist)return;t.playlistItems=document.querySelectorAll(".plist-item__link"),t.handlePlaylistClicks()}})})},setupFirstVid:function(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks:function(){var t=this;this.playlistItems.forEach(function(e,i){e.addEventListener("click",function(e){e.preventDefault(),t.currentVidIdx=i,t.play(t.currentVidIdx)}),e.addEventListener("keydown",function(e){"Enter"===e.code&&(t.currentVidIdx=i,t.play(t.currentVidIdx))})})},handleNavClicks:function(){var t=this;l("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),l("#"+this.playlistNavNext.id)&&this.playlistNavNext.addEventListener("click",function(e){e.preventDefault(),t.next()})},setActiveState:function(){var t=document.querySelector("."+this.activeClass),e=document.querySelector("."+this.pausedClass);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState:function(){var t=document.querySelector("."+this.activeClass);t&&t.classList.add(this.pausedClass)},play:function(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next:function(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev:function(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen:function(){var t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports.formatTime=s;export{n as default};
+import t from"@vimeo/player";import e from"isomorphic-fetch";function i(t){if(!t.ok)throw Error(t.statusText);return t.json()}function s(t){var e=Math.floor(t/3600),i=Math.floor(t%3600/60),s=t%60;return[e,i>9?i:e?"0"+i:i||"0",s>9?s:"0"+s].filter(Boolean).join(":")}function l(t){return!!document.body.contains(document.querySelector(t))}function n(e,i){i=i||{},Object.assign(this,n.defaults,i),this.hasPlayerId(e)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new t(e,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}n.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",supportsKeyNav:!0,playlist:[],playlistTmpl:function(t){var e=s(t.duration);return'\n    <a class="plist-item__link" data-vimeo-id="'+t.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+t.thumbnail_large+'"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">'+t.title+'</span>\n        <span class="plist-item__user">'+t.user_name+'</span>\n        <span class="plist-item__time-dur">'+e+"</span>\n\n      </div>\n    </a>\n  "}},n.prototype={constructor:n,hasPlayerId:function(t){return!!l("#"+t)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1)},init:function(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings:function(){this.player.setColor(this.color)},listeners:function(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks(),this.supportsKeyNav&&this.handleKeyNav()},loadVid:function(t){var e=this;this.player.loadVideo(t).then(function(){e.setActiveState()}).catch(function(t){console.error(t,"error loading video")})},onEnd:function(){var t=this;this.player.on("ended",function(){console.info("ended"),t.next()})},onPause:function(){var t=this;this.player.on("pause",function(){console.info("pause"),t.setPausedState()})},onPlay:function(){var t=this;this.player.on("play",function(){console.info("play"),t.setActiveState()})},onFullScreenToggle:function(){var t=this;this.fullscreenToggleKeyCode&&window.addEventListener("keydown",function(e){e.code===t.fullscreenToggleKeyCode&&t.toggleFullscreen()},!1),l("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,s=0;this.playlist.forEach(function(l){e("https://vimeo.com/api/v2/video/"+l.id+".json").then(i).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(e){s++;var i,l,n,a=(i=t.playlistTmpl(e[0]),l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=i,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(a):console.warn("VimeoPlaylist: Provide a valid playlist id"),s===t.vidCount){if(t.setupFirstVid(),!t.hasPlaylist)return;t.playlistItems=document.querySelectorAll(".plist-item__link"),t.handlePlaylistClicks()}})})},setupFirstVid:function(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks:function(){var t=this;this.playlistItems.forEach(function(e,i){e.addEventListener("click",function(e){e.preventDefault(),t.currentVidIdx=i,t.play(t.currentVidIdx)}),e.addEventListener("keydown",function(e){"Enter"===e.code&&(t.currentVidIdx=i,t.play(t.currentVidIdx))})})},handleNavClicks:function(){var t=this;l("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),l("#"+this.playlistNavNext.id)&&this.playlistNavNext.addEventListener("click",function(e){e.preventDefault(),t.next()})},handleKeyNav:function(){var t=this;document.addEventListener("keydown",function(e){"ArrowRight"==e.code&&t.next(),"ArrowLeft"==e.code&&t.prev()},!1)},setActiveState:function(){var t=document.querySelector("."+this.activeClass),e=document.querySelector("."+this.pausedClass);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState:function(){var t=document.querySelector("."+this.activeClass);t&&t.classList.add(this.pausedClass)},play:function(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next:function(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev:function(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen:function(){var t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports=n,module.exports.formatTime=s;
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,2 +0,2 @@
-var t=require("@vimeo/player"),e=require("isomorphic-fetch");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=/*#__PURE__*/i(t),l=/*#__PURE__*/i(e);function n(t){if(!t.ok)throw Error(t.statusText);return t.json()}function a(t){var e=Math.floor(t/3600),i=Math.floor(t%3600/60),s=t%60;return[e,i>9?i:e?"0"+i:i||"0",s>9?s:"0"+s].filter(Boolean).join(":")}function o(t){return!!document.body.contains(document.querySelector(t))}function r(t,e){e=e||{},Object.assign(this,r.defaults,e),this.hasPlayerId(t)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new s.default(t,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}r.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[],playlistTmpl:function(t){var e=a(t.duration);return'\n    <a class="plist-item__link" data-vimeo-id="'+t.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+t.thumbnail_large+'"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">'+t.title+'</span>\n        <span class="plist-item__user">'+t.user_name+'</span>\n        <span class="plist-item__time-dur">'+e+"</span>\n\n      </div>\n    </a>\n  "}},r.prototype={constructor:r,hasPlayerId:function(t){return!!o("#"+t)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1)},init:function(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings:function(){this.player.setColor(this.color)},listeners:function(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks()},loadVid:function(t){var e=this;this.player.loadVideo(t).then(function(){e.setActiveState()}).catch(function(t){console.error(t,"error loading video")})},onEnd:function(){var t=this;this.player.on("ended",function(){console.info("ended"),t.next()})},onPause:function(){var t=this;this.player.on("pause",function(){console.info("pause"),t.setPausedState()})},onPlay:function(){var t=this;this.player.on("play",function(){console.info("play"),t.setActiveState()})},onFullScreenToggle:function(){var t=this;this.fullscreenToggleKeyCode&&window.addEventListener("keydown",function(e){e.code===t.fullscreenToggleKeyCode&&t.toggleFullscreen()},!1),o("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,e=0;this.playlist.forEach(function(i){var s;(s="https://vimeo.com/api/v2/video/"+i.id+".json",console.log("fetch data"),l.default(s).then(n).then(function(t){return t}).catch(function(t){return console.log("failed",t)})).then(function(i){e++;var s,l,n,a=(s=t.playlistTmpl(i[0]),l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(a):console.warn("VimeoPlaylist: Provide a valid playlist id"),e===t.vidCount){if(t.setupFirstVid(),!t.hasPlaylist)return;t.playlistItems=document.querySelectorAll(".plist-item__link"),t.handlePlaylistClicks()}})})},setupFirstVid:function(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks:function(){var t=this;this.playlistItems.forEach(function(e,i){e.addEventListener("click",function(e){e.preventDefault(),t.currentVidIdx=i,t.play(t.currentVidIdx)}),e.addEventListener("keydown",function(e){"Enter"===e.code&&(t.currentVidIdx=i,t.play(t.currentVidIdx))})})},handleNavClicks:function(){var t=this;o("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),o("#"+this.playlistNavNext.id)&&this.playlistNavNext.addEventListener("click",function(e){e.preventDefault(),t.next()})},setActiveState:function(){var t=document.querySelector("."+this.activeClass),e=document.querySelector("."+this.pausedClass);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState:function(){var t=document.querySelector("."+this.activeClass);t&&t.classList.add(this.pausedClass)},play:function(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next:function(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev:function(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen:function(){var t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports.formatTime=a,module.exports=r;
+var t=require("@vimeo/player"),e=require("isomorphic-fetch");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=/*#__PURE__*/i(t),l=/*#__PURE__*/i(e);function n(t){if(!t.ok)throw Error(t.statusText);return t.json()}function a(t){var e=Math.floor(t/3600),i=Math.floor(t%3600/60),s=t%60;return[e,i>9?i:e?"0"+i:i||"0",s>9?s:"0"+s].filter(Boolean).join(":")}function o(t){return!!document.body.contains(document.querySelector(t))}function r(t,e){e=e||{},Object.assign(this,r.defaults,e),this.hasPlayerId(t)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new s.default(t,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}r.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",supportsKeyNav:!0,playlist:[],playlistTmpl:function(t){var e=a(t.duration);return'\n    <a class="plist-item__link" data-vimeo-id="'+t.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+t.thumbnail_large+'"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">'+t.title+'</span>\n        <span class="plist-item__user">'+t.user_name+'</span>\n        <span class="plist-item__time-dur">'+e+"</span>\n\n      </div>\n    </a>\n  "}},r.prototype={constructor:r,hasPlayerId:function(t){return!!o("#"+t)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1)},init:function(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings:function(){this.player.setColor(this.color)},listeners:function(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks(),this.supportsKeyNav&&this.handleKeyNav()},loadVid:function(t){var e=this;this.player.loadVideo(t).then(function(){e.setActiveState()}).catch(function(t){console.error(t,"error loading video")})},onEnd:function(){var t=this;this.player.on("ended",function(){console.info("ended"),t.next()})},onPause:function(){var t=this;this.player.on("pause",function(){console.info("pause"),t.setPausedState()})},onPlay:function(){var t=this;this.player.on("play",function(){console.info("play"),t.setActiveState()})},onFullScreenToggle:function(){var t=this;this.fullscreenToggleKeyCode&&window.addEventListener("keydown",function(e){e.code===t.fullscreenToggleKeyCode&&t.toggleFullscreen()},!1),o("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,e=0;this.playlist.forEach(function(i){l.default("https://vimeo.com/api/v2/video/"+i.id+".json").then(n).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(i){e++;var s,l,n,a=(s=t.playlistTmpl(i[0]),l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(a):console.warn("VimeoPlaylist: Provide a valid playlist id"),e===t.vidCount){if(t.setupFirstVid(),!t.hasPlaylist)return;t.playlistItems=document.querySelectorAll(".plist-item__link"),t.handlePlaylistClicks()}})})},setupFirstVid:function(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks:function(){var t=this;this.playlistItems.forEach(function(e,i){e.addEventListener("click",function(e){e.preventDefault(),t.currentVidIdx=i,t.play(t.currentVidIdx)}),e.addEventListener("keydown",function(e){"Enter"===e.code&&(t.currentVidIdx=i,t.play(t.currentVidIdx))})})},handleNavClicks:function(){var t=this;o("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),o("#"+this.playlistNavNext.id)&&this.playlistNavNext.addEventListener("click",function(e){e.preventDefault(),t.next()})},handleKeyNav:function(){var t=this;document.addEventListener("keydown",function(e){"ArrowRight"==e.code&&t.next(),"ArrowLeft"==e.code&&t.prev()},!1)},setActiveState:function(){var t=document.querySelector("."+this.activeClass),e=document.querySelector("."+this.pausedClass);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState:function(){var t=document.querySelector("."+this.activeClass);t&&t.classList.add(this.pausedClass)},play:function(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next:function(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev:function(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen:function(){var t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports=r,module.exports.formatTime=a;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-import t from"@vimeo/player";import e from"isomorphic-fetch";function s(t){if(!t.ok)throw Error(t.statusText);return t.json()}function i(t){const e=Math.floor(t/3600),s=Math.floor(t%3600/60),i=t%60;return[e,s>9?s:e?"0"+s:s||"0",i>9?i:"0"+i].filter(Boolean).join(":")}function l(t){return!!document.body.contains(document.querySelector(t))}function a(e,s){s=s||{},Object.assign(this,a.defaults,s),this.hasPlayerId(e)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new t(e,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}a.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[],playlistTmpl:function(t){let e=i(t.duration);return`\n    <a class="plist-item__link" data-vimeo-id="${t.id}" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="${t.thumbnail_large}"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">${t.title}</span>\n        <span class="plist-item__user">${t.user_name}</span>\n        <span class="plist-item__time-dur">${e}</span>\n\n      </div>\n    </a>\n  `}},a.prototype={constructor:a,hasPlayerId:t=>!!l(`#${t}`)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1),init(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings(){this.player.setColor(this.color)},listeners(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks()},loadVid(t){this.player.loadVideo(t).then(()=>{this.setActiveState()}).catch(t=>{console.error(t,"error loading video")})},onEnd(){this.player.on("ended",()=>{console.info("ended"),this.next()})},onPause(){this.player.on("pause",()=>{console.info("pause"),this.setPausedState()})},onPlay(){this.player.on("play",()=>{console.info("play"),this.setActiveState()})},onFullScreenToggle(){this.fullscreenToggleKeyCode&&window.addEventListener("keydown",t=>{t.code===this.fullscreenToggleKeyCode&&this.toggleFullscreen()},!1),l(`#${this.fullscreenToggle.id}`)&&this.fullscreenToggle.addEventListener("click",t=>{t.preventDefault(),this.toggleFullscreen()})},buildPlaylist(){let t=0;this.playlist.forEach(i=>{var l;(l="https://vimeo.com/api/v2/video/"+i.id+".json",console.log("fetch data"),e(l).then(s).then(t=>t).catch(t=>console.log("failed",t))).then(e=>{t++;let s=function(t,e,s){let i=document.createDocumentFragment(),l=document.createElement("article");return l.className+="plist-item",l.innerHTML=t,i.appendChild(l),l}(this.playlistTmpl(e[0]));if(this.playlistOutput?this.playlistOutput.appendChild(s):console.warn("VimeoPlaylist: Provide a valid playlist id"),t===this.vidCount){if(this.setupFirstVid(),!this.hasPlaylist)return;this.playlistItems=document.querySelectorAll(".plist-item__link"),this.handlePlaylistClicks()}})})},setupFirstVid(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks(){this.playlistItems.forEach((t,e)=>{t.addEventListener("click",t=>{t.preventDefault(),this.currentVidIdx=e,this.play(this.currentVidIdx)}),t.addEventListener("keydown",t=>{"Enter"===t.code&&(this.currentVidIdx=e,this.play(this.currentVidIdx))})})},handleNavClicks(){l(`#${this.playlistNavPrev.id}`)&&this.playlistNavPrev.addEventListener("click",t=>{t.preventDefault(),this.prev()}),l(`#${this.playlistNavNext.id}`)&&this.playlistNavNext.addEventListener("click",t=>{t.preventDefault(),this.next()})},setActiveState(){let t=document.querySelector(`.${this.activeClass}`),e=document.querySelector(`.${this.pausedClass}`);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState(){let t=document.querySelector(`.${this.activeClass}`);t&&t.classList.add(this.pausedClass)},play(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen(){let t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports.formatTime=i;export{a as default};
+import t from"@vimeo/player";import e from"isomorphic-fetch";function s(t){if(!t.ok)throw Error(t.statusText);return t.json()}function i(t){const e=Math.floor(t/3600),s=Math.floor(t%3600/60),i=t%60;return[e,s>9?s:e?"0"+s:s||"0",i>9?i:"0"+i].filter(Boolean).join(":")}function l(t){return!!document.body.contains(document.querySelector(t))}function a(e,s){s=s||{},Object.assign(this,a.defaults,s),this.hasPlayerId(e)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new t(e,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}a.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",supportsKeyNav:!0,playlist:[],playlistTmpl:function(t){let e=i(t.duration);return`\n    <a class="plist-item__link" data-vimeo-id="${t.id}" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="${t.thumbnail_large}"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">${t.title}</span>\n        <span class="plist-item__user">${t.user_name}</span>\n        <span class="plist-item__time-dur">${e}</span>\n\n      </div>\n    </a>\n  `}},a.prototype={constructor:a,hasPlayerId:t=>!!l(`#${t}`)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1),init(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings(){this.player.setColor(this.color)},listeners(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks(),this.supportsKeyNav&&this.handleKeyNav()},loadVid(t){this.player.loadVideo(t).then(()=>{this.setActiveState()}).catch(t=>{console.error(t,"error loading video")})},onEnd(){this.player.on("ended",()=>{console.info("ended"),this.next()})},onPause(){this.player.on("pause",()=>{console.info("pause"),this.setPausedState()})},onPlay(){this.player.on("play",()=>{console.info("play"),this.setActiveState()})},onFullScreenToggle(){this.fullscreenToggleKeyCode&&window.addEventListener("keydown",t=>{t.code===this.fullscreenToggleKeyCode&&this.toggleFullscreen()},!1),l(`#${this.fullscreenToggle.id}`)&&this.fullscreenToggle.addEventListener("click",t=>{t.preventDefault(),this.toggleFullscreen()})},buildPlaylist(){let t=0;this.playlist.forEach(i=>{e("https://vimeo.com/api/v2/video/"+i.id+".json").then(s).then(t=>t).catch(t=>console.log("failed",t)).then(e=>{t++;let s=function(t,e,s){let i=document.createDocumentFragment(),l=document.createElement("article");return l.className+="plist-item",l.innerHTML=t,i.appendChild(l),l}(this.playlistTmpl(e[0]));if(this.playlistOutput?this.playlistOutput.appendChild(s):console.warn("VimeoPlaylist: Provide a valid playlist id"),t===this.vidCount){if(this.setupFirstVid(),!this.hasPlaylist)return;this.playlistItems=document.querySelectorAll(".plist-item__link"),this.handlePlaylistClicks()}})})},setupFirstVid(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks(){this.playlistItems.forEach((t,e)=>{t.addEventListener("click",t=>{t.preventDefault(),this.currentVidIdx=e,this.play(this.currentVidIdx)}),t.addEventListener("keydown",t=>{"Enter"===t.code&&(this.currentVidIdx=e,this.play(this.currentVidIdx))})})},handleNavClicks(){l(`#${this.playlistNavPrev.id}`)&&this.playlistNavPrev.addEventListener("click",t=>{t.preventDefault(),this.prev()}),l(`#${this.playlistNavNext.id}`)&&this.playlistNavNext.addEventListener("click",t=>{t.preventDefault(),this.next()})},handleKeyNav(){document.addEventListener("keydown",t=>{"ArrowRight"==t.code&&this.next(),"ArrowLeft"==t.code&&this.prev()},!1)},setActiveState(){let t=document.querySelector(`.${this.activeClass}`),e=document.querySelector(`.${this.pausedClass}`);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState(){let t=document.querySelector(`.${this.activeClass}`);t&&t.classList.add(this.pausedClass)},play(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen(){let t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports=a,module.exports.formatTime=i;
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@vimeo/player"),require("isomorphic-fetch")):"function"==typeof define&&define.amd?define(["@vimeo/player","isomorphic-fetch"],e):(t||self).vimeoplaylist=e(t.Player,t.isomorphicFetch)}(this,function(t,e){function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=/*#__PURE__*/i(t),l=/*#__PURE__*/i(e);function n(t){if(!t.ok)throw Error(t.statusText);return t.json()}function a(t){var e=Math.floor(t/3600),i=Math.floor(t%3600/60),s=t%60;return[e,i>9?i:e?"0"+i:i||"0",s>9?s:"0"+s].filter(Boolean).join(":")}function o(t){return!!document.body.contains(document.querySelector(t))}function r(t,e){e=e||{},Object.assign(this,r.defaults,e),this.hasPlayerId(t)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new s.default(t,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}return r.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[],playlistTmpl:function(t){var e=a(t.duration);return'\n    <a class="plist-item__link" data-vimeo-id="'+t.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+t.thumbnail_large+'"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">'+t.title+'</span>\n        <span class="plist-item__user">'+t.user_name+'</span>\n        <span class="plist-item__time-dur">'+e+"</span>\n\n      </div>\n    </a>\n  "}},r.prototype={constructor:r,hasPlayerId:function(t){return!!o("#"+t)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1)},init:function(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings:function(){this.player.setColor(this.color)},listeners:function(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks()},loadVid:function(t){var e=this;this.player.loadVideo(t).then(function(){e.setActiveState()}).catch(function(t){console.error(t,"error loading video")})},onEnd:function(){var t=this;this.player.on("ended",function(){console.info("ended"),t.next()})},onPause:function(){var t=this;this.player.on("pause",function(){console.info("pause"),t.setPausedState()})},onPlay:function(){var t=this;this.player.on("play",function(){console.info("play"),t.setActiveState()})},onFullScreenToggle:function(){var t=this;this.fullscreenToggleKeyCode&&window.addEventListener("keydown",function(e){e.code===t.fullscreenToggleKeyCode&&t.toggleFullscreen()},!1),o("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,e=0;this.playlist.forEach(function(i){var s;(s="https://vimeo.com/api/v2/video/"+i.id+".json",console.log("fetch data"),l.default(s).then(n).then(function(t){return t}).catch(function(t){return console.log("failed",t)})).then(function(i){e++;var s,l,n,a=(s=t.playlistTmpl(i[0]),l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(a):console.warn("VimeoPlaylist: Provide a valid playlist id"),e===t.vidCount){if(t.setupFirstVid(),!t.hasPlaylist)return;t.playlistItems=document.querySelectorAll(".plist-item__link"),t.handlePlaylistClicks()}})})},setupFirstVid:function(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks:function(){var t=this;this.playlistItems.forEach(function(e,i){e.addEventListener("click",function(e){e.preventDefault(),t.currentVidIdx=i,t.play(t.currentVidIdx)}),e.addEventListener("keydown",function(e){"Enter"===e.code&&(t.currentVidIdx=i,t.play(t.currentVidIdx))})})},handleNavClicks:function(){var t=this;o("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),o("#"+this.playlistNavNext.id)&&this.playlistNavNext.addEventListener("click",function(e){e.preventDefault(),t.next()})},setActiveState:function(){var t=document.querySelector("."+this.activeClass),e=document.querySelector("."+this.pausedClass);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState:function(){var t=document.querySelector("."+this.activeClass);t&&t.classList.add(this.pausedClass)},play:function(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next:function(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev:function(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen:function(){var t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports.formatTime=a,r});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("@vimeo/player"),require("isomorphic-fetch")):"function"==typeof define&&define.amd?define(["@vimeo/player","isomorphic-fetch"],e):e((t||self).Player,t.isomorphicFetch)}(this,function(t,e){function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=/*#__PURE__*/i(t),l=/*#__PURE__*/i(e);function n(t){if(!t.ok)throw Error(t.statusText);return t.json()}function a(t){var e=Math.floor(t/3600),i=Math.floor(t%3600/60),s=t%60;return[e,i>9?i:e?"0"+i:i||"0",s>9?s:"0"+s].filter(Boolean).join(":")}function o(t){return!!document.body.contains(document.querySelector(t))}function r(t,e){e=e||{},Object.assign(this,r.defaults,e),this.hasPlayerId(t)&&(this.hasPlaylist=this.hasPlaylist,this.playlistOutput=document.querySelector(this.playlistOutput),this.playlistNavPrev=document.querySelector(this.playlistNavPrev),this.playlistNavNext=document.querySelector(this.playlistNavNext),this.fullscreenToggle=document.querySelector(this.fullscreenToggle),this.fullscreenToggleKeyCode=this.fullscreenToggleKeyCode,this.playListItems=[],this.currentVidIdx=0,this.vidCount=this.playlist.length,this.isActive=!1,this.activeClass="is-playing",this.pausedClass="is-paused",this.player=new s.default(t,{id:this.playlist[this.currentVidIdx].id,width:this.width,title:this.title,muted:this.muted,controls:this.controls,autoplay:this.autoplay,color:this.color}))}r.defaults={width:900,loop:!1,title:!1,muted:!0,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!0,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",supportsKeyNav:!0,playlist:[],playlistTmpl:function(t){var e=a(t.duration);return'\n    <a class="plist-item__link" data-vimeo-id="'+t.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+t.thumbnail_large+'"/>\n          <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">\n            <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>\n          </svg>\n        </div>\n      </figure>\n      <div class="plist-item__main">\n        <span class="plist-item__title">'+t.title+'</span>\n        <span class="plist-item__user">'+t.user_name+'</span>\n        <span class="plist-item__time-dur">'+e+"</span>\n\n      </div>\n    </a>\n  "}},r.prototype={constructor:r,hasPlayerId:function(t){return!!o("#"+t)||(console.warn("VimeoPlaylist: 😜 Dood, provide a valid ID to render Vimeo Player"),!1)},init:function(){this.player&&(this.settings(),this.listeners(),this.hasPlaylist&&this.buildPlaylist())},settings:function(){this.player.setColor(this.color)},listeners:function(){this.onEnd(),this.onPause(),this.onPlay(),this.onFullScreenToggle(),this.handleNavClicks(),this.supportsKeyNav&&this.handleKeyNav()},loadVid:function(t){var e=this;this.player.loadVideo(t).then(function(){e.setActiveState()}).catch(function(t){console.error(t,"error loading video")})},onEnd:function(){var t=this;this.player.on("ended",function(){console.info("ended"),t.next()})},onPause:function(){var t=this;this.player.on("pause",function(){console.info("pause"),t.setPausedState()})},onPlay:function(){var t=this;this.player.on("play",function(){console.info("play"),t.setActiveState()})},onFullScreenToggle:function(){var t=this;this.fullscreenToggleKeyCode&&window.addEventListener("keydown",function(e){e.code===t.fullscreenToggleKeyCode&&t.toggleFullscreen()},!1),o("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,e=0;this.playlist.forEach(function(i){l.default("https://vimeo.com/api/v2/video/"+i.id+".json").then(n).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(i){e++;var s,l,n,a=(s=t.playlistTmpl(i[0]),l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(a):console.warn("VimeoPlaylist: Provide a valid playlist id"),e===t.vidCount){if(t.setupFirstVid(),!t.hasPlaylist)return;t.playlistItems=document.querySelectorAll(".plist-item__link"),t.handlePlaylistClicks()}})})},setupFirstVid:function(){this.playlistItems&&(this.playlistItems[0].classList.add(this.activeClass),this.player.element.setAttribute("allow","autoplay"),this.player.play())},handlePlaylistClicks:function(){var t=this;this.playlistItems.forEach(function(e,i){e.addEventListener("click",function(e){e.preventDefault(),t.currentVidIdx=i,t.play(t.currentVidIdx)}),e.addEventListener("keydown",function(e){"Enter"===e.code&&(t.currentVidIdx=i,t.play(t.currentVidIdx))})})},handleNavClicks:function(){var t=this;o("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),o("#"+this.playlistNavNext.id)&&this.playlistNavNext.addEventListener("click",function(e){e.preventDefault(),t.next()})},handleKeyNav:function(){var t=this;document.addEventListener("keydown",function(e){"ArrowRight"==e.code&&t.next(),"ArrowLeft"==e.code&&t.prev()},!1)},setActiveState:function(){var t=document.querySelector("."+this.activeClass),e=document.querySelector("."+this.pausedClass);t&&t.classList.remove(this.activeClass),e&&e.classList.remove(this.pausedClass),this.hasPlaylist&&this.playlistItems[this.currentVidIdx].classList.add(this.activeClass)},setPausedState:function(){var t=document.querySelector("."+this.activeClass);t&&t.classList.add(this.pausedClass)},play:function(t){this.currentVidIdx=t,this.loadVid(this.playlist[this.currentVidIdx]),this.setActiveState()},next:function(){this.currentVidIdx++,this.currentVidIdx<this.vidCount||(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},prev:function(){this.currentVidIdx--,this.currentVidIdx<0&&(this.currentVidIdx=0),this.loadVid(this.playlist[this.currentVidIdx])},toggleFullscreen:function(){var t=document.querySelector("iframe");document.vid?document.exitFullscreen&&document.exitFullscreen():t.requestFullscreen()}},module.exports=r,module.exports.formatTime=a});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "vimeoplaylist",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Create endless video playlists with the Vimeo Player API, with ",
@@ -39,3 +39,3 @@ "repository": {
     "demo:start": "parcel ./demo/src/index.html --dist-dir ./demo/dist",
-    "demo:build": "parcel build  --no-minify ./demo/src/index.html --dist-dir ./demo/dist --public-url ./",
+    "demo:build": "parcel build ./demo/src/index.html --dist-dir ./demo/dist --public-url ./",
     "demo:deploy": "npm run demo:build && gh-pages -d ./demo/dist",
@@ -54,4 +54,4 @@ "demo:clean": "rm -rf ./demo/dist",
     "microbundle": "^0.14.2",
-    "parcel": "^2.3.2"
+    "parcel": "^2.4.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

116982

increased by1.07%

Lines of code

98

increased by2.08%

No dependency changes