added videoplaylist

2 files changed, 120 insertions, 42 deletions

diff --git a/cl-theme/static/css/style.css b/cl-theme/static/css/style.css
index 554424e..c5203c6 100644
--- a/cl-theme/static/css/style.css
+++ b/cl-theme/static/css/style.css
@@ -2,7 +2,7 @@
  * bulma css framework (github.com/jgthms | bulma.io)
  * Author: jeremy thomas
  * Author: jesus e.
- * Version: 1.0.1
+ * Version: 1.0.2
  * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE)
  */
 /* basic formatting changes (mostly to cater for darker colours) */
@@ -115,6 +115,25 @@ 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/content/curso-de-instalacion-de-hyperbola.md b/content/curso-de-instalacion-de-hyperbola.md
index b743f17..e77efd4 100644
--- a/content/curso-de-instalacion-de-hyperbola.md
+++ b/content/curso-de-instalacion-de-hyperbola.md
@@ -4,6 +4,7 @@ CSS: plyr/plyr.css
 Date: 2018-05-29 08:57
 Image: 2018/05/curso-hyperbola-gnu-linux.png
 JS: plyr/plyr.js (bottom)
+Lang: es
 Slug: curso-de-instalacion-de-hyperbola
 Tags: hyperbola, linux, linux-libre, parabola
 Title: Curso de Instalación de Hyperbola
@@ -14,52 +15,110 @@ una de las distros 100 % libres, el método de Instalación se basa
 en una guía de instalación, bien abajo se encuentra una lista
 de 6 vídeos:
 
-**Hyperbola [Base + Usuario] 1⁄6 | Time: 1:06:45**
-
-<video class="player-ply" playsinline controls poster='{static}/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 id="video" class="player-ply" playsinline controls poster='{static}/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>
 
-**Hyperbola [Xorg] 2⁄6 | Time: 23:38**
-
-<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-2.png'>
-  <source src="https://archive.org/download/hyperbola-video-2/Hyperbola%20Xorg%202%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>
-
-**Hyperbola [XFCE] 3⁄6 | Time: 20:06**
-
-<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-3.png'>
-  <source src="https://archive.org/download/hyperbola_20180527/Hyperbola%20XFCE%203%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>
-
-**Hyperbola [Fixed Idioma] 4⁄6 | Time: 6:31**
-
-<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-4.png'>
-  <source src="https://archive.org/download/hyperbola_20180527_2333/Hyperbola%20Fixed%20Idioma%204%E2%81%84%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>
-
-**Hyperbola [Gestor de Inicio de Sesión SLIM] 5⁄6 | Time: 7:23**
-
-<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-5.png'>
-  <source src="https://archive.org/download/hyperbola-video-5/Hyperbola%20Gestor%20de%20Inicio%20de%20Sesi%C3%B3n%20SLIM%205%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>
-
-**Hyperbola [Utilidades] 6⁄6 | Time: 34:14**
-
-<video class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-6.png'>
-  <source src="https://archive.org/download/hyperbola-video-6/Hyperbola%20-%20Utilidades%206%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>
-
-Y, bien hasta aquí ya es posible instalar Hyperbola GNU+Linux-Libre, de manera sencilla.
+## Lista de vídeos
+
+<aside class="menu">
+    <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>
+
+>Y, bien hasta aquí ya es posible instalar Hyperbola GNU+Linux-Libre, de manera sencilla.
 
 <!--Plyr-->
 <script src="{static}/vendor/js/play.js"></script>
 <!--EndPlyr-->
 
+<!-- playlist -->
+<script>
+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();
+}
+</script>
+<!-- /playlist -->
+
 [hypersite]: https://www.hyperbola.info/