KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-12-08 20:48:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Working updating of playlist and populating

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-08-08 22:54:41 +02:00
parent 1255940682
commit 7d6a54ae10
7 changed files with 140 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
server/public/assets/css/style.css
View File

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

201
server/public/assets/js/frontpage.js
View File

@@ -13,113 +13,121 @@ var Frontpage = {
all_channels: [], all_channels: [],
frontpage_function: function(msg) { frontpage_function: function() {
frontpage = true; frontpage = true;
Helper.log([ Helper.log([
"Frontpage fetch", "Frontpage fetch",
msg msg
]); ]);
Frontpage.all_channels = msg.channels; Frontpage.all_channels = lists;
if(msg.channels.length == 0) { var msg = lists;
delete lists;
lists = undefined;
document.querySelector("#lists-script").remove();
if(msg.length == 0) {
Helper.css("#preloader", "display", "none"); Helper.css("#preloader", "display", "none");
document.getElementById("channel-list-container").insertAdjacentHTML("beforeend", "<p>No channels yet</p>"); document.getElementById("channel-list-container").insertAdjacentHTML("beforeend", "<p>No channels yet</p>");
} else { } 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) { populate_channels: function(lists, popular, set) {
document.getElementById("channels").innerHTML = ""; //document.getElementById("channels").innerHTML = "";
var num = 0; 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) { //console.log(lists[x]._id);
var id = lists[x].id; var chan = Helper.decodeChannelName(lists[x]._id);
var viewers = lists[x].viewers; if(num<12 || !popular) {
var description = lists[x].description; var id = lists[x].id;
var img; var viewers = lists[x].viewers;
img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');"; var description = lists[x].description;
if(lists[x].thumbnail && lists[x].thumbnail != "") { var img;
img = "background-image:url('" + lists[x].thumbnail + "');"; 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; var song_count = lists[x].count;
//card.innerHTML = card.children[0]; var card = document.createElement("div");
if(song_count > 3) { card.innerHTML += pre_card;
if(lists[x].pinned == 1) { //card.innerHTML = card.children[0];
card.querySelector(".pin").setAttribute("style", "display:block;"); if(song_count > 3) {
//card.find(".card").attr("title", "Featured list"); if(lists[x].pinned == 1) {
} else { card.querySelector(".pin").setAttribute("style", "display:block;");
/*card.find(".pin").attr("style", "display:none;"); //card.find(".card").attr("title", "Featured list");
card.find(".card").attr("title", "");*/ } else {
card.querySelector(".pin").remove(); /*card.find(".pin").attr("style", "display:none;");
} card.find(".card").attr("title", "");
card.querySelector(".chan-name").innerText = chan; card.querySelector(".pin").remove();*/
card.querySelector(".chan-name").setAttribute("title", chan); }
card.querySelector(".chan-views").innerText = viewers; card.querySelector(".chan-name").innerText = chan;
card.querySelector(".chan-songs").innerText = song_count; card.querySelector(".chan-name").setAttribute("title", chan);
card.querySelector(".chan-bg").setAttribute("style", img); card.querySelector(".chan-views").innerText = viewers;
card.querySelector(".chan-link").setAttribute("href", chan + "/"); card.querySelector(".chan-songs").innerText = song_count;
card.querySelector(".chan-bg").setAttribute("style", img);
if(description != "" && description != undefined && !Helper.mobilecheck()) { card.querySelector(".chan-link").setAttribute("href", chan + "/");
card.querySelector(".card-title").innerText = chan;
card.querySelector(".description_text").innerText = description; if(description != "" && description != undefined && !Helper.mobilecheck()) {
description = ""; card.querySelector(".card-title").innerText = chan;
} else { card.querySelector(".description_text").innerText = description;
card.querySelector(".card-reveal").remove(); description = "";
Helper.removeClass(card.querySelector(".card"), "sticky-action") } else {
} //card.querySelector(".card-reveal").remove();
Helper.removeClass(card.querySelector(".card"), "sticky-action")
document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML); }
} else {
num--; document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML);
} } else {
num--;
}
}
num++;
} }
num++;
} }
var options_list = lists.slice(); 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"; document.getElementById("channels").style.display = "block";
//Materialize.fadeInImage('#channels'); //Materialize.fadeInImage('#channels');
//$("#channels").fadeIn(800); //$("#channels").fadeIn(800);
@@ -269,6 +277,7 @@ var Frontpage = {
if(window.location.hostname == "fb.zoff.me") { if(window.location.hostname == "fb.zoff.me") {
add = "https://zoff.me"; add = "https://zoff.me";
} }
Frontpage.frontpage_function();
/*Helper.ajax({ /*Helper.ajax({
url: add + "/api/frontpages", url: add + "/api/frontpages",
method: "get", method: "get",
@@ -430,7 +439,11 @@ var Frontpage = {
Helper.addClass("footer", "hide"); 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(); if(window.location.hostname != "fb.zoff.me") Frontpage.share_link_modifier();

2
server/public/assets/js/listeners.js
View File

@@ -959,7 +959,7 @@ addListener("click", "#aprilfools", function(){
addListener("change", '#view_channels_select', function(event) { addListener("change", '#view_channels_select', function(event) {
var that = this; var that = this;
if(currently_showing_channels != parseInt(that.target.value)) { 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); currently_showing_channels = parseInt(that.target.value);
}); });

4
server/public/layouts/client/frontpage.handlebars
View File

@@ -18,9 +18,9 @@
</div> </div>
</div> </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 class="indeterminate"></div>
</div> </div>-->
{{> frontpage/channels}} {{> frontpage/channels}}
</div> </div>
</main> </main>

5
server/public/partials/frontpage/channel.handlebars
View File

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

8
server/public/partials/frontpage/channels.handlebars
View File

@@ -6,4 +6,12 @@
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </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> </div>

17
server/routing/client/router.js
View File

@@ -157,7 +157,20 @@ function root(req, res, next) {
"title": 1, "title": 1,
"viewers": 1, "viewers": 1,
"pinned": 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": { "thumbnail": {
$ifNull: [ {$cond: { $ifNull: [ {$cond: {
"if": { "if": {
@@ -196,7 +209,7 @@ function root(req, res, next) {
], function(err, docs) { ], function(err, docs) {
db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) { db.collection("connected_users").find({"_id": "total_users"}, function(err, tot) {
data.channels = docs.slice(0, 12); data.channels = docs.slice(0, 12);
data.channel_list = docs; data.channel_list = JSON.stringify(docs);
data.viewers = tot[0].total_users.length; data.viewers = tot[0].total_users.length;
res.render('layouts/client/frontpage', data); res.render('layouts/client/frontpage', data);
}); });