KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Feature/instant frontpages
This commit is contained in:
Kasper Rynning-Tønnesen
2018-08-10 11:51:57 +02:00
committed by GitHub
parent 5cd8cd5864 6d0acaefcb
commit c20da5db3b
11 changed files with 300 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
server/handlers/frontpage.js
View File

@@ -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;

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

@@ -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{

6
server/public/assets/js/channel.js
View File

@@ -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");

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

@@ -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) {
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! <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;

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

@@ -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;

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

@@ -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>

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

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

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

@@ -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>

7
server/public/partials/frontpage/header.handlebars
View File

@@ -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>

3
server/routing/client/api.js
View File

@@ -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};

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

@@ -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");
}
}