vimeoplaylist - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/VimeoPlaylist.js

@@ -1,1 +0,1 @@
-function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var e=t(require("@vimeo/player")),i=t(require("node-fetch"));function s(t){return!!document.body.contains(document.querySelector(t))}function l(t,i){i=i||{},Object.assign(this,l.defaults,i),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 e(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}))}l.prototype={constructor:l,hasPlayerId:function(t){return!s(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),s("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,e=0;this.playlist.forEach(function(s){i("https://vimeo.com/api/v2/video/"+s.id+".json").then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(i){e++;var s,l,n,a,o,r,c,u,d,h=(o=(a=i[0]).duration,d=[r=Math.floor(o/3600),(c=Math.floor(o%3600/60))>9?c:r?"0"+c:c||"0",(u=o%60)>9?u:"0"+u].filter(Boolean).join(":"),s='\n    <a class="plist-item__link" data-vimeo-id="'+a.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+a.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">'+a.title+'</span>\n        <span class="plist-item__user">'+a.user_name+'</span>\n        <span class="plist-item__time-dur">'+d+'</span>\n        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  ',l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput&&t.playlistOutput.appendChild(h),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.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;s("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),s("#"+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()}},l.defaults={width:900,loop:!1,title:!1,muted:!1,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!1,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[]},module.exports=l;
+function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var e=t(require("@vimeo/player")),i=t(require("node-fetch"));function s(t){return!!document.body.contains(document.querySelector(t))}function l(t,i){i=i||{},Object.assign(this,l.defaults,i),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 e(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}))}l.prototype={constructor:l,hasPlayerId:function(t){return!!s("#"+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),s("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,e=0;this.playlist.forEach(function(s){i("https://vimeo.com/api/v2/video/"+s.id+".json").then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(i){e++;var s,l,n,a,o,r,c,u,d,h=(o=(a=i[0]).duration,d=[r=Math.floor(o/3600),(c=Math.floor(o%3600/60))>9?c:r?"0"+c:c||"0",(u=o%60)>9?u:"0"+u].filter(Boolean).join(":"),s='\n    <a class="plist-item__link" data-vimeo-id="'+a.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+a.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">'+a.title+'</span>\n        <span class="plist-item__user">'+a.user_name+'</span>\n        <span class="plist-item__time-dur">'+d+'</span>\n        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  ',l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(h):console.warn("VimeoPlaylist: Yo, 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.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;s("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),s("#"+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()}},l.defaults={width:900,loop:!1,title:!1,muted:!1,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:[]},module.exports=l;

dist/VimeoPlaylist.modern.js

@@ -1,1 +0,1 @@
-import t from"@vimeo/player";import e from"node-fetch";function s(t){return!!document.body.contains(document.querySelector(t))}function i(e,s){s=s||{},Object.assign(this,i.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}))}i.prototype={constructor:i,hasPlayerId:t=>!s(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),s("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",t=>{t.preventDefault(),this.toggleFullscreen()})},buildPlaylist(){let t=0;this.playlist.forEach(s=>{e("https://vimeo.com/api/v2/video/"+s.id+".json").then(t=>t.json()).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}(function(t){let e=function(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(":")}(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        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  `}(e[0]));if(this.playlistOutput&&this.playlistOutput.appendChild(s),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.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(){s("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",t=>{t.preventDefault(),this.prev()}),s("#"+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()}},i.defaults={width:900,loop:!1,title:!1,muted:!1,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!1,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[]};export default i;
+import t from"@vimeo/player";import e from"node-fetch";function s(t){return!!document.body.contains(document.querySelector(t))}function i(e,s){s=s||{},Object.assign(this,i.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}))}i.prototype={constructor:i,hasPlayerId:t=>!!s("#"+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),s("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",t=>{t.preventDefault(),this.toggleFullscreen()})},buildPlaylist(){let t=0;this.playlist.forEach(s=>{e("https://vimeo.com/api/v2/video/"+s.id+".json").then(t=>t.json()).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}(function(t){let e=function(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(":")}(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        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  `}(e[0]));if(this.playlistOutput?this.playlistOutput.appendChild(s):console.warn("VimeoPlaylist: Yo, 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.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(){s("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",t=>{t.preventDefault(),this.prev()}),s("#"+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()}},i.defaults={width:900,loop:!1,title:!1,muted:!1,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:[]};export default i;

dist/VimeoPlaylist.module.js

@@ -1,1 +0,1 @@
-import t from"@vimeo/player";import e from"node-fetch";function i(t){return!!document.body.contains(document.querySelector(t))}function s(e,i){i=i||{},Object.assign(this,s.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}))}s.prototype={constructor:s,hasPlayerId:function(t){return!i(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),i("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,i=0;this.playlist.forEach(function(s){e("https://vimeo.com/api/v2/video/"+s.id+".json").then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(e){i++;var s,l,n,a,o,r,c,u,d,h=(o=(a=e[0]).duration,d=[r=Math.floor(o/3600),(c=Math.floor(o%3600/60))>9?c:r?"0"+c:c||"0",(u=o%60)>9?u:"0"+u].filter(Boolean).join(":"),s='\n    <a class="plist-item__link" data-vimeo-id="'+a.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+a.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">'+a.title+'</span>\n        <span class="plist-item__user">'+a.user_name+'</span>\n        <span class="plist-item__time-dur">'+d+'</span>\n        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  ',l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput&&t.playlistOutput.appendChild(h),i===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.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;i("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),i("#"+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()}},s.defaults={width:900,loop:!1,title:!1,muted:!1,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!1,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[]};export default s;
+import t from"@vimeo/player";import e from"node-fetch";function i(t){return!!document.body.contains(document.querySelector(t))}function s(e,i){i=i||{},Object.assign(this,s.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}))}s.prototype={constructor:s,hasPlayerId:function(t){return!!i("#"+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),i("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,i=0;this.playlist.forEach(function(s){e("https://vimeo.com/api/v2/video/"+s.id+".json").then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(e){i++;var s,l,n,a,o,r,c,u,d,h=(o=(a=e[0]).duration,d=[r=Math.floor(o/3600),(c=Math.floor(o%3600/60))>9?c:r?"0"+c:c||"0",(u=o%60)>9?u:"0"+u].filter(Boolean).join(":"),s='\n    <a class="plist-item__link" data-vimeo-id="'+a.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+a.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">'+a.title+'</span>\n        <span class="plist-item__user">'+a.user_name+'</span>\n        <span class="plist-item__time-dur">'+d+'</span>\n        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  ',l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(h):console.warn("VimeoPlaylist: Yo, provide a valid playlist id"),i===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.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;i("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),i("#"+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()}},s.defaults={width:900,loop:!1,title:!1,muted:!1,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:[]};export default s;

dist/VimeoPlaylist.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@vimeo/player"),require("node-fetch")):"function"==typeof define&&define.amd?define(["@vimeo/player","node-fetch"],e):(t=t||self).vimeoplaylist=e(t.Player,t.nodeFetch)}(this,function(t,e){function i(t){return!!document.body.contains(document.querySelector(t))}function s(e,i){i=i||{},Object.assign(this,s.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}))}return t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,s.prototype={constructor:s,hasPlayerId:function(t){return!i(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),i("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,i=0;this.playlist.forEach(function(s){e("https://vimeo.com/api/v2/video/"+s.id+".json").then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(e){i++;var s,l,n,a,o,r,c,u,d,h=(o=(a=e[0]).duration,d=[r=Math.floor(o/3600),(c=Math.floor(o%3600/60))>9?c:r?"0"+c:c||"0",(u=o%60)>9?u:"0"+u].filter(Boolean).join(":"),s='\n    <a class="plist-item__link" data-vimeo-id="'+a.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+a.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">'+a.title+'</span>\n        <span class="plist-item__user">'+a.user_name+'</span>\n        <span class="plist-item__time-dur">'+d+'</span>\n        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  ',l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput&&t.playlistOutput.appendChild(h),i===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.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;i("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),i("#"+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()}},s.defaults={width:900,loop:!1,title:!1,muted:!1,controls:!0,autoplay:!0,color:"#7B8EF9",fullscreenToggle:"#js-vp-fstoggle",fullscreenToggleKeyCode:"Digit1",hasPlaylist:!1,playlistOutput:"#js-vp-playlist",playlistNavNext:"#js-vp-next",playlistNavPrev:"#js-vp-prev",playlist:[]},s});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@vimeo/player"),require("node-fetch")):"function"==typeof define&&define.amd?define(["@vimeo/player","node-fetch"],e):(t=t||self).vimeoplaylist=e(t.Player,t.nodeFetch)}(this,function(t,e){function i(t){return!!document.body.contains(document.querySelector(t))}function s(e,i){i=i||{},Object.assign(this,s.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}))}return t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,s.prototype={constructor:s,hasPlayerId:function(t){return!!i("#"+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),i("#"+this.fullscreenToggle.id)&&this.fullscreenToggle.addEventListener("click",function(e){e.preventDefault(),t.toggleFullscreen()})},buildPlaylist:function(){var t=this,i=0;this.playlist.forEach(function(s){e("https://vimeo.com/api/v2/video/"+s.id+".json").then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.log("failed",t)}).then(function(e){i++;var s,l,n,a,o,r,c,u,d,h=(o=(a=e[0]).duration,d=[r=Math.floor(o/3600),(c=Math.floor(o%3600/60))>9?c:r?"0"+c:c||"0",(u=o%60)>9?u:"0"+u].filter(Boolean).join(":"),s='\n    <a class="plist-item__link" data-vimeo-id="'+a.id+'" tabindex="0">\n      <figure class="plist-item__thumb">\n        <div class="plist-item__thumb-color">\n          <img class="plist-item__thumb-img" src="'+a.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">'+a.title+'</span>\n        <span class="plist-item__user">'+a.user_name+'</span>\n        <span class="plist-item__time-dur">'+d+'</span>\n        <div class="equalizer">\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n          <span class="equalizer__item"></span>\n        </div>\n      </div>\n    </a>\n  ',l=document.createDocumentFragment(),(n=document.createElement("article")).className+="plist-item",n.innerHTML=s,l.appendChild(n),n);if(t.playlistOutput?t.playlistOutput.appendChild(h):console.warn("VimeoPlaylist: Yo, provide a valid playlist id"),i===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.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;i("#"+this.playlistNavPrev.id)&&this.playlistNavPrev.addEventListener("click",function(e){e.preventDefault(),t.prev()}),i("#"+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()}},s.defaults={width:900,loop:!1,title:!1,muted:!1,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:[]},s});

package.json

 {
   "name": "vimeoplaylist",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Create endless video playlists with the Vimeo Player API.",
@@ -5,0 +5,0 @@ "repository": {

readme.md

 # 📼 VimeoPlaylist!
 
-A JS lib using the Vimeo Player API to create a playlist of Vimeo Vids (from Vimeo IDs)
-Features UI for playlist items, continuous `autoplay`, playlist navigation, and other _maybe_ useful options.
+A JS lib using the Vimeo Player API to create a playlist of Vimeo Vids (from Vimeo IDs).
 
+Features
+- Playlist built with array of Vimeo IDs or external JSON file
+- UI for playlist items
+- Output of Player, Playlist, Playlist Nav, Fullscreen Toggle conforms to your markup/setup
+- Continuous `autoplay` of playlist items
+- Equalizer animation when playing
+- Playlist navigation,
+- Fullscreen API control
+- Vimeo API options like `width`, `color`, `player controls`, `muted`, `title`
+- and other _maybe_ useful options.
+
+
 [Live Demo of Vimeo Playlists→](https://stephenscaff.github.io/vimeo-playlists/)
 
 
+
 ## 📦 Dependencies
 
-- `@vimeo/player`(derp)
+- `@vimeo/player`(derps)
 
 
+## Quickstart
 
-## 🤖 Commands
-
 **Install from NPM**
@@ -22,2 +33,45 @@
 
+**JS**
+```
+import VimeoPlaylist form 'vimeoplaylist'
+
+// Plugin Options (with internal data array)
+let options = {
+  hasPlaylist: true,
+  color: '#6c77f7',
+  playlist: [
+    { "id": "288588748" },
+    { "id": "328536852" },
+    { "id": "281449879" }
+  ]
+}
+
+// Init on #js-player
+let vids = new VimeoPlaylist('js-player', options).init()
+```
+
+**Markup**
+```
+<!-- Player -->
+<div class="player">
+  <div id="js-vp-player" class="player__vid"></div>
+</div>
+
+<!-- Playlist Nav -->
+<nav class="playlist-nav">
+  <button id="js-vp-prev" class="playlist-nav__prev"><i>←</i> Prev</button>
+  <button id="js-vp-next" class="playlist-nav__next">Next <i>→</i></button>
+</nav>
+
+<!-- Playlist -->
+<div id="js-vp-playlist" class=""playlist>
+```
+
+**Styles**
+Wanted to keep the concerns seperate,, but see the `demo` project for some bsic styles/scss if you don't wanna hand roll your own.
+
+
+## 🤖 Project Commands
+
+
 **Install Project Deps**
@@ -60,49 +114,27 @@
 
+### Usage - Data as External JSON File (with Babel or Parcel)
 
-## 🔌 Usage
-
-**Import**
-
 ```
 import VimeoPlaylist from 'vimeoplaylist'
+import data from '../data/playlist.json'
 
-/**
- * Options
- * Internal playlist as array of objects { "id" : <vimeoid> }
- */
-VimeoPlaylist.options = {
-  width: 1200,
-  muted: true,
+let options = {
+  playlist: data,
+  hasPlaylist: true,
+  playlistOutput: '#js-playlist',
+  muted: false,
   controls: true,
-  autoplay: true,
-  color: '#7B8EF9',
-  fullscreenToggle: true,
-  playlistOutput: '#js-vp-playlist',
-  playlist: [
-    { "id": "288588748" },
-    { "id": "328536852" },
-    { "id": "281449879" }
-  ]
+  color: '#6c77f7',
+  fullscreenToggle: '#js-vp-fstoggle',
+  fullscreenToggleKeyCode: 'Digit1'
 }
 
-// Init
-let vids = new VimeoPlaylist('js-vp-player', options).init()
+let vids = new VimeoPlaylist('js-player', options).init()
 ```
 
-**Markup**
+### Usage - Data as External JSON File (with `Request()`)
 
 ```
-<!-- Player (main video embed)-->
-<div id="js-vp-player"></div>
+import VimeoPlaylist from 'vimeoplaylist'
 
-<!-- Playlist (list of vids) -->
-<div id="js-playlist"></div>
-```
-
-
-### Usage - External JSON File
-
-```
-import VimeoPlaylist from './vimeo-playlist.js'
-
 /**
@@ -118,4 +150,5 @@ * Init VimeoPlaylist class
     let options = {
-      playlist: data, // Hey data!
-      muted: true,
+      playlist: data,
+      hasPlaylist: true,
+      playlistOutput: '#js-playlist',
       controls: true // etc...
@@ -143,46 +176,71 @@ }
 
+## Usage - Data as array of IDs
 
+```
+import VimeoPlaylist form 'vimeoplaylist'
 
-### Playlist Template Markup
+// Plugin Options (with internal data array)
+let options = {
+  color: '#6c77f7',
+  hasPlaylist: true,
+  playlistOutput: '#js-vp-playlist',
+  playlist: [
+    { "id": "288588748" },
+    { "id": "328536852" },
+    { "id": "281449879" }
+  ]
+}
 
+// Init on #js-player
+let vids = new VimeoPlaylist('js-player', options).init()
+```
+
+**Markup**
+
+```
+<!-- Player (main video embed)-->
+<div id="js-vp-player"></div>
+
+<!-- Playlist (list of vids) -->
+<div id="js-vp-playlist"></div>
+
+<!-- Playlist Nav -->
+<nav class="playlist-nav">
+  <button id="js-vp-prev" class="playlist-nav__prev"><i>←</i> Prev</button>
+  <button id="js-vp-next" class="playlist-nav__next">Next <i>→</i></button>
+</nav>
+```
+
+### Playlist Template
+
 `src/plist.tmpl.js` contains the markup for playlist items.
+It looks like this:
 
 ```
-/**
- * plistTemplate
- * Markup template for playlist items
- * Wrapping <article='plist-item'> added via doc frag helperss
- * @param {obj} data - response object of video info from vimeo promise
- * @return {string} returns template literal
- */
-export default function plistItemTemplate(data) {
-  let timeDuration = formatTime(data.duration)
-
-  return `
-    <a class="plist-item__link" data-vimeo-id="${data.id}" tabindex="0">
-      <figure class="plist-item__thumb">
-        <div class="plist-item__thumb-color">
-          <img class="plist-item__thumb-img" src="${data.thumbnail_large}"/>
-          <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">
-            <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>
-          </svg>
-        </div>
-      </figure>
-      <div class="plist-item__main">
-        <span class="plist-item__title">${data.title}</span>
-        <span class="plist-item__user">${data.user_name}</span>
-        <span class="plist-item__time-dur">${timeDuration}</span>
-        <div class="equalizer">
-          <span class="equalizer__item"></span>
-          <span class="equalizer__item"></span>
-          <span class="equalizer__item"></span>
-        </div>
+<article='plist-item'>
+  <a class="plist-item__link" data-vimeo-id="${data.id}" tabindex="0">
+    <figure class="plist-item__thumb">
+      <div class="plist-item__thumb-color">
+        <img class="plist-item__thumb-img" src="${data.thumbnail_large}"/>
+        <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">
+          <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>
+        </svg>
       </div>
-    </a>
-  `
-}
+    </figure>
+    <div class="plist-item__main">
+      <span class="plist-item__title">${data.title}</span>
+      <span class="plist-item__user">${data.user_name}</span>
+      <span class="plist-item__time-dur">${timeDuration}</span>
+      <div class="equalizer">
+        <span class="equalizer__item"></span>
+        <span class="equalizer__item"></span>
+        <span class="equalizer__item"></span>
+      </div>
+    </div>
+  </a>
+</article>
 ```
 
 When related Vid is playing, the playlist item rocks an `is-playing` class.
-Again, see the demo project/folder for some styles if you don't want to hand-roll your own from scratch.
+Again, see the `demo` project/folder for some `scss` styles if you don't want to hand-roll your own from scratch.
 
@@ -261,1 +319,2 @@
 - Option for custom playlist template
+- Perhaps support for multiple instances per page, with everything scoped to element.

No alert changes

Improved metrics

Total package byte prevSize

34291

increased by5.65%

Lines of code

91

increased by1.11%

Number of lines in readme file

316

increased by22.96%

No dependency changes