move script playlist to file JS and fix support librejs

3 files changed, 60 insertions, 56 deletions

diff --git a/content/curso-de-instalacion-de-hyperbola.md b/content/curso-de-instalacion-de-hyperbola.md
index e77efd4..65b32ee 100644
--- a/content/curso-de-instalacion-de-hyperbola.md
+++ b/content/curso-de-instalacion-de-hyperbola.md
@@ -15,7 +15,7 @@ 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:
 
-<video id="video" class="player-ply" playsinline controls poster='{static}/wp-content/uploads/article/images/2018/05/curso-hyperbola-1.png'>
+<video id="videoplaylist" 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>
@@ -64,61 +64,7 @@ de 6 vídeos:
 <!--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>
+<script src="{static}/vendor/js/videoplaylist.js"></script>
 <!-- /playlist -->
 
 [hypersite]: https://www.hyperbola.info/
diff --git a/content/pages/libreJS.md b/content/pages/libreJS.md
index 9fda18e..e61c7b2 100644
--- a/content/pages/libreJS.md
+++ b/content/pages/libreJS.md
@@ -17,6 +17,11 @@ Title: LibreJS
         <td><a href="../vendor/js/play.js">play.js</a></td>
     </tr>
     <tr>
+        <td><a href="../vendor/js/videoplaylist.js">videoplaylist.js</a></td>
+        <td><a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL-3.0</a></td>
+        <td><a href="../vendor/js/videoplaylist.js">videoplaylist.js</a></td>
+    </tr>
+    <tr>
         <td><a href="../theme/js/navbar-burger.js">navbar-burger.js</a></td>
         <td><a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL-3.0</a></td>
         <td><a href="../theme/js/navbar-burger.js">navbar-burger.js</a></td>
diff --git a/content/vendor/js/videoplaylist.js b/content/vendor/js/videoplaylist.js
new file mode 100644
index 0000000..867b981
--- /dev/null
+++ b/content/vendor/js/videoplaylist.js
@@ -0,0 +1,53 @@
+init();
+
+function init(){
+    var video = document.getElementById('videoplaylist');
+    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();
+}