diff --git a/server/handlers/frontpage.js b/server/handlers/frontpage.js index 78ce9eb7..ccb57917 100644 --- 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; diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index 1a2ae0d5..f9bb94f7 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -899,8 +899,22 @@ nav .zbrand{ height: 120px; } -#channels{ - display: none; +.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; } .white-bg{ diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index f97daa83..4f2e42c1 100644 --- 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"); diff --git a/server/public/assets/js/frontpage.js b/server/public/assets/js/frontpage.js index 2a5a736f..0d308d81 100755 --- a/server/public/assets/js/frontpage.js +++ b/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", "

No channels yet

"); } 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) { - document.getElementById("channels").innerHTML = ""; + populate_channels: function(lists, popular, set) { + //document.getElementById("channels").innerHTML = ""; var num = 0; - - if(popular) { - lists = lists.sort(Helper.predicate({ - name: 'pinned', - reverse: true - }, { - name: 'viewers', - reverse: true - }, { - name: 'accessed', - reverse: true - }, { - name: 'count', - reverse: true - })); - } else { - lists = lists.sort(Helper.predicate({ - name: 'viewers', - reverse: true - }, { - name: 'count', - reverse: true - })); - } - - if(!Helper.mobilecheck()) { - clearTimeout(rotation_timeout); - Frontpage.add_backdrop(lists, 0); - } - - pre_card = channel_list; - - Helper.log([ - "Pre_card: ", - pre_card - ]); - - 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; - var viewers = lists[x].viewers; - var description = lists[x].description; - var img; - img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');"; - 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"); - card.innerHTML += pre_card; - //card.innerHTML = card.children[0]; - if(song_count > 3) { - if(lists[x].pinned == 1) { - card.querySelector(".pin").setAttribute("style", "display:block;"); - //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.querySelector(".chan-name").innerText = chan; - card.querySelector(".chan-name").setAttribute("title", chan); - card.querySelector(".chan-views").innerText = viewers; - card.querySelector(".chan-songs").innerText = song_count; - 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; - card.querySelector(".description_text").innerText = description; - description = ""; - } else { - card.querySelector(".card-reveal").remove(); - Helper.removeClass(card.querySelector(".card"), "sticky-action") - } - - document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML); - } else { - num--; - } - + if(!set) Frontpage.add_backdrop(lists, 0); + else if(set) { + document.getElementById("channels").innerHTML = ""; + if(popular) { + lists = lists.sort(Helper.predicate({ + name: 'pinned', + reverse: true + }, { + name: 'viewers', + reverse: true + }, { + name: 'accessed', + reverse: true + }, { + name: 'count', + reverse: true + })); + } else { + lists = lists.sort(Helper.predicate({ + name: 'viewers', + reverse: true + }, { + name: 'count', + reverse: true + })); + } + + if(!Helper.mobilecheck()) { + clearTimeout(rotation_timeout); + Frontpage.add_backdrop(lists, 0); + } + + pre_card = channel_list; + + Helper.log([ + "Pre_card: ", + pre_card + ]); + + for(var x in lists) { + var chan = Helper.decodeChannelName(lists[x]._id); + if(num<12 || !popular) { + var id = lists[x].id; + var viewers = lists[x].viewers; + var description = lists[x].description; + var img; + img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');"; + 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"); + card.innerHTML += pre_card; + //card.innerHTML = card.children[0]; + if(song_count > 3) { + if(lists[x].pinned == 1) { + card.querySelector(".pin").setAttribute("style", "display:block;"); + //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.querySelector(".chan-name").innerText = chan; + card.querySelector(".chan-name").setAttribute("title", chan); + card.querySelector(".chan-views").innerText = viewers; + card.querySelector(".chan-songs").innerText = song_count; + 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; + card.querySelector(".description_text").innerText = description; + description = ""; + } else { + //card.querySelector(".card-reveal").remove(); + Helper.removeClass(card.querySelector(".card"), "sticky-action") + } + + document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML); + } 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! ok", displayLength: 10000}); + //M.toast({html: "We're using cookies to enhance your experience! ok", displayLength: 10000}); } //var pad = 0; diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 219eb951..fd8d9d38 100755 --- 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(); }); @@ -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; diff --git a/server/public/layouts/client/frontpage.handlebars b/server/public/layouts/client/frontpage.handlebars index 93aecbf3..a5063f8f 100755 --- a/server/public/layouts/client/frontpage.handlebars +++ b/server/public/layouts/client/frontpage.handlebars @@ -10,6 +10,10 @@
+
+ Most Popular + +