Added a prettier loader to embedded players

server/public/assets/css/embed.css

@@ -22,6 +22,20 @@
     padding-top: 3px;
 }
 
+.site_loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: auto;
+    bottom: 0;
+    right: 0;
+    background: rgba(0,0,0,.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+}
+
 .prev, .skip {
   display: flex;
   justify-content: center;

server/public/assets/js/embed.js

@@ -193,7 +193,10 @@ function setup_now_playing_listener() {
 }
 
 function setup_list_listener() {
-    socket.on("channel", List.channel_function);
+    socket.on("channel", function(msg) {
+        Helper.addClass(".site_loader", "hide");
+        List.channel_function(msg);
+    });
 }
 
 function setVolume(val) {

server/public/layouts/client/embed.handlebars

@@ -49,9 +49,6 @@
     </div>
     <div id="playlist">
         <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  waves-effect waves-light playlist-element">
                     <div class="clickable vote-container" title="Vote!">
@@ -101,4 +98,9 @@
             </span>
         </div>
     </div>
+    <div class="site_loader">
+        <div class="preloader-wrapper large active valign">
+            {{> spinner}}
+        </div>
+    </div>
 </div>