Added empty playlist message

index.php

@@ -234,9 +234,6 @@
                 <li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li>
               </ul>
                 <div id="wrapper">
-                    <div id="preloader" class="progress channel_preloader">
-                        <div class="indeterminate"></div>
-                    </div>
                     <div id="list-song-html">
                         <div id="list-song" class="card left-align list-song">
                             <span class="clickable vote-container" title="Vote!">

static/css/style.css

@@ -582,6 +582,14 @@ hide mdi-action-visibility mdi-action-visibility-off
   float:left;
 }
 
+#empty-channel-message{
+  font-size:22px;
+  color:white;
+  font-weight:300;
+  position: relative;
+  top:20px;
+}
+
 .video-container{
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;

static/js/list.js

@@ -1,5 +1,7 @@
 var List = {
 
+    empty: false,
+
     channel_listener: function()
     {
     	socket.on("channel", function(msg){
@@ -38,6 +40,7 @@ var List = {
         List.sortList();
 		$("#wrapper").empty();
 
+        if(full_playlist.length > 1){
     		$.each(full_playlist, function(j, current_song){
     			if(!current_song.now_playing){ //check that the song isnt playing
                     $("#wrapper").append(List.generateSong(current_song, false, lazy_load, true));
@@ -48,6 +51,10 @@ var List = {
             if(lazy_load){
                 if(window.mobilecheck()) $(".list-image").lazyload({});
                 else $(".list-image").lazyload({container: $("#wrapper")}).removeClass("lazy");
+            }
+        }else{
+            List.empty = true;
+            $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
         }
 		$("#settings").css("visibility", "visible");
 		$("#settings").css("opacity", "1");
@@ -59,6 +66,10 @@ var List = {
         full_playlist.push(added);
         List.sortList();
         $("#suggested-"+added.id).remove();
+        if(List.empty){
+            $("#empty-channel-message").remove();
+            List.empty = false;
+        }
         List.insertAtIndex(added, true);
     },
 
@@ -79,8 +90,13 @@ var List = {
             document.getElementById('wrapper').scrollTop += -1;
         }catch(err){
             full_playlist.splice(List.getIndexOfSong(deleted), 1);
+            if(!List.empty)
                 $("#wrapper").children()[$("#wrapper").children().length-1].remove();
         }
+        if(full_playlist.length <= 2){
+            List.empty = true;
+            $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
+        }
         $("#suggested-"+deleted).remove();
         Suggestions.checkUserEmpty();
     },
@@ -108,6 +124,7 @@ var List = {
 
         try{
             full_playlist.push(full_playlist.shift());
+            if(!List.empty)
                 $("#wrapper").children()[0].remove();
 
             List.insertAtIndex(full_playlist[length-1], false);