added videoplaylist

4 files changed, 132 insertions, 1 deletions

diff --git a/dist/css/style.css b/dist/css/style.css
index e750b99..e395717 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -115,6 +115,20 @@ video {
   display: table;
 }
 
+.play-menu {
+  height: 200px;
+  overflow-y: auto;
+}
+
+.play-menu a {
+  color: white;
+}
+
+.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 188affc..d68ee4b 100644
--- a/dist/css/style.min.css
+++ b/dist/css/style.min.css
@@ -4,4 +4,4 @@
  * Author: jesus e.
  * Version: 1.0.1
  * 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}.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}.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.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}}
diff --git a/post.html b/post.html
index e777fb3..ef0833c 100644
--- a/post.html
+++ b/post.html
@@ -8,6 +8,7 @@
         <!-- stylesheets -->
         <link rel="stylesheet" href="dist/css/bulma.css">
         <link rel="stylesheet" href="dist/css/style.css">
+
     </head>
     <body>
         <!-- navigation -->
@@ -93,6 +94,50 @@
                                         <div class="card-content-text has-text-justified">
                                             <p> Phasellus bibendum lectus magna, vitae sagittis orci feugiat non. Aenean varius diam vel nunc tincidunt congue. In hendrerit nulla quis justo hendrerit placerat. Aliquam volutpat nisl id nulla scelerisque, et dictum metus interdum. Integer hendrerit pellentesque velit, efficitur dapibus enim efficitur nec. Integer quis imperdiet nulla, in commodo lectus. Nunc vitae diam accumsan, rutrum urna vitae, ultricies velit. Vivamus rhoncus volutpat quam, id iaculis erat placerat vitae. Proin vehicula sodales odio, et dignissim turpis aliquet vel.</p>
                                             <p>Donec id nulla mauris. Suspendisse auctor felis id orci pulvinar, quis ultricies enim porttitor. Maecenas posuere, metus nec luctus interdum, sapien velit faucibus turpis, in cursus magna nulla vitae elit. Phasellus eleifend nulla eu facilisis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla at ex et orci rutrum venenatis et gravida elit. Phasellus fermentum, metus vel euismod finibus, velit arcu euismod ipsum, vitae dapibus ipsum magna sit amet elit. In vestibulum, urna ut fringilla mollis, augue turpis laoreet metus, id placerat quam odio vel justo. Phasellus a lectus et felis porta tempor. </p>
+
+                                            <video id="video" class="player-ply" playsinline controls poster='https://conocimientoslibres.tuxfamily.org/en/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'>
+                                                <source src="https://archive.org/download/hyperbola-video-1/Hyperbola%20Base%20%2B%20Usuario%201%E2%81%846.webm" type="video/webm"/>
+                                                <p>Lo siento, tu navegador no soporta vídeo en HTML5. Por favor, cambia o actualiza tu navegador web</p>
+                                            </video>
+
+                                            <aside class="menu">
+                                                <p>
+                                                    Curso de Instalación de Hyperbola
+                                                </p>
+                                                <ul id="playlist" class="menu-list play-menu">
+                                                    <li class="is-active-play">
+                                                        <a href="https://archive.org/download/hyperbola-video-1/Hyperbola%20Base%20%2B%20Usuario%201%E2%81%846.webm">
+                                                            Hyperbola [Base + Usuario] 1⁄6 | Time: 1:06:45
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="https://archive.org/download/hyperbola-video-2/Hyperbola%20Xorg%202%E2%81%846.webm">
+                                                            Hyperbola [Xorg] 2⁄6 | Time: 23:38
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="https://archive.org/download/hyperbola_20180527/Hyperbola%20XFCE%203%E2%81%846.webm">
+                                                            Hyperbola [XFCE] 3⁄6 | Time: 20:06
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="https://archive.org/download/hyperbola_20180527_2333/Hyperbola%20Fixed%20Idioma%204%E2%81%84%E2%81%846.webm">
+                                                            Hyperbola [Fixed Idioma] 4⁄6 | Time: 6:31
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="https://archive.org/download/hyperbola-video-5/Hyperbola%20Gestor%20de%20Inicio%20de%20Sesi%C3%B3n%20SLIM%205%E2%81%846.webm">
+                                                            Hyperbola [Gestor de Inicio de Sesión SLIM] 5⁄6 | Time: 7:23
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a href="https://archive.org/download/hyperbola-video-6/Hyperbola%20-%20Utilidades%206%E2%81%846.webm">
+                                                            Hyperbola [Utilidades] 6⁄6 | Time: 34:14
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </aside>
+
                                         </div>
                                         <!-- end of post text -->
 
@@ -350,5 +395,64 @@
         <!-- navbar-burger -->
         <script src="dist/js/navbar-burger.js"></script>
         <!-- end of navbar-burger -->
+
+        <!-- playlist -->
+        <script>
+         init();
+
+         function init(){
+             var video = document.getElementById('video');
+             var playlist = document.getElementById('playlist');
+             var tracks = playlist.getElementsByTagName('a');
+             video.volume = 0.50;
+
+             //Agregamos los eventos a los links que nos permitirán cambiar de canción
+             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 la siguiente canción en la lista
+             //si la canción es la ultima reproducir la primera otra vez
+             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;
+             //quitar 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");
+             }
+
+             //agregar active a este elemento
+             parent.classList.add("is-active-play");
+
+             //tocar la cancion
+             video.src = song;
+             video.load();
+             video.play();
+         }
+        </script>
+        <!-- /playlist -->
     </body>
 </html>
diff --git a/src/scss/custom/_elements.scss b/src/scss/custom/_elements.scss
index 02c8871..24322f0 100644
--- a/src/scss/custom/_elements.scss
+++ b/src/scss/custom/_elements.scss
@@ -28,3 +28,16 @@ video {
 .is-table {
     display: table;
 }
+
+// playlist
+.play-menu {
+    height: 200px; //enabled scroll
+    overflow-y: auto;
+}
+.play-menu a {
+    color: white;
+}
+.is-active-play {
+    color: #dd7325;
+    background-color: #dd7325;
+}