independent playlist with js and playlist without JS

6 files changed, 145 insertions, 19 deletions

diff --git a/src/js/aplaylist.js b/src/js/aplaylist.js
new file mode 100644
index 0000000..1d88b62
--- /dev/null
+++ b/src/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();
+}
diff --git a/src/scss/aplaylist/aplaylist.scss b/src/scss/aplaylist/aplaylist.scss
new file mode 100644
index 0000000..b0bb571
--- /dev/null
+++ b/src/scss/aplaylist/aplaylist.scss
@@ -0,0 +1,18 @@
+// playlist
+.play-menu {
+    height: 200px; //enabled scroll
+    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/src/scss/custom/_elements.scss b/src/scss/custom/_elements.scss
index 1086bae..02c8871 100644
--- a/src/scss/custom/_elements.scss
+++ b/src/scss/custom/_elements.scss
@@ -28,22 +28,3 @@ video {
 .is-table {
     display: table;
 }
-
-// playlist
-.play-menu {
-    height: 200px; //enabled scroll
-    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/src/scss/playlist/_main.scss b/src/scss/playlist/_main.scss
new file mode 100644
index 0000000..d6d6035
--- /dev/null
+++ b/src/scss/playlist/_main.scss
@@ -0,0 +1,5 @@
+// Single playlist
+.single-play-menu {
+    height: 320px; //enabled scroll
+    overflow-y: auto;
+}
diff --git a/src/scss/playlist/_mediaqueries.scss b/src/scss/playlist/_mediaqueries.scss
new file mode 100644
index 0000000..68b1063
--- /dev/null
+++ b/src/scss/playlist/_mediaqueries.scss
@@ -0,0 +1,57 @@
+// Single Playlist
+@media (min-width: 1920px) and  (min-height: 900px) {
+    // Single playlist
+    .single-play-menu {
+        height: 380px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    // Single playlist
+    .single-play-menu {
+        height: 320px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+
+@media screen and (max-width: 980px) {
+    // Single playlist
+    .single-play-menu {
+        height: 250px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    // Single playlist
+    .single-play-menu {
+        height: 190px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    // Single playlist
+    .single-play-menu {
+        height: 350px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    // Single playlist
+    .single-play-menu {
+        height: 150px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    // Single playlist
+    .single-play-menu {
+        height: 120px; //enabled scroll
+        overflow-y: auto;
+    }
+}
+// /Single PlayList
diff --git a/src/scss/playlist/playlist.scss b/src/scss/playlist/playlist.scss
new file mode 100644
index 0000000..6e80c43
--- /dev/null
+++ b/src/scss/playlist/playlist.scss
@@ -0,0 +1,12 @@
+@charset "utf-8";
+/*!
+ * Author: jesus e.
+ * Version: 1.0.0
+ * Licensed GPLv3 or later (https://www.gnu.org/licenses/gpl-3.0.txt)
+ */
+
+// _main.scss
+@import 'main';
+
+// Mediaqueries
+@import "mediaqueries";