Merge pull request #365 from zoff-music/feature/instant-frontpages

Feature/instant frontpages

server/handlers/frontpage.js

@@ -19,6 +19,68 @@ function frontpage_lists(msg, socket) {
     });
 }
 
+function get_frontpage_lists(callback) {
+    var project_object = {
+        "_id": 1,
+        "count": 1,
+        "frontpage": 1,
+        "id": 1,
+        "title": 1,
+        "viewers": 1,
+        "pinned": 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": {
+                    "$or": [
+                        { "$eq": [ "$thumbnail", ""] },
+                        { "$eq": [ "$thumbnail", null] },
+                        { "$eq": [ "$thumbnail", undefined] }
+                    ]
+                },
+                then: {
+                    $concat : [ "https://img.youtube.com/vi/", "$id", "/mqdefault.jpg"]
+                },
+                else: "$thumbnail"
+            }}, { $concat : [ "https://img.youtube.com/vi/", "$id", "/mqdefault.jpg"]}]
+
+        }
+    };
+    db.collection("frontpage_lists").aggregate([
+        {
+            "$match": {
+                frontpage: true,
+                count: {$gt: 0},
+            }
+        },
+        {
+            "$project": project_object
+        },
+        {
+            "$sort" : {
+                "pinned": -1,
+                "viewers": -1,
+                "count": -1,
+                "accessed": -1,
+                "title": 1
+            }
+        },
+    ], callback);
+}
+
 function update_frontpage(coll, id, title, thumbnail, source, callback) {
     //coll = coll.replace(/ /g,'');
     db.collection("frontpage_lists").find({_id: coll}, function(e, doc) {
@@ -38,5 +100,6 @@ if(doc.length > 0 && ((doc[0].thumbnail != "" && doc[0].thumbnail != undefined &
     });
 }
 
+module.exports.get_frontpage_lists = get_frontpage_lists;
 module.exports.frontpage_lists = frontpage_lists;
 module.exports.update_frontpage = update_frontpage;

server/public/assets/css/style.css

@@ -899,8 +899,22 @@ nav .zbrand{
     height: 120px;
 }
 
-#channels{
+.no-jump-select {
-    display: none;
+    height: calc(3rem + 1px) !important;
+    margin: 0 0 8px 0;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #9e9e9e;
+    align-items: center;
+    font-size: 16px;
+
+     line-height: 3rem;
+    color: #000;
+}
+
+.description_text {
+    color: #2d2d2d;
+    text-align: left;
 }
 
 .white-bg{

server/public/assets/js/channel.js

@@ -677,6 +677,12 @@ var Channel = {
 
                     var response = document.createElement("div");
                     response.innerHTML = e;
+
+                    var newList = response.querySelector("#lists-script").innerHTML;
+                    newList = newList.trim().replace("window.lists = ", "");
+                    newList = newList.substring(0, newList.length);
+                    window.lists = JSON.parse(newList);
+                    response.querySelector("#lists-script").remove();
                     Helper.removeElement("#sidenav-overlay");
                     document.getElementsByTagName("main")[0].className = "center-align container";
                     Helper.removeClass("#main-container", "channelpage");

server/public/assets/js/frontpage.js

@@ -13,113 +13,120 @@ 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 = window.lists;
+        var msg = window.lists;
+        delete window.lists;
+        window.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);
+            Frontpage.populate_channels(msg, true, false);
         }
-        Frontpage.set_viewers(msg.viewers);
+        //Frontpage.set_viewers(msg.viewers);
     },
 
-    populate_channels: function(lists, popular) {
+    populate_channels: function(lists, popular, set) {
-        document.getElementById("channels").innerHTML = "";
+        //document.getElementById("channels").innerHTML = "";
 
         var num = 0;
-
+        if(!set) Frontpage.add_backdrop(lists, 0);
-        if(popular) {
+        else if(set) {
-            lists = lists.sort(Helper.predicate({
+            document.getElementById("channels").innerHTML = "";
-                name: 'pinned',
+            if(popular) {
-                reverse: true
+                lists = lists.sort(Helper.predicate({
-            }, {
+                    name: 'pinned',
-                name: 'viewers',
+                    reverse: true
-                reverse: true
+                }, {
-            }, {
+                    name: 'viewers',
-                name: 'accessed',
+                    reverse: true
-                reverse: true
+                }, {
-            }, {
+                    name: 'accessed',
-                name: 'count',
+                    reverse: true
-                reverse: true
+                }, {
-            }));
+                    name: 'count',
-        } else {
+                    reverse: true
-            lists = lists.sort(Helper.predicate({
+                }));
-                name: 'viewers',
+            } else {
-                reverse: true
+                lists = lists.sort(Helper.predicate({
-            }, {
+                    name: 'viewers',
-                name: 'count',
+                    reverse: true
-                reverse: true
+                }, {
-            }));
+                    name: 'count',
-        }
+                    reverse: true
-
+                }));
-        if(!Helper.mobilecheck()) {
+            }
-            clearTimeout(rotation_timeout);
+
-            Frontpage.add_backdrop(lists, 0);
+            if(!Helper.mobilecheck()) {
-        }
+                clearTimeout(rotation_timeout);
-
+                Frontpage.add_backdrop(lists, 0);
-        pre_card = channel_list;
+            }
-
+
-        Helper.log([
+            pre_card = channel_list;
-            "Pre_card: ",
+
-            pre_card
+            Helper.log([
-        ]);
+                "Pre_card: ",
-
+                pre_card
-        for(var x in lists) {
+            ]);
-            //console.log(lists[x]._id);
+
-            var chan = Helper.decodeChannelName(lists[x]._id);
+            for(var x in lists) {
-            if(num<12 || !popular) {
+                var chan = Helper.decodeChannelName(lists[x]._id);
-                var id = lists[x].id;
+                if(num<12 || !popular) {
-                var viewers = lists[x].viewers;
+                    var id = lists[x].id;
-                var description = lists[x].description;
+                    var viewers = lists[x].viewers;
-                var img;
+                    var description = lists[x].description;
-                img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');";
+                    var img;
-                if(lists[x].thumbnail && lists[x].thumbnail != "") {
+                    img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');";
-                    img = "background-image:url('" + lists[x].thumbnail + "');";
+                    if(lists[x].thumbnail && lists[x].thumbnail != "") {
-                }
+                        img = "background-image:url('" + lists[x].thumbnail + "');";
-
+                    }
-                var song_count = lists[x].count;
+
-                var card = document.createElement("div");
+                    var song_count = lists[x].count;
-                card.innerHTML += pre_card;
+                    var card = document.createElement("div");
-                //card.innerHTML = card.children[0];
+                    card.innerHTML += pre_card;
-                if(song_count > 3) {
+                    //card.innerHTML = card.children[0];
-                    if(lists[x].pinned == 1) {
+                    if(song_count > 3) {
-                        card.querySelector(".pin").setAttribute("style", "display:block;");
+                        if(lists[x].pinned == 1) {
-                        //card.find(".card").attr("title", "Featured list");
+                            card.querySelector(".pin").setAttribute("style", "display:block;");
-                    } else {
+                            //card.find(".card").attr("title", "Featured list");
-                        /*card.find(".pin").attr("style", "display:none;");
+                        } else {
-                        card.find(".card").attr("title", "");*/
+                            /*card.find(".pin").attr("style", "display:none;");
-                        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);
+                        card.querySelector(".chan-name").innerText = chan;
-                    card.querySelector(".chan-views").innerText = viewers;
+                        card.querySelector(".chan-name").setAttribute("title", chan);
-                    card.querySelector(".chan-songs").innerText = song_count;
+                        card.querySelector(".chan-views").innerText = viewers;
-                    card.querySelector(".chan-bg").setAttribute("style", img);
+                        card.querySelector(".chan-songs").innerText = song_count;
-                    card.querySelector(".chan-link").setAttribute("href", chan + "/");
+                        card.querySelector(".chan-bg").setAttribute("style", img);
-
+                        card.querySelector(".chan-link").setAttribute("href", chan + "/");
-                    if(description != "" && description != undefined && !Helper.mobilecheck()) {
+
-                        card.querySelector(".card-title").innerText = chan;
+                        if(description != "" && description != undefined && !Helper.mobilecheck()) {
-                        card.querySelector(".description_text").innerText = description;
+                            card.querySelector(".card-title").innerText = chan;
-                        description = "";
+                            card.querySelector(".description_text").innerText = description;
-                    } else {
+                            description = "";
-                        card.querySelector(".card-reveal").remove();
+                        } else {
-                        Helper.removeClass(card.querySelector(".card"), "sticky-action")
+                            //card.querySelector(".card-reveal").remove();
-                    }
+                            Helper.removeClass(card.querySelector(".card"), "sticky-action")
-
+                        }
-                    document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML);
+
-                } else {
+                        document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML);
-                    num--;
+                    } else {
-                }
+                        num--;
-
+                    }
+
+                }
+                num++;
             }
-            num++;
         }
 
         var options_list = lists.slice();
@@ -148,11 +155,11 @@ 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);
-        document.getElementById("autocomplete-input").focus();
+        //document.getElementById("autocomplete-input").focus();
         num = 0;
     },
 
@@ -256,7 +263,7 @@ var Frontpage = {
             if(Frontpage.times_rotated == 50 && frontpage){
                 Frontpage.times_rotated = 0;
                 i = 0;
-                Frontpage.get_frontpage_lists();
+                //Frontpage.get_frontpage_lists();
             }else if(frontpage){
                 Frontpage.times_rotated += 1;
                 Frontpage.add_backdrop(list, i+1);
@@ -269,7 +276,8 @@ var Frontpage = {
         if(window.location.hostname == "fb.zoff.me") {
             add = "https://zoff.me";
         }
-        Helper.ajax({
+        Frontpage.frontpage_function();
+        /*Helper.ajax({
             url: add + "/api/frontpages",
             method: "get",
             success: function(response){
@@ -282,7 +290,7 @@ var Frontpage = {
                     Frontpage.get_frontpage_lists();
                 }, 3000);
             },
-        });
+        });*/
     },
 
     start_snowfall: function() {
@@ -430,9 +438,12 @@ 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;
+        try {
+            document.querySelector(".hidden-channel-list").remove();
+        }catch(e){}
 
-        if(window.location.hostname != "fb.zoff.me") Frontpage.share_link_modifier();
+        Frontpage.share_link_modifier();
 
         if(window.location.hostname == "zoff.me" || window.location.hostname == "fb.zoff.me") add = "https://zoff.me";
         else add = window.location.hostname;
@@ -451,10 +462,11 @@ var Frontpage = {
             setup_playlist_listener();
         }
 
-        M.Modal.init(document.getElementById("about"));
+        /*M.Modal.init(document.getElementById("about"));
         M.Modal.init(document.getElementById("help"));
-        M.Modal.init(document.getElementById("contact"));
+        M.Modal.init(document.getElementById("contact"));*/
         var elem = document.querySelector('select');
+        document.querySelector(".no-jump-select").remove();
         M.FormSelect.init(elem);
 
         Helper.log([
@@ -503,7 +515,7 @@ var Frontpage = {
 
         if(!localStorage.ok_cookie){
             before_toast();
-            M.toast({html: "We're using cookies to enhance your experience!  <a class='waves-effect waves-light btn light-green' href='#' id='cookieok' style='cursor:pointer;pointer-events:all;margin-left:10px;'> ok</a>", displayLength: 10000});
+            //M.toast({html: "We're using cookies to enhance your experience!  <a class='waves-effect waves-light btn light-green' href='#' id='cookieok' style='cursor:pointer;pointer-events:all;margin-left:10px;'> ok</a>", displayLength: 10000});
         }
 
         //var pad = 0;

server/public/assets/js/listeners.js

@@ -941,11 +941,11 @@ addListener("click", ".first_page", function(event){
 
 addListener("click", ".donate-button", function(event) {
     this.preventDefault();
+    M.Modal.init(document.getElementById("donate"));
     ga('send', 'event', "button-click", "donate");
     M.Modal.getInstance(document.getElementById("donate")).open();
 });
 
-
 addListener("click", '#toast-container', function(){
     before_toast();
 });
@@ -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);
 });
@@ -1223,14 +1223,32 @@ addListener("click", "#twitter-code-link", function() {
 });
 
 addListener("click", ".help-button-footer", function() {
+    this.preventDefault();
+    M.Modal.init(document.getElementById("help"));
     ga('send', 'event', "button-click", "help-footer");
+    M.Modal.getInstance(document.getElementById("help")).open();
 });
 
 addListener("click", "#embed-button", function() {
+    this.preventDefault();
+    M.Modal.init(document.getElementById("embed"));
     ga('send', 'event', "button-click", "embed-channel", "channel-name", chan.toLowerCase());
-})
+    M.Modal.getInstance(document.getElementById("embed")).open();
+});
 
+addListener("click", "#contact-button", function() {
+    this.preventDefault();
+    M.Modal.init(document.getElementById("contact"));
+    ga('send', 'event', "button-click", "contact-footer");
+    M.Modal.getInstance(document.getElementById("contact")).open();
+});
 
+addListener("click", ".about-button", function() {
+    this.preventDefault();
+    M.Modal.init(document.getElementById("about"));
+    ga('send', 'event', "button-click", "contact-footer");
+    M.Modal.getInstance(document.getElementById("about")).open();
+});
 
 addListener("click", ".playlist-link", function(event){
     chat_active = false;

server/public/layouts/client/frontpage.handlebars

@@ -10,6 +10,10 @@
             <div class="col s12">
                 <div class="row">
                     <div class="input-field col s12">
+                        <div class="no-jump-select">
+                            Most Popular
+                            <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
+                        </div>
                         <select id="view_channels_select">
                             <option value="" disabled>Channels to show</option>
                             <option value="1" selected>Most Popular</option>
@@ -18,9 +22,6 @@
                     </div>
                 </div>
             </div>
-            <div id="preloader" class="progress frontpage-preloader orange lighten-3">
-                <div class="indeterminate"></div>
-            </div>
             {{> frontpage/channels}}
         </div>
     </main>

server/public/partials/frontpage/channel.handlebars

@@ -1,26 +1,30 @@
-<li class="chan-card col s6 m4 l4">
+
-    <div class="card sticky-action">
+    <li class="chan-card col s6 m4 l4">
-        <a class="chan-link">
+        <div class="card sticky-action">
-            <div class="chan-bg card-image cardbg"></div>
+            <a class="chan-link" href="{{_id}}/">
-            <div class="card-content">
+                <div class="chan-bg card-image cardbg" style="background-image:url({{thumbnail}});"></div>
-                <i class="material-icons pin">star_rate</i>
+                <div class="card-content">
-                <p class="left-align">
+
-                    <span class="chan-name flow-text truncate"></span>
+                        <i class="material-icons pin" style="{{#if pinned}}display:block;{{/if}}{{#unless pinned}}display:none;{{/unless}}">star_rate</i>
-                    <br>
+                    
-                    <span class="highlighted">Viewers:&nbsp;</span>
+                    <p class="left-align">
-                    <span class="chan-views"></span>
+                        <span class="chan-name flow-text truncate">{{_id}}</span>
-                    <br>
+                        <br>
-                    <span class="highlighted">Songs:&nbsp;</span>
+                        <span class="highlighted">Viewers:&nbsp;</span>
-                    <span class="chan-songs"></span>
+                        <span class="chan-views">{{viewers}}</span>
-                </p>
+                        <br>
-            </div>
+                        <span class="highlighted">Songs:&nbsp;</span>
-            <div class="card-action noselect">
+                        <span class="chan-songs">{{count}}</span>
-                <span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
+                    </p>
-            </div>
+                </div>
-            <div class="card-reveal">
+                <div class="card-action noselect">
-                <span class="card-title grey-text text-darken-4 truncate"></span>
+                    <span class="chan-link-element waves-effect waves-orange btn-flat">Listen</span>
-                <p class="description_text"></p>
+                </div>
-            </div>
+
-        </a>
+                    <div class="card-reveal">
-    </div>
+                        <span class="card-title grey-text text-darken-4 truncate">{{_id}}</span>
-</li>
+                        <p class="description_text">{{description}}</p>
+                    </div>
+            </a>
+        </div>
+    </li>

server/public/partials/frontpage/channels.handlebars

@@ -1,5 +1,22 @@
 <div id="channel-list-container">
     <ul class="row" id="channels">
-        {{> frontpage/channel}}
+        {{#if channels_exist}}
+            {{#each channels}}
+                {{#if frontpage}}
+                    {{> frontpage/channel}}
+                {{/if}}
+            {{/each}}
+        {{/if}}
+        {{#unless channels_exist}}
+            No channels yet
+        {{/unless}}
     </ul>
+    <div class="hidden-channel-list hide">
+        <ul class="row" id="channels">
+        {{>frontpage/channel}}
+        </ul>
+    </div>
+    <script id="lists-script">
+        window.lists = {{{channel_list}}}
+    </script>
 </div>

server/public/partials/frontpage/header.handlebars

@@ -4,7 +4,10 @@
             <a href="#" class="brand-logo">
                 <img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
             </a>
-            <div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not"></div>
+            <div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not">
+                <i class="material-icons frontpage-viewers">visibility</i>
+                {{viewers}}
+            </div>
             <ul class="right">
                 {{#if client}}
                     <li><a class="header-buttons waves-effect waves-orange orange" id="client-mode-button" title="Client mode" href="https://zoff.me">Client</a></li>
@@ -13,7 +16,7 @@
                 {{/if}}
                 <li class="hide-on-small-only"><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Local mode" href="#">Local</a></li>
                 <li class="hide-on-small-only"><a class="header-buttons waves-effect waves-green" title="Remote control a Zoff player" href="https://remote.zoff.me">Remote</a></li>
-                <li class="hide-on-small-only"><a class="header-buttons modal-trigger waves-effect waves-orange" data-target="about">About</a></li>
+                <li class="hide-on-small-only"><a class="header-buttons modal-trigger waves-effect waves-orange about-button" data-target="about">About</a></li>
             </ul>
         </div>
     </nav>

server/routing/client/api.js

@@ -117,7 +117,8 @@ router.route('/api/frontpages').get(function(req, res) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
     res.header({"Content-Type": "application/json"});
-    db.collection("frontpage_lists").find({frontpage: true, count: {$gt: 0}}, function(err, docs) {
+    Frontpage.get_frontpage_lists(function(err, docs) {
+    //db.collection("frontpage_lists").find({frontpage: true, count: {$gt: 0}}, function(err, docs) {
         db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) {
             var to_return = error.no_error;
             to_return.results = {channels: docs, viewers: tot[0].total_users.length};

server/routing/client/router.js

@@ -7,6 +7,9 @@ var analytics = "xx";
 var mongojs = require('mongojs');
 var token_db = mongojs("tokens");
 var Functions = require(pathThumbnails + '/handlers/functions.js');
+var Frontpage = require(pathThumbnails + '/handlers/frontpage.js');
+
+var db = require(pathThumbnails + '/handlers/db.js');
 //var db = require(pathThumbnails + '/handlers/db.js');
 
 try {
@@ -142,14 +145,30 @@ function root(req, res, next) {
                 embed: false,
                 client: false,
                 og_image: "https://zoff.me/assets/images/small-square.jpg",
+                channels: [],
             }
             if(subdomain[0] == "client") {
                 data.client = true;
             }
-            res.render('layouts/client/frontpage', data);
+            Frontpage.get_frontpage_lists(function(err, docs){
+                db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) {
+                    if(docs.length > 0) {
+                        data.channels_exist = true;
+                        data.channels = docs.slice(0, 12);
+                        data.channel_list = JSON.stringify(docs);
+                    } else {
+                        data.channels_exist = false;
+                        data.channels = [];
+                        data.channel_list = [];
+                    }
+                    data.viewers = tot[0].total_users.length;
+                    res.render('layouts/client/frontpage', data);
+                });
+            });
+
         }
     } catch(e) {
-        //console.log(e);
+        console.log(e);
         //res.redirect("https://zoff.me");
     }
 }