Files
zoff/server/public/assets/js/frontpage.js
Kasper Rynning-Tønnesen 384d3bb6c6 Removed a log
2019-07-25 16:50:10 +02:00

700 lines
22 KiB
JavaScript
Executable File

var channel_list;
var frontpage = true;
var socket;
var rotation_timeout;
var Frontpage = {
blob_list: [],
winter: new Date().getMonth() >= 10 ? true : false,
pride: function() {
return new Date().getMonth() == 5;
},
times_rotated: 0,
all_channels: [],
frontpage_function: function() {
frontpage = true;
Helper.log(["Frontpage fetch", msg]);
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, true, false);
}
//Frontpage.set_viewers(msg.viewers);
},
populate_channels: function(lists, popular, set) {
//document.getElementById("channels").innerHTML = "";
var num = 0;
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() &&
description != "This list has no description"
) {
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++;
}
}
var options_list = lists.slice();
options_list = options_list.sort(Frontpage.sortFunction_active);
var data = {};
for (var x in options_list) {
data[Helper.decodeChannelName(options_list[x]._id)] = null;
}
if (
document.querySelectorAll(".pin").length == 1 &&
!Helper.mobilecheck()
) {
Helper.tooltip(
document.querySelectorAll(".pin")[0].parentElement.parentElement
.parentElement,
{
delay: 5,
position: "top",
html: "Featured playlist"
}
);
}
var to_autocomplete = document.querySelectorAll("input.autocomplete")[0];
//if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
M.Autocomplete.init(to_autocomplete, {
data: data,
limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
onAutocomplete: function(val) {
Frontpage.to_channel(Helper.encodeChannelName(val), false);
}
});
//document.getElementById("preloader").style.display = "none";
document.getElementById("channels").style.display = "block";
//Materialize.fadeInImage('#channels');
//$("#channels").fadeIn(800);
//document.getElementById("autocomplete-input").focus();
num = 0;
},
sortFunction: function(a, b) {
var o1 = a.viewers;
var o2 = b.viewers;
var p1 = a.count;
var p2 = b.count;
if (o1 < o2) return 1;
if (o1 > o2) return -1;
if (p1 < p2) return 1;
if (p1 > p2) return -1;
return 0;
},
sortFunction_active: function(a, b) {
var o1 = a.accessed;
var o2 = b.accessed;
var p1 = a.count;
var p2 = b.count;
if (o1 < o2) return 1;
if (o1 > o2) return -1;
if (p1 < p2) return 1;
if (p1 > p2) return -1;
return 0;
},
getCookie: function(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1);
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
}
return "";
},
add_backdrop: function(list, i) {
if (i >= list.length || i >= 20) i = 0;
if (list[i] == undefined) return;
var id = list[i].id;
if (Frontpage.blob_list[i] !== undefined) {
//$(".room-namer").css("opacity", 0);
setTimeout(function() {
if (frontpage) {
Helper.css(
"#mega-background",
"background",
"url(data:image/png;base64," + Frontpage.blob_list[i] + ")"
);
Helper.css("#mega-background", "background-size", "cover");
Helper.css("#mega-background", "background-repeat", "no-repeat");
Helper.css("#mega-background", "opacity", 1);
document
.querySelector(".autocomplete")
.setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
//$(".room-namer").css("opacity", 1);
}
}, 500);
} else {
var img = new Image();
img.src = "/assets/images/thumbnails/" + id + ".jpg";
img.onerror = function(e) {
// Failed to load
var add = "";
if (window.location.hostname == "fb.zoff.me") {
add = "https://zoff.me";
}
Helper.ajax({
type: "POST",
data: { id: id },
url: add + "/api/imageblob",
headers: { "Content-Type": "application/json;charset=UTF-8" },
success: function(data) {
setTimeout(function() {
try {
Helper.css(
"#mega-background",
"background",
"url(/assets/images/thumbnails/" + data + ")"
);
Helper.css("#mega-background", "background-size", "cover");
Helper.css(
"#mega-background",
"background-repeat",
"no-repeat"
);
Helper.css("#mega-background", "opacity", 1);
document
.querySelector(".autocomplete")
.setAttribute(
"placeholder",
Helper.decodeChannelName(list[i]._id)
);
} catch (e) {}
}, 500);
},
error: function() {
try {
document
.querySelector(".autocomplete")
.setAttribute(
"placeholder",
Helper.decodeChannelName(list[i]._id)
);
} catch (e) {
console.log("This is a weird error...", e);
}
}
});
};
img.onload = function() {
// Loaded successfully
try {
Helper.css("#mega-background", "background", "url(" + img.src + ")");
Helper.css("#mega-background", "background-size", "cover");
Helper.css("#mega-background", "background-repeat", "no-repeat");
Helper.css("#mega-background", "opacity", 1);
document
.querySelector(".autocomplete")
.setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
} catch (e) {}
};
}
rotation_timeout = setTimeout(function() {
if (Frontpage.times_rotated == 50 && frontpage) {
Frontpage.times_rotated = 0;
i = 0;
//Frontpage.get_frontpage_lists();
} else if (frontpage) {
Frontpage.times_rotated += 1;
Frontpage.add_backdrop(list, i + 1);
}
}, 6000);
},
get_frontpage_lists: function() {
var add = "";
if (window.location.hostname == "fb.zoff.me") {
add = "https://zoff.me";
}
Frontpage.frontpage_function();
/*Helper.ajax({
url: add + "/api/frontpages",
method: "POST",
data: {
token: zoff_api_token,
},
success: function(response){
response = JSON.parse(response);
Frontpage.frontpage_function(response.results);
},
error: function() {
M.toast({html: "Couldn't fetch lists, trying again in 3 seconds..", displayLength: 3000, classes: "red lighten connect_error"});
retry_frontpage = setTimeout(function(){
Frontpage.get_frontpage_lists();
}, 3000);
},
});*/
},
start_snowfall: function() {
setTimeout(function() {
var x = Math.floor(Math.random() * window.innerWidth + 1);
var snow = document.createElement("div");
var parent = document.getElementsByClassName("mega")[0];
snow.className = "snow";
//snow.attr("left", x);
snow.style.left = x + "px";
snow.style.top = "0px";
parent.appendChild(snow);
Frontpage.fall_snow(snow);
Frontpage.start_snowfall();
}, 800);
},
fall_snow: function(corn) {
corn.style.top = parseInt(corn.style.top.replace("px", "")) + 2 + "px";
if (
parseInt(corn.style.top.replace("px", "")) <
document.getElementById("mega-background").offsetHeight - 2.5
) {
setTimeout(function() {
Frontpage.fall_snow(corn);
}, 50);
} else {
corn.remove();
}
},
set_viewers: function(viewers) {
document.querySelector("#frontpage-viewer-counter").innerHTML =
"<i class='material-icons frontpage-viewers'>visibility</i>" + viewers;
},
to_channel: function(new_channel, popstate) {
Helper.css("#channel-load", "display", "block");
window.scrollTo(0, 0);
frontpage = false;
new_channel = new_channel.toLowerCase();
clearTimeout(rotation_timeout);
if (Helper.mobilecheck()) {
Helper.log(["removing all listeners"]);
removeAllListeners();
}
Helper.css("#main-container", "background-color", "#2d2d2d");
if (!Helper.mobilecheck()) {
Helper.tooltip("#frontpage-viewer-counter", "destroy");
Helper.tooltip(".generate-channel-name", "destroy");
Helper.tooltip("#offline-mode", "destroy");
Helper.tooltip("#client-mode-button", "destroy");
if (document.querySelectorAll(".pin").length == 1) {
Helper.tooltip(
document.querySelectorAll(".pin")[0].parentElement.parentElement
.parentElement,
"destroy"
);
}
}
currently_showing_channels = 1;
clearTimeout(retry_frontpage);
Helper.ajax({
url: "/" + new_channel,
method: "get",
data: { channel: new_channel },
success: function(e) {
if (Player.player !== "") {
//Player.player.destroy();
socket.emit("change_channel", { channel: chan.toLowerCase() });
}
var _player = document.querySelectorAll("#frontpage_player");
if (_player.length > 0) _player[0].innerHTML = "";
if (Helper.mobilecheck()) {
//Helper.log("disconnecting");
//socket.disconnect();
socket.removeAllListeners();
}
var old_chan = chan;
if (!popstate) {
window.history.pushState(
"to the channel!",
"Title",
"/" + new_channel
);
if (prev_chan_list == "") prev_chan_list = new_channel;
if (prev_chan_player == "") prev_chan_player = new_channel;
chan = new_channel;
}
var response = document.createElement("div");
response.innerHTML = e;
M.FormSelect.getInstance(
document.querySelector("#view_channels_select")
).destroy();
//$('select').formSelect('destroy');
Helper.removeElement(".mega");
Helper.removeElement(".mobile-search");
document.getElementsByTagName("main")[0].className =
"container center-align main";
Helper.addClass("#main-container", "channelpage");
document.getElementsByTagName(
"header"
)[0].innerHTML = response.querySelectorAll("header")[0].innerHTML;
if (
document.querySelectorAll("#alreadychannel").length === 0 ||
Helper.mobilecheck() ||
Player.player === undefined
) {
document.getElementsByTagName(
"main"
)[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
} else {
document
.getElementById("main-row")
.insertAdjacentHTML(
"beforeend",
response.querySelectorAll("#playlist")[0].outerHTML
);
if (!client)
document
.getElementById("video-container")
.insertAdjacentHTML(
"beforeend",
response.querySelectorAll("#main_components")[0].outerHTML
);
document
.getElementById("main-row")
.insertAdjacentHTML("beforeend", "<div id='playbar'></div>");
Helper.removeClass("#player", "player_bottom");
Helper.removeClass("#player_overlay", "player_bottom");
Helper.removeClass(".video-container", "frontpage-player");
Helper.removeClass("#main-row", "frontpage_modified_heights");
Helper.removeElement("#main_section_frontpage");
Helper.removeElement("#closePlayer");
Helper.removeElement("#player_bottom_overlay");
}
document
.getElementById("search")
.setAttribute("placeholder", "Search...");
Helper.addClass(".page-footer", "padding-bottom-novideo");
from_frontpage = true;
//Player.stopInterval =true;
//clearTimeout(durationTimeout);
if (document.querySelectorAll("#alreadychannel").length == 1) {
if (old_chan != new_channel) local_new_channel = true;
Channel.init();
} else {
fromFront = true;
Channel.init();
}
if (document.querySelectorAll("#alreadyfp").length === 0)
document
.getElementsByTagName("head")[0]
.insertAdjacentHTML("beforeend", "<div id='alreadyfp'></div>");
}
});
},
init: function() {
var date = new Date();
Frontpage.blob_list = [];
if (date.getMonth() == 3 && date.getDate() == 1) {
Helper.css(".mega", "-webkit-transform", "rotate(180deg)");
Helper.css(".mega", "-moz-transform", "rotate(180deg)");
//Materialize.toast('<p id="aprilfools">We suck at pranks..<a class="waves-effect waves-light btn light-green" style="pointer-events:none;">Agreed</a></p>', 100000);
}
if (window.location.hostname != "localhost") {
var page = window.location.pathname;
if (page.substring(page.length - 1) != "/") page += "/";
ga("send", "pageview", page);
}
window.onpopstate = function(e) {
var url_split = window.location.href.split("/");
if (url_split[3] !== "" && url_split[3].substring(0, 1) != "#") {
Frontpage.to_channel(url_split[3], true);
}
};
if (window.location.hostname == "fb.zoff.me") {
Helper.addClass("footer", "hide");
}
channel_list = document
.querySelector(".hidden-channel-list")
.cloneNode(true).innerHTML;
try {
document.querySelector(".hidden-channel-list").remove();
} catch (e) {}
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;
if (socket === undefined) {
no_socket = false;
if (window.location.port != "") {
add = add + ":" + window.location.port + "/";
}
socket = io.connect(
"" + add,
connection_options
);
socket.on("update_required", function(msg) {
if (window.location.hostname == "localhost") {
console.log(msg);
return;
}
window.location.reload(true);
});
}
if (
document.querySelectorAll("#alreadyfp").length === 0 ||
Helper.mobilecheck() ||
!socket._callbacks.$playlists ||
user_auth_avoid
) {
setup_playlist_listener();
}
/*M.Modal.init(document.getElementById("about"));
M.Modal.init(document.getElementById("help"));
M.Modal.init(document.getElementById("contact"));*/
var elem = document.querySelector("select");
document.querySelector(".no-jump-select").remove();
M.FormSelect.init(elem);
Helper.log(["Sending frontpage_lists", "Socket"]);
Crypt.init();
if (Crypt.get_offline()) {
change_offline(true, offline);
} else {
if (!Helper.mobilecheck()) {
Helper.tooltip("#offline-mode", {
delay: 5,
position: "bottom",
html: "Enable local mode"
});
}
}
if (!Helper.mobilecheck()) {
Helper.tooltip("#frontpage-viewer-counter", {
delay: 5,
position: "bottom",
html: "Total Viewers"
});
Helper.tooltip("#client-mode-button", {
delay: 5,
position: "bottom",
html: "Client mode"
});
Helper.tooltip(".generate-channel-name", {
delay: 5,
position: "bottom",
html: "Generate name"
});
}
Frontpage.get_frontpage_lists();
Helper.css("#channel-load", "display", "none");
//Materialize.toast("<a href='/remote' style='color:white;'>Try out our new feature, remote!</a>", 8000)
if (window.location.hash == "#donation") {
window.location.hash = "#";
M.Modal.init(document.getElementById("donation"));
M.Modal.getInstance(document.getElementById("donation")).open();
}
//var pad = 0;
/*$(".zicon").on("click", function(e) {
e.preventDefault();
pad += 10;
Helper.css(".zicon", "padding-left", pad + "vh");
if(pad >= 80)
window.location.href = 'http://etys.no';
});*/
if (!Helper.mobilecheck() && Frontpage.winter) {
document
.getElementsByClassName("mega")[0]
.insertAdjacentHTML("afterbegin", '<div id="snow"></div>');
}
if (Frontpage.pride()) {
Helper.addClass("#fp-nav", "pride-background");
}
if (Helper.mobilecheck()) {
//$('input#autocomplete-input').characterCounter();
}
window["__onGCastApiAvailable"] = function(loaded, errorInfo) {
if (loaded) {
chromecastReady = true;
} else {
}
};
},
share_link_modifier: function() {
document
.getElementById("facebook-code-link")
.setAttribute(
"href",
"https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/"
);
document
.getElementById("facebook-code-link")
.setAttribute(
"onclick",
"window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/', 'Share Zoff','width=600,height=300'); return false;"
);
document
.getElementById("twitter-code-link")
.setAttribute(
"href",
"https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic"
);
document
.getElementById("twitter-code-link")
.setAttribute(
"onclick",
"window.open('https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;"
);
//$("#qr-code-link").attr("href", "//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=https://zoff.me/&choe=UTF-8&chld=L%7C1");
//$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.me/&choe=UTF-8&chld=L%7C1");
}
};
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
};