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 #337 from zoff-music/refactor/no-jquery

Browse Source 
Refactor/no jquery
This commit is contained in:
Kasper Rynning-Tønnesen
2018-04-25 23:20:43 +02:00
committed by GitHub
parent 5e563110e3 15eeb3cc60
commit ae827d295d
24 changed files with 2529 additions and 2068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@@ -52,7 +52,7 @@ gulp.task('build', function() {
}) })
gulp.task('remotecontroller', function () { gulp.task('remotecontroller', function () {
gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/remotecontroller.js']) gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/remotecontroller.js', 'server/public/assets/js/helpers.js'])
.pipe(uglify({ .pipe(uglify({
mangle: true, mangle: true,
compress: true, compress: true,

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

@@ -1481,9 +1481,13 @@ margin:-1px;
overflow-x: hidden; overflow-x: hidden;
} }
.empty-inner-results {
height: calc(100vh - 64px) !important;
}
#empty-results { #empty-results {
text-align:center; text-align:center;
height:100px; height:calc(100vh - 64px);
cursor: default; cursor: default;
} }

126
server/public/assets/js/admin.js
View File

@@ -9,15 +9,15 @@ var Admin = {
w_p = false; w_p = false;
if(Admin.logged_in) { if(Admin.logged_in) {
$("#thumbnail_form").css("display", "inline-block"); Helper.css("#thumbnail_form", "display", "inline-block");
$("#description_form").css("display", "inline-block"); Helper.css("#description_form", "display", "inline-block");
$("#user_suggests").removeClass("hide"); Helper.removeClass("#user_suggests", "hide");
$("#user-suggest-html").removeClass("hide"); Helper.removeClass("#user-suggest-html", "hide");
if($(".suggested-badge").text() != "0" && $(".suggested-badge").text() != "") { if(Helper.html(".suggested-badge") != "0" && Helper.html(".suggested-badge") != "") {
$(".suggested-badge").removeClass("hide"); Helper.removeClass(".suggested-badge", "hide");
} }
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#chan_thumbnail').tooltip({ Helper.tooltip('#chan_thumbnail', {
delay: 5, delay: 5,
position: "left", position: "left",
html: "imgur link" html: "imgur link"
@@ -26,38 +26,38 @@ var Admin = {
} else { } else {
Admin.hideUserSuggested(); Admin.hideUserSuggested();
} }
$(".delete-context-menu").removeClass("context-menu-disabled"); Helper.removeClass(".delete-context-menu", "context-menu-disabled");
names = ["vote","addsongs","longsongs","frontpage", "allvideos", names = ["vote","addsongs","longsongs","frontpage", "allvideos",
"removeplay", "skip", "shuffle", "userpass"]; "removeplay", "skip", "shuffle", "userpass"];
//Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass); //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass);
for (var i = 0; i < names.length; i++) { for (var i = 0; i < names.length; i++) {
$("input[name="+names[i]+"]").attr("disabled", false); document.getElementsByName(names[i])[0].removeAttribute("disabled");
} }
$(".card-action").removeClass("hide"); Helper.removeClass(".card-action", "hide");
$("#admin-lock").addClass("clickable"); Helper.addClass("#admin-lock", "clickable");
$("#admin-lock").html("lock_open"); document.getElementById("admin-lock").innerHTML = "lock_open";
if(!Helper.mobilecheck()){ if(!Helper.mobilecheck()){
$('#admin-lock').tooltip({ Helper.tooltip('#admin-lock', {
delay: 5, delay: 5,
position: "left", position: "left",
html: "Logout" html: "Logout"
}); });
} }
$("#password").val(""); document.getElementById("password").value = "";
$("#password").attr("placeholder", "Change admin password"); document.getElementById("password").setAttribute("placeholder", "Change admin password");
$(".user-password-li").removeClass("hide"); Helper.removeClass(".user-password-li", "hide");
$(".delete-all").removeClass("hide"); Helper.removeClass(".delete-all", "hide");
if($(".password_protected").prop("checked")) { if(document.getElementsByClassName("password_protected")[0].checked) {
$(".change_user_pass").removeClass("hide"); Helper.removeClass(".change_user_pass", "hide");
} }
if($("#admin-lock").html() != "lock_open"){ if(Helper.html("#admin-lock") != "lock_open"){
$("#admin-lock").addClass("clickable"); Helper.addClass("#admin-lock", "clickable");
$("#admin-lock").html("lock_open"); document.getElementById("admin-lock").innerHTML = "lock_open";
if(!Helper.mobilecheck()){ if(!Helper.mobilecheck()){
$('#admin-lock').tooltip({ Helper.tooltip('#admin-lock', {
delay: 5, delay: 5,
position: "left", position: "left",
html: "Logout" html: "Logout"
@@ -67,15 +67,9 @@ var Admin = {
}, },
hideUserSuggested: function() { hideUserSuggested: function() {
if(!$("#user_suggests").hasClass("hide")) { Helper.addClass("#user_suggests", "hide")
$("#user_suggests").addClass("hide") Helper.addClass("#user-suggest-html", "hide");
} Helper.addClass(".suggested-badge", "hide");
if(!$("#user-suggest-html").hasClass("hide")) {
$("#user-suggest-html").addClass("hide");
}
if(!$(".suggested-badge").hasClass("hide")) {
$(".suggested-badge").addClass("hide");
}
}, },
conf: function(msg) { conf: function(msg) {
@@ -119,43 +113,34 @@ var Admin = {
names = ["vote","addsongs","longsongs","frontpage", "allvideos", names = ["vote","addsongs","longsongs","frontpage", "allvideos",
"removeplay", "skip", "shuffle"]; "removeplay", "skip", "shuffle"];
document.getElementById("password").value = ""; document.getElementById("password").value = "";
$("#thumbnail_form").css("display", "none"); Helper.css("#thumbnail_form", "display", "none");
$("#description_form").css("display", "none"); Helper.css("#description_form", "display", "none");
for (i = 0; i < names.length; i++) { for (i = 0; i < names.length; i++) {
$("input[name="+names[i]+"]").attr("disabled", true); document.getElementsByName(names[i])[0].setAttribute("disabled", true);
} }
if($("#admin-lock").html() != "lock") { if(Helper.html("#admin-lock") != "lock") {
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#admin-lock').tooltip("destroy"); Helper.tooltip('#admin-lock', "destroy");
//$('#admin-lock').tooltip('destroy');
} }
$("#admin-lock").removeClass("clickable"); Helper.removeClass("#admin-lock", "clickable");
$("#admin-lock").html("lock"); document.getElementById("admin-lock").innerHTML = "lock";
} }
if(!$(".user-password-li").hasClass("hide")) {
$(".user-password-li").addClass("hide") Helper.addClass(".user-password-li", "hide");
Helper.addClass(".delete-all", "hide");
if(document.getElementsByClassName("password_protected")[0].checked) {
Helper.removeClass(".change_user_pass", "hide");
} }
if(!$(".delete-all").hasClass("hide")) { Helper.addClass(".change_user_pass", "hide");
$(".delete-all").addClass("hide");
}
if($(".password_protected").prop("checked")) {
$(".change_user_pass").removeClass("hide");
}
if(!$(".change_user_pass").hasClass("hide")) {
$(".change_user_pass").addClass("hide");
}
Admin.hideUserSuggested(); Admin.hideUserSuggested();
$("#admin-lock").removeClass("clickable"); Helper.removeClass("#admin-lock", "clickable");
$("#password").attr("placeholder", "Enter admin password"); document.getElementById("password").setAttribute("placeholder", "Enter admin password");
if(!$(".delete-context-menu").hasClass("context-menu-disabled")) { Helper.addClass(".delete-context-menu", "context-menu-disabled");
$(".delete-context-menu").addClass("context-menu-disabled");
}
}, },
save: function(userpass) { save: function(userpass) {
@@ -177,29 +162,33 @@ var Admin = {
for (var i = 0; i < names.length; i++) { for (var i = 0; i < names.length; i++) {
document.getElementsByName(names[i])[0].checked = (conf_array[names[i]] === true); document.getElementsByName(names[i])[0].checked = (conf_array[names[i]] === true);
$("input[name="+names[i]+"]").attr("disabled", show_disabled); if(show_disabled) {
document.getElementsByName(names[i])[0].setAttribute("disabled", show_disabled);
} else {
document.getElementsByName(names[i])[0].removeAttribute("disabled");
}
} }
if((hasadmin) && !Admin.logged_in) { if((hasadmin) && !Admin.logged_in) {
if($("#admin-lock").html() != "lock") Admin.display_logged_out(); if(Helper.html("#admin-lock") != "lock") Admin.display_logged_out();
} else if(!hasadmin) { } else if(!hasadmin) {
$("#password").attr("placeholder", "Create admin password"); document.getElementById("password").setAttribute("placeholder", "Create admin password");
} else { } else {
if($(".password_protected").prop("checked")) { if(document.getElementsByClassName("password_protected")[0].checked) {
$(".change_user_pass").removeClass("hide"); Helper.removeClass(".change_user_pass", "hide");
} }
} }
if(!$(".password_protected").prop("checked") && !$(".change_user_pass").hasClass("hide")) { if(!document.getElementsByClassName("password_protected")[0].checked) {
$(".change_user_pass").addClass("hide"); Helper.addClass(".change_user_pass", "hide");
//Crypt.remove_userpass(chan.toLowerCase()); //Crypt.remove_userpass(chan.toLowerCase());
} }
if(conf_array.thumbnail != undefined && conf_array.thumbnail != "") { if(conf_array.thumbnail != undefined && conf_array.thumbnail != "") {
$("#thumbnail_image").html("<img id='thumbnail_image_channel' src='" + conf_array.thumbnail + "' alt='thumbnail' />"); document.getElementById("thumbnail_image").innerHTML = "<img id='thumbnail_image_channel' src='" + conf_array.thumbnail + "' alt='thumbnail' />";
} }
if(conf_array.description != undefined && conf_array.description != "") { if(conf_array.description != undefined && conf_array.description != "") {
$("#description_area").html(conf_array.description); document.getElementById("description_area").innerHTML = conf_array.description;
} }
}, },
@@ -233,7 +222,8 @@ var Admin = {
}, },
hide_settings: function() { hide_settings: function() {
$('.sidenav').sidenav('close'); var sidenavElem = document.getElementsByClassName("sidenav")[0];
M.Sidenav.getInstance(sidenavElem).close();
}, },
shuffle: function() { shuffle: function() {

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

@@ -1,28 +1,26 @@
var Channel = { var Channel = {
init: function() { init: function() {
if(client) { if(client) {
$(".tabs").addClass("hide"); Helper.addClass(".tabs", "hide");
$("#wrapper").removeClass("tabs_height"); Helper.removeClass("#wrapper", "tabs_height");
$("#wrapper").addClass("client-wrapper"); Helper.addClass("#wrapper", "client-wrapper");
//$(".embed-button-footer").addClass("hide");
//$(".skip_next_client").removeClass("hide");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$(".skip_next_client").tooltip({ Helper.tooltip(".skip_next_client", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Skip" html: "Skip"
}); });
} }
$("#chan").addClass("chan-client"); Helper.addClass("#chan", "chan-client");
$("#results").addClass("client-results-height"); Helper.addClass("#results", "client-results-height");
$(".pagination-results").addClass("client-pagination-height"); Helper.addClass(".pagination-results", "client-pagination-height");
$(".control-list").addClass("client-control-list"); Helper.addClass(".control-list", "client-control-list");
} }
if(!Admin.logged_in) Admin.display_logged_out(); if(!Admin.logged_in) Admin.display_logged_out();
number_suggested = 0; number_suggested = 0;
var no_socket = true; var no_socket = true;
chan = $("#chan").html(); chan = Helper.html("#chan");
mobile_beginning = Helper.mobilecheck(); mobile_beginning = Helper.mobilecheck();
var side = Helper.mobilecheck() ? "left" : "right"; var side = Helper.mobilecheck() ? "left" : "right";
@@ -35,7 +33,7 @@ var Channel = {
}; };
if(window.location.hostname == "fb.zoff.me") { if(window.location.hostname == "fb.zoff.me") {
$("footer").addClass("hide"); Helper.addClass("footer", "hide");
} }
if(window.location.hostname != "fb.zoff.me") Channel.share_link_modifier(); if(window.location.hostname != "fb.zoff.me") Channel.share_link_modifier();
@@ -45,65 +43,53 @@ var Channel = {
if(Player !== undefined && !client) Player.stopInterval= false; if(Player !== undefined && !client) Player.stopInterval= false;
if(!client) { if(!client) {
//$('ul.playlist-tabs').tabs(); //Helper.tabs('.playlist-tabs');
$('ul.playlist-tabs-loggedIn').tabs(); Helper.tabs('.playlist-tabs-loggedIn');
$('ul.chatTabs').tabs(); Helper.tabs('.chatTabs');
} }
$(".sidenav").sidenav({ var sidenavElem = document.getElementsByClassName("sidenav")[0];
M.Sidenav.init(sidenavElem, {
menuWidth: 310, menuWidth: 310,
edge: side, edge: side,
closeOnClick: false, closeOnClick: false,
draggable: false, draggable: false,
onOpenStart: function(el) { onOpenStart: function(el) {
if(!$(".hamburger-sidenav").hasClass("open")) { Helper.addClass(".hamburger-sidenav", "open");
$(".hamburger-sidenav").addClass("open");
}
$('*[id*=sidenav-overlay]:visible').each(function(i) {
if(i > 0) {
this.remove();
}
});
}, },
onCloseStart: function(el) { onCloseStart: function(el) {
$(".hamburger-sidenav").removeClass("open"); Helper.removeClass(".hamburger-sidenav", "open");
$('*[id*=sidenav-overlay]:visible').each(function(i) {
if(i > 0) {
this.remove();
}
});
}, },
}); });
$('.collapsible').collapsible({ M.Collapsible.init(document.getElementsByClassName("settings-collapsible")[0], {
accordion : true accordion : true
}); });
if(!client) { if(!client) {
$("#embed").modal(); M.Modal.init(document.getElementById("embed"));
} else { } else {
//$("#help").remove(); Helper.removeElement("#embed");
$("#embed").remove(); Helper.removeElement(".embed-button-footer");
//$(".help-button-footer").remove(); Helper.removeElement(".tabs");
$(".embed-button-footer").remove();
$(".tabs").remove();
} }
$("#help").modal(); M.Modal.init(document.getElementById("help"));
$("#contact").modal(); M.Modal.init(document.getElementById("contact"));
$("#channel-share-modal").modal(); M.Modal.init(document.getElementById("channel-share-modal"));
$("#delete_song_alert").modal({ M.Modal.init(document.getElementById("delete_song_alert"), {
dismissible: false dismissible: false
}); });
$("#user_password").modal({ M.Modal.init(document.getElementById("user_password"), {
dismissible: false dismissible: false
}); });
Channel.spotify_is_authenticated(spotify_authenticated); Channel.spotify_is_authenticated(spotify_authenticated);
result_html = $("#temp-results-container"); result_html = document.getElementById("temp-results-container");
pagination_buttons_html = $("<div>").append($(".pagination-results").clone()).html(); pagination_buttons_html = "<div class='pagination-results'>" + document.getElementsByClassName("pagination-results")[0].cloneNode(true).innerHTML + "</div>";
empty_results_html = $("#empty-results-container").html(); empty_results_html = Helper.html("#empty-results-container");
not_import_html = $(".not-imported-container").html(); not_import_html = Helper.html(".not-imported-container");
not_export_html = $(".not-exported-container").html(); not_export_html = Helper.html(".not-exported-container");
$(".not-imported-container").empty(); Helper.setHtml(".not-imported-container", "");
$(".not-exported-container").empty(); Helper.setHtml(".not-exported-container", "");
if(socket === undefined){ if(socket === undefined){
no_socket = false; no_socket = false;
@@ -122,21 +108,23 @@ var Channel = {
setup_auth_listener(); setup_auth_listener();
if(Crypt.get_offline()){ if(Crypt.get_offline()){
$(".offline_switch_class")[0].checked = true; document.getElementsByClassName("offline_switch_class")[0].checked = true;
change_offline(true, offline); change_offline(true, offline);
} }
if(!Helper.mobilecheck() && ($("#alreadychannel").length === 0 || !Hostcontroller.old_id || $("#code-text").text().toUpperCase() == "ABBADUR")) setup_host_initialization(); if(!Helper.mobilecheck() && (document.querySelectorAll("#alreadychannel").length === 0 || !Hostcontroller.old_id || document.getElementById("code-text").innerText.toUpperCase() == "ABBADUR")) setup_host_initialization();
if($("#alreadychannel").length === 0 || Helper.mobilecheck()){ if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
setup_youtube_listener(); setup_youtube_listener();
get_list_listener(); get_list_listener();
setup_suggested_listener(); setup_suggested_listener();
if(!client) {
setup_viewers_listener(); setup_viewers_listener();
}
} else { } else {
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
$("#player").css("opacity", "1"); Helper.css("#player", "opacity", "1");
$("#controls").css("opacity", "1"); Helper.css("#controls", "opacity", "1");
$(".playlist").css("opacity", "1"); Helper.css(".playlist", "opacity", "1");
if(!client) { if(!client) {
Player.readyLooks(); Player.readyLooks();
Playercontrols.initYoutubeControls(Player.player); Playercontrols.initYoutubeControls(Player.player);
@@ -144,75 +132,75 @@ var Channel = {
if(player_ready) { if(player_ready) {
Player.player.setVolume(Crypt.get_volume()); Player.player.setVolume(Crypt.get_volume());
} }
$(".video-container").removeClass("no-opacity"); Helper.removeClass(".video-container", "no-opacity");
var codeURL = "https://remote."+window.location.hostname+"/"+id; var codeURL = "https://remote."+window.location.hostname+"/"+id;
$("#code-text").text(id); Helper.setHtml("#code-text", id);
$("#code-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL); document.getElementById("code-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
$("#code-link").attr("href", codeURL); document.getElementById("code-link").setAttribute("href", codeURL);
} }
} }
if(!client) { if(!client) {
var shareCodeUrl = window.location.protocol + "//client."+window.location.hostname+"/"+chan.toLowerCase(); var shareCodeUrl = window.location.protocol + "//client."+window.location.hostname+"/"+chan.toLowerCase();
$("#share-join-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+shareCodeUrl); document.getElementById("share-join-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+shareCodeUrl);
$("#channel-name-join").text("client." + window.location.hostname + "/" + chan.toLowerCase()); Helper.setHtml("#channel-name-join", "client." + window.location.hostname + "/" + chan.toLowerCase());
} else { } else {
$(".video-container").remove(); Helper.removeElement(".video-container");
$(".offline-panel").remove(); Helper.removeElement(".offline-panel");
$(".remote-panel").remove(); Helper.removeElement(".remote-panel");
$(".mobile-remote-panel").remove(); Helper.removeElement(".mobile-remote-panel");
$(".import-panel").remove(); Helper.removeElement(".import-panel");
$(".export-panel").remove(); Helper.removeElement(".export-panel");
} }
if(no_socket || Helper.mobilecheck()){ if(no_socket || Helper.mobilecheck()){
emit_list(); emit_list();
} }
if(((!localStorage.getItem("_jSeen") || localStorage.getItem("_jSeen") != "seen") && !Helper.mobilecheck()) && !client) { if(((!localStorage.getItem("_jSeen") || localStorage.getItem("_jSeen") != "seen") && !Helper.mobilecheck()) && !client) {
$('.tap-target-join').tapTarget(); var instance = M.TapTarget.init(document.getElementsByClassName('tap-target-join')[0]);
$('.tap-target-join').tapTarget('open'); instance.open();
tap_target_timeout = setTimeout(function() { tap_target_timeout = setTimeout(function() {
$('.tap-target-join').tapTarget('close'); instance.close();
}, 4000); }, 4000);
localStorage.setItem("_jSeen", "seen"); localStorage.setItem("_jSeen", "seen");
} }
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
if(!client) { if(!client) {
$("#chan").tooltip({ Helper.tooltip("#chan", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Show join URL", html: "Show join URL",
}); });
} }
$("#viewers").tooltip({ Helper.tooltip("#viewers", {
delay: 5, delay: 5,
position: "top", position: "top",
html: "Viewers" html: "Viewers"
}); });
$("#fullscreen").tooltip({ Helper.tooltip("#fullscreen", {
delay: 5, delay: 5,
position: "top", position: "top",
html: "Fullscreen" html: "Fullscreen"
}); });
$(".search-btn-container").tooltip({ Helper.tooltip(".search-btn-container", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Search" html: "Search"
}); });
$(".shuffle-btn-container").tooltip({ Helper.tooltip(".shuffle-btn-container", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Shuffle", html: "Shuffle",
}); });
$("#settings").tooltip({ Helper.tooltip("#settings", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Settings", html: "Settings",
@@ -229,9 +217,8 @@ var Channel = {
if(!client) { if(!client) {
Mobile_remote.initiate_volume(); Mobile_remote.initiate_volume();
} }
$(".close-settings").addClass("hide"); Helper.addClass(".close-settings", "hide");
} else { } else {
$('input#chan_description').characterCounter();
if(!client) { if(!client) {
Channel.window_width_volume_slider(); Channel.window_width_volume_slider();
} }
@@ -251,51 +238,52 @@ var Channel = {
if(!Helper.msieversion() && !Helper.mobilecheck() && !client) Notification.requestPermission(); if(!Helper.msieversion() && !Helper.mobilecheck() && !client) Notification.requestPermission();
$(".search_input").focus(); document.getElementsByClassName("search_input")[0].focus();
Helper.sample(); Helper.sample();
if(!Helper.mobilecheck() && !client) { if(!Helper.mobilecheck() && !client) {
$('.castButton').tooltip({ Helper.tooltip('.castButton', {
delay: 5, delay: 5,
position: "top", position: "top",
html: "Cast Zoff to TV" html: "Cast Zoff to TV"
}); });
$("#color_embed").spectrum({ /*$("#color_embed").spectrum({
color: "#808080", color: "#808080",
change: function(c) { change: function(c) {
color = c.toHexString().substring(1); // #ff0000 color = c.toHexString().substring(1); // #ff0000
$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color)); document.getElementById("embed-area").value = embed_code(embed_autoplay, embed_width, embed_height, color);
}, },
appendTo: "#embed", appendTo: "#embed",
containerClassName: 'polyfill-color z-depth-4', containerClassName: 'polyfill-color z-depth-4',
show: function(color) { show: function(color) {
}, },
}); });*/
$(".sp-choose").addClass("hide"); /*Helper.addClass(".sp-choose", "hide");
$(".sp-cancel").addClass("btn-flat waves-effect waves-red"); Helper.addClass(".sp-cancel", "btn-flat waves-effect waves-red");
$(".sp-cancel").removeClass("sp-cancel"); Helper.removeClass(".sp-cancel", "sp-cancel");
$(".sp-button-container").append("<a href='#' class='btn-flat waves-effect waves-green sp-choose-link'>CHOOSE</a>"); document.getElementsByClassName("sp-button-container")[0].insertAdjacentHTML("beforeend", "<a href='#' class='btn-flat waves-effect waves-green sp-choose-link'>CHOOSE</a>");
*/
} }
$(".sp-choose-link").on("click", function(e) { addListener("click", ".sp-choose-link", function(e) {
e.preventDefault(); event.preventDefault();
$(".sp-choose").trigger("click"); document.getElementsByClassName("sp-choose")[0].click();
}); });
$("#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ }); //$("#results" ).hover( function() { Helper.removeClass(".result", "hoverResults"); i = 0; }, function(){ });
$("#search").focus(); document.getElementById("search").focus();
$("#embed-button").css("display", "inline-block"); Helper.css("#embed-button", "display", "inline-block");
$("#embed-area").val(embed_code(embed_autoplay, embed_width, embed_height, color)); document.getElementById("search").setAttribute("placeholder", "Find song on YouTube...");
$("#search").attr("placeholder", "Find song on YouTube...");
if(!$("footer").hasClass("padding-bottom-novideo") && !client) { if(!client) {
$("footer").addClass("padding-bottom-novideo"); Helper.addClass("footer", "padding-bottom-novideo");
document.getElementById("embed-area").value = embed_code(embed_autoplay, embed_width, embed_height, color);
} }
if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck() && !client){ if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck() && !client){
$(".castButton").css("display", "none"); Helper.css(".castButton", "display", "none");
} }
Helper.log(["chromecastAvailable " + chromecastAvailable, "chromecastReady " + chromecastReady]); Helper.log(["chromecastAvailable " + chromecastAvailable, "chromecastReady " + chromecastReady]);
@@ -327,8 +315,8 @@ var Channel = {
seekToClick: function(e){ seekToClick: function(e){
var acceptable = ["bar", "controls", "duration"]; var acceptable = ["bar", "controls", "duration"];
if(acceptable.indexOf($(e.target).attr("id")) >= 0) { if(acceptable.indexOf(e.target.getAttribute("id")) >= 0) {
var total = full_playlist[full_playlist.length - 1].duration / $("#controls").width(); var total = full_playlist[full_playlist.length - 1].duration / document.getElementById("controls").offsetWidth;
total = total * e.clientX; total = total * e.clientX;
if(!chromecastAvailable){ if(!chromecastAvailable){
@@ -349,7 +337,7 @@ var Channel = {
per = 100; per = 100;
else if(duration === 0) else if(duration === 0)
per = 0; per = 0;
$("#bar").width(per+"%"); document.getElementById("bar").style.width = per + "%"
} else { } else {
castSession.sendMessage("urn:x-cast:zoff.me", {type: "seekTo", seekTo: total}); castSession.sendMessage("urn:x-cast:zoff.me", {type: "seekTo", seekTo: total});
} }
@@ -357,38 +345,38 @@ var Channel = {
}, },
seekToMove: function(e){ seekToMove: function(e){
var pos_x = e.clientX - Math.ceil($("#seekToDuration").width() / 2) - 8; var pos_x = e.clientX - Math.ceil(document.getElementById("seekToDuration").outerWidth / 2) - 8;
if(pos_x < 0) pos_x = 0; if(pos_x < 0) pos_x = 0;
else if(pos_x + $("#seekToDuration").width() > $("#controls").width()) { else if(pos_x + document.getElementById("seekToDuration").outerWidth > document.getElementById("controls").outerWidth) {
pos_x = $("#controls").width() - $("#seekToDuration").width(); pos_x = document.getElementById("controls").outerWidth - document.getElementById("seekToDuration").outerWidth;
} }
$("#seekToDuration").css("left", pos_x); Helper.css("#seekToDuration", "left", pos_x);
try{ try{
var total = full_playlist[full_playlist.length - 1].duration / $("#controls").width(); var total = full_playlist[full_playlist.length - 1].duration / document.getElementById("controls").outerWidth;
total = total * e.clientX; total = total * e.clientX;
var _time = Helper.secondsToOther(total); var _time = Helper.secondsToOther(total);
var _minutes = Helper.pad(_time[0]); var _minutes = Helper.pad(_time[0]);
var _seconds = Helper.pad(Math.ceil(_time[1])); var _seconds = Helper.pad(Math.ceil(_time[1]));
$("#seekToDuration").text(_minutes + ":" + _seconds); Helper.setHtml("#seekToDuration", _minutes + ":" + _seconds);
var acceptable = ["bar", "controls", "duration"]; var acceptable = ["bar", "controls", "duration"];
if(acceptable.indexOf($(e.target).attr("id")) >= 0 && dragging) { if(acceptable.indexOf(e.target.getAttribute("id")) >= 0 && dragging) {
$("#bar").width(((100 / duration) * total) + "%"); document.getElementById("bar").style.width(((100 / duration) * total) + "%");
} }
} catch(e){} } catch(e){}
}, },
set_title_width: function(start){ set_title_width: function(start){
if($(window).width() + 8 > 600){ if(window.innerWidth > 600){
var add_width = $(".brand-logo").outerWidth() var add_width = document.getElementsByClassName("brand-logo")[0].offsetWidth
if(start){ if(start){
add_width = $(window).width()*0.15; add_width = window.innerWidth * 0.15;
} }
var test_against_width = $(window).width() - $(".control-list").width() - add_width - 33; var test_against_width = window.innerWidth - document.getElementsByClassName("control-list")[0].offsetWidth - add_width - 33;
title_width = test_against_width; title_width = test_against_width;
$(".title-container").width(title_width); document.getElementsByClassName("title-container")[0].style.width = title_width + "px";
} else { } else {
$(".title-container").width("100%"); document.getElementsByClassName("title-container")[0].style.width = "100%";
} }
}, },
@@ -401,41 +389,40 @@ var Channel = {
"expires_in: " + access_token_data.expires_in "expires_in: " + access_token_data.expires_in
]); ]);
$(".spotify_authenticated").css("display", "block"); Helper.css(".spotify_authenticated", "display", "block");
$(".spotify_unauthenticated").css("display", "none"); Helper.css(".spotify_unauthenticated", "display", "none");
} else { } else {
Helper.log(["Spotify is not authenticated"]); Helper.log(["Spotify is not authenticated"]);
$(".spotify_authenticated").css("display", "none"); Helper.css(".spotify_authenticated", "display", "none");
$(".spotify_unauthenticated").css("display", "block"); Helper.css(".spotify_unauthenticated", "display", "block");
} }
}, },
add_context_menu: function() { add_context_menu: function() {
$(document).on("contextmenu", ".vote-container", function(e) { addListener("contextmenu", ".vote-container", function(e) {
e.preventDefault(); event.preventDefault();
var that = this; var that = this;
contextListener(that, e); contextListener(that, e);
}); });
$(document).on("contextmenu", ".add-suggested", function(e) { addListener("contextmenu", ".add-suggested", function(e) {
e.preventDefault(); event.preventDefault();
var that = this; var that = this;
contextListener(that, e); contextListener(that, e);
}); });
$(document).on("click", ".list-remove", function(e) { addListener("click", ".list-remove", function(e) {
e.preventDefault(); event.preventDefault();
var that = this; var that = this;
contextListener(that, e); contextListener(that, e);
}); });
}, },
share_link_modifier: function(){ share_link_modifier: function(){
$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" + chan.toLowerCase()); document.getElementById("facebook-code-link").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" + chan.toLowerCase());
$("#facebook-code-link").attr("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" + chan.toLowerCase() + "', 'Share Playlist','width=600,height=300'); return false;"); document.getElementById("facebook-code-link").setAttribute("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" + chan.toLowerCase() + "', 'Share Playlist','width=600,height=300'); return false;");
$("#twitter-code-link").attr("href", "https://twitter.com/intent/tweet?url=https://zoff.me/" + chan.toLowerCase() + "&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zoff!&amp;via=zoffmusic"); document.getElementById("twitter-code-link").setAttribute("href", "https://twitter.com/intent/tweet?url=https://zoff.me/" + chan.toLowerCase() + "&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zoff!&amp;via=zoffmusic");
$("#twitter-code-link").attr("onclick", "window.open('https://twitter.com/intent/tweet?url=https://zoff.me/" + chan.toLowerCase() + "/&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;"); document.getElementById("twitter-code-link").setAttribute("onclick", "window.open('https://twitter.com/intent/tweet?url=https://zoff.me/" + chan.toLowerCase() + "/&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
//$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.me/" + chan.toLowerCase() + "&choe=UTF-8&chld=L%7C1");
}, },
window_width_volume_slider: function() { window_width_volume_slider: function() {
@@ -445,31 +432,35 @@ var Channel = {
} else if(window.innerWidth > 600 && slider_type == "vertical") { } else if(window.innerWidth > 600 && slider_type == "vertical") {
slider_type = "horizontal"; slider_type = "horizontal";
Playercontrols.initSlider(); Playercontrols.initSlider();
$(".volume-container").removeClass("hide"); Helper.removeClass(".volume-container", "hide");
} }
}, },
listeners: function(on) { listeners: function(on) {
var scrollListener = function(e) {
if(!programscroll) {
userscroll = true;
if(document.getElementById("chatchannel").scrollTop + document.getElementById("chatchannel").offsetHeight >= document.getElementById("chatchannel").scrollHeight) {
userscroll = false;
}
}
}
var scrollAllListener = function(e) {
if(!programscroll) {
userscroll = true;
if(document.getElementById("chatall").scrollTop+ document.getElementById("chatall").offsetHeight >= document.getElementById("chatall").scrollHeight) {
userscroll = false;
}
}
}
if(!client) {
if(on) { if(on) {
$("#chatchannel").scroll(function(e) { document.getElementById("chatchannel").addEventListener("scroll", scrollListener);
if(!programscroll) { document.getElementById("chatall").addEventListener("scroll", scrollListener);
userscroll = true;
if($("#chatchannel").scrollTop() + $("#chatchannel").innerHeight() >= $("#chatchannel")[0].scrollHeight) {
userscroll = false;
}
}
});
$("#chatall").scroll(function(e) {
if(!programscroll) {
userscroll = true;
if($("#chatall").scrollTop() + $("#chatall").innerHeight() >= $("#chatall")[0].scrollHeight) {
userscroll = false;
}
}
})
} else { } else {
$("#chatchannel").off("scroll"); document.getElementById("chatchannel").removeEventListener("scroll", scrollListener);
$("#chatall").off("scroll"); document.getElementById("chatall").removeEventListener("scroll", scrollAllListener);
}
} }
}, },
@@ -482,7 +473,7 @@ var Channel = {
Admin.beginning = true; Admin.beginning = true;
chan = url_split[3].replace("#", ""); chan = url_split[3].replace("#", "");
$("#chan").html(Helper.upperFirst(chan)); document.getElementById("chan").innerHTML = Helper.upperFirst(chan);
var add = ""; var add = "";
w_p = true; w_p = true;
if(private_channel) add = Crypt.getCookie("_uI") + "_"; if(private_channel) add = Crypt.getCookie("_uI") + "_";
@@ -496,15 +487,14 @@ var Channel = {
var channel_before_move = chan.toLowerCase(); var channel_before_move = chan.toLowerCase();
clearTimeout(timed_remove_check); clearTimeout(timed_remove_check);
changing_to_frontpage = true; changing_to_frontpage = true;
//$.contextMenu( 'destroy', ".playlist-element" );
user_change_password = false; user_change_password = false;
clearTimeout(width_timeout); clearTimeout(width_timeout);
if(fireplace_initiated){ if(fireplace_initiated){
fireplace_initiated = false; fireplace_initiated = false;
Player.fireplace.destroy(); Player.fireplace.destroy();
$("#fireplace_player").css("display", "none"); Helper.css("#fireplace_player", "display", "none");
} }
$("#channel-load").css("display", "block"); Helper.css("#channel-load", "display", "block");
window.scrollTo(0, 0); window.scrollTo(0, 0);
Player.stopInterval = true; Player.stopInterval = true;
@@ -512,34 +502,36 @@ var Channel = {
began = false; began = false;
durationBegun = false; durationBegun = false;
$("#embed-button").css("display", "none"); Helper.css("#embed-button", "display", "none");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('.castButton').tooltip("destroy"); Helper.tooltip('.castButton', "destroy");
$("#viewers").tooltip("destroy"); Helper.tooltip("#viewers", "destroy");
//$('.castButton-unactive').tooltip("destroy"); Helper.tooltip("#offline-mode", "destroy");
$("#offline-mode").tooltip("destroy"); if(M.Tooltip.getInstance(document.getElementById("chan_thumbnail")) != undefined) {
if(M.Tooltip.getInstance($("#chan_thumbnail")) != undefined) { Helper.tooltip('#chan_thumbnail', "destroy");
$('#chan_thumbnail').tooltip("destroy");
} }
$('#fullscreen').tooltip("destroy"); Helper.tooltip('#fullscreen', "destroy");
if(M.Tooltip.getInstance($("#admin-lock")) != undefined) { if(M.Tooltip.getInstance(document.getElementById("admin-lock")) != undefined) {
$('#admin-lock').tooltip("destroy"); Helper.tooltip('#admin-lock', "destroy");
} }
$(".search-btn-container").tooltip("destroy"); Helper.tooltip(".search-btn-container", "destroy");
$(".shuffle-btn-container").tooltip("destroy"); Helper.tooltip(".shuffle-btn-container", "destroy");
$("#settings").tooltip("destroy"); Helper.tooltip("#settings", "destroy");
} }
$("#seekToDuration").remove(); Helper.removeElement("#seekToDuration");
$(".sidenav").sidenav("destroy");
M.Sidenav.getInstance(document.getElementsByClassName("sidenav")[0]).destroy();
if(!client) { if(!client) {
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#chan").tooltip("destroy"); Helper.tooltip("#chan", "destroy");
} }
if(M.TapTarget.getInstance($(".tap-target"))) { var tap_1 = document.querySelectorAll(".tap-target")
$('.tap-target').tapTarget('close'); if(tap_1.length > 0 && M.TapTarget.getInstance(tap_1[0])) {
M.TapTarget.getInstance(tap_1[0]).close();
} }
if(M.TapTarget.getInstance($(".tap-target-join"))) { var tap_2 = document.querySelectorAll(".tap-target-join")
$('.tap-target-join').tapTarget('close'); if(tap_2.length > 0 && M.TapTarget.getInstance(tap_2[0])) {
M.TapTarget.getInstance(tap_2[0]).close();
} }
} }
clearTimeout(tap_target_timeout); clearTimeout(tap_target_timeout);
@@ -571,8 +563,9 @@ var Channel = {
socket.removeEventListener("suggested"); socket.removeEventListener("suggested");
socket.removeEventListener("color"); socket.removeEventListener("color");
socket.removeEventListener("chat_history"); socket.removeEventListener("chat_history");
$.ajax({ Helper.ajax({
url: "/", url: "/",
method: "GET",
success: function(e){ success: function(e){
if(!client) { if(!client) {
@@ -586,18 +579,18 @@ var Channel = {
song_title = ""; song_title = "";
} }
$("meta[name=theme-color]").attr("content", "#2D2D2D"); document.querySelectorAll("meta[name=theme-color]")[0].setAttribute("content", "#2D2D2D");
if(!Helper.mobilecheck() && !user_auth_avoid){ if(!Helper.mobilecheck() && !user_auth_avoid){
$("#playbar").remove(); Helper.removeElement("#playbar");
$("#main_components").remove(); Helper.removeElement("#main_components");
$("#player").addClass("player_bottom"); Helper.addClass("#player", "player_bottom");
$("#main-row").addClass("frontpage_modified_heights"); Helper.addClass("#main-row", "frontpage_modified_heights");
$("#player").css("opacity", "1"); Helper.css("#player", "opacity", "1");
$("#video-container").removeClass("no-opacity"); Helper.removeClass("#video-container", "no-opacity");
$("#main-row").prepend("<div id='player_bottom_overlay' class='player player_bottom'></div>"); document.getElementById("main-row").insertAdjacentHTML("afterbegin", "<div id='player_bottom_overlay' class='player player_bottom'></div>");
$("#player_bottom_overlay").append("<a id='closePlayer' title='Close Player'>X</a>"); document.getElementById("player_bottom_overlay").insertAdjacentHTML("afterbegin", "<a id='closePlayer' title='Close Player'>X</a>");
$("#playlist").remove(); Helper.removeElement("#playlist");
} else { } else {
try{ try{
Player.player.destroy(); Player.player.destroy();
@@ -606,25 +599,27 @@ var Channel = {
document.title = "Zoff"; document.title = "Zoff";
} }
var response = $("<div>" + e + "</div>"); var response = document.createElement("div");
response.innerHTML = e;
Helper.removeElement("#sidenav-overlay");
document.getElementsByTagName("main")[0].className = "center-align container";
Helper.removeClass("#main-container", "channelpage");
document.getElementById("main-container").setAttribute("style", "");
document.getElementsByTagName("header")[0].innerHTML = response.querySelectorAll("header")[0].outerHTML;
//$(".drag-target").remove(); document.getElementsByTagName("header")[0].insertAdjacentHTML("afterend", response.querySelectorAll(".section.mega")[0].outerHTML);
$("#sidenav-overlay").remove(); //document.getElementsByTagName("header")[0].insertAdjacentHTML("afterend", response.querySelectorAll(".section.mobile-search")[0].innerHTML);
$("main").attr("class", "center-align container"); if(Helper.mobilecheck() || user_auth_avoid) {
$("#main-container").removeClass("channelpage"); document.getElementsByTagName("main")[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
$("#main-container").attr("style", ""); } else {
$("header").html($(response.find("header")).html()); document.getElementsByTagName("main")[0].insertAdjacentHTML("beforeend", response.querySelectorAll("#main_section_frontpage")[0].outerHTML);
$($(response.find(".section.mega"))).insertAfter("header"); }
$($(response.find(".section.mobile-search"))).insertAfter(".mega"); Helper.removeClass(".page-footer", "padding-bottom-extra");
if(Helper.mobilecheck() || user_auth_avoid) $("main").html($(response.find("main")).html()); Helper.removeClass(".page-footer", "padding-bottom-novideo");
else $("main").append($(response.find("#main_section_frontpage")).wrap("<div>").parent().html()); document.getElementById("favicon").setAttribute("href", "/assets/images/favicon-32x32.png");
$(".page-footer").removeClass("padding-bottom-extra");
$(".page-footer").removeClass("padding-bottom-novideo");
$("#favicon").attr("href", "/assets/images/favicon-32x32.png");
//$(".context-menu-list").remove();
Helper.log(["Socket", socket]); Helper.log(["Socket", socket]);
if($("#alreadyfp").length == 1){ if(document.querySelectorAll("#alreadyfp").length == 1){
Frontpage.init(); Frontpage.init();
}else { }else {
fromChannel = true; fromChannel = true;
@@ -633,12 +628,12 @@ var Channel = {
} }
changing_to_frontpage = false; changing_to_frontpage = false;
if($("#alreadychannel").length === 0 && !user_auth_avoid){ if(document.querySelectorAll("#alreadychannel").length === 0 && !user_auth_avoid){
$("head").append("<div id='alreadychannel'></div"); document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<div id='alreadychannel'></div");
} else if(user_auth_avoid) { } else if(user_auth_avoid) {
$("#alreadychannel").remove(); Helper.removeElement("#alreadychannel");
} }
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
user_auth_avoid = false; user_auth_avoid = false;
} }
}); });

57
server/public/assets/js/chat.js
View File

@@ -42,9 +42,9 @@ var Chat = {
if(data.value.startsWith("/name ")){ if(data.value.startsWith("/name ")){
Chat.namechange(data.value.substring(6), false); Chat.namechange(data.value.substring(6), false);
} else if(data.value.startsWith("/help")) { } else if(data.value.startsWith("/help")) {
if($(".chat-tab-li a.active").attr("href") == "#all_chat"){ if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat"){
if($("#chatall").children().length > 100) { if(document.querySelector("#chatall").children.length > 100) {
$("#chatall").children()[0].remove() document.querySelector("#chatall").children[0].remove()
} }
for(var x = 0; x < Chat.chat_help.length; x++) { for(var x = 0; x < Chat.chat_help.length; x++) {
var color = Helper.intToARGB(Helper.hashCode("System")); var color = Helper.intToARGB(Helper.hashCode("System"));
@@ -55,14 +55,14 @@ var Chat = {
} }
color = Helper.hexToRgb(color.substring(0,6)); color = Helper.hexToRgb(color.substring(0,6));
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false); var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
$("#chatall").append("<li title='Zoff''><span style='color:"+color_temp+";'>System</span>: </li>"); document.querySelector("#chatall").insertAdjacentHTML("beforeend", "<li title='Zoff''><span style='color:"+color_temp+";'>System</span>: </li>");
var in_text = document.createTextNode(Chat.chat_help[x]); var in_text = document.createTextNode(Chat.chat_help[x]);
$("#chatall li:last")[0].appendChild(in_text); document.querySelector("#chatall").children[document.querySelector("#chatall").children.length - 1].appendChild(in_text);
document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight; document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight;
} }
} else { } else {
if($("#chatchannel").children().length > 100) { if(document.querySelector("#chatchannel").children.length > 100) {
$("#chatchannel").children()[0].remove() document.querySelector("#chatchannel").children[0].remove()
} }
for(var x = 0; x < Chat.chat_help.length; x++) { for(var x = 0; x < Chat.chat_help.length; x++) {
@@ -74,15 +74,14 @@ var Chat = {
} }
color = Helper.hexToRgb(color.substring(0,6)); color = Helper.hexToRgb(color.substring(0,6));
var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false); var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
$("#chatchannel").append("<li><span style='color:"+color_temp+";'>System</span>: </li>"); document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "<li><span style='color:"+color_temp+";'>System</span>: </li>");
var in_text = document.createTextNode(Chat.chat_help[x]); var in_text = document.createTextNode(Chat.chat_help[x]);
$("#chatchannel li:last")[0].appendChild(in_text);
document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight; document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight;
} }
} }
} else if(data.value.startsWith("/removename")) { } else if(data.value.startsWith("/removename")) {
Chat.removename(); Chat.removename();
} else if($(".chat-tab-li a.active").attr("href") == "#all_chat") { } else if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat") {
socket.emit("all,chat", {channel: chan.toLowerCase(), data: data.value}); socket.emit("all,chat", {channel: chan.toLowerCase(), data: data.value});
} else { } else {
socket.emit("chat", {channel: chan.toLowerCase(), data: data.value}); socket.emit("chat", {channel: chan.toLowerCase(), data: data.value});
@@ -94,22 +93,20 @@ var Chat = {
allchat: function(inp, time_sent, disable_blink) { allchat: function(inp, time_sent, disable_blink) {
if(inp.msg.substring(0,1) == ":" && !chat_active && !disable_blink) { if(inp.msg.substring(0,1) == ":" && !chat_active && !disable_blink) {
Chat.all_received += 1; Chat.all_received += 1;
$("#favicon").attr("href", "/assets/images/highlogo.png"); document.querySelector("#favicon").getAttribute("href", "/assets/images/highlogo.png");
unseen = true; unseen = true;
chat_unseen = true; chat_unseen = true;
if($(".chat-link span.badge.new.white").hasClass("hide")){ Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
$(".chat-link span.badge.new.white").removeClass("hide");
}
var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received; var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
$(".chat-link span.badge.new.white").html(to_display); Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
} }
if(document.hidden) { if(document.hidden) {
$("#favicon").attr("href", "/assets/images/highlogo.png"); document.getElementById("favicon").setAttribute("href", "/assets/images/highlogo.png");
} }
if($("#chatall").children().length > 100) { if(document.querySelector("#chatall").children.length > 100) {
$("#chatall").children()[0].remove() document.querySelector("#chatall").children[0].remove()
} }
var color = Helper.intToARGB(Helper.hashCode(inp.from)); var color = Helper.intToARGB(Helper.hashCode(inp.from));
if(color.length < 6) { if(color.length < 6) {
@@ -129,9 +126,9 @@ var Chat = {
_time = new Date(time_sent); _time = new Date(time_sent);
} }
var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes()); var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
$("#chatall").append("<li title='"+inp.channel+"'><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+inp.from+"</span><span class='channel-info-all-chat'> " + inp.channel + " </span></li>"); document.querySelector("#chatall").insertAdjacentHTML("beforeend", "<li title='"+inp.channel+"'><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+inp.from+"</span><span class='channel-info-all-chat'> " + inp.channel + " </span></li>");
var in_text = document.createTextNode(inp.msg); var in_text = document.createTextNode(inp.msg);
$("#chatall li:last")[0].appendChild(in_text); document.querySelector("#chatall").children[document.querySelector("#chatall").children.length - 1].appendChild(in_text);
if(!userscroll) { if(!userscroll) {
programscroll = true; programscroll = true;
document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight; document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight;
@@ -141,20 +138,18 @@ var Chat = {
channelchat: function(data, time_sent, disable_blink) { channelchat: function(data, time_sent, disable_blink) {
if(data.msg.substring(0,1) == ":" && !chat_active && !disable_blink) { if(data.msg.substring(0,1) == ":" && !chat_active && !disable_blink) {
$("#favicon").attr("href", "/assets/images/highlogo.png"); document.querySelector("#favicon").setAttribute("href", "/assets/images/highlogo.png");
unseen = true; unseen = true;
chat_unseen = true; chat_unseen = true;
Chat.channel_received += 1; Chat.channel_received += 1;
//blink_interval = setTimeout(Chat.chat_blink, 1000); //blink_interval = setTimeout(Chat.chat_blink, 1000);
if($(".chat-link span.badge.new.white").hasClass("hide")) { Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
$(".chat-link span.badge.new.white").removeClass("hide");
}
var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received; var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
$(".chat-link span.badge.new.white").html(to_display); Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
} }
if($("#chatchannel").children().length > 100) { if(document.querySelector("#chatchannel").children.length > 100) {
$("#chatchannel").children()[0].remove() document.querySelector("#chatchannel").children[0].remove()
} }
var icon_add = ""; var icon_add = "";
@@ -175,9 +170,9 @@ var Chat = {
_time = new Date(time_sent); _time = new Date(time_sent);
} }
var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes()); var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
$("#chatchannel").append("<li><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+data.from+"</span></li>"); document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "<li><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+data.from+"</span> </li>");
var in_text = document.createTextNode(data.msg); var in_text = document.createTextNode(data.msg);
$("#chatchannel li:last")[0].appendChild(in_text); document.querySelector("#chatchannel").children[document.querySelector("#chatchannel").children.length - 1].appendChild(in_text);
if(!userscroll) { if(!userscroll) {
programscroll = true; programscroll = true;
document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight; document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight;
@@ -187,9 +182,9 @@ var Chat = {
chat_blink: function() { chat_blink: function() {
blinking = true; blinking = true;
$(".chat-link").attr("style", "color: grey !important;"); document.querySelector(".chat-link").setAttribute("style", "color: grey !important;");
setTimeout(function () { setTimeout(function () {
$(".chat-link").attr("style", "color: white !important;"); document.querySelector(".chat-link").setAttribute("style", "color: white !important;");
setTimeout(function() { setTimeout(function() {
if(blinking) Chat.chat_blink(); if(blinking) Chat.chat_blink();
}, 1000); }, 1000);

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

@@ -43,7 +43,7 @@ var Crypt = {
);*/ );*/
//return $.parseJSON(decrypted.toString(CryptoJS.enc.Utf8)); //return $.parseJSON(decrypted.toString(CryptoJS.enc.Utf8));
return $.parseJSON(atob(cookie)); return JSON.parse(atob(cookie));
}, },
decrypt_pass: function(pass) { decrypt_pass: function(pass) {

110
server/public/assets/js/embed.js
View File

@@ -6,8 +6,9 @@ var paused = false;
var client = false; var client = false;
var startTime = 0; var startTime = 0;
var socket_connected = false; var socket_connected = false;
var dynamicListeners = {};
var player_ready = false; var player_ready = false;
var list_html = $("#list-song-html").html(); var list_html = document.getElementById("list-song-html").innerHTML;
var w_p = true; var w_p = true;
var lazy_load = false; var lazy_load = false;
var end_programmatically = false; var end_programmatically = false;
@@ -65,24 +66,23 @@ function receiveMessage(event) {
} }
window.addEventListener("message", receiveMessage, false); window.addEventListener("message", receiveMessage, false);
console.log("qq");
$(document).ready(function() { window.addEventListener("DOMContentLoaded", function() {
console.log("ads");
if(hash.length >= 3 && hash[2] == "autoplay"){ if(hash.length >= 3 && hash[2] == "autoplay"){
autoplay = true; autoplay = true;
$("#player").css("visibility", "hidden"); Helper.css("#player", "visibility", "hidden");
} else { } else {
paused = true; paused = true;
} }
if(hash.indexOf("videoonly") > -1) { if(hash.indexOf("videoonly") > -1) {
$("#playlist").addClass("hide"); Helper.addClass("#playlist", "hide");
$("#controls").addClass("hide"); Helper.addClass("#controls", "hide");
$("#player").addClass("video_only"); Helper.addClass("#player", "video_only");
$("#zoffbutton").css("bottom", "0px"); Helper.css("#zoffbutton", "bottom", "0px");
} }
M.Modal.init(document.getElementById("locked_channel"), {
$("#locked_channel").modal({
dismissible: false dismissible: false
}); });
color = "#" + hash[1]; color = "#" + hash[1];
@@ -91,7 +91,7 @@ $(document).ready(function() {
socket = io.connect(''+add+':8080', connection_options); socket = io.connect(''+add+':8080', connection_options);
socket.on('auth_required', function() { socket.on('auth_required', function() {
$("#locked_channel").modal('open'); M.Modal.getInstance(document.getElementById("locked_channel")).open();
}); });
socket.on("get_list", function() { socket.on("get_list", function() {
@@ -121,8 +121,8 @@ $(document).ready(function() {
Playercontrols.initSlider(); Playercontrols.initSlider();
window.setVolume = setVolume; window.setVolume = setVolume;
$("#controls").css("background-color", color); Helper.css("#controls", "background-color", color);
$("#playlist").css("background-color", color); Helper.css("#playlist", "background-color", color);
if(hash.indexOf("controll") > -1) { if(hash.indexOf("controll") > -1) {
Hostcontroller.change_enabled(true); Hostcontroller.change_enabled(true);
} else { } else {
@@ -186,8 +186,8 @@ function toast(msg) {
if(embed) return; if(embed) return;
msg=Helper.rnd(["I added the playlist", "Your playlist has been added", "Yay, many more songs!", "Thats a cool playlist!", "I added all the songs for you", "I see you like adding songs.."]); msg=Helper.rnd(["I added the playlist", "Your playlist has been added", "Yay, many more songs!", "Thats a cool playlist!", "I added all the songs for you", "I see you like adding songs.."]);
document.getElementById("import").disabled = false; document.getElementById("import").disabled = false;
$("#playlist_loader").addClass("hide"); Helper.addClass("#playlist_loader", "hide");
$("#import").removeClass("hide"); Helper.removeClass("#import", "hide");
break; break;
case "savedsettings": case "savedsettings":
if(embed) return; if(embed) return;
@@ -198,10 +198,10 @@ function toast(msg) {
msg=Helper.rnd(["That's not the right password!", "Wrong! Better luck next time...", "You seem to have mistyped the password", "Incorrect. Have you tried meditating?","Nope, wrong password!", "Wrong password. The authorities have been notified."]); msg=Helper.rnd(["That's not the right password!", "Wrong! Better luck next time...", "You seem to have mistyped the password", "Incorrect. Have you tried meditating?","Nope, wrong password!", "Wrong password. The authorities have been notified."]);
//Crypt.remove_pass(chan.toLowerCase()); //Crypt.remove_pass(chan.toLowerCase());
Admin.display_logged_out(); Admin.display_logged_out();
$("#thumbnail_form").css("display", "none"); Helper.css("#thumbnail_form", "display", "none");
$("#description_form").css("display", "none"); Helper.css("#description_form", "display", "none");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#chan_thumbnail').tooltip("destroy"); Helper.tooltip('#chan_thumbnail', "destroy");
} }
w_p = true; w_p = true;
break; break;
@@ -245,20 +245,16 @@ function toast(msg) {
msg=Helper.rnd(["I'm sorry, but you have to be an admin to do that!", "Only admins can do that", "You're not allowed to do that, try logging in!", "I can't let you do that", "Please log in to do that"]); msg=Helper.rnd(["I'm sorry, but you have to be an admin to do that!", "Only admins can do that", "You're not allowed to do that, try logging in!", "I can't let you do that", "Please log in to do that"]);
//Crypt.remove_pass(chan.toLowerCase()); //Crypt.remove_pass(chan.toLowerCase());
Admin.display_logged_out(); Admin.display_logged_out();
$("#thumbnail_form").css("display", "none"); Helper.css("#thumbnail_form", "display", "none");
$("#description_form").css("display", "none"); Helper.css("#description_form", "display", "none");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#chan_thumbnail').tooltip("destroy"); Helper.tooltip('#chan_thumbnail', "destroy");
} }
w_p = true; w_p = true;
if(!$("#playlist_loader").hasClass("hide")) { Helper.addClass("#playlist_loader", "hide");
$("#playlist_loader").addClass("hide"); Helper.addClass("#playlist_loader_spotify", "hide");
} Helper.removeClass("#import_spotify", "hide");
if(!$("#playlist_loader_spotify").hasClass("hide")) { Helper.removeClass("#import", "hide");
$("#playlist_loader_spotify").addClass("hide");
}
$("#import_spotify").removeClass("hide");
$("#import").removeClass("hide");
break; break;
case "noskip": case "noskip":
if(embed) return; if(embed) return;
@@ -290,10 +286,10 @@ function toast(msg) {
tried_again = false; tried_again = false;
adminpass = Crypt.get_pass(chan.toLowerCase()) == undefined ? Crypt.tmp_pass : Crypt.get_pass(chan.toLowerCase()); adminpass = Crypt.get_pass(chan.toLowerCase()) == undefined ? Crypt.tmp_pass : Crypt.get_pass(chan.toLowerCase());
msg="Correct password. You now have access to the sacred realm of The Admin."; msg="Correct password. You now have access to the sacred realm of The Admin.";
$("#thumbnail_form").css("display", "inline-block"); Helper.css("#thumbnail_form", "display", "inline-block");
$("#description_form").css("display", "inline-block"); Helper.css("#description_form", "display", "inline-block");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#chan_thumbnail').tooltip({ Helper.tooltip('#chan_thumbnail', {
delay: 5, delay: 5,
position: "left", position: "left",
html: "imgur link" html: "imgur link"
@@ -331,6 +327,28 @@ function emit() {
} }
} }
function handleEvent(e, target, tried, type) {
if(dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) {
dynamicListeners[type]["#" + target.id].call(target);
return;
} else {
for(var i = 0; i < target.classList.length; i++) {
if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) {
dynamicListeners[type]["." + target.classList[i]].call(target);
return;
}
}
}
if(!tried) {
handleEvent(e, e.target.parentElement, true, type);
}
}
function addListener(type, element, callback) {
if(dynamicListeners[type] == undefined) dynamicListeners[type] = {};
dynamicListeners[type][element] = callback;
}
function before_toast(){ function before_toast(){
/*if($('.toast').length > 0) { /*if($('.toast').length > 0) {
var toastElement = $('.toast').first()[0]; var toastElement = $('.toast').first()[0];
@@ -341,32 +359,36 @@ function before_toast(){
//Materialize.Toast.removeAll(); //Materialize.Toast.removeAll();
} }
$(document).on( "click", "#zoffbutton", function(e) { document.addEventListener("click", function(e) {
handleEvent(e, e.target, false, "click");
}, false);
addListener("click", "#zoffbutton", function(e) {
Player.pauseVideo(); Player.pauseVideo();
window.open("https://zoff.me/" + chan.toLowerCase() + "/", '_blank'); window.open("https://zoff.me/" + chan.toLowerCase() + "/", '_blank');
}); });
$(document).on( "click", ".vote-container", function(e) { addListener("click", ".vote-container", function(e) {
var id = $(this).attr("data-video-id"); var id = this.getAttribute("data-video-id");
List.vote(id, "pos"); List.vote(id, "pos");
}); });
$(document).on("click", ".prev_page", function(e) { addListener("click", ".prev_page", function(e) {
e.preventDefault(); event.preventDefault();
List.dynamicContentPage(-1); List.dynamicContentPage(-1);
}); });
$(document).on("click", ".next_page", function(e) { addListener("click", ".next_page", function(e) {
e.preventDefault(); event.preventDefault();
List.dynamicContentPage(1); List.dynamicContentPage(1);
}); });
$(document).on("click", ".last_page", function(e){ addListener("click", ".last_page", function(e){
e.preventDefault(); event.preventDefault();
List.dynamicContentPage(10); List.dynamicContentPage(10);
}); });
$(document).on("click", ".first_page", function(e){ addListener("click", ".first_page", function(e){
e.preventDefault(); event.preventDefault();
List.dynamicContentPage(-10); List.dynamicContentPage(-10);
}); });

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

@@ -22,8 +22,8 @@ var Frontpage = {
]); ]);
Frontpage.all_channels = msg.channels; Frontpage.all_channels = msg.channels;
if(msg.channels.length == 0) { if(msg.channels.length == 0) {
$("#preloader").css("display", "none"); Helper.css("#preloader", "display", "none");
$("#channel-list-container").append("<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); Frontpage.populate_channels(msg.channels, true);
} }
@@ -31,7 +31,7 @@ var Frontpage = {
}, },
populate_channels: function(lists, popular) { populate_channels: function(lists, popular) {
$("#channels").empty(); document.getElementById("channels").innerHTML = "";
var num = 0; var num = 0;
@@ -64,7 +64,7 @@ var Frontpage = {
Frontpage.add_backdrop(lists, 0); Frontpage.add_backdrop(lists, 0);
} }
pre_card = $(channel_list); pre_card = channel_list;
Helper.log([ Helper.log([
"Pre_card: ", "Pre_card: ",
@@ -83,37 +83,39 @@ var Frontpage = {
} }
var song_count = lists[x].count; var song_count = lists[x].count;
var card = document.createElement("div");
var card = pre_card.clone(); card.innerHTML += pre_card;
//card.innerHTML = card.children[0];
if(song_count > 4) { if(song_count > 4) {
if(lists[x].pinned == 1) { if(lists[x].pinned == 1) {
card.find(".pin").attr("style", "display:block;"); card.querySelector(".pin").setAttribute("style", "display:block;");
//card.find(".card").attr("title", "Featured list"); //card.find(".card").attr("title", "Featured list");
} else { } else {
/*card.find(".pin").attr("style", "display:none;"); /*card.find(".pin").attr("style", "display:none;");
card.find(".card").attr("title", "");*/ card.find(".card").attr("title", "");*/
card.find(".pin").remove(); card.querySelector(".pin").remove();
} }
card.find(".chan-name").text(chan); card.querySelector(".chan-name").innerText = chan;
card.find(".chan-name").attr("title", chan); card.querySelector(".chan-name").setAttribute("title", chan);
card.find(".chan-views").text(viewers); card.querySelector(".chan-views").innerText = viewers;
card.find(".chan-songs").text(song_count); card.querySelector(".chan-songs").innerText = song_count;
card.find(".chan-bg").attr("style", img); card.querySelector(".chan-bg").setAttribute("style", img);
card.find(".chan-link").attr("href", chan + "/"); card.querySelector(".chan-link").setAttribute("href", chan + "/");
if(description != "" && description != undefined && !Helper.mobilecheck()) { if(description != "" && description != undefined && !Helper.mobilecheck()) {
card.find(".card-title").text(chan); card.querySelector(".card-title").innerText = chan;
card.find(".description_text").text(description); card.querySelector(".description_text").innerText = description;
description = ""; description = "";
} else { } else {
card.find(".card-reveal").remove(); card.querySelector(".card-reveal").remove();
card.find(".card").removeClass("sticky-action") Helper.removeClass(card.querySelector(".card"), "sticky-action")
} }
$("#channels").append(card.html()); document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML);
} else { } else {
num--; num--;
} }
} }
num++; num++;
} }
@@ -125,18 +127,18 @@ var Frontpage = {
for(var x in options_list) { for(var x in options_list) {
data[options_list[x]._id] = null; data[options_list[x]._id] = null;
} }
if($(".pin").length == 1 && !Helper.mobilecheck()) { if(document.querySelectorAll(".pin").length == 1 && !Helper.mobilecheck()) {
$($(".pin").parent().parent().parent()).tooltip({ Helper.tooltip(document.querySelectorAll(".pin")[0].parent().parent().parent(), {
delay: 5, delay: 5,
position: "top", position: "top",
html: "Featured playlist" html: "Featured playlist"
}); });
} }
var to_autocomplete = "input.autocomplete"; var to_autocomplete = document.querySelectorAll("input.autocomplete")[0];
//if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search"; //if(Helper.mobilecheck()) to_autocomplete = "input.mobile-search";
$(to_autocomplete).autocomplete({ M.Autocomplete.init(to_autocomplete, {
data: data, data: data,
limit: 5, // The max amount of results that can be shown at once. Default: Infinity. limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
onAutocomplete: function(val) { onAutocomplete: function(val) {
@@ -145,9 +147,10 @@ var Frontpage = {
}); });
document.getElementById("preloader").style.display = "none"; document.getElementById("preloader").style.display = "none";
document.getElementById("channels").style.display = "block";
//Materialize.fadeInImage('#channels'); //Materialize.fadeInImage('#channels');
$("#channels").fadeIn(800); //$("#channels").fadeIn(800);
$("#searchFrontpage").focus(); document.getElementById("autocomplete-input").focus();
num = 0; num = 0;
}, },
@@ -198,11 +201,11 @@ var Frontpage = {
//$(".room-namer").css("opacity", 0); //$(".room-namer").css("opacity", 0);
setTimeout(function(){ setTimeout(function(){
if(frontpage){ if(frontpage){
$("#mega-background").css("background", "url(data:image/png;base64,"+Frontpage.blob_list[i]+")"); Helper.css("#mega-background","background", "url(data:image/png;base64,"+Frontpage.blob_list[i]+")");
$("#mega-background").css("background-size" , "cover"); Helper.css("#mega-background","background-size" , "cover");
$("#mega-background").css("background-repeat" , "no-repeat"); Helper.css("#mega-background","background-repeat" , "no-repeat");
$("#mega-background").css("opacity", 1); Helper.css("#mega-background","opacity", 1);
$(".autocomplete").attr("placeholder", list[i]._id); document.querySelector(".autocomplete").setAttribute("placeholder", list[i]._id);
//$(".room-namer").css("opacity", 1); //$(".room-namer").css("opacity", 1);
} }
},500); },500);
@@ -215,30 +218,31 @@ var Frontpage = {
if(window.location.hostname == "fb.zoff.me") { if(window.location.hostname == "fb.zoff.me") {
add = "https://zoff.me"; add = "https://zoff.me";
} }
$.ajax({ Helper.ajax({
type: "POST", type: "POST",
data: {id:id}, data: {id:id},
url: add + "/api/imageblob", url: add + "/api/imageblob",
headers: {"Content-Type": "application/json;charset=UTF-8"},
success: function(data){ success: function(data){
setTimeout(function(){ setTimeout(function(){
$("#mega-background").css("background", "url(/assets/images/thumbnails/"+data+")"); Helper.css("#mega-background", "background", "url(/assets/images/thumbnails/"+data+")");
$("#mega-background").css("background-size" , "cover"); Helper.css("#mega-background", "background-size" , "cover");
$("#mega-background").css("background-repeat" , "no-repeat"); Helper.css("#mega-background", "background-repeat" , "no-repeat");
$("#mega-background").css("opacity", 1); Helper.css("#mega-background", "opacity", 1);
$(".autocomplete").attr("placeholder", list[i]._id); document.querySelector(".autocomplete").setAttribute("placeholder", list[i]._id);
},500); },500);
}, },
error: function() { error: function() {
$(".autocomplete").attr("placeholder", list[i]._id); document.querySelector(".autocomplete").setAttribute("placeholder", list[i]._id);
} }
}); });
}; };
img.onload = function(){ // Loaded successfully img.onload = function(){ // Loaded successfully
$("#mega-background").css("background", "url("+img.src+")"); Helper.css("#mega-background", "background", "url("+img.src+")");
$("#mega-background").css("background-size" , "cover"); Helper.css("#mega-background", "background-size" , "cover");
$("#mega-background").css("background-repeat" , "no-repeat"); Helper.css("#mega-background", "background-repeat" , "no-repeat");
$("#mega-background").css("opacity", 1); Helper.css("#mega-background", "opacity", 1);
$(".autocomplete").attr("placeholder", list[i]._id); document.querySelector(".autocomplete").setAttribute("placeholder", list[i]._id);
}; };
} }
@@ -259,10 +263,11 @@ var Frontpage = {
if(window.location.hostname == "fb.zoff.me") { if(window.location.hostname == "fb.zoff.me") {
add = "https://zoff.me"; add = "https://zoff.me";
} }
$.ajax({ Helper.ajax({
url: add + "/api/frontpages", url: add + "/api/frontpages",
method: "get", method: "get",
success: function(response){ success: function(response){
response = JSON.parse(response);
Frontpage.frontpage_function(response.results); Frontpage.frontpage_function(response.results);
}, },
error: function() { error: function() {
@@ -302,11 +307,11 @@ var Frontpage = {
}, },
set_viewers: function(viewers) { set_viewers: function(viewers) {
$("#frontpage-viewer-counter").html("<i class='material-icons frontpage-viewers'>visibility</i>" + viewers); document.querySelector("#frontpage-viewer-counter").innerHTML = "<i class='material-icons frontpage-viewers'>visibility</i>" + viewers;
}, },
to_channel: function(new_channel, popstate) { to_channel: function(new_channel, popstate) {
$("#channel-load").css("display", "block"); Helper.css("#channel-load", "display", "block");
window.scrollTo(0, 0); window.scrollTo(0, 0);
frontpage = false; frontpage = false;
new_channel = new_channel.toLowerCase(); new_channel = new_channel.toLowerCase();
@@ -315,19 +320,19 @@ var Frontpage = {
Helper.log(["removing all listeners"]); Helper.log(["removing all listeners"]);
removeAllListeners(); removeAllListeners();
} }
$("#main-container").css("background-color", "#2d2d2d"); Helper.css("#main-container", "background-color", "#2d2d2d");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#frontpage-viewer-counter").tooltip("destroy"); Helper.tooltip("#frontpage-viewer-counter", "destroy");
$(".generate-channel-name").tooltip("destroy"); Helper.tooltip(".generate-channel-name", "destroy");
$("#offline-mode").tooltip("destroy"); Helper.tooltip("#offline-mode", "destroy");
$("#client-mode-button").tooltip("destroy"); Helper.tooltip("#client-mode-button", "destroy");
if($(".pin").length == 1) { if(document.querySelectorAll(".pin").length == 1) {
$($(".pin").parent().parent().parent()).tooltip("destroy"); Helper.tooltip(document.querySelectorAll(".pin")[0].parent().parent().parent(), "destroy");
} }
} }
currently_showing_channels = 1; currently_showing_channels = 1;
clearTimeout(retry_frontpage); clearTimeout(retry_frontpage);
$.ajax({ Helper.ajax({
url: "/" + new_channel, url: "/" + new_channel,
method: "get", method: "get",
data: {channel: new_channel}, data: {channel: new_channel},
@@ -337,7 +342,8 @@ var Frontpage = {
//Player.player.destroy(); //Player.player.destroy();
socket.emit("change_channel", {channel: chan.toLowerCase()}); socket.emit("change_channel", {channel: chan.toLowerCase()});
} }
$("#frontpage_player").empty(); var _player = document.querySelectorAll("#frontpage_player");
if(_player.length > 0) _player[0].innerHTML = "";
if(Helper.mobilecheck()) { if(Helper.mobilecheck()) {
//Helper.log("disconnecting"); //Helper.log("disconnecting");
//socket.disconnect(); //socket.disconnect();
@@ -351,37 +357,40 @@ var Frontpage = {
window.chan = new_channel; window.chan = new_channel;
} }
var response = $("<div>" + e + "</div>"); var response = document.createElement("div");
response.innerHTML = e;
$('select').formSelect('destroy'); M.FormSelect.getInstance(document.querySelector("#view_channels_select")).destroy();
$(".mega").remove(); //$('select').formSelect('destroy');
$(".mobile-search").remove(); Helper.removeElement(".mega");
$("main").attr("class", "container center-align main"); Helper.removeElement(".mobile-search");
$("#main-container").addClass("channelpage"); document.getElementsByTagName("main")[0].className = "container center-align main";
//$("header").html($($(e)[63]).html()); Helper.addClass("#main-container", "channelpage");
$("header").html($(response.find("header")).html());
if($("#alreadychannel").length === 0 || Helper.mobilecheck() || Player.player === undefined){ document.getElementsByTagName("header")[0].innerHTML = response.querySelectorAll("header")[0].innerHTML;
$("main").html($(response.find("main")).html());
if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck() || Player.player === undefined){
document.getElementsByTagName("main")[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
} else { } else {
$("#main-row").append($(response.find("#playlist").wrap("<div>").parent().html())); document.getElementById("main-row").insertAdjacentHTML("beforeend", response.querySelectorAll("#playlist")[0].outerHTML);
$("#video-container").append($(response.find("#main_components").wrap("<div>").parent().html())); if(!client) document.getElementById("video-container").insertAdjacentHTML("beforeend", response.querySelectorAll("#main_components")[0].outerHTML);
$("#main-row").append("<div id='playbar'></div>"); document.getElementById("main-row").insertAdjacentHTML("beforeend", "<div id='playbar'></div>");
$("#player").removeClass("player_bottom"); Helper.removeClass("#player", "player_bottom");
$("#main-row").removeClass("frontpage_modified_heights"); Helper.removeClass("#main-row", "frontpage_modified_heights");
$("#main_section_frontpage").remove(); Helper.removeElement("#main_section_frontpage");
$("#closePlayer").remove(); Helper.removeElement("#closePlayer");
$("#player_bottom_overlay").remove(); Helper.removeElement("#player_bottom_overlay");
} }
$("#search").attr("placeholder", "Find song on YouTube..."); document.getElementById("search").setAttribute("placeholder", "Find song on YouTube...");
$(".page-footer").addClass("padding-bottom-novideo"); Helper.addClass(".page-footer", "padding-bottom-novideo");
from_frontpage = true; from_frontpage = true;
if($("#alreadychannel").length == 1){ if(document.querySelectorAll("#alreadychannel").length == 1){
Channel.init(); Channel.init();
}else{ }else{
fromFront = true; fromFront = true;
Channel.init(); Channel.init();
} }
if($("#alreadyfp").length === 0) $("head").append("<div id='alreadyfp'></div>"); if(document.querySelectorAll("#alreadyfp").length === 0) document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<div id='alreadyfp'></div>");
} }
}); });
@@ -392,8 +401,8 @@ var Frontpage = {
var date = new Date(); var date = new Date();
Frontpage.blob_list = []; Frontpage.blob_list = [];
if(date.getMonth() == 3 && date.getDate() == 1){ if(date.getMonth() == 3 && date.getDate() == 1){
$(".mega").css("-webkit-transform", "rotate(180deg)"); Helper.css(".mega", "-webkit-transform", "rotate(180deg)");
$(".mega").css("-moz-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); //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);
} }
@@ -410,10 +419,10 @@ var Frontpage = {
}; };
if(window.location.hostname == "fb.zoff.me") { if(window.location.hostname == "fb.zoff.me") {
$("footer").addClass("hide"); Helper.addClass("footer", "hide");
} }
channel_list = $("#channel-list-container").clone().html(); channel_list = document.getElementById("channel-list-container").cloneNode(true).innerHTML;
if(window.location.hostname != "fb.zoff.me") Frontpage.share_link_modifier(); if(window.location.hostname != "fb.zoff.me") Frontpage.share_link_modifier();
@@ -430,14 +439,15 @@ var Frontpage = {
window.location.reload(true); window.location.reload(true);
}); });
} }
if($("#alreadyfp").length === 0 || Helper.mobilecheck() || !socket._callbacks.$playlists || user_auth_avoid){ if(document.querySelectorAll("#alreadyfp").length === 0 || Helper.mobilecheck() || !socket._callbacks.$playlists || user_auth_avoid){
setup_playlist_listener(); setup_playlist_listener();
} }
$("#about").modal(); M.Modal.init(document.getElementById("about"));
$("#help").modal(); M.Modal.init(document.getElementById("help"));
$("#contact").modal(); M.Modal.init(document.getElementById("contact"));
$('select').formSelect(); var elem = document.querySelector('select');
var instance = M.FormSelect.init(elem);
Helper.log([ Helper.log([
"Sending frontpage_lists", "Sending frontpage_lists",
@@ -449,7 +459,7 @@ var Frontpage = {
change_offline(true, offline); change_offline(true, offline);
} else { } else {
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#offline-mode").tooltip({ Helper.tooltip("#offline-mode", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Enable local mode" html: "Enable local mode"
@@ -457,17 +467,17 @@ var Frontpage = {
} }
} }
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#frontpage-viewer-counter").tooltip({ Helper.tooltip("#frontpage-viewer-counter", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Total Viewers" html: "Total Viewers"
}); });
$("#client-mode-button").tooltip({ Helper.tooltip("#client-mode-button", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Client mode" html: "Client mode"
}); });
$(".generate-channel-name").tooltip({ Helper.tooltip(".generate-channel-name", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Generate name" html: "Generate name"
@@ -475,12 +485,12 @@ var Frontpage = {
} }
Frontpage.get_frontpage_lists(); Frontpage.get_frontpage_lists();
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
//Materialize.toast("<a href='/remote' style='color:white;'>Try out our new feature, remote!</a>", 8000) //Materialize.toast("<a href='/remote' style='color:white;'>Try out our new feature, remote!</a>", 8000)
if(window.location.hash == "#donation") { if(window.location.hash == "#donation") {
window.location.hash = "#"; window.location.hash = "#";
$('#donation').modal(); M.Modal.init(document.getElementById("donation"));;
$('#donation').modal('open'); M.Modal.getInstance(document.getElementById("donation")).open();
} }
if(!localStorage.ok_cookie){ if(!localStorage.ok_cookie){
@@ -490,21 +500,21 @@ var Frontpage = {
var pad = 0; var pad = 0;
$(".zicon").on("click", function(e) { /*$(".zicon").on("click", function(e) {
e.preventDefault(); e.preventDefault();
pad += 10; pad += 10;
$(".zicon").css("padding-left", pad + "vh"); Helper.css(".zicon", "padding-left", pad + "vh");
if(pad >= 80) if(pad >= 80)
window.location.href = 'http://etys.no'; window.location.href = 'http://etys.no';
}); });*/
if(!Helper.mobilecheck() && Frontpage.winter) { if(!Helper.mobilecheck() && Frontpage.winter) {
$(".mega").prepend('<div id="snow"></div>'); document.getElementsByClassName("mega")[0].insertAdjacentHTML("afterbegin", '<div id="snow"></div>');
} }
if(Helper.mobilecheck()){ if(Helper.mobilecheck()){
$('input#autocomplete-input').characterCounter(); //$('input#autocomplete-input').characterCounter();
} }
window['__onGCastApiAvailable'] = function(loaded, errorInfo) { window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
@@ -516,10 +526,10 @@ var Frontpage = {
}, },
share_link_modifier: function() { share_link_modifier: function() {
$("#facebook-code-link").attr("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/"); document.getElementById("facebook-code-link").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/");
$("#facebook-code-link").attr("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/', 'Share Zoff','width=600,height=300'); return false;"); 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;");
$("#twitter-code-link").attr("href", "https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic"); document.getElementById("twitter-code-link").setAttribute("href", "https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic");
$("#twitter-code-link").attr("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;"); 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-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"); //$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.me/&choe=UTF-8&chld=L%7C1");
} }

437
server/public/assets/js/functions.js
View File

@@ -22,14 +22,15 @@ function removeAllListeners() {
} }
function getColor(id) { function getColor(id) {
$.ajax({ Helper.ajax({
type: "POST", method: "POST",
url: "/api/color", url: "/api/color",
async: true, headers: {"Content-Type": "application/json;charset=UTF-8"},
data: { data: JSON.stringify({
id: id id: id
}, }),
success: function(c) { success: function(c) {
c = JSON.parse(c);
if(typeof(c) == "object") { if(typeof(c) == "object") {
Player.setBGimage({color:c, only:true}); Player.setBGimage({color:c, only:true});
} }
@@ -39,71 +40,67 @@ function getColor(id) {
function hide_native(way) { function hide_native(way) {
if(way == 1){ if(way == 1){
if(!$('.castButton').hasClass('castButton-white-active')) { Helper.addClass('.castButton', 'castButton-white-active');
$('.castButton').addClass('castButton-white-active');
}
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
if(M.Tooltip.getInstance($(".castButton"))) { if(M.Tooltip.getInstance(document.getElementsByClassName("castButton")[0])) {
$('.castButton').tooltip('destroy'); Helper.tooltip('.castButton', 'destroy');
} }
$('.castButton').tooltip({ Helper.tooltip('.castButton', {
delay: 5, delay: 5,
position: "top", position: "top",
html: "Stop casting" html: "Stop casting"
}); });
} }
$("#duration").toggleClass("hide"); Helper.toggleClass("#duration", "hide");
$("#fullscreen").toggleClass("hide"); Helper.toggleClass("#fullscreen", "hide");
try{ try{
Player.player.stopVideo(); Player.player.stopVideo();
} catch(e){} } catch(e){}
Player.stopInterval = true; Player.stopInterval = true;
if(Helper.mobilecheck()){ if(Helper.mobilecheck()){
if($("#pause").hasClass("hide")){ if(document.querySelector("#pause").classList.contains("hide")){
$("#play").toggleClass("hide"); Helper.toggleClass("#play", "hide");
$("#pause").toggleClass("hide"); Helper.toggleClass("#pause", "hide");
} else if($("#play").hasClass("hide")){ } else if(document.querySelector("#play").classList.contains("hide")){
$("#play").toggleClass("hide"); Helper.toggleClass("#play", "hide");
$("#pause").toggleClass("hide"); Helper.toggleClass("#pause", "hide");
} }
} else { } else {
Playercontrols.visualVolume(100); Playercontrols.visualVolume(100);
} }
if(Helper.mobilecheck()) { if(Helper.mobilecheck()) {
if(!$("#player_overlay").hasClass("hide")) { Helper.addClass("#player_overlay", "hide")
$("#player_overlay").addClass("hide") Helper.css("#player_overlay", "display", "none");
} Helper.css("#playing_on", "display", "none");
$("#player_overlay").css("display", "none");
$("#playing_on").css("display", "none");
} else { } else {
$("#player_overlay").removeClass("hide"); Helper.removeClass("#player_overlay", "hide");
$("#player_overlay").css("display", "block"); Helper.css("#player_overlay", "display", "block");
$("#player_overlay").css("background", "url(https://img.ytimg.com/vi/" + video_id + "/hqdefault.jpg)"); Helper.css("#player_overlay", "background", "url(https://img.ytimg.com/vi/" + video_id + "/hqdefault.jpg)");
$("#player_overlay").css("background-position", "center"); Helper.css("#player_overlay", "background-position", "center");
$("#player_overlay").css("background-size", "100%"); Helper.css("#player_overlay", "background-size", "100%");
$("#player_overlay").css("background-color", "black"); Helper.css("#player_overlay", "background-color", "black");
$("#player_overlay").css("background-repeat", "no-repeat"); Helper.css("#player_overlay", "background-repeat", "no-repeat");
$("#playing_on").css("display", "flex"); Helper.css("#playing_on", "display", "flex");
$("#chromecast_text").html("Playing on<br>" + castSession.La.friendlyName); Helper.setHtml("#chromecast_text", "Playing on<br>" + castSession.La.friendlyName);
} }
Player.player.setVolume(100); Player.player.setVolume(100);
$("#player_overlay_text").toggleClass("hide"); Helper.toggleClass("#player_overlay_text", "hide");
} else if(way == 0){ } else if(way == 0){
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
if(M.Tooltip.getInstance($(".castButton"))) { if(M.Tooltip.getInstance(document.getElementsByClassName("castButton")[0])) {
$('.castButton').tooltip('destroy'); Helper.tooltip('.castButton', 'destroy');
} }
$('.castButton').tooltip({ Helper.tooltip('.castButton', {
delay: 5, delay: 5,
position: "top", position: "top",
html: "Cast Zoff to TV" html: "Cast Zoff to TV"
}); });
} }
$('.castButton').removeClass('castButton-white-active'); Helper.removeClass('.castButton', 'castButton-white-active');
$("#duration").toggleClass("hide"); Helper.toggleClass("#duration", "hide");
$("#fullscreen").toggleClass("hide"); Helper.toggleClass("#fullscreen", "hide");
Player.player.playVideo(); Player.player.playVideo();
Player.stopInterval = false; Player.stopInterval = false;
duration = Player.player.getDuration(); duration = Player.player.getDuration();
@@ -112,10 +109,10 @@ function hide_native(way) {
Player.player.setVolume(Crypt.get_volume()); Player.player.setVolume(Crypt.get_volume());
Playercontrols.visualVolume(Crypt.get_volume()); Playercontrols.visualVolume(Crypt.get_volume());
} }
$("#player_overlay").addClass("hide"); Helper.addClass("#player_overlay", "hide");
$("#player_overlay_text").toggleClass("hide"); Helper.toggleClass("#player_overlay_text", "hide");
$("#chromecast_text").html(""); Helper.setHtml("#chromecast_text", "");
$("#playing_on").css("display", "none"); Helper.css("#playing_on", "display", "none");
if(!offline){ if(!offline){
socket.emit('pos', {channel: chan.toLowerCase()}); socket.emit('pos', {channel: chan.toLowerCase()});
} else { } else {
@@ -142,16 +139,12 @@ function chromecastListener(evt, data) {
} }
break; break;
case 1: case 1:
if(!$("#play").hasClass("hide")) { Helper.addClass("#play", "hide");
$("#play").addClass("hide"); Helper.removeClass("#pause", "hide");
}
$("#pause").removeClass("hide");
break; break;
case 2: case 2:
if(!$("#pause").hasClass("hide")) { Helper.addClass("#pause", "hide");
$("#pause").addClass("hide"); Helper.removeClass("#play", "hide");
}
$("#play").removeClass("hide");
break; break;
} }
} }
@@ -159,10 +152,10 @@ function chromecastListener(evt, data) {
function start_auth() { function start_auth() {
if(!user_auth_started) { if(!user_auth_started) {
user_auth_started = true; user_auth_started = true;
$("#player_overlay").removeClass("hide"); Helper.removeClass("#player_overlay", "hide");
$("#player_overlay").css("display", "block"); Helper.css("#player_overlay", "display", "block");
$("#user_password").modal("open"); M.Modal.getInstance(document.getElementById("user_password")).open();
$("#user-pass-input").focus(); document.querySelector("#user-pass-input").focus();
//Crypt.remove_userpass(chan.toLowerCase()); //Crypt.remove_userpass(chan.toLowerCase());
before_toast(); before_toast();
M.toast({html: "That is not the correct password, try again..", displayLength: 4000}); M.toast({html: "That is not the correct password, try again..", displayLength: 4000});
@@ -185,34 +178,37 @@ function emit_list() {
function get_list_ajax() { function get_list_ajax() {
//var c = Crypt.get_userpass(chan.toLowerCase()); //var c = Crypt.get_userpass(chan.toLowerCase());
$.ajax({ Helper.ajax({
type: "POST", type: "POST",
data: { data: {
userpass: "", userpass: "",
token: zoff_api_token, token: zoff_api_token,
}, },
headers: {"Content-Type": "application/json;charset=UTF-8"},
url: "/api/list/" + chan.toLowerCase(), url: "/api/list/" + chan.toLowerCase(),
success: function(response) { success: function(response) {
response = JSON.parse(response);
if(response.results.length > 0) { if(response.results.length > 0) {
if(response.status == 403) { if(response.status == 403) {
start_auth(); start_auth();
} }
if(client) { if(client) {
$("#channel-load").remove(); Helper.removeElement("#channel-load");
} }
List.populate_list(response.results); List.populate_list(response.results);
} }
}, },
error: function(response) { error: function(response, xmlhttp) {
if(response.responseJSON.status == 403) { response = JSON.parse(response);
if(response.status == 403) {
start_auth(); start_auth();
} else if(response.responseJSON.status == 429) { } else if(response.status == 429) {
setTimeout(function() { setTimeout(function() {
get_list_ajax(); get_list_ajax();
}, response.getResponseHeader("Retry-After") * 1000) }, xmlhttp.getResponseHeader("Retry-After") * 1000)
} }
if(client) { if(client) {
$("#channel-load").remove(); Helper.removeElement("#channel-load");
} }
//List.populate_list(response.responseJSON.results); //List.populate_list(response.responseJSON.results);
} }
@@ -220,64 +216,71 @@ function get_list_ajax() {
} }
function contextListener(that, e) { function contextListener(that, e) {
var parent = $(that).parent(); var parent = that.parentElement;
var suggested = false; var suggested = false;
if(parent.attr("id").indexOf("suggested-") > -1) suggested = true; if(parent.id.indexOf("suggested-") > -1) suggested = true;
$(".context-menu-root").attr("data-suggested", suggested); document.getElementsByClassName("context-menu-root")[0].setAttribute("data-suggested", suggested);
$(".context-menu-root").attr("data-id", parent.attr("id").replace("suggested-", "")); document.getElementsByClassName("context-menu-root")[0].setAttribute("data-id", parent.getAttribute("id").replace("suggested-", ""));
$("#context-menu-overlay").removeClass("hide"); Helper.removeClass("#context-menu-overlay", "hide");
var left = e.pageX - $(".context-menu-root").width() / 2; var left = event.pageX - document.querySelector(".context-menu-root").offsetWidth / 2;
var top = e.pageY; var top = event.pageY;
if(left + 200 > $(window).width()) { if(left + 200 > window.innerWidth) {
left = $(window).width() - 200 - 15; left = window.innerWidth - 200 - 15;
} else if (left < 0) { } else if (left < 0) {
left = 11; left = 11;
} }
if(top + 96 > $(window).height()) { if(top + 96 > window.innerHeight) {
top = $(window).height() - 96 - 15; top = window.innerHeight - 96 - 15;
} else if(top < 0) { } else if(top < 0) {
top = 15; top = 15;
} }
$(".context-menu-root").css({left: left,top:top}); Helper.css(".context-menu-root", "left", left + "px");
$(".context-menu-root").removeClass("hide"); Helper.css(".context-menu-root", "top", top + "px");
Helper.removeClass(".context-menu-root","hide");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
mouseContext(left, top); mouseContext(left, top);
} }
} }
function mouseContext(left, top) { function mouseContext(left, top) {
$(document).off("mousemove"); var moveFunction = function( event ) {
$(document).mousemove(function( event ) { if(event.pageX < left - 60 || event.pageX > left + document.querySelector(".context-menu-root").offsetWidth + 60 ||
if(event.pageX < left - 60 || event.pageX > left + $(".context-menu-root").width() + 60 || event.pageY < top - 60 || event.pageY > top + document.querySelector(".context-menu-root").offsetHeight + 60) {
event.pageY < top - 60 || event.pageY > top + $(".context-menu-root").height() + 60) { Helper.addClass(".context-menu-root", "hide");
$(".context-menu-root").addClass("hide"); Helper.addClass("#context-menu-overlay", "hide");
$("#context-menu-overlay").addClass("hide"); document.removeEventListener("mousemove", moveFunction);
$(document).off("mousemove");
} }
}); };
try {
document.removeEventListener("mousemove", moveFunction);
} catch(e) {}
document.addEventListener("mousemove", moveFunction, false);
} }
function get_np_ajax() { function get_np_ajax() {
/*var c = Crypt.get_userpass(chan.toLowerCase()); /*var c = Crypt.get_userpass(chan.toLowerCase());
if(c == undefined) c = "";*/ if(c == undefined) c = "";*/
$.ajax({ Helper.ajax({
type: "POST", type: "POST",
data: { data: {
userpass: "", userpass: "",
fetch_song: true, fetch_song: true,
token: zoff_api_token token: zoff_api_token
}, },
headers: {"Content-Type": "application/json;charset=UTF-8"},
url: "/api/list/" + chan.toLowerCase() + "/__np__", url: "/api/list/" + chan.toLowerCase() + "/__np__",
success: function(response) { success: function(response) {
response = JSON.parse(response);
Player.getTitle(response.results[0].title, 1); Player.getTitle(response.results[0].title, 1);
}, },
error: function(response) { error: function(response, xmlhttp) {
if(response.responseJSON.status == 403) { response = JSON.parse(response);
if(response.status == 403) {
start_auth(); start_auth();
} else if(response.responseJSON.status == 429) { } else if(response.status == 429) {
setTimeout(function() { setTimeout(function() {
get_np_ajax(); get_np_ajax();
}, response.getResponseHeader("Retry-After") * 1000) }, xmlhttp.getResponseHeader("Retry-After") * 1000)
} }
} }
}) })
@@ -288,25 +291,27 @@ function del_ajax(id) {
var u = Crypt.get_userpass(chan.toLowerCase()); var u = Crypt.get_userpass(chan.toLowerCase());
if(a == undefined) a = ""; if(a == undefined) a = "";
if(u == undefined) u = "";*/ if(u == undefined) u = "";*/
$.ajax({ Helper.ajax({
type: "DELETE", type: "DELETE",
data: { data: {
adminpass: "", adminpass: "",
userpass: "", userpass: "",
token: zoff_api_token token: zoff_api_token
}, },
headers: {"Content-Type": "application/json;charset=UTF-8"},
url: "/api/list/" + chan.toLowerCase() + "/" + id, url: "/api/list/" + chan.toLowerCase() + "/" + id,
success: function(response) { success: function(response) {
toast("deletesong"); toast("deletesong");
get_list_ajax(); get_list_ajax();
}, },
error: function(response) { error: function(response, xmlhttp) {
if(response.responseJSON.status == 403) { response = JSON.parse(response);
if(response.status == 403) {
toast("listhaspass"); toast("listhaspass");
} else if(response.responseJSON.status == 429) { } else if(response.status == 429) {
setTimeout(function() { setTimeout(function() {
del_ajax(id); del_ajax(id);
}, response.getResponseHeader("Retry-After") * 1000); }, xmlhttp.getResponseHeader("Retry-After") * 1000);
} }
} }
}) })
@@ -317,7 +322,7 @@ function add_ajax(id, title, duration, playlist, num, full_num, start, end) {
var u = Crypt.get_userpass(chan.toLowerCase()); var u = Crypt.get_userpass(chan.toLowerCase());
if(a == undefined) a = ""; if(a == undefined) a = "";
if(u == undefined) u = "";*/ if(u == undefined) u = "";*/
$.ajax({ Helper.ajax({
type: "POST", type: "POST",
data: { data: {
adminpass: "", adminpass: "",
@@ -328,20 +333,22 @@ function add_ajax(id, title, duration, playlist, num, full_num, start, end) {
start_time: start, start_time: start,
token: zoff_api_token token: zoff_api_token
}, },
headers: {"Content-Type": "application/json;charset=UTF-8"},
url: "/api/list/" + chan.toLowerCase() + "/" + id, url: "/api/list/" + chan.toLowerCase() + "/" + id,
success: function(response) { success: function(response) {
toast("addedsong"); toast("addedsong");
get_list_ajax(); get_list_ajax();
}, },
error: function(response) { error: function(response, xmlhttp) {
if(response.responseJSON.status == 403) { response = JSON.parse(response);
if(response.status == 403) {
toast("listhaspass"); toast("listhaspass");
} else if(response.responseJSON.status == 409) { } else if(response.status == 409) {
vote_ajax(id); vote_ajax(id);
} else if(response.responseJSON.status == 429) { } else if(response.status == 429) {
setTimeout(function() { setTimeout(function() {
add_ajax(id, title, duration, playlist, num, full_num, start, end); add_ajax(id, title, duration, playlist, num, full_num, start, end);
}, response.getResponseHeader("Retry-After") * 1000); }, xmlhttp.getResponseHeader("Retry-After") * 1000);
} }
} }
}); });
@@ -352,25 +359,27 @@ function vote_ajax(id) {
var u = Crypt.get_userpass(chan.toLowerCase()); var u = Crypt.get_userpass(chan.toLowerCase());
if(a == undefined) a = ""; if(a == undefined) a = "";
if(u == undefined) u = "";*/ if(u == undefined) u = "";*/
$.ajax({ Helper.ajax({
type: "PUT", type: "PUT",
data: { data: {
adminpass: "", adminpass: "",
userpass: "", userpass: "",
token: zoff_api_token token: zoff_api_token
}, },
headers: {"Content-Type": "application/json;charset=UTF-8"},
url: "/api/list/" + chan.toLowerCase() + "/" + id, url: "/api/list/" + chan.toLowerCase() + "/" + id,
success: function(response) { success: function(response) {
toast("voted"); toast("voted");
get_list_ajax(); get_list_ajax();
}, },
error: function(response) { error: function(response, xmlhttp) {
if(response.responseJSON.status == 403) { response = JSON.parse(response);
if(response.status == 403) {
toast("listhaspass"); toast("listhaspass");
} else if(response.responseJSON.status == 429) { } else if(response.status == 429) {
setTimeout(function() { setTimeout(function() {
vote_ajax(id); vote_ajax(id);
}, response.getResponseHeader("Retry-After") * 1000); }, xmlhttp.getResponseHeader("Retry-After") * 1000);
} }
} }
}) })
@@ -443,7 +452,7 @@ function setup_viewers_listener(){
viewers = view; viewers = view;
var outPutWord = "<i class='material-icons'>visibility</i>"//v > 1 ? "viewers" : "viewer"; var outPutWord = "<i class='material-icons'>visibility</i>"//v > 1 ? "viewers" : "viewer";
$("#viewers").html(outPutWord + " " + view); Helper.setHtml("#viewers", outPutWord + " " + view);
if(song_title !== undefined) if(song_title !== undefined)
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
@@ -521,25 +530,48 @@ function change_offline(enabled, already_offline){
ga('send', 'event', "button-click", "offline", "", offline ? 1 : 0); ga('send', 'event', "button-click", "offline", "", offline ? 1 : 0);
socket.emit("offline", {status: enabled, channel: chan != undefined ? chan.toLowerCase() : ""}); socket.emit("offline", {status: enabled, channel: chan != undefined ? chan.toLowerCase() : ""});
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
if($("#offline-mode").length == 1 && M.Tooltip.getInstance($("#offline-mode"))) { if(document.querySelectorAll("#offline-mode").length == 1 && M.Tooltip.getInstance(document.getElementById("offline-mode"))) {
$("#offline-mode").tooltip('destroy'); Helper.tooltip("#offline-mode", 'destroy');
} }
} }
var mouseEnter = function(e){
Helper.removeClass("#seekToDuration", "hide");
};
var mouseLeave = function(e){
dragging = false;
Helper.addClass("#seekToDuration", "hide");
};
var mouseDown = function(e) {
var acceptable = ["bar", "controls", "duration"];
if(acceptable.indexOf(e.target.id) >= 0) {
dragging = true;
}
};
var mouseUp = function(e) {
dragging = false;
};
if(enabled){ if(enabled){
if(list_html){ /*if(list_html == undefined){
list_html = $("<div>" + list_html + "</div>"); var tempOuter = document.createElement("div");
list_html.innerHTML = list_html;
//list_html.find(".list-remove").removeClass("hide"); //list_html.find(".list-remove").removeClass("hide");
list_html = list_html.html(); list_html = list_html.innerHTML;
} }*/
//$(".list-remove").removeClass("hide"); //$(".list-remove").removeClass("hide");
$("#viewers").addClass("hide"); Helper.addClass("#viewers", "hide");
$(".margin-playbar").removeClass("margin-playbar"); Helper.removeClass(".margin-playbar", "margin-playbar");
$(".prev.playbar").addClass("margin-playbar"); Helper.addClass(".prev playbar", "margin-playbar");
$(".prev.playbar").removeClass("hide"); Helper.removeClass(".prev playbar", "hide");
$("#offline-mode").removeClass("waves-cyan"); Helper.removeClass("#offline-mode", "waves-cyan");
$("#offline-mode").addClass("cyan"); Helper.addClass("#offline-mode", "cyan");
Helper.removeClass(".delete-context-menu", "context-menu-disabled");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#offline-mode").tooltip({ Helper.tooltip("#offline-mode", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Disable local mode" html: "Disable local mode"
@@ -548,39 +580,18 @@ function change_offline(enabled, already_offline){
if(window.location.pathname != "/"){ if(window.location.pathname != "/"){
socket.removeEventListener("color"); socket.removeEventListener("color");
$("#controls").on("mouseenter", function(e){ document.getElementById("controls").addEventListener("mouseenter", mouseEnter, false);
if($("#seekToDuration").hasClass("hide")){ document.getElementById("controls").addEventListener("mouseleave", mouseLeave, false);
$("#seekToDuration").removeClass("hide"); document.getElementById("controls").addEventListener("mousedown", mouseDown, false);
} document.getElementById("controls").addEventListener("mouseup", mouseUp, false);
}); document.getElementById("controls").addEventListener("mousemove", Channel.seekToMove);
document.getElementById("controls").addEventListener("click", Channel.seekToClick);
$("#controls").on("mouseleave", function(e){ document.querySelector("#main_components").insertAdjacentHTML("beforeend", "<div id='seekToDuration' class='hide'>00:00/01:00</div>");
dragging = false; var controlElement = document.querySelector("#controls");
if(!$("#seekToDuration").hasClass("hide")){ if(!Helper.mobilecheck()) Helper.css("#seekToDuration", "top", controlElement.offsetHeight - parseInt(controlElement.style.height) - 55);
$("#seekToDuration").addClass("hide"); else if(Helper.mobilecheck()) Helper.css("#seekToDuration", "top", controlElement.offsetHeight - parseInt(controlElement.style.height) - 20);
} Helper.addClass("#controls", "ewresize");
});
$("#controls").on("mousedown", function(e) {
var acceptable = ["bar", "controls", "duration"];
if(acceptable.indexOf($(e.target).attr("id")) >= 0) {
dragging = true;
}
});
$("#controls").on("mouseup", function(e) {
dragging = false;
});
$("#controls").on("mousemove", Channel.seekToMove);
$("#controls").on("click", Channel.seekToClick);
$("#main_components").append("<div id='seekToDuration' class='hide'>00:00/01:00</div>");
if(!Helper.mobilecheck()) $("#seekToDuration").css("top", $("#controls").position().top - 55);
else if(Helper.mobilecheck()) $("#seekToDuration").css("top", $("#controls").position().top - 20);
if(!$("#controls").hasClass("ewresize")) $("#controls").addClass("ewresize");
} else {
$("#controls").off("mouseenter");
$("#controls").off("mouseleave");
$("#controls").off("mousemove");
$("#controls").off("click");
} }
if(full_playlist != undefined && !already_offline){ if(full_playlist != undefined && !already_offline){
for(var x = 0; x < full_playlist.length; x++){ for(var x = 0; x < full_playlist.length; x++){
@@ -590,42 +601,84 @@ function change_offline(enabled, already_offline){
List.populate_list(full_playlist); List.populate_list(full_playlist);
} }
} else { } else {
if(list_html){ /*if(list_html == undefined){
list_html = $("<div>" + list_html + "</div>"); var tempOuter = document.createElement("div");
list_html = list_html.html(); list_html.innerHTML = list_html;
} //list_html.find(".list-remove").removeClass("hide");
$(".margin-playbar").removeClass("margin-playbar"); list_html = list_html.innerHTML;
$("#playpause").addClass("margin-playbar"); }*/
$("#viewers").removeClass("hide"); if(!Admin.logged_in) Helper.addClass(".delete-context-menu", "context-menu-disabled");
$(".prev.playbar").addClass("hide"); Helper.removeClass(".margin-playbar", "margin-playbar");
$("#offline-mode").addClass("waves-cyan"); Helper.addClass("#playpause", "margin-playbar");
$("#offline-mode").removeClass("cyan"); Helper.removeClass("#viewers", "hide");
Helper.addClass(".prev playbar", "hide");
Helper.addClass("#offline-mode", "waves-cyan");
Helper.removeClass("#offline-mode", "cyan");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#offline-mode").tooltip({ Helper.tooltip("#offline-mode", {
delay: 5, delay: 5,
position: "bottom", position: "bottom",
html: "Enable local mode" html: "Enable local mode"
}); });
} }
$("#controls").off("mouseleave");
$("#controls").off("mouseenter");
$("#controls").off("mousedown");
$("#controls").off("mouseup");
$("#controls").off("mousemove", Channel.seekToMove);
$("#controls").off("click", Channel.seekToClick);
$("#seekToDuration").remove();
if(window.location.pathname != "/"){ if(window.location.pathname != "/"){
document.getElementById("controls").removeEventListener("mouseenter", mouseEnter, false);
document.getElementById("controls").removeEventListener("mouseleave", mouseLeave, false);
document.getElementById("controls").removeEventListener("mousedown", mouseDown, false);
document.getElementById("controls").removeEventListener("mouseup", mouseUp, false);
document.getElementById("controls").removeEventListener("mousemove", Channel.seekToMove);
document.getElementById("controls").removeEventListener("click", Channel.seekToClick);
Helper.removeElement("#seekToDuration");
socket.on("color", Player.setBGimage); socket.on("color", Player.setBGimage);
socket.emit("pos", {channel: chan.toLowerCase()}); socket.emit("pos", {channel: chan.toLowerCase()});
var add = ""; var add = "";
if(private_channel) add = Crypt.getCookie("_uI") + "_"; if(private_channel) add = Crypt.getCookie("_uI") + "_";
socket.emit("list", {version: parseInt(localStorage.getItem("VERSION")), channel: add + chan.toLowerCase()}); socket.emit("list", {version: parseInt(localStorage.getItem("VERSION")), channel: add + chan.toLowerCase()});
if($("#controls").hasClass("ewresize")) $("#controls").removeClass("ewresize"); Helper.removeClass("#controls", "ewresize");
} }
} }
} }
function pagination_results(e) {
event.preventDefault();
var that = this;
var pageToken = that.getAttribute("data-pagination");
var searchInput = that.getAttribute("data-original-search");
Helper.addClass(".next-results-button", "disabled");
Helper.addClass(".prev-results-button", "disabled");
Search.search(searchInput, false, false, pageToken);
}
function handleEvent(e, target, tried, type) {
for(var y = 0; y < e.path.length; y++) {
var target = e.path[y];
if(dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) {
dynamicListeners[type]["#" + target.id].call(target);
return;
} else {
if(target.classList == undefined) return;
for(var i = 0; i < target.classList.length; i++) {
if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) {
dynamicListeners[type]["." + target.classList[i]].call(target);
return;
}
}
}
}
}
function addListener(type, element, callback) {
if(dynamicListeners[type] == undefined) dynamicListeners[type] = {};
dynamicListeners[type][element] = callback;
}
function removeListener(type, element) {
delete dynamicListeners[type][element];
}
function toast(msg) { function toast(msg) {
switch(msg) { switch(msg) {
case "other_list_pass": case "other_list_pass":
@@ -671,8 +724,8 @@ function toast(msg) {
} }
msg=Helper.rnd(["I added the playlist", "Your playlist has been added", "Yay, many more songs!", "Thats a cool playlist!", "I added all the songs for you", "I see you like adding songs.."]); msg=Helper.rnd(["I added the playlist", "Your playlist has been added", "Yay, many more songs!", "Thats a cool playlist!", "I added all the songs for you", "I see you like adding songs.."]);
document.getElementById("import").disabled = false; document.getElementById("import").disabled = false;
$("#playlist_loader").addClass("hide"); Helper.addClass("#playlist_loader", "hide");
$("#import").removeClass("hide"); Helper.removeClass("#import", "hide");
break; break;
case "savedsettings": case "savedsettings":
if(embed) return; if(embed) return;
@@ -683,10 +736,10 @@ function toast(msg) {
msg=Helper.rnd(["That's not the right password!", "Wrong! Better luck next time...", "You seem to have mistyped the password", "Incorrect. Have you tried meditating?","Nope, wrong password!", "Wrong password. The authorities have been notified."]); msg=Helper.rnd(["That's not the right password!", "Wrong! Better luck next time...", "You seem to have mistyped the password", "Incorrect. Have you tried meditating?","Nope, wrong password!", "Wrong password. The authorities have been notified."]);
//Crypt.remove_pass(chan.toLowerCase()); //Crypt.remove_pass(chan.toLowerCase());
Admin.display_logged_out(); Admin.display_logged_out();
$("#thumbnail_form").css("display", "none"); Helper.css("#thumbnail_form", "display", "none");
$("#description_form").css("display", "none"); Helper.css("#description_form", "display", "none");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#chan_thumbnail').tooltip("destroy"); Helper.tooltip('#chan_thumbnail', "destroy");
} }
w_p = true; w_p = true;
break; break;
@@ -732,20 +785,16 @@ function toast(msg) {
msg=Helper.rnd(["I'm sorry, but you have to be an admin to do that!", "Only admins can do that", "You're not allowed to do that, try logging in!", "I can't let you do that", "Please log in to do that"]); msg=Helper.rnd(["I'm sorry, but you have to be an admin to do that!", "Only admins can do that", "You're not allowed to do that, try logging in!", "I can't let you do that", "Please log in to do that"]);
//Crypt.remove_pass(chan.toLowerCase()); //Crypt.remove_pass(chan.toLowerCase());
Admin.display_logged_out(); Admin.display_logged_out();
$("#thumbnail_form").css("display", "none"); Helper.css("#thumbnail_form", "display", "none");
$("#description_form").css("display", "none"); Helper.css("#description_form", "display", "none");
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$('#chan_thumbnail').tooltip("destroy"); Helper.tooltip('#chan_thumbnail', "destroy");
} }
w_p = true; w_p = true;
if(!$("#playlist_loader").hasClass("hide")) { Helper.addClass("#playlist_loader", "hide");
$("#playlist_loader").addClass("hide"); Helper.addClass("#playlist_loader_spotify", "hide");
} Helper.removeClass("#import_spotify", "hide");
if(!$("#playlist_loader_spotify").hasClass("hide")) { Helper.removeClass("#import", "hide");
$("#playlist_loader_spotify").addClass("hide");
}
$("#import_spotify").removeClass("hide");
$("#import").removeClass("hide");
break; break;
case "noskip": case "noskip":
if(embed) return; if(embed) return;
@@ -777,8 +826,8 @@ function toast(msg) {
tried_again = false; tried_again = false;
adminpass = Crypt.get_pass(chan.toLowerCase()) == undefined ? Crypt.tmp_pass : Crypt.get_pass(chan.toLowerCase()); adminpass = Crypt.get_pass(chan.toLowerCase()) == undefined ? Crypt.tmp_pass : Crypt.get_pass(chan.toLowerCase());
msg="Correct password. You now have access to the sacred realm of The Admin."; msg="Correct password. You now have access to the sacred realm of The Admin.";
$("#thumbnail_form").css("display", "inline-block"); Helper.css("#thumbnail_form", "display", "inline-block");
$("#description_form").css("display", "inline-block"); Helper.css("#description_form", "display", "inline-block");
break; break;
case "changedpass": case "changedpass":
if(embed) return; if(embed) return;
@@ -822,25 +871,25 @@ function before_toast(){
} }
function scrollChat() { function scrollChat() {
var current = $(".chat-tab.active").attr("href"); var current = document.querySelector(".chat-tab active").getAttribute("href");
if(current == "#channelchat") { if(current == "#channelchat") {
$('#chatchannel').scrollTop($('#chatchannel')[0].scrollHeight); document.querySelector('#chatchannel').scrollTop(document.querySelector('#chatchannel').scrollHeight);
} else if(current == "#all_chat") { } else if(current == "#all_chat") {
$('#chatall').scrollTop($('#chatall')[0].scrollHeight); document.querySelector('#chatall').scrollTop(document.querySelector('#chatall').scrollHeight);
} }
} }
function searchTimeout(event) { function searchTimeout(event) {
search_input = $(".search_input").val(); search_input = document.getElementsByClassName("search_input")[0].value;
code = event.keyCode || event.which; code = event.keyCode || event.which;
if (code != 40 && code != 38 && code != 13 && code != 39 && code != 37 && code != 17 && code != 16 && code != 225 && code != 18 && code != 27) { if (code != 40 && code != 38 && code != 13 && code != 39 && code != 37 && code != 17 && code != 16 && code != 225 && code != 18 && code != 27) {
clearTimeout(timeout_search); clearTimeout(timeout_search);
if(search_input.length < 3){ if(search_input.length < 3){
$("#results").html(""); document.querySelector("#results").innerHTML = "";
if(search_input.length == 0) { if(search_input.length == 0) {
$("body").attr("style", "overflow-y: auto"); document.querySelector("body").setAttribute("style", "overflow-y: auto");
} }
} }
if(code == 13){ if(code == 13){

330
server/public/assets/js/helpers.js
View File

@@ -2,11 +2,11 @@ var Helper = {
logs: [], logs: [],
log: function(to_log) { log: function(to_log) {
if(localStorage.debug === "true") { if(localStorage.debug === "true") {
console.log("------------ " + new Date() + " ------------"); console.log("------------ " + new Date() + " ------------");/*RemoveLogging:skip*/
for(var i = 0; i < to_log.length; i++) { for(var i = 0; i < to_log.length; i++) {
console.log(to_log[i]); console.log(to_log[i]);/*RemoveLogging:skip*/
} }
console.log("------------ " + new Date() + " ------------"); console.log("------------ " + new Date() + " ------------");/*RemoveLogging:skip*/
} }
Helper.logs.unshift({log: to_log, date: new Date()}); Helper.logs.unshift({log: to_log, date: new Date()});
if(Helper.logs.length > 10) { if(Helper.logs.length > 10) {
@@ -18,6 +18,306 @@ var Helper = {
return arr[Math.floor(Math.random() * arr.length)]; return arr[Math.floor(Math.random() * arr.length)];
}, },
toggleClass: function(element, className) {
try {
if(typeof(element) == "object") {
if(element.className.indexOf(className) == -1) {
Helper.addClass(element, className);
} else {
Helper.removeClass(element, className);
}
} else if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
if(elem.className.indexOf(className) == -1) {
Helper.addClass(elem, className);
} else {
Helper.removeClass(elem, className);
}
} else {
var elements;
if(element.substring(0,1) == ".") {
var testSplit = element.substring(1).split(" ");
if(testSplit.length > 1) {
var insideElement = document.getElementsByClassName(testSplit[0]);
elements = [];
for(var i = 0; i < insideElement.length; i++) {
var innards = insideElement[i].querySelectorAll(testSplit[1]);
for(var y = 0; y < innards.length; y++) {
elements.push(innards[y]);
}
}
} else {
elements = document.getElementsByClassName(element.substring(1));
}
} else {
elements = document.getElementsByTagName(element);
}
for(var i = 0; i < elements.length; i++) {
if(elements[i].className.indexOf(className) == -1) {
Helper.addClass(elements[i], className);
} else {
Helper.removeClass(element, className);
}
}
}
}catch(e) {}
},
css: function(element, attribute, value) {
try {
if(typeof(element) == "object") {
try {
if(element.length > 0) {
for(var i = 0; i < element.length; i++) {
element[i].style[attribute] = value;
}
} else {
element.style[attribute] = value;
}
} catch(e) {
element.style[attribute] = value;
}
}
if(typeof(element) == "object") {
element.style[attribute] = value;
} else if(element.substring(0,1) == "#") {
document.getElementById(element.substring(1)).style[attribute] = value;
} else {
var elements = document.getElementsByClassName(element.substring(1));
for(var i = 0; i < elements.length; i++) {
elements[i].style[attribute] = value;
}
}
} catch(e) {
}
},
html: function(element) {
try {
if(element.substring(0,1) == "#") {
return document.getElementById(element.substring(1)).innerHTML;
} else {
var elements = document.getElementsByClassName(element.substring(1));
for(var i = 0; i < elements.length; i++) {
return elements[i].innerHTML;
}
}
} catch(e){}
},
removeClass: function(element, className) {
try {
if(typeof(element) == "object") {
element.classList.remove(className);
} else if(element.substring(0,1) == "#") {
document.getElementById(element.substring(1)).classList.remove(className);
} else {
var elements = document.getElementsByClassName(element.substring(1));
for(var i = 0; i < elements.length; i++) {
elements[i].classList.remove(className);
}
}
} catch(e) {
}
},
removeElement: function(element) {
try {
if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
elem.remove();
} else {
var elements;
if(element.substring(0,1) == ".") {
var testSplit = element.substring(1).split(" ");
if(testSplit.length > 1) {
var insideElement = document.getElementsByClassName(testSplit[0]);
elements = [];
for(var i = 0; i < insideElement.length; i++) {
var innards = insideElement[i].querySelectorAll(testSplit[1]);
for(var y = 0; y < innards.length; y++) {
elements.push(innards[y]);
}
}
} else {
elements = document.getElementsByClassName(element.substring(1));
}
} else {
elements = document.getElementsByTagName(element);
}
for(var i = 0; i < elements.length; i++) {
elements[i].remove();
}
}
} catch(e) {}
},
setHtml: function(element, html) {
if(typeof(element) == "object") {
element.innerHTML = html;
} else if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
elem.innerHTML = html;
} else {
var elements;
if(element.substring(0,1) == ".") {
elements = document.getElementsByClassName(element.substring(1));
} else {
elements = document.getElementsByTagName(element);
}
for(var i = 0; i < elements.length; i++) {
elements[i].innerHTML = html;
}
}
},
attr: function(element, attr, value) {
if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
elem.setAttribute(attr, value);
} else {
var elements;
if(element.substring(0,1) == ".") {
var testSplit = element.substring(1).split(" ");
if(testSplit.length > 1) {
var insideElement = document.getElementsByClassName(testSplit[0]);
elements = [];
for(var i = 0; i < insideElement.length; i++) {
var innards = insideElement[i].querySelectorAll(testSplit[1]);
for(var y = 0; y < innards.length; y++) {
elements.push(innards[y]);
}
}
} else {
elements = document.getElementsByClassName(element.substring(1));
}
} else {
elements = document.getElementsByTagName(element);
}
for(var i = 0; i < elements.length; i++) {
elements[i].setAttribute(attr, value);
}
}
},
tabs: function(element, options) {
if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
if(options == "destroy") {
var this_element = M.Tabs.getInstance(elem);
if(this_element != undefined) this_element.destroy();
} else {
M.Tabs.init(elem, options);
}
} else {
var elements = document.getElementsByClassName(element.substring(1));
for(var i = 0; i < elements.length; i++) {
if(options == "destroy") {
var this_element = M.Tabs.getInstance(elem);
if(this_element != undefined) this_element.destroy();
} else {
M.Tabs.init(elements[i], options);
}
}
}
},
tooltip: function(element, options) {
try {
if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
if(options == "destroy") {
var this_element = M.Tooltip.getInstance(elem);
if(this_element != undefined) this_element.destroy();
} else {
M.Tooltip.init(elem, options);
}
} else {
var elements = document.getElementsByClassName(element.substring(1));
for(var i = 0; i < elements.length; i++) {
if(options == "destroy") {
var this_element = M.Tooltip.getInstance(elem);
if(this_element != undefined) this_element.destroy();
} else {
M.Tooltip.init(elements[i], options);
}
}
}
} catch(e) {}
},
addClass: function(element, className) {
try {
if(typeof(element) == "object") {
try {
if(element.length > 0) {
for(var i = 0; i < element.length; i++) {
if(element[i].className.indexOf(className) == -1) {
element[i].className += " " + className;
}
}
} else {
if(element.className.indexOf(className) == -1) {
element.className += " " + className;
}
}
} catch(e) {
if(element.className.indexOf(className) == -1) {
element.className += " " + className;
}
}
} else if(element.substring(0,1) == "#") {
var elem = document.getElementById(element.substring(1));
if(elem.className.indexOf(className) == -1) {
elem.className += " " + className;
}
} else {
var elements;
if(element.substring(0,1) == ".") {
elements = document.getElementsByClassName(element.substring(1));
} else {
elements = document.getElementsByTagName(element);
}
for(var i = 0; i < elements.length; i++) {
if(elements[i].className.indexOf(className) == -1) {
elements[i].className += " " + className;
}
}
}
}catch(e) {}
},
ajax: function(obj) {
var _async = true;
if(obj.async) _async = obj.async;
if(obj.method == undefined && obj.type != undefined) obj.method = obj.type;
if(obj.method == undefined) obj.method = "GET";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
if (xmlhttp.status == 200 || xmlhttp.status == 201 || xmlhttp.status == 202) {
obj.success(xmlhttp.responseText, xmlhttp);
}
else if(obj.hasOwnProperty("error")){
obj.error(xmlhttp);
}
}
};
xmlhttp.open(obj.method, obj.url, _async);
if(obj.headers) {
for(header in obj.headers) {
xmlhttp.setRequestHeader(header, obj.headers[header]);
}
}
if(obj.data) {
if(typeof(obj.data) == "object") obj.data = JSON.stringify(obj.data);
//xmlhttp.send(sendRequest);
xmlhttp.send(obj.data);
}
else xmlhttp.send();
},
randomString: function(length){ randomString: function(length){
var text = ""; var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_"; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
@@ -262,21 +562,15 @@ var Helper = {
return string.substring(0,1).toUpperCase()+string.substring(1).toLowerCase(); return string.substring(0,1).toUpperCase()+string.substring(1).toLowerCase();
}, },
addClass: function(object, toAdd){
if(!Helper.contains($(object).attr("class").split(" "), toAdd)){
$(object).addClass(toAdd);
}
},
send_mail: function(from, message){ send_mail: function(from, message){
if(from !== "" && message !== ""){ if(from !== "" && message !== ""){
$("#submit-contact-form").addClass("hide"); Helper.addClass("#submit-contact-form", "hide");
$("#send-loader").removeClass("hide"); Helper.removeClass("#send-loader", "hide");
$("#contact-form-from").attr("disabled", "true"); document.getElementById("contact-form-from").setAttribute("disabled", true);
$("#contact-form-message").attr("disabled", "true"); document.getElementById("contact-form-message").setAttribute("disabled", true);
var captcha_response = grecaptcha.getResponse(); var captcha_response = grecaptcha.getResponse();
$.ajax({ Helper.ajax({
type: "POST", type: "POST",
data: { data: {
from: from, from: from,
@@ -286,11 +580,11 @@ var Helper = {
url: "/api/mail", url: "/api/mail",
success: function(data){ success: function(data){
if(data == "success"){ if(data == "success"){
$("#contact-container").empty(); Helper.setHtml("#contact-container", "");
$("#contact-container").html("Mail has been sent, we'll be back with you shortly.") Helper.setHtml("#contact-container", "Mail has been sent, we'll be back with you shortly.")
}else{ }else{
$("#contact-container").empty(); Helper.setHtml("#contact-container", "");
$("#contact-container").html("Something went wrong, sorry about that. You could instead try with your own mail-client: <a title='Open in client' href='mailto:contact@zoff.me?Subject=Contact%20Zoff'>contact@zoff.me</a>") Helper.setHtml("#contact-container", "Something went wrong, sorry about that. You could instead try with your own mail-client: <a title='Open in client' href='mailto:contact@zoff.me?Subject=Contact%20Zoff'>contact@zoff.me</a>")
} }
} }
}); });

18
server/public/assets/js/hostcontroller.js
View File

@@ -5,6 +5,7 @@ var Hostcontroller = {
old_id: null, old_id: null,
host_listener: function(id) { host_listener: function(id) {
if(client) return;
Helper.log([ Helper.log([
"Host-listener triggered", "Host-listener triggered",
"Host-listener id:" + id "Host-listener id:" + id
@@ -15,15 +16,16 @@ var Hostcontroller = {
began = false; began = false;
Hostcontroller.old_id = id; Hostcontroller.old_id = id;
} }
var codeURL = window.location.protocol + "//remote."+window.location.hostname+"/"+id;
if(embed) { if(embed) {
if(window.parentWindow && window.parentOrigin) { if(window.parentWindow && window.parentOrigin) {
window.parentWindow.postMessage({type: "controller", id: id}, window.parentOrigin); window.parentWindow.postMessage({type: "controller", id: id}, window.parentOrigin);
} }
} else if(!embed) {
document.querySelector("#code-text").innerText = id;
document.querySelector("#code-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
document.querySelector("#code-link").setAttribute("href", codeURL);
} }
var codeURL = window.location.protocol + "//remote."+window.location.hostname+"/"+id;
$("#code-text").text(id);
$("#code-qr").attr("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
$("#code-link").attr("href", codeURL);
if(!began) { if(!began) {
began = true; began = true;
setup_host_listener(id); setup_host_listener(id);
@@ -31,6 +33,7 @@ var Hostcontroller = {
}, },
host_on_action: function(arr) { host_on_action: function(arr) {
if(client) return;
if(enabled){ if(enabled){
if(arr.type == "volume") { if(arr.type == "volume") {
Playercontrols.visualVolume(arr.value); Playercontrols.visualVolume(arr.value);
@@ -42,7 +45,7 @@ var Hostcontroller = {
Admin.beginning = true; Admin.beginning = true;
chan = arr.value.toLowerCase(); chan = arr.value.toLowerCase();
$("#chan").html(Helper.upperFirst(chan)); Helper.setHtml("#chan", Helper.upperFirst(chan));
w_p = true; w_p = true;
var add = ""; var add = "";
@@ -61,7 +64,10 @@ var Hostcontroller = {
}, },
change_enabled:function(val){ change_enabled:function(val){
if(client) return;
enabled = val; enabled = val;
$(".remote_switch_class").prop("checked", enabled); try {
document.querySelector(".remote_switch_class").checked = enabled;
}catch(e) {}
} }
}; };

629
server/public/assets/js/list.js
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

26
server/public/assets/js/mobileremote.js
View File

@@ -11,15 +11,15 @@ var Mobile_remote = {
set_id: function(id) { set_id: function(id) {
Mobile_remote.id = id; Mobile_remote.id = id;
$("#pausebutton_remote").attr("disabled", false); document.getElementById("pausebutton_remote").removeAttribute("disabled");
$("#skipbutton_remote").attr("disabled", false); document.getElementById("skipbutton_remote").removeAttribute("disabled", false);
$("#playbutton_remote").attr("disabled", false); document.getElementById("playbutton_remote").removeAttribute("disabled", false);
$("#skipbutton_remote").attr("disabled", false); document.getElementById("skipbutton_remote").removeAttribute("disabled", false);
$("#remote_channel").val(""); document.getElementById("remote_channel").value = "";
$("#remote_channel").attr("placeholder", "Change channel"); document.getElementById("remote_channel").setAttribute("placeholder", "Change channel");
$("#remote_header").html("Controlling " + id); document.getElementById("remote_header").innerText = "Controlling " + id;
$("#volume-control-remote").css("display", "inline-block"); Helper.css("#volume-control-remote", "display", "inline-block");
$(".slider-vol-mobile").attr("style", "display: inline-block !important"); document.querySelector(".slider-vol-mobile").setAttribute("style", "display: inline-block !important");
}, },
set_channel: function(channel_name) { set_channel: function(channel_name) {
@@ -40,10 +40,10 @@ var Mobile_remote = {
initiate_volume: function() { initiate_volume: function() {
var vol = 100; var vol = 100;
$("#volume-control-remote").append("<div class='volume-slid-remote'></div>"); document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "<div class='volume-slid-remote'></div>");
$("#volume-control-remote").append("<div class='volume-handle-remote'></div>"); document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "<div class='volume-handle-remote'></div>");
$(".volume-slid-remote").css("width", vol + "%"); Helper.css(".volume-slid-remote", "width", vol + "%");
$(".volume-handle-remote").css("left", "calc(" + vol + "% - 1px)"); Helper.css(".volume-handle-remote", "left", "calc(" + vol + "% - 1px)");
document.getElementById("volume-control-remote").addEventListener("touchstart", function(e) { document.getElementById("volume-control-remote").addEventListener("touchstart", function(e) {
e.preventDefault(); e.preventDefault();
Playercontrols.dragMouseDown(e); Playercontrols.dragMouseDown(e);

104
server/public/assets/js/player.js
View File

@@ -81,15 +81,12 @@ var Player = {
} catch(e){} } catch(e){}
Helper.log(["video_id variable: " + video_id]); Helper.log(["video_id variable: " + video_id]);
if(!obj.np){ if(!obj.np){
$('#song-title').html("Empty channel. Add some songs!"); document.getElementById('song-title').innerText = "Empty channel. Add some songs!";
document.title = "Zoff - the shared YouTube based radio"; document.title = "Zoff - the shared YouTube based radio";
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
//$("#player_overlay").height($("#player").height());
if(!window.MSStream && !chromecastAvailable) { if(!window.MSStream && !chromecastAvailable) {
if($("#player_overlay").hasClass("hide")) { Helper.removeClass("#player_overlay", "hide");
$("#player_overlay").removeClass("hide");
}
} }
try{ try{
if(!chromecastAvailable) { if(!chromecastAvailable) {
@@ -167,7 +164,7 @@ var Player = {
if(full_playlist[0].id == video_id && !mobile_beginning){ if(full_playlist[0].id == video_id && !mobile_beginning){
List.song_change(full_playlist[0].added); List.song_change(full_playlist[0].added);
} }
Suggestions.fetchYoutubeSuggests(video_id); if(!client) Suggestions.fetchYoutubeSuggests(video_id);
}catch(e){} }catch(e){}
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
@@ -283,18 +280,18 @@ var Player = {
break; break;
case YT.PlayerState.PLAYING: case YT.PlayerState.PLAYING:
if(embed) { if(embed) {
$("#player").css("visibility", "visible"); Helper.css("#player", "visibility", "visible");
} }
if(embed && !autoplay) autoplay = true; if(embed && !autoplay) autoplay = true;
if(!window.MSStream) { if(!window.MSStream) {
$("#player").css("opacity", "1"); Helper.css("#player", "opacity", "1");
//if(!Helper.mobilecheck()) { //if(!Helper.mobilecheck()) {
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
/*if(Frontpage.winter && $("#snow").length == 0) {
$("#video-container").prepend('<div id="snow" class="snow-channel"></div>');
}*/
//} //}
} }
Helper.css("#playpause", "visibility", "visible");
Helper.css("#playpause", "pointer-events", "all");
playing = true; playing = true;
if(beginning && Helper.mobilecheck() && !chromecastAvailable){ if(beginning && Helper.mobilecheck() && !chromecastAvailable){
//Player.pauseVideo(); //Player.pauseVideo();
@@ -305,9 +302,9 @@ var Player = {
if(!embed && window.location.pathname != "/" && !chromecastAvailable) Helper.addClass("#player_overlay", "hide"); if(!embed && window.location.pathname != "/" && !chromecastAvailable) Helper.addClass("#player_overlay", "hide");
if(window.location.pathname != "/"){ if(window.location.pathname != "/"){
if(document.getElementById("play").className.split(" ").length == 1) if(document.getElementById("play").className.split(" ").length == 1)
$("#play").toggleClass("hide"); Helper.toggleClass("#play", "hide");
if(document.getElementById("pause").className.split(" ").length == 2) if(document.getElementById("pause").className.split(" ").length == 2)
$("#pause").toggleClass("hide"); Helper.toggleClass("#pause", "hide");
} }
if((paused || was_stopped) && !offline) { if((paused || was_stopped) && !offline) {
/*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true);
@@ -325,9 +322,9 @@ var Player = {
} else { } else {
if(!chromecastAvailable){ if(!chromecastAvailable){
if(beginning && mobile_beginning) { if(beginning && mobile_beginning) {
$("#playpause").css("visibility", "visible"); Helper.css("#playpause", "visibility", "visible");
$("#playpause").css("pointer-events", "all"); Helper.css("#playpause", "pointer-events", "all");
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
} }
if(!empty_clear && !gotten_np) { if(!empty_clear && !gotten_np) {
paused = true; paused = true;
@@ -355,9 +352,9 @@ var Player = {
//socket.emit('pos', {channel: chan.toLowerCase()}); //socket.emit('pos', {channel: chan.toLowerCase()});
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']}); chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']});
//chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg'); //chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
if($("#pause").hasClass("hide")){ if(document.getElementById("pause").classList.contains("hide")){
$("#play").toggleClass("hide"); Helper.toggleClass("#play", "hide");
$("#pause").toggleClass("hide"); Helper.toggleClass("#pause", "hide");
} }
//Playercontrols.play_pause(); //Playercontrols.play_pause();
} else { } else {
@@ -368,9 +365,9 @@ var Player = {
pauseVideo: function(){ pauseVideo: function(){
if(chromecastAvailable){ if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.me", {type: "pauseVideo"}); castSession.sendMessage("urn:x-cast:zoff.me", {type: "pauseVideo"});
if($("#play").hasClass("hide")){ if(document.getElementById("play").classList.contains("hide")){
$("#play").toggleClass("hide"); Helper.toggleClass("#play", "hide");
$("#pause").toggleClass("hide"); Helper.toggleClass("#pause", "hide");
} }
//Playercontrols.play_pause(); //Playercontrols.play_pause();
} else { } else {
@@ -535,16 +532,16 @@ var Player = {
//var elem = document.getElementById('song-title'); //var elem = document.getElementById('song-title');
//var getTitleViews = document.getElementById('viewers'); //var getTitleViews = document.getElementById('viewers');
$("#song-title").text(title); document.getElementById("song-title").innerText = title;
$("#viewers").html(outPutWord + " " + v); if(!client) document.getElementById("viewers").innerHTML = outPutWord + " " + v;
$("#song-title").attr("title", title); document.getElementById("song-title").setAttribute("title", title);
//elem.title = title; //elem.title = title;
if(chromecastAvailable){ if(chromecastAvailable){
$("#player_overlay").css("background", "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)"); Helper.css("#player_overlay", "background", "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)");
$("#player_overlay").css("background-position", "center"); Helper.css("#player_overlay", "background-position", "center");
$("#player_overlay").css("background-size", "100%"); Helper.css("#player_overlay", "background-size", "100%");
$("#player_overlay").css("background-color", "black"); Helper.css("#player_overlay", "background-color", "black");
$("#player_overlay").css("background-repeat", "no-repeat"); Helper.css("#player_overlay", "background-repeat", "no-repeat");
//$("#player_overlay").css("height", "calc(100% - 32px)"); //$("#player_overlay").css("height", "calc(100% - 32px)");
} }
} }
@@ -572,23 +569,23 @@ var Player = {
player_ready = true; player_ready = true;
if(!window.MSStream) { if(!window.MSStream) {
if(Helper.mobilecheck()){ if(Helper.mobilecheck()){
$("#playpause").css("visibility", "hidden"); Helper.css("#playpause", "visibility", "hidden");
$("#playpause").css("pointer-events", "none"); Helper.css("#playpause", "pointer-events", "none");
$("#player").css("opacity", "1"); Helper.css("#player", "opacity", "1");
if(offline) { if(offline) {
setTimeout(function(){ setTimeout(function(){
$("#channel-load").css("display", "none"); Helper.css("#channel-load", "display", "none");
$("#playpause").css("visibility", "visible"); Helper.css("#playpause", "visibility", "visible");
$("#playpause").css("pointer-events", "all"); Helper.css("#playpause", "pointer-events", "all");
}, 1500); }, 1500);
} }
} else { } else {
//$("#channel-load").css("display", "none"); //$("#channel-load").css("display", "none");
} }
/*$("#player").css("opacity", "1");*/ /*$("#player").css("opacity", "1");*/
$(".video-container").removeClass("no-opacity"); Helper.removeClass(".video-container", "no-opacity");
$("#controls").css("opacity", "1"); Helper.css("#controls", "opacity", "1");
$(".playlist").css("opacity", "1"); Helper.css(".playlist", "opacity", "1");
if(autoplay) { if(autoplay) {
Player.loadVideoById(video_id, duration); Player.loadVideoById(video_id, duration);
} else { } else {
@@ -615,6 +612,7 @@ var Player = {
} }
Player.readyLooks(); Player.readyLooks();
Playercontrols.initYoutubeControls(Player.player); Playercontrols.initYoutubeControls(Player.player);
Player.player.setVolume(Crypt.get_volume());
Playercontrols.initSlider(); Playercontrols.initSlider();
Player.player.setVolume(Crypt.get_volume()); Player.player.setVolume(Crypt.get_volume());
}catch(e){ }catch(e){
@@ -629,33 +627,33 @@ var Player = {
var color = c.color; var color = c.color;
if(window.location.pathname != "/" && ((offline && c.only) || (!offline && !c.only) || (!offline && c.only))) { if(window.location.pathname != "/" && ((offline && c.only) || (!offline && !c.only) || (!offline && c.only))) {
document.getElementById("main-container").style.backgroundColor = Helper.rgbToHsl(color,true); document.getElementById("main-container").style.backgroundColor = Helper.rgbToHsl(color,true);
$("#nav").css("background-color", Helper.rgbToHsl(color, true)); Helper.css("#nav", "background-color", Helper.rgbToHsl(color, true));
$(".title-container").css("background-color", Helper.rgbToHsl(color, true)); Helper.css(".title-container", "background-color", Helper.rgbToHsl(color, true));
var hexHsl = Helper.rgbToHex(color[0], color[1], color[2]); var hexHsl = Helper.rgbToHex(color[0], color[1], color[2]);
try { try {
var hsl = Helper.rgbToHsl(color, true).replace("hsl(", "").replace(")", "").replace("%", "").replace(/ /g,'').replace("%", "").split(","); var hsl = Helper.rgbToHsl(color, true).replace("hsl(", "").replace(")", "").replace("%", "").replace(/ /g,'').replace("%", "").split(",");
hexHsl = Helper.hslToHex(parseInt(hsl[0]), parseInt(hsl[1]), parseInt(hsl[2])); hexHsl = Helper.hslToHex(parseInt(hsl[0]), parseInt(hsl[1]), parseInt(hsl[2]));
} catch(e) {} } catch(e) {}
$("meta[name=theme-color]").attr("content", hexHsl); document.querySelector("meta[name=theme-color]").setAttribute("content", hexHsl);
if(!client) { if(!client) {
var new_color = Helper.rgbToHex(color[0], color[1], color[2]); var new_color = Helper.rgbToHex(color[0], color[1], color[2]);
new_color = Helper.hexToComplimentary(new_color); new_color = Helper.hexToComplimentary(new_color);
new_color = Helper.hexToRgb(new_color); new_color = Helper.hexToRgb(new_color);
new_color = Helper.rgbToHsl([new_color.r, new_color.g, new_color.b], true); new_color = Helper.rgbToHsl([new_color.r, new_color.g, new_color.b], true);
$("#controls").css("background", new_color); Helper.css("#controls", "background", new_color);
} }
} }
}, },
set_width: function(val){ set_width: function(val){
$(".video-container").width(val); document.getElementsByClassName("video-container")[0].style.width = val + "px";
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
if($(window).width() > 769) { if(window.innerWidth > 769) {
var test_against_width = $(window).width() - $(".control-list").width() - $(".zbrand").outerWidth() - $(".brand-logo-navigate").outerWidth() - 66; var test_against_width = window.innerWidth - window.getComputedStyle(document.querySelector(".control-list"), null).getPropertyValue("width") - document.querySelector(".zbrand").offsetWidth - document.querySelector(".brand-logo-navigate").offsetWidth - 66;
title_width = test_against_width; title_width = test_against_width;
$(".title-container").width(title_width); document.querySelector(".title-container").style.width = title_width + "px";
} else { } else {
$(".title-container").width("100%"); document.querySelector(".title-container").style.width = "100%";
} }
} }
@@ -738,7 +736,7 @@ var Player = {
minutes = Math.floor(currDurr / 60); minutes = Math.floor(currDurr / 60);
seconds = currDurr - (minutes * 60); seconds = currDurr - (minutes * 60);
if(!isNaN(minutes) && !isNaN(seconds) && !isNaN(dMinutes) && !isNaN(dSeconds)) { if(!isNaN(minutes) && !isNaN(seconds) && !isNaN(dMinutes) && !isNaN(dSeconds)) {
$("#duration").html(Helper.pad(minutes)+":"+Helper.pad(seconds)+" <span id='dash'>/</span> "+Helper.pad(dMinutes)+":"+Helper.pad(dSeconds)); Helper.setHtml("#duration", Helper.pad(minutes)+":"+Helper.pad(seconds)+" <span id='dash'>/</span> "+Helper.pad(dMinutes)+":"+Helper.pad(dSeconds));
} }
per = (100 / duration) * currDurr; per = (100 / duration) * currDurr;
if(per >= 100) { if(per >= 100) {
@@ -754,7 +752,7 @@ var Player = {
} }
if(!dragging) { if(!dragging) {
$("#bar").width(per+"%"); document.getElementById("bar").style.width = per+"%";
} }
if(Player.player.getCurrentTime() > Player.np.end && Player.player.getPlayerState() == YT.PlayerState.PLAYING) { if(Player.player.getCurrentTime() > Player.np.end && Player.player.getPlayerState() == YT.PlayerState.PLAYING) {
@@ -777,7 +775,7 @@ var Player = {
}, },
loadPlayer: function() { loadPlayer: function() {
if($("script[src='https://www.youtube.com/iframe_api']").length == 1){ if(document.querySelectorAll("script[src='https://www.youtube.com/iframe_api']").length == 1){
try{ try{
Player.onYouTubeIframeAPIReady(); Player.onYouTubeIframeAPIReady();
} catch(error){ } catch(error){

168
server/public/assets/js/playercontrols.js
View File

@@ -8,18 +8,18 @@ var Playercontrols = {
}, },
initControls: function() { initControls: function() {
$("#volume-button").on("click", Playercontrols.mute_video); document.getElementById("volume-button").addEventListener("click", Playercontrols.mute_video);
$("#playpause").on("click", Playercontrols.play_pause); document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause);
$("#volume-button-overlay").on("click", Playercontrols.mute_video); document.getElementById("volume-button-overlay").addEventListener("click", Playercontrols.mute_video);
$("#playpause-overlay").on("click", Playercontrols.play_pause); document.getElementById("playpause-overlay").addEventListener("click", Playercontrols.play_pause);
$("#fullscreen").on("click", Playercontrols.fullscreen); document.getElementById("fullscreen").addEventListener("click", Playercontrols.fullscreen);
}, },
initSlider: function() { initSlider: function() {
try { try {
vol = (Crypt.get_volume()); vol = (Crypt.get_volume());
//$("#volume").slider("destroy");
} catch(e){ } catch(e){
vol = 100; vol = 100;
} }
@@ -30,24 +30,20 @@ var Playercontrols = {
}catch(e){} }catch(e){}
if(Helper.mobilecheck() || slider_type == "vertical") { if(Helper.mobilecheck() || slider_type == "vertical") {
//slider_values.orientation = "vertical"; //slider_values.orientation = "vertical";
if(!$(".volume-container").hasClass("hide")) { if(!document.querySelector(".volume-container").classList.contains("hide")) {
$(".volume-container").toggleClass("hide"); Helper.toggleClass(".volume-container", "hide");
} }
} }
$("#volume").append("<div class='volume-slid " + slider_type + "'></div>"); document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-slid " + slider_type + "'></div>");
$("#volume").append("<div class='volume-handle " + slider_type + "'></div>"); document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-handle " + slider_type + "'></div>");
if(slider_type != "vertical") { if(slider_type != "vertical") {
if($("#volume").hasClass("vertical")) { Helper.removeClass("#volume", "vertical");
$("#volume").removeClass("vertical"); Helper.css(".volume-slid", "width", vol + "%");
} Helper.css(".volume-handle", "left", "calc(" + vol + "% - 1px)");
$(".volume-slid").css("width", vol + "%");
$(".volume-handle").css("left", "calc(" + vol + "% - 1px)");
} else { } else {
if(!$("#volume").hasClass("vertical")) { Helper.addClass("#volume", "vertical");
$("#volume").addClass("vertical"); Helper.css(".volume-slid", "height", vol + "%");
} Helper.css(".volume-handle", "bottom", "calc(" + vol + "% - 1px)");
$(".volume-slid").css("height", vol + "%");
$(".volume-handle").css("bottom", "calc(" + vol + "% - 1px)");
} }
Playercontrols.choose_button(vol, false); Playercontrols.choose_button(vol, false);
@@ -185,7 +181,7 @@ var Playercontrols = {
}, },
fullscreen: function() { fullscreen: function() {
var playerElement = $("#player").get(0); var playerElement = document.getElementById("player");
var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen; var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
if (requestFullScreen) { if (requestFullScreen) {
requestFullScreen.bind(playerElement)(); requestFullScreen.bind(playerElement)();
@@ -200,18 +196,18 @@ var Playercontrols = {
if(Helper.mobilecheck() && !window.MSStream){ if(Helper.mobilecheck() && !window.MSStream){
//if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
//document.getElementById("player").style.display = "none"; //document.getElementById("player").style.display = "none";
$("#player").css("display", "none"); Helper.css("#player", "display", "none");
$(".video-container").toggleClass("click-through"); Helper.toggleClass(".video-container", "click-through");
$(".page-footer").toggleClass("padding-bottom-extra"); Helper.toggleClass(".page-footer", "padding-bottom-extra");
} }
} else if(Player.player.getPlayerState() == YT.PlayerState.PAUSED || Player.player.getPlayerState() === YT.PlayerState.ENDED || (Player.player.getPlayerState() === YT.PlayerState.CUED)){ } else if(Player.player.getPlayerState() == YT.PlayerState.PAUSED || Player.player.getPlayerState() === YT.PlayerState.ENDED || (Player.player.getPlayerState() === YT.PlayerState.CUED)){
Player.playVideo(); Player.playVideo();
//if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(Helper.mobilecheck() && !window.MSStream){ if(Helper.mobilecheck() && !window.MSStream){
//document.getElementById("player").style.display = "block"; //document.getElementById("player").style.display = "block";
$("#player").css("display", "block"); Helper.css("#player", "display", "block");
$(".video-container").toggleClass("click-through"); Helper.toggleClass(".video-container", "click-through");
$(".page-footer").toggleClass("padding-bottom-extra"); Helper.toggleClass(".page-footer", "padding-bottom-extra");
} }
} }
} else { } else {
@@ -221,26 +217,26 @@ var Playercontrols = {
play_pause_show: function() { play_pause_show: function() {
if(chromecastAvailable){ if(chromecastAvailable){
if($("#play").hasClass("hide")){ if(document.getElementById("play").classList.contains("hide")){
Player.pauseVideo(); Player.pauseVideo();
} else if($("#pause").hasClass("hide")){ } else if(document.getElementById("pause").classList.contains("hide")){
Player.playVideo(); Player.playVideo();
} }
} else { } else {
if(!$("#pause").hasClass("hide")) { if(!document.getElementById("pause").classList.contains("hide")) {
$("#pause").toggleClass("hide"); Helper.toggleClass("#pause", "hide");
$("#pause-overlay").toggleClass("hide"); Helper.toggleClass("#pause-overlay", "hide");
} }
if($("#play").hasClass("hide")) { if(document.getElementById("play").classList.contains("hide")) {
$("#play").toggleClass("hide"); Helper.toggleClass("#play", "hide");
$("#play-overlay").toggleClass("hide"); Helper.toggleClass("#play-overlay", "hide");
} }
} }
}, },
settings: function() { settings: function() {
$("#qS").toggleClass("hide"); Helper.toggleClass("#qS", "hide");
}, },
changeQuality: function(wantedQ) { changeQuality: function(wantedQ) {
@@ -248,12 +244,12 @@ var Playercontrols = {
Player.player.setPlaybackQuality(wantedQ); Player.player.setPlaybackQuality(wantedQ);
Player.player.getPlaybackQuality(); Player.player.getPlaybackQuality();
} }
$("#qS").toggleClass("hide"); Helper.toggleClass("#qS", "hide");
}, },
mute_video: function() { mute_video: function() {
if(Helper.mobilecheck() || slider_type == "vertical") { if(Helper.mobilecheck() || slider_type == "vertical") {
$(".volume-container").toggleClass("hide"); Helper.toggleClass(".volume-container", "hide");
} else { } else {
if(!Player.player.isMuted()) { if(!Player.player.isMuted()) {
if(chromecastAvailable) castSession.sendMessage("urn:x-cast:zoff.me", {type: "mute"}); if(chromecastAvailable) castSession.sendMessage("urn:x-cast:zoff.me", {type: "mute"});
@@ -277,73 +273,73 @@ var Playercontrols = {
choose_button: function(vol, mute) { choose_button: function(vol, mute) {
if(!mute){ if(!mute){
if(vol >= 0 && vol <= 33) { if(vol >= 0 && vol <= 33) {
if(!$("#v-full").hasClass("hide")) { if(!document.getElementById("v-full").classList.contains("hide")) {
$("#v-full").toggleClass("hide"); Helper.toggleClass("#v-full", "hide");
$("#v-full-overlay").toggleClass("hide"); Helper.toggleClass("#v-full-overlay", "hide");
} }
if(!$("#v-medium").hasClass("hide")) { if(!document.getElementById("v-medium").classList.contains("hide")) {
$("#v-medium").toggleClass("hide"); Helper.toggleClass("#v-medium", "hide");
$("#v-medium-overlay").toggleClass("hide"); Helper.toggleClass("#v-medium-overlay", "hide");
} }
if($("#v-low").hasClass("hide")) { if(document.getElementById("v-low").classList.contains("hide")) {
$("#v-low").toggleClass("hide"); Helper.toggleClass("#v-low", "hide");
$("#v-low-overlay").toggleClass("hide"); Helper.toggleClass("#v-low-overlay", "hide");
} }
if(!$("#v-mute").hasClass("hide")) { if(!document.getElementById("v-mute").classList.contains("hide")) {
$("#v-mute").toggleClass("hide"); Helper.toggleClass("#v-mute", "hide");
$("#v-mute-overlay").toggleClass("hide"); Helper.toggleClass("#v-mute-overlay", "hide");
} }
} else if(vol >= 34 && vol <= 66) { } else if(vol >= 34 && vol <= 66) {
if(!$("#v-full").hasClass("hide")) { if(!document.getElementById("v-full").classList.contains("hide")) {
$("#v-full").toggleClass("hide"); Helper.toggleClass("#v-full", "hide");
$("#v-full-overlay").toggleClass("hide"); Helper.toggleClass("#v-full-overlay", "hide");
} }
if($("#v-medium").hasClass("hide")) { if(document.getElementById("v-medium").classList.contains("hide")) {
$("#v-medium").toggleClass("hide"); Helper.toggleClass("#v-medium", "hide");
$("#v-medium-overlay").toggleClass("hide"); Helper.toggleClass("#v-medium-overlay", "hide");
} }
if(!$("#v-low").hasClass("hide")) { if(!document.getElementById("v-low").classList.contains("hide")) {
$("#v-low").toggleClass("hide"); Helper.toggleClass("#v-low", "hide");
$("#v-low-overlay").toggleClass("hide"); Helper.toggleClass("#v-low-overlay", "hide");
} }
if(!$("#v-mute").hasClass("hide")) { if(!document.getElementById("v-mute").classList.contains("hide")) {
$("#v-mute").toggleClass("hide"); Helper.toggleClass("#v-mute", "hide");
$("#v-mute-overlay").toggleClass("hide"); Helper.toggleClass("#v-mute-overlay", "hide");
} }
} else if(vol >= 67 && vol <= 100) { } else if(vol >= 67 && vol <= 100) {
if($("#v-full").hasClass("hide")) { if(document.getElementById("v-full").classList.contains("hide")) {
$("#v-full").toggleClass("hide"); Helper.toggleClass("#v-full", "hide");
$("#v-full-overlay").toggleClass("hide"); Helper.toggleClass("#v-full-overlay", "hide");
} }
if(!$("#v-medium").hasClass("hide")) { if(!document.getElementById("v-medium").classList.contains("hide")) {
$("#v-medium").toggleClass("hide"); Helper.toggleClass("#v-medium", "hide");
$("#v-medium-overlay").toggleClass("hide"); Helper.toggleClass("#v-medium-overlay", "hide");
} }
if(!$("#v-low").hasClass("hide")) { if(!document.getElementById("v-low").classList.contains("hide")) {
$("#v-low").toggleClass("hide"); Helper.toggleClass("#v-low", "hide");
$("#v-low-overlay").toggleClass("hide"); Helper.toggleClass("#v-low-overlay", "hide");
} }
if(!$("#v-mute").hasClass("hide")) { if(!document.getElementById("v-mute").classList.contains("hide")) {
$("#v-mute").toggleClass("hide"); Helper.toggleClass("#v-mute", "hide");
$("#v-mute-overlay").toggleClass("hide"); Helper.toggleClass("#v-mute-overlay", "hide");
} }
} }
} else { } else {
if(!$("#v-full").hasClass("hide")) { if(!document.getElementById("v-full").classList.contains("hide")) {
$("#v-full").toggleClass("hide"); Helper.toggleClass("#v-full", "hide");
$("#v-full-overlay").toggleClass("hide"); Helper.toggleClass("#v-full-overlay", "hide");
} }
if(!$("#v-medium").hasClass("hide")) { if(!document.getElementById("v-medium").classList.contains("hide")) {
$("#v-medium").toggleClass("hide"); Helper.toggleClass("#v-medium", "hide");
$("#v-medium-overlay").toggleClass("hide"); Helper.toggleClass("#v-medium-overlay", "hide");
} }
if(!$("#v-low").hasClass("hide")) { if(!document.getElementById("v-low").classList.contains("hide")) {
$("#v-low").toggleClass("hide"); Helper.toggleClass("#v-low", "hide");
$("#v-low-overlay").toggleClass("hide"); Helper.toggleClass("#v-low-overlay", "hide");
} }
if($("#v-mute").hasClass("hide")) { if(document.getElementById("v-mute").classList.contains("hide")) {
$("#v-mute").toggleClass("hide"); Helper.toggleClass("#v-mute", "hide");
$("#v-mute-overlay").toggleClass("hide"); Helper.toggleClass("#v-mute-overlay", "hide");
} }
} }
}, },

74
server/public/assets/js/remotecontroller.js
View File

@@ -1,4 +1,5 @@
var start = true; var start = true;
var dynamicListeners = {};
mobilecheck = function() { mobilecheck = function() {
var check = false; var check = false;
@@ -6,17 +7,17 @@ mobilecheck = function() {
return check; return check;
}; };
$(document).ready(function (){ window.addEventListener("DOMContentLoaded", function (){
document.title = "Zoff Remote"; document.title = "Zoff Remote";
setTimeout(function(){$("#search").focus();},500); setTimeout(function(){document.getElementById("search").focus();},500);
var connection_options = { var connection_options = {
'sync disconnect on unload':true, 'sync disconnect on unload':true,
'secure': true 'secure': true
}; };
$("#about").modal(); M.Modal.init(document.getElementById("about"));
$("#contact").modal(); M.Modal.init(document.getElementById("contact"));
$("#help").modal(); M.Modal.init(document.getElementById("help"));
if(window.location.hostname == "remote.zoff.me") add = "https://zoff.me"; if(window.location.hostname == "remote.zoff.me") add = "https://zoff.me";
else add = "localhost"; else add = "localhost";
@@ -30,22 +31,53 @@ $(document).ready(function (){
id = id.toLowerCase(); id = id.toLowerCase();
Remotecontroller.control(); Remotecontroller.control();
} }
}); }, false);
$(document).on("click", "#playbutton", function() {
function handleEvent(e, target, tried, type) {
for(var y = 0; y < e.path.length; y++) {
var target = e.path[y];
if(dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) {
dynamicListeners[type]["#" + target.id].call(target);
return;
} else {
if(target.classList == undefined) return;
for(var i = 0; i < target.classList.length; i++) {
if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) {
dynamicListeners[type]["." + target.classList[i]].call(target);
return;
}
}
}
}
}
function addListener(type, element, callback) {
if(dynamicListeners[type] == undefined) dynamicListeners[type] = {};
dynamicListeners[type][element] = callback;
}
document.addEventListener("click", function(e) {
handleEvent(e, e.target, false, "click");
}, true);
document.addEventListener("submit", function(e) {
handleEvent(e, e.target, false, "submit");
}, true);
addListener("click", "#playbutton", function() {
socket.emit("id", {id: id, type: "play", value: "mock"}); socket.emit("id", {id: id, type: "play", value: "mock"});
}); });
$(document).on("click", "#pausebutton", function() { addListener("click", "#pausebutton", function() {
socket.emit("id", {id: id, type: "pause", value: "mock"}); socket.emit("id", {id: id, type: "pause", value: "mock"});
}); });
$(document).on("click", "#skipbutton", function() { addListener("click", "#skipbutton", function() {
socket.emit("id", {id: id, type: "skip", value: "mock"}); socket.emit("id", {id: id, type: "skip", value: "mock"});
}); });
$(document).on("submit", "#remoteform", function(e) { addListener("submit", "#remoteform", function(e) {
e.preventDefault(); event.preventDefault();
Remotecontroller.control(); Remotecontroller.control();
}); });
@@ -60,14 +92,14 @@ var Remotecontroller = {
document.getElementById("remoteform").chan.value = ""; document.getElementById("remoteform").chan.value = "";
start = false; start = false;
$(".volume-elements").css("display", "flex"); Helper.css(".volume-elements", "display", "flex");
$(".rc").css("display", "block"); Helper.css(".rc", "display", "block");
//document.getElementById("base").setAttribute("onsubmit", "control(); return false;"); //document.getElementById("base").setAttribute("onsubmit", "control(); return false;");
$("#remote-text").text("Controlling "+ id.toUpperCase()); document.getElementById("remote-text").innerText = "Controlling "+ id.toUpperCase();
document.getElementById("search").setAttribute("length", "18"); document.getElementById("search").setAttribute("length", "18");
document.getElementById("search").setAttribute("maxlength", "18"); document.getElementById("search").setAttribute("maxlength", "18");
$("#forsearch").html("Type new channel name to change to"); document.getElementById("forsearch").innerText = "Type new channel name to change to";
// //
/*$("#volume-control").slider({ /*$("#volume-control").slider({
@@ -81,11 +113,11 @@ var Remotecontroller = {
} }
//});*/ //});*/
$("#volume").append("<div class='volume-slid'></div>"); document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-slid'></div>");
$("#volume").append("<div class='volume-handle'></div>"); document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-handle'></div>");
$(".volume-slid").css("width", "100%"); Helper.css(".volume-slid", "width", "100%");
$(".volume-handle").css("left", "calc(100% - 1px)"); Helper.css(".volume-handle", "left", "calc(100% - 1px)");
//document.getElementsByClassName("volume-handle")[0].onmousedown = Remotecontroller.dragMouseDown; //document.getElementsByClassName("volume-handle")[0].onmousedown = Remotecontroller.dragMouseDown;
//$("#volume").slider(slider_values); //$("#volume").slider(slider_values);
//document.getElementsByClassName("volume-slid")[0].onmousedown = Remotecontroller.dragMouseDown; //document.getElementsByClassName("volume-slid")[0].onmousedown = Remotecontroller.dragMouseDown;
@@ -99,8 +131,8 @@ var Remotecontroller = {
Remotecontroller.closeDragElement(); Remotecontroller.closeDragElement();
} }
} else { } else {
socket.emit("id", {id: id, type: "channel", value: $("#search").val().toLowerCase()}); socket.emit("id", {id: id, type: "channel", value: document.getElementById("search").value.toLowerCase()});
$("#search").val(""); document.getElementById("search").value = "";
} }
}, },

314
server/public/assets/js/search.js
View File

@@ -8,36 +8,37 @@ var Search = {
submitYouTubeError: false, submitYouTubeError: false,
showSearch: function(){ showSearch: function(){
$("#search-wrapper").toggleClass("hide"); Helper.toggleClass("#search-wrapper", "hide");
if(Helper.mobilecheck()) if(Helper.mobilecheck())
{ {
$(".search_input").focus(); document.querySelector(".search_input").focus();
} }
$("#song-title").toggleClass("hide"); Helper.toggleClass("#song-title", "hide");
//$("#results").empty(); //$("#results").empty();
if($("#search-btn i").html() == "close") { if(document.querySelector("#search-btn i").innerText == "close") {
$("body").attr("style", "overflow-y:auto") document.querySelector("body").setAttribute("style", "overflow-y:auto")
$("#results").slideUp({ /*$("#results").slideUp({
complete: function() { complete: function() {
$("#results").empty(); $("#results").empty();
} }
}); });*/
$(".search_input").val(""); document.getElementById("results").innerHTML = "";
$("#search-btn i").html("search"); document.querySelector(".search_input").value = "";
document.querySelector("#search-btn i").innerText = "search";
} else { } else {
$("#search-btn i").html("close"); document.querySelector("#search-btn i").innerText = "close";
} }
$("#search").focus(); document.querySelector("#search").focus();
}, },
search: function(search_input, retried, related, pagination){ search: function(search_input, retried, related, pagination){
if(result_html === undefined || empty_results_html === undefined) { if(result_html === undefined || empty_results_html === undefined) {
result_html = $("#temp-results-container"); result_html = document.getElementById("temp-results-container");
empty_results_html = $("#empty-results-container").html(); empty_results_html = Helper.html("#empty-results-container");
} }
if(!pagination && $("#inner-results").length == 0) { if(!pagination && document.querySelectorAll("#inner-results").length == 0) {
$(".search_results").html(''); Helper.setHtml(".search_results", '');
} }
if(search_input !== ""){ if(search_input !== ""){
searching = true; searching = true;
@@ -52,44 +53,44 @@ var Search = {
var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id="; var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
} }
if(!Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active"))
$(".search_loader_spinner").addClass("active");
if(Helper.contains($("#results").attr("class").split(" "), "hide")) Helper.addClass(".search_loader_spinner", "active");
$("#results").removeClass("hide"); Helper.removeClass("#results", "hide");
$.ajax({ Helper.ajax({
type: "GET", type: "GET",
url: yt_url, url: yt_url,
dataType: "jsonp", dataType: "jsonp",
success: function(response){ success: function(response){
response = JSON.parse(response);
var nextPageToken = response.nextPageToken; var nextPageToken = response.nextPageToken;
var prevPageToken = response.prevPageToken; var prevPageToken = response.prevPageToken;
if(response.items.length === 0) { if(response.items.length === 0) {
$("#results").empty(); document.getElementById("results").innerHTML = "";
$("#results").css("display", "block"); Helper.css("#results", "display", "block");
$("<div style='display:none;' id='inner-results' class='empty-inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33); //$("<div style='display:none;' id='inner-results' class='empty-inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active")) document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);' class='empty-inner-results'>"+empty_results_html+"</div>");
$(".search_loader_spinner").removeClass("active"); Helper.removeClass(".search_loader_spinner", "active");
} else if(response.items){ } else if(response.items){
$.each(response.items, function(i,data) { for(var i = 0; i < response.items.length; i++) {
vid_url += data.id.videoId+","; vid_url += response.items[i].id.videoId+",";
}); }
$.ajax({ Helper.ajax({
type: "GET", type: "GET",
url: vid_url, url: vid_url,
dataType:"jsonp", dataType:"jsonp",
success: function(response){ success: function(response){
response = JSON.parse(response);
var output = ""; var output = "";
var pre_result = $(result_html); var pre_result = document.createElement("div");
pre_result.innerHTML = result_html.outerHTML;
//$("#results").append(result_html); //$("#results").append(result_html);
$.each(response.items, function(i,song) for(var i = 0; i < response.items.length; i++) {
{ var song = response.items[i];
var duration=song.contentDetails.duration; var duration=song.contentDetails.duration;
secs=Search.durationToSeconds(duration); secs=Search.durationToSeconds(duration);
var _temp_duration = Helper.secondsToOther(secs); var _temp_duration = Helper.secondsToOther(secs);
@@ -101,73 +102,70 @@ var Search = {
thumb=song.snippet.thumbnails.medium.url; thumb=song.snippet.thumbnails.medium.url;
//$("#results").append(result_html); //$("#results").append(result_html);
var songs = pre_result; var songs = pre_result.cloneNode(true);
songs.find(".search-title").text(title); songs.querySelector(".search-title").innerText = title;
songs.find(".result_info").text(Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1])); songs.querySelector(".result_info").innerText = Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]);
songs.find(".thumb").attr("src", thumb); songs.querySelector(".thumb").setAttribute("src", thumb);
//songs.find(".add-many").attr("onclick", "submit('"+id+"','"+enc_title+"',"+secs+");"); //songs.querySelector(".add-many").attr("onclick", "submit('"+id+"','"+enc_title+"',"+secs+");");
songs.find("#add-many").attr("data-video-id", id); songs.querySelector("#add-many").setAttribute("data-video-id", id);
songs.find("#add-many").attr("data-video-title", enc_title); songs.querySelector("#add-many").setAttribute("data-video-title", enc_title);
songs.find("#add-many").attr("data-video-length", secs); songs.querySelector("#add-many").setAttribute("data-video-length", secs);
//$($(songs).find("div")[0]).attr("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");"); //$($(songs).querySelector("div")[0]).setAttribute("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
songs.find("#temp-results").attr("data-video-id", id); songs.querySelector("#temp-results").setAttribute("data-video-id", id);
songs.find("#temp-results").attr("data-video-title", enc_title); songs.querySelector("#temp-results").setAttribute("data-video-title", enc_title);
songs.find("#temp-results").attr("data-video-length", secs); songs.querySelector("#temp-results").setAttribute("data-video-length", secs);
songs.find(".open-externally").attr("href", "https://www.youtube.com/watch?v=" + id); songs.querySelector(".open-externally").setAttribute("href", "https://www.youtube.com/watch?v=" + id);
$(songs.find(".result-end")).attr("value", secs); songs.querySelector(".result-end").setAttribute("value", secs);
//$($(songs).find("div")[0]).attr("id", id) //$($(songs).querySelector("div")[0]).setAttribute("id", id)
//output += undefined; //output += undefined;
if(songs.html() != undefined) { if(songs.innerHTML != undefined && songs.innerHTML != "") {
output += songs.html(); output += songs.innerHTML;
}
} }
} }
});
var fresh = false; var fresh = false;
if($("#inner-results").length == 0) { if(document.querySelectorAll("#inner-results").length == 0) {
fresh = true; fresh = true;
} }
$(".search_results").empty(); document.getElementsByClassName("search_results")[0].innerHTML = "";
if(output.length > 0) { if(output.length > 0) {
//$(window).scrollTop(0); //$(window).scrollTop(0);
if(!pagination && fresh) { if(!pagination && fresh) {
$(".search_results").css("display", "none"); Helper.css(".search_results", "display", "none");
} }
$("#results").append(pagination_buttons_html); document.getElementById("results").insertAdjacentHTML("beforeend", pagination_buttons_html);
$("<div id='inner-results'>"+output+"</div>").prependTo($("#results")); //$("<div id='inner-results'>"+output+"</div>").prependTo($("#results"));
document.getElementById("results").insertAdjacentHTML("afterbegin", "<div id='inner-results'>"+output+"</div>");
if(!pagination && fresh) { if(!pagination && fresh) {
$(".search_results").slideDown(); //$(".search_results").slideDown();
} }
$("body").attr("style", "overflow-y:hidden !important") document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:hidden !important")
if(nextPageToken) { if(nextPageToken) {
$(".next-results-button").attr("data-pagination", nextPageToken); document.querySelector(".next-results-button").setAttribute("data-pagination", nextPageToken);
} else { } else {
$(".next-results-button").addClass("disabled"); Helper.addClass(".next-results-button", "disabled");
} }
if(prevPageToken) { if(prevPageToken) {
$(".prev-results-button").attr("data-pagination", prevPageToken); document.querySelector(".prev-results-button").setAttribute("data-pagination", prevPageToken);
} else { } else {
$(".prev-results-button").addClass("disabled"); Helper.addClass(".prev-results-button", "disabled");
} }
$(".pagination-results a").attr("data-original-search", search_input); document.querySelector(".pagination-results a").setAttribute("data-original-search", search_input);
//setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250);
if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active")) Helper.removeClass(".search_loader_spinner", "active");
$(".search_loader_spinner").removeClass("active"); Helper.css(".search_results", "display", "block");
$(".add-many").click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
} else if(!retried){ } else if(!retried){
Search.search(search_input, true); Search.search(search_input, true);
} else { } else {
$("<div style='display:none;' id='inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33); //$("<div style='display:none;' id='inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active")) document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);'>"+empty_results_html+"</div>");
$(".search_loader_spinner").removeClass("active"); Helper.css("#results", "display", "block");
Helper.removeClass(".search_loader_spinner", "active");
} }
} }
}); });
@@ -175,9 +173,9 @@ var Search = {
} }
}); });
} else { } else {
$(".main").removeClass("blurT"); Helper.removeClass(".main", "blurT");
$("#controls").removeClass("blurT"); Helper.removeClass("#controls", "blurT");
$(".main").removeClass("clickthrough"); Helper.removeClass(".main", "clickthrough");
} }
}, },
@@ -189,11 +187,12 @@ var Search = {
artist = artist.split(" "); artist = artist.split(" ");
var temptitle = title.split("-"); var temptitle = title.split("-");
temptitle = temptitle.join(" ").split(" "); temptitle = temptitle.join(" ").split(" ");
$.ajax({ Helper.ajax({
type: "GET", type: "GET",
url: yt_url, url: yt_url,
dataType:"jsonp", dataType:"jsonp",
success: function(response){ success: function(response){
response = JSON.parse(response);
//Helper.log(response); //Helper.log(response);
if(response.items.length === 0){ if(response.items.length === 0){
Search.readySubmit(false, {totalLength: totalNumber - 1}); Search.readySubmit(false, {totalLength: totalNumber - 1});
@@ -202,26 +201,30 @@ var Search = {
"Spotify title: " + title + " " + artist.join(" "), "Spotify title: " + title + " " + artist.join(" "),
"Spotify length: " + length "Spotify length: " + length
]); ]);
var not_added_song = $("<div>" + not_import_html + "</div>"); var not_added_song = document.createElement("div");
not_added_song.find(".extra-add-text").text(title + " - " + artist.join(" ")); not_added_song.innerHTML = not_import_html;
not_added_song.find(".extra-add-text").attr("title", title + " - " + artist.join(" "));
not_added_song.find(".extra-button-search").attr("data-text", title + " - " + artist.join(" "));
$(".not-imported-container").append(not_added_song.html());
$(".not-imported").removeClass("hide");
} else if(response.items.length > 0) {
$.each(response.items, function(i,data)
{
vid_url += data.id.videoId+",";
});
$.ajax({ not_added_song.querySelector(".extra-add-text").innerText = title + " - " + artist.join(" ");
not_added_song.querySelector(".extra-add-text").setAttribute("title", title + " - " + artist.join(" "));
not_added_song.querySelector(".extra-button-search").setAttribute("data-text", title + " - " + artist.join(" "));
document.querySelector(".not-imported-container").insertAdjacentHTML("beforeend", not_added_song.innerHTML);
Helper.removeClass(".not-imported", "hide");
} else if(response.items.length > 0) {
for(var i = 0; i < response.items.length; i++) {
var data = response.items[i];
vid_url += data.id.videoId+",";
}
Helper.ajax({
type: "GET", type: "GET",
url: vid_url, url: vid_url,
dataType:"jsonp", dataType:"jsonp",
success: function(response){ success: function(response){
response = JSON.parse(response);
if(response.items.length > 0) { if(response.items.length > 0) {
var matched = false; var matched = false;
$.each(response.items, function(i, data){ for(var y = 0; y < response.items.length; y++) {
var data = response.items[y];
//Helper.log(data); //Helper.log(data);
//var title = data.snippet.title; //var title = data.snippet.title;
var duration = Search.durationToSeconds(data.contentDetails.duration); var duration = Search.durationToSeconds(data.contentDetails.duration);
@@ -229,7 +232,9 @@ var Search = {
if(similarity(data.snippet.title, artist + " - " + title) > 0.75) { if(similarity(data.snippet.title, artist + " - " + title) > 0.75) {
not_matched = false; not_matched = false;
} else { } else {
$.each(temptitle, function(i, data_title){ for(var i = 0; i < temptitle.length; i++) {
var data_title = temptitle[i];
if(data.snippet.title.toLowerCase().indexOf(data_title.toLowerCase()) == -1 || !( if(data.snippet.title.toLowerCase().indexOf(data_title.toLowerCase()) == -1 || !(
data.snippet.title.toLowerCase().indexOf("cover") == -1 && data.snippet.title.toLowerCase().indexOf("cover") == -1 &&
title.toLowerCase().indexOf("cover") == -1 && title.toLowerCase().indexOf("cover") == -1 &&
@@ -243,16 +248,16 @@ var Search = {
not_matched = true; not_matched = true;
else if(duration > 1800) not_matched = true; else if(duration > 1800) not_matched = true;
return false;
}); }
} }
if((!not_matched)){ if((!not_matched)){
matched = true; matched = true;
Search.readySubmit(true, { id: data.id, title: data.snippet.title, duration: duration, totalLength: totalNumber - 1}); Search.readySubmit(true, { id: data.id, title: data.snippet.title, duration: duration, totalLength: totalNumber - 1});
return false; break;
}
} }
});
if(!matched){ if(!matched){
Search.readySubmit(false, {totalLength: totalNumber - 1}); Search.readySubmit(false, {totalLength: totalNumber - 1});
Helper.log([ Helper.log([
@@ -260,18 +265,24 @@ var Search = {
"Spotify title: " + title + " " + artist.join(" "), "Spotify title: " + title + " " + artist.join(" "),
"Spotify length: " + length "Spotify length: " + length
]); ]);
var not_added_song = $("<div>" + not_import_html + "</div>"); var not_added_song = document.createElement("div");
not_added_song.find(".extra-add-text").text(title + " - " + artist.join(" ")); not_added_song.innerHTML = not_import_html;
not_added_song.find(".extra-add-text").attr("title", title + " - " + artist.join(" ")); not_added_song.querySelector(".extra-add-text").innerText = title + " - " + artist.join(" ");
not_added_song.find(".extra-button-search").attr("data-text", title + " - " + artist.join(" ")); not_added_song.querySelector(".extra-add-text").setAttribute("title", title + " - " + artist.join(" "));
$(".not-imported-container").append(not_added_song.html()); not_added_song.querySelector(".extra-button-search").setAttribute("data-text", title + " - " + artist.join(" "));
$(".not-imported").removeClass("hide"); document.querySelector(".not-imported-container").insertAdjacentHTML("beforeend", not_added_song.innerHTML);
Helper.removeClass(".not-imported", "hide");
} }
} }
},
error: function(e) {
console.log(e);
} }
}); });
} }
}, error: function(e) {
console.log(e);
} }
}); });
}, },
@@ -291,8 +302,8 @@ var Search = {
Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1, 0, data.duration); Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1, 0, data.duration);
});*/ });*/
document.getElementById("import_spotify").disabled = false; document.getElementById("import_spotify").disabled = false;
$("#import_spotify").removeClass("hide"); Helper.removeClass("#import_spotify", "hide");
$("#playlist_loader_spotify").addClass("hide"); Helper.addClass("#playlist_loader_spotify", "hide");
Search.submitArray = []; Search.submitArray = [];
Search.submitArrayExpected = null; Search.submitArrayExpected = null;
} }
@@ -300,14 +311,14 @@ var Search = {
submitAndClose: function(id,title,duration, start, end){ submitAndClose: function(id,title,duration, start, end){
Search.submit(id,title, duration, false, 0, 1, start, end); Search.submit(id,title, duration, false, 0, 1, start, end);
$("#results").html(''); Helper.setHtml("#results", '');
Search.showSearch(); Search.showSearch();
document.getElementById("search").value = ""; document.getElementById("search").value = "";
$("body").attr("style", "overflow-y:auto") document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto")
$("#results").html = ""; Helper.setHtml("#results","");
$(".main").removeClass("blurT"); Helper.removeClass(".main", "blurT");
$("#controls").removeClass("blurT"); Helper.removeClass("#controls", "blurT");
$(".main").removeClass("clickthrough"); Helper.removeClass(".main", "clickthrough");
}, },
importPlaylist: function(pId,pageToken){ importPlaylist: function(pId,pageToken){
@@ -327,13 +338,14 @@ var Search = {
headers = {};//'Content-Type': 'application/json'}; headers = {};//'Content-Type': 'application/json'};
datatype = "jsonp"; datatype = "jsonp";
} }
$.ajax({ Helper.ajax({
type: "GET", type: "GET",
url: playlist_url, url: playlist_url,
dataType: datatype, dataType: datatype,
//dataType:"jsonp", //dataType:"jsonp",
headers: headers, headers: headers,
success: function(response) { success: function(response) {
response = JSON.parse(response);
if(response.error){ if(response.error){
if(response.error.errors[0].reason == "playlistItemsNotAccessible"){ if(response.error.errors[0].reason == "playlistItemsNotAccessible"){
var nonce = Helper.randomString(29); var nonce = Helper.randomString(29);
@@ -360,8 +372,8 @@ var Search = {
response.error response.error
]); ]);
document.getElementById("import").disabled = false; document.getElementById("import").disabled = false;
$("#playlist_loader").addClass("hide"); Helper.addClass("#playlist_loader", "hide");
$("#import").removeClass("hide"); Helper.removeClass("#import", "hide");
before_toast(); before_toast();
M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000});
} }
@@ -369,15 +381,16 @@ var Search = {
} else { } else {
var ids=""; var ids="";
var this_length = 0; var this_length = 0;
if(typeof(response) == "string") response = $.parseJSON(response); if(typeof(response) == "string") response = JSON.parse(response);
//Search.addVideos(response.items[0].contentDetails.videoId); //Search.addVideos(response.items[0].contentDetails.videoId);
//response.items.shift(); //response.items.shift();
$.each(response.items, function(i,data) { for(var i = 0; i < response.items.length; i++) {
var data = response.items[i];
ids+=data.contentDetails.videoId+","; ids+=data.contentDetails.videoId+",";
Search.submitYouTubeArrayIds.push(data.contentDetails.videoId); Search.submitYouTubeArrayIds.push(data.contentDetails.videoId);
this_length += 1; this_length += 1;
Search.submitYouTubeExpected += 1; Search.submitYouTubeExpected += 1;
}); }
if(response.nextPageToken) { if(response.nextPageToken) {
//Search.addVideos(ids, true, 0, false, this_length); //Search.addVideos(ids, true, 0, false, this_length);
@@ -389,31 +402,65 @@ var Search = {
} }
document.getElementById("import").value = ""; document.getElementById("import").value = "";
} }
},
error: function(e) {
if(e.status == 403){
var nonce = Helper.randomString(29);
window.callback = function(data) {
access_token_data_youtube = data;
if(access_token_data_youtube.state == nonce){
youtube_authenticated = true;
setTimeout(function(){
youtube_authenticated = false;
access_token_data_youtube = {};
}, access_token_data_youtube.expires_in * 1000);
Search.importPlaylist(pId, pageToken);
} else {
access_token_data_youtube = "";
console.error("Nonce doesn't match");
}
youtube_window.close();
window.callback = "";
};
youtube_window = window.open("/o_callback#youtube=true&nonce=" + nonce, "", "width=600, height=600");
} else {
Helper.log([
"import list error: ",
response.error
]);
document.getElementById("import").disabled = false;
Helper.addClass("#playlist_loader", "hide");
Helper.removeClass("#import", "hide");
before_toast();
M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000});
}
} }
}); });
}, },
importSpotifyPlaylist: function(url){ importSpotifyPlaylist: function(url){
$.ajax({ Helper.ajax({
method: "get",
url: url, url: url,
headers: { headers: {
'Authorization': 'Bearer ' + access_token_data.access_token 'Authorization': 'Bearer ' + access_token_data.access_token
}, },
success: function(response) { success: function(response) {
$.each(response.items, function(i,data) response = JSON.parse(response);
{ for(var i = 0; i < response.items.length; i++) {
var data = response.items[i];
//ids+=data.contentDetails.videoId+","; //ids+=data.contentDetails.videoId+",";
Search.backgroundSearch(data.track.name, data.track.artists.map(function(elem){return elem.name;}).join(" "), Math.floor(data.track.duration_ms/1000), response.total, i + response.offset); Search.backgroundSearch(data.track.name, data.track.artists.map(function(elem){return elem.name;}).join(" "), Math.floor(data.track.duration_ms/1000), response.total, i + response.offset);
}); }
if(response.next){ if(response.next){
Search.importSpotifyPlaylist(response.next); Search.importSpotifyPlaylist(response.next);
} }
}, },
error: function() { error: function(e) {
document.getElementById("import_spotify").disabled = false; document.getElementById("import_spotify").disabled = false;
$("#import_spotify").removeClass("hide"); Helper.removeClass("#import_spotify", "hide");
$("#playlist_loader_spotify").addClass("hide"); Helper.addClass("#playlist_loader_spotify", "hide");
before_toast(); before_toast();
M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000});
} }
@@ -423,7 +470,7 @@ var Search = {
addVideos: function(ids){ addVideos: function(ids){
var more = false; var more = false;
var next_ids = []; var next_ids = [];
var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=***REMOVED***&id="; var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" + api_key + "&id=";
for(var i = 0; i < ids.length; i++) { for(var i = 0; i < ids.length; i++) {
if(i > 48) { if(i > 48) {
more = true; more = true;
@@ -432,17 +479,17 @@ var Search = {
} }
request_url += ids[i] + ","; request_url += ids[i] + ",";
} }
Helper.ajax({
$.ajax({ type: "GET",
type: "POST",
url: request_url, url: request_url,
dataType:"jsonp",
success: function(response){ success: function(response){
response = JSON.parse(response);
var x = 0; var x = 0;
if(response.error) { if(response.error) {
Search.submitYouTubeError = true; Search.submitYouTubeError = true;
} }
$.each(response.items, function(i,song) { for(var i = 0; i < response.items.length; i++) {
var song = response.items[i];
var duration=Search.durationToSeconds(song.contentDetails.duration); var duration=Search.durationToSeconds(song.contentDetails.duration);
if(!longsongs || duration<720){ if(!longsongs || duration<720){
enc_title= song.snippet.title;//encodeURIComponent(song.snippet.title); enc_title= song.snippet.title;//encodeURIComponent(song.snippet.title);
@@ -450,13 +497,16 @@ var Search = {
x += 1; x += 1;
Search.submitYouTubeArray.push({id: song.id, title: enc_title, duration: duration}); Search.submitYouTubeArray.push({id: song.id, title: enc_title, duration: duration});
} }
}); }
if(more) Search.addVideos(next_ids); if(more) Search.addVideos(next_ids);
else { else {
socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitYouTubeArray}); socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitYouTubeArray});
Search.submitYouTubeArray = []; Search.submitYouTubeArray = [];
Search.submitYouTubeExpected = 0; Search.submitYouTubeExpected = 0;
} }
},
error: function(e) {
console.log(e);
} }
}); });
}, },
@@ -468,11 +518,9 @@ var Search = {
} }
if(offline && document.getElementsByName("addsongs")[0].checked && document.getElementsByName("addsongs")[0].disabled){ if(offline && document.getElementsByName("addsongs")[0].checked && document.getElementsByName("addsongs")[0].disabled){
var found_array = []; var found_array = [];
found_array = $.map(full_playlist, function(obj, index) { for(var i = 0; i < full_playlist.length; i++) {
if(obj.id == id) { if(full_playlist[i].id == id) found_array.push(i);
return index;
} }
});
if(found_array.length == 0){ if(found_array.length == 0){
List.channel_function({type: "added", start: start, end: end, value: {added: (new Date).getTime()/1000, guids: [1], id: id, title: title, duration: duration, now_playing: false, votes: 1}}); List.channel_function({type: "added", start: start, end: end, value: {added: (new Date).getTime()/1000, guids: [1], id: id, title: title, duration: duration, now_playing: false, votes: 1}});
} else { } else {

42
server/public/assets/js/suggestions.js
View File

@@ -7,15 +7,15 @@ var Suggestions = {
number_suggested = number_suggested + params.length; number_suggested = number_suggested + params.length;
} }
for(var i = 0; i < params.length; i++) { for(var i = 0; i < params.length; i++) {
if($("#suggested-" + params[i].id).length > 0) { if(document.querySelectorAll("#suggested-" + params[i].id).length > 0) {
number_suggested -= 1; number_suggested -= 1;
} }
} }
var to_display = number_suggested > 9 ? "9+" : number_suggested; var to_display = number_suggested > 9 ? "9+" : number_suggested;
if($(".suggested-link span.badge.new.white").hasClass("hide") && number_suggested > 0 && Admin.logged_in){ if(number_suggested > 0 && Admin.logged_in){
$(".suggested-link span.badge.new.white").removeClass("hide"); Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
} }
$(".suggested-link span.badge.new.white").text(to_display); document.querySelector(".suggested-link span.badge.new.white").innerText = to_display;
if(single){ if(single){
Suggestions.createSuggested(params); Suggestions.createSuggested(params);
}else{ }else{
@@ -31,8 +31,8 @@ var Suggestions = {
var video_id = params.id; var video_id = params.id;
var video_title = params.title; var video_title = params.title;
var song = List.generateSong({id: video_id, title: video_title, length: params.duration, duration: duration}, false, false, false, true); var song = List.generateSong({id: video_id, title: video_title, length: params.duration, duration: duration}, false, false, false, true);
if($("#" + $(song).attr("id")).length == 0) { if(document.querySelectorAll("#" + song.getAttribute("id")).length == 0) {
$("#user-suggest-html").append(song); document.getElementById("user-suggest-html").insertAdjacentHTML("beforeend", song);
} }
}, },
@@ -40,34 +40,37 @@ var Suggestions = {
var get_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId="+id+"&type=video&key="+api_key; var get_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId="+id+"&type=video&key="+api_key;
var video_urls = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id="; var video_urls = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id=";
$.ajax({ Helper.ajax({
type: "GET", type: "GET",
url: get_url, url: get_url,
dataType:"jsonp", dataType:"jsonp",
success: function(response) success: function(response)
{ {
$.each(response.items.slice(0,5), function(i,data){ response = JSON.parse(response);
var this_resp = response.items.slice(0,5);
for(var i = 0; i < this_resp.length; i++) {
var data = this_resp[i];
video_urls += data.id.videoId+","; video_urls += data.id.videoId+",";
}); }
$.ajax({ Helper.ajax({
type: "GET", type: "GET",
url: video_urls, url: video_urls,
dataType: "jsonp", dataType: "jsonp",
success: function(response) success: function(response)
{ {
$("#suggest-song-html").empty(); response = JSON.parse(response);
Helper.setHtml("#suggest-song-html", "");
$.each(response.items, function(i,song) for(var i = 0; i < response.items.length; i++) {
{ var song = response.items[i];
var duration = song.contentDetails.duration; var duration = song.contentDetails.duration;
var length = Search.durationToSeconds(duration); var length = Search.durationToSeconds(duration);
duration = Helper.secondsToOther(Search.durationToSeconds(duration)); duration = Helper.secondsToOther(Search.durationToSeconds(duration));
var video_id = song.id; var video_id = song.id;
var video_title = song.snippet.title; var video_title = song.snippet.title;
$("#suggest-song-html").append(List.generateSong({id: video_id, title: video_title, length: length, duration: duration}, false, false, false)); document.getElementById("suggest-song-html").insertAdjacentHTML("beforeend", List.generateSong({id: video_id, title: video_title, length: length, duration: duration}, false, false, false));
}); }
} }
}); });
} }
@@ -75,12 +78,11 @@ var Suggestions = {
}, },
checkUserEmpty: function(){ checkUserEmpty: function(){
var length = $("#user-suggest-html").children().length; var length = document.getElementById("user-suggest-html").children.length;
if(length === 0){ if(length === 0){
if(!Helper.contains($("#user_suggests").attr("class").split(" "), "hide")) Helper.addClass("#user_suggests", "hide");
$("#user_suggests").addClass("hide");
} else if(Admin.logged_in){ } else if(Admin.logged_in){
$("#user_suggests").removeClass("hide"); Helper.removeClass("#user_suggests", "hide");
} }
}, },
}; };

50
server/public/assets/js/token_apply.js
View File

@@ -1,28 +1,28 @@
$(document).ready(function() { window.addEventListener("DOMContentLoaded", function(e) {
$("#about").modal(); M.Modal.init(document.getElementById("about"));
$(".help-button-footer").hide(); M.Modal.init(document.getElementById("contact"));
$("#contact").modal(); Helper.addClass(".help-button-footer", "hide");
$("#contact-container").empty(); Helper.setHtml("#contact-container", "");
$("#contact-container").html("Send a mail to us: <a title='Open in client' href='mailto:contact@zoff.me?Subject=Contact%20Zoff'>contact@zoff.me</a>"); Helper.setHtml("#contact-container", "Send a mail to us: <a title='Open in client' href='mailto:contact@zoff.me?Subject=Contact%20Zoff'>contact@zoff.me</a>");
$("#submit-contact-form").hide(); Helper.css("#submit-contact-form", "display", "none");
ga('send', 'pageview'); ga('send', 'pageview');
if(!Helper.mobilecheck()) { if(!Helper.mobilecheck()) {
$("#iframe-container").append('<iframe id="iframe" src="https://zoff.me/_embed#celebrate&808080" width="600px" height="300px"></iframe>'); document.getElementById("iframe-container").insertAdjacentHTML("beforeend", '<iframe id="iframe" src="https://zoff.me/_embed#celebrate&808080" width="600px" height="300px"></iframe>');
} }
$(".token-form").on("submit", function(e) { document.getElementsByClassName("token-form")[0].addEventListener("submit", function(e) {
e.preventDefault(); e.preventDefault();
var email = $("#email_address").val(); var email = document.getElementById("email_address").value;
var origin = $("#origin").val(); var origin = document.getElementById("origin").value;
$("#origin").attr("readonly", true); document.getElementById("origin").setAttribute("readonly", true);
$("#email_address").attr("readonly", true); document.getElementById("email_address").setAttribute("readonly", true);
$(".submit").toggleClass("disabled"); Helper.toggleClass(".submit", "disabled");
$(".full-form-token").removeClass("hide"); Helper.removeClass(".full-form-token", "hide");
var captcha_response = grecaptcha.getResponse(); var captcha_response = grecaptcha.getResponse();
$.ajax({ Helper.ajax({
type: "POST", type: "POST",
url: "/api/apply", url: "/api/apply",
data: { data: {
@@ -31,27 +31,27 @@ $(document).ready(function() {
"g-recaptcha-response": captcha_response, "g-recaptcha-response": captcha_response,
}, },
success: function(response) { success: function(response) {
$(".full-form-token").addClass("hide"); Helper.addClass(".full-form-token", "hide");
if(response == "success") { if(response == "success") {
M.toast({html: "Email sent!", displayLength: 3000, classes: "green lighten"}); M.toast({html: "Email sent!", displayLength: 3000, classes: "green lighten"});
} else { } else {
$("#email_address").attr("readonly", false); document.getElementById("email_address").setAttribute("readonly", false);
$(".submit").toggleClass("disabled"); Helper.toggleClass(".submit", "disabled");
$("#origin").attr("readonly", false); document.getElementById("origin").setAttribute("readonly", false);
grecaptcha.reset(); grecaptcha.reset();
M.toast({html: "Something went wrong. Sure that email hasn't been used for another token?",displayLength: 3000, classes: "red lighten"}); M.toast({html: "Something went wrong. Sure that email hasn't been used for another token?",displayLength: 3000, classes: "red lighten"});
} }
}, },
error: function(response) { error: function(response) {
$(".full-form-token").addClass("hide"); Helper.addClass(".full-form-token", "hide");
$("#email_address").attr("readonly", false); document.getElementById("email_address").setAttribute("readonly", false);
$(".submit").toggleClass("disabled"); Helper.toggleClass(".submit", "disabled");
} }
}); });
}); });
$('#submit-contact-form').on('click', function(e) { document.getElementById('submit-contact-form').addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
$("#contact-form").submit(); document.getElementById("contact-form").submit();
}); });
}); });

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

@@ -84,10 +84,10 @@
</ul> </ul>
<div id="context-menu-overlay" class="hide"></div> <div id="context-menu-overlay" class="hide"></div>
{{/unless}} {{/unless}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>-->
<script type="text/javascript" src="/assets/dist/{{javascript_file}}"></script> <script type="text/javascript" src="/assets/dist/{{javascript_file}}"></script>
{{#unless embed}} {{#unless embed}}
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script> <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

2
server/public/partials/channel/modal.handlebars
View File

@@ -13,7 +13,7 @@
<label for="height_embed" class="padding_left_6 embed-label">Height</label> <label for="height_embed" class="padding_left_6 embed-label">Height</label>
<input type="number" value="300" id="height_embed" class="settings_embed" min="1" /> <input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
<label for="color_embed" class="padding_left_6 embed-label">Color</label> <label for="color_embed" class="padding_left_6 embed-label">Color</label>
<input type="text" id="color_embed" class="settings_embed" value="#808080" /> <input type="color" id="color_embed" class="settings_embed" value="#808080" />
<label> <label>
<input type="checkbox" id="videoonly" class="checkbox" /> <input type="checkbox" id="videoonly" class="checkbox" />
<span for="videoonly" class="padding_right_26">Video-only</span> <span for="videoonly" class="padding_right_26">Video-only</span>

60
server/public/partials/channel/panel.handlebars
View File

@@ -1,13 +1,13 @@
<li class="no-padding">
<div class="nav-btn close-settings clickable" title="Close" id="closeSettings"> <div class="nav-btn close-settings clickable" title="Close" id="closeSettings">
<i class="material-icons auto-margin">close</i> <i class="material-icons auto-margin">close</i>
</div> </div>
<ul class="collapsible collapsible-accordion"> <ul class="collapsible collapsible-accordion settings-collapsible">
<li> <li class="no-padding">
<a class="col s9 collapsible-header bold waves-effect admin-settings"> <div class="col s9 collapsible-header bold waves-effect admin-settings">
Channel Settings Channel Settings
<i class="material-icons">tune</i> <i class="material-icons">tune</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<form action="#" id="adminForm" onsubmit="return false;"> <form action="#" id="adminForm" onsubmit="return false;">
<ul> <ul>
@@ -143,14 +143,10 @@
</form> </form>
</div> </div>
</li> </li>
</ul>
</li>
<li class="no-padding"> <li class="no-padding">
<ul class="collapsible collapsible-accordion"> <div class="collapsible-header bold waves-effect">Channel Info
<li>
<a class="collapsible-header bold waves-effect">Channel Info
<i class="material-icons">info_outline</i> <i class="material-icons">info_outline</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li> <li>
@@ -177,15 +173,11 @@
</ul> </ul>
</div> </div>
</li> </li>
</ul>
</li>
{{#unless client}} {{#unless client}}
<li class="no-padding remote-panel hide-on-small-only"> <li class="no-padding remote-panel hide-on-small-only">
<ul class="collapsible collapsible-accordion"> <div class="collapsible-header bold waves-effect">Remote Control
<li>
<a class="collapsible-header bold waves-effect">Remote Control
<i class="material-icons">settings_remote</i> <i class="material-icons">settings_remote</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li> <li>
@@ -211,14 +203,10 @@
</ul> </ul>
</div> </div>
</li> </li>
</ul>
</li>
<li class="no-padding offline-panel"> <li class="no-padding offline-panel">
<ul class="collapsible collapsible-accordion"> <div class="collapsible-header bold waves-effect">Local Mode
<li>
<a class="collapsible-header bold waves-effect">Local Mode
<i class="material-icons">visibility_off</i> <i class="material-icons">visibility_off</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li> <li>
@@ -239,15 +227,11 @@
</ul> </ul>
</div> </div>
</li> </li>
</ul>
</li>
<li class="no-padding show-only-mobile mobile-remote-panel"> <li class="no-padding show-only-mobile mobile-remote-panel">
<ul class="collapsible collapsible-accordion"> <div class="collapsible-header bold waves-effect import-a">Remote Controller
<li>
<a class="collapsible-header bold waves-effect import-a">Remote Controller
<i class="material-icons">settings_remote</i> <i class="material-icons">settings_remote</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<ul id="remote-mobile-container"> <ul id="remote-mobile-container">
<li class="white-bg"> <li class="white-bg">
@@ -284,15 +268,11 @@
</ul> </ul>
</div> </div>
</li> </li>
</ul>
</li>
<li class="no-padding import-panel"> <li class="no-padding import-panel">
<ul class="collapsible collapsible-accordion"> <div class="collapsible-header bold waves-effect import-a">Import Playlist
<li>
<a class="collapsible-header bold waves-effect import-a">Import Playlist
<i class="material-icons">keyboard_arrow_down</i> <i class="material-icons">keyboard_arrow_down</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li class="white-bg"> <li class="white-bg">
@@ -364,15 +344,11 @@
</ul> </ul>
</div> </div>
</li> </li>
</ul>
</li>
<li class="no-padding export-panel"> <li class="no-padding export-panel">
<ul class="collapsible collapsible-accordion white-bg"> <div class="collapsible-header bold waves-effect export-a">Export Playlist
<li>
<a class="collapsible-header bold waves-effect export-a">Export Playlist
<i class="material-icons">keyboard_arrow_up</i> <i class="material-icons">keyboard_arrow_up</i>
</a> </div>
<div class="collapsible-body"> <div class="collapsible-body">
<ul> <ul>
<li class="white-bg"> <li class="white-bg">
@@ -421,7 +397,5 @@
</ul> </ul>
</div> </div>
</li> </li>
</ul>
</li>
{{/unless}} {{/unless}}
</ul> </ul>

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

@@ -1095,6 +1095,7 @@ function incrementToken(token) {
router.route('/api/color').post(function(req, res) { router.route('/api/color').post(function(req, res) {
var origin = req.get("origin").replace("https://", "").replace("http://", ""); var origin = req.get("origin").replace("https://", "").replace("http://", "");
var allowed = ["client.localhost", "localhost", "zoff.me", "client.zoff.me", "zoff.no", "client.zoff.no"]; var allowed = ["client.localhost", "localhost", "zoff.me", "client.zoff.me", "zoff.no", "client.zoff.no"];
console.log(req.body);
if(allowed.indexOf(origin) < 0) { if(allowed.indexOf(origin) < 0) {
res.sendStatus(403); res.sendStatus(403);
return; return;
@@ -1114,6 +1115,7 @@ router.route('/api/imageblob').post(function(req, res) {
res.sendStatus(403); res.sendStatus(403);
return; return;
} }
Jimp.read('https://img.youtube.com/vi/' + req.body.id + '/mqdefault.jpg', function (err, image) { Jimp.read('https://img.youtube.com/vi/' + req.body.id + '/mqdefault.jpg', function (err, image) {
if (err) { if (err) {
console.log(err); console.log(err);