7 files changed, 130 insertions, 20 deletions
diff --git a/dist/css/aplaylist.css b/dist/css/aplaylist.css
new file mode 100644
index 0000000..ec66e61
--- /dev/null
+++ b/dist/css/aplaylist.css
@@ -0,0 +1,18 @@
+.play-menu {
+  height: 200px;
+  overflow-y: auto;
+}
+
+.play-menu a {
+  color: white;
+}
+
+.play-menu a:hover {
+  background-color: #484848;
+  color: #fff;
+}
+
+.is-active-play {
+  color: #dd7325;
+  background-color: #dd7325;
+}
diff --git a/dist/css/aplaylist.min.css b/dist/css/aplaylist.min.css
new file mode 100644
index 0000000..af6aef6
--- /dev/null
+++ b/dist/css/aplaylist.min.css
@@ -0,0 +1 @@
+.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.play-menu a:hover{background-color:#484848;color:#fff}.is-active-play{color:#dd7325;background-color:#dd7325}
diff --git a/dist/css/playlist.css b/dist/css/playlist.css
new file mode 100644
index 0000000..b3c0339
--- /dev/null
+++ b/dist/css/playlist.css
@@ -0,0 +1,52 @@
+/*!
+ * Author: jesus e.
+ * Version: 1.0.0
+ * Licensed GPLv3 or later (https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+.single-play-menu {
+  height: 320px;
+  overflow-y: auto;
+}
+
+@media (min-width: 1920px) and (min-height: 900px) {
+  .single-play-menu {
+    height: 380px;
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .single-play-menu {
+    height: 320px;
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 980px) {
+  .single-play-menu {
+    height: 250px;
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 800px) {
+  .single-play-menu {
+    height: 190px;
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 768px) {
+  .single-play-menu {
+    height: 350px;
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 360px) {
+  .single-play-menu {
+    height: 150px;
+    overflow-y: auto;
+  }
+}
+@media screen and (max-width: 320px) {
+  .single-play-menu {
+    height: 120px;
+    overflow-y: auto;
+  }
+}
diff --git a/dist/css/playlist.min.css b/dist/css/playlist.min.css
new file mode 100644
index 0000000..6a15956
--- /dev/null
+++ b/dist/css/playlist.min.css
@@ -0,0 +1,5 @@
+/*!
+ * Author: jesus e.
+ * Version: 1.0.0
+ * Licensed GPLv3 or later (https://www.gnu.org/licenses/gpl-3.0.txt)
+ */.single-play-menu{height:320px;overflow-y:auto}@media (min-width: 1920px) and (min-height: 900px){.single-play-menu{height:380px;overflow-y:auto}}@media screen and (max-width: 1280px){.single-play-menu{height:320px;overflow-y:auto}}@media screen and (max-width: 980px){.single-play-menu{height:250px;overflow-y:auto}}@media screen and (max-width: 800px){.single-play-menu{height:190px;overflow-y:auto}}@media screen and (max-width: 768px){.single-play-menu{height:350px;overflow-y:auto}}@media screen and (max-width: 360px){.single-play-menu{height:150px;overflow-y:auto}}@media screen and (max-width: 320px){.single-play-menu{height:120px;overflow-y:auto}}
diff --git a/dist/css/style.css b/dist/css/style.css
index 867eace..89acedf 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -115,25 +115,6 @@ video {
   display: table;
 }
 
-.play-menu {
-  height: 200px;
-  overflow-y: auto;
-}
-
-.play-menu a {
-  color: white;
-}
-
-.play-menu a:hover {
-  background-color: #484848;
-  color: #fff;
-}
-
-.is-active-play {
-  color: #dd7325;
-  background-color: #dd7325;
-}
-
 /* Colors Code */
 .highlight {
   background: #000000;
diff --git a/dist/css/style.min.css b/dist/css/style.min.css
index f085f80..1d207c9 100644
--- a/dist/css/style.min.css
+++ b/dist/css/style.min.css
@@ -4,4 +4,4 @@
  * Author: jesus e.
  * Version: 1.0.2
  * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE)
- */@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../fonts/roboto/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body,input,textarea,.button{font-family:'Roboto Condensed', Nimbus Sans, sans-serif}#navbar-toggle-cbox{display:none}label[for=navbar-toggle-cbox]{cursor:pointer}#navbar-toggle-cbox:checked ~ .navbar-menu{display:block}.navbar{background-color:#0c0f0f}.navbar a{color:whitesmoke}.navbar.is-social-center{align-items:stretch;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-left:auto;margin-right:auto;-webkit-box-align:stretch;-webkit-box-pack:center;-webkit-box-flex:0;-ms-flex-pack:center;-ms-flex-align:stretch;-ms-flex-negative:0;-ms-flex-positive:0}.navbar.is-social-center>a.navbar-item{color:#4a4a4a;background-color:transparent}.navbar.is-social-center>a.navbar-item:hover{color:#dd7325}.main-header{box-shadow:0 2px 3px rgba(10,10,10,0.1)}.main-header .title{color:whitesmoke}.main-header .subtitle{color:#dd7325}.main-header .hero{background-color:#161c1c}code{background-color:#282828;color:#73d1ed}li{color:white}pre{background-color:#282828;color:#78dcfa}strong{color:white}video{width:100%;height:auto}.is-cyan{color:#0dd3ff}.is-table{display:table}.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.play-menu a:hover{background-color:#484848;color:#fff}.is-active-play{color:#dd7325;background-color:#dd7325}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#cd0000}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#cd0000}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}.soumaicon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:.8rem;height:.8rem;fill:currentcolor}.soumaicon:hover svg{fill:#dd7325}.main-content{background-color:#363636;padding:1rem 1.5rem}.card{background-color:#161c1c}.card .card-content-footer{color:#7a7a7a}.card-content-footer i{padding-right:10px;padding-top:2px}.card-content-header,.comments-header{background-color:#dd7325;padding:10px;box-shadow:0 2px 3px rgba(10,10,10,0.1)}.card-content-header .title,.card-content-header a{color:whitesmoke}.card-inner-wrapper{padding:25px}.card-content-text{padding-bottom:30px;border-bottom:1px solid #dd7325}.card-content-text p{color:whitesmoke;font-size:1em}.card-content-text label{color:whitesmoke;font-weight:100}.card-content-nav{padding-top:10px}.card-content-footer{padding-top:15px;padding-bottom:15px}.card-content-footer-small{padding-top:20px;margin-bottom:-25px}.card-content-footer-cols{padding-top:20px;margin-bottom:-20px}.card-content-form{padding-top:20px}.content blockquote{background:black;color:white;border-left:4px solid #dbdbdb;margin:1.5rem 1rem;padding:1.5rem 1rem}.content blockquote p{display:contents}.content blockquote:before{opacity:0.5;content:open-quote;font-size:4rem;line-height:.1em;margin-right:.25em;vertical-align:-0.4em}*{box-sizing:border-box}*:after,*:before{box-sizing:border-box}legend{box-sizing:border-box}.content dl,.content dt,.content dd,.content h2,.content h3,.content h4,.content h5,.content h6{color:white}.content.social{margin-bottom:0rem}a{color:#0099e5}a:hover{text-decoration:none;color:#ffc20e}a.navbar-item.is-tab.is-active{border-bottom-color:#dd7325;border-width:2px;color:whitesmoke}a.navbar-item.is-tab:hover{border-bottom-color:#dd7325;border-width:2px;color:#dd7325}a.navbar-item:hover{color:#dd7325;background-color:transparent}a.pagination-previous.disabled,a.pagination-next.disabled{background:#0c0f0f;color:white;cursor:not-allowed;border-color:#dbdbdb;box-shadow:none;color:#7a7a7a;opacity:.5}.pagination-list{margin-bottom:1.5rem}h4>a:hover{color:white}.is-button-grey,.pagination-link{background-color:#7a7a7a;border-color:transparent;color:rgba(0,0,0,0.7)}.button:hover,.pagination .is-current,.pagination-link:hover{background-color:#dd7325;border-color:transparent;color:whitesmoke}.button:focus{box-shadow:none;border-color:transparent}.comments-content{background-color:#161c1c;padding-bottom:10px}.pagination-style-custom{padding-top:50px}.footer{background-color:#0c0f0f;color:whitesmoke}.footer a{color:#dd7325}.footer-top-shadow{box-shadow:0 1px 3px rgba(10,10,10,0.1)}.comments-wrapper{padding:25px}.comments-header .title{color:whitesmoke}.comments-wrapper p{color:whitesmoke}.comments-wrapper small{color:#7a7a7a}.comments-wrapper strong{color:whitesmoke;font-weight:100}.comments-wrapper a{color:#dd7325}.comments-wrapper .media .media,.comments-wrapper .media+.media{border-top:1px solid #dd7325}@media screen and (max-width: 1087px){.navbar-menu{background-color:transparent}}@media screen and (max-width: 600px){.main-content{padding:0rem}}
+ */@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../fonts/roboto/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body,input,textarea,.button{font-family:'Roboto Condensed', Nimbus Sans, sans-serif}#navbar-toggle-cbox{display:none}label[for=navbar-toggle-cbox]{cursor:pointer}#navbar-toggle-cbox:checked ~ .navbar-menu{display:block}.navbar{background-color:#0c0f0f}.navbar a{color:whitesmoke}.navbar.is-social-center{align-items:stretch;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-left:auto;margin-right:auto;-webkit-box-align:stretch;-webkit-box-pack:center;-webkit-box-flex:0;-ms-flex-pack:center;-ms-flex-align:stretch;-ms-flex-negative:0;-ms-flex-positive:0}.navbar.is-social-center>a.navbar-item{color:#4a4a4a;background-color:transparent}.navbar.is-social-center>a.navbar-item:hover{color:#dd7325}.main-header{box-shadow:0 2px 3px rgba(10,10,10,0.1)}.main-header .title{color:whitesmoke}.main-header .subtitle{color:#dd7325}.main-header .hero{background-color:#161c1c}code{background-color:#282828;color:#73d1ed}li{color:white}pre{background-color:#282828;color:#78dcfa}strong{color:white}video{width:100%;height:auto}.is-cyan{color:#0dd3ff}.is-table{display:table}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#cd0000}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#cd0000}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}.soumaicon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:.8rem;height:.8rem;fill:currentcolor}.soumaicon:hover svg{fill:#dd7325}.main-content{background-color:#363636;padding:1rem 1.5rem}.card{background-color:#161c1c}.card .card-content-footer{color:#7a7a7a}.card-content-footer i{padding-right:10px;padding-top:2px}.card-content-header,.comments-header{background-color:#dd7325;padding:10px;box-shadow:0 2px 3px rgba(10,10,10,0.1)}.card-content-header .title,.card-content-header a{color:whitesmoke}.card-inner-wrapper{padding:25px}.card-content-text{padding-bottom:30px;border-bottom:1px solid #dd7325}.card-content-text p{color:whitesmoke;font-size:1em}.card-content-text label{color:whitesmoke;font-weight:100}.card-content-nav{padding-top:10px}.card-content-footer{padding-top:15px;padding-bottom:15px}.card-content-footer-small{padding-top:20px;margin-bottom:-25px}.card-content-footer-cols{padding-top:20px;margin-bottom:-20px}.card-content-form{padding-top:20px}.content blockquote{background:black;color:white;border-left:4px solid #dbdbdb;margin:1.5rem 1rem;padding:1.5rem 1rem}.content blockquote p{display:contents}.content blockquote:before{opacity:0.5;content:open-quote;font-size:4rem;line-height:.1em;margin-right:.25em;vertical-align:-0.4em}*{box-sizing:border-box}*:after,*:before{box-sizing:border-box}legend{box-sizing:border-box}.content dl,.content dt,.content dd,.content h2,.content h3,.content h4,.content h5,.content h6{color:white}.content.social{margin-bottom:0rem}a{color:#0099e5}a:hover{text-decoration:none;color:#ffc20e}a.navbar-item.is-tab.is-active{border-bottom-color:#dd7325;border-width:2px;color:whitesmoke}a.navbar-item.is-tab:hover{border-bottom-color:#dd7325;border-width:2px;color:#dd7325}a.navbar-item:hover{color:#dd7325;background-color:transparent}a.pagination-previous.disabled,a.pagination-next.disabled{background:#0c0f0f;color:white;cursor:not-allowed;border-color:#dbdbdb;box-shadow:none;color:#7a7a7a;opacity:.5}.pagination-list{margin-bottom:1.5rem}h4>a:hover{color:white}.is-button-grey,.pagination-link{background-color:#7a7a7a;border-color:transparent;color:rgba(0,0,0,0.7)}.button:hover,.pagination .is-current,.pagination-link:hover{background-color:#dd7325;border-color:transparent;color:whitesmoke}.button:focus{box-shadow:none;border-color:transparent}.comments-content{background-color:#161c1c;padding-bottom:10px}.pagination-style-custom{padding-top:50px}.footer{background-color:#0c0f0f;color:whitesmoke}.footer a{color:#dd7325}.footer-top-shadow{box-shadow:0 1px 3px rgba(10,10,10,0.1)}.comments-wrapper{padding:25px}.comments-header .title{color:whitesmoke}.comments-wrapper p{color:whitesmoke}.comments-wrapper small{color:#7a7a7a}.comments-wrapper strong{color:whitesmoke;font-weight:100}.comments-wrapper a{color:#dd7325}.comments-wrapper .media .media,.comments-wrapper .media+.media{border-top:1px solid #dd7325}@media screen and (max-width: 1087px){.navbar-menu{background-color:transparent}}@media screen and (max-width: 600px){.main-content{padding:0rem}}
diff --git a/dist/js/aplaylist.js b/dist/js/aplaylist.js
new file mode 100644
index 0000000..1d88b62
--- /dev/null
+++ b/dist/js/aplaylist.js
@@ -0,0 +1,53 @@
+init();
+
+function init(){
+    var video = document.getElementById('video');
+    var playlist = document.getElementById('playlist');
+    var tracks = playlist.getElementsByTagName('a');
+    video.volume = 0.50;
+
+    //Cuenta los tracks
+    for(var track in tracks) {
+        var link = tracks[track];
+        if(typeof link === "function" || typeof link === "number") continue;
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            var song = this.getAttribute('href');
+            run(song, video, this);
+        });
+    }
+    //Agregamos evento para reproducir el siguiente items
+    video.addEventListener('ended',function(e) {
+        for(var track in tracks) {
+            var link = tracks[track];
+            var nextTrack = parseInt(track) + 1;
+            if(typeof link === "function" || typeof link === "number") continue;
+            if(!this.src) this.src = tracks[0];
+            if(track == (tracks.length - 1)) nextTrack = 0;
+            console.log(nextTrack);
+            if(link.getAttribute('href') === this.src) {
+                var nextLink = tracks[nextTrack];
+                run(nextLink.getAttribute('href'), video, nextLink);
+                break;
+            }
+        }
+    });
+}
+
+function run(song, video, link){
+    var parent = link.parentElement;
+    //Quita el active de todos los elementos de la lista
+    var items = parent.parentElement.getElementsByTagName('li');
+    for(var item in items) {
+        if(items[item].classList)
+            items[item].classList.remove("is-active-play");
+    }
+
+    //Agrega active a este elemento
+    parent.classList.add("is-active-play");
+
+    //Inicia la reproducción
+    video.src = song;
+    video.load();
+    video.play();
+}