More instant frontpage-loading, and sorting frontpages on the backend for consistency

2025-10-29 18:00:23 +00:00 · 2018-08-10 11:51:28 +02:00
parent 8c29c31449
commit 6d0acaefcb
11 changed files with 147 additions and 90 deletions
--- a/server/handlers/frontpage.js
+++ b/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;
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -899,6 +899,19 @@ nav .zbrand{
    height: 120px;
 }

+.no-jump-select {
+    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;
--- a/server/public/assets/js/channel.js
+++ b/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");
--- a/server/public/assets/js/frontpage.js
+++ b/server/public/assets/js/frontpage.js
@@ -20,16 +20,16 @@ var Frontpage = {
            "Frontpage fetch",
            msg
        ]);
-        Frontpage.all_channels = lists;
-        var msg = lists;
-        delete lists;
-        lists = undefined;
-        document.querySelector("#lists-script").remove();
+
+        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 {
-            console.log(msg);
            Frontpage.populate_channels(msg, true, false);
        }
        //Frontpage.set_viewers(msg.viewers);
@@ -79,7 +79,6 @@ var Frontpage = {
            ]);

            for(var x in lists) {
-                //console.log(lists[x]._id);
                var chan = Helper.decodeChannelName(lists[x]._id);
                if(num<12 || !popular) {
                    var id = lists[x].id;
@@ -160,7 +159,7 @@ var Frontpage = {
        document.getElementById("channels").style.display = "block";
        //Materialize.fadeInImage('#channels');
        //$("#channels").fadeIn(800);
-        document.getElementById("autocomplete-input").focus();
+        //document.getElementById("autocomplete-input").focus();
        num = 0;
    },

@@ -264,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);
@@ -440,12 +439,11 @@ var Frontpage = {
        }

        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();
+        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;
@@ -464,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([
@@ -516,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;
--- a/server/public/assets/js/listeners.js
+++ b/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();
 });
@@ -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;
--- a/server/public/layouts/client/frontpage.handlebars
+++ b/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>
--- a/server/public/partials/frontpage/channel.handlebars
+++ b/server/public/partials/frontpage/channel.handlebars
@@ -4,9 +4,9 @@
            <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}}
-                        <i class="material-icons pin">star_rate</i>
-                    {{/if}}
+
+                        <i class="material-icons pin" style="{{#if pinned}}display:block;{{/if}}{{#unless pinned}}display:none;{{/unless}}">star_rate</i>
+                    
                    <p class="left-align">
                        <span class="chan-name flow-text truncate">{{_id}}</span>
                        <br>
--- a/server/public/partials/frontpage/channels.handlebars
+++ b/server/public/partials/frontpage/channels.handlebars
@@ -1,10 +1,15 @@
 <div id="channel-list-container">
    <ul class="row" id="channels">
-        {{#each channels}}
-            {{#if frontpage}}
-                {{> frontpage/channel}}
-            {{/if}}
-        {{/each}}
+        {{#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">
@@ -12,6 +17,6 @@
        </ul>
    </div>
    <script id="lists-script">
-        var lists = {{{channel_list}}}
+        window.lists = {{{channel_list}}}
    </script>
 </div>
--- a/server/public/partials/frontpage/header.handlebars
+++ b/server/public/partials/frontpage/header.handlebars
@@ -16,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>
--- a/server/routing/client/api.js
+++ b/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};
--- a/server/routing/client/router.js
+++ b/server/routing/client/router.js
@@ -7,6 +7,7 @@ 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');
@@ -149,67 +150,17 @@ function root(req, res, next) {
            if(subdomain[0] == "client") {
                data.client = true;
            }
-            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,
-                        "count": -1,
-                        "accessed": -1,
-                        "title": 1
-                    }
-                },
-                ], function(err, docs) {
+            Frontpage.get_frontpage_lists(function(err, docs){
                db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) {
-                    data.channels = docs.slice(0, 12);
-                    data.channel_list = JSON.stringify(docs);
+                    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);
                });