Working updating of playlist and populating

server/public/assets/css/style.css

@@ -899,6 +899,11 @@ nav .zbrand{
     height: 120px;
 }
 
+.description_text {
+    color: #2d2d2d;
+    text-align: left;
+}
+
 .white-bg{
     background-color:white !important;
 }

server/public/assets/js/frontpage.js

@@ -13,28 +13,35 @@ var Frontpage = {
 
     all_channels: [],
 
-    frontpage_function: function(msg) {
+    frontpage_function: function() {
         frontpage = true;
 
         Helper.log([
             "Frontpage fetch",
             msg
         ]);
-        Frontpage.all_channels = msg.channels;
-        if(msg.channels.length == 0) {
+        Frontpage.all_channels = lists;
+        var msg = lists;
+        delete lists;
+        lists = undefined;
+        document.querySelector("#lists-script").remove();
+        if(msg.length == 0) {
             Helper.css("#preloader", "display", "none");
             document.getElementById("channel-list-container").insertAdjacentHTML("beforeend", "<p>No channels yet</p>");
         } else {
-            Frontpage.populate_channels(msg.channels, true);
+            console.log(msg);
+            Frontpage.populate_channels(msg, true, false);
         }
-        Frontpage.set_viewers(msg.viewers);
+        //Frontpage.set_viewers(msg.viewers);
     },
 
-    populate_channels: function(lists, popular) {
-        document.getElementById("channels").innerHTML = "";
+    populate_channels: function(lists, popular, set) {
+        //document.getElementById("channels").innerHTML = "";
 
         var num = 0;
-
+        if(!set) Frontpage.add_backdrop(lists, 0);
+        else if(set) {
+            document.getElementById("channels").innerHTML = "";
             if(popular) {
                 lists = lists.sort(Helper.predicate({
                     name: 'pinned',
@@ -94,8 +101,8 @@ var Frontpage = {
                             //card.find(".card").attr("title", "Featured list");
                         } else {
                             /*card.find(".pin").attr("style", "display:none;");
-                        card.find(".card").attr("title", "");*/
-                        card.querySelector(".pin").remove();
+                            card.find(".card").attr("title", "");
+                            card.querySelector(".pin").remove();*/
                         }
                         card.querySelector(".chan-name").innerText = chan;
                         card.querySelector(".chan-name").setAttribute("title", chan);
@@ -109,7 +116,7 @@ var Frontpage = {
                             card.querySelector(".description_text").innerText = description;
                             description = "";
                         } else {
-                        card.querySelector(".card-reveal").remove();
+                            //card.querySelector(".card-reveal").remove();
                             Helper.removeClass(card.querySelector(".card"), "sticky-action")
                         }
 
@@ -121,6 +128,7 @@ var Frontpage = {
                 }
                 num++;
             }
+        }
 
         var options_list = lists.slice();
 
@@ -148,7 +156,7 @@ var Frontpage = {
             },
         });
 
-        document.getElementById("preloader").style.display = "none";
+        //document.getElementById("preloader").style.display = "none";
         document.getElementById("channels").style.display = "block";
         //Materialize.fadeInImage('#channels');
         //$("#channels").fadeIn(800);
@@ -269,6 +277,7 @@ var Frontpage = {
         if(window.location.hostname == "fb.zoff.me") {
             add = "https://zoff.me";
         }
+        Frontpage.frontpage_function();
         /*Helper.ajax({
             url: add + "/api/frontpages",
             method: "get",
@@ -430,7 +439,11 @@ var Frontpage = {
             Helper.addClass("footer", "hide");
         }
 
-        channel_list = document.getElementById("channel-list-container").cloneNode(true).innerHTML;
+        channel_list = document.querySelector(".hidden-channel-list").cloneNode(true).innerHTML;
+        console.log(channel_list);
+        try {
+            document.querySelector(".hidden-channel-list").remove();
+        }catch(e){}
 
         if(window.location.hostname != "fb.zoff.me") Frontpage.share_link_modifier();
 

server/public/assets/js/listeners.js

@@ -959,7 +959,7 @@ addListener("click", "#aprilfools", function(){
 addListener("change", '#view_channels_select', function(event) {
     var that = this;
     if(currently_showing_channels != parseInt(that.target.value)) {
-        Frontpage.populate_channels(Frontpage.all_channels, (parseInt(that.target.value) == 1 ? true : false));
+        Frontpage.populate_channels(Frontpage.all_channels, (parseInt(that.target.value) == 1 ? true : false), true);
     }
     currently_showing_channels = parseInt(that.target.value);
 });

server/public/layouts/client/frontpage.handlebars

@@ -18,9 +18,9 @@
                     </div>
                 </div>
             </div>
-            <div id="preloader" class="progress frontpage-preloader orange lighten-3">
+            <!--<div id="preloader" class="progress frontpage-preloader orange lighten-3">
                 <div class="indeterminate"></div>
-            </div>
+            </div>-->
             {{> frontpage/channels}}
         </div>
     </main>

server/public/partials/frontpage/channel.handlebars

@@ -1,7 +1,7 @@
 
     <li class="chan-card col s6 m4 l4">
         <div class="card sticky-action">
-            <a id="chan-link" href="{{_id}}/">
+            <a class="chan-link" href="{{_id}}/">
                 <div class="chan-bg card-image cardbg" style="background-image:url({{thumbnail}});"></div>
                 <div class="card-content">
                     {{#if pinned}}
@@ -20,12 +20,11 @@
                 <div class="card-action noselect">
                     <span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
                 </div>
-                {{#if description}}
+
                     <div class="card-reveal">
                         <span class="card-title grey-text text-darken-4 truncate">{{_id}}</span>
                         <p class="description_text">{{description}}</p>
                     </div>
-                {{/if}}
             </a>
         </div>
     </li>

server/public/partials/frontpage/channels.handlebars

@@ -6,4 +6,12 @@
             {{/if}}
         {{/each}}
     </ul>
+    <div class="hidden-channel-list hide">
+        <ul class="row" id="channels">
+        {{>frontpage/channel}}
+        </ul>
+    </div>
+    <script id="lists-script">
+        var lists = {{{channel_list}}}
+    </script>
 </div>

server/routing/client/router.js

@@ -157,7 +157,20 @@ function root(req, res, next) {
                 "title": 1,
                 "viewers": 1,
                 "pinned": 1,
-                "description": 1,
+                "description": {
+                    $ifNull: [ {$cond: {
+                        "if": {
+                            "$or": [
+                                { "$eq": [ "$description", ""] },
+                                { "$eq": [ "$description", null] },
+                                { "$eq": [ "$description", undefined] }
+                            ]
+                        },
+                        then: "This list has no description",
+                        else: "$description"
+                    }}, "This list has no description"]
+
+                },
                 "thumbnail": {
                     $ifNull: [ {$cond: {
                         "if": {
@@ -196,7 +209,7 @@ function root(req, res, next) {
                 ], function(err, docs) {
                 db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) {
                     data.channels = docs.slice(0, 12);
-                    data.channel_list = docs;
+                    data.channel_list = JSON.stringify(docs);
                     data.viewers = tot[0].total_users.length;
                     res.render('layouts/client/frontpage', data);
                 });