Somewhat prettier css

gulpfile.js

@@ -6,7 +6,13 @@ var gulp = require("gulp"),
 
 gulp.task("css", function() {
   return gulp
-    .src("server/public/assets/css/style.css")
+    .src([
+      "server/public/assets/css/style.css",
+      "server/public/assets/css/globals.css",
+      "server/public/assets/css/animations.css",
+      "server/public/assets/css/mobile.css"
+    ])
+    .pipe(concat("style.css"))
     .pipe(cleanCSS({ compatibility: "ie8" }))
     .pipe(gulp.dest("server/public/assets/dist"));
 });

pm2.json

@@ -4,13 +4,16 @@
       "name": "zoff",
       "script": "./server/app.js",
       "watch": true,
-            "ignore_watch": ["./node_modules", "./server/public/assets/images/thumbnails"],
+      "ignore_watch": [
+        "./node_modules",
+        "./server/public/assets/images/thumbnails"
+      ]
     },
     {
       "name": "gulp",
       "script": "./gulpfile.js",
       "watch": true,
-            "ignore_watch": ["./node_modules", "./server/"],
+      "ignore_watch": ["./node_modules", "./server/"]
     }
   ]
 }

server/models/user.js

@@ -1,12 +1,12 @@
 // app/models/user.js
 // load the things we need
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
-var bcrypt   = require('bcrypt-nodejs');
+var bcrypt = require("bcrypt-nodejs");
 
 // define the schema for our user model
 var userSchema = mongoose.Schema({
   username: String,
-      password     : String,
+  password: String
 });
 
 // methods ======================
@@ -21,4 +21,4 @@ userSchema.methods.validPassword = function(password) {
 };
 
 // create the model for users and expose it to our app
-module.exports = mongoose.model('User', userSchema);
+module.exports = mongoose.model("User", userSchema);

server/public/assets/admin/authenticated/js/main.js

@@ -1,9 +1,12 @@
 var connection_options = {
-	'sync disconnect on unload':true,
+  "sync disconnect on unload": true,
-	'secure': true,
+  secure: true,
-	'force new connection': true
+  "force new connection": true
 };
-var socket = io.connect(window.location.protocol + '//' + window.location.hostname, connection_options);
+var socket = io.connect(
+  window.location.protocol + "//" + window.location.hostname,
+  connection_options
+);
 var api_token_list;
 var dynamicListeners = {};
 
@@ -15,7 +18,9 @@ window.addEventListener("DOMContentLoaded", function() {
   M.Tabs.init(document.querySelector(".tabs_admin"), {
     onShow: function() {
       if (this.index == 2) {
-			    M.Tabs.getInstance(document.querySelector(".tabs_admin_info")).updateTabIndicator();
+        M.Tabs.getInstance(
+          document.querySelector(".tabs_admin_info")
+        ).updateTabIndicator();
       }
     }
   });
@@ -27,23 +32,41 @@ window.addEventListener("DOMContentLoaded", function() {
   addClass(".channel_things", "hide");
   removeClass(".preloader-wrapper", "hide");
 
-	document.addEventListener("click", function(event) {
+  document.addEventListener(
+    "click",
+    function(event) {
       handleEvent(event, event.target, false, "click");
-	}, true);
+    },
+    true
+  );
 
-	document.addEventListener("input", function(event) {
+  document.addEventListener(
+    "input",
+    function(event) {
       handleEvent(event, event.target, false, "input");
-	}, true);
+    },
+    true
+  );
 
-	document.addEventListener("change", function(event) {
+  document.addEventListener(
+    "change",
+    function(event) {
       handleEvent(event, event.target, false, "change");
-	}, true);
+    },
+    true
+  );
 
-	document.addEventListener("submit", function(event) {
+  document.addEventListener(
+    "submit",
+    function(event) {
       handleEvent(event, event.target, false, "submit");
-	}, true);
+    },
+    true
+  );
 
-	document.getElementById("refresh_all").addEventListener("click", function(event) {
+  document
+    .getElementById("refresh_all")
+    .addEventListener("click", function(event) {
       event.preventDefault();
       document.getElementById("descriptions_cont").innerHTML = "";
       document.getElementById("thumbnails_cont").innerHTML = "";
@@ -79,7 +102,7 @@ addListener("click", ".update_api_token", function(event) {
     },
     data: {
       id: id,
-			limit: limit,
+      limit: limit
     },
     success: function(response) {
       if (response == "OK") {
@@ -117,7 +140,7 @@ addListener("click", ".delete_api_token", function(event) {
         toggleClass(that, "disabled");
         toggleClass("#limit-" + id, "disabled");
       }
-		},
+    }
   });
 });
 
@@ -130,7 +153,7 @@ addListener("click", ".approve_name", function(event) {
     url: "/api/names",
     data: {
       icon: value,
-			name: name,
+      name: name
     },
     headers: {
       "Content-Type": "application/json"
@@ -152,7 +175,7 @@ addListener("click", ".remove_name", function(event) {
     type: "DELETE",
     url: "/api/names",
     data: {
-			name: name,
+      name: name
     },
     headers: {
       "Content-Type": "application/json"
@@ -170,7 +193,7 @@ addListener("click", ".remove_name", function(event) {
 
 addListener("click", ".thumbnail_link", function(event) {
   this.preventDefault();
-	window.open("https:" + event.value,'_blank');
+  window.open("https:" + event.value, "_blank");
 });
 
 addListener("click", "#get_token", function(event) {
@@ -188,7 +211,7 @@ addListener("click", "#get_token", function(event) {
         toggleClass("#remove_token", "hide");
       }
     }
-	})
+  });
 });
 
 addListener("click", ".approve_thumbnails", function(event) {
@@ -211,7 +234,9 @@ addListener("click", ".approve_thumbnails", function(event) {
     success: function(response) {
       if (response) {
         that.parentElement.remove();
-				var length = parseInt(document.querySelector(".thumbnails-badge").innerText);
+        var length = parseInt(
+          document.querySelector(".thumbnails-badge").innerText
+        );
         length = length - 1;
         increaseInfo(-1);
         document.querySelector(".thumbnails-badge").innerText = length;
@@ -223,8 +248,7 @@ addListener("click", ".approve_thumbnails", function(event) {
         toast("Something went wrong...", 2000, "red lighten");
       }
     },
-		error: function(err) {
+    error: function(err) {}
-		}
   });
 });
 
@@ -249,7 +273,9 @@ addListener("click", ".deny_thumbnails", function(event) {
     success: function(response) {
       if (response) {
         that.parentElement.remove();
-				var length = parseInt(document.querySelector(".thumbnails-badge").innerText);
+        var length = parseInt(
+          document.querySelector(".thumbnails-badge").innerText
+        );
         length = length - 1;
         increaseInfo(-1);
         document.querySelector(".thumbnails-badge").innerText = length;
@@ -285,7 +311,9 @@ addListener("click", ".approve_descriptions", function(event) {
     success: function(response) {
       if (response) {
         that.parentElement.remove();
-				var length = parseInt(document.querySelector(".descriptions-badge").innerText);
+        var length = parseInt(
+          document.querySelector(".descriptions-badge").innerText
+        );
         length = length - 1;
         increaseInfo(-1);
         document.querySelector(".descriptions-badge").innerText = length;
@@ -321,7 +349,9 @@ addListener("click", ".deny_descriptions", function(event) {
     success: function(response) {
       if (response) {
         that.parentElement.remove();
-				var length = parseInt(document.querySelector(".descriptions-badge").innerText);
+        var length = parseInt(
+          document.querySelector(".descriptions-badge").innerText
+        );
         length = length - 1;
         increaseInfo(-1);
         document.querySelector(".descriptions-badge").innerText = length;
@@ -435,7 +465,6 @@ addListener("click", "#remove_description_button", function(event) {
   });
 });
 
-
 addListener("click", "#remove_rules_button", function(event) {
   this.preventDefault();
   var that = event;
@@ -497,7 +526,7 @@ function delete_channel(that) {
     toast("Something went wrong...", 2000, "red lighten");
     return;
   }
-	var r = confirm("Delete list \""+ decodeChannelName(to_delete) + "\"?");
+  var r = confirm('Delete list "' + decodeChannelName(to_delete) + '"?');
   if (r == true) {
     ajax({
       type: "POST",
@@ -516,7 +545,7 @@ function delete_channel(that) {
           toast("Something went wrong...", 2000, "red lighten");
         }
       }
-		})
+    });
   }
 }
 
@@ -545,7 +574,7 @@ addListener("click", "#remove_token", function(event) {
         toggleClass("#remove_token", "hide");
       }
     }
-	})
+  });
 });
 
 addListener("submit", "#change_pinned", function(event) {
@@ -585,7 +614,7 @@ function change_pinned(that) {
         toast("Something went wrong...", 2000, "red lighten");
       }
     }
-	})
+  });
 }
 
 function delete_admin_list(that) {
@@ -614,7 +643,8 @@ function delete_admin_list(that) {
 }
 
 function delete_userpass(that) {
-	var to_remove_password = document.querySelector("#delete_userpass_name").value;
+  var to_remove_password = document.querySelector("#delete_userpass_name")
+    .value;
   if (!to_remove_password) {
     toast("Something went wrong...", 2000, "red lighten");
     return;
@@ -635,7 +665,7 @@ function delete_userpass(that) {
         toast("Something went wrong...", 2000, "red lighten");
       }
     }
-	})
+  });
 }
 
 addListener("click", "#delete_userpass_button", function(event) {
@@ -654,12 +684,35 @@ addListener("submit", "#delete_userpass", function(event) {
 });
 
 socket.on("spread_listeners", function(obj) {
-	document.querySelector("#listeners").insertAdjacentHTML("beforeend", "<p>Private listeners: " + obj.offline + "</p>");
+  document
-	document.querySelector("#listeners").insertAdjacentHTML("beforeend", "<p>Total listeners: " + obj.total + "</p>");
+    .querySelector("#listeners")
+    .insertAdjacentHTML(
+      "beforeend",
+      "<p>Private listeners: " + obj.offline + "</p>"
+    );
+  document
+    .querySelector("#listeners")
+    .insertAdjacentHTML(
+      "beforeend",
+      "<p>Total listeners: " + obj.total + "</p>"
+    );
   document.querySelector("#listeners").insertAdjacentHTML("beforeend", "<hr>");
   for (var x in obj.online_users) {
-		if(obj.online_users[x]._id != "total_users" && obj.online_users[x].hasOwnProperty("users") && obj.online_users[x].users.length > 0){
+    if (
-			document.querySelector("#listeners").insertAdjacentHTML("beforeend", "<p>" + decodeChannelName(obj.online_users[x]._id) + ": " + obj.online_users[x].users.length + "</p>");
+      obj.online_users[x]._id != "total_users" &&
+      obj.online_users[x].hasOwnProperty("users") &&
+      obj.online_users[x].users.length > 0
+    ) {
+      document
+        .querySelector("#listeners")
+        .insertAdjacentHTML(
+          "beforeend",
+          "<p>" +
+            decodeChannelName(obj.online_users[x]._id) +
+            ": " +
+            obj.online_users[x].users.length +
+            "</p>"
+        );
     }
   }
 });
@@ -667,32 +720,87 @@ socket.on("spread_listeners", function(obj){
 function add_to_tab(dest, resp) {
   for (var x = 0; x < resp.length; x++) {
     if (dest == "thumbnails") {
-			document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "<div><div class='col s4 m3'>" + decodeChannelName(resp[x].channel) + "</div><input type='text' readonly class='col s4 m6 thumbnail_link' value='" + resp[x].thumbnail + "'><a class='btn green waves-effect col s2 m1 approve_" + dest + "' href='#' data-channel='" + resp[x].channel + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" + dest + "' href='#' data-channel='" + resp[x].channel + "'>X</a></div>");
+      document
+        .querySelector("#" + dest + "_cont")
+        .insertAdjacentHTML(
+          "beforeend",
+          "<div><div class='col s4 m3'>" +
+            decodeChannelName(resp[x].channel) +
+            "</div><input type='text' readonly class='col s4 m6 thumbnail_link' value='" +
+            resp[x].thumbnail +
+            "'><a class='btn green waves-effect col s2 m1 approve_" +
+            dest +
+            "' href='#' data-channel='" +
+            resp[x].channel +
+            "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" +
+            dest +
+            "' href='#' data-channel='" +
+            resp[x].channel +
+            "'>X</a></div>"
+        );
     } else if (dest == "descriptions") {
-			document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "<div><div class='col s4 m3'>" + decodeChannelName(resp[x].channel) + "</div><input type='text' readonly class='col s4 m6' value='" + resp[x].description + "'><a class='btn green waves-effect col s2 m1 approve_" + dest + "' href='#' data-channel='" + resp[x].channel + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" + dest + "' href='#' data-channel='" + resp[x].channel + "'>X</a></div>");
+      document
+        .querySelector("#" + dest + "_cont")
+        .insertAdjacentHTML(
+          "beforeend",
+          "<div><div class='col s4 m3'>" +
+            decodeChannelName(resp[x].channel) +
+            "</div><input type='text' readonly class='col s4 m6' value='" +
+            resp[x].description +
+            "'><a class='btn green waves-effect col s2 m1 approve_" +
+            dest +
+            "' href='#' data-channel='" +
+            resp[x].channel +
+            "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" +
+            dest +
+            "' href='#' data-channel='" +
+            resp[x].channel +
+            "'>X</a></div>"
+        );
     } else {
       resp[x].rules = resp[x].rules.replace(/\n/g, " /n\\ ");
-			document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "<div><div class='col s4 m3'>" + decodeChannelName(resp[x].channel) + "</div><input type='text' readonly class='col s4 m6' value='" + resp[x].rules + "'><a class='btn green waves-effect col s2 m1 approve_" + dest + "' href='#' data-channel='" + resp[x].channel + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" + dest + "' href='#' data-channel='" + resp[x].channel + "'>X</a></div>");
+      document
+        .querySelector("#" + dest + "_cont")
+        .insertAdjacentHTML(
+          "beforeend",
+          "<div><div class='col s4 m3'>" +
+            decodeChannelName(resp[x].channel) +
+            "</div><input type='text' readonly class='col s4 m6' value='" +
+            resp[x].rules +
+            "'><a class='btn green waves-effect col s2 m1 approve_" +
+            dest +
+            "' href='#' data-channel='" +
+            resp[x].channel +
+            "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 deny_" +
+            dest +
+            "' href='#' data-channel='" +
+            resp[x].channel +
+            "'>X</a></div>"
+        );
     }
   }
 }
 
 function escapeHtml(text) {
   var map = {
-    '&': '&amp;',
+    "&": "&amp;",
-    '<': '&lt;',
+    "<": "&lt;",
-    '>': '&gt;',
+    ">": "&gt;",
-    '"': '&quot;',
+    '"': "&quot;",
-    "'": '&#039;'
+    "'": "&#039;"
   };
 
-  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
+  return text.replace(/[&<>"']/g, function(m) {
+    return map[m];
+  });
 }
 
 function increaseInfo(num) {
   removeClass(".info-badge", "hide");
   try {
-		var currentNumber = parseInt(document.querySelector(".info-badge").innerText);
+    var currentNumber = parseInt(
+      document.querySelector(".info-badge").innerText
+    );
     if (isNaN(currentNumber)) currentNumber = 0;
     document.querySelector(".info-badge").innerText = currentNumber + num;
     currentNumber += num;
@@ -722,24 +830,47 @@ function loaded() {
         to_add.setAttribute("id", "element-" + response[i]._id);
         to_add.querySelector(".api_token_name").innerText = response[i].name;
         to_add.querySelector(".api_token_usage").innerText = response[i].usage;
-                to_add.querySelector(".api_token_origin").innerText = response[i].origin;
+        to_add.querySelector(".api_token_origin").innerText =
-				to_add.querySelector(".update_api_token").setAttribute("id", "update-" + response[i]._id);
+          response[i].origin;
-				to_add.querySelector(".api_token_limit").setAttribute("id", "limit-" + response[i]._id);
+        to_add
-				to_add.querySelector("#limit-" + response[i]._id).value = parseInt(response[i].limit);
+          .querySelector(".update_api_token")
-				to_add.querySelector(".delete_api_token").setAttribute("id", "delete-" + response[i]._id);
+          .setAttribute("id", "update-" + response[i]._id);
-				to_add.querySelector(".delete_api_token").setAttribute("data-id", response[i]._id);
+        to_add
-				to_add.querySelector(".update_api_token").setAttribute("data-id", response[i]._id);
+          .querySelector(".api_token_limit")
+          .setAttribute("id", "limit-" + response[i]._id);
+        to_add.querySelector("#limit-" + response[i]._id).value = parseInt(
+          response[i].limit
+        );
+        to_add
+          .querySelector(".delete_api_token")
+          .setAttribute("id", "delete-" + response[i]._id);
+        to_add
+          .querySelector(".delete_api_token")
+          .setAttribute("data-id", response[i]._id);
+        to_add
+          .querySelector(".update_api_token")
+          .setAttribute("data-id", response[i]._id);
         if (response[i].active) {
           removeClass(to_add.querySelector(".check"), "hide");
         } else {
           removeClass(to_add.querySelector(".uncheck"), "hide");
         }
-				document.querySelector("#api_keys").insertAdjacentHTML("beforeend", '<div class="row api_token_container" id="element-' + response[i]._id + '">' + to_add.innerHTML + "</div>");
+        document
-				document.querySelector("#limit-" + response[i]._id).value = parseInt(response[i].limit);
+          .querySelector("#api_keys")
+          .insertAdjacentHTML(
+            "beforeend",
+            '<div class="row api_token_container" id="element-' +
+              response[i]._id +
+              '">' +
+              to_add.innerHTML +
+              "</div>"
+          );
+        document.querySelector("#limit-" + response[i]._id).value = parseInt(
+          response[i].limit
+        );
       }
     },
-		error: function(err) {
+    error: function(err) {}
-		}
   });
 
   ajax({
@@ -749,26 +880,68 @@ function loaded() {
     },
     url: "/api/lists",
     success: function(response) {
-			response = response.sort(predicate({
+      response = response.sort(
-                name: '_id',
+        predicate({
+          name: "_id",
           reverse: false
-            }));
+        })
-			var output_pinned = '<option value="" disabled selected>Channels</option>';
+      );
-			var output_delete = '<option value="" disabled selected>Channels</option>';
+      var output_pinned =
+        '<option value="" disabled selected>Channels</option>';
+      var output_delete =
+        '<option value="" disabled selected>Channels</option>';
       for (var x = 0; x < response.length; x++) {
         if (response[x].count > 2) {
-					output_pinned += "<option class='" + response[x]._id + "' value='" + response[x]._id + "'>" + decodeChannelName(response[x]._id) + "</option>";
+          output_pinned +=
+            "<option class='" +
+            response[x]._id +
+            "' value='" +
+            response[x]._id +
+            "'>" +
+            decodeChannelName(response[x]._id) +
+            "</option>";
         }
-				output_delete += "<option class='" + response[x]._id + "' value='" + response[x]._id + "'>" + decodeChannelName(response[x]._id) + "</option>";
+        output_delete +=
+          "<option class='" +
+          response[x]._id +
+          "' value='" +
+          response[x]._id +
+          "'>" +
+          decodeChannelName(response[x]._id) +
+          "</option>";
       }
 
       document.querySelector("#frontpage_pinned").innerHTML = output_pinned;
-			document.querySelector("#remove_thumbnail").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML;
+      document.querySelector(
-			document.querySelector("#remove_description").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML;
+        "#remove_thumbnail"
-			document.querySelector("#remove_rules").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML;
+      ).innerHTML = document
-			document.querySelector("#delete_list_name").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML;
+        .querySelector("#frontpage_pinned")
-			document.querySelector("#delete_userpass_name").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML;
+        .cloneNode(true).innerHTML;
-			document.querySelector("#delete_channel_name").innerHTML = document.querySelector("#frontpage_pinned").cloneNode(true).innerHTML;
+      document.querySelector(
+        "#remove_description"
+      ).innerHTML = document
+        .querySelector("#frontpage_pinned")
+        .cloneNode(true).innerHTML;
+      document.querySelector(
+        "#remove_rules"
+      ).innerHTML = document
+        .querySelector("#frontpage_pinned")
+        .cloneNode(true).innerHTML;
+      document.querySelector(
+        "#delete_list_name"
+      ).innerHTML = document
+        .querySelector("#frontpage_pinned")
+        .cloneNode(true).innerHTML;
+      document.querySelector(
+        "#delete_userpass_name"
+      ).innerHTML = document
+        .querySelector("#frontpage_pinned")
+        .cloneNode(true).innerHTML;
+      document.querySelector(
+        "#delete_channel_name"
+      ).innerHTML = document
+        .querySelector("#frontpage_pinned")
+        .cloneNode(true).innerHTML;
       var selects = document.querySelectorAll("select");
       for (var i = 0; i < selects.length; i++) {
         M.FormSelect.init(selects[i]);
@@ -789,12 +962,31 @@ function loaded() {
       for (var i = 0; i < response.length; i++) {
         var icon = "";
         if (response[i].icon && response[i].icon != "") {
-					icon = "<img class='chat-icon' src='" + response[i].icon + "' alt='" + escapeHtml(response[i]._id) + "'>";
+          icon =
+            "<img class='chat-icon' src='" +
+            response[i].icon +
+            "' alt='" +
+            escapeHtml(response[i]._id) +
+            "'>";
         }
 
-				document.querySelector(".names-container").insertAdjacentHTML("beforeend", "<div class='col s12'><div class='name-chat col s3'>" + icon + escapeHtml(response[i]._id) + "</div><input type='text' class='" + escapeHtml(response[i]._id) + "_input col s5'><a class='btn green waves-effect col s2 m1 approve_name' href='#' data-name='" + escapeHtml(response[i]._id) + "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 remove_name' href='#' data-name='" + escapeHtml(response[i]._id) + "'><i class='material-icons'>close</i></a></div>");
+        document
+          .querySelector(".names-container")
+          .insertAdjacentHTML(
+            "beforeend",
+            "<div class='col s12'><div class='name-chat col s3'>" +
+              icon +
+              escapeHtml(response[i]._id) +
+              "</div><input type='text' class='" +
+              escapeHtml(response[i]._id) +
+              "_input col s5'><a class='btn green waves-effect col s2 m1 approve_name' href='#' data-name='" +
+              escapeHtml(response[i]._id) +
+              "'><i class='material-icons'>check</i></a><a class='btn red waves-effect col s2 m1 remove_name' href='#' data-name='" +
+              escapeHtml(response[i]._id) +
+              "'><i class='material-icons'>close</i></a></div>"
+          );
+      }
     }
-	    },
   });
 
   ajax({
@@ -822,7 +1014,8 @@ function loaded() {
     success: function(response) {
       if (response.length > 0) {
         removeClass(".descriptions-badge", "hide");
-				document.querySelector(".descriptions-badge").innerText = response.length;
+        document.querySelector(".descriptions-badge").innerText =
+          response.length;
         increaseInfo(response.length);
       }
       add_to_tab("descriptions", response);
@@ -849,7 +1042,9 @@ function loaded() {
 function predicate() {
   var fields = [],
     n_fields = arguments.length,
-	field, name, cmp;
+    field,
+    name,
+    cmp;
 
   var default_cmp = function(a, b) {
       if (a == undefined) a = 0;
@@ -877,7 +1072,7 @@ function predicate() {
   // preprocess sorting options
   for (var i = 0; i < n_fields; i++) {
     field = arguments[i];
-		if (typeof field === 'string') {
+    if (typeof field === "string") {
       name = field;
       cmp = default_cmp;
     } else {
@@ -907,7 +1102,7 @@ function predicate() {
 
 function removeClass(element, className) {
   try {
-		if(typeof(element) == "object") {
+    if (typeof element == "object") {
       element.classList.remove(className);
     } else if (element.substring(0, 1) == "#") {
       document.getElementById(element.substring(1)).classList.remove(className);
@@ -924,7 +1119,7 @@ function removeClass(element, className) {
 
 function addClass(element, className) {
   try {
-		if(typeof(element) == "object") {
+    if (typeof element == "object") {
       try {
         if (element.length > 0) {
           for (var i = 0; i < element.length; i++) {
@@ -976,7 +1171,7 @@ function decodeChannelName(str) {
 
 function toggleClass(element, className) {
   try {
-		if(typeof(element) == "object") {
+    if (typeof element == "object") {
       if (element.className.indexOf(className) == -1) {
         addClass(element, className);
       } else {
@@ -1028,15 +1223,19 @@ function ajax(obj) {
   if (obj.method == undefined) obj.method = "GET";
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
-		if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
+    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
-			if (xmlhttp.status == 200 || xmlhttp.status == 201 || xmlhttp.status == 202) {
+      // XMLHttpRequest.DONE == 4
+      if (
+        xmlhttp.status == 200 ||
+        xmlhttp.status == 201 ||
+        xmlhttp.status == 202
+      ) {
         try {
           obj.success(JSON.parse(xmlhttp.responseText), xmlhttp);
         } catch (e) {
           obj.success(xmlhttp.responseText, xmlhttp);
         }
-			}
+      } else if (obj.hasOwnProperty("error")) {
-			else if(obj.hasOwnProperty("error")){
         obj.error(xmlhttp);
       }
     }
@@ -1049,11 +1248,10 @@ function ajax(obj) {
     }
   }
   if (obj.data) {
-		if(typeof(obj.data) == "object") obj.data = JSON.stringify(obj.data);
+    if (typeof obj.data == "object") obj.data = JSON.stringify(obj.data);
     //xmlhttp.send(sendRequest);
     xmlhttp.send(obj.data);
-	}
+  } else xmlhttp.send();
-	else xmlhttp.send();
 }
 
 function handleEvent(e, target, tried, type) {
@@ -1065,7 +1263,9 @@ function handleEvent(e, target, tried, type) {
       path.push(parent);
       try {
         parent = parent.parentElement;
-            } catch(e){break;}
+      } catch (e) {
+        break;
+      }
     }
   }
   if (path) {
@@ -1077,7 +1277,10 @@ function handleEvent(e, target, tried, type) {
       } else {
         if (target.classList == undefined) return;
         for (var i = 0; i < target.classList.length; i++) {
-                    if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) {
+          if (
+            dynamicListeners[type] &&
+            dynamicListeners[type]["." + target.classList[i]]
+          ) {
             dynamicListeners[type]["." + target.classList[i]].call(e, target);
             return;
           }

server/public/assets/admin/not_authenticated/js/main.js

@@ -1,21 +1,37 @@
 window.addEventListener("DOMContentLoaded", function() {
-    document.getElementById("login_button").addEventListener("click", function(event) {
+  document
+    .getElementById("login_button")
+    .addEventListener("click", function(event) {
       event.preventDefault();
       document.querySelector("#login_form").submit();
     });
 
-    document.getElementById("login_form").addEventListener("submit", function(event) {
+  document
+    .getElementById("login_form")
+    .addEventListener("submit", function(event) {
       if (this.password.value == "" || this.username.value == "") {
         e.preventDefault();
       }
     });
 
-    if(window.location.pathname == "/signup/" || window.location.pathname == "/signup"){
+  if (
-        document.querySelector("#login_form").insertAdjacentHTML("afterbegin", "<input type='text' name='token' placeholder='Token' required autocomplete='off' />");
+    window.location.pathname == "/signup/" ||
+    window.location.pathname == "/signup"
+  ) {
+    document
+      .querySelector("#login_form")
+      .insertAdjacentHTML(
+        "afterbegin",
+        "<input type='text' name='token' placeholder='Token' required autocomplete='off' />"
+      );
     document.querySelector("#login_form").setAttribute("action", "/signup");
   }
   if (window.location.hash == "#failed") {
     window.location.hash = "";
-        M.toast({ html: "Couldn't find a user with that username or password..", displayLength: 4000, classes: "red lighten"});
+    M.toast({
+      html: "Couldn't find a user with that username or password..",
+      displayLength: 4000,
+      classes: "red lighten"
+    });
   }
 });

server/public/assets/css/animations.css

@@ -0,0 +1,63 @@
+@keyframes snow {
+  0% {
+    background-position: 0px 0px, 0px 0px, 0px 0px;
+  }
+  100% {
+    background-position: 500px 500px, 400px 400px, 300px 300px;
+  }
+}
+@-moz-keyframes snow {
+  0% {
+    background-position: 0px 0px, 0px 0px, 0px 0px;
+  }
+  100% {
+    background-position: 500px 500px, 400px 400px, 300px 300px;
+  }
+}
+@-webkit-keyframes snow {
+  0% {
+    background-position: 0px 0px, 0px 0px, 0px 0px;
+  }
+  100% {
+    background-position: 500px 500px, 400px 400px, 300px 300px;
+  }
+}
+@-ms-keyframes snow {
+  0% {
+    background-position: 0px 0px, 0px 0px, 0px 0px;
+  }
+  100% {
+    background-position: 500px 500px, 400px 400px, 300px 300px;
+  }
+}
+
+/*
+*
+*
+* Source: https://codepen.io/NickyCDK/pen/AIonk
+*
+*/
+
+#snow {
+  pointer-events: none;
+  background: none;
+  font-family: Androgyne;
+  background-image: url("/assets/images/s1.png"), url("/assets/images/s2.png"),
+    url("/assets/images/s3.png");
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  -webkit-animation: snow 10s linear infinite;
+  -moz-animation: snow 10s linear infinite;
+  -ms-animation: snow 10s linear infinite;
+  animation: snow 10s linear infinite;
+}
+
+#snow.snow-channel {
+  z-index: 9999;
+  width: calc(100% - 0.75rem);
+  height: calc(100% - 32px);
+}

server/public/assets/css/embed.css

@@ -7,13 +7,14 @@
 }
 
 .side_away {
-  -webkit-transition: all .3s !important;
+  -webkit-transition: all 0.3s !important;
-  -moz-transition: all .3s !important;
+  -moz-transition: all 0.3s !important;
-  -o-transition: all .3s !important;
+  -o-transition: all 0.3s !important;
-  transition: all .3s !important;
+  transition: all 0.3s !important;
 }
 
-.prev.playbar, .skip.playbar {
+.prev.playbar,
+.skip.playbar {
   float: left;
   font-size: 24px;
   cursor: pointer;
@@ -29,25 +30,28 @@
   margin: auto;
   bottom: 0;
   right: 0;
-    background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9;
 }
 
-.prev, .skip {
+.prev,
+.skip {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-#playpause, .prev.playbar, .skip.playbar {
+#playpause,
+.prev.playbar,
+.skip.playbar {
   padding: 0 2.5px;
 }
 .playbar-btn:hover {
-    background-color: rgba(0,0,0,.6);
+  background-color: rgba(0, 0, 0, 0.6);
-    color: hsla(0,0%,100%,.5);
+  color: hsla(0, 0%, 100%, 0.5);
 }
 
 .hide {
@@ -55,9 +59,10 @@
 }
 .playbar-btn {
   cursor: pointer;
-    transition: background-color .2s;
+  transition: background-color 0.2s;
 }
-#controls, .playbar {
+#controls,
+.playbar {
   color: #fff;
 }
 
@@ -84,7 +89,7 @@
   padding-left: 20px;
   display: flex;
   align-items: center;
-  background: rgba(0,0,0,.7);
+  background: rgba(0, 0, 0, 0.7);
 }
 
 .soundcloud_info_container a {
@@ -132,7 +137,8 @@
   justify-content: space-around;
 }
 
-.prev_page, .next_page{
+.prev_page,
+.next_page {
   cursor: pointer;
 }
 
@@ -140,7 +146,8 @@
   height: calc(100% - 46px);
 }
 
-.prev_page_hide, .next_page_hide{
+.prev_page_hide,
+.next_page_hide {
   visibility: visible !important;
   color: gray;
 }
@@ -161,15 +168,16 @@
   display: none;
 }
 
-.list-image, .list-suggested-image{
+.list-image,
+.list-suggested-image {
   width: 34%;
   height: 66px;
   float: left;
 }
 
 .list-image:after {
-  -webkit-transition: all .3s;
+  -webkit-transition: all 0.3s;
-  transition: all .3s;
+  transition: all 0.3s;
   font-family: "Material Icons";
   content: "thumb_up";
   speak: none;
@@ -207,19 +215,20 @@
   color: white;
   font-size: 65px;
   position: absolute;
-  width:100%; height:100%;
+  width: 100%;
-  top:0; left:0;
+  height: 100%;
+  top: 0;
+  left: 0;
   background: rgba(0, 0, 0, 0.8);
   opacity: 0;
-  transition: all .1s ease;
+  transition: all 0.1s ease;
 }
 
-.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
+.vote-container:hover .list-image:after,
+.add-suggested:hover .list-suggested-image:after {
   opacity: 1;
 }
 
-
-
 .vote-span {
   opacity: 0.7;
   padding: 0 0 0 10px;
@@ -230,23 +239,28 @@
   background-color: rgba(255, 255, 255, 0.04);
   color: white;
   font: 12px Arial, sans-serif;
-  -webkit-transition:height .3s;
+  -webkit-transition: height 0.3s;
-  -moz-transition:height .3s;
+  -moz-transition: height 0.3s;
-  -o-transition:height .3s;
+  -o-transition: height 0.3s;
-  transition:height .3s;
+  transition: height 0.3s;
   height: 66px;
   width: 100%;
 }
-.list-song .card-content{padding:0;}
+.list-song .card-content {
+  padding: 0;
+}
 .list-title {
   font-size: 13px !important;
   display: block;
-  color:white;font-size:1em;
+  color: white;
+  font-size: 1em;
   text-align: left;
   padding: 0 10px 0 10px;
   line-height: 2.6rem;
 }
-.card-image{cursor:pointer}
+.card-image {
+  cursor: pointer;
+}
 .card {
   margin: 2.5px 0 2.5px 0 !important;
 }
@@ -273,14 +287,15 @@
   background-repeat: no-repeat;
 }
 
-.progress{background-color:rgba(0,0,0,0) !important;}
+.progress {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
 
 .indeterminate {
   background-color: white !important;
 }
 
-#controls
+#controls {
-{
   background: inherit;
 
   position: relative;
@@ -291,8 +306,9 @@
   margin-top: -5px;
 }
 
-#playpause, #duration, #volume-button
+#playpause,
-{
+#duration,
+#volume-button {
   float: left;
   color: white;
 }
@@ -301,7 +317,6 @@
   margin-left: 10px;
 }
 
-
 #seekToDuration {
   position: absolute;
   background: #2d2d2d;
@@ -317,25 +332,25 @@
   pointer-events: none;
 }
 
-#playpause, #volume-button
+#playpause,
-{
+#volume-button {
   font-size: 23px;
 }
 
-#playpause:hover, #volume-button:hover, #fullscreen:hover
+#playpause:hover,
-{
+#volume-button:hover,
+#fullscreen:hover {
   color: rgba(255, 255, 255, 0.5);
 }
 
-#fullscreen
+#fullscreen {
-{
   float: right;
   color: white;
   margin-right: 15px;
 }
 
-#duration, #viewers
+#duration,
-{
+#viewers {
   margin-top: 5px;
   font-family: "Roboto", sans-serif;
   font-weight: 300;
@@ -349,7 +364,7 @@
   position: absolute;
   bottom: 50px;
   left: 0px;
-  background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
   padding-left: 5px;
   padding-right: 25px;
 }
@@ -364,15 +379,16 @@
   align-items: center;
 }
 
-#play, #pause, #volume-button, #fullscreen
+#play,
-{
+#pause,
+#volume-button,
+#fullscreen {
   font-size: 20px;
   cursor: pointer;
 }
 
-
 .ui-slider-vertical {
-  width: .8em;
+  width: 0.8em;
   height: 100px;
 }
 .ui-slider {
@@ -391,16 +407,16 @@
 .ui-slider .ui-slider-range {
   position: absolute;
   z-index: 1;
-  font-size: .7em;
+  font-size: 0.7em;
   display: block;
   border: 0;
   background-position: 0 0;
 }
 
 .ui-slider-vertical .ui-slider-handle {
-  left: -.3em;
+  left: -0.3em;
   margin-left: 0;
-  margin-bottom: -.6em;
+  margin-bottom: -0.6em;
 }
 .ui-slider .ui-slider-handle {
   position: absolute;
@@ -423,15 +439,15 @@
 .ui-slider .ui-slider-range {
   position: absolute;
   z-index: 1;
-  font-size: .7em;
+  font-size: 0.7em;
   display: block;
   border: 0;
   background-position: 0 0;
 }
 
 .ui-slider-horizontal .ui-slider-handle {
-  top: -.3em;
+  top: -0.3em;
-  margin-left: -.6em;
+  margin-left: -0.6em;
 }
 #volume {
   border-radius: 10px;
@@ -486,7 +502,8 @@
   display: none;
 }
 #volume .volume-handle.ui-state-active {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01),
+    0 0 0 7px rgba(255, 255, 255, 0.3);
   position: absolute;
   width: 14px;
   height: 14px;
@@ -509,27 +526,23 @@
   cursor: pointer;
 }
 
-.play
+.play {
-{
   background-size: auto;
   width: 55px;
   height: 27px;
 }
 
-.pause
+.pause {
-{
   background-size: auto;
   width: 55px;
   height: 27px;
 }
 
-.hide
+.hide {
-{
   display: none !important;
 }
 
-#bar
+#bar {
-{
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
 }
@@ -542,14 +555,16 @@ html {
   background: inherit;
 }
 
-#pageButtons, #pageButtons a{
+#pageButtons,
+#pageButtons a {
   color: white !important;
   width: 100%;
   justify-content: space-evenly;
   align-items: center;
 }
 
-#pageButtons a, #pageButtons span {
+#pageButtons a,
+#pageButtons span {
   padding-left: 1px;
   padding-right: 1px;
 }
@@ -565,12 +580,17 @@ html {
   width: 100%;
 }
 
-.prev_page, .next_page, .last_page, .first_page{
+.prev_page,
+.next_page,
+.last_page,
+.first_page {
   cursor: pointer;
 }
 
-
+.prev_page_hide,
-.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{
+.next_page_hide,
+.last_page_hide,
+.first_page_hide {
   visibility: visible !important;
   color: gray;
   cursor: default;
@@ -580,23 +600,30 @@ html {
   justify-content: center;
 }
 
-.prev_page_hide, .prev_page, .first_page, .first_page_hide{
+.prev_page_hide,
+.prev_page,
+.first_page,
+.first_page_hide {
   padding: 0 1px;
   height: 32px;
   line-height: 36px;
-
 }
 
-.next_page_hide, .next_page, .last_page, .last_page_hide{
+.next_page_hide,
+.next_page,
+.last_page,
+.last_page_hide {
   padding: 0 0px;
   display: flex;
 }
 
-.first_page, .first_page_hide {
+.first_page,
+.first_page_hide {
   padding: 0 0 0 10px;
 }
 
-.last_page, .last_page_hide {
+.last_page,
+.last_page_hide {
   padding: 0 10px 0 0;
 }
 
@@ -614,7 +641,7 @@ body {
   position: absolute;
   bottom: 0px;
   left: 0px;
-  background: rgba(0,0,0,.7);
+  background: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 0 5px;
 }
@@ -623,7 +650,7 @@ body {
   position: absolute;
   z-index: 9;
   color: white;
-  background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
   font-size: 1.5rem;
   padding: 10px;
   width: 60vw;
@@ -645,7 +672,8 @@ display: none !important;
   }
 }
 
-@media only screen and (max-width: 736px) and (max-width:500px), only screen and (max-device-width: 736px)  and (orientation: landscape){
+@media only screen and (max-width: 736px) and (max-width: 500px),
+  only screen and (max-device-width: 736px) and (orientation: landscape) {
   #player-container {
     /*display: none;*/
     position: absolute;

server/public/assets/css/globals.css

@@ -0,0 +1,4 @@
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+}

server/public/assets/css/mobile.css

@@ -0,0 +1,840 @@
+@media only screen and (max-width: 992px) {
+  nav .brand-logo {
+    left: 0%;
+    transform: translateX(0%);
+    -webkit-transform: translateX(0%);
+    padding-left: 0px;
+  }
+
+  .zbrand {
+    /*max-width: 35%;*/
+  }
+}
+
+@media (min-width: 600px),
+  (min-width: 961px),
+  (min-width: 1025px),
+  (min-width: 1281px) {
+  #controls {
+    background: none !important;
+  }
+}
+
+@media only screen and (max-width: 736px) and (max-width: 600px),
+  only screen and (max-device-width: 736px) and (orientation: landscape) {
+  .autocomplete-content.dropdown-content {
+    width: 95vw !important;
+  }
+
+  .mobile-overflow {
+    overflow: visible;
+  }
+
+  .footer-buttons,
+  .footer-buttons li a {
+    width: 100%;
+  }
+
+  #main-row {
+    margin-right: -3px !important;
+    background: inherit;
+  }
+
+  .admin_panel {
+    margin-top: 25px !important;
+  }
+
+  #suggestions {
+    height: auto !important;
+    /*padding-bottom: 0px;*/
+  }
+
+  .margin-playbar {
+    margin-left: 10px;
+  }
+
+  #chat-container {
+    height: calc(100vh - 48px - 64px - 120px);
+    margin-bottom: 18px;
+  }
+
+  #player_bottom_overlay {
+    top: 7px;
+  }
+
+  .mobile-delete {
+    height: 100%;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    top: 0px;
+    right: -60px;
+    /* overflow: visible; */
+    z-index: -99999999;
+  }
+
+  #main-container {
+    /*padding-bottom: 20px;*/
+  }
+
+  #fireplace_player {
+    display: none !important;
+  }
+
+  .addedJoinBox {
+    display: none;
+  }
+
+  #playbar {
+    display: block;
+    position: fixed;
+    bottom: 0px;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+  }
+
+  .list-title {
+    width: 66%;
+  }
+
+  .hamburger-sidenav {
+    margin: 20px 10px 12px 10px;
+  }
+
+  #main_section_frontpage {
+    margin-top: -20px;
+    padding-top: 0px;
+  }
+
+  .delete_button,
+  .del_suggested,
+  .del_user_suggested {
+    bottom: -9px;
+    /* line-height: inherit; */
+    height: auto;
+    display: flex;
+    align-items: center;
+    border-top: none;
+    padding: 0px !important;
+    margin: 0px !important;
+  }
+
+  .vote-container:hover .list-image:after,
+  .add-suggested:hover .list-suggested-image:after {
+    opacity: 1;
+    content: "thumb_up";
+  }
+
+  .list-image:after,
+  .list-suggested-image:after {
+    content: none;
+  }
+
+  .delete_button .material-icons,
+  .del_suggested .material-icons,
+  .del_user_suggested .material-icons {
+    font-size: 2.5rem;
+  }
+
+  #remote-sidebar-buttons-container {
+    text-align: center;
+  }
+
+  .slider-vol-mobile {
+    display: none !important;
+  }
+
+  #frontpage-viewer-counter {
+    right: 56px;
+    width: 62px;
+    left: inherit;
+    text-align: right;
+  }
+
+  .brand-logo {
+    left: 0 !important;
+    padding-left: 0px !important;
+    -webkit-transform: translateX(0%) !important;
+    -moz-transform: translateX(0%) !important;
+    -ms-transform: translateX(0%) !important;
+    -o-transform: translateX(0%) !important;
+    transform: translateX(0%) !important;
+  }
+
+  #player_overlay {
+    height: calc(30vh);
+    bottom: -33px !important;
+    top: 7px;
+    width: 100vw;
+    height: 200px;
+    pointer-events: all;
+    display: none;
+  }
+
+  #wrapper {
+    min-height: 75px;
+  }
+
+  .click-through {
+    pointer-events: none;
+  }
+
+  .zicon {
+    height: 100%;
+  }
+  /*.list-remove{
+    margin-top:-68px;
+    }*/
+
+  #settings-bar {
+    overflow-x: hidden;
+  }
+
+  #remote-mobile-container {
+    margin-left: -7px;
+  }
+
+  #remote_channel {
+    color: #2d2d2d;
+    /*width:90%;*/
+  }
+  .show-only-mobile {
+    display: block;
+  }
+
+  #volume-control-remote {
+    display: none;
+  }
+
+  #remote_header {
+    color: #2d2d2d;
+    font-size: 1.5em;
+    padding: 10px;
+    text-align: center;
+  }
+
+  #all_chat,
+  #channelchat {
+    height: calc(100vh - 352px);
+  }
+
+  #fp-nav {
+    width: 100%;
+  }
+
+  #search-wrapper {
+    width: 100vw;
+  }
+
+  #search-wrapper:hover,
+  #song-title:hover {
+    /*background: inherit;*/
+  }
+
+  #toast-container {
+    left: 0% !important;
+    width: 100vw;
+    bottom: 55px;
+  }
+
+  .empty-inner-results {
+    height: 100vh !important;
+  }
+
+  #empty-results {
+    height: calc(100vh - 112px);
+  }
+
+  .search_input {
+    padding-right: 50px;
+    width: calc(100vw - 78px);
+  }
+
+  .playlist-tabs-loggedIn,
+  .playlist-tabs {
+    width: calc(100%) !important;
+  }
+
+  #wrapper.tabs_height {
+    height: calc(100vh - 48px - 64px - 134px);
+    overflow: initial;
+  }
+
+  .client-wrapper {
+    height: calc(100vh - 48px - 64px - 36px) !important;
+  }
+
+  /*.client-results-height {
+        margin-top: 50px !important;
+    }*/
+
+  .client-pagination-height {
+    height: 80px;
+  }
+
+  .brand-mobile {
+    padding-left: 0px !important;
+  }
+
+  #player {
+    height: calc(100%);
+    display: none;
+    width: 100vw;
+  }
+
+  .pointer-events-all-mobile {
+    pointer-events: all !important;
+  }
+
+  .small-display {
+    display: block !important;
+  }
+
+  .small-display-hide {
+    display: none !important;
+  }
+
+  .hide-on-small-only {
+    display: none;
+  }
+
+  #controls {
+    /*opacity: 1;*/
+    overflow: initial;
+    background-color: rgb(70, 70, 70);
+    height: 50px;
+    margin-top: inherit;
+    bottom: 0px;
+    position: fixed;
+    pointer-events: all;
+    -webkit-transition: background-color 0.5s ease;
+    -moz-transition: background-color 0.5s ease;
+    -o-transition: background-color 0.5s ease;
+    transition: background-color 0.5s ease;
+  }
+
+  #chat-container {
+    padding-left: 10px;
+  }
+
+  #play,
+  #pause,
+  #volume-button i,
+  #fullscreen i,
+  .castButton-unactive i,
+  .castButton-active i,
+  .playbar-btn i {
+    font-size: 31px;
+    font-size: 31px !important;
+    margin-top: 8px;
+    line-height: 31px;
+  }
+
+  .skip.playbar,
+  .prev.playbar,
+  #playpause {
+    padding-top: 0px;
+    height: 51px;
+  }
+
+  .castButton-unactive,
+  .castButton-active {
+    margin-right: 10px;
+    padding-right: 10px;
+    padding-left: 0px;
+  }
+
+  /*#volume{
+    display: none;
+    }*/
+
+  .volume-container {
+    position: absolute;
+    right: 0%;
+    width: 37px;
+    top: -127px;
+    height: 127px;
+    left: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: inherit;
+  }
+
+  .volume-container-cast {
+    right: 39px;
+  }
+
+  #volume {
+    width: 10px;
+    height: 100px;
+    left: 0px;
+  }
+
+  .ui-widget-header {
+    background: rgb(255, 255, 255);
+  }
+
+  #viewers {
+    margin-top: 8px;
+    font-size: 20px;
+    font-weight: 400;
+  }
+
+  .footer-copyright {
+    margin-bottom: 10px;
+  }
+
+  #duration {
+    font-size: 20px;
+    font-weight: 400;
+    margin-top: 9px;
+    letter-spacing: -0.7px;
+    margin-left: 10px;
+  }
+
+  #volume-button {
+    float: right;
+    /* margin-right: 5px; */
+    padding-right: 3px;
+    margin-left: 0px;
+    padding-left: 3px;
+    height: 51px;
+    padding-top: 0px;
+    width: 37px;
+  }
+
+  #fullscreen {
+    float: right;
+  }
+
+  .castButton {
+    width: 39px;
+    height: 51px;
+    padding-top: 0em;
+  }
+
+  .label-for-mobile-frontpage {
+    display: initial;
+    width: auto !important;
+    margin-left: auto !important;
+  }
+
+  .mega {
+    background: white;
+  }
+  #bar {
+    background-color: rgba(0, 0, 0, 1);
+  }
+
+  .channel-finder .input-field {
+    padding: 0 0.75rem;
+  }
+
+  .mega form {
+    display: block;
+    width: auto;
+    margin-bottom: 0px;
+  }
+
+  .mega input {
+    color: black;
+    text-shadow: none;
+    margin-left: 0px !important;
+    padding-left: 0px !important;
+  }
+
+  .room-namer.autocomplete {
+    margin-left: 0px !important;
+    margin-top: auto !important;
+  }
+
+  #channel-share-modal {
+    width: 100%;
+  }
+
+  #autocomplete-input {
+    width: 100%;
+    border-bottom: 1px solid #9e9e9e !important;
+  }
+
+  #autocomplete-input::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #fff;
+  }
+  #autocomplete-input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #fff;
+    opacity: 1;
+  }
+  #autocomplete-input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #fff;
+    opacity: 1;
+  }
+  #autocomplete-input:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #fff;
+  }
+
+  .room-namer::-webkit-input-placeholder {
+    /*color:rgb(155, 155, 155) !important;*/
+    -webkit-transition: opacity 0.5s;
+    color: transparent !important;
+  }
+
+  #mega-background,
+  .mega h5,
+  #snow,
+  .pitch,
+  .channel-finder .input-field .prefix,
+  .listen-button {
+    display: none !important;
+  }
+
+  .channel-finder .input-field {
+    display: initial;
+    /* width: 69%; */
+    justify-content: center;
+  }
+
+  /*.mega {display:none;}*/
+  .mobile-search {
+    display: block;
+  }
+
+  .toast {
+    height: auto;
+  }
+
+  .remote-panel {
+    display: none;
+  }
+
+  .navbar-fixed,
+  #nav {
+    /*position: relative;*/
+  }
+
+  .navbar-fixed {
+    height: 100px;
+    margin-bottom: 25px;
+  }
+
+  .control-list {
+    position: absolute !important;
+    /*width: 120px;*/
+  }
+
+  .client-control-list {
+    width: auto;
+  }
+
+  .page-footer {
+    padding-top: 40px !important;
+  }
+
+  .padding-bottom-novideo {
+    padding-bottom: 40px;
+  }
+
+  .padding-bottom-extra {
+    padding-bottom: 210px;
+  }
+
+  .main,
+  #main-row,
+  .video-container,
+  #playlist {
+    height: auto !important;
+    margin-bottom: 2px;
+    margin-top: -6px;
+  }
+
+  .main {
+    max-width: 99%;
+    background: inherit;
+  }
+
+  #pageButtons {
+    margin-left: -11px;
+    width: 100vw;
+    position: relative;
+    padding-bottom: 3px;
+  }
+
+  #search_loader {
+    height: 56px;
+  }
+
+  #playlist {
+    /*margin-left: 10px;*/
+    background: inherit;
+    width: calc(100% - 10px);
+    overflow: hidden;
+  }
+
+  #player {
+    pointer-events: none;
+    margin-top: 7px;
+  }
+
+  .search-container,
+  .song-title {
+    background: inherit;
+  }
+
+  .row .col.s12 {
+    width: 100% !important;
+  }
+
+  #main-row.row #video-container.video-container {
+    position: fixed;
+    display: block !important;
+    width: 106vw !important;
+    height: 200px !important;
+    z-index: 10;
+    bottom: 55px;
+  }
+
+  #video-container.video-container.frontpage-player {
+    width: auto !important;
+  }
+
+  .chan {
+    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42);
+    width: calc(100vw - 170px) !important;
+    max-width: calc(100% - 87.5px - 130px);
+    font-size: 2rem;
+    padding-right: 0px;
+    overflow: hidden;
+    /* display: block; */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .chan-client {
+    max-width: calc(100% - 87.5px - 170px);
+  }
+
+  .control-list li a {
+    min-width: 0px;
+    width: 37px;
+    padding: 0 0 0 0px;
+  }
+
+  nav .zbrand {
+    -webkit-transform: initial;
+    transform: initial;
+    display: flex;
+    max-width: initial;
+    width: 100vw;
+    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
+      0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  }
+
+  .title-container {
+    background-color: rgba(0, 0, 0, 0.1);
+    display: block;
+    top: 56px !important;
+    width: 100vw;
+    background: #2d2d2d;
+  }
+  .title-container li {
+    /*width: 100%;*/
+  }
+
+  #inner-results {
+    height: calc(100vh - 54px - 64px - 123px);
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  .thumb-and-info {
+    flex-direction: column;
+  }
+
+  .result_info {
+    opacity: 0.8;
+    margin-top: 0px;
+    height: 21px;
+    margin-right: 0px;
+    padding: 0px;
+    line-height: initial;
+    border-top-right-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 55px;
+    margin-left: 10px;
+    margin-top: -16px;
+  }
+
+  .search_results {
+    margin-top: 45px;
+    background: #000;
+  }
+
+  .results-tabs .indicator {
+    margin-top: 50px;
+  }
+
+  #results,
+  #results_soundcloud {
+    background-color: #000;
+    margin-top: -8px;
+  }
+
+  #results {
+    max-height: calc(100vh - 165px);
+  }
+
+  #results_soundcloud {
+    height: calc(100vh - 64px - 54px);
+  }
+
+  #results_soundcloud #inner-results {
+    height: calc(100vh - 54px - 64px - 47px);
+  }
+
+  .result {
+    margin: 0;
+    width: 99%;
+  }
+
+  .result-get-more-info {
+    background: black;
+    position: absolute;
+    right: 0px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 45px;
+  }
+
+  .result-info-no-buttons {
+    width: calc(100% - 200px);
+  }
+
+  .result-object {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+    overflow: hidden;
+  }
+
+  .result {
+    -webkit-transition: margin 0.5s;
+    -moz-transition: margin 0.5s;
+    transition: margin 0.5s;
+  }
+
+  #user_password {
+    width: 80% !important;
+  }
+
+  #addToListInput {
+    top: -85px;
+    right: 35px;
+  }
+
+  #addToOtherList {
+    padding: 0 10px;
+  }
+
+  .result-object-slid {
+    /*-webkit-transform: translateX(calc(-100% + 45px)) !important;
+        transform: translateX(calc(-100% + 45px)) !important;*/
+    margin-left: -94%;
+  }
+
+  .result-start-end-container {
+    /*visibility: hidden;
+        pointer-events: none;*/
+    margin-left: 120%;
+    position: relative;
+    top: -10px;
+  }
+
+  .result-info-buttons {
+    margin-top: 20px;
+    width: 150px;
+  }
+
+  .result .search-title {
+    white-space: nowrap;
+    width: calc(100vw - 165px);
+    margin-top: -5px;
+    z-index: 9999;
+  }
+  .result img {
+    margin: -3px 10px;
+    height: 50px;
+    width: 88.88px;
+  }
+  .result .add-many {
+    margin-top: 15px;
+  }
+}
+
+@media only screen and (max-device-width: 736px) and (orientation: landscape) {
+  .video-container {
+    width: 315px !important;
+    /* height: auto !important; */
+    right: -5px;
+    bottom: 20px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  #results {
+    background-color: #000;
+    /*margin-top:56px;*/
+  }
+
+  .title-container {
+    top: 64px;
+    top: 0px;
+  }
+}
+
+@media only screen and (min-width: 769px) {
+  .navbar-fixed {
+    height: 64px;
+  }
+  nav .zbrand {
+    /*display: inline-block;*/
+    /*top:-22px;*/
+    /*left:100px;*/
+  }
+
+  .title-container li {
+    /*width: 71%;*/
+  }
+
+  #wrapper {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    opacity: 1;
+    overflow: hidden;
+    padding-right: 0.5rem !important;
+  }
+
+  #playlist {
+    /*padding:0px 15px;*/
+    height: 90%;
+    height: calc(100vh - 64px);
+    overflow: hidden;
+    padding-right: 0px;
+    /*padding-right: 0px;*/
+    /*padding:0px 0px 0px 0px;*/
+  }
+}

server/public/assets/html/callback.html

@@ -170,8 +170,6 @@
   </head>
   <body>
     <h4>Loading..</h4>
-  <div class="uil-ring-css" >
+    <div class="uil-ring-css"><div></div></div>
-    <div></div>
-  </div>
   </body>
 </html>

server/public/assets/js/admin.js

@@ -1,5 +1,4 @@
 var Admin = {
-
   beginning: true,
   logged_in: false,
 
@@ -18,7 +17,10 @@ var Admin = {
       Helper.removeClass(".info_change_li", "hide");
       Helper.removeClass("#user_suggests", "hide");
       Helper.removeClass("#user-suggest-html", "hide");
-            if(Helper.html(".suggested-badge") != "0" && Helper.html(".suggested-badge") != "") {
+      if (
+        Helper.html(".suggested-badge") != "0" &&
+        Helper.html(".suggested-badge") != ""
+      ) {
         Helper.removeClass(".suggested-badge", "hide");
       }
       if (conf != undefined && conf.strictSkip) {
@@ -29,8 +31,19 @@ var Admin = {
       Helper.addClass(".strict-skip-input", "hide");
     }
     Helper.removeClass(".delete-context-menu", "context-menu-disabled");
-        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
+    names = [
-        "removeplay", "skip", "shuffle", "userpass", "toggleChat", "strictSkip"];
+      "vote",
+      "addsongs",
+      "longsongs",
+      "frontpage",
+      "allvideos",
+      "removeplay",
+      "skip",
+      "shuffle",
+      "userpass",
+      "toggleChat",
+      "strictSkip"
+    ];
     //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass);
 
     for (var i = 0; i < names.length; i++) {
@@ -41,14 +54,16 @@ var Admin = {
     Helper.addClass("#admin-lock", "clickable");
     document.getElementById("admin-lock").innerHTML = "lock_open";
     if (!Helper.mobilecheck()) {
-            Helper.tooltip('#admin-lock', {
+      Helper.tooltip("#admin-lock", {
         delay: 5,
         position: "left",
         html: "Logout"
       });
     }
     document.getElementById("password").value = "";
-        document.getElementById("password").setAttribute("placeholder", "Change admin password");
+    document
+      .getElementById("password")
+      .setAttribute("placeholder", "Change admin password");
     Helper.removeClass(".user-password-li", "hide");
     Helper.removeClass(".chat-toggle-li", "hide");
     Helper.removeClass(".delete-all", "hide");
@@ -60,7 +75,7 @@ var Admin = {
       Helper.addClass("#admin-lock", "clickable");
       document.getElementById("admin-lock").innerHTML = "lock_open";
       if (!Helper.mobilecheck()) {
-                Helper.tooltip('#admin-lock', {
+        Helper.tooltip("#admin-lock", {
           delay: 5,
           position: "left",
           html: "Logout"
@@ -70,7 +85,7 @@ var Admin = {
   },
 
   hideUserSuggested: function() {
-        Helper.addClass("#user_suggests", "hide")
+    Helper.addClass("#user_suggests", "hide");
     Helper.addClass("#user-suggest-html", "hide");
     Helper.addClass(".suggested-badge", "hide");
   },
@@ -89,10 +104,16 @@ var Admin = {
   pass_save: function() {
     if (!w_p) {
       //emit('password', {password: Crypt.crypt_pass(CryptoJS.SHA256(document.getElementById("password").value).toString()), channel: chan.toLowerCase(), oldpass: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase()))});
-            emit('password', {password: Crypt.crypt_pass(document.getElementById("password").value), channel: chan.toLowerCase()});
+      emit("password", {
+        password: Crypt.crypt_pass(document.getElementById("password").value),
+        channel: chan.toLowerCase()
+      });
     } else {
       //emit('password', {password: Crypt.crypt_pass(CryptoJS.SHA256(document.getElementById("password").value).toString()), channel: chan.toLowerCase()});
-            emit('password', {password: Crypt.crypt_pass(document.getElementById("password").value), channel: chan.toLowerCase()});
+      emit("password", {
+        password: Crypt.crypt_pass(document.getElementById("password").value),
+        channel: chan.toLowerCase()
+      });
     }
   },
 
@@ -113,8 +134,18 @@ var Admin = {
     Admin.logged_in = false;
     w_p = true;
     adminpass = "";
-        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
+    names = [
-        "removeplay", "skip", "shuffle", "toggleChat", "strictSkip"];
+      "vote",
+      "addsongs",
+      "longsongs",
+      "frontpage",
+      "allvideos",
+      "removeplay",
+      "skip",
+      "shuffle",
+      "toggleChat",
+      "strictSkip"
+    ];
     document.getElementById("password").value = "";
     Helper.addClass(".info_change_li", "hide");
     for (i = 0; i < names.length; i++) {
@@ -123,7 +154,7 @@ var Admin = {
 
     if (Helper.html("#admin-lock") != "lock") {
       if (!Helper.mobilecheck()) {
-                Helper.tooltip('#admin-lock', "destroy");
+        Helper.tooltip("#admin-lock", "destroy");
       }
       Helper.removeClass("#admin-lock", "clickable");
       document.getElementById("admin-lock").innerHTML = "lock";
@@ -142,41 +173,63 @@ var Admin = {
     Admin.hideUserSuggested();
 
     Helper.removeClass("#admin-lock", "clickable");
-        document.getElementById("password").setAttribute("placeholder", "Enter admin password");
+    document
+      .getElementById("password")
+      .setAttribute("placeholder", "Enter admin password");
     Helper.addClass(".delete-context-menu", "context-menu-disabled");
   },
 
   save: function(userpass) {
-        Admin.submitAdmin(document.getElementById("adminSettingsForm").elements, userpass);
+    Admin.submitAdmin(
+      document.getElementById("adminSettingsForm").elements,
+      userpass
+    );
   },
 
   set_conf: function(conf_array) {
     conf = conf_array;
     music = conf_array.allvideos;
     longsongs = conf_array.longsongs;
-        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
+    names = [
-        "removeplay", "skip", "shuffle", "userpass", "toggleChat", "strictSkip"];
+      "vote",
+      "addsongs",
+      "longsongs",
+      "frontpage",
+      "allvideos",
+      "removeplay",
+      "skip",
+      "shuffle",
+      "userpass",
+      "toggleChat",
+      "strictSkip"
+    ];
     if (!conf.hasOwnProperty("toggleChat")) conf.toggleChat = true;
     toggleChat = conf.toggleChat;
     hasadmin = conf_array.adminpass != "";
     var show_disabled = true;
-        if(hasadmin && Admin.logged_in || !hasadmin) {
+    if ((hasadmin && Admin.logged_in) || !hasadmin) {
       show_disabled = false;
     }
 
     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;
       if (show_disabled) {
-                document.getElementsByName(names[i])[0].setAttribute("disabled", show_disabled);
+        document
+          .getElementsByName(names[i])[0]
+          .setAttribute("disabled", show_disabled);
       } else {
         document.getElementsByName(names[i])[0].removeAttribute("disabled");
       }
     }
-        document.getElementById("strict-input-number").value = conf.strictSkipNumber;
+    document.getElementById("strict-input-number").value =
-        if((hasadmin) && !Admin.logged_in) {
+      conf.strictSkipNumber;
+    if (hasadmin && !Admin.logged_in) {
       if (Helper.html("#admin-lock") != "lock") Admin.display_logged_out();
     } else if (!hasadmin) {
-            document.getElementById("password").setAttribute("placeholder", "Create admin password");
+      document
+        .getElementById("password")
+        .setAttribute("placeholder", "Create admin password");
     } else {
       if (document.getElementsByClassName("password_protected")[0].checked) {
         Helper.removeClass(".change_user_pass", "hide");
@@ -197,14 +250,19 @@ var Admin = {
     var updated = false;
 
     if (conf_array.thumbnail != undefined && conf_array.thumbnail != "") {
-            document.getElementById("thumbnail_image").innerHTML = "<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' />";
       document.getElementById("thumbnail_input").value = conf_array.thumbnail;
       updated = true;
     }
 
     if (conf_array.description != undefined && conf_array.description != "") {
-            document.getElementById("description_area").innerHTML = conf_array.description;
+      document.getElementById("description_area").innerHTML =
-            document.getElementById("description_input").value = conf_array.description;
+        conf_array.description;
+      document.getElementById("description_input").value =
+        conf_array.description;
       updated = true;
     }
 
@@ -212,12 +270,15 @@ var Admin = {
       var existingRules = document.querySelector(".rules-container");
       if (existingRules) existingRules.remove();
       var rules = conf_array.rules.split("\n");
-            var elementToAdd = "<li class='rules-container'><div class='row'><div class='col s10 offset-s1'><h4 class='center-align'>Rules</h4>";
+      var elementToAdd =
+        "<li class='rules-container'><div class='row'><div class='col s10 offset-s1'><h4 class='center-align'>Rules</h4>";
       for (var i = 0; i < rules.length; i++) {
         elementToAdd += "<p class='initial-line-height'>" + rules[i] + "</p>";
       }
       elementToAdd += "</div></div>";
-            document.querySelector(".channel_info_container").insertAdjacentHTML("afterend", elementToAdd);
+      document
+        .querySelector(".channel_info_container")
+        .insertAdjacentHTML("afterend", elementToAdd);
       document.getElementById("rules_input").value = conf_array.rules;
       updated = true;
     }
@@ -273,7 +334,7 @@ var Admin = {
     if (!offline) {
       //var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true);
       //if(u == undefined) u = "";
-            emit('shuffle', {channel: chan.toLowerCase()});
+      emit("shuffle", { channel: chan.toLowerCase() });
     } else {
       for (var x = 0; x < full_playlist.length; x++) {
         var num = Math.floor(Math.random() * 1000000);
@@ -287,5 +348,4 @@ var Admin = {
   get_admin: function() {
     return [w_p, hasadmin];
   }
-
 };

server/public/assets/js/callback.js

@@ -1,6 +1,7 @@
 window.addEventListener("load", function() {
   var query = getQueryHash(window.location.hash);
-    var redirect  = window.location.protocol + "//" + window.location.hostname + "/api/oauth";
+  var redirect =
+    window.location.protocol + "//" + window.location.hostname + "/api/oauth";
   var client_id;
   var response;
   var scope;
@@ -8,18 +9,39 @@ window.addEventListener("load", function() {
   if (query.spotify) {
     client_id = "b934ecdd173648f5bcd38738af529d58";
     response = "token";
-        scope     = "playlist-read-private ugc-image-upload playlist-read-collaborative user-read-private playlist-modify-public playlist-modify-private";
+    scope =
+      "playlist-read-private ugc-image-upload playlist-read-collaborative user-read-private playlist-modify-public playlist-modify-private";
     state = query.nonce;
-        window.location.href = "https://accounts.spotify.com/authorize?client_id=" + client_id + "&scope=" + scope + "&show_dialog=false&response_type=" + response + "&redirect_uri=" + redirect + "&state=" + state;
+    window.location.href =
-
+      "https://accounts.spotify.com/authorize?client_id=" +
+      client_id +
+      "&scope=" +
+      scope +
+      "&show_dialog=false&response_type=" +
+      response +
+      "&redirect_uri=" +
+      redirect +
+      "&state=" +
+      state;
   } else if (query.youtube) {
-        client_id = "944988770273-butsmlr1aotlsskk8lmgvh0etqqekigf.apps.googleusercontent.com";
+    client_id =
+      "944988770273-butsmlr1aotlsskk8lmgvh0etqqekigf.apps.googleusercontent.com";
     response = "token";
     scope = "https://www.googleapis.com/auth/youtube";
     state = query.nonce;
 
     //window.opener.callback(query);
-        window.location.href = "https://accounts.google.com/o/oauth2/v2/auth?client_id=" + client_id + "&response_type=" + response + "&state=" + state + "&redirect_uri=" + redirect + "&scope=" + scope;
+    window.location.href =
+      "https://accounts.google.com/o/oauth2/v2/auth?client_id=" +
+      client_id +
+      "&response_type=" +
+      response +
+      "&state=" +
+      state +
+      "&redirect_uri=" +
+      redirect +
+      "&scope=" +
+      scope;
   } else if (query.soundcloud) {
     /*
         SC.initialize({
@@ -42,7 +64,15 @@ window.addEventListener("load", function() {
     var response_type = "code";
     var scope = "non-expiring";
     var state = query.nonce;
-      var url = "https://soundcloud.com/connect?client_id=" + api_key.soundcloud + "&redirect_uri=" + redirect_uri + "&state=" + state + "&display=page&response_type=code&scope=" + scope;
+    var url =
+      "https://soundcloud.com/connect?client_id=" +
+      api_key.soundcloud +
+      "&redirect_uri=" +
+      redirect_uri +
+      "&state=" +
+      state +
+      "&display=page&response_type=code&scope=" +
+      scope;
     //console.log(url);
     window.location.href = url;
   } else {

server/public/assets/js/chat.js

@@ -1,5 +1,4 @@
 var Chat = {
-
   channel_received: 0,
   all_received: 0,
   chat_admin_help: [
@@ -21,7 +20,12 @@ var Chat = {
       var password = input[1];
 
       password = Crypt.crypt_chat_pass(password);
-            socket.emit("namechange", {name: name, channel: chan.toLowerCase(), password: password, first: first});
+      socket.emit("namechange", {
+        name: name,
+        channel: chan.toLowerCase(),
+        password: password,
+        first: first
+      });
     } else if (input.length == 3) {
       var name = input[0];
       var new_password = input[1];
@@ -30,7 +34,12 @@ var Chat = {
       new_password = Crypt.crypt_chat_pass(new_password);
       old_password = Crypt.crypt_chat_pass(old_password);
 
-            socket.emit("namechange", {name: name, channel: chan.toLowerCase(), new_password: new_password, old_password: old_password});
+      socket.emit("namechange", {
+        name: name,
+        channel: chan.toLowerCase(),
+        new_password: new_password,
+        old_password: old_password
+      });
     } else if (first) {
       var to_send = { initial: initial, first: true };
       if (chan != undefined && chan != "") {
@@ -47,7 +56,10 @@ var Chat = {
 
   chat: function(data) {
     if (data.value.length > 150) return;
-        if(data.value.startsWith("/name ") || data.value.startsWith("/removename")) {
+    if (
+      data.value.startsWith("/name ") ||
+      data.value.startsWith("/removename")
+    ) {
       data.value = "/help";
       Chat.chat(data);
       return;
@@ -55,14 +67,17 @@ var Chat = {
       Chat.namechange(data.value.substring(7), false);
     } else if (data.value.startsWith("/help")) {
       var add = "";
-            if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat"){
+      if (
+        document.querySelector(".chat-tab-li a.active").getAttribute("href") ==
+        "#all_chat"
+      ) {
         if (document.querySelector("#chatall").children.length > 100) {
-                    document.querySelector("#chatall").children[0].remove()
+          document.querySelector("#chatall").children[0].remove();
         }
         add = "chatall";
       } else {
         if (document.querySelector("#chatchannel").children.length > 100) {
-                    document.querySelector("#chatchannel").children[0].remove()
+          document.querySelector("#chatchannel").children[0].remove();
         }
         add = "chatchannel";
       }
@@ -76,18 +91,40 @@ var Chat = {
           }
         }
         var _time = new Date();
-                var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
+        var time =
+          Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
         color = Helper.hexToRgb(color.substring(0, 6));
         var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
-                document.querySelector("#" + add).insertAdjacentHTML("beforeend", "<li title='Zoff''><span class='time_color'>" + time + "</span> <img class='chat-icon' src='https://zoff.me/assets/images/favicon-32x32.png' alt='System'><span style='color:" + color_temp + ";'>System</span>: </li>");
+        document
+          .querySelector("#" + add)
+          .insertAdjacentHTML(
+            "beforeend",
+            "<li title='Zoff''><span class='time_color'>" +
+              time +
+              "</span> <img class='chat-icon' src='https://zoff.me/assets/images/favicon-32x32.png' alt='System'><span style='color:" +
+              color_temp +
+              ";'>System</span>: </li>"
+          );
         var in_text = document.createTextNode(help[x]);
-                document.querySelector("#" + add).children[document.querySelector("#" + add).children.length - 1].appendChild(in_text);
+        document
-                document.getElementById("" + add).scrollTop = document.getElementById("" + add).scrollHeight;
+          .querySelector("#" + add)
+          .children[
+            document.querySelector("#" + add).children.length - 1
+          ].appendChild(in_text);
+        document.getElementById("" + add).scrollTop = document.getElementById(
+          "" + add
+        ).scrollHeight;
       }
     } else if (data.value.startsWith("/logout")) {
       Chat.removename();
-        } else if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat") {
+    } else if (
-            socket.emit("all,chat", {channel: chan.toLowerCase(), data: data.value});
+      document.querySelector(".chat-tab-li a.active").getAttribute("href") ==
+      "#all_chat"
+    ) {
+      socket.emit("all,chat", {
+        channel: chan.toLowerCase(),
+        data: data.value
+      });
     } else {
       socket.emit("chat", { channel: chan.toLowerCase(), data: data.value });
     }
@@ -95,16 +132,26 @@ var Chat = {
     return;
   },
 
-    createChatElement: function(allchat, channel, time, icon, color, from, message) {
+  createChatElement: function(
+    allchat,
+    channel,
+    time,
+    icon,
+    color,
+    from,
+    message
+  ) {
     var liElement = document.createElement("li");
-        liElement.innerHTML += "<span class='time_color'>" + time + "</span> " + icon;
+    liElement.innerHTML +=
+      "<span class='time_color'>" + time + "</span> " + icon;
     var nameElement = document.createElement("span");
     nameElement.innerText = from;
     nameElement.style.color = color;
     liElement.appendChild(nameElement);
     if (allchat) {
       liElement.title = channel;
-            liElement.innerHTML += "<span class='channel-info-all-chat'> " + channel + "</span>";
+      liElement.innerHTML +=
+        "<span class='channel-info-all-chat'> " + channel + "</span>";
     }
     var in_text = document.createTextNode(message);
     liElement.appendChild(in_text);
@@ -114,30 +161,44 @@ var Chat = {
   allchat: function(inp, time_sent, disable_blink) {
     if (inp.msg.substring(0, 1) == ":" && !chat_active && !disable_blink) {
       Chat.all_received += 1;
-            document.querySelector("#favicon").getAttribute("href", "/assets/images/highlogo.png");
+      document
+        .querySelector("#favicon")
+        .getAttribute("href", "/assets/images/highlogo.png");
       unseen = true;
       chat_unseen = true;
-            Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
+      Helper.removeClass(
-            var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
+        document.querySelector(".chat-link span.badge.new.white"),
-            Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
+        "hide"
+      );
+      var to_display =
+        Chat.channel_received + Chat.all_received > 9
+          ? "9+"
+          : Chat.channel_received + Chat.all_received;
+      Helper.setHtml(
+        document.querySelector(".chat-link span.badge.new.white"),
+        to_display
+      );
     }
 
     if (document.hidden) {
-            document.getElementById("favicon").setAttribute("href", "/assets/images/highlogo.png");
+      document
+        .getElementById("favicon")
+        .setAttribute("href", "/assets/images/highlogo.png");
     }
 
     if (document.querySelector("#chatall").children.length > 100) {
-            document.querySelector("#chatall").children[0].remove()
+      document.querySelector("#chatall").children[0].remove();
     }
     var color = Helper.intToARGB(Helper.hashCode(inp.from));
-        if(color.length < 6) {
+    if (color.length < 6) {
       for (x = color.length; x < 6; x++) {
         color = "0" + color;
       }
     }
     var icon_add = "";
     if (inp.hasOwnProperty("icon") && inp.icon !== false && inp.icon != "") {
-            icon_add = "<img class='chat-icon' src='" + inp.icon + "' alt='" + inp.from + "'>";
+      icon_add =
+        "<img class='chat-icon' src='" + inp.icon + "' alt='" + inp.from + "'>";
     }
 
     color = Helper.hexToRgb(color.substring(0, 6));
@@ -146,40 +207,72 @@ var Chat = {
     if (time_sent) {
       _time = new Date(time_sent);
     }
-        var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
+    var time =
-        var element = Chat.createChatElement(true, Helper.decodeChannelName(inp.channel), time, icon_add, color_temp, inp.from, inp.msg);
+      Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
+    var element = Chat.createChatElement(
+      true,
+      Helper.decodeChannelName(inp.channel),
+      time,
+      icon_add,
+      color_temp,
+      inp.from,
+      inp.msg
+    );
     //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
     document.querySelector("#chatall").appendChild(element);
     if (!userscroll) {
       programscroll = true;
-            document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight;
+      document.getElementById("chatall").scrollTop = document.getElementById(
+        "chatall"
+      ).scrollHeight;
       programscroll = false;
     }
   },
 
   channelchat: function(data, time_sent, disable_blink) {
-        if(data.msg.substring(0,1) == ":" && !chat_active && !disable_blink && data.from.toLowerCase() != "system") {
+    if (
-            document.querySelector("#favicon").setAttribute("href", "/assets/images/highlogo.png");
+      data.msg.substring(0, 1) == ":" &&
+      !chat_active &&
+      !disable_blink &&
+      data.from.toLowerCase() != "system"
+    ) {
+      document
+        .querySelector("#favicon")
+        .setAttribute("href", "/assets/images/highlogo.png");
       unseen = true;
       chat_unseen = true;
       Chat.channel_received += 1;
       //blink_interval = setTimeout(Chat.chat_blink, 1000);
-            Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
+      Helper.removeClass(
-            var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
+        document.querySelector(".chat-link span.badge.new.white"),
-            Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
+        "hide"
+      );
+      var to_display =
+        Chat.channel_received + Chat.all_received > 9
+          ? "9+"
+          : Chat.channel_received + Chat.all_received;
+      Helper.setHtml(
+        document.querySelector(".chat-link span.badge.new.white"),
+        to_display
+      );
     }
 
     if (document.querySelector("#chatchannel").children.length > 100) {
-            document.querySelector("#chatchannel").children[0].remove()
+      document.querySelector("#chatchannel").children[0].remove();
     }
 
     var icon_add = "";
     if (data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") {
-            icon_add = "<img class='chat-icon' src='" + data.icon + "' alt='" + data.from + "'>";
+      icon_add =
+        "<img class='chat-icon' src='" +
+        data.icon +
+        "' alt='" +
+        data.from +
+        "'>";
     }
 
     var color = Helper.intToARGB(Helper.hashCode(data.from));
-        if(color.length < 6) {
+    if (color.length < 6) {
       for (x = color.length; x < 6; x++) {
         color = "0" + color;
       }
@@ -190,17 +283,28 @@ var Chat = {
     if (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());
     //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);
     //document.querySelector("#chatchannel").children[document.querySelector("#chatchannel").children.length - 1].appendChild(in_text);
-        var element = Chat.createChatElement(false, null, time, icon_add, color_temp, data.from, data.msg);
+    var element = Chat.createChatElement(
+      false,
+      null,
+      time,
+      icon_add,
+      color_temp,
+      data.from,
+      data.msg
+    );
     //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
     document.querySelector("#chatchannel").appendChild(element);
 
     if (!userscroll) {
       programscroll = true;
-            document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight;
+      document.getElementById(
+        "chatchannel"
+      ).scrollTop = document.getElementById("chatchannel").scrollHeight;
       programscroll = false;
     }
   }

server/public/assets/js/crypt.js

@@ -1,17 +1,25 @@
 var Crypt = {
-
   conf_pass: undefined,
   user_pass: undefined,
   tmp_pass_user: "",
   tmp_pass: "",
 
   init: function() {
-
     if (window.location.pathname != "/") {
       if (location.protocol != "https:") {
-                document.cookie = chan.toLowerCase() + '=;path=/' + chan.toLowerCase() + ';expires=' + new Date(0).toUTCString();
+        document.cookie =
+          chan.toLowerCase() +
+          "=;path=/" +
+          chan.toLowerCase() +
+          ";expires=" +
+          new Date(0).toUTCString();
       } else {
-                document.cookie = chan.toLowerCase() + '=;path=/' + chan.toLowerCase() + ';secure;expires=' + new Date(0).toUTCString();
+        document.cookie =
+          chan.toLowerCase() +
+          "=;path=/" +
+          chan.toLowerCase() +
+          ";secure;expires=" +
+          new Date(0).toUTCString();
       }
     }
 
@@ -26,10 +34,12 @@ var Crypt = {
       if (!conf_arr.hasOwnProperty("color")) {
         Crypt.set_background_color("dynamic", true);
       } else {
-                document.querySelector(".backround_switch_class").checked = conf_arr.color == "dynamic";
+        document.querySelector(".backround_switch_class").checked =
+          conf_arr.color == "dynamic";
         if (conf_arr.color != "dynamic") {
           Helper.removeClass(".background_color_container", "hide");
-                    document.querySelector("#background_color_choser").value = conf_arr.color;
+          document.querySelector("#background_color_choser").value =
+            conf_arr.color;
         }
       }
       Hostcontroller.change_enabled(conf_arr.remote);
@@ -43,10 +53,12 @@ var Crypt = {
       Helper.css("#main-container", "background-color", value);
       Helper.css("#nav", "background-color", value);
       Helper.css(".title-container", "background-color", value);
-            document.querySelector("meta[name=theme-color]").setAttribute("content", value);
+      document
+        .querySelector("meta[name=theme-color]")
+        .setAttribute("content", value);
       Helper.css("#controls", "background", value);
     } else if (!first) {
-            var url = 'https://img.youtube.com/vi/'+Player.np.id+'/mqdefault.jpg';
+      var url = "https://img.youtube.com/vi/" + Player.np.id + "/mqdefault.jpg";
       if (videoSource == "soundcloud") url = Player.np.thumbnail;
       getColor(url);
     }
@@ -61,7 +73,7 @@ var Crypt = {
   },
 
   get_intelligent_list_enabled: function() {
-        if(conf_arr.hasOwnProperty("intelligent")) {
+    if (conf_arr.hasOwnProperty("intelligent")) {
       return conf_arr.intelligent;
     } else {
       conf_arr.intelligent = false;
@@ -82,7 +94,14 @@ var Crypt = {
     if (Crypt.getCookie(name) === undefined) {
       cookie = Crypt.create_cookie(name);
     }
-        if(cookie == undefined && name == "_opt") return {"volume":100,"width":100,"remote":true,"name":"","offline":false};
+    if (cookie == undefined && name == "_opt")
+      return {
+        volume: 100,
+        width: 100,
+        remote: true,
+        name: "",
+        offline: false
+      };
     /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
         key = key.substring(0,32);
         key = btoa(key);
@@ -112,7 +131,8 @@ var Crypt = {
             );
             return decrypted.toString(CryptoJS.enc.Utf8);*/
       return atob(pass);
-        } return false;
+    }
+    return false;
   },
 
   encrypt: function(json_formated, cookie) {
@@ -132,9 +152,21 @@ var Crypt = {
     var CookieDate = new Date();
     CookieDate.setFullYear(CookieDate.getFullYear() + 1);
     if (location.protocol != "https:") {
-            document.cookie = cookie+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;";
+      document.cookie =
+        cookie +
+        "=" +
+        encrypted.toString() +
+        ";expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
     } else {
-            document.cookie = cookie+"="+encrypted.toString()+";secure;expires="+CookieDate.toGMTString()+";path=/;";
+      document.cookie =
+        cookie +
+        "=" +
+        encrypted.toString() +
+        ";secure;expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
     }
   },
 
@@ -159,7 +191,14 @@ var Crypt = {
   },
 
   create_cookie: function(name) {
-        if(name == "_opt") cookie_object = {volume: 100, width: 100, remote: true, name: "", offline: false};
+    if (name == "_opt")
+      cookie_object = {
+        volume: 100,
+        width: 100,
+        remote: true,
+        name: "",
+        offline: false
+      };
     else cookie_object = { passwords: {} };
 
     var string_it = JSON.stringify(cookie_object);
@@ -180,9 +219,21 @@ var Crypt = {
     CookieDate.setFullYear(CookieDate.getFullYear() + 1);
 
     if (location.protocol != "https:") {
-            document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;";
+      document.cookie =
+        name +
+        "=" +
+        encrypted.toString() +
+        ";expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
     } else {
-            document.cookie = name+"="+encrypted.toString()+";secure;expires="+CookieDate.toGMTString()+";path=/;";
+      document.cookie =
+        name +
+        "=" +
+        encrypted.toString() +
+        ";secure;expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
     }
     //document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
     //document.cookie = na"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
@@ -210,7 +261,7 @@ var Crypt = {
     },*/
 
   set_name: function(name, pass) {
-        conf_arr.name = encodeURIComponent(name).replace(/\W/g, '');
+    conf_arr.name = encodeURIComponent(name).replace(/\W/g, "");
     conf_arr.chat_pass = pass;
     Crypt.encrypt(conf_arr, "_opt");
   },
@@ -232,7 +283,8 @@ var Crypt = {
   },
 
   get_userpass: function(chan) {
-        if(Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords["userpass"];
+    if (Crypt.conf_pass !== undefined)
+      return Crypt.conf_pass.passwords["userpass"];
     return "";
   },
 
@@ -276,7 +328,8 @@ var Crypt = {
 
   makeiv: function() {
     var text = "";
-        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var possible =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
     for (var i = 0; i < 16; i++)
       text += possible.charAt(Math.floor(Math.random() * possible.length));
@@ -296,6 +349,10 @@ var Crypt = {
   getCookie: function(name) {
     var value = "; " + document.cookie;
     var parts = value.split("; " + name + "=");
-        if (parts.length == 2) return parts.pop().split(";").shift();
+    if (parts.length == 2)
+      return parts
+        .pop()
+        .split(";")
+        .shift();
   }
 };

server/public/assets/js/embed.js

@@ -15,7 +15,10 @@ try {
 var SC_widget;
 var scUsingWidget = false;
 var zoff_api_token = "DwpnKVkaMH2HdcpJT2YPy783SY33byF5/32rbs0+xdU=";
-if(window.location.hostname == "localhost" || window.location.hostname == "client.localhost") {
+if (
+  window.location.hostname == "localhost" ||
+  window.location.hostname == "client.localhost"
+) {
   var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
 }
 var SC_player;
@@ -70,9 +73,9 @@ var user_auth_started = false;
 var user_auth_avoid = false;
 
 var connection_options = {
-    'sync disconnect on unload':true,
+  "sync disconnect on unload": true,
-    'secure': true,
+  secure: true,
-    'force new connection': true
+  "force new connection": true
 };
 
 var Crypt = {
@@ -94,27 +97,32 @@ function receiveMessage(event) {
   } else if (event.data == "reset") {
     window.setVolume(100);
   } else if (event.data == "get_info") {
-        window.parentWindow.postMessage({type: "np", title: song_title}, window.parentOrigin);
+    window.parentWindow.postMessage(
-        window.parentWindow.postMessage({type: "controller", id: Hostcontroller.old_id}, window.parentOrigin);
+      { type: "np", title: song_title },
+      window.parentOrigin
+    );
+    window.parentWindow.postMessage(
+      { type: "controller", id: Hostcontroller.old_id },
+      window.parentOrigin
+    );
     try {
       if (full_playlist.length > 0) {
-                Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
+        Player.sendNext({
-            }
+          title: full_playlist[0].title,
-        } catch(e) {
+          videoId: full_playlist[0].id
-
+        });
       }
+    } catch (e) {}
   }
 }
 
 window.addEventListener("message", receiveMessage, false);
-window.addEventListener("DOMContentLoaded", function() {
+window.addEventListener("DOMContentLoaded", function() {});
-
-});
 
 var Channel = {
   set_title_width: function() {},
   window_width_volume_slider: function() {}
-}
+};
 
 function getSearch(elem) {
   var result = {};
@@ -150,22 +158,32 @@ window.addEventListener("load", function() {
   add = "https://zoff.me";
   //if(window.location.hostname == "localhost") add = "localhost";
   //add = "localhost";
-    socket = io.connect(''+add, connection_options);
+  socket = io.connect(
+    "" + add,
+    connection_options
+  );
 
   if (localmode) {
     change_offline(true, false);
   }
 
-    socket.on('auth_required', function() {
+  socket.on("auth_required", function() {
     M.Modal.getInstance(document.getElementById("locked_channel")).open();
   });
 
-    document.querySelector(".channel-info-container").href = "https://zoff.me/" + chan.toLowerCase();
+  document.querySelector(".channel-info-container").href =
+    "https://zoff.me/" + chan.toLowerCase();
   document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase();
 
   socket.on("get_list", function() {
     socket_connected = true;
-        setTimeout(function(){socket.emit('list', {version: VERSION, channel: chan.toLowerCase(), pass: ''});},1000);
+    setTimeout(function() {
+      socket.emit("list", {
+        version: VERSION,
+        channel: chan.toLowerCase(),
+        pass: ""
+      });
+    }, 1000);
   });
 
   socket.on("self_ping", function() {
@@ -177,8 +195,7 @@ window.addEventListener("load", function() {
   socket.on("viewers", function(view) {
     viewers = view;
 
-        if(song_title !== undefined)
+    if (song_title !== undefined) Player.getTitle(song_title, viewers);
-        Player.getTitle(song_title, viewers);
   });
 
   Player.loadPlayer();
@@ -196,7 +213,9 @@ window.addEventListener("load", function() {
   socket.on("toast", toast);
 
   Playercontrols.initSlider();
-    document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause);
+  document
+    .getElementById("playpause")
+    .addEventListener("click", Playercontrols.play_pause);
   window.setVolume = setVolume;
   //Helper.css("#controls", "background-color", color);
 
@@ -212,7 +231,7 @@ window.addEventListener("resize", function(){
   resizeFunction();
 });
 
-function resizePlaylistPlaying(){};
+function resizePlaylistPlaying() {}
 
 function startWaitTimerPlay() {
   setTimeout(function() {
@@ -294,10 +313,27 @@ function toast(msg) {
       if (embed) return;
       break;
     case "voted":
-        msg=Helper.rnd(["You voted!", "You vote like a boss", "Voting is the key to democracy", "May you get your song to the very top!", "I love that song! I vouch for you.", "Only you vote that good", "I like the way you vote...", "Up the video goes!", "Voted Zoff for president", "Only 999 more to go!"]);
+      msg = Helper.rnd([
+        "You voted!",
+        "You vote like a boss",
+        "Voting is the key to democracy",
+        "May you get your song to the very top!",
+        "I love that song! I vouch for you.",
+        "Only you vote that good",
+        "I like the way you vote...",
+        "Up the video goes!",
+        "Voted Zoff for president",
+        "Only 999 more to go!"
+      ]);
       break;
     case "alreadyvoted":
-        msg=Helper.rnd(["You can't vote twice on that song!", "I see you have voted on that song before", "One vote per person!", "I know you want to hear your song, but have patience!", "I'm sorry, but I can't let you vote twice, Dave."]);
+      msg = Helper.rnd([
+        "You can't vote twice on that song!",
+        "I see you have voted on that song before",
+        "One vote per person!",
+        "I know you want to hear your song, but have patience!",
+        "I'm sorry, but I can't let you vote twice, Dave."
+      ]);
       break;
     case "skip":
       if (embed) return;
@@ -347,10 +383,16 @@ function emit() {
 
 function change_offline(enabled, already_offline) {
   offline = enabled;
-    socket.emit("offline", {status: enabled, channel: chan != undefined ? chan.toLowerCase() : ""});
+  socket.emit("offline", {
+    status: enabled,
+    channel: chan != undefined ? chan.toLowerCase() : ""
+  });
   if (!Helper.mobilecheck()) {
-        if(document.querySelectorAll("#offline-mode").length == 1 && M.Tooltip.getInstance(document.getElementById("offline-mode"))) {
+    if (
-            Helper.tooltip("#offline-mode", 'destroy');
+      document.querySelectorAll("#offline-mode").length == 1 &&
+      M.Tooltip.getInstance(document.getElementById("offline-mode"))
+    ) {
+      Helper.tooltip("#offline-mode", "destroy");
     }
   }
 
@@ -365,7 +407,7 @@ function change_offline(enabled, already_offline){
 
   var mouseDown = function(e) {
     var acceptable = ["bar", "controls", "duration"];
-        if(acceptable.indexOf(e.target.id) >= 0) {
+    if (acceptable.indexOf(e.target.id) >= 0) {
       dragging = true;
     }
   };
@@ -380,19 +422,40 @@ function change_offline(enabled, already_offline){
     Helper.removeClass(".prev playbar", "hide");
 
     if (window.location.pathname != "/") {
-            document.getElementById("controls").addEventListener("mouseenter", mouseEnter, false);
+      document
-            document.getElementById("controls").addEventListener("mouseleave", mouseLeave, false);
+        .getElementById("controls")
-            document.getElementById("controls").addEventListener("mousedown", mouseDown, false);
+        .addEventListener("mouseenter", mouseEnter, false);
-            document.getElementById("controls").addEventListener("mouseup", mouseUp, false);
+      document
-            document.getElementById("controls").addEventListener("mousemove", seekToMove);
+        .getElementById("controls")
-            document.getElementById("controls").addEventListener("click", seekToClick);
+        .addEventListener("mouseleave", mouseLeave, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mousedown", mouseDown, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mouseup", mouseUp, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mousemove", seekToMove);
+      document
+        .getElementById("controls")
+        .addEventListener("click", seekToClick);
 
-            document.querySelector("#main_components").insertAdjacentHTML("beforeend", "<div id='seekToDuration' class='hide'>00:00/01:00</div>");
+      document
+        .querySelector("#main_components")
+        .insertAdjacentHTML(
+          "beforeend",
+          "<div id='seekToDuration' class='hide'>00:00/01:00</div>"
+        );
       var controlElement = document.querySelector("#controls");
       Helper.css("#seekToDuration", "bottom", "50px");
       Helper.addClass("#controls", "ewresize");
     }
-        if(full_playlist != undefined && !already_offline && full_playlist.length > 0){
+    if (
+      full_playlist != undefined &&
+      !already_offline &&
+      full_playlist.length > 0
+    ) {
       for (var x = 0; x < full_playlist.length; x++) {
         full_playlist[x].votes = 0;
       }
@@ -413,14 +476,18 @@ M.Toast.dismissAll();
   //Materialize.Toast.removeAll();
 }
 
-document.addEventListener("click", function(e) {
+document.addEventListener(
+  "click",
+  function(e) {
     handleEvent(e, e.target, false, "click");
-}, false);
+  },
+  false
+);
 
 addListener("click", ".channel-info-container", function(e) {
   this.preventDefault();
   Player.pauseVideo();
-    window.open("https://zoff.me/" + chan.toLowerCase() + "/", '_blank');
+  window.open("https://zoff.me/" + chan.toLowerCase() + "/", "_blank");
 });
 
 addListener("click", ".vote-container", function(e) {

server/public/assets/js/helpers.js

@@ -16,11 +16,13 @@ var Helper = {
     return toReturn.toLowerCase();
   },
 
-    encodeChannelName: function(str) {
+  encodeChannelName: function(str) {
     var _fn = encodeURIComponent;
     var toReturn = _fn(str);
     toReturn = toReturn.replace(/_/g, "%5F");
-        toReturn = toReturn.replace(/%26amp%3B/g, "%26").replace(/%26amp%3b/g, "%26");
+    toReturn = toReturn
+      .replace(/%26amp%3B/g, "%26")
+      .replace(/%26amp%3b/g, "%26");
     toReturn = toReturn.replace(/'/g, "%27");
     toReturn = toReturn.toLowerCase();
     return toReturn;
@@ -34,11 +36,15 @@ var Helper = {
       _DEBUG = false;
     }
     if (_DEBUG === "true") {
-            console.log("------------ " + new Date() + " ------------");/*RemoveLogging:skip*/
+      console.log(
+        "------------ " + new Date() + " ------------"
+      ); /*RemoveLogging:skip*/
       for (var i = 0; i < to_log.length; i++) {
         console.log(to_log[i]); /*RemoveLogging:skip*/
       }
-            console.log("------------ " + new Date() + " ------------");/*RemoveLogging:skip*/
+      console.log(
+        "------------ " + new Date() + " ------------"
+      ); /*RemoveLogging:skip*/
     }
     try {
       if (to_log[0] != "FULL PLAYLIST") {
@@ -56,7 +62,12 @@ var Helper = {
 
   computedStyle: function(element, type) {
     try {
-            return parseInt(window.getComputedStyle(document.querySelector(element), null).getPropertyValue(type).replace("px", ""))
+      return parseInt(
+        window
+          .getComputedStyle(document.querySelector(element), null)
+          .getPropertyValue(type)
+          .replace("px", "")
+      );
     } catch (e) {
       return 0;
     }
@@ -64,7 +75,7 @@ var Helper = {
 
   toggleClass: function(element, className) {
     try {
-            if(typeof(element) == "object") {
+      if (typeof element == "object") {
         if (element.className.indexOf(className) == -1) {
           Helper.addClass(element, className);
         } else {
@@ -111,7 +122,7 @@ var Helper = {
 
   css: function(element, attribute, value) {
     try {
-            if(typeof(element) == "object") {
+      if (typeof element == "object") {
         try {
           if (element.length > 0) {
             for (var i = 0; i < element.length; i++) {
@@ -124,7 +135,7 @@ var Helper = {
           element.style[attribute] = value;
         }
       }
-            if(typeof(element) == "object") {
+      if (typeof element == "object") {
         element.style[attribute] = value;
       } else if (element.substring(0, 1) == "#") {
         document.getElementById(element.substring(1)).style[attribute] = value;
@@ -156,10 +167,12 @@ var Helper = {
 
   removeClass: function(element, className) {
     try {
-            if(typeof(element) == "object") {
+      if (typeof element == "object") {
         element.classList.remove(className);
       } else if (element.substring(0, 1) == "#") {
-                document.getElementById(element.substring(1)).classList.remove(className);
+        document
+          .getElementById(element.substring(1))
+          .classList.remove(className);
       } else {
         var elements = document.getElementsByClassName(element.substring(1));
         for (var i = 0; i < elements.length; i++) {
@@ -206,7 +219,7 @@ var Helper = {
 
   setHtml: function(element, html) {
     try {
-            if(typeof(element) == "object") {
+      if (typeof element == "object") {
         element.innerHTML = html;
       } else if (element.substring(0, 1) == "#") {
         var elem = document.getElementById(element.substring(1));
@@ -304,7 +317,7 @@ var Helper = {
 
   addClass: function(element, className) {
     try {
-            if(typeof(element) == "object") {
+      if (typeof element == "object") {
         try {
           if (element.length > 0) {
             for (var i = 0; i < element.length; i++) {
@@ -350,11 +363,15 @@ var Helper = {
     if (obj.method == undefined) obj.method = "GET";
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
-            if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
+      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
-                if (xmlhttp.status == 200 || xmlhttp.status == 201 || xmlhttp.status == 202) {
+        // XMLHttpRequest.DONE == 4
+        if (
+          xmlhttp.status == 200 ||
+          xmlhttp.status == 201 ||
+          xmlhttp.status == 202
+        ) {
           obj.success(xmlhttp.responseText, xmlhttp);
-                }
+        } else if (obj.hasOwnProperty("error")) {
-                else if(obj.hasOwnProperty("error")){
           obj.error(xmlhttp);
         }
       }
@@ -367,16 +384,16 @@ var Helper = {
       }
     }
     if (obj.data) {
-            if(typeof(obj.data) == "object") obj.data = JSON.stringify(obj.data);
+      if (typeof obj.data == "object") obj.data = JSON.stringify(obj.data);
       //xmlhttp.send(sendRequest);
       xmlhttp.send(obj.data);
-        }
+    } else xmlhttp.send();
-        else xmlhttp.send();
   },
 
   randomString: function(length) {
     var text = "";
-        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
+    var possible =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_";
     for (var i = 0; i < length; i++) {
       text += possible.charAt(Math.floor(Math.random() * possible.length));
     }
@@ -386,15 +403,24 @@ var Helper = {
   mobilecheck: function() {
     var isMobile = false; //initiate as false
     // device detection
-        if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
+    if (
-        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
+        navigator.userAgent
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        navigator.userAgent.substr(0, 4)
+      )
+    )
+      isMobile = true;
     return isMobile;
   },
 
   predicate: function() {
     var fields = [],
       n_fields = arguments.length,
-        field, name, cmp;
+      field,
+      name,
+      cmp;
 
     var default_cmp = function(a, b) {
         if (a == undefined) a = 0;
@@ -422,7 +448,7 @@ var Helper = {
     // preprocess sorting options
     for (var i = 0; i < n_fields; i++) {
       field = arguments[i];
-            if (typeof field === 'string') {
+      if (typeof field === "string") {
         name = field;
         cmp = default_cmp;
       } else {
@@ -450,7 +476,8 @@ var Helper = {
     };
   },
 
-    hashCode: function(str) { // java String#hashCode
+  hashCode: function(str) {
+    // java String#hashCode
     var hash = 0;
     for (var i = 0; i < str.length; i++) {
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -459,19 +486,23 @@ var Helper = {
   },
 
   intToARGB: function(i) {
-        return ((i>>24)&0xFF).toString(16) +
+    return (
-        ((i>>16)&0xFF).toString(16) +
+      ((i >> 24) & 0xff).toString(16) +
-        ((i>>8)&0xFF).toString(16) +
+      ((i >> 16) & 0xff).toString(16) +
-        (i&0xFF).toString(16);
+      ((i >> 8) & 0xff).toString(16) +
+      (i & 0xff).toString(16)
+    );
   },
 
   hexToRgb: function(hex) {
     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? {
+    return result
+      ? {
           r: parseInt(result[1], 16),
           g: parseInt(result[2], 16),
           b: parseInt(result[3], 16)
-        } : null;
+        }
+      : null;
   },
 
   hslToHex: function(h, s, l) {
@@ -498,9 +529,9 @@ var Helper = {
     }
     var toHex = function(x) {
       var hex = Math.round(x * 255).toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
+      return hex.length === 1 ? "0" + hex : hex;
     };
-        return '#' + toHex(r) + "" + toHex(g) + "" + toHex(b);
+    return "#" + toHex(r) + "" + toHex(g) + "" + toHex(b);
   },
 
   hslToRgb: function(h, s, l) {
@@ -529,12 +560,10 @@ var Helper = {
     return [r * 255, g * 255, b * 255];
   },
 
-
   pad: function(n) {
     return n < 10 ? "0" + Math.floor(n) : Math.floor(n);
   },
 
-
   contains: function(a, obj) {
     var i = a.length;
     while (i--) {
@@ -560,10 +589,11 @@ var Helper = {
     var ua = window.navigator.userAgent;
     var msie = ua.indexOf("MSIE ");
 
-        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
+    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
+      // If Internet Explorer, return version number
       return true;
-        else                 // If another browser, return 0
+    // If another browser, return 0
-        return false;
+    else return false;
   },
 
   getRandomInt: function(min, max) {
@@ -573,7 +603,7 @@ var Helper = {
   secondsToOther: function(seconds) {
     var time = seconds;
     var minutes = Math.floor(time / 60);
-        time = time - (minutes * 60);
+    time = time - minutes * 60;
     return [minutes, time];
   },
 
@@ -584,8 +614,11 @@ var Helper = {
     r /= 255;
     g /= 255;
     b /= 255;
-        var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var max = Math.max(r, g, b),
-        var h, s, l = (max + min) / 2;
+      min = Math.min(r, g, b);
+    var h,
+      s,
+      l = (max + min) / 2;
 
     if (max == min) {
       h = s = 0; // achromatic
@@ -593,16 +626,31 @@ var Helper = {
       var d = max - min;
       s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
       switch (max) {
-                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+        case r:
-                case g: h = (b - r) / d + 2; break;
+          h = (g - b) / d + (g < b ? 6 : 0);
-                case b: h = (r - g) / d + 4; break;
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
       }
       h /= 6;
     }
-        if(l>0.5 && light)l=0.4; //make sure it isnt too light
+    if (l > 0.5 && light) l = 0.4;
+    //make sure it isnt too light
     else if (l < 0.65 && !light) l = 0.65;
     if (s > 0.3 && light) s = 0.3;
-        return "hsl("+Math.floor(h*360)+", "+Math.floor(s*100)+"%, "+Math.floor(l*100)+"%)";
+    return (
+      "hsl(" +
+      Math.floor(h * 360) +
+      ", " +
+      Math.floor(s * 100) +
+      "%, " +
+      Math.floor(l * 100) +
+      "%)"
+    );
   },
 
   componentToHex: function(c) {
@@ -611,20 +659,30 @@ var Helper = {
   },
 
   rgbToHex: function(r, g, b) {
-        return "#" + Helper.componentToHex(r) + Helper.componentToHex(g) + Helper.componentToHex(b);
+    return (
+      "#" +
+      Helper.componentToHex(r) +
+      Helper.componentToHex(g) +
+      Helper.componentToHex(b)
+    );
   },
 
   upperFirst: function(string) {
-        return string.substring(0,1).toUpperCase()+string.substring(1).toLowerCase();
+    return (
+      string.substring(0, 1).toUpperCase() + string.substring(1).toLowerCase()
+    );
   },
 
   send_mail: function(from, message) {
     if (from !== "" && message !== "") {
-
       Helper.addClass("#submit-contact-form", "hide");
       Helper.removeClass("#send-loader", "hide");
-            document.getElementById("contact-form-from").setAttribute("disabled", true);
+      document
-            document.getElementById("contact-form-message").setAttribute("disabled", true);
+        .getElementById("contact-form-from")
+        .setAttribute("disabled", true);
+      document
+        .getElementById("contact-form-message")
+        .setAttribute("disabled", true);
       var captcha_response = grecaptcha.getResponse();
       Helper.ajax({
         type: "POST",
@@ -634,24 +692,37 @@ var Helper = {
         data: {
           from: from,
           message: message,
-                    "g-recaptcha-response": captcha_response,
+          "g-recaptcha-response": captcha_response
         },
         url: "/api/mail",
         success: function(data) {
           if (data == "success") {
             Helper.setHtml("#contact-container", "");
-                        Helper.setHtml("#contact-container", "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 {
             Helper.setHtml("#contact-container", "");
-                        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>")
+            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>"
+            );
           }
-                }, error: function(data) {
+        },
+        error: function(data) {
           if (data == "success") {
             Helper.setHtml("#contact-container", "");
-                        Helper.setHtml("#contact-container", "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 {
             Helper.setHtml("#contact-container", "");
-                        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>")
+            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>"
+            );
           }
         }
       });
@@ -665,7 +736,8 @@ var Helper = {
   initAdjustment: 0,
 
   touchstart: function(event) {
-        Helper.lastY = Helper.currentY = Helper.firstY = event.originalEvent.touches[0].pageY;
+    Helper.lastY = Helper.currentY = Helper.firstY =
+      event.originalEvent.touches[0].pageY;
   },
 
   touchmove: function(event) {
@@ -684,7 +756,6 @@ var Helper = {
       window.scrollBy(0, adjustment + Helper.initAdjustment);
       Helper.lastY = Helper.currentY + adjustment;
     }
-
   },
 
   touchend: function(event) {
@@ -697,7 +768,7 @@ var Helper = {
   },
 
   invertColor: function(hex) {
-        if (hex.indexOf('#') === 0) {
+    if (hex.indexOf("#") === 0) {
       hex = hex.slice(1);
     }
     // convert 3-digit hex to 6-digits.
@@ -705,19 +776,19 @@ var Helper = {
       hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
     }
     if (hex.length !== 6) {
-            throw new Error('Invalid HEX color.');
+      throw new Error("Invalid HEX color.");
     }
     // invert color components
     var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
       g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
       b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
     // pad each with zeros and return
-        return '#' + padZero(r) + padZero(g) + padZero(b);
+    return "#" + padZero(r) + padZero(g) + padZero(b);
   },
 
   padZero: function(str, len) {
     len = len || 2;
-        var zeros = new Array(len).join('0');
+    var zeros = new Array(len).join("0");
     return (zeros + str).slice(-len);
   },
 
@@ -784,7 +855,13 @@ var Helper = {
     str = str.replace("original mix", " ");
     str = str.replace("radio edit", " ");
     str = str.replace("pop version", " ");
-        str = str.replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ");
+    str = str
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ");
     str = str.replace("(", " ");
     str = str.replace(")", " ");
     str = str.replace("[", " ");
@@ -802,21 +879,46 @@ var Helper = {
     str = str.replace("ft.", " ");
     str = str.replace("radio edit", " ");
     str = str.replace("pop version", " ");
-        str = str.replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ");
+    str = str
-        str = str.replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ").replace("  ", " ");
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ");
+    str = str
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ")
+      .replace("  ", " ");
     return str;
   },
 
   hexToComplimentary: function(hex) {
-
     // Convert hex to rgb
     // Credit to Denis http://stackoverflow.com/a/36253499/4939630
-        var rgb = 'rgb(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16); }).join(',') + ')';
+    var rgb =
+      "rgb(" +
+      (hex = hex.replace("#", ""))
+        .match(new RegExp("(.{" + hex.length / 3 + "})", "g"))
+        .map(function(l) {
+          return parseInt(hex.length % 2 ? l + l : l, 16);
+        })
+        .join(",") +
+      ")";
 
     // Get array of RGB values
-        rgb = rgb.replace(/[^\d,]/g, '').split(',');
+    rgb = rgb.replace(/[^\d,]/g, "").split(",");
 
-        var r = rgb[0], g = rgb[1], b = rgb[2];
+    var r = rgb[0],
+      g = rgb[1],
+      b = rgb[2];
 
     // Convert RGB to HSL
     // Adapted from answer by 0x000f http://stackoverflow.com/a/34946092/4939630
@@ -825,30 +927,34 @@ var Helper = {
     b /= 255.0;
     var max = Math.max(r, g, b);
     var min = Math.min(r, g, b);
-        var h, s, l = (max + min) / 2.0;
+    var h,
+      s,
+      l = (max + min) / 2.0;
 
     if (max == min) {
       h = s = 0; //achromatic
     } else {
       var d = max - min;
-            s = (l > 0.5 ? d / (2.0 - max - min) : d / (max + min));
+      s = l > 0.5 ? d / (2.0 - max - min) : d / (max + min);
 
       if (max == r && g >= b) {
-                h = 1.0472 * (g - b) / d ;
+        h = (1.0472 * (g - b)) / d;
       } else if (max == r && g < b) {
-                h = 1.0472 * (g - b) / d + 6.2832;
+        h = (1.0472 * (g - b)) / d + 6.2832;
       } else if (max == g) {
-                h = 1.0472 * (b - r) / d + 2.0944;
+        h = (1.0472 * (b - r)) / d + 2.0944;
       } else if (max == b) {
-                h = 1.0472 * (r - g) / d + 4.1888;
+        h = (1.0472 * (r - g)) / d + 4.1888;
       }
     }
 
-        h = h / 6.2832 * 360.0 + 0;
+    h = (h / 6.2832) * 360.0 + 0;
 
     // Shift hue to opposite side of wheel and convert to [0-1] value
     h += 180;
-        if (h > 360) { h -= 360; }
+    if (h > 360) {
+      h -= 360;
+    }
     h /= 360;
 
     // Convert h s and l values into r g and b values
@@ -880,8 +986,7 @@ var Helper = {
     // Convert r b and g values to hex
     rgb = b | (g << 8) | (r << 16);
     return "#" + (0x1000000 | rgb).toString(16).substring(1);
-    },
+  }
-
 };
 
 Element.prototype.remove = function() {
@@ -912,7 +1017,9 @@ function similarity(s1, s2) {
   if (longerLength == 0) {
     return 1.0;
   }
-    return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);
+  return (
+    (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength)
+  );
 }
 
 function editDistance(s1, s2) {
@@ -923,21 +1030,18 @@ function editDistance(s1, s2) {
   for (var i = 0; i <= s1.length; i++) {
     var lastValue = i;
     for (var j = 0; j <= s2.length; j++) {
-            if (i == 0)
+      if (i == 0) costs[j] = j;
-            costs[j] = j;
       else {
         if (j > 0) {
           var newValue = costs[j - 1];
           if (s1.charAt(i - 1) != s2.charAt(j - 1))
-                    newValue = Math.min(Math.min(newValue, lastValue),
+            newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
-                    costs[j]) + 1;
           costs[j - 1] = lastValue;
           lastValue = newValue;
         }
       }
     }
-        if (i > 0)
+    if (i > 0) costs[s2.length] = lastValue;
-        costs[s2.length] = lastValue;
   }
   return costs[s2.length];
 }

server/public/assets/js/hostcontroller.js

@@ -1,30 +1,40 @@
 var Hostcontroller = {
-
   enabled: true,
 
   old_id: null,
 
   host_listener: function(id) {
     if (client) return;
-        Helper.log([
+    Helper.log(["Host-listener triggered", "Host-listener id:" + id]);
-            "Host-listener triggered",
-            "Host-listener id:" + id
-        ]);
     if (Hostcontroller.old_id === null) Hostcontroller.old_id = id;
     else {
       socket.removeAllListeners(id);
       began = false;
       Hostcontroller.old_id = id;
     }
-        var codeURL = window.location.protocol + "//remote."+window.location.hostname+"/"+id;
+    var codeURL =
+      window.location.protocol +
+      "//remote." +
+      window.location.hostname +
+      "/" +
+      id;
     if (embed) {
       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) {
       if (window.location.pathname == "/") return;
       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-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);
     }
     if (!began) {
@@ -54,15 +64,39 @@ var Hostcontroller = {
 
         chan = arr.value.toLowerCase();
         Helper.setHtml("#chan", Helper.upperFirst(chan));
-                var shareCodeUrl = window.location.protocol + "//client."+window.location.hostname+"/r/"+btoa(encodeURIComponent(chan.toLowerCase()));
+        var 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);
+          window.location.protocol +
-                Helper.setHtml("#channel-name-join", "client." + window.location.hostname + "/" + encodeURIComponent(chan.toLowerCase()));
+          "//client." +
+          window.location.hostname +
+          "/r/" +
+          btoa(encodeURIComponent(chan.toLowerCase()));
+        document
+          .getElementById("share-join-qr")
+          .setAttribute(
+            "src",
+            "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl=" +
+              shareCodeUrl
+          );
+        Helper.setHtml(
+          "#channel-name-join",
+          "client." +
+            window.location.hostname +
+            "/" +
+            encodeURIComponent(chan.toLowerCase())
+        );
         w_p = true;
         var add = "";
         //if(private_channel) add = Crypt.getCookie("_uI") + "_";
-                socket.emit("list", {version: parseInt(_VERSION), channel: add + chan.toLowerCase()});
+        socket.emit("list", {
+          version: parseInt(_VERSION),
+          channel: add + chan.toLowerCase()
+        });
 
-                window.history.pushState("object or string", "Title", "/"+chan.toLowerCase());
+        window.history.pushState(
+          "object or string",
+          "Title",
+          "/" + chan.toLowerCase()
+        );
       } else if (arr.type == "pause") {
         Player.pauseVideo();
       } else if (arr.type == "play") {
@@ -77,7 +111,8 @@ var Hostcontroller = {
     if (client) return;
     Hostcontroller.enabled = val;
     try {
-            document.querySelector(".remote_switch_class").checked = Hostcontroller.enabled;
+      document.querySelector(".remote_switch_class").checked =
+        Hostcontroller.enabled;
     } catch (e) {}
   }
 };

server/public/assets/js/mobileremote.js

@@ -12,18 +12,32 @@ var Mobile_remote = {
   set_id: function(id) {
     Mobile_remote.id = id;
     document.getElementById("pausebutton_remote").removeAttribute("disabled");
-		document.getElementById("skipbutton_remote").removeAttribute("disabled", false);
+    document
-		document.getElementById("playbutton_remote").removeAttribute("disabled", false);
+      .getElementById("skipbutton_remote")
-		document.getElementById("skipbutton_remote").removeAttribute("disabled", false);
+      .removeAttribute("disabled", false);
+    document
+      .getElementById("playbutton_remote")
+      .removeAttribute("disabled", false);
+    document
+      .getElementById("skipbutton_remote")
+      .removeAttribute("disabled", false);
     document.getElementById("remote_channel").value = "";
-		document.getElementById("remote_channel").setAttribute("placeholder", "Change channel");
+    document
+      .getElementById("remote_channel")
+      .setAttribute("placeholder", "Change channel");
     document.getElementById("remote_header").innerText = "Controlling " + id;
     Helper.css("#volume-control-remote", "display", "inline-block");
-		document.querySelector(".slider-vol-mobile").setAttribute("style", "display: inline-block !important");
+    document
+      .querySelector(".slider-vol-mobile")
+      .setAttribute("style", "display: inline-block !important");
   },
 
   set_channel: function(channel_name) {
-		socket.emit("id", {id: Mobile_remote.id, type: "channel", value: channel_name});
+    socket.emit("id", {
+      id: Mobile_remote.id,
+      type: "channel",
+      value: channel_name
+    });
   },
 
   play_remote: function() {
@@ -40,21 +54,36 @@ var Mobile_remote = {
 
   initiate_volume: function() {
     var vol = 100;
-        document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "<div class='volume-slid-remote'></div>");
+    document
-        document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "<div class='volume-handle-remote'></div>");
+      .getElementById("volume-control-remote")
+      .insertAdjacentHTML(
+        "beforeend",
+        "<div class='volume-slid-remote'></div>"
+      );
+    document
+      .getElementById("volume-control-remote")
+      .insertAdjacentHTML(
+        "beforeend",
+        "<div class='volume-handle-remote'></div>"
+      );
     Helper.css(".volume-slid-remote", "width", vol + "%");
     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();
         Playercontrols.dragMouseDown(e);
-        }, false);
+      },
+      false
+    );
 
-        document.getElementById("volume-control-remote").addEventListener("touchmove", function(e) {
+    document.getElementById("volume-control-remote").addEventListener(
+      "touchmove",
+      function(e) {
         e.preventDefault();
         Playercontrols.elementDrag(e);
-        }, false);
+      },
-
+      false
-
+    );
   }
-
 };

server/public/assets/js/playercontrols.js

@@ -1,25 +1,31 @@
 var Playercontrols = {
-
   stopInterval: false,
 
-
   initYoutubeControls: function() {
     Playercontrols.initControls();
   },
 
   initControls: function() {
-        document.getElementById("volume-button").addEventListener("click", Playercontrols.mute_video);
+    document
-        document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause);
+      .getElementById("volume-button")
-        document.getElementById("volume-button-overlay").addEventListener("click", Playercontrols.mute_video);
+      .addEventListener("click", Playercontrols.mute_video);
-        document.getElementById("playpause-overlay").addEventListener("click", Playercontrols.play_pause);
+    document
-        document.getElementById("fullscreen").addEventListener("click", Playercontrols.fullscreen);
+      .getElementById("playpause")
+      .addEventListener("click", Playercontrols.play_pause);
+    document
+      .getElementById("volume-button-overlay")
+      .addEventListener("click", Playercontrols.mute_video);
+    document
+      .getElementById("playpause-overlay")
+      .addEventListener("click", Playercontrols.play_pause);
+    document
+      .getElementById("fullscreen")
+      .addEventListener("click", Playercontrols.fullscreen);
   },
 
   initSlider: function() {
     try {
-
+      vol = Crypt.get_volume();
-            vol = (Crypt.get_volume());
-
     } catch (e) {
       vol = 100;
     }
@@ -30,12 +36,24 @@ var Playercontrols = {
     } catch (e) {}
     if ((Helper.mobilecheck() || slider_type == "vertical") && !embed) {
       //slider_values.orientation = "vertical";
-            if(!document.querySelector(".volume-container").classList.contains("hide")) {
+      if (
+        !document.querySelector(".volume-container").classList.contains("hide")
+      ) {
         Helper.toggleClass(".volume-container", "hide");
       }
     }
-        document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-slid " + slider_type + "'></div>");
+    document
-        document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-handle " + slider_type + "'></div>");
+      .getElementById("volume")
+      .insertAdjacentHTML(
+        "beforeend",
+        "<div class='volume-slid " + slider_type + "'></div>"
+      );
+    document
+      .getElementById("volume")
+      .insertAdjacentHTML(
+        "beforeend",
+        "<div class='volume-handle " + slider_type + "'></div>"
+      );
     if (slider_type != "vertical") {
       Helper.removeClass("#volume", "vertical");
       Helper.css(".volume-slid", "width", vol + "%");
@@ -44,7 +62,6 @@ var Playercontrols = {
       Helper.addClass("#volume", "vertical");
       Helper.css(".volume-slid", "height", vol + "%");
       Helper.css(".volume-handle", "bottom", "calc(" + vol + "% - 1px)");
-
     }
     Playercontrols.choose_button(vol, false);
     //document.getElementsByClassName("volume-handle")[0].onmousedown = Playercontrols.dragMouseDown;
@@ -52,18 +69,21 @@ var Playercontrols = {
     //document.getElementsByClassName("volume-slid")[0].onmousedown = Playercontrols.dragMouseDown;
     document.getElementById("volume").onmousedown = function(e) {
       Playercontrols.dragMouseDown(e, "player");
-        }
+    };
     if (!Helper.mobilecheck()) {
       document.getElementById("volume").onclick = function(e) {
         Playercontrols.elementDrag(e, "player");
         Playercontrols.closeDragElement("player");
+      };
     }
-        }
+    document.getElementById("volume").addEventListener(
-        document.getElementById("volume").addEventListener("touchstart", function(e) {
+      "touchstart",
+      function(e) {
         e.preventDefault();
         Playercontrols.dragMouseDown(e, "player");
-        }, false);
+      },
-
+      false
+    );
   },
 
   dragMouseDown: function(e, element) {
@@ -71,18 +91,26 @@ var Playercontrols = {
     // get the mouse cursor position at startup:
     document.onmouseup = function() {
       Playercontrols.closeDragElement(element);
-        }
+    };
-        document.getElementById("volume").addEventListener("touchend", function() {
+    document.getElementById("volume").addEventListener(
+      "touchend",
+      function() {
         Playercontrols.closeDragElement(element);
-        }, false);
+      },
+      false
+    );
     // call a function whenever the cursor moves:
     document.onmousemove = function(e) {
       Playercontrols.elementDrag(e, element);
-        }
+    };
-        document.getElementById("volume").addEventListener("touchmove", function(e) {
+    document.getElementById("volume").addEventListener(
+      "touchmove",
+      function(e) {
         e.preventDefault();
         Playercontrols.elementDrag(e, element);
-        }, false);
+      },
+      false
+    );
   },
 
   elementDrag: function(e, element) {
@@ -126,7 +154,12 @@ var Playercontrols = {
       }
       slid_elmnt.style.width = volume * 100 + "%";
       if (element == "player") Playercontrols.setVolume(volume * 100);
-            else socket.emit("id", {id: Mobile_remote.id, type: "volume", value: volume * 100});
+      else
+        socket.emit("id", {
+          id: Mobile_remote.id,
+          type: "volume",
+          value: volume * 100
+        });
     } else {
       var pos = pos4 - cmp_elmnt.offsetTop;
       var pos0 = window.innerHeight - pos - 14;
@@ -140,10 +173,10 @@ var Playercontrols = {
       }
       slid_elmnt.style.height = volume * 100 + "%";
       Playercontrols.setVolume(volume * 100);
-
-        }
-        try{Crypt.set_volume(volume * 100);}catch(e){
     }
+    try {
+      Crypt.set_volume(volume * 100);
+    } catch (e) {}
   },
 
   closeDragElement: function(element) {
@@ -162,21 +195,37 @@ var Playercontrols = {
     document.onmouseup = null;
     document.onmousemove = null;
     if (element == "player") {
-            document.getElementById("volume").removeEventListener("touchmove", function(e) {
+      document.getElementById("volume").removeEventListener(
+        "touchmove",
+        function(e) {
           e.preventDefault();
           Playercontrols.elementDrag(e, element);
-            }, false);
+        },
-            document.getElementById("volume").removeEventListener("touchend", function() {
+        false
+      );
+      document.getElementById("volume").removeEventListener(
+        "touchend",
+        function() {
           Playercontrols.closeDragElement(element);
-            }, false);
+        },
+        false
+      );
     } else {
-            document.getElementById("volume-control-remote").removeEventListener("touchmove", function(e) {
+      document.getElementById("volume-control-remote").removeEventListener(
+        "touchmove",
+        function(e) {
           e.preventDefault();
           Playercontrols.elementDrag(e);
-            }, false);
+        },
-            document.getElementById("volume-control-remote").removeEventListener("touchend", function() {
+        false
+      );
+      document.getElementById("volume-control-remote").removeEventListener(
+        "touchend",
+        function() {
           Playercontrols.closeDragElement();
-            }, false);
+        },
+        false
+      );
     }
   },
 
@@ -188,7 +237,10 @@ var Playercontrols = {
       playerElement = document.getElementById("player");
     }
 
-        var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
+    var requestFullScreen =
+      playerElement.requestFullScreen ||
+      playerElement.mozRequestFullScreen ||
+      playerElement.webkitRequestFullScreen;
     if (requestFullScreen) {
       requestFullScreen.bind(playerElement)();
     }
@@ -215,8 +267,7 @@ var Playercontrols = {
           }
         }
       } else {
-                if(Player.player.getPlayerState() == YT.PlayerState.PLAYING)
+        if (Player.player.getPlayerState() == YT.PlayerState.PLAYING) {
-                {
           Player.pauseVideo();
           if (Helper.mobilecheck() && !window.MSStream && !embed) {
             //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
@@ -225,7 +276,11 @@ var Playercontrols = {
             Helper.toggleClass(".video-container", "click-through");
             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();
           //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
           if (Helper.mobilecheck() && !window.MSStream) {
@@ -249,7 +304,6 @@ var Playercontrols = {
         Player.playVideo();
       }
     } else {
-
       if (!document.getElementById("pause").classList.contains("hide")) {
         Helper.toggleClass("#pause", "hide");
         Helper.toggleClass("#pause-overlay", "hide");
@@ -278,11 +332,13 @@ var Playercontrols = {
       Helper.toggleClass(".volume-container", "hide");
     } else {
       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" });
         Playercontrols.choose_button(0, true);
         Player.player.mute();
       } else {
-                if(chromecastAvailable)castSession.sendMessage("urn:x-cast:zoff.me", {type: "unMute"});
+        if (chromecastAvailable)
+          castSession.sendMessage("urn:x-cast:zoff.me", { type: "unMute" });
         Player.player.unMute();
         Playercontrols.choose_button(Player.player.getVolume(), false);
       }
@@ -294,8 +350,7 @@ var Playercontrols = {
     if (scUsingWidget) Player.soundcloud_player.setVolume(vol);
     else Player.soundcloud_player.setVolume(vol / 100);
     Playercontrols.choose_button(vol, false);
-        if(Player.player.isMuted())
+    if (Player.player.isMuted()) Player.player.unMute();
-        Player.player.unMute();
   },
 
   choose_button: function(vol, mute) {
@@ -386,7 +441,7 @@ var Playercontrols = {
             Helper.addClass("#pause", "hide");
             Player.soundcloud_player.pause();
           }
-                })
+        });
       } else {
         if (!Player.soundcloud_player.isPlaying()) {
           Helper.addClass("#play", "hide");

server/public/assets/js/remotecontroller.js

@@ -3,16 +3,30 @@ var dynamicListeners = {};
 
 mobilecheck = function() {
   var check = false;
-    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+  (function(a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+        a
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        a.substr(0, 4)
+      )
+    )
+      check = true;
+  })(navigator.userAgent || navigator.vendor || window.opera);
   return check;
 };
 
-window.addEventListener("DOMContentLoaded", function (){
+window.addEventListener(
+  "DOMContentLoaded",
+  function() {
     document.title = "Zoff Remote";
-    setTimeout(function(){document.getElementById("search").focus();},500);
+    setTimeout(function() {
+      document.getElementById("search").focus();
+    }, 500);
     var connection_options = {
-        'sync disconnect on unload':true,
+      "sync disconnect on unload": true,
-        'secure': true
+      secure: true
     };
 
     M.Modal.init(document.getElementById("about"));
@@ -21,18 +35,21 @@ window.addEventListener("DOMContentLoaded", function (){
 
     if (window.location.hostname == "remote.zoff.me") add = "https://zoff.me";
     else add = "localhost";
-    socket = io.connect(add, connection_options);
+    socket = io.connect(
-    socket.on('update_required', function() {
+      add,
+      connection_options
+    );
+    socket.on("update_required", function() {
       window.location.reload(true);
     });
     id = window.location.pathname.split("/")[1];
-    if(id)
+    if (id) {
-    {
       id = id.toLowerCase();
       Remotecontroller.control();
     }
-}, false);
+  },
-
+  false
+);
 
 function handleEvent(e, target, tried, type) {
   for (var y = 0; y < e.path.length; y++) {
@@ -43,7 +60,10 @@ function handleEvent(e, target, tried, type) {
     } else {
       if (target.classList == undefined) return;
       for (var i = 0; i < target.classList.length; i++) {
-                if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) {
+        if (
+          dynamicListeners[type] &&
+          dynamicListeners[type]["." + target.classList[i]]
+        ) {
           dynamicListeners[type]["." + target.classList[i]].call(target);
           return;
         }
@@ -57,12 +77,20 @@ function addListener(type, element, callback) {
   dynamicListeners[type][element] = callback;
 }
 
-document.addEventListener("click", function(e) {
+document.addEventListener(
+  "click",
+  function(e) {
     handleEvent(e, e.target, false, "click");
-}, true);
+  },
-document.addEventListener("submit", function(e) {
+  true
+);
+document.addEventListener(
+  "submit",
+  function(e) {
     handleEvent(e, e.target, false, "submit");
-}, true);
+  },
+  true
+);
 
 addListener("click", "#playbutton", function() {
   socket.emit("id", { id: id, type: "play", value: "mock" });
@@ -82,7 +110,6 @@ addListener("submit", "#remoteform", function(e) {
 });
 
 var Remotecontroller = {
-
   control: function() {
     if (start) {
       if (!id) {
@@ -96,10 +123,12 @@ var Remotecontroller = {
       Helper.css(".rc", "display", "block");
 
       //document.getElementById("base").setAttribute("onsubmit", "control(); return false;");
-            document.getElementById("remote-text").innerText = "Controlling "+ id.toUpperCase();
+      document.getElementById("remote-text").innerText =
+        "Controlling " + id.toUpperCase();
       document.getElementById("search").setAttribute("length", "18");
       document.getElementById("search").setAttribute("maxlength", "18");
-            document.getElementById("forsearch").innerText = "Type new channel name to change to";
+      document.getElementById("forsearch").innerText =
+        "Type new channel name to change to";
 
       //
       /*$("#volume-control").slider({
@@ -113,44 +142,63 @@ var Remotecontroller = {
             }
             //});*/
 
-            document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-slid'></div>");
+      document
-            document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-handle'></div>");
+        .getElementById("volume")
+        .insertAdjacentHTML("beforeend", "<div class='volume-slid'></div>");
+      document
+        .getElementById("volume")
+        .insertAdjacentHTML("beforeend", "<div class='volume-handle'></div>");
 
       Helper.css(".volume-slid", "width", "100%");
       Helper.css(".volume-handle", "left", "calc(100% - 1px)");
       //document.getElementsByClassName("volume-handle")[0].onmousedown = Remotecontroller.dragMouseDown;
       //$("#volume").slider(slider_values);
       //document.getElementsByClassName("volume-slid")[0].onmousedown = Remotecontroller.dragMouseDown;
-            document.getElementById("volume").onmousedown = Remotecontroller.dragMouseDown;
+      document.getElementById("volume").onmousedown =
-            document.getElementById("volume").addEventListener("touchstart", function(e) {
+        Remotecontroller.dragMouseDown;
+      document.getElementById("volume").addEventListener(
+        "touchstart",
+        function(e) {
           e.preventDefault();
           Remotecontroller.dragMouseDown(e);
-            }, false);
+        },
+        false
+      );
       document.getElementById("volume").onclick = function(e) {
         Remotecontroller.elementDrag(e);
         Remotecontroller.closeDragElement();
-            }
+      };
     } else {
-            socket.emit("id", {id: id, type: "channel", value: document.getElementById("search").value.toLowerCase()});
+      socket.emit("id", {
+        id: id,
+        type: "channel",
+        value: document.getElementById("search").value.toLowerCase()
+      });
       document.getElementById("search").value = "";
     }
-
   },
 
-
   dragMouseDown: function(e) {
     e = e || window.event;
     // get the mouse cursor position at startup:
     document.onmouseup = Remotecontroller.closeDragElement;
     // call a function whenever the cursor moves:
     document.onmousemove = Remotecontroller.elementDrag;
-        document.getElementById("volume").addEventListener("touchend", function() {
+    document.getElementById("volume").addEventListener(
+      "touchend",
+      function() {
         Remotecontroller.closeDragElement();
-        }, false);
+      },
-        document.getElementById("volume").addEventListener("touchmove", function(e) {
+      false
+    );
+    document.getElementById("volume").addEventListener(
+      "touchmove",
+      function(e) {
         e.preventDefault();
         Remotecontroller.elementDrag(e);
-        }, false);
+      },
+      false
+    );
   },
 
   elementDrag: function(e) {
@@ -169,18 +217,23 @@ var Remotecontroller = {
     if (pos > -1 && pos < document.getElementById("volume").offsetWidth + 1) {
       elmnt.style.left = pos + "px";
       var volume = pos / document.getElementById("volume").offsetWidth;
-            document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%";
+      document.getElementsByClassName("volume-slid")[0].style.width =
+        volume * 100 + "%";
     } else if (pos < 0) {
       var volume = 0;
-            document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%";
+      document.getElementsByClassName("volume-slid")[0].style.width =
+        volume * 100 + "%";
     } else {
       var volume = 1;
-            document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%";
+      document.getElementsByClassName("volume-slid")[0].style.width =
+        volume * 100 + "%";
     }
 
     socket.emit("id", { id: id, type: "volume", value: volume * 100 });
 
-        try{Crypt.set_volume(volume * 100);}catch(e){}
+    try {
+      Crypt.set_volume(volume * 100);
+    } catch (e) {}
   },
 
   closeDragElement: function() {
@@ -194,13 +247,18 @@ var Remotecontroller = {
     document.onmouseup = null;
     document.onmousemove = null;
 
-        document.getElementById("volume").removeEventListener("touchmove", function(e) {
+    document
+      .getElementById("volume")
+      .removeEventListener("touchmove", function(e) {
         e.preventDefault();
         Playercontrols.elementDrag(e);
       });
-        document.getElementById("volume").removeEventListener("touchend", function() {
+    document.getElementById("volume").removeEventListener(
+      "touchend",
+      function() {
         Playercontrols.closeDragElement();
-        }, false);
-
       },
+      false
+    );
+  }
 };

server/public/assets/js/search.js

@@ -1,5 +1,4 @@
 var Search = {
-
   submitArray: [],
   submitArrayExpected: null,
   submitYouTubeArrayIds: [],
@@ -9,14 +8,13 @@ var Search = {
 
   showSearch: function() {
     Helper.toggleClass("#search-wrapper", "hide");
-        if(Helper.mobilecheck())
+    if (Helper.mobilecheck()) {
-        {
       document.querySelector(".search_input").focus();
     }
     Helper.toggleClass("#song-title", "hide");
     //$("#results").empty();
     if (document.querySelector("#search-btn i").innerText == "close") {
-            document.querySelector("body").setAttribute("style", "overflow-y:auto")
+      document.querySelector("body").setAttribute("style", "overflow-y:auto");
 
       document.getElementById("results").innerHTML = "";
       document.getElementById("results_soundcloud").innerHTML = "";
@@ -30,7 +28,6 @@ var Search = {
       //Helper.css(".search_results", "display", "block");
     }
     document.querySelector("#search").focus();
-
   },
 
   search: function(search_input, retried, related, pagination) {
@@ -38,24 +35,43 @@ var Search = {
       result_html = document.getElementById("temp-results-container");
       empty_results_html = Helper.html("#empty-results-container");
     }
-        if(!pagination && document.querySelectorAll("#inner-results").length == 0) {
+    if (
-            Helper.setHtml("#results", '');
+      !pagination &&
+      document.querySelectorAll("#inner-results").length == 0
+    ) {
+      Helper.setHtml("#results", "");
     }
     if (search_input !== "") {
       searching = true;
       var keyword = encodeURIComponent(search_input);
-            var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key.youtube+"&videoEmbeddable=true&part=id&type=video&order=relevance&safeSearch=none&maxResults=25";
+      var yt_url =
+        "https://www.googleapis.com/youtube/v3/search?key=" +
+        api_key.youtube +
+        "&videoEmbeddable=true&part=id&type=video&order=relevance&safeSearch=none&maxResults=25";
       yt_url += "&q=" + keyword;
       if (music) yt_url += "&videoCategoryId=10";
       if (pagination) yt_url += "&pageToken=" + pagination;
-            var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key="+api_key.youtube+"&id=";
+      var vid_url =
+        "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key=" +
+        api_key.youtube +
+        "&id=";
       if (related) {
-                var yt_url 	= "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&relatedToVideoId="+keyword+"&type=video&key="+api_key.youtube;
+        var yt_url =
-                var vid_url	= "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key.youtube+"&id=";
+          "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&relatedToVideoId=" +
+          keyword +
+          "&type=video&key=" +
+          api_key.youtube;
+        var vid_url =
+          "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" +
+          api_key.youtube +
+          "&id=";
       }
       //https://www.googleapis.com/youtube/v3/videos?key={API-key}&fields=items(snippet(title,description))&part=snippet&id={video_id}
 
-            Helper.addClass(document.querySelector("#search-btn .material-icons"), "hide");
+      Helper.addClass(
+        document.querySelector("#search-btn .material-icons"),
+        "hide"
+      );
       Helper.removeClass("#search_loader", "hide");
       Helper.addClass(".search_loader_spinner", "active");
       //Helper.removeClass(".search_results", "hide");
@@ -75,11 +91,20 @@ var Search = {
             Helper.css("#results", "display", "block");
             //Helper.css(".results-tabs", "display", "block");
             //$("<div style='display:none;' id='inner-results' class='empty-inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
-                        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>");
+            document
-                        Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide");
+              .getElementById("results")
+              .insertAdjacentHTML(
+                "beforeend",
+                "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);' class='empty-inner-results'>" +
+                  empty_results_html +
+                  "</div>"
+              );
+            Helper.removeClass(
+              document.querySelector("#search-btn .material-icons"),
+              "hide"
+            );
             Helper.addClass("#search_loader", "hide");
             Helper.removeClass(".search_loader_spinner", "active");
-
           } else if (response.items) {
             for (var i = 0; i < response.items.length; i++) {
               vid_url += response.items[i].id.videoId + ",";
@@ -105,23 +130,49 @@ var Search = {
                     var title = song.snippet.title;
                     var enc_title = title; //encodeURIComponent(title).replace(/'/g, "\\\'");
                     var id = song.id;
-                                        duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s");
+                    duration = duration
+                      .replace("PT", "")
+                      .replace("H", "h ")
+                      .replace("M", "m ")
+                      .replace("S", "s");
                     var thumb = song.snippet.thumbnails.medium.url;
                     //$("#results").append(result_html);
                     var songs = pre_result.cloneNode(true);
                     songs.querySelector(".search-title").innerText = title;
-                                        songs.querySelector(".result_info").innerText = 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.querySelector(".thumb").setAttribute("src", thumb);
                     //songs.querySelector(".add-many").attr("onclick", "submit('"+id+"','"+enc_title+"',"+secs+");");
-                                        songs.querySelector("#add-many").setAttribute("data-video-id", id);
+                    songs
-                                        songs.querySelector("#add-many").setAttribute("data-video-title", enc_title);
+                      .querySelector("#add-many")
-                                        songs.querySelector("#add-many").setAttribute("data-video-length", secs);
+                      .setAttribute("data-video-id", id);
+                    songs
+                      .querySelector("#add-many")
+                      .setAttribute("data-video-title", enc_title);
+                    songs
+                      .querySelector("#add-many")
+                      .setAttribute("data-video-length", secs);
                     //$($(songs).querySelector("div")[0]).setAttribute("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
-                                        songs.querySelector("#temp-results").setAttribute("data-video-id", id);
+                    songs
-                                        songs.querySelector("#temp-results").setAttribute("data-video-title", enc_title);
+                      .querySelector("#temp-results")
-                                        songs.querySelector("#temp-results").setAttribute("data-video-length", secs);
+                      .setAttribute("data-video-id", id);
-                                        songs.querySelector(".open-externally").setAttribute("href", "https://www.youtube.com/watch?v=" + id);
+                    songs
-                                        songs.querySelector(".result-end").setAttribute("value", secs);
+                      .querySelector("#temp-results")
+                      .setAttribute("data-video-title", enc_title);
+                    songs
+                      .querySelector("#temp-results")
+                      .setAttribute("data-video-length", secs);
+                    songs
+                      .querySelector(".open-externally")
+                      .setAttribute(
+                        "href",
+                        "https://www.youtube.com/watch?v=" + id
+                      );
+                    songs
+                      .querySelector(".result-end")
+                      .setAttribute("value", secs);
                     //$($(songs).querySelector("div")[0]).setAttribute("id", id)
                     //output += undefined;
                     if (songs.innerHTML != undefined && songs.innerHTML != "") {
@@ -139,46 +190,82 @@ var Search = {
                   if (!pagination && fresh) {
                     Helper.css(".search_results", "display", "none");
                   }
-                                    document.getElementById("results").insertAdjacentHTML("beforeend", pagination_buttons_html);
+                  document
+                    .getElementById("results")
+                    .insertAdjacentHTML("beforeend", pagination_buttons_html);
                   //$("<div id='inner-results'>"+output+"</div>").prependTo($("#results"));
-                                    document.getElementById("results").insertAdjacentHTML("afterbegin", "<div id='inner-results'>"+output+"</div>");
+                  document
+                    .getElementById("results")
+                    .insertAdjacentHTML(
+                      "afterbegin",
+                      "<div id='inner-results'>" + output + "</div>"
+                    );
                   /*if(!pagination && fresh) {
                                         $(".search_results").slideDown();
                                     }*/
-                                    document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:hidden !important")
+                  document
+                    .getElementsByTagName("body")[0]
+                    .setAttribute("style", "overflow-y:hidden !important");
 
                   if (nextPageToken) {
-                                        document.querySelector(".next-results-button").setAttribute("data-pagination", nextPageToken);
+                    document
+                      .querySelector(".next-results-button")
+                      .setAttribute("data-pagination", nextPageToken);
                   } else {
                     Helper.addClass(".next-results-button", "disabled");
                   }
                   if (prevPageToken) {
-                                        document.querySelector(".prev-results-button").setAttribute("data-pagination", prevPageToken);
+                    document
+                      .querySelector(".prev-results-button")
+                      .setAttribute("data-pagination", prevPageToken);
                   } else {
                     Helper.addClass(".prev-results-button", "disabled");
                   }
 
-                                    document.querySelectorAll(".pagination-results a")[0].setAttribute("data-original-search", search_input);
+                  document
-                                    document.querySelectorAll(".pagination-results a")[1].setAttribute("data-original-search", search_input);
+                    .querySelectorAll(".pagination-results a")[0]
+                    .setAttribute("data-original-search", search_input);
+                  document
+                    .querySelectorAll(".pagination-results a")[1]
+                    .setAttribute("data-original-search", search_input);
                   //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250);
-                                    Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide");
+                  Helper.removeClass(
+                    document.querySelector("#search-btn .material-icons"),
+                    "hide"
+                  );
                   Helper.addClass("#search_loader", "hide");
                   Helper.removeClass(".search_loader_spinner", "active");
-                                    if(document.querySelector("#results_soundcloud").innerHTML.length > 0 || related) {
+                  if (
+                    document.querySelector("#results_soundcloud").innerHTML
+                      .length > 0 ||
+                    related
+                  ) {
                     Helper.css(".search_results", "display", "block");
                   }
                   Helper.css(".results-tabs", "display", "block");
-
                 } else if (!retried) {
                   Search.search(search_input, true);
                 } else {
                   //$("<div style='display:none;' id='inner-results'>"+empty_results_html+"</div>").appendTo($("#results")).show("blind", 83.33);
-                                    document.getElementById("results").insertAdjacentHTML("beforeend", "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);'>"+empty_results_html+"</div>");
+                  document
+                    .getElementById("results")
+                    .insertAdjacentHTML(
+                      "beforeend",
+                      "<div style='display:block;' id='inner-results' style='height:calc(100vh - 64px);'>" +
+                        empty_results_html +
+                        "</div>"
+                    );
                   Helper.css("#results", "display", "block");
-                                    if(document.querySelector("#results_soundcloud").innerHTML.length > 0) {
+                  if (
+                    document.querySelector("#results_soundcloud").innerHTML
+                      .length > 0
+                  ) {
                     Helper.css(".search_results", "display", "block");
                   }
-                                    Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide");
+                  Helper.removeClass(
+                    document.querySelector("#search-btn .material-icons"),
+                    "hide"
+                  );
                   Helper.addClass("#search_loader", "hide");
                   Helper.removeClass(".search_loader_spinner", "active");
                 }
@@ -198,12 +285,13 @@ var Search = {
 
   soundcloudSearch: function(keyword) {
     if (!soundcloud_enabled) {
-            document.querySelector("#results_soundcloud").innerHTML = '<div style="display:block;" id="inner-results" class="empty-inner-results"><div id="empty-results" class="valign-wrapper><span class="valign">No SoundCloud API-key, search disabled..</span></div></div>';
+      document.querySelector("#results_soundcloud").innerHTML =
+        '<div style="display:block;" id="inner-results" class="empty-inner-results"><div id="empty-results" class="valign-wrapper><span class="valign">No SoundCloud API-key, search disabled..</span></div></div>';
 
       return;
     }
     if (keyword.length == 0) return;
-        SC_player.get('/tracks', {
+    SC_player.get("/tracks", {
       q: keyword
     }).then(function(tracks) {
       var pre_result = document.createElement("div");
@@ -234,22 +322,43 @@ var Search = {
           //$("#results").append(result_html);
           var songs = pre_result.cloneNode(true);
           songs.querySelector(".search-title").innerText = title;
-                    songs.querySelector(".result_info").innerText = 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.querySelector(".thumb").setAttribute("src", thumb);
           //songs.querySelector(".add-many").attr("onclick", "submit('"+id+"','"+enc_title+"',"+secs+");");
-                    songs.querySelector("#add-many").setAttribute("data-type-source", "soundcloud");
+          songs
-                    songs.querySelector("#add-many").setAttribute("data-type-thumbnail", thumb);
+            .querySelector("#add-many")
+            .setAttribute("data-type-source", "soundcloud");
+          songs
+            .querySelector("#add-many")
+            .setAttribute("data-type-thumbnail", thumb);
           songs.querySelector("#add-many").setAttribute("data-video-id", id);
-                    songs.querySelector("#add-many").setAttribute("data-video-title", enc_title);
+          songs
-                    songs.querySelector("#add-many").setAttribute("data-video-length", secs);
+            .querySelector("#add-many")
+            .setAttribute("data-video-title", enc_title);
+          songs
+            .querySelector("#add-many")
+            .setAttribute("data-video-length", secs);
           //$($(songs).querySelector("div")[0]).setAttribute("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
-                    songs.querySelector("#temp-results").setAttribute("data-video-id", id);
+          songs
-                    songs.querySelector("#temp-results").setAttribute("data-video-title", enc_title);
+            .querySelector("#temp-results")
-                    songs.querySelector("#temp-results").setAttribute("data-video-length", secs);
+            .setAttribute("data-video-id", id);
-                    songs.querySelector(".open-externally").setAttribute("href", song.permalink_url);
+          songs
+            .querySelector("#temp-results")
+            .setAttribute("data-video-title", enc_title);
+          songs
+            .querySelector("#temp-results")
+            .setAttribute("data-video-length", secs);
+          songs
+            .querySelector(".open-externally")
+            .setAttribute("href", song.permalink_url);
           songs.querySelector(".result-end").setAttribute("value", secs);
-                    songs.querySelector("#temp-results").setAttribute("data-type-source", "soundcloud");
+          songs
-                    songs.querySelector("#temp-results").setAttribute("data-type-thumbnail", thumb);
+            .querySelector("#temp-results")
+            .setAttribute("data-type-source", "soundcloud");
+          songs
+            .querySelector("#temp-results")
+            .setAttribute("data-type-thumbnail", thumb);
           //$($(songs).querySelector("div")[0]).setAttribute("id", id)
           //output += undefined;
           if (songs.innerHTML != undefined && songs.innerHTML != "") {
@@ -263,14 +372,18 @@ var Search = {
       }
       document.getElementById("results_soundcloud").innerHTML = "";
       if (output.length > 0) {
-
         //$(window).scrollTop(0);
         /*if(!pagination && fresh) {
                     //Helper.css(".search_results", "display", "none");
                 }*/
         //document.getElementById("results_soundcloud").insertAdjacentHTML("beforeend", pagination_buttons_html);
         //$("<div id='inner-results'>"+output+"</div>").prependTo($("#results"));
-                document.getElementById("results_soundcloud").insertAdjacentHTML("afterbegin", "<div id='inner-results'>"+output+"</div>");
+        document
+          .getElementById("results_soundcloud")
+          .insertAdjacentHTML(
+            "afterbegin",
+            "<div id='inner-results'>" + output + "</div>"
+          );
         if (!pagination && fresh) {
           //$(".search_results").slideDown();
         }
@@ -292,10 +405,18 @@ var Search = {
 
         /*Helper.removeClass(".search_loader_spinner", "active");
                 Helper.css(".search_results", "display", "block");*/
-
       } else {
-                document.getElementById("results_soundcloud").insertAdjacentHTML("afterbegin", "<div id='inner-results' style='height:calc(100vh - 64px);'>"+empty_results_html+"</div>");
+        document
-                document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:hidden !important")
+          .getElementById("results_soundcloud")
+          .insertAdjacentHTML(
+            "afterbegin",
+            "<div id='inner-results' style='height:calc(100vh - 64px);'>" +
+              empty_results_html +
+              "</div>"
+          );
+        document
+          .getElementsByTagName("body")[0]
+          .setAttribute("style", "overflow-y:hidden !important");
       }
       if (document.querySelector("#results").innerHTML.length > 0) {
         Helper.css(".search_results", "display", "block");
@@ -313,9 +434,15 @@ var Search = {
 
   backgroundSearch: function(title, artist, length, totalNumber, current) {
     var keyword = encodeURIComponent(title + " " + artist);
-        var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key.youtube+"&videoEmbeddable=true&part=id,snippet&fields=items(id,snippet)&type=video&order=relevance&safeSearch=none&maxResults=10&videoCategoryId=10";
+    var yt_url =
+      "https://www.googleapis.com/youtube/v3/search?key=" +
+      api_key.youtube +
+      "&videoEmbeddable=true&part=id,snippet&fields=items(id,snippet)&type=video&order=relevance&safeSearch=none&maxResults=10&videoCategoryId=10";
     yt_url += "&q=" + keyword;
-        var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key.youtube+"&id=";
+    var vid_url =
+      "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" +
+      api_key.youtube +
+      "&id=";
     artist = artist.split(" ");
     var temptitle = title.split("-");
     temptitle = temptitle.join(" ").split(" ");
@@ -336,10 +463,17 @@ var Search = {
           var not_added_song = document.createElement("div");
           not_added_song.innerHTML = not_import_html;
 
-                    not_added_song.querySelector(".extra-add-text").innerText = title + " - " + artist.join(" ");
+          not_added_song.querySelector(".extra-add-text").innerText =
-                    not_added_song.querySelector(".extra-add-text").setAttribute("title", title + " - " + artist.join(" "));
+            title + " - " + artist.join(" ");
-                    not_added_song.querySelector(".extra-button-search").setAttribute("data-text", title + " - " + artist.join(" "));
+          not_added_song
-                    document.querySelector(".not-imported-container").insertAdjacentHTML("beforeend", not_added_song.innerHTML);
+            .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++) {
@@ -359,7 +493,10 @@ var Search = {
                   var data = response.items[y];
                   //Helper.log(data);
                   //var title = data.snippet.title;
-                                    if(data.contentDetails == undefined || data.contentDetails.duration == undefined) {
+                  if (
+                    data.contentDetails == undefined ||
+                    data.contentDetails.duration == undefined
+                  ) {
                     Search.readySubmit(false, { totalLength: totalNumber - 1 });
                     Helper.log([
                       "NO MATCH FOR:",
@@ -368,39 +505,85 @@ var Search = {
                     ]);
                     var not_added_song = document.createElement("div");
                     not_added_song.innerHTML = not_import_html;
-                                        not_added_song.querySelector(".extra-add-text").innerText = title + " - " + artist.join(" ");
+                    not_added_song.querySelector(".extra-add-text").innerText =
-                                        not_added_song.querySelector(".extra-add-text").setAttribute("title", title + " - " + artist.join(" "));
+                      title + " - " + artist.join(" ");
-                                        not_added_song.querySelector(".extra-button-search").setAttribute("data-text", title + " - " + artist.join(" "));
+                    not_added_song
-                                        document.querySelector(".not-imported-container").insertAdjacentHTML("beforeend", not_added_song.innerHTML);
+                      .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");
                     continue;
                   }
-                                    var duration = Search.durationToSeconds(data.contentDetails.duration);
+                  var duration = Search.durationToSeconds(
+                    data.contentDetails.duration
+                  );
                   var not_matched = false;
-                                    if(similarity(data.snippet.title, artist + " - " + title) > 0.75) {
+                  if (
+                    similarity(data.snippet.title, artist + " - " + title) >
+                    0.75
+                  ) {
                     not_matched = false;
                   } else {
                     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("cover") == -1 &&
+                        data.snippet.title
+                          .toLowerCase()
+                          .indexOf(data_title.toLowerCase()) == -1 ||
+                        !(
+                          data.snippet.title.toLowerCase().indexOf("cover") ==
+                            -1 &&
                           title.toLowerCase().indexOf("cover") == -1 &&
-                                                ((data.snippet.title.toLowerCase().indexOf("remix") == -1 &&
+                          ((data.snippet.title.toLowerCase().indexOf("remix") ==
+                            -1 &&
                             title.toLowerCase().indexOf("remix") == -1) ||
-                                                (data.snippet.title.toLowerCase().indexOf("remix") != -1 &&
+                            (data.snippet.title
-                                                title.toLowerCase().indexOf("remix") != -1) || !(data.snippet.title.toLowerCase().indexOf(artist[0].toLowerCase()) == -1 &&
+                              .toLowerCase()
-                                                (data.snippet.channelTitle.toLowerCase().indexOf(artist[0].toLowerCase()) == -1 &&
+                              .indexOf("remix") != -1 &&
-                                                data.snippet.channelTitle.toLowerCase().indexOf("vevo") == -1)))
+                              title.toLowerCase().indexOf("remix") != -1) ||
+                            !(
+                              data.snippet.title
+                                .toLowerCase()
+                                .indexOf(artist[0].toLowerCase()) == -1 &&
+                              (data.snippet.channelTitle
+                                .toLowerCase()
+                                .indexOf(artist[0].toLowerCase()) == -1 &&
+                                data.snippet.channelTitle
+                                  .toLowerCase()
+                                  .indexOf("vevo") == -1)
                             ))
+                        )
+                      )
                         not_matched = true;
                       else if (duration > 1800) not_matched = true;
                     }
                   }
 
-                                    if((!not_matched)){
+                  if (!not_matched) {
                     matched = true;
-                                        Search.readySubmit(true, { id: data.id, title: data.snippet.title, source: "youtube", thumbnail: "https://img.youtube.com/vi/" + data.id + "/mqdefault.jpg", duration: duration, totalLength: totalNumber - 1});
+                    Search.readySubmit(true, {
+                      id: data.id,
+                      title: data.snippet.title,
+                      source: "youtube",
+                      thumbnail:
+                        "https://img.youtube.com/vi/" +
+                        data.id +
+                        "/mqdefault.jpg",
+                      duration: duration,
+                      totalLength: totalNumber - 1
+                    });
                     break;
                   }
                 }
@@ -413,10 +596,20 @@ var Search = {
                   ]);
                   var not_added_song = document.createElement("div");
                   not_added_song.innerHTML = not_import_html;
-                                    not_added_song.querySelector(".extra-add-text").innerText = title + " - " + artist.join(" ");
+                  not_added_song.querySelector(".extra-add-text").innerText =
-                                    not_added_song.querySelector(".extra-add-text").setAttribute("title", title + " - " + artist.join(" "));
+                    title + " - " + artist.join(" ");
-                                    not_added_song.querySelector(".extra-button-search").setAttribute("data-text", title + " - " + artist.join(" "));
+                  not_added_song
-                                    document.querySelector(".not-imported-container").insertAdjacentHTML("beforeend", not_added_song.innerHTML);
+                    .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");
                 }
               }
@@ -425,9 +618,9 @@ var Search = {
               console.error(e);
             }
           });
-
         }
-            }, error: function(e) {
+      },
+      error: function(e) {
         console.error(e);
       }
     });
@@ -442,8 +635,11 @@ var Search = {
     } else {
       Search.submitArrayExpected -= 1;
     }
-        if((Search.submitArray.length - 1) == Search.submitArrayExpected) {
+    if (Search.submitArray.length - 1 == Search.submitArrayExpected) {
-            socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitArray});
+      socket.emit("addPlaylist", {
+        channel: chan.toLowerCase(),
+        songs: Search.submitArray
+      });
       /*$.each(Search.submitArray, function(i, data){
             Search.submit(data.id, data.title, data.duration, true, i, Search.submitArray.length - 1, 0, data.duration);
         });*/
@@ -456,11 +652,24 @@ var Search = {
   },
 
   submitAndClose: function(id, title, duration, start, end, source, thumbnail) {
-    Search.submit(id,title, duration, false, 0, 1, start, end, source, thumbnail);
+    Search.submit(
-    Helper.setHtml("#results", '');
+      id,
+      title,
+      duration,
+      false,
+      0,
+      1,
+      start,
+      end,
+      source,
+      thumbnail
+    );
+    Helper.setHtml("#results", "");
     Search.showSearch();
     document.getElementById("search").value = "";
-    document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:auto")
+    document
+      .getElementsByTagName("body")[0]
+      .setAttribute("style", "overflow-y:auto");
     Helper.setHtml("#results", "");
     Helper.setHtml("#results-soundcloud", "");
     Helper.removeClass(".main", "blurT");
@@ -473,14 +682,18 @@ importPlaylist: function(pId,pageToken){
     token = "";
     var headers;
     var datatype;
-    if(pageToken !== undefined)
+    if (pageToken !== undefined) token = "&pageToken=" + pageToken;
-    token = "&pageToken="+pageToken;
+    playlist_url =
-    playlist_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key="+api_key.youtube+"&playlistId="+pId+token;
+      "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=49&key=" +
+      api_key.youtube +
+      "&playlistId=" +
+      pId +
+      token;
     if (youtube_authenticated) {
       datatype = "html";
       headers = {
-            'Content-Type': 'application/json',
+        "Content-Type": "application/json",
-            'Authorization': 'Bearer ' + access_token_data_youtube.access_token
+        Authorization: "Bearer " + access_token_data_youtube.access_token
       };
     } else {
       headers = {}; //'Content-Type': 'application/json'};
@@ -514,23 +727,26 @@ importPlaylist: function(pId,pageToken){
               youtube_window.close();
               window.callback = "";
             };
-                    youtube_window = window.open("/api/oauth#youtube=true&nonce=" + nonce, "", "width=600, height=600");
+            youtube_window = window.open(
+              "/api/oauth#youtube=true&nonce=" + nonce,
+              "",
+              "width=600, height=600"
+            );
           } else {
-                    Helper.log([
+            Helper.log(["import list error: ", response.error]);
-                        "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});
+            M.toast({
+              html: "It seems you've entered a invalid url.",
+              displayLength: 4000
+            });
           }
-
         } else {
           var ids = "";
           var this_length = 0;
-                if(typeof(response) == "string") response = JSON.parse(response);
+          if (typeof response == "string") response = JSON.parse(response);
           //Search.addVideos(response.items[0].contentDetails.videoId);
           //response.items.shift();
           for (var i = 0; i < response.items.length; i++) {
@@ -571,17 +787,21 @@ importPlaylist: function(pId,pageToken){
             youtube_window.close();
             window.callback = "";
           };
-                youtube_window = window.open("/api/oauth#youtube=true&nonce=" + nonce, "", "width=600, height=600");
+          youtube_window = window.open(
+            "/api/oauth#youtube=true&nonce=" + nonce,
+            "",
+            "width=600, height=600"
+          );
         } else {
-                Helper.log([
+          Helper.log(["import list error: ", response.error]);
-                    "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});
+          M.toast({
+            html: "It seems you've entered a invalid url.",
+            displayLength: 4000
+          });
         }
       }
     });
@@ -592,15 +812,24 @@ importSpotifyPlaylist: function(url){
       method: "get",
       url: url,
       headers: {
-            'Authorization': 'Bearer ' + access_token_data.access_token
+        Authorization: "Bearer " + access_token_data.access_token
       },
       success: function(response) {
         response = JSON.parse(response);
         for (var i = 0; i < response.items.length; i++) {
           var data = response.items[i];
           //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) {
           Search.importSpotifyPlaylist(response.next);
@@ -611,7 +840,10 @@ importSpotifyPlaylist: function(url){
         Helper.removeClass("#import_spotify", "hide");
         Helper.addClass("#playlist_loader_spotify", "hide");
         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
+        });
       }
     });
   },
@@ -619,7 +851,10 @@ importSpotifyPlaylist: function(url){
   addVideos: function(ids) {
     var more = false;
     var next_ids = [];
-    var request_url="https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" + api_key.youtube + "&id=";
+    var request_url =
+      "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key=" +
+      api_key.youtube +
+      "&id=";
     for (var i = 0; i < ids.length; i++) {
       if (i > 48) {
         more = true;
@@ -634,14 +869,21 @@ addVideos: function(ids){
       success: function(response) {
         response = JSON.parse(response);
 
-            Helper.log(["Import response, separate video nr2", response, "import response, separate video end"]);
+        Helper.log([
+          "Import response, separate video nr2",
+          response,
+          "import response, separate video end"
+        ]);
         var x = 0;
         if (response.error) {
           Search.submitYouTubeError = true;
         }
         for (var i = 0; i < response.items.length; i++) {
           var song = response.items[i];
-                if(song.contentDetails == undefined || song.contentDetails.duration == undefined) {
+          if (
+            song.contentDetails == undefined ||
+            song.contentDetails.duration == undefined
+          ) {
             Helper.log(["Song without duration", song]);
             continue;
           }
@@ -650,12 +892,22 @@ addVideos: function(ids){
             enc_title = song.snippet.title; //encodeURIComponent(song.snippet.title);
             //Search.submit(song.id, enc_title, duration, playlist, i);
             x += 1;
-                    Search.submitYouTubeArray.push({id: song.id, title: enc_title, duration: duration, source: "youtube", thumbnail: "https://img.youtube.com/vi/" + song.id + "/mqdefault.jpg"});
+            Search.submitYouTubeArray.push({
+              id: song.id,
+              title: enc_title,
+              duration: duration,
+              source: "youtube",
+              thumbnail:
+                "https://img.youtube.com/vi/" + song.id + "/mqdefault.jpg"
+            });
           }
         }
         if (more) Search.addVideos(next_ids);
         else {
-                socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitYouTubeArray});
+          socket.emit("addPlaylist", {
+            channel: chan.toLowerCase(),
+            songs: Search.submitYouTubeArray
+          });
           Search.submitYouTubeArray = [];
           Search.submitYouTubeExpected = 0;
         }
@@ -666,12 +918,38 @@ addVideos: function(ids){
     });
   },
 
-submit: function(id,title,duration, playlist, num, full_num, start, end, source, thumbnail){
+  submit: function(
+    id,
+    title,
+    duration,
+    playlist,
+    num,
+    full_num,
+    start,
+    end,
+    source,
+    thumbnail
+  ) {
     if ((client || Helper.mobilecheck()) && !socket_connected) {
-        add_ajax(id, title, duration, playlist, num, full_num, start, end, source, thumbnail);
+      add_ajax(
+        id,
+        title,
+        duration,
+        playlist,
+        num,
+        full_num,
+        start,
+        end,
+        source,
+        thumbnail
+      );
       return;
     }
-    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 = [];
       for (var i = 0; i < full_playlist.length; i++) {
         if (full_playlist[i].id == id) found_array.push(i);
@@ -682,7 +960,7 @@ submit: function(id,title,duration, playlist, num, full_num, start, end, source,
           start: start,
           end: end,
           value: {
-                    added: (new Date).getTime()/1000,
+            added: new Date().getTime() / 1000,
             guids: [1],
             id: id,
             title: title,

server/public/assets/js/suggestions.js

@@ -1,5 +1,4 @@
 var Suggestions = {
-
   catchUserSuggests: function(params, single) {
     if (single) {
       number_suggested = number_suggested + 1;
@@ -13,9 +12,14 @@ var Suggestions = {
     }
     var to_display = number_suggested > 9 ? "9+" : number_suggested;
     if (number_suggested > 0 && Admin.logged_in) {
-            Helper.removeClass(document.querySelector(".suggested-link span.badge.new.white"), "hide");
+      Helper.removeClass(
+        document.querySelector(".suggested-link span.badge.new.white"),
+        "hide"
+      );
     }
-        document.querySelector(".suggested-link span.badge.new.white").innerText = to_display;
+    document.querySelector(
+      ".suggested-link span.badge.new.white"
+    ).innerText = to_display;
     if (single) {
       Suggestions.createSuggested(params);
     } else {
@@ -31,12 +35,24 @@ var Suggestions = {
     var video_id = params.id;
     var video_title = params.title;
     var date = new Date(params.added * 1000);
-        var addedTime = Helper.pad(date.getHours()) + ":"
+    var addedTime =
-                        + Helper.pad(date.getMinutes()) + " - "
+      Helper.pad(date.getHours()) +
-                        + Helper.pad(date.getDate()) + "."
+      ":" +
-                        + Helper.pad(date.getMonth()) + "."
+      Helper.pad(date.getMinutes()) +
-                        + Helper.pad((date.getYear()-100));
+      " - " +
-        var toSend = {id: video_id, title: video_title, length: params.duration, duration: duration, votes: addedTime, extra: "Added"};
+      Helper.pad(date.getDate()) +
+      "." +
+      Helper.pad(date.getMonth()) +
+      "." +
+      Helper.pad(date.getYear() - 100);
+    var toSend = {
+      id: video_id,
+      title: video_title,
+      length: params.duration,
+      duration: duration,
+      votes: addedTime,
+      extra: "Added"
+    };
     if (params.source) toSend.source = params.source;
     else {
       toSend.source = "youtube";
@@ -48,8 +64,13 @@ var Suggestions = {
       testingElem = document.getElementById(video_id);
     } catch (e) {}
 
-        if(!testingElem && document.querySelectorAll("#suggested-" + video_id).length == 0) {
+    if (
-            document.getElementById("user-suggest-html").insertAdjacentHTML("beforeend", song);
+      !testingElem &&
+      document.querySelectorAll("#suggested-" + video_id).length == 0
+    ) {
+      document
+        .getElementById("user-suggest-html")
+        .insertAdjacentHTML("beforeend", song);
     }
   },
 
@@ -62,15 +83,21 @@ var Suggestions = {
       Helper.removeClass(document.querySelector(".suggest-title-info"), "hide");
       Helper.removeClass("#suggest-song-html", "hide");
     }
-        var get_url 	= "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId="+id+"&type=video&key="+api_key.youtube;
+    var get_url =
-        var video_urls	= "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,statistics&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key="+api_key.youtube+"&id=";
+      "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId=" +
+      id +
+      "&type=video&key=" +
+      api_key.youtube;
+    var video_urls =
+      "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,statistics&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key=" +
+      api_key.youtube +
+      "&id=";
 
     Helper.ajax({
       type: "GET",
       url: get_url,
       dataType: "jsonp",
-            success: function(response)
+      success: function(response) {
-            {
         response = JSON.parse(response);
         var this_resp = response.items.slice(0, 5);
         for (var i = 0; i < this_resp.length; i++) {
@@ -82,26 +109,45 @@ var Suggestions = {
           type: "GET",
           url: video_urls,
           dataType: "jsonp",
-                    success: function(response)
+          success: function(response) {
-                    {
             response = JSON.parse(response);
             Helper.setHtml("#suggest-song-html", "");
             for (var i = 0; i < response.items.length; i++) {
               var song = response.items[i];
               var duration = song.contentDetails.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_title = song.snippet.title;
               var viewCount = 0;
               try {
-                                viewCount = song.statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                viewCount = song.statistics.viewCount
-                            } catch(e) {
+                  .toString()
-
+                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-                            }
+              } catch (e) {}
 
               try {
-                                document.getElementById("suggest-song-html").insertAdjacentHTML("beforeend", List.generateSong({id: video_id, title: video_title, length: length, duration: duration, votes: viewCount, extra: "Views", source: "youtube"}, false, false, false));
+                document
+                  .getElementById("suggest-song-html")
+                  .insertAdjacentHTML(
+                    "beforeend",
+                    List.generateSong(
+                      {
+                        id: video_id,
+                        title: video_title,
+                        length: length,
+                        duration: duration,
+                        votes: viewCount,
+                        extra: "Views",
+                        source: "youtube"
+                      },
+                      false,
+                      false,
+                      false
+                    )
+                  );
               } catch (e) {}
             }
           }
@@ -117,5 +163,5 @@ var Suggestions = {
     } else if (Admin.logged_in) {
       Helper.removeClass("#user_suggests", "hide");
     }
-    },
+  }
 };

server/public/assets/js/token_apply.js

@@ -4,20 +4,30 @@ window.addEventListener("DOMContentLoaded", function(e) {
   Helper.addClass(".help-button-footer", "hide");
 
   Helper.setHtml("#contact-container", "");
-    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>");
+  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>"
+  );
   Helper.css("#submit-contact-form", "display", "none");
 
   var page = window.location.pathname;
   if (page.substring(page.length - 1) != "/") page += "/";
-    ga('send', 'pageview', page);
+  ga("send", "pageview", page);
 
   if (!Helper.mobilecheck()) {
     if (document.querySelector("#iframe-container")) {
-            document.getElementById("iframe-container").insertAdjacentHTML("beforeend", '<iframe id="iframe" src="https://zoff.me/_embed#celebrate&808080&autoplay" width="600px" height="300px" allow="autoplay"></iframe>');
+      document
+        .getElementById("iframe-container")
+        .insertAdjacentHTML(
+          "beforeend",
+          '<iframe id="iframe" src="https://zoff.me/_embed#celebrate&808080&autoplay" width="600px" height="300px" allow="autoplay"></iframe>'
+        );
     }
   }
 
-    document.getElementsByClassName("token-form")[0].addEventListener("submit", function(e) {
+  document
+    .getElementsByClassName("token-form")[0]
+    .addEventListener("submit", function(e) {
       e.preventDefault();
       var email = document.getElementById("email_address").value;
       var origin = document.getElementById("origin").value;
@@ -33,29 +43,44 @@ window.addEventListener("DOMContentLoaded", function(e) {
         data: {
           origin: origin,
           email: email,
-                "g-recaptcha-response": captcha_response,
+          "g-recaptcha-response": captcha_response
         },
         success: function(response) {
           Helper.addClass(".full-form-token", "hide");
           if (response == "success") {
-                    M.toast({html: "Email sent!", displayLength: 3000, classes: "green lighten"});
+            M.toast({
+              html: "Email sent!",
+              displayLength: 3000,
+              classes: "green lighten"
+            });
           } else {
-                    document.getElementById("email_address").setAttribute("readonly", false);
+            document
+              .getElementById("email_address")
+              .setAttribute("readonly", false);
             Helper.toggleClass(".submit", "disabled");
             document.getElementById("origin").setAttribute("readonly", false);
             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) {
           Helper.addClass(".full-form-token", "hide");
-                document.getElementById("email_address").setAttribute("readonly", false);
+          document
+            .getElementById("email_address")
+            .setAttribute("readonly", false);
           Helper.toggleClass(".submit", "disabled");
         }
       });
     });
 
-    document.getElementById('submit-contact-form').addEventListener('click', function(e) {
+  document
+    .getElementById("submit-contact-form")
+    .addEventListener("click", function(e) {
       e.preventDefault();
       document.getElementById("contact-form").submit();
     });