diff --git a/gulpfile.js b/gulpfile.js index dc8e0b8e..7b9134ce 100755 --- a/gulpfile.js +++ b/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")); }); diff --git a/pm2.json b/pm2.json index f931e678..59a83399 100644 --- a/pm2.json +++ b/pm2.json @@ -1,16 +1,19 @@ { - "apps" : [ - { - "name" : "zoff", - "script" : "./server/app.js", - "watch" : true, - "ignore_watch": ["./node_modules", "./server/public/assets/images/thumbnails"], - }, - { - "name" : "gulp", - "script" : "./gulpfile.js", - "watch" : true, - "ignore_watch": ["./node_modules", "./server/"], - } - ] + "apps": [ + { + "name": "zoff", + "script": "./server/app.js", + "watch": true, + "ignore_watch": [ + "./node_modules", + "./server/public/assets/images/thumbnails" + ] + }, + { + "name": "gulp", + "script": "./gulpfile.js", + "watch": true, + "ignore_watch": ["./node_modules", "./server/"] + } + ] } diff --git a/server/VERSION.js b/server/VERSION.js index fa4eedcb..7ae9cbbe 100644 --- a/server/VERSION.js +++ b/server/VERSION.js @@ -1,5 +1,5 @@ VERSION = 6; try { - module.exports = VERSION; -} catch(e) {} + module.exports = VERSION; +} catch (e) {} diff --git a/server/models/user.js b/server/models/user.js index 489c2efb..2cafa3b3 100644 --- a/server/models/user.js +++ b/server/models/user.js @@ -1,24 +1,24 @@ // app/models/user.js // load the things we need -var mongoose = require('mongoose'); -var bcrypt = require('bcrypt-nodejs'); +var mongoose = require("mongoose"); +var bcrypt = require("bcrypt-nodejs"); // define the schema for our user model var userSchema = mongoose.Schema({ - username : String, - password : String, + username: String, + password: String }); // methods ====================== // generating a hash userSchema.methods.generateHash = function(password) { - return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null); + return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null); }; // checking if password is valid userSchema.methods.validPassword = function(password) { - return bcrypt.compareSync(password, this.password); + return bcrypt.compareSync(password, this.password); }; // create the model for users and expose it to our app -module.exports = mongoose.model('User', userSchema); +module.exports = mongoose.model("User", userSchema); diff --git a/server/public/assets/admin/authenticated/js/main.js b/server/public/assets/admin/authenticated/js/main.js index edbf4729..67fcf56f 100644 --- a/server/public/assets/admin/authenticated/js/main.js +++ b/server/public/assets/admin/authenticated/js/main.js @@ -1,1099 +1,1302 @@ var connection_options = { - 'sync disconnect on unload':true, - 'secure': true, - 'force new connection': true + "sync disconnect on unload": true, + secure: 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 = {}; function toast(text, length, classes) { - M.toast({ html: text, displayLength: length, classes: classes}); + M.toast({ html: text, displayLength: length, classes: classes }); } 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.init(document.querySelector(".tabs_admin_info")); - api_token_list = document.querySelector("#api_token_list").cloneNode(true); - document.querySelector("#api_token_list").remove(); - loaded(); + M.Tabs.init(document.querySelector(".tabs_admin"), { + onShow: function() { + if (this.index == 2) { + M.Tabs.getInstance( + document.querySelector(".tabs_admin_info") + ).updateTabIndicator(); + } + } + }); + M.Tabs.init(document.querySelector(".tabs_admin_info")); + api_token_list = document.querySelector("#api_token_list").cloneNode(true); + document.querySelector("#api_token_list").remove(); + loaded(); - addClass(".channel_things", "hide"); - removeClass(".preloader-wrapper", "hide"); + addClass(".channel_things", "hide"); + removeClass(".preloader-wrapper", "hide"); - document.addEventListener("click", function(event) { - handleEvent(event, event.target, false, "click"); - }, true); + document.addEventListener( + "click", + function(event) { + handleEvent(event, event.target, false, "click"); + }, + true + ); - document.addEventListener("input", function(event) { - handleEvent(event, event.target, false, "input"); - }, true); + document.addEventListener( + "input", + function(event) { + handleEvent(event, event.target, false, "input"); + }, + true + ); - document.addEventListener("change", function(event) { - handleEvent(event, event.target, false, "change"); - }, true); + document.addEventListener( + "change", + function(event) { + handleEvent(event, event.target, false, "change"); + }, + true + ); - document.addEventListener("submit", function(event) { - handleEvent(event, event.target, false, "submit"); - }, true); + document.addEventListener( + "submit", + function(event) { + handleEvent(event, event.target, false, "submit"); + }, + true + ); - document.getElementById("refresh_all").addEventListener("click", function(event) { - event.preventDefault(); - document.getElementById("descriptions_cont").innerHTML = ""; - document.getElementById("thumbnails_cont").innerHTML = ""; - document.querySelector(".names-container").innerHTML = ""; - var elements = document.querySelectorAll(".api_token_container"); - for(var i = 0; i < elements.length; i++) { - elements[i].remove(); - } + document + .getElementById("refresh_all") + .addEventListener("click", function(event) { + event.preventDefault(); + document.getElementById("descriptions_cont").innerHTML = ""; + document.getElementById("thumbnails_cont").innerHTML = ""; + document.querySelector(".names-container").innerHTML = ""; + var elements = document.querySelectorAll(".api_token_container"); + for (var i = 0; i < elements.length; i++) { + elements[i].remove(); + } - addClass(".channel_things", "hide"); + addClass(".channel_things", "hide"); - removeClass(".preloader-wrapper", "hide"); - loaded(); - document.querySelector("#listeners").innerHTML = ""; - socket.emit("get_spread"); - }); + removeClass(".preloader-wrapper", "hide"); + loaded(); + document.querySelector("#listeners").innerHTML = ""; + socket.emit("get_spread"); + }); }); addListener("click", ".update_api_token", function(event) { - this.preventDefault(); - var that = event; - var id = that.getAttribute("data-id"); - var limit = document.querySelector("#limit-" + id).value; + this.preventDefault(); + var that = event; + var id = that.getAttribute("data-id"); + var limit = document.querySelector("#limit-" + id).value; - toggleClass(that, "disabled"); + toggleClass(that, "disabled"); - toggleClass("#delete-" + id, "disabled"); - ajax({ - type: "PUT", - url: "api/api_token", - headers: { - "Content-Type": "application/json" - }, - data: { - id: id, - limit: limit, - }, - success: function(response) { - if(response == "OK") { - toast("Updated limit!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - toggleClass(that, "disabled"); - toggleClass("#delete-" + id, "disabled"); - } - }); + toggleClass("#delete-" + id, "disabled"); + ajax({ + type: "PUT", + url: "api/api_token", + headers: { + "Content-Type": "application/json" + }, + data: { + id: id, + limit: limit + }, + success: function(response) { + if (response == "OK") { + toast("Updated limit!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + toggleClass(that, "disabled"); + toggleClass("#delete-" + id, "disabled"); + } + }); }); addListener("click", ".delete_api_token", function(event) { - this.preventDefault(); - var that = event; - var id = that.getAttribute("data-id"); - toggleClass(that, "disabled"); - toggleClass("#limit-" + id, "disabled"); - ajax({ - type: "DELETE", - url: "api/api_token", - headers: { - "Content-Type": "application/json" - }, - data: { - id: id - }, - success: function(response) { - if(response == "success") { - toast("Removed token!", 2000, "green lighten"); - document.querySelector("#element-" + id).remove(); - } else { - toast("Something went wrong...", 2000, "red lighten"); - toggleClass(that, "disabled"); - toggleClass("#limit-" + id, "disabled"); - } - }, - }); + this.preventDefault(); + var that = event; + var id = that.getAttribute("data-id"); + toggleClass(that, "disabled"); + toggleClass("#limit-" + id, "disabled"); + ajax({ + type: "DELETE", + url: "api/api_token", + headers: { + "Content-Type": "application/json" + }, + data: { + id: id + }, + success: function(response) { + if (response == "success") { + toast("Removed token!", 2000, "green lighten"); + document.querySelector("#element-" + id).remove(); + } else { + toast("Something went wrong...", 2000, "red lighten"); + toggleClass(that, "disabled"); + toggleClass("#limit-" + id, "disabled"); + } + } + }); }); addListener("click", ".approve_name", function(event) { - var that = event; - var name = that.getAttribute("data-name"); - var value = that.parentElement.querySelector("input").value; - ajax({ - type: "POST", - url: "/api/names", - data: { - icon: value, - name: name, - }, - headers: { - "Content-Type": "application/json" - }, - success: function(resp) { - if(resp == true) { - toast("Approved image!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + var that = event; + var name = that.getAttribute("data-name"); + var value = that.parentElement.querySelector("input").value; + ajax({ + type: "POST", + url: "/api/names", + data: { + icon: value, + name: name + }, + headers: { + "Content-Type": "application/json" + }, + success: function(resp) { + if (resp == true) { + toast("Approved image!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", ".remove_name", function(event) { - var that = event; - var name = that.getAttribute("data-name"); - ajax({ - type: "DELETE", - url: "/api/names", - data: { - name: name, - }, - headers: { - "Content-Type": "application/json" - }, - success: function(resp) { - if(resp == true) { - toast("Removed username!", 2000, "green lighten"); - that.parentElement.remove(); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + var that = event; + var name = that.getAttribute("data-name"); + ajax({ + type: "DELETE", + url: "/api/names", + data: { + name: name + }, + headers: { + "Content-Type": "application/json" + }, + success: function(resp) { + if (resp == true) { + toast("Removed username!", 2000, "green lighten"); + that.parentElement.remove(); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", ".thumbnail_link", function(event) { - this.preventDefault(); - window.open("https:" + event.value,'_blank'); + this.preventDefault(); + window.open("https:" + event.value, "_blank"); }); addListener("click", "#get_token", function(event) { - this.preventDefault(); - ajax({ - type: "GET", - url: "/api/token", - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response != false){ - document.querySelector("#new_token").value = response.token; - toggleClass("#get_token", "hide"); - toggleClass("#remove_token", "hide"); - } - } - }) + this.preventDefault(); + ajax({ + type: "GET", + url: "/api/token", + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response != false) { + document.querySelector("#new_token").value = response.token; + toggleClass("#get_token", "hide"); + toggleClass("#remove_token", "hide"); + } + } + }); }); addListener("click", ".approve_thumbnails", function(event) { - this.preventDefault(); - var that = event; - var channel = that.getAttribute("data-channel"); - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - ajax({ - type: "POST", - url: "/api/approve_thumbnail", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - that.parentElement.remove(); - var length = parseInt(document.querySelector(".thumbnails-badge").innerText); - length = length - 1; - increaseInfo(-1); - document.querySelector(".thumbnails-badge").innerText = length; - if(length <= 0){ - addClass(".thumbnails-badge", "hide"); - } - toast("Approved Thumbnail!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - }, - error: function(err) { - } - }); + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/approve_thumbnail", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + that.parentElement.remove(); + var length = parseInt( + document.querySelector(".thumbnails-badge").innerText + ); + length = length - 1; + increaseInfo(-1); + document.querySelector(".thumbnails-badge").innerText = length; + if (length <= 0) { + addClass(".thumbnails-badge", "hide"); + } + toast("Approved Thumbnail!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + }, + error: function(err) {} + }); }); addListener("click", ".deny_thumbnails", function(event) { - this.preventDefault(); - var that = event; - var channel = that.getAttribute("data-channel"); - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } - ajax({ - type: "POST", - url: "/api/deny_thumbnail", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - that.parentElement.remove(); - var length = parseInt(document.querySelector(".thumbnails-badge").innerText); - length = length - 1; - increaseInfo(-1); - document.querySelector(".thumbnails-badge").innerText = length; - if(length <= 0){ - addClass(".thumbnails-badge", "hide"); - } - toast("Denied thumbnail!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + ajax({ + type: "POST", + url: "/api/deny_thumbnail", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + that.parentElement.remove(); + var length = parseInt( + document.querySelector(".thumbnails-badge").innerText + ); + length = length - 1; + increaseInfo(-1); + document.querySelector(".thumbnails-badge").innerText = length; + if (length <= 0) { + addClass(".thumbnails-badge", "hide"); + } + toast("Denied thumbnail!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", ".approve_descriptions", function(event) { - this.preventDefault(); - var that = event; - var channel = that.getAttribute("data-channel"); - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } - ajax({ - type: "POST", - url: "/api/approve_description", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - that.parentElement.remove(); - var length = parseInt(document.querySelector(".descriptions-badge").innerText); - length = length - 1; - increaseInfo(-1); - document.querySelector(".descriptions-badge").innerText = length; - if(length <= 0){ - addClass(".descriptions-badge", "hide"); - } - toast("Approved description!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + ajax({ + type: "POST", + url: "/api/approve_description", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + that.parentElement.remove(); + var length = parseInt( + document.querySelector(".descriptions-badge").innerText + ); + length = length - 1; + increaseInfo(-1); + document.querySelector(".descriptions-badge").innerText = length; + if (length <= 0) { + addClass(".descriptions-badge", "hide"); + } + toast("Approved description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", ".deny_descriptions", function(event) { - this.preventDefault(); - var that = event; - var channel = that.getAttribute("data-channel"); - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } - ajax({ - type: "POST", - url: "/api/deny_description", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - that.parentElement.remove(); - var length = parseInt(document.querySelector(".descriptions-badge").innerText); - length = length - 1; - increaseInfo(-1); - document.querySelector(".descriptions-badge").innerText = length; - if(length <= 0){ - addClass(".descriptions-badge", "hide"); - } - toast("Denied description!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + ajax({ + type: "POST", + url: "/api/deny_description", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + that.parentElement.remove(); + var length = parseInt( + document.querySelector(".descriptions-badge").innerText + ); + length = length - 1; + increaseInfo(-1); + document.querySelector(".descriptions-badge").innerText = length; + if (length <= 0) { + addClass(".descriptions-badge", "hide"); + } + toast("Denied description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", ".approve_rules", function(event) { - this.preventDefault(); - var that = event; - var channel = that.getAttribute("data-channel"); - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } - ajax({ - type: "POST", - url: "/api/approve_rules", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - that.parentElement.remove(); - var length = parseInt(document.querySelector(".rules-badge").innerText); - length = length - 1; - increaseInfo(-1); - document.querySelector(".rules-badge").innerText = length; - if(length <= 0){ - addClass(".rules-badge", "hide"); - } - toast("Approved rules!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + ajax({ + type: "POST", + url: "/api/approve_rules", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + that.parentElement.remove(); + var length = parseInt(document.querySelector(".rules-badge").innerText); + length = length - 1; + increaseInfo(-1); + document.querySelector(".rules-badge").innerText = length; + if (length <= 0) { + addClass(".rules-badge", "hide"); + } + toast("Approved rules!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", ".deny_rules", function(event) { - this.preventDefault(); - var that = event; - var channel = that.getAttribute("data-channel"); - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } + this.preventDefault(); + var that = event; + var channel = that.getAttribute("data-channel"); + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } - ajax({ - type: "POST", - url: "/api/deny_rules", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - that.parentElement.remove(); - var length = parseInt(document.querySelector(".rules-badge").innerText); - length = length - 1; - increaseInfo(-1); - document.querySelector(".rules-badge").innerText = length; - if(length <= 0){ - addClass(".rules-badge", "hide"); - } - toast("Denied description!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + ajax({ + type: "POST", + url: "/api/deny_rules", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + that.parentElement.remove(); + var length = parseInt(document.querySelector(".rules-badge").innerText); + length = length - 1; + increaseInfo(-1); + document.querySelector(".rules-badge").innerText = length; + if (length <= 0) { + addClass(".rules-badge", "hide"); + } + toast("Denied description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", "#remove_description_button", function(event) { - this.preventDefault(); - var that = event; - var channel = document.querySelector("#remove_description").value; - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - ajax({ - type: "POST", - url: "/api/remove_description", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - toast("Removed description!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + this.preventDefault(); + var that = event; + var channel = document.querySelector("#remove_description").value; + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/remove_description", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + toast("Removed description!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); - addListener("click", "#remove_rules_button", function(event) { - this.preventDefault(); - var that = event; - var channel = document.querySelector("#remove_rules").value; - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - ajax({ - type: "POST", - url: "/api/remove_rules", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - toast("Removed rules!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + this.preventDefault(); + var that = event; + var channel = document.querySelector("#remove_rules").value; + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/remove_rules", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + toast("Removed rules!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); addListener("click", "#remove_thumbnail_button", function(event) { - this.preventDefault(); - var that = event; - var channel = document.querySelector("#remove_thumbnail").value; - if(!channel) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } + this.preventDefault(); + var that = event; + var channel = document.querySelector("#remove_thumbnail").value; + if (!channel) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } - ajax({ - type: "POST", - url: "/api/remove_thumbnail", - data: { - channel: channel - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response){ - toast("Removed thumbnail!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + ajax({ + type: "POST", + url: "/api/remove_thumbnail", + data: { + channel: channel + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response) { + toast("Removed thumbnail!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); }); function delete_channel(that) { - var to_delete = document.querySelector("#delete_channel_name").value; - if(!to_delete) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - var r = confirm("Delete list \""+ decodeChannelName(to_delete) + "\"?"); - if (r == true) { - ajax({ - type: "POST", - url: "/api/delete", - data: { - _id: to_delete - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response == true){ - loaded(); - toast("Deleted channel!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }) - } + var to_delete = document.querySelector("#delete_channel_name").value; + if (!to_delete) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + var r = confirm('Delete list "' + decodeChannelName(to_delete) + '"?'); + if (r == true) { + ajax({ + type: "POST", + url: "/api/delete", + data: { + _id: to_delete + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response == true) { + loaded(); + toast("Deleted channel!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); + } } addListener("submit", "#delete_channel", function(event) { - this.preventDefault(); - delete_channel(event); + this.preventDefault(); + delete_channel(event); }); addListener("click", "#delete_channel_button", function(event) { - this.preventDefault(); - delete_channel(event); + this.preventDefault(); + delete_channel(event); }); addListener("click", "#remove_token", function(event) { - this.preventDefault(); - ajax({ - type: "GET", - url: "/api/remove_token", - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response != false){ - document.querySelector("#new_token").value = ""; - toggleClass("#get_token", "hide"); - toggleClass("#remove_token", "hide"); - } - } - }) + this.preventDefault(); + ajax({ + type: "GET", + url: "/api/remove_token", + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response != false) { + document.querySelector("#new_token").value = ""; + toggleClass("#get_token", "hide"); + toggleClass("#remove_token", "hide"); + } + } + }); }); addListener("submit", "#change_pinned", function(event) { - this.preventDefault(); - change_pinned(event); + this.preventDefault(); + change_pinned(event); }); addListener("click", "#change_pinned_button", function(event) { - this.preventDefault(); - change_pinned(event); + this.preventDefault(); + change_pinned(event); }); addListener("click", "#delete_admin_button", function(event) { - this.preventDefault(); - delete_admin_list(event); + this.preventDefault(); + delete_admin_list(event); }); function change_pinned(that) { - var to_pin = document.querySelector("#frontpage_pinned").value; - if(!to_pin) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - ajax({ - type: "POST", - url: "/api/pinned", - data: { - _id: to_pin - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response == true){ - toast("Pinned channel!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }) + var to_pin = document.querySelector("#frontpage_pinned").value; + if (!to_pin) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/pinned", + data: { + _id: to_pin + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response == true) { + toast("Pinned channel!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); } function delete_admin_list(that) { - var to_remove_password = document.querySelector("#delete_list_name").value; - if(!to_remove_password) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - ajax({ - type: "POST", - url: "/api/admin", - data: { - _id: to_remove_password - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response == true){ - toast("Removed admin password!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }); + var to_remove_password = document.querySelector("#delete_list_name").value; + if (!to_remove_password) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/admin", + data: { + _id: to_remove_password + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response == true) { + toast("Removed admin password!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); } function delete_userpass(that) { - var to_remove_password = document.querySelector("#delete_userpass_name").value; - if(!to_remove_password) { - toast("Something went wrong...", 2000, "red lighten"); - return; - } - ajax({ - type: "POST", - url: "/api/userpass", - data: { - _id: to_remove_password - }, - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response == true){ - toast("Removed userpass password!", 2000, "green lighten"); - } else { - toast("Something went wrong...", 2000, "red lighten"); - } - } - }) + var to_remove_password = document.querySelector("#delete_userpass_name") + .value; + if (!to_remove_password) { + toast("Something went wrong...", 2000, "red lighten"); + return; + } + ajax({ + type: "POST", + url: "/api/userpass", + data: { + _id: to_remove_password + }, + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response == true) { + toast("Removed userpass password!", 2000, "green lighten"); + } else { + toast("Something went wrong...", 2000, "red lighten"); + } + } + }); } addListener("click", "#delete_userpass_button", function(event) { - this.preventDefault(); - delete_userpass(event); + this.preventDefault(); + delete_userpass(event); }); addListener("submit", "#delete_list", function(event) { - this.preventDefault(); - delete_admin_list(event); + this.preventDefault(); + delete_admin_list(event); }); addListener("submit", "#delete_userpass", function(event) { - this.preventDefault(); - delete_userpass(event); + this.preventDefault(); + delete_userpass(event); }); -socket.on("spread_listeners", function(obj){ - document.querySelector("#listeners").insertAdjacentHTML("beforeend", "

Private listeners: " + obj.offline + "

"); - document.querySelector("#listeners").insertAdjacentHTML("beforeend", "

Total listeners: " + obj.total + "

"); - document.querySelector("#listeners").insertAdjacentHTML("beforeend", "
"); - 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){ - document.querySelector("#listeners").insertAdjacentHTML("beforeend", "

" + decodeChannelName(obj.online_users[x]._id) + ": " + obj.online_users[x].users.length + "

"); - } - } +socket.on("spread_listeners", function(obj) { + document + .querySelector("#listeners") + .insertAdjacentHTML( + "beforeend", + "

Private listeners: " + obj.offline + "

" + ); + document + .querySelector("#listeners") + .insertAdjacentHTML( + "beforeend", + "

Total listeners: " + obj.total + "

" + ); + document.querySelector("#listeners").insertAdjacentHTML("beforeend", "
"); + 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 + ) { + document + .querySelector("#listeners") + .insertAdjacentHTML( + "beforeend", + "

" + + decodeChannelName(obj.online_users[x]._id) + + ": " + + obj.online_users[x].users.length + + "

" + ); + } + } }); -function add_to_tab(dest, resp){ - for(var x = 0; x < resp.length; x++){ - if(dest == "thumbnails"){ - document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "
" + decodeChannelName(resp[x].channel) + "
checkX
"); - } else if(dest == "descriptions"){ - document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "
" + decodeChannelName(resp[x].channel) + "
checkX
"); - } else { - resp[x].rules = resp[x].rules.replace(/\n/g, " /n\\ "); - document.querySelector("#" + dest + "_cont").insertAdjacentHTML("beforeend", "
" + decodeChannelName(resp[x].channel) + "
checkX
"); - } - } +function add_to_tab(dest, resp) { + for (var x = 0; x < resp.length; x++) { + if (dest == "thumbnails") { + document + .querySelector("#" + dest + "_cont") + .insertAdjacentHTML( + "beforeend", + "
" + + decodeChannelName(resp[x].channel) + + "
checkX
" + ); + } else if (dest == "descriptions") { + document + .querySelector("#" + dest + "_cont") + .insertAdjacentHTML( + "beforeend", + "
" + + decodeChannelName(resp[x].channel) + + "
checkX
" + ); + } else { + resp[x].rules = resp[x].rules.replace(/\n/g, " /n\\ "); + document + .querySelector("#" + dest + "_cont") + .insertAdjacentHTML( + "beforeend", + "
" + + decodeChannelName(resp[x].channel) + + "
checkX
" + ); + } + } } function escapeHtml(text) { var map = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - "'": ''' + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'" }; - 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); - if(isNaN(currentNumber)) currentNumber = 0; - document.querySelector(".info-badge").innerText = currentNumber + num; - currentNumber += num; - if(currentNumber <= 0) { - addClass(".info-badge", "hide"); - } - } catch(e) { - document.querySelector(".info-badge").innerText = 1; - } + removeClass(".info-badge", "hide"); + try { + var currentNumber = parseInt( + document.querySelector(".info-badge").innerText + ); + if (isNaN(currentNumber)) currentNumber = 0; + document.querySelector(".info-badge").innerText = currentNumber + num; + currentNumber += num; + if (currentNumber <= 0) { + addClass(".info-badge", "hide"); + } + } catch (e) { + document.querySelector(".info-badge").innerText = 1; + } } function loaded() { - ajax({ - type: "GET", - headers: { - "Content-Type": "application/json" - }, - url: "/api/api_token", - success: function(response) { - if(response.length == 0) { - addClass(".header-api-fields", "hide"); - return; - } - removeClass(".header-api-fields", "hide"); - for(var i = 0; i < response.length; i++) { - var to_add = api_token_list.cloneNode(true); - 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(".update_api_token").setAttribute("id", "update-" + response[i]._id); - to_add.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", '
' + to_add.innerHTML + "
"); - document.querySelector("#limit-" + response[i]._id).value = parseInt(response[i].limit); - } - }, - error: function(err) { - } - }); + ajax({ + type: "GET", + headers: { + "Content-Type": "application/json" + }, + url: "/api/api_token", + success: function(response) { + if (response.length == 0) { + addClass(".header-api-fields", "hide"); + return; + } + removeClass(".header-api-fields", "hide"); + for (var i = 0; i < response.length; i++) { + var to_add = api_token_list.cloneNode(true); + 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(".update_api_token") + .setAttribute("id", "update-" + response[i]._id); + to_add + .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", + '
' + + to_add.innerHTML + + "
" + ); + document.querySelector("#limit-" + response[i]._id).value = parseInt( + response[i].limit + ); + } + }, + error: function(err) {} + }); - ajax({ - type: "GET", - headers: { - "Content-Type": "application/json" - }, - url: "/api/lists", - success: function(response){ - response = response.sort(predicate({ - name: '_id', - reverse: false - })); - var output_pinned = ''; - var output_delete = ''; - for(var x = 0; x < response.length; x++){ - if(response[x].count > 2){ - output_pinned += ""; - } - output_delete += ""; - } + ajax({ + type: "GET", + headers: { + "Content-Type": "application/json" + }, + url: "/api/lists", + success: function(response) { + response = response.sort( + predicate({ + name: "_id", + reverse: false + }) + ); + var output_pinned = + ''; + var output_delete = + ''; + for (var x = 0; x < response.length; x++) { + if (response[x].count > 2) { + output_pinned += + ""; + } + output_delete += + ""; + } - document.querySelector("#frontpage_pinned").innerHTML = output_pinned; - document.querySelector("#remove_thumbnail").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]); - } + document.querySelector("#frontpage_pinned").innerHTML = output_pinned; + document.querySelector( + "#remove_thumbnail" + ).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]); + } - addClass(".preloader-wrapper", "hide"); - removeClass(".channel_things", "hide"); - } - }); + addClass(".preloader-wrapper", "hide"); + removeClass(".channel_things", "hide"); + } + }); - ajax({ - type: "GET", - url: "/api/names", - headers: { - "Content-Type": "application/json" - }, - success: function(response) { - for(var i = 0; i < response.length; i++) { - var icon = ""; - if(response[i].icon && response[i].icon != "") { - icon = "" + escapeHtml(response[i]._id) + ""; - } + ajax({ + type: "GET", + url: "/api/names", + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + for (var i = 0; i < response.length; i++) { + var icon = ""; + if (response[i].icon && response[i].icon != "") { + icon = + "" + + escapeHtml(response[i]._id) + + ""; + } - document.querySelector(".names-container").insertAdjacentHTML("beforeend", "
" + icon + escapeHtml(response[i]._id) + "
checkclose
"); - } - }, - }); + document + .querySelector(".names-container") + .insertAdjacentHTML( + "beforeend", + "
" + + icon + + escapeHtml(response[i]._id) + + "
checkclose
" + ); + } + } + }); - ajax({ - type: "GET", - url: "/api/thumbnails", - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response.length > 0){ - removeClass(".thumbnails-badge", "hide"); - document.querySelector(".thumbnails-badge").innerText = response.length; - increaseInfo(response.length); - } - add_to_tab("thumbnails", response); - } - }); + ajax({ + type: "GET", + url: "/api/thumbnails", + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response.length > 0) { + removeClass(".thumbnails-badge", "hide"); + document.querySelector(".thumbnails-badge").innerText = response.length; + increaseInfo(response.length); + } + add_to_tab("thumbnails", response); + } + }); - ajax({ - type: "GET", - url: "/api/descriptions", - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response.length > 0){ - removeClass(".descriptions-badge", "hide"); - document.querySelector(".descriptions-badge").innerText = response.length; - increaseInfo(response.length); - } - add_to_tab("descriptions", response); - } - }); + ajax({ + type: "GET", + url: "/api/descriptions", + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response.length > 0) { + removeClass(".descriptions-badge", "hide"); + document.querySelector(".descriptions-badge").innerText = + response.length; + increaseInfo(response.length); + } + add_to_tab("descriptions", response); + } + }); - ajax({ - type: "GET", - url: "/api/rules", - headers: { - "Content-Type": "application/json" - }, - success: function(response){ - if(response.length > 0){ - removeClass(".rules-badge", "hide"); - document.querySelector(".rules-badge").innerText = response.length; - increaseInfo(response.length); - } - add_to_tab("rules", response); - } - }); + ajax({ + type: "GET", + url: "/api/rules", + headers: { + "Content-Type": "application/json" + }, + success: function(response) { + if (response.length > 0) { + removeClass(".rules-badge", "hide"); + document.querySelector(".rules-badge").innerText = response.length; + increaseInfo(response.length); + } + add_to_tab("rules", response); + } + }); } function predicate() { - var fields = [], - n_fields = arguments.length, - field, name, cmp; + var fields = [], + n_fields = arguments.length, + field, + name, + cmp; - var default_cmp = function (a, b) { - if(a == undefined) a = 0; - if(b == undefined) b = 0; - if (a === b) return 0; - return a < b ? -1 : 1; - }, - getCmpFunc = function (primer, reverse) { - var dfc = default_cmp, - // closer in scope - cmp = default_cmp; - if (primer) { - cmp = function (a, b) { - return dfc(primer(a), primer(b)); - }; - } - if (reverse) { - return function (a, b) { - return -1 * cmp(a, b); - }; - } - return cmp; - }; + var default_cmp = function(a, b) { + if (a == undefined) a = 0; + if (b == undefined) b = 0; + if (a === b) return 0; + return a < b ? -1 : 1; + }, + getCmpFunc = function(primer, reverse) { + var dfc = default_cmp, + // closer in scope + cmp = default_cmp; + if (primer) { + cmp = function(a, b) { + return dfc(primer(a), primer(b)); + }; + } + if (reverse) { + return function(a, b) { + return -1 * cmp(a, b); + }; + } + return cmp; + }; - // preprocess sorting options - for (var i = 0; i < n_fields; i++) { - field = arguments[i]; - if (typeof field === 'string') { - name = field; - cmp = default_cmp; - } else { - name = field.name; - cmp = getCmpFunc(field.primer, field.reverse); - } - fields.push({ - name: name, - cmp: cmp - }); - } + // preprocess sorting options + for (var i = 0; i < n_fields; i++) { + field = arguments[i]; + if (typeof field === "string") { + name = field; + cmp = default_cmp; + } else { + name = field.name; + cmp = getCmpFunc(field.primer, field.reverse); + } + fields.push({ + name: name, + cmp: cmp + }); + } - // final comparison function - return function (A, B) { - var name, result; - for (var i = 0; i < n_fields; i++) { - result = 0; - field = fields[i]; - name = field.name; + // final comparison function + return function(A, B) { + var name, result; + for (var i = 0; i < n_fields; i++) { + result = 0; + field = fields[i]; + name = field.name; - result = field.cmp(A[name], B[name]); - if (result !== 0) break; - } - return result; - }; + result = field.cmp(A[name], B[name]); + if (result !== 0) break; + } + return result; + }; } function removeClass(element, className) { - try { - if(typeof(element) == "object") { - element.classList.remove(className); - } else if(element.substring(0,1) == "#") { - document.getElementById(element.substring(1)).classList.remove(className); - } else { - var elements = document.getElementsByClassName(element.substring(1)); - for(var i = 0; i < elements.length; i++) { - elements[i].classList.remove(className); - } - } - } catch(e) { - //console.log(e); - } + try { + if (typeof element == "object") { + element.classList.remove(className); + } else if (element.substring(0, 1) == "#") { + document.getElementById(element.substring(1)).classList.remove(className); + } else { + var elements = document.getElementsByClassName(element.substring(1)); + for (var i = 0; i < elements.length; i++) { + elements[i].classList.remove(className); + } + } + } catch (e) { + //console.log(e); + } } function addClass(element, className) { - try { - if(typeof(element) == "object") { - try { - if(element.length > 0) { - for(var i = 0; i < element.length; i++) { - if(element[i].className.indexOf(className) == -1) { - element[i].className += " " + className; - } - } - } else { - if(element.className.indexOf(className) == -1) { - element.className += " " + className; - } - } - } catch(e) { - if(element.className.indexOf(className) == -1) { - element.className += " " + className; - } - } - } else if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - if(elem.className.indexOf(className) == -1) { - elem.className += " " + className; - } - } else { - var elements; - if(element.substring(0,1) == ".") { - elements = document.getElementsByClassName(element.substring(1)); - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - if(elements[i].className.indexOf(className) == -1) { - elements[i].className += " " + className; - } - } - } - }catch(e) {} + try { + if (typeof element == "object") { + try { + if (element.length > 0) { + for (var i = 0; i < element.length; i++) { + if (element[i].className.indexOf(className) == -1) { + element[i].className += " " + className; + } + } + } else { + if (element.className.indexOf(className) == -1) { + element.className += " " + className; + } + } + } catch (e) { + if (element.className.indexOf(className) == -1) { + element.className += " " + className; + } + } + } else if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + if (elem.className.indexOf(className) == -1) { + elem.className += " " + className; + } + } else { + var elements; + if (element.substring(0, 1) == ".") { + elements = document.getElementsByClassName(element.substring(1)); + } else { + elements = document.getElementsByTagName(element); + } + for (var i = 0; i < elements.length; i++) { + if (elements[i].className.indexOf(className) == -1) { + elements[i].className += " " + className; + } + } + } + } catch (e) {} } function decodeChannelName(str) { var _fn = decodeURIComponent; str = str.toUpperCase(); try { - var toReturn = _fn(str.replace(/%5F/g, "_").replace(/%27/g, "'")); - return toReturn.toLowerCase(); - } catch(e) { - return str.toLowerCase(); + var toReturn = _fn(str.replace(/%5F/g, "_").replace(/%27/g, "'")); + return toReturn.toLowerCase(); + } catch (e) { + return str.toLowerCase(); } } function toggleClass(element, className) { - try { - if(typeof(element) == "object") { - if(element.className.indexOf(className) == -1) { - addClass(element, className); - } else { - removeClass(element, className); - } - } else if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - if(elem.className.indexOf(className) == -1) { - addClass(elem, className); - } else { - removeClass(elem, className); - } - } else { - var elements; - if(element.substring(0,1) == ".") { - var testSplit = element.substring(1).split(" "); - if(testSplit.length > 1) { - var insideElement = document.getElementsByClassName(testSplit[0]); - elements = []; - for(var i = 0; i < insideElement.length; i++) { - var innards = insideElement[i].querySelectorAll(testSplit[1]); - for(var y = 0; y < innards.length; y++) { - elements.push(innards[y]); - } - } - } else { - elements = document.getElementsByClassName(element.substring(1)); - } - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - if(elements[i].className.indexOf(className) == -1) { - addClass(elements[i], className); - } else { - removeClass(element, className); - } - } - } - }catch(e) { - //console.log(e); - } + try { + if (typeof element == "object") { + if (element.className.indexOf(className) == -1) { + addClass(element, className); + } else { + removeClass(element, className); + } + } else if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + if (elem.className.indexOf(className) == -1) { + addClass(elem, className); + } else { + removeClass(elem, className); + } + } else { + var elements; + if (element.substring(0, 1) == ".") { + var testSplit = element.substring(1).split(" "); + if (testSplit.length > 1) { + var insideElement = document.getElementsByClassName(testSplit[0]); + elements = []; + for (var i = 0; i < insideElement.length; i++) { + var innards = insideElement[i].querySelectorAll(testSplit[1]); + for (var y = 0; y < innards.length; y++) { + elements.push(innards[y]); + } + } + } else { + elements = document.getElementsByClassName(element.substring(1)); + } + } else { + elements = document.getElementsByTagName(element); + } + for (var i = 0; i < elements.length; i++) { + if (elements[i].className.indexOf(className) == -1) { + addClass(elements[i], className); + } else { + removeClass(element, className); + } + } + } + } catch (e) { + //console.log(e); + } } function ajax(obj) { - var _async = true; - if(obj.async) _async = obj.async; - if(obj.method == undefined && obj.type != undefined) obj.method = obj.type; - if(obj.method == undefined) obj.method = "GET"; - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4 - if (xmlhttp.status == 200 || xmlhttp.status == 201 || xmlhttp.status == 202) { - try { - obj.success(JSON.parse(xmlhttp.responseText), xmlhttp); - } catch(e) { - obj.success(xmlhttp.responseText, xmlhttp); - } - } - else if(obj.hasOwnProperty("error")){ - obj.error(xmlhttp); - } - } - }; + var _async = true; + if (obj.async) _async = obj.async; + if (obj.method == undefined && obj.type != undefined) obj.method = obj.type; + if (obj.method == undefined) obj.method = "GET"; + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == XMLHttpRequest.DONE) { + // XMLHttpRequest.DONE == 4 + if ( + xmlhttp.status == 200 || + xmlhttp.status == 201 || + xmlhttp.status == 202 + ) { + try { + obj.success(JSON.parse(xmlhttp.responseText), xmlhttp); + } catch (e) { + obj.success(xmlhttp.responseText, xmlhttp); + } + } else if (obj.hasOwnProperty("error")) { + obj.error(xmlhttp); + } + } + }; - xmlhttp.open(obj.method, obj.url, _async); - if(obj.headers) { - for(header in obj.headers) { - xmlhttp.setRequestHeader(header, obj.headers[header]); - } - } - if(obj.data) { - if(typeof(obj.data) == "object") obj.data = JSON.stringify(obj.data); - //xmlhttp.send(sendRequest); - xmlhttp.send(obj.data); - } - else xmlhttp.send(); + xmlhttp.open(obj.method, obj.url, _async); + if (obj.headers) { + for (header in obj.headers) { + xmlhttp.setRequestHeader(header, obj.headers[header]); + } + } + if (obj.data) { + if (typeof obj.data == "object") obj.data = JSON.stringify(obj.data); + //xmlhttp.send(sendRequest); + xmlhttp.send(obj.data); + } else xmlhttp.send(); } function handleEvent(e, target, tried, type) { - var path = e.path || (e.composedPath && e.composedPath()); - if(!path) { - var path = [target]; - var parent = target.parentElement; - while(parent != null) { - path.push(parent); - try { - parent = parent.parentElement; - } catch(e){break;} - } + var path = e.path || (e.composedPath && e.composedPath()); + if (!path) { + var path = [target]; + var parent = target.parentElement; + while (parent != null) { + path.push(parent); + try { + parent = parent.parentElement; + } catch (e) { + break; + } } - if(path) { - for(var y = 0; y < path.length; y++) { - var target = path[y]; - if(dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) { - dynamicListeners[type]["#" + target.id].call(e, target); - return; - } else { - if(target.classList == undefined) return; - for(var i = 0; i < target.classList.length; i++) { - if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) { - dynamicListeners[type]["." + target.classList[i]].call(e, target); - return; - } - } - } + } + if (path) { + for (var y = 0; y < path.length; y++) { + var target = path[y]; + if (dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) { + dynamicListeners[type]["#" + target.id].call(e, target); + return; + } else { + if (target.classList == undefined) return; + for (var i = 0; i < target.classList.length; i++) { + if ( + dynamicListeners[type] && + dynamicListeners[type]["." + target.classList[i]] + ) { + dynamicListeners[type]["." + target.classList[i]].call(e, target); + return; + } } + } } + } } function addListener(type, element, callback) { - if(dynamicListeners[type] == undefined) dynamicListeners[type] = {}; - dynamicListeners[type][element] = callback; + if (dynamicListeners[type] == undefined) dynamicListeners[type] = {}; + dynamicListeners[type][element] = callback; } function removeListener(type, element) { - delete dynamicListeners[type][element]; + delete dynamicListeners[type][element]; } socket.emit("get_spread"); diff --git a/server/public/assets/admin/not_authenticated/js/main.js b/server/public/assets/admin/not_authenticated/js/main.js index 297e5cd0..1e084858 100644 --- a/server/public/assets/admin/not_authenticated/js/main.js +++ b/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) { - event.preventDefault(); - document.querySelector("#login_form").submit(); + document + .getElementById("login_button") + .addEventListener("click", function(event) { + event.preventDefault(); + document.querySelector("#login_form").submit(); }); - document.getElementById("login_form").addEventListener("submit", function(event) { - if(this.password.value == "" || this.username.value == ""){ - e.preventDefault(); - } + 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"){ - document.querySelector("#login_form").insertAdjacentHTML("afterbegin", ""); - 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"}); - } + if ( + window.location.pathname == "/signup/" || + window.location.pathname == "/signup" + ) { + document + .querySelector("#login_form") + .insertAdjacentHTML( + "afterbegin", + "" + ); + 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" + }); + } }); diff --git a/server/public/assets/css/animations.css b/server/public/assets/css/animations.css new file mode 100644 index 00000000..4bcc6c3f --- /dev/null +++ b/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); +} diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css index 2fd122c2..d9072356 100755 --- a/server/public/assets/css/embed.css +++ b/server/public/assets/css/embed.css @@ -1,4 +1,4 @@ -.card-image{ +.card-image { height: 100px; width: 100px; background-position: center; @@ -7,58 +7,63 @@ } .side_away { - -webkit-transition: all .3s !important; - -moz-transition: all .3s !important; - -o-transition: all .3s !important; - transition: all .3s !important; + -webkit-transition: all 0.3s !important; + -moz-transition: all 0.3s !important; + -o-transition: all 0.3s !important; + transition: all 0.3s !important; } -.prev.playbar, .skip.playbar { - float: left; - font-size: 24px; - cursor: pointer; - height: 32px; - line-height: 31px; - padding-top: 3px; +.prev.playbar, +.skip.playbar { + float: left; + font-size: 24px; + cursor: pointer; + height: 32px; + line-height: 31px; + padding-top: 3px; } .site_loader { - position: absolute; - top: 0; - left: 0; - margin: auto; - bottom: 0; - right: 0; - background: rgba(0,0,0,.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 9; + position: absolute; + top: 0; + left: 0; + margin: auto; + bottom: 0; + right: 0; + 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 { - padding: 0 2.5px; +#playpause, +.prev.playbar, +.skip.playbar { + padding: 0 2.5px; } .playbar-btn:hover { - background-color: rgba(0,0,0,.6); - color: hsla(0,0%,100%,.5); + background-color: rgba(0, 0, 0, 0.6); + color: hsla(0, 0%, 100%, 0.5); } .hide { - display: none!important; + display: none !important; } .playbar-btn { - cursor: pointer; - transition: background-color .2s; + cursor: pointer; + transition: background-color 0.2s; } -#controls, .playbar { - color: #fff; +#controls, +.playbar { + color: #fff; } #player_loader_container { @@ -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 { @@ -92,7 +97,7 @@ } .card { - cursor:pointer; + cursor: pointer; background-color: rgba(255, 255, 255, 0.04) !important; } @@ -115,34 +120,36 @@ } .video_only { - width:100vw !important; + width: 100vw !important; height: 100vh !important; } -#player{ - width:60vw; +#player { + width: 60vw; height: calc(100vh - 32px); padding-top: 51px; } -#pageButtons{ +#pageButtons { text-align: center; - padding-top:15px; + padding-top: 15px; display: flex; justify-content: space-around; } -.prev_page, .next_page{ +.prev_page, +.next_page { cursor: pointer; } -#wrapper{ - height:calc(100% - 46px); +#wrapper { + height: calc(100% - 46px); } -.prev_page_hide, .next_page_hide{ +.prev_page_hide, +.next_page_hide { visibility: visible !important; - color:gray; + color: gray; } .list-song { @@ -150,26 +157,27 @@ } #list-song-html { - display:none; + display: none; } -#song-title{ - display:none; +#song-title { + display: none; } -#zoffchannel{ - display:none; +#zoffchannel { + 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; - transition: all .3s; + -webkit-transition: all 0.3s; + transition: all 0.3s; font-family: "Material Icons"; content: "thumb_up"; speak: none; @@ -186,7 +194,7 @@ height: 100%; top: 0; left: 0; - background: rgba(0,0,0,0.8); + background: rgba(0, 0, 0, 0.8); opacity: 0; /* transition: all .1s ease; */ display: flex; @@ -203,58 +211,64 @@ text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; - content: "\e625";/*"\e800";*/ - color:white; - font-size:65px; - position:absolute; - width:100%; height:100%; - top:0; left:0; - background:rgba(0,0,0,0.8); - opacity:0; - transition: all .1s ease; + content: "\e625"; /*"\e800";*/ + color: white; + font-size: 65px; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.8); + opacity: 0; + transition: all 0.1s ease; } -.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after { - opacity:1; +.vote-container:hover .list-image:after, +.add-suggested:hover .list-suggested-image:after { + opacity: 1; } - - -.vote-span{ +.vote-span { opacity: 0.7; padding: 0 0 0 10px; - color:white !important; + color: white !important; } -.list-song{ +.list-song { background-color: rgba(255, 255, 255, 0.04); - color:white; - font:12px Arial,sans-serif; - -webkit-transition:height .3s; - -moz-transition:height .3s; - -o-transition:height .3s; - transition:height .3s; - height:66px; + color: white; + font: 12px Arial, sans-serif; + -webkit-transition: height 0.3s; + -moz-transition: height 0.3s; + -o-transition: height 0.3s; + transition: height 0.3s; + height: 66px; width: 100%; } -.list-song .card-content{padding:0;} -.list-title{ - font-size:13px !important; - display:block; - color:white;font-size:1em; - text-align:left; +.list-song .card-content { + padding: 0; +} +.list-title { + font-size: 13px !important; + display: block; + color: white; + font-size: 1em; + text-align: left; padding: 0 10px 0 10px; line-height: 2.6rem; } -.card-image{cursor:pointer} -.card{ +.card-image { + cursor: pointer; +} +.card { margin: 2.5px 0 2.5px 0 !important; } -.card:hover{ - box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12); +.card:hover { + box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 5px 10px 0 rgba(0, 0, 0, 0.12); } -#playlist{ +#playlist { height: 100vh; width: 40vw; overflow: hidden; @@ -263,7 +277,7 @@ padding-top: 5px; } -#zoffbutton{ +#zoffbutton { cursor: pointer; background-image: url(/assets/images/z.svg); width: 90px; @@ -273,74 +287,75 @@ background-repeat: no-repeat; } -.progress{background-color:rgba(0,0,0,0) !important;} - -.indeterminate { - background-color:white !important; +.progress { + background-color: rgba(0, 0, 0, 0) !important; } -#controls -{ +.indeterminate { + background-color: white !important; +} + +#controls { background: inherit; position: relative; - opacity:0; - height:32px; - width:60vw; - color:white; - margin-top:-5px; + opacity: 0; + height: 32px; + width: 60vw; + color: white; + margin-top: -5px; } -#playpause, #duration, #volume-button -{ - float:left; - color:white; +#playpause, +#duration, +#volume-button { + float: left; + color: white; } .margin-playbar { margin-left: 10px; } - -#seekToDuration{ - position: absolute; - background: #2d2d2d; - color:white; - padding: 10px 8px; - z-index: 2000; - background-color: #2d2d2d; - border-radius: 2px; - color: #fff; - min-height: 36px; - text-align: center; - max-width: calc(100% - 4px); - pointer-events: none; +#seekToDuration { + position: absolute; + background: #2d2d2d; + color: white; + padding: 10px 8px; + z-index: 2000; + background-color: #2d2d2d; + border-radius: 2px; + color: #fff; + min-height: 36px; + text-align: center; + max-width: calc(100% - 4px); + pointer-events: none; } -#playpause, #volume-button -{ +#playpause, +#volume-button { font-size: 23px; } -#playpause:hover, #volume-button:hover, #fullscreen:hover -{ - color:rgba(255,255,255,0.5); +#playpause:hover, +#volume-button:hover, +#fullscreen:hover { + color: rgba(255, 255, 255, 0.5); } -#fullscreen -{ - float:right; - color:white; - margin-right:15px; +#fullscreen { + float: right; + color: white; + margin-right: 15px; } -#duration, #viewers -{ - margin-top:5px; - font-family:"Roboto", sans-serif; - font-weight:300; - margin-left:15px; - margin-right:10px; +#duration, +#viewers { + margin-top: 5px; + font-family: "Roboto", sans-serif; + font-weight: 300; + margin-left: 15px; + margin-right: 10px; } .channel-info-container { @@ -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; } @@ -358,21 +373,22 @@ margin-left: -20px; } -#viewers{ +#viewers { float: right; display: flex; align-items: center; } -#play, #pause, #volume-button, #fullscreen -{ - font-size:20px; - cursor:pointer; +#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,27 +439,27 @@ .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; - margin-left: -.6em; + top: -0.3em; + margin-left: -0.6em; } #volume { border-radius: 10px; - cursor:pointer; - float:left; + cursor: pointer; + float: left; position: relative; left: 10px; margin: 13px auto; - height:5px; + height: 5px; width: 75px; /*background-color:rgba(0, 0, 0, 0.5);*/ - background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x; + background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x; border: none; outline: none; /*border-radius: 2px;*/ @@ -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; @@ -494,10 +511,10 @@ background: #dadada; } -#toast-container{ - left:2%; - cursor:pointer; - width:70vw; +#toast-container { + left: 2%; + cursor: pointer; + width: 70vw; display: flex; flex-direction: column; align-items: baseline; @@ -509,29 +526,25 @@ cursor: pointer; } -.play -{ +.play { background-size: auto; width: 55px; height: 27px; } -.pause -{ +.pause { background-size: auto; width: 55px; height: 27px; } -.hide -{ - display:none !important; +.hide { + display: none !important; } -#bar -{ - height:100%; - background-color:rgba(0,0,0,0.5); +#bar { + height: 100%; + background-color: rgba(0, 0, 0, 0.5); } html { @@ -542,22 +555,24 @@ html { background: inherit; } -#pageButtons, #pageButtons a{ - color:white !important; +#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; } -#pageNumber{ +#pageNumber { cursor: default; color: white; - padding:0; + padding: 0; display: inline-flex; align-items: center; height: 36px; @@ -565,38 +580,50 @@ html { width: 100%; } -.prev_page, .next_page, .last_page, .first_page{ +.prev_page, +.next_page, +.last_page, +.first_page { cursor: pointer; } - -.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{ +.prev_page_hide, +.next_page_hide, +.last_page_hide, +.first_page_hide { visibility: visible !important; - color:gray; - cursor:default; + color: gray; + cursor: default; height: 32px; line-height: 36px; width: 100%; justify-content: center; } -.prev_page_hide, .prev_page, .first_page, .first_page_hide{ - padding:0 1px; +.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{ - padding:0 0px; +.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; @@ -634,7 +661,7 @@ body { display: none !important; } */ -#wrapper{ +#wrapper { background: inherit; /*height: 94%;*/ } @@ -645,44 +672,45 @@ display: none !important; } } -@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; - width: 100vw; - height: 200px; - bottom: 0px; - } - #controls { - width: 100vw; - margin-top: 0px; - } +@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; + width: 100vw; + height: 200px; + bottom: 0px; + } + #controls { + width: 100vw; + margin-top: 0px; + } - #player { - width: 100vw; - height: 170px; - display: block; - } + #player { + width: 100vw; + height: 170px; + display: block; + } - #player_overlay { - position: relative; - width: 100vw; - margin-bottom: 0px; - } + #player_overlay { + position: relative; + width: 100vw; + margin-bottom: 0px; + } - #playlist { - width: 100vw; - height: calc(100vh - 208px); - } + #playlist { + width: 100vw; + height: calc(100vh - 208px); + } - #toast-container { - min-width: 96%; - bottom: auto; - } + #toast-container { + min-width: 96%; + bottom: auto; + } - #song-title { - width: 100vw; - font-size: 1.2rem; - top: calc(100vh - 200px); - } + #song-title { + width: 100vw; + font-size: 1.2rem; + top: calc(100vh - 200px); + } } diff --git a/server/public/assets/css/globals.css b/server/public/assets/css/globals.css new file mode 100644 index 00000000..40b0c65d --- /dev/null +++ b/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); +} diff --git a/server/public/assets/css/mobile.css b/server/public/assets/css/mobile.css new file mode 100644 index 00000000..36f9a1bd --- /dev/null +++ b/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;*/ + } +} diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index 93d0ff3b..36776563 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -9,1066 +9,1175 @@ */ .material-icons { - display: none; - width: 24px; + display: none; + width: 24px; } html { - background: #2d2d2d; + background: #2d2d2d; } body { - background: white; + background: white; } a { - outline: 0 !important; + outline: 0 !important; } .pride-background { - background: linear-gradient(90deg, #f00000, #f00000 16.67%, #ff8000 16.67%, #ff8000 33.33%, #ffff00 33.33%, #ffff00 50%, #007940 50%, #007940 66.67%, #4040ff 66.67%, #4040ff 83.33%, #a000c0 83.33%, #a000c0) fixed; + background: linear-gradient( + 90deg, + #f00000, + #f00000 16.67%, + #ff8000 16.67%, + #ff8000 33.33%, + #ffff00 33.33%, + #ffff00 50%, + #007940 50%, + #007940 66.67%, + #4040ff 66.67%, + #4040ff 83.33%, + #a000c0 83.33%, + #a000c0 + ) + fixed; } .initial-line-height { - line-height: initial; + line-height: initial; } .error-code-container { - background: lightgrey; - border: 1px solid darkgrey; - margin-bottom: 20px; + background: lightgrey; + border: 1px solid darkgrey; + margin-bottom: 20px; } -.admin_panel{ - margin-top:100px; +.admin_panel { + margin-top: 100px; } -.current_number{ - color: black; +.current_number { + color: black; } -#descriptions_cont, #thumbnails_cont{ - display: flex; - flex-direction: column; +#descriptions_cont, +#thumbnails_cont { + display: flex; + flex-direction: column; } -.card-duration{ - border-top-right-radius: 4px; - position: absolute; - bottom: 0px; - left: 0px; - background: rgba(0,0,0,.7); - color: white; - padding: 0 5px; +.card-duration { + border-top-right-radius: 4px; + position: absolute; + bottom: 0px; + left: 0px; + background: rgba(0, 0, 0, 0.7); + color: white; + padding: 0 5px; } -.badge.admin-panel{ - margin: 0px; - margin-top: 13px; +.badge.admin-panel { + margin: 0px; + margin-top: 13px; } -.width25{ - width: 25% !important; +.width25 { + width: 25% !important; } -.width100{ - width: 100% !important; +.width100 { + width: 100% !important; } -.snow{-webkit-filter:brightness(100%);-moz-filter:brightness(100%);-o-filter:brightness(100%);filter:brightness(100%);width:5px; height:5px; background-color:white;z-index:1000000;pointer-events:none;position:absolute;border:1px solid white;border-radius:100px;} -.drag-target{pointer-events: none;} -.settings_embed{ - width:40px !important; - padding:0 10px !important; - border:none !important; +.snow { + -webkit-filter: brightness(100%); + -moz-filter: brightness(100%); + -o-filter: brightness(100%); + filter: brightness(100%); + width: 5px; + height: 5px; + background-color: white; + z-index: 1000000; + pointer-events: none; + position: absolute; + border: 1px solid white; + border-radius: 100px; +} +.drag-target { + pointer-events: none; +} +.settings_embed { + width: 40px !important; + padding: 0 10px !important; + border: none !important; } -.header-buttons{ - display: block; +.header-buttons { + display: block; } -#player_overlay_controls{ - font-size:7rem; - width: 100%; - height: 100%; +#player_overlay_controls { + font-size: 7rem; + width: 100%; + height: 100%; } -#volume-button-overlay, #playpause-overlay{ - display: inline-block; - margin: auto; - cursor: pointer; +#volume-button-overlay, +#playpause-overlay { + display: inline-block; + margin: auto; + cursor: pointer; } -#pageButtons{ - display: flex; - justify-content: space-around; - align-items: center; - flex-shrink: initial; - justify-content: space-between; - height: 32px; - background: inherit; - z-index: 9; +#pageButtons { + display: flex; + justify-content: space-around; + align-items: center; + flex-shrink: initial; + justify-content: space-between; + height: 32px; + background: inherit; + z-index: 9; } .token-container { - padding-top: 64px; - word-wrap: break-word; - overflow: hidden; + padding-top: 64px; + word-wrap: break-word; + overflow: hidden; } .token-form { - position: relative; + position: relative; } .full-form-token { - background: rgba(0,0,0,.5); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + background: rgba(0, 0, 0, 0.5); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } .center-loader-token { - margin: auto; + margin: auto; } .soundcloud_info_container { - position: absolute; - bottom: 20px; - right: 0px; - padding-left: 20px; - display: flex; - align-items: center; - background: rgba(0,0,0,.7); + position: absolute; + bottom: 20px; + right: 0px; + padding-left: 20px; + display: flex; + align-items: center; + background: rgba(0, 0, 0, 0.7); } .soundcloud_info_container a { - margin: 0 10px; + margin: 0 10px; } #player_loader_container { - height: 100%; -width: 100%; -background: rgba(0,0,0,.5); + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.5); } #player_loader { - position: absolute; -left: 0; -right: 0; -margin: auto; + position: absolute; + left: 0; + right: 0; + margin: auto; } - - #send-loader { - position: absolute; - top: 0px; - left: 0px; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background: rgba(0,0,0,.3); + position: absolute; + top: 0px; + left: 0px; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); } -#pageButtons, #pageButtons a{ - color:white !important; - width: 100%; - justify-content: center; +#pageButtons, +#pageButtons a { + color: white !important; + width: 100%; + justify-content: center; } #pageButtons span { - width: 100%; - justify-content: center; + width: 100%; + justify-content: center; } #pageNumber { - width: auto !important; - margin: 0 5px; + width: auto !important; + margin: 0 5px; } -.first_page, .first_page_hide, .last_page, .last_page_hide { - width: 50% !important; +.first_page, +.first_page_hide, +.last_page, +.last_page_hide { + width: 50% !important; } .hide-playlist-button { - position: absolute; - top: 128px; - background: inherit; - display:flex; - align-items:center; - justify-content:center; - z-index: 99; - font-size: 1rem; - padding: 10px; - color: white; + position: absolute; + top: 128px; + background: inherit; + display: flex; + align-items: center; + justify-content: center; + z-index: 99; + font-size: 1rem; + padding: 10px; + color: white; } -#pageNumber{ - cursor: default; - color: white; - padding:0; - line-height: 36px; +#pageNumber { + cursor: default; + color: white; + padding: 0; + line-height: 36px; } #channel-share-modal { -overflow:hidden; -background: transparent !important; - text-align: center !important; - margin: auto; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; - box-shadow: none; + overflow: hidden; + background: transparent !important; + text-align: center !important; + margin: auto; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + box-shadow: none; } #embed { - max-height: max-content !important; + max-height: max-content !important; } .chan.tap-target-origin { - display: none; + display: none; } .tap-target-join { - color: white; + color: white; } #channel-share-modal p { - color: white; - font-size: 2rem; + color: white; + font-size: 2rem; } #channel-share-modal.open { - display: flex !important; + display: flex !important; } -#playing_on{ - display: none; - text-align: left; - position: absolute; - bottom: 0px; - padding-left: 10px; - align-items: center; - color: rgba(255,255,255, 0.8); +#playing_on { + display: none; + text-align: left; + position: absolute; + bottom: 0px; + padding-left: 10px; + align-items: center; + color: rgba(255, 255, 255, 0.8); } -#playing_on #chromecast_icon i{ - font-size:70px; +#playing_on #chromecast_icon i { + font-size: 70px; } -#playing_on #chromecast_text{ - font-size: 20px; - padding-left: 55px; +#playing_on #chromecast_text { + font-size: 20px; + padding-left: 55px; } -.prev_page, .next_page, .last_page, .first_page{ - cursor: pointer; +.prev_page, +.next_page, +.last_page, +.first_page { + cursor: pointer; } - -.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{ - visibility: visible !important; - color:gray; - cursor:default; +.prev_page_hide, +.next_page_hide, +.last_page_hide, +.first_page_hide { + visibility: visible !important; + color: gray; + cursor: default; } -#chat-container, #suggestions{ - height:calc(100vh - 48px - 64px); +#chat-container, +#suggestions { + height: calc(100vh - 48px - 64px); } .channel-info-all-chat { - color: lightgrey; - font-size: 0.75rem; + color: lightgrey; + font-size: 0.75rem; } .chat-icon { - width: 16px; - margin-right: 2px; - vertical-align: middle; + width: 16px; + margin-right: 2px; + vertical-align: middle; } #chatForm { - padding-left: 14px; + padding-left: 14px; } -.close-settings{ - color:#2d2d2d +.close-settings { + color: #2d2d2d; } -.chan-link, .chan-link-element{ - width: 100%; - padding: 0; - color: orange !important; - margin: 0; +.chan-link, +.chan-link-element { + width: 100%; + padding: 0; + color: orange !important; + margin: 0; } li.disabled span { - color: orange !important; + color: orange !important; } -.prev_page_hide, .prev_page, .first_page, .first_page_hide{ - padding:0 1px; +.prev_page_hide, +.prev_page, +.first_page, +.first_page_hide { + padding: 0 1px; } -.next_page_hide, .next_page, .last_page, .last_page_hide{ - padding:0 0px; - display: flex; +.next_page_hide, +.next_page, +.last_page, +.last_page_hide { + padding: 0 0px; + display: flex; } -.first_page, .first_page_hide { - padding: 0 0 0 10px; +.first_page, +.first_page_hide { + padding: 0 0 0 10px; } -.last_page, .last_page_hide { - padding: 0 10px 0 0; +.last_page, +.last_page_hide { + padding: 0 10px 0 0; } -.settings_embed:focus{ - border:none !important; - box-shadow: none !important; +.settings_embed:focus { + border: none !important; + box-shadow: none !important; } .padding_right_26 { - padding-right: 26px !important; + padding-right: 26px !important; } -.padding_left_6{ - padding-left: 6px !important; +.padding_left_6 { + padding-left: 6px !important; } -.embed-label{ - font-size:1rem !important; +.embed-label { + font-size: 1rem !important; } -#embed-button{ - display:none; +#embed-button { + display: none; } -.not-imported, .not-exported{ - border-top: 1px solid lightgrey; - margin-top: 15px; - color:black; +.not-imported, +.not-exported { + border-top: 1px solid lightgrey; + margin-top: 15px; + color: black; } -.not-exported-element{ - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; +.not-exported-element { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } -.not-imported-element{ - height:60px; +.not-imported-element { + height: 60px; } -.extra-add-text{ - width: 165px; - display: inline-block; - height: 30px; - line-height: 30px; +.extra-add-text { + width: 165px; + display: inline-block; + height: 30px; + line-height: 30px; } -.not-exported-container .not-imported-element .extra-add-text{ - width: 215px; +.not-exported-container .not-imported-element .extra-add-text { + width: 215px; } .playlist-search-button { - display: flex; - justify-content: center; - align-items: center; - color: #fff; - cursor: pointer; - padding-right: 7px; - margin-left: -7px; - margin-top: 5px; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + cursor: pointer; + padding-right: 7px; + margin-left: -7px; + margin-top: 5px; } .filter-pagination-container { - display: flex; - justify-content: space-evenly; - width: 50%; - margin: auto; + display: flex; + justify-content: space-evenly; + width: 50%; + margin: auto; } .category-advanced { - margin-top: 0px; + margin-top: 0px; } .bottom-filter-container { - padding-top: 15px; + padding-top: 15px; } .top-filter-container { - padding-bottom: 15px; + padding-bottom: 15px; } -.extra-button{ - margin: 0 4px !important; - padding: 0px !important; - width: 37px; - height: 40px !important; - line-height: 40px !important; - color: white !important; - display: flex !important; - justify-content: center; +.extra-button { + margin: 0 4px !important; + padding: 0px !important; + width: 37px; + height: 40px !important; + line-height: 40px !important; + color: white !important; + display: flex !important; + justify-content: center; } -.search-extra{ - height: 40px !important; - line-height: 40px !important; - margin: 0 !important; - color: white !important; +.search-extra { + height: 40px !important; + line-height: 40px !important; + margin: 0 !important; + color: white !important; } -.import-spotify-auth, .import-youtube, .export-spotify-auth, .export-youtube, .exported-playlist, .import-zoff, .import-soundcloud, .export-soundcloud{ - color:white !important; - height:40px !important; - line-height: 40px !important; - margin: 0 4rem 0 0 !important; - width: 76%; +.import-spotify-auth, +.import-youtube, +.export-spotify-auth, +.export-youtube, +.exported-playlist, +.import-zoff, +.import-soundcloud, +.export-soundcloud { + color: white !important; + height: 40px !important; + line-height: 40px !important; + margin: 0 4rem 0 0 !important; + width: 76%; } -.import-soundcloud, .import-soundcloud:active, .import-soundcloud:visited, .export-soundcloud, .export-soundcloud:visited, .exported-soundcloud-list { - background: #f96200; +.import-soundcloud, +.import-soundcloud:active, +.import-soundcloud:visited, +.export-soundcloud, +.export-soundcloud:visited, +.exported-soundcloud-list { + background: #f96200; } -.import-soundcloud:hover, .export-soundcloud:hover { - background: #f97f30; +.import-soundcloud:hover, +.export-soundcloud:hover { + background: #f97f30; } .soundcloud_logo { - height: 100%; + height: 100%; } -.export-soundcloud, .import-soundcloud { - display: flex; - justify-content: center; +.export-soundcloud, +.import-soundcloud { + display: flex; + justify-content: center; } -.import-spotify-auth{ - padding-left:5px; +.import-spotify-auth { + padding-left: 5px; } -.youtube_logo{ - height: 75%; - margin-top: 5px; +.youtube_logo { + height: 75%; + margin-top: 5px; } -.spotify_logo{ - height: 90%; - margin-top: 2px; +.spotify_logo { + height: 90%; + margin-top: 2px; } -.import-buttons, .export-buttons{ - padding:10px; +.import-buttons, +.export-buttons { + padding: 10px; } -#chat-container{ - overflow: hidden; +#chat-container { + overflow: hidden; } /* GLOBAL STYLES */ -#playbar{ - display:none; +#playbar { + display: none; } -#frontpage-viewer-counter{ - position: absolute; - top: 0px; - left: 125px; - height: 100%; - display: flex; +#frontpage-viewer-counter { + position: absolute; + top: 0px; + left: 125px; + height: 100%; + display: flex; } -.frontpage-viewers{ - margin-right: 5px; +.frontpage-viewers { + margin-right: 5px; } -#toast-container{ - left:2%; - cursor:pointer; - width:70vw; - display: flex; - flex-direction: column; - align-items: baseline; - /*pointer-events:none;*/ +#toast-container { + left: 2%; + cursor: pointer; + width: 70vw; + display: flex; + flex-direction: column; + align-items: baseline; + /*pointer-events:none;*/ } -::-webkit-scrollbar-track -{ - background-color: rgba(255,255,255,0.3); - border-radius:0px; +::-webkit-scrollbar-track { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 0px; } -::-webkit-scrollbar -{ - width: 8px; - border-radius:0px; +::-webkit-scrollbar { + width: 8px; + border-radius: 0px; } -::-webkit-scrollbar-thumb -{ - background-color: #3E3E3E; - border-radius:0px; +::-webkit-scrollbar-thumb { + background-color: #3e3e3e; + border-radius: 0px; } .noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; } -.select{ - -webkit-touch-callout: text; - -webkit-user-select: text; - -khtml-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; +.select { + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; } .auto-pointer { - cursor: auto !important; + cursor: auto !important; } -#chatchannel li:nth-child(even), #chatall li:nth-child(even) { - background: rgba(0,0,0,.1); +#chatchannel li:nth-child(even), +#chatall li:nth-child(even) { + background: rgba(0, 0, 0, 0.1); } -#chatchannel li:nth-child(odd), #chatall li:nth-child(odd) { - background: rgba(0,0,0,.2); +#chatchannel li:nth-child(odd), +#chatall li:nth-child(odd) { + background: rgba(0, 0, 0, 0.2); } -#chatchannel li, #chatall li{ - cursor:text; - -webkit-touch-callout: text; - -webkit-user-select: text; - -khtml-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - padding: 4px; - margin-left: 0px; +#chatchannel li, +#chatall li { + cursor: text; + -webkit-touch-callout: text; + -webkit-user-select: text; + -khtml-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + padding: 4px; + margin-left: 0px; } -#chatchannel li span, #chatall li span { - padding-right: 1px; +#chatchannel li span, +#chatall li span { + padding-right: 1px; } .addedJoinBox { - position: absolute; - bottom: 50px; - z-index: 99; - left: 0px; - text-align: left; - background: #2d2d2d; - padding: 20px; - color: white; + position: absolute; + bottom: 50px; + z-index: 99; + left: 0px; + text-align: left; + background: #2d2d2d; + padding: 20px; + color: white; } -#closePlayer{ - position: fixed; - top: 7px; - right: 7px; - z-index: 999999999999999; - font-size: 18px; - color: white; - text-shadow: 0px 0px 2px black; - cursor: pointer; +#closePlayer { + position: fixed; + top: 7px; + right: 7px; + z-index: 999999999999999; + font-size: 18px; + color: white; + text-shadow: 0px 0px 2px black; + cursor: pointer; } -#player_bottom_overlay{ - z-index: 999999999999; - cursor: pointer; - top: 0px; - left: 0px; - -webkit-transition: all .5s ease-out; - -moz-transition: all .5s ease-out; - -ms-transition: all .5s ease-out; - -o-transition: all .5s ease-out; - transition: all .5s ease-out; +#player_bottom_overlay { + z-index: 999999999999; + cursor: pointer; + top: 0px; + left: 0px; + -webkit-transition: all 0.5s ease-out; + -moz-transition: all 0.5s ease-out; + -ms-transition: all 0.5s ease-out; + -o-transition: all 0.5s ease-out; + transition: all 0.5s ease-out; } -.frontpage_modified_heights{ - height: 0px !important; - margin-bottom:0px !important; +.frontpage_modified_heights { + height: 0px !important; + margin-bottom: 0px !important; } -.player_bottom{ - position: fixed !important; - transform: translate(calc(100vw - 260px), calc(100vh - 210px)) !important; - /* left: calc(100vw - 270px) !important; */ - /* top: calc(100vh - 210px) !important; */ - /* bottom: 10px; */ - /* top: 0px; */ - width: 250px !important; - height: 200px !important; - display: block !important; - /* right: 10px; */ - z-index: 10; - left: 0; - /*transition: 1s;*/ +.player_bottom { + position: fixed !important; + transform: translate(calc(100vw - 260px), calc(100vh - 210px)) !important; + /* left: calc(100vw - 270px) !important; */ + /* top: calc(100vh - 210px) !important; */ + /* bottom: 10px; */ + /* top: 0px; */ + width: 250px !important; + height: 200px !important; + display: block !important; + /* right: 10px; */ + z-index: 10; + left: 0; + /*transition: 1s;*/ } .generate-channel-name { - margin-left: -24px; - padding-right: 5px; - height: 46px; - display: flex; - justify-content: center; - align-items: center; + margin-left: -24px; + padding-right: 5px; + height: 46px; + display: flex; + justify-content: center; + align-items: center; } .select-wrapper input.select-dropdown { - position: initial; + position: initial; } -#frontpage_player{ - position: fixed; - bottom: 10px; - right: 10px; - z-index: 10; - cursor:pointer; +#frontpage_player { + position: fixed; + bottom: 10px; + right: 10px; + z-index: 10; + cursor: pointer; } -#frontpage_player #player{ - width:200px; - cursor:pointer; +#frontpage_player #player { + width: 200px; + cursor: pointer; } -#text-chat-input{ - border-top: 1px solid #9e9e9e; +#text-chat-input { + border-top: 1px solid #9e9e9e; } -#channel-load{ - /*display:none;*/ - position: absolute; - z-index:1; - top: 52px; - background-color:rgba(0,0,0,0); +#channel-load { + /*display:none;*/ + position: absolute; + z-index: 1; + top: 52px; + background-color: rgba(0, 0, 0, 0); } -#channel-load-move{ - background-color: #FFFFFF !important; +#channel-load-move { + background-color: #ffffff !important; } -.rounded{ - border-radius: 4px; +.rounded { + border-radius: 4px; } body { - display: flex; - min-height: 100vh; - flex-direction: column; - overflow-x: hidden; - -webkit-transition: background-color 1s; - -moz-transition:background-color 1s; - -ms-transition:background-color 1s; - -o-transition:background-color 1s; - transition:background-color 1s; - overflow-y:scroll !important; + display: flex; + min-height: 100vh; + flex-direction: column; + overflow-x: hidden; + -webkit-transition: background-color 1s; + -moz-transition: background-color 1s; + -ms-transition: background-color 1s; + -o-transition: background-color 1s; + transition: background-color 1s; + overflow-y: scroll !important; } #main-container { - flex: auto; - -webkit-transition: background-color .2s; - -moz-transition: background-color .2s; - -ms-transition: background-color .2s; - -o-transition: background-color .2s; - transition: background-color .2s; + flex: auto; + -webkit-transition: background-color 0.2s; + -moz-transition: background-color 0.2s; + -ms-transition: background-color 0.2s; + -o-transition: background-color 0.2s; + transition: background-color 0.2s; } -.main, #main-row, .video-container, #playlist{ - height: calc(100vh - 64px); +.main, +#main-row, +.video-container, +#playlist { + height: calc(100vh - 64px); } -footer{ - margin-top:0px !important; +footer { + margin-top: 0px !important; } -.left-embed{ - margin-left: -9px !important; - margin-right: 1px !important; +.left-embed { + margin-left: -9px !important; + margin-right: 1px !important; } -.right-embed{ - margin-right: 3px !important; - margin-left: -17px !important; +.right-embed { + margin-right: 3px !important; + margin-left: -17px !important; } /* global colors */ .modal-overlay { - z-index: 999999 !important; + z-index: 999999 !important; } .modal { - outline: 0 !important; - z-index: 999999999 !important; + outline: 0 !important; + z-index: 999999999 !important; } .material-tooltip { - z-index: 999999 !important; + z-index: 999999 !important; } #toast-container { - z-index: 999999 !important; + z-index: 999999 !important; } #user_password { - width: 50% !important; + width: 50% !important; } -.modal-header-fixed{ - position:fixed; - width:100px; - right:0px; +.modal-header-fixed { + position: fixed; + width: 100px; + right: 0px; } -.help-button-footer, .embed-button-footer, .contact-button-footer{ - width:17em; - background: #1e88e5; - border-radius: 2px; - color:white; - text-align: center; +.help-button-footer, +.embed-button-footer, +.contact-button-footer { + width: 17em; + background: #1e88e5; + border-radius: 2px; + color: white; + text-align: center; } -.footer-buttons li a{ - margin-top:10px; - padding-left:10px; +.footer-buttons li a { + margin-top: 10px; + padding-left: 10px; } -.footer-button-icon{ - font-size:33px !important; - margin-right:10px; +.footer-button-icon { + font-size: 33px !important; + margin-right: 10px; } -.sidenav{ - overflow-x:hidden; - width: 315px; +.sidenav { + overflow-x: hidden; + width: 315px; } footer.page-footer, -nav, .tabs .tab a, +nav, +.tabs .tab a, .sidenav .collapsible-body li.active, .sidenav.fixed .collapsible-body li.active, -.pagination li.active{ - background-color: #2D2D2D; +.pagination li.active { + background-color: #2d2d2d; } -.sidenav .collapsible-header, .sidenav.fixed .collapsible-header { - outline: none !important; +.sidenav .collapsible-header, +.sidenav.fixed .collapsible-header { + outline: none !important; } -.sidenav .collapsible li, .sidenav.fixed .collapsible li { - color: #2d2d2d; +.sidenav .collapsible li, +.sidenav.fixed .collapsible li { + color: #2d2d2d; } - -.tabs .tab a{ - padding: 0px; +.tabs .tab a { + padding: 0px; } .secondary-content, -.dropdown-content li > a, .dropdown-content li > span, +.dropdown-content li > a, +.dropdown-content li > span, .input-field .prefix.active, -input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label -{ - color: #2D2D2D; +input[type="text"]:focus:not([readonly]) + label, +input[type="password"]:focus:not([readonly]) + label, +input[type="email"]:focus:not([readonly]) + label, +input[type="url"]:focus:not([readonly]) + label, +input[type="time"]:focus:not([readonly]) + label, +input[type="date"]:focus:not([readonly]) + label, +input[type="datetime-local"]:focus:not([readonly]) + label, +input[type="tel"]:focus:not([readonly]) + label, +input[type="number"]:focus:not([readonly]) + label, +input[type="search"]:focus:not([readonly]) + label, +textarea.materialize-textarea:focus:not([readonly]) + label { + color: #2d2d2d; } -.pin{ - position: absolute; - right: 15px; - width: 25px; - font-size: 25px; - text-align: right; +.pin { + position: absolute; + right: 15px; + width: 25px; + font-size: 25px; + text-align: right; } -.spotify_authenticated, .soundcloud_authenticated{ - display: none; +.spotify_authenticated, +.soundcloud_authenticated { + display: none; } -.field-settings{ - margin-left: 25px !important; - color: rgb(68,68,68); - display: flex; - align-items: center; - height: 64px !important; - display: flex; - flex-direction: row; - align-content: center; - align-items: center; +.field-settings { + margin-left: 25px !important; + color: rgb(68, 68, 68); + display: flex; + align-items: center; + height: 64px !important; + display: flex; + flex-direction: row; + align-content: center; + align-items: center; } .soundcloud_authenticated { - height: auto !important; + height: auto !important; } .soundcloud-disclaimer { - line-height: 20px; - padding-right: 40px; + line-height: 20px; + padding-right: 40px; } -.not-imported-container{ - display: block; - height: 100% !important; +.not-imported-container { + display: block; + height: 100% !important; } -.not-exported-container{ - display: block !important; - margin-left: 0px !important; +.not-exported-container { + display: block !important; + margin-left: 0px !important; } -.not-exported-container, .not-imported-container { - height: auto !important; +.not-exported-container, +.not-imported-container { + height: auto !important; } -.youtube_clicked{ - display: none; +.youtube_clicked { + display: none; } -.import-icon{ - position: absolute; +.import-icon { + position: absolute; } #preloader.progress.frontpage-preloader .indeterminate { - background-color: #ff9800 !important; + background-color: #ff9800 !important; } -#import, #import_spotify, #import_zoff, #import_soundcloud{ - width: 65%; - padding-left: 35px; - color: rgb(68,68,68); - border-bottom: 1px solid lightgrey; - padding-bottom: 0px; - height: 64px; +#import, +#import_spotify, +#import_zoff, +#import_soundcloud { + width: 65%; + padding-left: 35px; + color: rgb(68, 68, 68); + border-bottom: 1px solid lightgrey; + padding-bottom: 0px; + height: 64px; } -#import_zoff, #listImportSoundCloud { - width: 100%; +#import_zoff, +#listImportSoundCloud { + width: 100%; } -#password, #strict-input-number{ - width: 84%; - margin-left: 30px; - margin-bottom: 0; +#password, +#strict-input-number { + width: 84%; + margin-left: 30px; + margin-bottom: 0; } #strict-input-number { - width: 50px; - border-bottom: transparent; + width: 50px; + border-bottom: transparent; } .strict-skip-info { - width: 1000px; + width: 1000px; } span.badge.new, .progress .determinate, .progress .indeterminate, -.switch label input[type=checkbox]:checked + .lever:after -{ - background-color: #2D2D2D; +.switch label input[type="checkbox"]:checked + .lever:after { + background-color: #2d2d2d; } -span.badge.new.white{ - color: black; - margin-top: 12px; - background: white; - margin-left: -15px; +span.badge.new.white { + color: black; + margin-top: 12px; + background: white; + margin-left: -15px; } -.suggested-link span.badge.new.white{ - min-width: initial; - margin-left: 0px; +.suggested-link span.badge.new.white { + min-width: initial; + margin-left: 0px; } .suggested-link { - display: flex !important; - justify-content: space-around; + display: flex !important; + justify-content: space-around; } -.suggested-link span.badge:after{ - content: ""; +.suggested-link span.badge:after { + content: ""; } -input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { - border-bottom: 1px solid #9D9D9D; - box-shadow: 0 1px 0 0 #9D9D9D; +input[type="text"]:focus:not([readonly]), +input[type="password"]:focus:not([readonly]), +input[type="email"]:focus:not([readonly]), +input[type="url"]:focus:not([readonly]), +input[type="time"]:focus:not([readonly]), +input[type="date"]:focus:not([readonly]), +input[type="datetime-local"]:focus:not([readonly]), +input[type="tel"]:focus:not([readonly]), +input[type="number"]:focus:not([readonly]), +input[type="search"]:focus:not([readonly]), +textarea.materialize-textarea:focus:not([readonly]) { + border-bottom: 1px solid #9d9d9d; + box-shadow: 0 1px 0 0 #9d9d9d; } /* End global colors */ -nav .brand-logo{ - padding-left: 20px; - position: relative; - height:100%; +nav .brand-logo { + padding-left: 20px; + position: relative; + height: 100%; } -nav .brand-logo-navigate{ - padding-left: 0px; +nav .brand-logo-navigate { + padding-left: 0px; } #fp-nav { - background-color:rgba(45,45,45,1); - position: fixed; - z-index: 10; - /*width: calc(100vw - 8px);*/ - overflow: hidden; + background-color: rgba(45, 45, 45, 1); + position: fixed; + z-index: 10; + /*width: calc(100vw - 8px);*/ + overflow: hidden; } -.import-a, .suggested{ - width:100%; +.import-a, +.suggested { + width: 100%; } -#nav-mobile .green:hover{ - background-color: #38803C !important; +#nav-mobile .green:hover { + background-color: #38803c !important; } -.footer-copyright{ - /*text-align: center;*/ +.footer-copyright { + /*text-align: center;*/ } -.footer-copyright a { color: #fff;} -.footer-copyright a:hover{color:#6699FF} +.footer-copyright a { + color: #fff; +} +.footer-copyright a:hover { + color: #6699ff; +} main { - flex: auto; + flex: auto; } -nav .zbrand{ - min-width: 200px; - overflow: hidden; - position: relative; - font-size: 30px; - padding: 0 20px; - left: initial; - display: inline-flex; +nav .zbrand { + min-width: 200px; + overflow: hidden; + position: relative; + font-size: 30px; + padding: 0 20px; + left: initial; + display: inline-flex; } .navbar-fixed { - z-index: 999999; - height: 64px; + z-index: 999999; + height: 64px; } -.fullwidth{ - width:100%; +.fullwidth { + width: 100%; } -.highlighted{ - font-weight: 300; +.highlighted { + font-weight: 300; } -.invisible{ - opacity: 0; +.invisible { + opacity: 0; } -.auto-margin{ - margin-left: auto !important; - margin-right: auto !important; - +.auto-margin { + margin-left: auto !important; + margin-right: auto !important; } -.clickable, .modal-trigger{cursor:pointer;} +.clickable, +.modal-trigger { + cursor: pointer; +} -.cardbg{ - background-repeat: no-repeat; - background-size: 124%; - background-size: cover; - background-position: 50% 50%; - background-color: #171717; - height: 120px; +.cardbg { + background-repeat: no-repeat; + background-size: 124%; + background-size: cover; + background-position: 50% 50%; + background-color: #171717; + height: 120px; } .no-jump-select { - height: calc(3rem + 1px) !important; - margin: 0 0 8px 0; - display: flex; - justify-content: space-between; - border-bottom: 1px solid #9e9e9e; - align-items: center; - font-size: 16px; + height: calc(3rem + 1px) !important; + margin: 0 0 8px 0; + display: flex; + justify-content: space-between; + border-bottom: 1px solid #9e9e9e; + align-items: center; + font-size: 16px; - line-height: 3rem; - color: #000; + line-height: 3rem; + color: #000; } .description_text { - color: #2d2d2d; - text-align: left; - word-break: break-word; + color: #2d2d2d; + text-align: left; + word-break: break-word; } -.white-bg{ - background-color:white !important; +.white-bg { + background-color: white !important; } -.white-bg:hover{ - background-color:white !important; +.white-bg:hover { + background-color: white !important; } .card .card-content { - padding: 10px 20px; - color: rgba(0, 0, 0, 0.870588); + padding: 10px 20px; + color: rgba(0, 0, 0, 0.870588); } .card .card-action { - padding: 0; - background: white; + padding: 0; + background: white; } -#description_form div .character-counter{ - /*margin-top: -30px;*/ - color:black; +#description_form div .character-counter { + /*margin-top: -30px;*/ + color: black; } -.spinner-white, .spinner-white-only { - border-color: white; +.spinner-white, +.spinner-white-only { + border-color: white; } -.description_text:first-letter{ - text-transform: uppercase; +.description_text:first-letter { + text-transform: uppercase; } .card .card-action a { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .card-action .delete_button { - color:white !important; + color: white !important; } -.card-action .delete_button:hover{ - color:grey !important; +.card-action .delete_button:hover { + color: grey !important; } -.share, .shareface{ - padding-left: 10px !important; - width: 17em; +.share, +.shareface { + padding-left: 10px !important; + width: 17em; } -.shareface {background-color: rgb(42, 134, 200) !important;} - -.share img{ - height: 50px; - margin-right:10px; +.shareface { + background-color: rgb(42, 134, 200) !important; } +.share img { + height: 50px; + margin-right: 10px; +} /* play mdi-av-play-arrow @@ -1087,868 +1196,896 @@ hide mdi-action-visibility mdi-action-visibility-off */ /*Global style for commit container*/ -#latest-commit{ - font-size: 12px !important; - padding-left: 15px !important; - /*padding-top: 40px !important;*/ +#latest-commit { + font-size: 12px !important; + padding-left: 15px !important; + /*padding-top: 40px !important;*/ } -#latest-commit a{ - color: rgba(255,255,255,0.8); +#latest-commit a { + color: rgba(255, 255, 255, 0.8); } /* INDEX PAGE */ -.zicon{ - height: 64px; - transition: padding 1s ease; +.zicon { + height: 64px; + transition: padding 1s ease; } -.mdi-navigation-close{ - text-align:right !important; +.mdi-navigation-close { + text-align: right !important; } -.chan-name{ - text-transform: capitalize; - display: inline-block; - width: 100%; - font-weight: 300; +.chan-name { + text-transform: capitalize; + display: inline-block; + width: 100%; + font-weight: 300; } #player_bottom_overlay::after { - background: rgba(0,0,0,.8); - content: "To Channel"; - width: 100%; - position: absolute; - left: 0px; - height: 100%; - top: 0px; - display: flex; - justify-content: center; - align-items: center; - color: white; - transition: opacity .5s; - opacity: 0; + background: rgba(0, 0, 0, 0.8); + content: "To Channel"; + width: 100%; + position: absolute; + left: 0px; + height: 100%; + top: 0px; + display: flex; + justify-content: center; + align-items: center; + color: white; + transition: opacity 0.5s; + opacity: 0; } #player_bottom_overlay:hover#player_bottom_overlay::after { - opacity: 1; - cursor: pointer; + opacity: 1; + cursor: pointer; } /*#nav-mobile{ margin:-1px; }*/ -.mega{ - padding: 6% 0px; - /* height: 100%; */ - position: relative; - z-index: 1; - background-color:#191919; - margin-top:64px; - -webkit-transition:transform .5s; - -moz-transition:transform .5s; - transition:transform .5s; +.mega { + padding: 6% 0px; + /* height: 100%; */ + position: relative; + z-index: 1; + background-color: #191919; + margin-top: 64px; + -webkit-transition: transform 0.5s; + -moz-transition: transform 0.5s; + transition: transform 0.5s; } #wrapper { - overflow: hidden; + overflow: hidden; } -.remote-container{ - margin-top:64px; +.remote-container { + margin-top: 64px; } -#mega-background{ - -webkit-transition:background 0.5s, opacity 0.5s; - -moz-transition:background 0.5s, opacity 0.5s; - -o-transition:background 0.5s, opacity 0.5s; - transition:background 0.5s, opacity 0.5s; - height:400px; - width:400px; - position: absolute; - opacity: 0; - top: 0px; - left:0px; - z-index: -1; - height: 100%; - width: 100%; - background-size: 200% !important; - background-position: 50% 50% !important; - -webkit-filter: brightness(0.8); - -moz-filter: brightness(0.8); - -o-filter: brightness(0.8); - filter: brightness(0.8); - +#mega-background { + -webkit-transition: background 0.5s, opacity 0.5s; + -moz-transition: background 0.5s, opacity 0.5s; + -o-transition: background 0.5s, opacity 0.5s; + transition: background 0.5s, opacity 0.5s; + height: 400px; + width: 400px; + position: absolute; + opacity: 0; + top: 0px; + left: 0px; + z-index: -1; + height: 100%; + width: 100%; + background-size: 200% !important; + background-position: 50% 50% !important; + -webkit-filter: brightness(0.8); + -moz-filter: brightness(0.8); + -o-filter: brightness(0.8); + filter: brightness(0.8); } -#find_div{ - position: absolute; - background: #282828; - z-index: 2; - width: calc(100% - 18px); - padding: 0 15px; - top: 0; - color: white; +#find_div { + position: absolute; + background: #282828; + z-index: 2; + width: calc(100% - 18px); + padding: 0 15px; + top: 0; + color: white; } #find_form { - display: flex; - flex-direction: row; - align-content: center; - justify-content: center; + display: flex; + flex-direction: row; + align-content: center; + justify-content: center; } .num_of_found { - display: flex; - align-self: center; - color: white; - padding-left: 8px; + display: flex; + align-self: center; + color: white; + padding-left: 8px; } -#close_find_form_button, #open_advanced_filter { - display: flex; - align-self: center; - padding-left: 10px; - color: white; +#close_find_form_button, +#open_advanced_filter { + display: flex; + align-self: center; + padding-left: 10px; + color: white; } -.highlight{ - background: rgba(255, 255, 255, 0.2) !important; +.highlight { + background: rgba(255, 255, 255, 0.2) !important; } -.mega h5{ - color: rgb(255, 255, 255); cursor: default; display: inline; - font-size: 50px; - font-weight: 100; - height: auto; - line-height: 90.069229px; text-align: center; - text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; width: auto; - margin-left: auto; - margin-right: auto; - display: flex; - justify-content: center; +.mega h5 { + color: rgb(255, 255, 255); + cursor: default; + display: inline; + font-size: 50px; + font-weight: 100; + height: auto; + line-height: 90.069229px; + text-align: center; + text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; + width: auto; + margin-left: auto; + margin-right: auto; + display: flex; + justify-content: center; } -.mega form{ - display: flex; - justify-content: center; - /*-webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px; box-sizing: border-box; color: rgb(255, 255, 255); cursor: text; display: flex; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 17px; font-weight: normal; height: 50px; line-height: 24.2857151031494px; margin-top: 0px; padding-bottom: 5px; padding-left: 20px; padding-right: 5px; padding-top: 5px; text-align: center; width: 507.8125px; +.mega form { + display: flex; + justify-content: center; + /*-webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px; box-sizing: border-box; color: rgb(255, 255, 255); cursor: text; display: flex; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 17px; font-weight: normal; height: 50px; line-height: 24.2857151031494px; margin-top: 0px; padding-bottom: 5px; padding-left: 20px; padding-right: 5px; padding-top: 5px; text-align: center; width: 507.8125px; margin-left: auto; margin-right: auto; margin-top: 1%; margin-bottom: 2%;*/ - width: 47%; - margin-right: auto; - margin-left: auto; - text-align: center; + width: 47%; + margin-right: auto; + margin-left: auto; + text-align: center; } -.mega .prething{ - box-sizing: border-box; - /*color: rgb(155, 155, 155);*/ - cursor: text; display: block; - text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; - color: rgb(255, 255, 255); - /*font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; */ - font-size: 17px; - /*font-weight: 200; */ - height: 24px; - line-height: 26px; - margin-bottom: 8px; - margin-left: 29px; - margin-right: 8.5px; - margin-top: 8px; - min-width: 56px; - text-align: center; - width: 40px; - margin-right: -85px; +.mega .prething { + box-sizing: border-box; + /*color: rgb(155, 155, 155);*/ + cursor: text; + display: block; + text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; + color: rgb(255, 255, 255); + /*font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; */ + font-size: 17px; + /*font-weight: 200; */ + height: 24px; + line-height: 26px; + margin-bottom: 8px; + margin-left: 29px; + margin-right: 8.5px; + margin-top: 8px; + min-width: 56px; + text-align: center; + width: 40px; + margin-right: -85px; } -.mega input{ - /*color: rgb(0, 0, 0);*/ - /*font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;*/ - font-size: 17px !important; - height: 42px; - line-height: 24px; - min-width: 307px; - /*width: 400px;*/ - word-spacing: 0px; - box-shadow: none !important; - border:none !important; - color: rgb(255, 255, 255); - text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; - border-bottom: 1px solid white !important; - padding-left: 69px !important; +.mega input { + /*color: rgb(0, 0, 0);*/ + /*font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;*/ + font-size: 17px !important; + height: 42px; + line-height: 24px; + min-width: 307px; + /*width: 400px;*/ + word-spacing: 0px; + box-shadow: none !important; + border: none !important; + color: rgb(255, 255, 255); + text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; + border-bottom: 1px solid white !important; + padding-left: 69px !important; } - .label-for-mobile-frontpage { - display: none; + display: none; } .listen-button { - background: #2d2d2d !important; - display: flex; - justify-content: center; - min-width: 100px; + background: #2d2d2d !important; + display: flex; + justify-content: center; + min-width: 100px; } -.cursor-pointer{ - cursor:pointer; +.cursor-pointer { + cursor: pointer; } -.cursor-default{ - cursor:default; +.cursor-default { + cursor: default; } -.contact-button-submit:hover{ - background-color:#2d2d2d; - color:white; - border-left:1px solid #2D2D2D; - border-right:1px solid #2D2D2D; - border-top:1px solid #2D2D2D; - border-bottom:1px solid #2D2D2D; - border-radius: 2px; +.contact-button-submit:hover { + background-color: #2d2d2d; + color: white; + border-left: 1px solid #2d2d2d; + border-right: 1px solid #2d2d2d; + border-top: 1px solid #2d2d2d; + border-bottom: 1px solid #2d2d2d; + border-radius: 2px; } -.contact-button-submit:focus{ - background-color:#FAFAFA; - color:#2d2d2d; - border-left:1px solid #2D2D2D; - border-right:1px solid #2D2D2D; - border-top:1px solid #2D2D2D; - border-bottom:1px solid #2D2D2D; - border-radius: 2px; - text-shadow:rgba(0,0,0,0) 0px 0px 0px; +.contact-button-submit:focus { + background-color: #fafafa; + color: #2d2d2d; + border-left: 1px solid #2d2d2d; + border-right: 1px solid #2d2d2d; + border-top: 1px solid #2d2d2d; + border-bottom: 1px solid #2d2d2d; + border-radius: 2px; + text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; } -.mega .pitch{ - box-sizing: border-box; - color: rgba(255, 255, 255, 0.85); - display: inline; - /* font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; */ - font-size: 18px; - font-weight: 300; - height: auto; - /*line-height: 24.2857151031494px;*/ - text-align: center; - text-shadow: rgba(81, 81, 81, 0.05) 0px 1px 4px; - width: auto; - margin-top: 20px; +.mega .pitch { + box-sizing: border-box; + color: rgba(255, 255, 255, 0.85); + display: inline; + /* font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; */ + font-size: 18px; + font-weight: 300; + height: auto; + /*line-height: 24.2857151031494px;*/ + text-align: center; + text-shadow: rgba(81, 81, 81, 0.05) 0px 1px 4px; + width: auto; + margin-top: 20px; } /*#channels li{opacity: 0;}*/ /*------------------- Channel page ---------------------------------------------------------------------------- */ - -.collapsible-header{ - font-weight: 400 !important; - height: 64px !important; - line-height: 64px !important; - display: flex !important; - align-items: center; - justify-content: flex-end; - flex-direction: row-reverse; +.collapsible-header { + font-weight: 400 !important; + height: 64px !important; + line-height: 64px !important; + display: flex !important; + align-items: center; + justify-content: flex-end; + flex-direction: row-reverse; } -.collapsible-body{ - padding: 0rem; +.collapsible-body { + padding: 0rem; } .suggest_thumb { - width:25%; - float:left; + width: 25%; + float: left; } -#empty-channel-message{ - font-size:22px; - color:white; - font-weight:300; - position: relative; - top:20px; +#empty-channel-message { + font-size: 22px; + color: white; + font-weight: 300; + position: relative; + top: 20px; } .zoff-image-import { - height: 36px; + height: 36px; } .zoff-color { - background: #2d2d2d !important; + background: #2d2d2d !important; } .side_away { - -webkit-transition: all .3s !important; - -moz-transition: all .3s !important; - -o-transition: all .3s !important; - transition: all .3s !important; + -webkit-transition: all 0.3s !important; + -moz-transition: all 0.3s !important; + -o-transition: all 0.3s !important; + transition: all 0.3s !important; } -.video-container{ - padding-left: 0px !important; - -webkit-transition: opacity 0.5s; - -moz-transition: opacity 0.5s; - -o-transition: opacity 0.5s; - transition: opacity 0.5s; - overflow: visible; - padding-right: 0px !important; +.video-container { + padding-left: 0px !important; + -webkit-transition: opacity 0.5s; + -moz-transition: opacity 0.5s; + -o-transition: opacity 0.5s; + transition: opacity 0.5s; + overflow: visible; + padding-right: 0px !important; } -.no-opacity{ - opacity:0; +.no-opacity { + opacity: 0; } .suggest_bar { - /*margin-left:5px !important;*/ - color:rgb(68,68,68); + /*margin-left:5px !important;*/ + color: rgb(68, 68, 68); } -.suggest_buttons button{ - padding-left:10px !important; - padding-right:10px !important; - margin-right: 20px; - width:90px; +.suggest_buttons button { + padding-left: 10px !important; + padding-right: 10px !important; + margin-right: 20px; + width: 90px; } -.inner-suggest{ - padding-left:20px; +.inner-suggest { + padding-left: 20px; } -.suggest-songs:nth-child(odd) {background: rgba(204,204,204,0.40)} -.suggest-songs:nth-child(even) {background: #FFF} +.suggest-songs:nth-child(odd) { + background: rgba(204, 204, 204, 0.4); +} +.suggest-songs:nth-child(even) { + background: #fff; +} -.info_change_button_container, .suggest-songs { - padding-top:20px; +.info_change_button_container, +.suggest-songs { + padding-top: 20px; } .suggest-songs { - - border-bottom:1px solid black; + border-bottom: 1px solid black; } -#thumbnail_form, #description_form { - width: 100%; - padding: 0 10px; +#thumbnail_form, +#description_form { + width: 100%; + padding: 0 10px; } -#chan_thumbnail, #chan_description{ - color: black; - width: 100%; - border-bottom: 1px solid transparent; - -webkit-box-shadow: 0 1px 0 0 transparent; - box-shadow: 0 1px 0 0 transparent; +#chan_thumbnail, +#chan_description { + color: black; + width: 100%; + border-bottom: 1px solid transparent; + -webkit-box-shadow: 0 1px 0 0 transparent; + box-shadow: 0 1px 0 0 transparent; } -#chan_thumbnail:focus, #chan_description:focus { - border-bottom: 1px solid orange !important; - -webkit-box-shadow: 0 1px 0 0 orange !important; - box-shadow: 0 1px 0 0 orange !important; +#chan_thumbnail:focus, +#chan_description:focus { + border-bottom: 1px solid orange !important; + -webkit-box-shadow: 0 1px 0 0 orange !important; + box-shadow: 0 1px 0 0 orange !important; } -#thumbnail_image_channel{ - max-width: 200px; - max-height: 400px; +#thumbnail_image_channel { + max-width: 200px; + max-height: 400px; } -.autocomplete-content.dropdown-content{ - position:absolute; - width:100% !important; - margin-left: 0px !important; - /*top: 57px;*/ +.autocomplete-content.dropdown-content { + position: absolute; + width: 100% !important; + margin-left: 0px !important; + /*top: 57px;*/ } -.card-title{ - text-transform: capitalize; +.card-title { + text-transform: capitalize; } .card .card-reveal { - padding: 10px; - transition: transform .1s; - display:none; - transform: translateY(0%); + padding: 10px; + transition: transform 0.1s; + display: none; + transform: translateY(0%); } -.room-namer.autocomplete{ - /*margin-left: 72px !important;*/ - margin-top: -1px !important; +.room-namer.autocomplete { + /*margin-left: 72px !important;*/ + margin-top: -1px !important; } .channel-finder { - margin-bottom: 0px !important; + margin-bottom: 0px !important; } -.channel-finder .input-field{ - display: flex; - margin-left: 0px !important; - width: max-content !important; - justify-content: center; - padding:0; +.channel-finder .input-field { + display: flex; + margin-left: 0px !important; + width: max-content !important; + justify-content: center; + padding: 0; } .room-namer { - margin-left: 0px !important; + margin-left: 0px !important; } -.channel-finder .input-field .prefix{ - color:white; - font-size:17px; - /*margin-left: -215px;*/ - left: 0; +.channel-finder .input-field .prefix { + color: white; + font-size: 17px; + /*margin-left: -215px;*/ + left: 0; } .autocomplete-content li .highlight { - color: orange; + color: orange; } .channel_info_container { - padding-top: 18px !important; + padding-top: 18px !important; } -#thumbnail_image{ - text-align: center; +#thumbnail_image { + text-align: center; } -#thumbnail_image, #description_area{ - width: 80%; - margin: auto; - color: black; - justify-content: center; - line-height: 30px; +#thumbnail_image, +#description_area { + width: 80%; + margin: auto; + color: black; + justify-content: center; + line-height: 30px; } -#chan_thumbnail:disabled{ - border-bottom: none; +#chan_thumbnail:disabled { + border-bottom: none; } -.suggest_title, .duration-song{ - padding-left:10px; - line-height:24px; +.suggest_title, +.duration-song { + padding-left: 10px; + line-height: 24px; } -.playlist-tabs .indicator, .playlist-tabs-loggedIn .indicator{ - background-color:white !important; +.playlist-tabs .indicator, +.playlist-tabs-loggedIn .indicator { + background-color: white !important; } -.tabs{ - overflow: hidden; +.tabs { + overflow: hidden; } -.btn.white{ - color:black; +.btn.white { + color: black; } -.playlist-tabs .indicator, .tabs .indicator{ - /*width:50%;*/ - bottom: 0px; +.playlist-tabs .indicator, +.tabs .indicator { + /*width:50%;*/ + bottom: 0px; } -.chatTabs .indicator{ - width:50%; +.chatTabs .indicator { + width: 50%; } -.playlist-tab-links{ - color:white !important; +.playlist-tab-links { + color: white !important; } -.playlist-tabs-loggedIn{ - width:calc(100% - 7px) !important; +.playlist-tabs-loggedIn { + width: calc(100% - 7px) !important; } -.playlist-tabs{ - width: calc(100% - 8px) !important; +.playlist-tabs { + width: calc(100% - 8px) !important; } .chat-link { - -webkit-transition: color 1s !important; - -moz-transition: color 1s !important; - -o-transition: color 1s !important; - transition: color 1s !important; + -webkit-transition: color 1s !important; + -moz-transition: color 1s !important; + -o-transition: color 1s !important; + transition: color 1s !important; } -.playlist-tabs, .playlist-tabs-loggedIn{ - background-color:rgba(0,0,0,0) !important; - margin:0; - border-bottom: 1px solid white; +.playlist-tabs, +.playlist-tabs-loggedIn { + background-color: rgba(0, 0, 0, 0) !important; + margin: 0; + border-bottom: 1px solid white; } -.duration-song{ - font-size:12px; +.duration-song { + font-size: 12px; } -.suggest-title-info{ - color: white; - padding: 10px 0 10px 10px !important; - line-height: 34px; - margin: 0 0 -10px 0 !important; +.suggest-title-info { + color: white; + padding: 10px 0 10px 10px !important; + line-height: 34px; + margin: 0 0 -10px 0 !important; } -#description, #desc-title{ - color:#444; +#description, +#desc-title { + color: #444; } -#main-row{ - margin-bottom:-64px; - display: flex; +#main-row { + margin-bottom: -64px; + display: flex; } .toast { - word-break: normal; - cursor: pointer; + word-break: normal; + cursor: pointer; } -@media only screen and (min-width: 993px){ - .toast { - float: left; - } +@media only screen and (min-width: 993px) { + .toast { + float: left; + } - nav .zbrand { - left:0px !important; - } + nav .zbrand { + left: 0px !important; + } } -@media screen and (-webkit-min-device-pixel-ratio:0) { - #wrapper { - padding-right:0vh !important; - width:100% !important; - overflow:hidden; - } +@media screen and (-webkit-min-device-pixel-ratio: 0) { + #wrapper { + padding-right: 0vh !important; + width: 100% !important; + overflow: hidden; + } } #list-song-html { - display:none; + display: none; } .result-start-end-container { - display: inline-flex; - align-items: center; + display: inline-flex; + align-items: center; } -.result-start-end-container input.result-start, .result-start-end-container input.result-end { - width: 50px; - margin: 0px 10px 0px 10px; - text-align: center; - border: 1px solid #d3d3d342; - height: 24px; +.result-start-end-container input.result-start, +.result-start-end-container input.result-end { + width: 50px; + margin: 0px 10px 0px 10px; + text-align: center; + border: 1px solid #d3d3d342; + height: 24px; } #inner-results { - height: calc(100vh - 64px - 76px - 64px); - overflow-y: scroll; - overflow-x: hidden; + height: calc(100vh - 64px - 76px - 64px); + overflow-y: scroll; + overflow-x: hidden; } .empty-inner-results { - height: calc(100vh - 64px) !important; + height: calc(100vh - 64px) !important; } #empty-results { - text-align:center; - height:calc(100vh - 64px); - cursor: default; + text-align: center; + height: calc(100vh - 64px); + cursor: default; } .pagination-results { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .pagination-results a { - margin: 20px; + margin: 20px; } #empty-results span { - margin:auto; + margin: auto; } #donate_form a { - padding-right:10px; + padding-right: 10px; } - .tab a { - background-color:rgba(0,0,0,0) !important; + background-color: rgba(0, 0, 0, 0) !important; } -.chat-tab, .chat-tab-li { - color:white !important; - margin:0 !important; +.chat-tab, +.chat-tab-li { + color: white !important; + margin: 0 !important; } -.chatTabs{ - color:white !important; - background-color:rgba(0,0,0,0); - height: 44px; - border-bottom: 1px solid white; +.chatTabs { + color: white !important; + background-color: rgba(0, 0, 0, 0); + height: 44px; + border-bottom: 1px solid white; } -#text-chat-input{ - /*width:95%;*/ - color:white; - border:none; +#text-chat-input { + /*width:95%;*/ + color: white; + border: none; } -#text-chat-input:focus{ - box-shadow: none; +#text-chat-input:focus { + box-shadow: none; } -#chat_submit, #chat_help{ - margin-top: 4px; - margin-left: 2%; - width: 12.45%; - padding: 0; +#chat_submit, +#chat_help { + margin-top: 4px; + margin-left: 2%; + width: 12.45%; + padding: 0; } .indicator { - background-color:white !important; + background-color: white !important; } -#channelchat, #all_chat{ - height: calc(100vh - 241px); - margin: 0px 0px; +#channelchat, +#all_chat { + height: calc(100vh - 241px); + margin: 0px 0px; } -#chatchannel, #chatall { - height: inherit; - overflow-y:auto; - text-align:left; - word-wrap:break-word; +#chatchannel, +#chatall { + height: inherit; + overflow-y: auto; + text-align: left; + word-wrap: break-word; } #chat { - /*height: calc(100% - 121px);*/ - text-align:left; - word-wrap:break-word; + /*height: calc(100% - 121px);*/ + text-align: left; + word-wrap: break-word; } -#chat-bar{ - margin: 0; - overflow-x: hidden; - width:98%; +#chat-bar { + margin: 0; + overflow-x: hidden; + width: 98%; } #chat-btn i { - -webkit-transition:opacity 1s; - transition:opacity 1s; + -webkit-transition: opacity 1s; + transition: opacity 1s; } -ul #chat-log{ - color:white; - /*padding: 0px 0px 0px 11px !important;*/ +ul #chat-log { + color: white; + /*padding: 0px 0px 0px 11px !important;*/ } -#chat li{ - margin-left: 5px; +#chat li { + margin-left: 5px; } -#chat-input{ - /*background-color: rgba(0,0,0,0.1);*/ - border-top: 1px solid grey; - border-bottom: 1px solid grey; - height: 46px; +#chat-input { + /*background-color: rgba(0,0,0,0.1);*/ + border-top: 1px solid grey; + border-bottom: 1px solid grey; + height: 46px; } #search_loader { - height: 64px; - display: flex; - justify-content: center; - /* padding: 15px 15px; */ - /* margin-top: 15px; */ - align-items: center; + height: 64px; + display: flex; + justify-content: center; + /* padding: 15px 15px; */ + /* margin-top: 15px; */ + align-items: center; } .search_results { - - background: rgba(0,0,0,0.8); - position: absolute; - width: 100vw; - top: 64px; - /* height: 100vh; */ - + background: rgba(0, 0, 0, 0.8); + position: absolute; + width: 100vw; + top: 64px; + /* height: 100vh; */ } .results-tabs li { - width: 50%; - text-align: center; + width: 50%; + text-align: center; } .results-tabs .indicator { - height: 2px; - z-index: 9; - position: absolute; - margin-left: -16px; - margin-top: 64px; - width: 50%; + height: 2px; + z-index: 9; + position: absolute; + margin-left: -16px; + margin-top: 64px; + width: 50%; } #results_soundcloud { - padding: 0; + padding: 0; } #results_soundcloud #inner-results { - height: calc(100vh - 64px - 64px); + height: calc(100vh - 64px - 64px); } -#search_loader_inner{ - display: flex; +#search_loader_inner { + display: flex; } -.playlist_loader_padding{ - padding: 10px 0px 0px 70px; - background-color: white !important; +.playlist_loader_padding { + padding: 10px 0px 0px 70px; + background-color: white !important; } #search_loader:hover { - background-color:rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); } .progress .indeterminate { - background-color: #26a69a !important; + background-color: #26a69a !important; } .channel_preloader { - background-color:#2D2D2D; + background-color: #2d2d2d; } .channel_preloader .indeterminate { - background-color:white !important; + background-color: white !important; } -#player_overlay{ - background-color:black; - position: absolute; - /*top: calc(-100vh + 64px + 26px);*/ - top: 0px; - z-index: 99; - width:100%; - color:white; - height: calc(100vh - 64px - 32px); - transition: transform .5s ease-out,width .5s ease-out,height .5s ease-out,opacity 1s; - -moz-transition: transform .5s ease-out,width .5s ease-out,height .5s ease-out,opacity 1s; - -o-transition: transform .5s ease-out,width .5s ease-out,height .5s ease-out,opacity 1s; +#player_overlay { + background-color: black; + position: absolute; + /*top: calc(-100vh + 64px + 26px);*/ + top: 0px; + z-index: 99; + width: 100%; + color: white; + height: calc(100vh - 64px - 32px); + transition: transform 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out, + opacity 1s; + -moz-transition: transform 0.5s ease-out, width 0.5s ease-out, + height 0.5s ease-out, opacity 1s; + -o-transition: transform 0.5s ease-out, width 0.5s ease-out, + height 0.5s ease-out, opacity 1s; } -#player_overlay_text{ - width:100%; +#player_overlay_text { + width: 100%; } -#searchform{ - width: 50%; - margin-left: 25%; - +#searchform { + width: 50%; + margin-left: 25%; } nav .zbrand.channel-logo-container { - overflow: visible; + overflow: visible; } -.channelpage{ - background-color:#2D2D2D; - -webkit-transition: background-color .5s ease; - -moz-transition: background-color .5s ease; - -o-transition: background-color .5s ease; - transition: background-color .5s ease; +.channelpage { + background-color: #2d2d2d; + -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; } -.main{ - width: 100%; - max-width:100%; - margin: 0px; - padding:0px; +.main { + width: 100%; + max-width: 100%; + margin: 0px; + padding: 0px; } #nav { - background-color: #2d2d2d; + background-color: #2d2d2d; } -.control-list{ - position: fixed; - top: 0; - right: 0; - z-index: 999; +.control-list { + position: fixed; + top: 0; + right: 0; + z-index: 999; } -.title-container{ - position: initial; - display: inline-block; - margin-top: initial; - width: 65%; - width: calc(90% - 180px - 130px); - left: 25%; +.title-container { + position: initial; + display: inline-block; + margin-top: initial; + width: 65%; + width: calc(90% - 180px - 130px); + left: 25%; } -.title-container li{ - height: 64px; - height:100%; - padding: 0 15px; - width: 100%; +.title-container li { + height: 64px; + height: 100%; + padding: 0 15px; + width: 100%; } -.search-container{ - display: block; +.search-container { + display: block; } -.song-title{ - font-size: 22px; - font-weight: 300; +.song-title { + font-size: 22px; + font-weight: 300; } -.second-title{ - width: 100%; +.second-title { + width: 100%; } -.second-title-container{ - padding: 0 10%; - width: 100%; +.second-title-container { + padding: 0 10%; + width: 100%; } -#playlist{ - /*padding:0px 15px;*/ - flex:1; - z-index: 9; - position: relative; - height: calc(100vh - 64px); - min-width: 338px; - /*background-color:rgba(0,0,0,0.2);*/ +#playlist { + /*padding:0px 15px;*/ + flex: 1; + z-index: 9; + position: relative; + height: calc(100vh - 64px); + min-width: 338px; + /*background-color:rgba(0,0,0,0.2);*/ } -.castButton{ - /* display: none; !important*/ - height: 32px; - width: 32px; - padding-top: 3px; - padding-bottom: 2px; - background: transparent; - border: none; - float: right; - --disconnected-color: white; - --connected-color: #ff9800; +.castButton { + /* display: none; !important*/ + height: 32px; + width: 32px; + padding-top: 3px; + padding-bottom: 2px; + background: transparent; + border: none; + float: right; + --disconnected-color: white; + --connected-color: #ff9800; } .castButton:focus { - background: transparent; + background: transparent; } .castButton-white-active { - --connected-color: white !important; + --connected-color: white !important; } -.castButton-unactive, .castButton-unactive:active, .castButton-unactive:focus, .castButton-unactive:hover, .castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus { - width: 33px; - height: 33px; - float: right; - /*margin: 0px 25px 0px -10px;*/ - background: transparent; - border: none; - background: transparent; - color: white; - border: none; - font-size:18px; - /*padding-right: 1%;*/ +.castButton-unactive, +.castButton-unactive:active, +.castButton-unactive:focus, +.castButton-unactive:hover, +.castButton-active, +.castButton-active:active, +.castButton-active:hover, +.castButton-active:focus { + width: 33px; + height: 33px; + float: right; + /*margin: 0px 25px 0px -10px;*/ + background: transparent; + border: none; + background: transparent; + color: white; + border: none; + font-size: 18px; + /*padding-right: 1%;*/ } -.castButton-unactive i, .castButton-active i{ - font-size: 20px; - margin-top: 3px; +.castButton-unactive i, +.castButton-active i { + font-size: 20px; + margin-top: 3px; } /*.castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{ @@ -1957,2203 +2094,1419 @@ margin-top: -70px; margin-right: 52%; }*/ -.chat-link{ - -webkit-transition:color 1s; - -moz-transition:color 1s; - -o-transition:color 1s; - transition: color 1s; +.chat-link { + -webkit-transition: color 1s; + -moz-transition: color 1s; + -o-transition: color 1s; + transition: color 1s; } -#player{ - height:95%; - height: calc(100% - 32px); - position: relative; - transform: translate(0%, 0%); - z-index: 99; - opacity: 0; - -webkit-transition: transform .5s ease-out, width .5s ease-out, height .5s ease-out, opacity 1s; - transition: transform .5s ease-out, width .5s ease-out, height .5s ease-out, opacity 1s; - -moz-transition: transform .5s ease-out, width .5s ease-out, height .5s ease-out, opacity 1s; - -o-transition: transform .5s ease-out, width .5s ease-out, height .5s ease-out, opacity 1s; +#player { + height: 95%; + height: calc(100% - 32px); + position: relative; + transform: translate(0%, 0%); + z-index: 99; + opacity: 0; + -webkit-transition: transform 0.5s ease-out, width 0.5s ease-out, + height 0.5s ease-out, opacity 1s; + transition: transform 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out, + opacity 1s; + -moz-transition: transform 0.5s ease-out, width 0.5s ease-out, + height 0.5s ease-out, opacity 1s; + -o-transition: transform 0.5s ease-out, width 0.5s ease-out, + height 0.5s ease-out, opacity 1s; } -#fireplace_player{ - z-index: 999; - /*width: calc(100% - .75rem);*/ - height: calc(100% - 32px); - position: absolute; - display:none; - pointer-events: none; +#fireplace_player { + z-index: 999; + /*width: calc(100% - .75rem);*/ + height: calc(100% - 32px); + position: absolute; + display: none; + pointer-events: none; } -.chan{ - padding-right:10px; - /*max-width:22vw;*/ - text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.42); +.chan { + padding-right: 10px; + /*max-width:22vw;*/ + text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.42); } -.nav-btn -{ - transition: background-color .2s; - min-width: 50px; - float:right; - text-align: center; - display: flex; - justify-content: center; - cursor: pointer; +.nav-btn { + transition: background-color 0.2s; + min-width: 50px; + float: right; + text-align: center; + display: flex; + justify-content: center; + cursor: pointer; } .settings-hamburger { - min-width: 50px; + min-width: 50px; +} +.nav-btn:hover { + background-color: rgba(0, 0, 0, 0.6); +} +.hover-text { + display: none; } -.nav-btn:hover{background-color:rgba(0,0,0,0.6);} -.hover-text{display:none;} .nav-btn:hover > .hover-text { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } -nav ul li:hover, nav ul li.active { - background-color: rgba(0,0,0,0.1); +nav ul li:hover, +nav ul li.active { + background-color: rgba(0, 0, 0, 0.1); } -.song-title:hover, .search-container:hover{ - /* background-color: rgba(0,0,0,0.1); */ - -webkit-filter: brightness(90%); - filter: brightness(90%); - background-color: inherit; +.song-title:hover, +.search-container:hover { + /* background-color: rgba(0,0,0,0.1); */ + -webkit-filter: brightness(90%); + filter: brightness(90%); + background-color: inherit; } -.change_user_pass:hover, .delete-all:hover { - background-color: initial; +.change_user_pass:hover, +.delete-all:hover { + background-color: initial; } -.list-image, .list-suggested-image{ - width: 34%; - height: 100%; - float: left; +.list-image, +.list-suggested-image { + width: 34%; + height: 100%; + float: left; } -.add-suggested{ - height:100%; - width: 90%; +.add-suggested { + height: 100%; + width: 90%; } .list-image:after { - -webkit-transition: opacity .3s; - transition: opacity .3s; - font-family: "Material Icons"; - content:"thumb_up"; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - color: white; - font-size: -webkit-xxx-large; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: rgba(0,0,0,0.8); - opacity: 0; - /*transition: all .1s ease;*/ - display: flex; - align-items: center; - justify-content: center; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + font-family: "Material Icons"; + content: "thumb_up"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + color: white; + font-size: -webkit-xxx-large; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.8); + opacity: 0; + /*transition: all .1s ease;*/ + display: flex; + align-items: center; + justify-content: center; } .list-suggested-image:after { - font-family: "Material Icons"; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - content: "check"; - color:white; - font-size: calc(100vh / 15); - position:absolute; - width:100%; height:100%; - top:0; left:0; - background:rgba(0,0,0,0.8); - opacity:0; - transition: all .1s ease; + font-family: "Material Icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + content: "check"; + color: white; + font-size: calc(100vh / 15); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.8); + opacity: 0; + transition: all 0.1s ease; } -.vote-container, .deleted-vote-container{ - height: 100%; - width: 90%; +.vote-container, +.deleted-vote-container { + height: 100%; + width: 90%; } -.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after { - opacity:1; +.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; - color:white !important; +.vote-span { + opacity: 0.7; + padding: 0 0 0 10px; + color: white !important; } -.list-song .card-content{padding:0;} -.list-title{ - display:block; - color:white; - font-size:1em; - text-align:left; - padding: 0 10px 0 10px; - line-height: 2.6rem; - /* width: 57%; */ +.list-song .card-content { + padding: 0; +} +.list-title { + display: block; + color: white; + font-size: 1em; + text-align: left; + padding: 0 10px 0 10px; + line-height: 2.6rem; + /* width: 57%; */ } -.add-suggested .card-content .list-title{ - /*line-height: 3.5rem;*/ +.add-suggested .card-content .list-title { + /*line-height: 3.5rem;*/ } -.card-image{cursor:pointer} -.card{ - margin:2.5px 0 2.5px 0 !important; - overflow:hidden; - transition: box-shadow 0s; +.card-image { + cursor: pointer; } -.list-song{ - width: 100%; - background-color: rgba(255, 255, 255, 0.04); - color:white; - font:12px Arial,sans-serif; - -webkit-transition:height .3s; - -moz-transition:height .3s; - -o-transition:height .3s; - transition:height .3s; - height:66px; - margin: 2.5px 0 2.5px -1px !important; +.card { + margin: 2.5px 0 2.5px 0 !important; + overflow: hidden; + transition: box-shadow 0s; +} +.list-song { + width: 100%; + background-color: rgba(255, 255, 255, 0.04); + color: white; + font: 12px Arial, sans-serif; + -webkit-transition: height 0.3s; + -moz-transition: height 0.3s; + -o-transition: height 0.3s; + transition: height 0.3s; + height: 66px; + margin: 2.5px 0 2.5px -1px !important; } .filtered-search-element { - background-color: #2d2d2d; - display: flex; + background-color: #2d2d2d; + display: flex; } -.card:hover{ - box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12); +.card:hover { + box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 5px 10px 0 rgba(0, 0, 0, 0.12); } -.result img{ - float:left; - height: 70px; - width:124.44px; - border-radius: 3px; - margin: 15px 20px; +.result img { + float: left; + height: 70px; + width: 124.44px; + border-radius: 3px; + margin: 15px 20px; } .result-info-title-length { - display: flex; - flex-direction: column; - justify-content: center; + display: flex; + flex-direction: column; + justify-content: center; } -.result{ - height:100px; - /*margin-left: 40px; +.result { + height: 100px; + /*margin-left: 40px; margin-right: 40px;*/ - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } .result-info-buttons { - width: 13rem; + width: 13rem; } .chan-card { - margin-bottom: 20px; + margin-bottom: 20px; } .result-info-no-buttons { - display: flex; - width: calc(100% - 13rem); - align-items: center; + display: flex; + width: calc(100% - 13rem); + align-items: center; } .thumb-and-info { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } -#add-many{ - float:none; - color:white; +#add-many { + float: none; + color: white; } -#add-many:hover{ - color:orange; +#add-many:hover { + color: orange; +} +#add-many i { + line-height: 36px !important; } -#add-many i{ line-height: 36px !important;} .open-externally { - float:none; - color:white; + float: none; + color: white; } .open-externally:hover { - color:orange; + color: orange; } .open-externally i { - line-height: 36px !important; + line-height: 36px !important; } -#results{ - background-color: rgba(0,0,0,0.8); - position: absolute; - width: 100%; - top: 64px; - max-height: calc(100vh - 128px); - overflow: overlay; - overflow-x: hidden; - /* z-index: 99999999; */ +#results { + background-color: rgba(0, 0, 0, 0.8); + position: absolute; + width: 100%; + top: 64px; + max-height: calc(100vh - 128px); + overflow: overlay; + overflow-x: hidden; + /* z-index: 99999999; */ } #results_soundcloud { - max-height: calc(100vh - 64px - 64px); + max-height: calc(100vh - 64px - 64px); } -.result:hover, .hoverResults { - background-color: rgba(0,0,0,0.4); +.result:hover, +.hoverResults { + background-color: rgba(0, 0, 0, 0.4); } -.search-title{ - height: 40px; - width: 70vw; - /*padding-top: 33px; +.search-title { + height: 40px; + width: 70vw; + /*padding-top: 33px; margin-bottom: -16px; line-height: initial;*/ } -.list-remove{ - width: 70px; - /*margin-top: -19px;*/ - font-size: 12px; - display: inline-table; - float: right; - padding-left: 10px; - height: 100%; +.list-remove { + width: 70px; + /*margin-top: -19px;*/ + font-size: 12px; + display: inline-table; + float: right; + padding-left: 10px; + height: 100%; } .playlist-element .list-remove { - display: flex; - justify-content: center; - align-items: center; - /*margin-top: -32px;*/ - margin-left: 0px; - width: 10%; + display: flex; + justify-content: center; + align-items: center; + /*margin-top: -32px;*/ + margin-left: 0px; + width: 10%; } .tap-target { - color:white; - background-color: #2d2d2d; + color: white; + background-color: #2d2d2d; } -.tap-target-wave::before, .tap-target-wave::after { - background-color:grey; +.tap-target-wave::before, +.tap-target-wave::after { + background-color: grey; } .playlist-element .list-remove a { - color: white !important; - margin-right: 0px !important; + color: white !important; + margin-right: 0px !important; } -.list-song .card-action{ - border-top:none !important; - background: transparent; - font-size: 1em; +.list-song .card-action { + border-top: none !important; + background: transparent; + font-size: 1em; } -.delete_button, .del_suggested, .del_user_suggested{ - position: absolute; - text-align: right; - right: -35%; - /* top: 45%; */ - height: 19px; - font-size: .85rem; - line-height: normal; - padding: 2px 12px !important; - color: white !important; - background: transparent; - width: initial; - border-top: 1px solid rgba(160,160,160,0.2); +.delete_button, +.del_suggested, +.del_user_suggested { + position: absolute; + text-align: right; + right: -35%; + /* top: 45%; */ + height: 19px; + font-size: 0.85rem; + line-height: normal; + padding: 2px 12px !important; + color: white !important; + background: transparent; + width: initial; + border-top: 1px solid rgba(160, 160, 160, 0.2); } .result { - /*border-bottom: solid 1px rgba(229, 229, 229, 0.5);*/ - cursor: pointer; - /*width:93%;*/ + /*border-bottom: solid 1px rgba(229, 229, 229, 0.5);*/ + cursor: pointer; + /*width:93%;*/ } -.result_info{ - opacity: 0.8; - margin-left: -144.44px; - margin-top: 64px; - margin-right: 90px; - background: black; - height: 21px; - padding: 0px 7px; - line-height: initial; - border-top-right-radius: 3px; - display: flex; - align-items: center; +.result_info { + opacity: 0.8; + margin-left: -144.44px; + margin-top: 64px; + margin-right: 90px; + background: black; + height: 21px; + padding: 0px 7px; + line-height: initial; + border-top-right-radius: 3px; + display: flex; + align-items: center; } #suggestions { - padding-bottom: 20px; - min-height: calc(100vh - 64px - 64px - 87px); + padding-bottom: 20px; + min-height: calc(100vh - 64px - 64px - 87px); } -#wrapper.tabs_height, #suggestions.tabs_height{ - height:calc(100vh - 48px - 64px - 32px); - overflow:auto; +#wrapper.tabs_height, +#suggestions.tabs_height { + height: calc(100vh - 48px - 64px - 32px); + overflow: auto; } -#wrapper.tabs_height{ - overflow:hidden; +#wrapper.tabs_height { + overflow: hidden; } .client-wrapper { - height: calc(100vh - 48px - 64px) !important; + height: calc(100vh - 48px - 64px) !important; } .host-mode-wrapper { - height: calc(65vh - 48px + 15px) !important; + height: calc(65vh - 48px + 15px) !important; } #host-title { - color: white; - position: absolute; - z-index: 999999; - padding: 20px; - font-size: 1.5rem; - width: 100%; - background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1)); - text-align: left; + color: white; + position: absolute; + z-index: 999999; + padding: 20px; + font-size: 1.5rem; + width: 100%; + background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); + text-align: left; } - /** settings **/ .admin-information { - padding-right: 1em; - margin-left: 2em; + padding-right: 1em; + margin-left: 2em; } -.switch-text{ - font-size: 13px !important; - padding: 0 !important; - margin-left: 2em; - color: #444; +.switch-text { + font-size: 13px !important; + padding: 0 !important; + margin-left: 2em; + color: #444; } -#settings-button{color:white !important;} +#settings-button { + color: white !important; +} -.admin-settings{ - padding-right: 0 !important; - margin-right: 0 !important; +.admin-settings { + padding-right: 0 !important; + margin-right: 0 !important; } #context-menu-overlay { - width: 100vw; - height: 100vh; - position: fixed; - top: 0px; - left: 0px; - z-index: 99999999; + width: 100vw; + height: 100vh; + position: fixed; + top: 0px; + left: 0px; + z-index: 99999999; } .context-menu-list { - z-index: 999999999 !important; - position: absolute; - background: #2d2d2d; - border: 1px solid #2d2d2d; - width: 200px; - border-radius: 3px; + z-index: 999999999 !important; + position: absolute; + background: #2d2d2d; + border: 1px solid #2d2d2d; + width: 200px; + border-radius: 3px; } .context-menu-separator { - background: white !important; - height: 1px; - padding: 0px !important; + background: white !important; + height: 1px; + padding: 0px !important; } .context-menu-item { - color:white; - padding: 5px 15px; - background: #2d2d2d; - cursor: pointer; + color: white; + padding: 5px 15px; + background: #2d2d2d; + cursor: pointer; } .context-menu-item:hover { - background: rgba(0,0,0,.5); + background: rgba(0, 0, 0, 0.5); } .context-menu-item.context-menu-hover { - background: #484848; + background: #484848; } .context-menu-item.context-menu-disabled { - background-color: #353535 !important; - cursor: auto; + background-color: #353535 !important; + cursor: auto; } -.close-settings{ - float: right; - width: 73px; - text-align: center; - display: flex; - align-items: center; - height: 64px; +.close-settings { + float: right; + width: 73px; + text-align: center; + display: flex; + align-items: center; + height: 64px; } .setting-text { - font-size: 13px !important; - padding: 0 !important; + font-size: 13px !important; + padding: 0 !important; } -.switch{ - display: flex; - float: right; - /*position: absolute;*/ - margin-right:10px; +.switch { + display: flex; + float: right; + /*position: absolute;*/ + margin-right: 10px; } .switch label .lever { - background-color: #00B2FF; + background-color: #00b2ff; } -.switch label input[type=checkbox]:checked + .lever { - background-color: #5ADB74; +.switch label input[type="checkbox"]:checked + .lever { + background-color: #5adb74; } -.switch label input[type=checkbox]:checked + .lever:after { - background-color: white; +.switch label input[type="checkbox"]:checked + .lever:after { + background-color: white; } -.switch input[type=checkbox][disabled] + .lever , .switch label input[type=checkbox]:checked[disabled] + .lever{ - cursor: default; - background-color: #939393; +.switch input[type="checkbox"][disabled] + .lever, +.switch label input[type="checkbox"]:checked[disabled] + .lever { + cursor: default; + background-color: #939393; } .switch label { - color:#848484; + color: #848484; } -.collapsible-body ul li.white-bg{ - background-color:white !important; +.collapsible-body ul li.white-bg { + background-color: white !important; } -.left-span, .right-span{ - display: inline-block; - width:40px; - text-align: center; +.left-span, +.right-span { + display: inline-block; + width: 40px; + text-align: center; } .time_color { - color: lightgrey; + color: lightgrey; } -#admin-lock, #strict-skip-lock -{ - position:absolute; - display: flex; - align-self: center; +#admin-lock, +#strict-skip-lock { + position: absolute; + display: flex; + align-self: center; } - -.ui-resizable-e{ - width:15px; - cursor: col-resize; +.ui-resizable-e { + width: 15px; + cursor: col-resize; } -.rounded-bottom{ - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; +.rounded-bottom { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; } -.rounded-top{ - border-top-right-radius: 4px; - border-top-left-radius: 4px; +.rounded-top { + border-top-right-radius: 4px; + border-top-left-radius: 4px; } .polyfill-color { - border: none; - background: white; - border-radius: 2px; - padding: 12px 12px 0px 12px; - min-width: 300px; - display: flex; - justify-content: center; + border: none; + background: white; + border-radius: 2px; + padding: 12px 12px 0px 12px; + min-width: 300px; + display: flex; + justify-content: center; } .sp-picker-container { - width: auto; + width: auto; } -.sp-container button, .sp-container button:hover, .sp-container button:active { - background: none; - border: none; - border-radius: 0; - color: black; - font-size: inherit; - line-height: inherit; - box-shadow: none; +.sp-container button, +.sp-container button:hover, +.sp-container button:active { + background: none; + border: none; + border-radius: 0; + color: black; + font-size: inherit; + line-height: inherit; + box-shadow: none; } .sp-replacer { - border: none; - background: none; + border: none; + background: none; } #embed.modal.open { - overflow-y: visible; + overflow-y: visible; } -#top-button, #bottom-button{ - color: white; - position: absolute; - left: 50%; - transform: translate(-50%); - background-color: #2d2d2d; - width: 70px; - height: 27px; - z-index: 1; - cursor:pointer; +#top-button, +#bottom-button { + color: white; + position: absolute; + left: 50%; + transform: translate(-50%); + background-color: #2d2d2d; + width: 70px; + height: 27px; + z-index: 1; + cursor: pointer; } -#top-button{ - top:0px; +#top-button { + top: 0px; } -.top-button-with-tabs{ - top:48px !important; +.top-button-with-tabs { + top: 48px !important; } -#bottom-button{ - bottom: 35px; +#bottom-button { + bottom: 35px; } - /************** Youtube controls **************/ -#controls -{ - overflow: hidden; - z-index: 99999999999; - opacity:0; - height:32px; - /* background-color:rgba(255, 255, 255, 0.1); */ - width:100%; - color:white; - margin-top:-6px; +#controls { + overflow: hidden; + z-index: 99999999999; + opacity: 0; + height: 32px; + /* background-color:rgba(255, 255, 255, 0.1); */ + width: 100%; + color: white; + margin-top: -6px; } .playbar { - color: white; + color: white; } .playbar-btn { - cursor: pointer; - transition: background-color .2s; + cursor: pointer; + transition: background-color 0.2s; } .playbar-btn:hover { - background-color: rgba(0,0,0,0.6); - color:rgba(255,255,255,0.5); + background-color: rgba(0, 0, 0, 0.6); + color: rgba(255, 255, 255, 0.5); } -#playpause, #duration, #volume-button -{ - float:left; - color:white; +#playpause, +#duration, +#volume-button { + float: left; + color: white; } -.prev.playbar, #playpause, .skip.playbar { - padding: 0 2.5px; +.prev.playbar, +#playpause, +.skip.playbar { + padding: 0 2.5px; } -.skip.playbar, .prev.playbar { - float:left; - font-size: 24px; - cursor: pointer; - height: 32px; - line-height: 31px; - padding-top: 3px; +.skip.playbar, +.prev.playbar { + float: left; + font-size: 24px; + cursor: pointer; + height: 32px; + line-height: 31px; + padding-top: 3px; } -.margin-playbar -{ - margin-left:10px; +.margin-playbar { + margin-left: 10px; } .skip_next_client { - float: left; + float: left; } -#volume-button{ - padding-top: 3px; - padding-left: 2px; - padding-right: 5px; - margin-left: 5px; +#volume-button { + padding-top: 3px; + padding-left: 2px; + padding-right: 5px; + margin-left: 5px; } -#playpause:hover, #volume-button:hover, #fullscreen:hover, #addToOtherList -{ - color:rgba(255,255,255,0.5); +#playpause:hover, +#volume-button:hover, +#fullscreen:hover, +#addToOtherList { + color: rgba(255, 255, 255, 0.5); } -#fullscreen, #addToOtherList -{ - float:right; - color:white; - margin-right: 0px; - /* margin-top: 2px; */ - padding-top: 4px; - padding-right: 3px; - padding-left: 3px; +#fullscreen, +#addToOtherList { + float: right; + color: white; + margin-right: 0px; + /* margin-top: 2px; */ + padding-top: 4px; + padding-right: 3px; + padding-left: 3px; } #addToOtherList { - margin-right: 5px; - height: 100% !important; + margin-right: 5px; + height: 100% !important; } -#duration, #viewers -{ - margin-top:5px; - font-family:"Roboto", sans-serif; - font-weight:300; - margin-left:15px; +#duration, +#viewers { + margin-top: 5px; + font-family: "Roboto", sans-serif; + font-weight: 300; + margin-left: 15px; } #viewers { - float: right; - height: 32px; - line-height: 33px; - display: flex; - align-items: center; - margin: 0px; - padding-right:1%; + float: right; + height: 32px; + line-height: 33px; + display: flex; + align-items: center; + margin: 0px; + padding-right: 1%; } -#viewers .material-icons{ - margin-right: 5px; +#viewers .material-icons { + margin-right: 5px; } -#play, #pause, #volume-button, #fullscreen, #addToOtherList -{ - font-size: 24px; - cursor:pointer; - height: 32px; - line-height: 31px; +#play, +#pause, +#volume-button, +#fullscreen, +#addToOtherList { + font-size: 24px; + cursor: pointer; + height: 32px; + line-height: 31px; } - - .ui-slider-vertical { - width: .8em; - height: 100px; + width: 0.8em; + height: 100px; } .ui-slider { - position: relative; - text-align: left; + position: relative; + text-align: left; } .ui-slider-vertical .ui-slider-range-min { - bottom: 0; + bottom: 0; } .ui-slider-vertical .ui-slider-range { - left: 0; - width: 100%; - border-radius: 0px !important; + left: 0; + width: 100%; + border-radius: 0px !important; } .ui-slider .ui-slider-range { - position: absolute; - z-index: 1; - font-size: .7em; - display: block; - border: 0; - background-position: 0 0; + position: absolute; + z-index: 1; + font-size: 0.7em; + display: block; + border: 0; + background-position: 0 0; } .ui-slider-vertical .ui-slider-handle { - left: -.3em; - margin-left: 0; - margin-bottom: -.6em; + left: -0.3em; + margin-left: 0; + margin-bottom: -0.6em; } .ui-slider .ui-slider-handle { - position: absolute; - z-index: 2; - width: 1.2em; - height: 1.2em; - cursor: default; - -ms-touch-action: none; - touch-action: none; + position: absolute; + z-index: 2; + width: 1.2em; + height: 1.2em; + cursor: default; + -ms-touch-action: none; + touch-action: none; } .ui-slider-horizontal .ui-slider-range-min { - left: 0; + left: 0; } .ui-slider-horizontal .ui-slider-range { - top: 0; - height: 100%; + top: 0; + height: 100%; } .ui-slider .ui-slider-range { - position: absolute; - z-index: 1; - font-size: .7em; - display: block; - border: 0; - background-position: 0 0; + position: absolute; + z-index: 1; + font-size: 0.7em; + display: block; + border: 0; + background-position: 0 0; } .ui-slider-horizontal .ui-slider-handle { - top: -.3em; - margin-left: -.6em; + top: -0.3em; + margin-left: -0.6em; } -#volume, #volume-control-remote { - border-radius: 10px; - cursor:pointer; - float:left; - position: relative; - left: 10px; - margin: 13px auto; - height:5px; - width: 75px; - /*background-color:rgba(0, 0, 0, 0.5);*/ - background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x; - border: none; - outline: none; - /*border-radius: 2px;*/ +#volume, +#volume-control-remote { + border-radius: 10px; + cursor: pointer; + float: left; + position: relative; + left: 10px; + margin: 13px auto; + height: 5px; + width: 75px; + /*background-color:rgba(0, 0, 0, 0.5);*/ + background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x; + border: none; + outline: none; + /*border-radius: 2px;*/ } -#volume.rc, #volume-control-remote { - width:100%; - height: auto; - margin-top: 30px; - background: darkgrey; +#volume.rc, +#volume-control-remote { + width: 100%; + height: auto; + margin-top: 30px; + background: darkgrey; } #volume.vertical { - border-radius: 0px; + border-radius: 0px; } -#volume .volume-slid, #volume-control-remote .volume-slid-remote { - border-radius: 10px; - background: white; - height: 5px; - width: 0%; +#volume .volume-slid, +#volume-control-remote .volume-slid-remote { + border-radius: 10px; + background: white; + height: 5px; + width: 0%; } -#volume.rc .volume-slid, #volume-control-remote .volume-slid-remote { - background: black; +#volume.rc .volume-slid, +#volume-control-remote .volume-slid-remote { + background: black; } #volume .volume-slid.vertical { - width: 100%; - height: 0%; - border-radius: 0px; - bottom: 0px; - position: absolute; + width: 100%; + height: 0%; + border-radius: 0px; + bottom: 0px; + position: absolute; } -#volume .volume-handle, #volume-control-remote .volume-handle-remote { - height: 15px; - width: 15px; - background: white; - border-radius: 15px; - border: 1px solid lightgrey; - margin-top: -9.75px; - position: absolute; - left: 0%; - margin-left: -5.75px; - transition: background 0.2s ease, box-shadow 0.2s ease; +#volume .volume-handle, +#volume-control-remote .volume-handle-remote { + height: 15px; + width: 15px; + background: white; + border-radius: 15px; + border: 1px solid lightgrey; + margin-top: -9.75px; + position: absolute; + left: 0%; + margin-left: -5.75px; + transition: background 0.2s ease, box-shadow 0.2s ease; } -#volume.rc .volume-handle, #volume-control-remote .volume-handle-remote { - background: black; +#volume.rc .volume-handle, +#volume-control-remote .volume-handle-remote { + background: black; } #volume .volume-handle.vertical { - bottom: 0%; - display: none; + bottom: 0%; + display: none; } -#volume .volume-handle.ui-state-active, #volume .volume-handle-remote.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); - position: absolute; - width: 14px; - height: 14px; - border-radius: 21px; - background: #dadada; +#volume .volume-handle.ui-state-active, +#volume .volume-handle-remote.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); + position: absolute; + width: 14px; + height: 14px; + border-radius: 21px; + background: #dadada; } -#volume.rc .volume-handle.ui-state-active, #volume .volume-handle-remote.ui-state-active { - background: #2d2d2d; +#volume.rc .volume-handle.ui-state-active, +#volume .volume-handle-remote.ui-state-active { + background: #2d2d2d; } -#volume-control-remote .ui-state-active, #volume-control .ui-state-active { - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1,1,1,0.15); - position: absolute; - width: 14px; - height: 14px; - border-radius: 21px; - background: #464646 !important; +#volume-control-remote .ui-state-active, +#volume-control .ui-state-active { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1, 1, 1, 0.15); + position: absolute; + width: 14px; + height: 14px; + border-radius: 21px; + background: #464646 !important; } -.play -{ - background-size: auto; - width: 55px; - height: 27px; +.play { + background-size: auto; + width: 55px; + height: 27px; } -.pause -{ - background-size: auto; - width: 55px; - height: 27px; +.pause { + background-size: auto; + width: 55px; + height: 27px; } .embed-preview iframe { - border: none; + border: none; } -.disabled-vote{ - cursor: not-allowed !important; - background: rgba(255,255,255,.2); +.disabled-vote { + cursor: not-allowed !important; + background: rgba(255, 255, 255, 0.2); } -.hide -{ - display:none !important; +.hide { + display: none !important; } .google-play-image-list a { - padding-left: 0px !important; + padding-left: 0px !important; } .google-play-image-list { - margin-left: -17px; - width: calc(17rem + 26px); + margin-left: -17px; + width: calc(17rem + 26px); } .google-play-image-list a img { - width: 100%; + width: 100%; } .apple-appstore-image-list { - margin-left: -16px; - width: calc(17em + 32px); - margin-top: -8px; + margin-left: -16px; + width: calc(17em + 32px); + margin-top: -8px; } #join-sidebar #share-join-qr { - height: 25vh; + height: 25vh; } .apple-image-link { - padding-left: 0 !important; + padding-left: 0 !important; } .apple-appstore-image-list a img { - width: 100%; - padding: 0 23px 0 14px; + width: 100%; + padding: 0 23px 0 14px; } -#bar -{ - height:100%; - background-color:rgba(0, 0, 0, 0.3); +#bar { + height: 100%; + background-color: rgba(0, 0, 0, 0.3); } -#offline-info, #host-info{ - color: black; - line-height: 20px; - margin: 0 24px; - padding-bottom: 15px; +#offline-info, +#host-info { + color: black; + line-height: 20px; + margin: 0 24px; + padding-bottom: 15px; } .host-mode-height { - height: 100vh !important; + height: 100vh !important; } .host-mode-height #player_overlay { - height: calc(100vh - 32px); + height: calc(100vh - 32px); } .host-mode-width { - width: 100vw !important; + width: 100vw !important; } -#seekToDuration, #addToListInput{ - position: absolute; - background: #2d2d2d; - color:white; +#seekToDuration, +#addToListInput { + position: absolute; + background: #2d2d2d; + color: white; - padding: 10px 8px; - z-index: 2000; - background-color: #2d2d2d; - border-radius: 2px; - color: #fff; - min-height: 36px; - text-align: center; - max-width: calc(100% - 4px); - pointer-events: none; + padding: 10px 8px; + z-index: 2000; + background-color: #2d2d2d; + border-radius: 2px; + color: #fff; + min-height: 36px; + text-align: center; + max-width: calc(100% - 4px); + pointer-events: none; } #addToListInput { - top: -125px; - right: 10px; - z-index: 999999; - pointer-events: all; + top: -125px; + right: 10px; + z-index: 999999; + pointer-events: all; } #addToListInput .input-field { - margin-right: 25px; - margin-bottom: 15px !important; - margin-top: 10px; - display: flex; - flex-direction: column; + margin-right: 25px; + margin-bottom: 15px !important; + margin-top: 10px; + display: flex; + flex-direction: column; } #addToListInput span { - color: white; + color: white; } #addToListInput .input-field input { - color: white; + color: white; } -.ewresize{ - cursor: ew-resize; +.ewresize { + cursor: ew-resize; } #main_components { - position: absolute; - top: calc(100% - 26px); - width: 100%; - z-index: 99; + position: absolute; + top: calc(100% - 26px); + width: 100%; + z-index: 99; } .mobile-delete { - display: none; + display: none; } /* HAMBURGER */ .settings-hamburger { - cursor: pointer; + cursor: pointer; } -.room-namer::-webkit-input-placeholder{ - /*color:rgb(155, 155, 155) !important;*/ - -webkit-transition:opacity 0.5s; - color: lightgrey !important; +.room-namer::-webkit-input-placeholder { + /*color:rgb(155, 155, 155) !important;*/ + -webkit-transition: opacity 0.5s; + color: lightgrey !important; } .result-get-more-info { - display: none; + display: none; } .result-object { - border-bottom: solid 1px rgba(229, 229, 229, 0.5); + border-bottom: solid 1px rgba(229, 229, 229, 0.5); } .hamburger-sidenav { - width: 24px; - height: 24px; - position: relative; - margin: 24px 20px 16px 20px; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: position .5s ease-in-out; - -moz-transition: position .5s ease-in-out; - -o-transition: position .5s ease-in-out; - transition: position .5s ease-in-out; - cursor: pointer; + width: 24px; + height: 24px; + position: relative; + margin: 24px 20px 16px 20px; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: position 0.5s ease-in-out; + -moz-transition: position 0.5s ease-in-out; + -o-transition: position 0.5s ease-in-out; + transition: position 0.5s ease-in-out; + cursor: pointer; } .control-list li:last-child:hover { - background-color: rgba(0,0,0,0.6); + background-color: rgba(0, 0, 0, 0.6); } .hamburger-sidenav span { - display: block; - position: absolute; - height: 2px; - width: 100%; - background: white; - border-radius: 0px; - opacity: 1; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: .25s ease-in-out; - -moz-transition: .25s ease-in-out; - -o-transition: .25s ease-in-out; - transition: .25s ease-in-out; + display: block; + position: absolute; + height: 2px; + width: 100%; + background: white; + border-radius: 0px; + opacity: 1; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: 0.25s ease-in-out; + -moz-transition: 0.25s ease-in-out; + -o-transition: 0.25s ease-in-out; + transition: 0.25s ease-in-out; } .hamburger-sidenav span:nth-child(1) { - top: 2px; + top: 2px; } .hamburger-sidenav span:nth-child(2) { - top: 8px; + top: 8px; } .hamburger-sidenav span:nth-child(3) { - top: 14px; + top: 14px; } .hamburger-sidenav.open span:nth-child(1) { - top: 8px; - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -o-transform: rotate(135deg); - transform: rotate(135deg); + top: 8px; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + transform: rotate(135deg); } .hamburger-sidenav.open span:nth-child(2) { - opacity: 0; + opacity: 0; } .hamburger-sidenav.open span:nth-child(3) { - top: 8px; - -webkit-transform: rotate(-135deg); - -moz-transform: rotate(-135deg); - -o-transform: rotate(-135deg); - transform: rotate(-135deg); + top: 8px; + -webkit-transform: rotate(-135deg); + -moz-transform: rotate(-135deg); + -o-transform: rotate(-135deg); + transform: rotate(-135deg); } -/*************************************************************************** -**************************************************************************** -********************* Screen size specific rules *************************** -**************************************************************************** -***************************************************************************/ - -.mobile-search{display:none;} -.show-only-mobile{display:none; +.mobile-search { + display: none; +} +.show-only-mobile { + display: none; } -@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%;*/ - } +.remote-button { + line-height: 21px; } -@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 .5s ease; - -moz-transition: background-color .5s ease; - -o-transition: background-color .5s ease; - transition: background-color .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 .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 .5s; - -moz-transition: margin .5s; - transition: margin .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: .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;*/ - } -} - -.remote-button{ - line-height:21px; -} - -.remote-button i{ - height: 36px !important; - line-height: 36px !important; +.remote-button i { + height: 36px !important; + line-height: 36px !important; } #remote-controls { - font-size:50px !important; + font-size: 50px !important; } #remote-controls i { - cursor:pointer; + cursor: pointer; } -#code-text{ - color:#000; - text-transform: uppercase; +#code-text { + color: #000; + text-transform: uppercase; } -#code-link{ - height: auto !important; - text-align: center; - display: block !important; +#code-link { + height: auto !important; + text-align: center; + display: block !important; } .remote-panel p { - padding: 0 42px; - color: #000; - text-align: center; - line-height: initial; + padding: 0 42px; + color: #000; + text-align: center; + line-height: initial; } - -#code-link + a{ - line-height: normal; - color: black; - text-align: center; +#code-link + a { + line-height: normal; + color: black; + text-align: center; } -#volume-control, #volume-control-remote { - cursor:pointer; - float:left; - position: relative; - left: 10px; - margin: 13px auto; - height:5px; - width: 97%; - background:rgba(0, 0, 0, 0.5); - border: none; - outline: none; - border-radius: 2px; +#volume-control, +#volume-control-remote { + cursor: pointer; + float: left; + position: relative; + left: 10px; + margin: 13px auto; + height: 5px; + width: 97%; + background: rgba(0, 0, 0, 0.5); + border: none; + outline: none; + border-radius: 2px; } -#volume-control .ui-slider-handle, , #volume-control-remote .ui-slider-range-min{ - height:5px; - width: 75px; - position: absolute; - background:rgba(47, 47, 47, 1); - border: none; - outline: none; - border-radius: 2px; +#volume-control .ui-slider-handle, +, +#volume-control-remote .ui-slider-range-min { + height: 5px; + width: 75px; + position: absolute; + background: rgba(47, 47, 47, 1); + border: none; + outline: none; + border-radius: 2px; } -#volume-control .ui-slider-range-min, #volume-control-remote .ui-slider-range-min { - height: 15px; - width: 36px; - background: rgb(255, 44, 44); - position: absolute; - cursor: pointer; - outline: none; - border: none; - border-radius: 17px; - margin-left: -17px; - margin-top:0px; +#volume-control .ui-slider-range-min, +#volume-control-remote .ui-slider-range-min { + height: 15px; + width: 36px; + background: rgb(255, 44, 44); + position: absolute; + cursor: pointer; + outline: none; + border: none; + border-radius: 17px; + margin-left: -17px; + margin-top: 0px; } -.volume-elements{ - display:flex; +.volume-elements { + display: flex; } #volume-control { - float: none; - /*width: 90%;*/ - margin: auto; - margin-left: 10px; - margin-right: 0; - margin-top: 30px; - height: 5px; - border-radius: 4px; - margin-bottom: 20px; - cursor: pointer; - float: left; - position: relative; - background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x; - border: none; - outline: none; + float: none; + /*width: 90%;*/ + margin: auto; + margin-left: 10px; + margin-right: 0; + margin-top: 30px; + height: 5px; + border-radius: 4px; + margin-bottom: 20px; + cursor: pointer; + float: left; + position: relative; + background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x; + border: none; + outline: none; } #volume-control .ui-slider-range-min { - margin-left: 0px; - height: 5px; - position: absolute; - background-color: rgba(0, 0, 0, 0.8); - border: none; - outline: none; + margin-left: 0px; + height: 5px; + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + border: none; + outline: none; } - - #volume-control .ui-slider-handle { - margin-left: -12.5px !important; - width: 40px; - margin-top: -3px; - background: #2d2d2d; - border: none; - height: 20px; - padding: 0; - border: 1px solid white; - width: 20px; - background: #000 50% 50% repeat-x; - position: absolute; - cursor: pointer; - outline: none; - margin-left: -7.5px; - border-radius: 1000px; - transition: background 0.2s ease, box-shadow 0.2s ease; + margin-left: -12.5px !important; + width: 40px; + margin-top: -3px; + background: #2d2d2d; + border: none; + height: 20px; + padding: 0; + border: 1px solid white; + width: 20px; + background: #000 50% 50% repeat-x; + position: absolute; + cursor: pointer; + outline: none; + margin-left: -7.5px; + border-radius: 1000px; + transition: background 0.2s ease, box-shadow 0.2s ease; } -#volume-control-remote{ - float: none; - width: 70%; - margin:auto; - margin-left: 10px; - margin-right: 0; - margin-top: 30px; - height: 5px; - border-radius: 4px; - margin-bottom: 20px; - cursor: pointer; - float:left; - position: relative; - /* left: 10px; */ - /* margin: 13px auto; */ - /* height:5px; */ - /* width: 75px; */ - /*background-color:rgba(0, 0, 0, 0.5);*/ - background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x; - border: none; - outline: none; - /*border-radius: 2px;*/ +#volume-control-remote { + float: none; + width: 70%; + margin: auto; + margin-left: 10px; + margin-right: 0; + margin-top: 30px; + height: 5px; + border-radius: 4px; + margin-bottom: 20px; + cursor: pointer; + float: left; + position: relative; + /* left: 10px; */ + /* margin: 13px auto; */ + /* height:5px; */ + /* width: 75px; */ + /*background-color:rgba(0, 0, 0, 0.5);*/ + background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x; + border: none; + outline: none; + /*border-radius: 2px;*/ } -#volume-control-remote .ui-slider-range-min{ - margin-left:0px; - /* margin-top: 0px; */ - /* height:10px; */ - /* background: black; */ - height: 5px; - /* width: 75px; */ - position: absolute; - background-color: rgba(0, 0, 0, 0.8); - border: none; - outline: none; +#volume-control-remote .ui-slider-range-min { + margin-left: 0px; + /* margin-top: 0px; */ + /* height:10px; */ + /* background: black; */ + height: 5px; + /* width: 75px; */ + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + border: none; + outline: none; } -#volume-control-remote .ui-slider-handle{ - margin-left: -12.5px !important; - width: 40px; - margin-top:-3px; - background: #2d2d2d; - border:none; - /* display: none; */ - /* height: 14px; */ - /* width: 10px; */ - height: 20px; - padding: 0; - border: 1px solid white; - width: 20px; - background: #000 50% 50% repeat-x; - position: absolute; - cursor: pointer; - outline: none; - /* border: none; */ - margin-left: -7.5px; - /* margin-top: 0px; */ - border-radius: 1000px; - transition: background 0.2s ease, box-shadow 0.2s ease; +#volume-control-remote .ui-slider-handle { + margin-left: -12.5px !important; + width: 40px; + margin-top: -3px; + background: #2d2d2d; + border: none; + /* display: none; */ + /* height: 14px; */ + /* width: 10px; */ + height: 20px; + padding: 0; + border: 1px solid white; + width: 20px; + background: #000 50% 50% repeat-x; + position: absolute; + cursor: pointer; + outline: none; + /* border: none; */ + margin-left: -7.5px; + /* margin-top: 0px; */ + border-radius: 1000px; + transition: background 0.2s ease, box-shadow 0.2s ease; } -.slider-vol, .slider-vol-mobile{ - float: right; - color: black; - font-size: 22px; - margin-right: 20px; - padding-left: 35px; - margin-top: 22px; +.slider-vol, +.slider-vol-mobile { + float: right; + color: black; + font-size: 22px; + margin-right: 20px; + padding-left: 35px; + margin-top: 22px; } -.slider-vol-mobile{ - margin-top:5px; +.slider-vol-mobile { + margin-top: 5px; } -.about-remote{ - padding-top: 50px; +.about-remote { + padding-top: 50px; } -.rc{ - display: none; +.rc { + display: none; } - - -.select-wrapper input.select-dropdown:focus, input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { - border-bottom: 1px solid orange; - -webkit-box-shadow: 0 1px 0 0 orange; - box-shadow: 0 1px 0 0 orange; +.select-wrapper input.select-dropdown:focus, +input:not([type]):focus:not([readonly]), +input[type="text"]:not(.browser-default):focus:not([readonly]), +input[type="password"]:not(.browser-default):focus:not([readonly]), +input[type="email"]:not(.browser-default):focus:not([readonly]), +input[type="url"]:not(.browser-default):focus:not([readonly]), +input[type="time"]:not(.browser-default):focus:not([readonly]), +input[type="date"]:not(.browser-default):focus:not([readonly]), +input[type="datetime"]:not(.browser-default):focus:not([readonly]), +input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), +input[type="tel"]:not(.browser-default):focus:not([readonly]), +input[type="number"]:not(.browser-default):focus:not([readonly]), +input[type="search"]:not(.browser-default):focus:not([readonly]), +textarea.materialize-textarea:focus:not([readonly]) { + border-bottom: 1px solid orange; + -webkit-box-shadow: 0 1px 0 0 orange; + box-shadow: 0 1px 0 0 orange; } - -input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { - color: orange; +input:not([type]):focus:not([readonly]) + label, +input[type="text"]:not(.browser-default):focus:not([readonly]) + label, +input[type="password"]:not(.browser-default):focus:not([readonly]) + label, +input[type="email"]:not(.browser-default):focus:not([readonly]) + label, +input[type="url"]:not(.browser-default):focus:not([readonly]) + label, +input[type="time"]:not(.browser-default):focus:not([readonly]) + label, +input[type="date"]:not(.browser-default):focus:not([readonly]) + label, +input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label, +input[type="datetime-local"]:not(.browser-default):focus:not([readonly]) + + label, +input[type="tel"]:not(.browser-default):focus:not([readonly]) + label, +input[type="number"]:not(.browser-default):focus:not([readonly]) + label, +input[type="search"]:not(.browser-default):focus:not([readonly]) + label, +textarea.materialize-textarea:focus:not([readonly]) + label { + color: orange; } -.search_input{ - height:50% !important; +.search_input { + height: 50% !important; } .search_input:focus { - border-bottom: 1px solid #9e9e9e !important; - -webkit-box-shadow: 0 1px 0 0 #9e9e9e !important; - box-shadow: 0 1px 0 0 #9e9e9e !important; + border-bottom: 1px solid #9e9e9e !important; + -webkit-box-shadow: 0 1px 0 0 #9e9e9e !important; + box-shadow: 0 1px 0 0 #9e9e9e !important; } -#search::-webkit-input-placeholder, #searchFrontpage::-webkit-input-placeholder { /* WebKit browsers */ - color: #FFF; +#search::-webkit-input-placeholder, +#searchFrontpage::-webkit-input-placeholder { + /* WebKit browsers */ + color: #fff; } -#search:-moz-placeholder, #searchFrontpage:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: #FFF; - opacity: 1; +#search:-moz-placeholder, +#searchFrontpage:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + color: #fff; + opacity: 1; } -#search::-moz-placeholder, #searchFrontpage::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: #FFF; - opacity: 1; +#search::-moz-placeholder, +#searchFrontpage::-moz-placeholder { + /* Mozilla Firefox 19+ */ + color: #fff; + opacity: 1; } -#search:-ms-input-placeholder, #searchFrontpage:-ms-input-placeholder { /* Internet Explorer 10+ */ - color: #FFF; -} - -/* -* -* -* 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% - .75rem); - height: calc(100% - 32px); -} - -@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;} -} - -* { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -moz-tap-highlight-color: rgba(0, 0, 0, 0); +#search:-ms-input-placeholder, +#searchFrontpage:-ms-input-placeholder { + /* Internet Explorer 10+ */ + color: #fff; } .select-all { - -webkit-user-select: all !important; /* Chrome 49+ */ - -moz-user-select: all !important; /* Firefox 43+ */ - -ms-user-select: all !important; /* No support yet */ - user-select: all !important; /* Likely future */ + -webkit-user-select: all !important; /* Chrome 49+ */ + -moz-user-select: all !important; /* Firefox 43+ */ + -ms-user-select: all !important; /* No support yet */ + user-select: all !important; /* Likely future */ } diff --git a/server/public/assets/html/callback.html b/server/public/assets/html/callback.html index 1ed07fe8..cede2db9 100755 --- a/server/public/assets/html/callback.html +++ b/server/public/assets/html/callback.html @@ -1,177 +1,175 @@ - - Zoff OAuth Callback - - - - - - -

Loading..

-
-
-
- + + Zoff OAuth Callback + + + + + + +

Loading..

+
+ diff --git a/server/public/assets/html/offline.html b/server/public/assets/html/offline.html index d1405d6c..b61752b8 100755 --- a/server/public/assets/html/offline.html +++ b/server/public/assets/html/offline.html @@ -1,35 +1,61 @@ - - Zoff - - - - - - - - - - - - - - - - -
- logo -
-
-

Oops..

-

- We're sorry, but Zoff doesn't seem to be working at the moment. Have you checked your internet connection lately? -

-

- Contact Us -

-
-
- + + Zoff + + + + + + + + + + + + + + + + +
+ logo +
+
+

Oops..

+

+ We're sorry, but Zoff doesn't seem to be working at the moment. Have + you checked your internet connection lately? +

+

+ Contact Us +

+
+
+ diff --git a/server/public/assets/js/admin.js b/server/public/assets/js/admin.js index 7a5cabab..bdfbd60b 100755 --- a/server/public/assets/js/admin.js +++ b/server/public/assets/js/admin.js @@ -1,291 +1,351 @@ var Admin = { + beginning: true, + logged_in: false, - beginning:true, - logged_in: false, + update_strict_skip: function(value) { + var form = document.getElementById("adminSettingsForm"); + form.strictSkipNumber = value; + Admin.submitAdmin(form, false); + }, - update_strict_skip: function(value) { - var form = document.getElementById("adminSettingsForm"); - form.strictSkipNumber = value; - Admin.submitAdmin(form, false); - }, + pw: function(msg) { + Admin.logged_in = msg; + if (!msg) return; + w_p = false; + M.Modal.init(document.getElementById("channel_info")); + if (Admin.logged_in) { + 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") != "" + ) { + Helper.removeClass(".suggested-badge", "hide"); + } + if (conf != undefined && conf.strictSkip) { + Helper.removeClass(".strict-skip-input", "hide"); + } + } else { + Admin.hideUserSuggested(); + Helper.addClass(".strict-skip-input", "hide"); + } + Helper.removeClass(".delete-context-menu", "context-menu-disabled"); + names = [ + "vote", + "addsongs", + "longsongs", + "frontpage", + "allvideos", + "removeplay", + "skip", + "shuffle", + "userpass", + "toggleChat", + "strictSkip" + ]; + //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass); - pw: function(msg) { - Admin.logged_in = msg; - if(!msg) return; - w_p = false; - M.Modal.init(document.getElementById("channel_info")); - if(Admin.logged_in) { - 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") != "") { - Helper.removeClass(".suggested-badge", "hide"); - } - if(conf != undefined && conf.strictSkip) { - Helper.removeClass(".strict-skip-input", "hide"); - } - } else { - Admin.hideUserSuggested(); - Helper.addClass(".strict-skip-input", "hide"); - } - Helper.removeClass(".delete-context-menu", "context-menu-disabled"); - names = ["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++) { - document.getElementsByName(names[i])[0].removeAttribute("disabled"); - } - - Helper.removeClass(".card-action", "hide"); - Helper.addClass("#admin-lock", "clickable"); - document.getElementById("admin-lock").innerHTML = "lock_open"; - if(!Helper.mobilecheck()){ - Helper.tooltip('#admin-lock', { - delay: 5, - position: "left", - html: "Logout" - }); - } - document.getElementById("password").value = ""; - 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"); - if(document.getElementsByClassName("password_protected")[0].checked) { - Helper.removeClass(".change_user_pass", "hide"); - } - - if(Helper.html("#admin-lock") != "lock_open"){ - Helper.addClass("#admin-lock", "clickable"); - document.getElementById("admin-lock").innerHTML = "lock_open"; - if(!Helper.mobilecheck()){ - Helper.tooltip('#admin-lock', { - delay: 5, - position: "left", - html: "Logout" - }); - } - } - }, - - hideUserSuggested: function() { - Helper.addClass("#user_suggests", "hide") - Helper.addClass("#user-suggest-html", "hide"); - Helper.addClass(".suggested-badge", "hide"); - }, - - conf: function(msg) { - if(msg[0].adminpass == ""){ - ////Crypt.remove_pass(chan.toLowerCase()); - } - Admin.set_conf(msg[0]); - if(msg[0].adminpass !== "" && Admin.beginning){ - //emit("password", {password: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase())), channel: chan.toLowerCase()}); - Admin.beginning = false; - } - }, - - 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()}); - } 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()}); - } - }, - - log_out: function() { - before_toast(); - /*if(Crypt.get_pass(chan.toLowerCase())) {*/ - //Crypt.remove_pass(chan.toLowerCase()); - if(Admin.logged_in) { - socket.emit("logout"); - M.toast({html: "Logged out", displayLength: 4000}); - Admin.display_logged_out(); - } else { - M.toast({html: "Not logged in", displayLength: 4000}); - } - }, - - display_logged_out: function() { - Admin.logged_in = false; - w_p = true; - adminpass = ""; - names = ["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++) { - document.getElementsByName(names[i])[0].setAttribute("disabled", true); - } - - if(Helper.html("#admin-lock") != "lock") { - if(!Helper.mobilecheck()) { - Helper.tooltip('#admin-lock', "destroy"); - } - Helper.removeClass("#admin-lock", "clickable"); - document.getElementById("admin-lock").innerHTML = "lock"; - } - - Helper.addClass(".strict-skip-input", "hide"); - Helper.addClass(".user-password-li", "hide"); - Helper.addClass(".chat-toggle-li", "hide"); - Helper.addClass(".delete-all", "hide"); - - if(document.getElementsByClassName("password_protected")[0].checked) { - Helper.removeClass(".change_user_pass", "hide"); - } - - Helper.addClass(".change_user_pass", "hide"); - Admin.hideUserSuggested(); - - Helper.removeClass("#admin-lock", "clickable"); - 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); - }, - - set_conf: function(conf_array) { - conf = conf_array; - music = conf_array.allvideos; - longsongs = conf_array.longsongs; - names = ["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) { - show_disabled = false; - } - - for (var i = 0; i < names.length; i++) { - document.getElementsByName(names[i])[0].checked = (conf_array[names[i]] === true); - if(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; - 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"); - } else { - if(document.getElementsByClassName("password_protected")[0].checked) { - Helper.removeClass(".change_user_pass", "hide"); - } - } - if(Admin.logged_in) { - if(conf != undefined && conf.strictSkip) { - Helper.removeClass(".strict-skip-input", "hide"); - } - } - if(conf != undefined && !conf.strictSkip) { - Helper.addClass(".strict-skip-input", "hide"); - } - if(!document.getElementsByClassName("password_protected")[0].checked) { - Helper.addClass(".change_user_pass", "hide"); - //Crypt.remove_userpass(chan.toLowerCase()); - } - var updated = false; - - if(conf_array.thumbnail != undefined && conf_array.thumbnail != "") { - document.getElementById("thumbnail_image").innerHTML = "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_input").value = conf_array.description; - updated = true; - } - - if(conf_array.rules != undefined && conf_array.rules != "") { - var existingRules = document.querySelector(".rules-container"); - if(existingRules) existingRules.remove(); - var rules = conf_array.rules.split("\n"); - var elementToAdd = "

  • Rules

    "; - for(var i = 0; i < rules.length; i++) { - elementToAdd += "

    " + rules[i] + "

    "; - } - elementToAdd += "
    "; - document.querySelector(".channel_info_container").insertAdjacentHTML("afterend", elementToAdd); - document.getElementById("rules_input").value = conf_array.rules; - updated = true; - } - if(updated) M.updateTextFields(); - }, - - submitAdmin: function(form, userpass_changed) { - voting = form.vote.checked; - addsongs = form.addsongs.checked; - longsongs = form.longsongs.checked; - frontpage = form.frontpage.checked; - allvideos = form.allvideos.checked; - removeplay = form.removeplay.checked; - skipping = form.skip.checked; - shuffling = form.shuffle.checked; - toggleChat = form.toggleChat.checked; - strictSkip = form.strictSkip.checked; - - if(form.strictSkipNumber) { - strictSkipNumber = form.strictSkipNumber; - } else { - strictSkipNumber = conf.strictSkipNumber; - } - - var pass_send = userpass_changed && !form.userpass.checked ? "" : userpass; - configs = { - channel: chan.toLowerCase(), - voting: voting, - addsongs: addsongs, - longsongs: longsongs, - frontpage: frontpage, - allvideos: allvideos, - removeplay: removeplay, - adminpass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass), - skipping: skipping, - shuffling: shuffling, - toggleChat: toggleChat, - strictSkip: strictSkip, - userpass: Crypt.crypt_pass(pass_send), - userpass_changed: userpass_changed, - strictSkipNumber: strictSkipNumber - }; - - emit("conf", configs); - }, - - hide_settings: function() { - var sidenavElem = document.getElementsByClassName("sidenav")[0]; - M.Sidenav.getInstance(sidenavElem).close(); - }, - - shuffle: function() { - if(!offline) { - //var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - //if(u == undefined) u = ""; - emit('shuffle', {channel: chan.toLowerCase()}); - } else { - for(var x = 0; x < full_playlist.length; x++){ - var num = Math.floor(Math.random()*1000000); - full_playlist[x].added = num; - } - List.sortList(); - List.populate_list(full_playlist); - } - }, - - get_admin:function() { - return [w_p, hasadmin]; + for (var i = 0; i < names.length; i++) { + document.getElementsByName(names[i])[0].removeAttribute("disabled"); } + Helper.removeClass(".card-action", "hide"); + Helper.addClass("#admin-lock", "clickable"); + document.getElementById("admin-lock").innerHTML = "lock_open"; + if (!Helper.mobilecheck()) { + Helper.tooltip("#admin-lock", { + delay: 5, + position: "left", + html: "Logout" + }); + } + document.getElementById("password").value = ""; + 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"); + if (document.getElementsByClassName("password_protected")[0].checked) { + Helper.removeClass(".change_user_pass", "hide"); + } + + if (Helper.html("#admin-lock") != "lock_open") { + Helper.addClass("#admin-lock", "clickable"); + document.getElementById("admin-lock").innerHTML = "lock_open"; + if (!Helper.mobilecheck()) { + Helper.tooltip("#admin-lock", { + delay: 5, + position: "left", + html: "Logout" + }); + } + } + }, + + hideUserSuggested: function() { + Helper.addClass("#user_suggests", "hide"); + Helper.addClass("#user-suggest-html", "hide"); + Helper.addClass(".suggested-badge", "hide"); + }, + + conf: function(msg) { + if (msg[0].adminpass == "") { + ////Crypt.remove_pass(chan.toLowerCase()); + } + Admin.set_conf(msg[0]); + if (msg[0].adminpass !== "" && Admin.beginning) { + //emit("password", {password: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase())), channel: chan.toLowerCase()}); + Admin.beginning = false; + } + }, + + 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() + }); + } 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() + }); + } + }, + + log_out: function() { + before_toast(); + /*if(Crypt.get_pass(chan.toLowerCase())) {*/ + //Crypt.remove_pass(chan.toLowerCase()); + if (Admin.logged_in) { + socket.emit("logout"); + M.toast({ html: "Logged out", displayLength: 4000 }); + Admin.display_logged_out(); + } else { + M.toast({ html: "Not logged in", displayLength: 4000 }); + } + }, + + display_logged_out: function() { + Admin.logged_in = false; + w_p = true; + adminpass = ""; + names = [ + "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++) { + document.getElementsByName(names[i])[0].setAttribute("disabled", true); + } + + if (Helper.html("#admin-lock") != "lock") { + if (!Helper.mobilecheck()) { + Helper.tooltip("#admin-lock", "destroy"); + } + Helper.removeClass("#admin-lock", "clickable"); + document.getElementById("admin-lock").innerHTML = "lock"; + } + + Helper.addClass(".strict-skip-input", "hide"); + Helper.addClass(".user-password-li", "hide"); + Helper.addClass(".chat-toggle-li", "hide"); + Helper.addClass(".delete-all", "hide"); + + if (document.getElementsByClassName("password_protected")[0].checked) { + Helper.removeClass(".change_user_pass", "hide"); + } + + Helper.addClass(".change_user_pass", "hide"); + Admin.hideUserSuggested(); + + Helper.removeClass("#admin-lock", "clickable"); + 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 + ); + }, + + set_conf: function(conf_array) { + conf = conf_array; + music = conf_array.allvideos; + longsongs = conf_array.longsongs; + names = [ + "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) { + show_disabled = false; + } + + for (var i = 0; i < names.length; i++) { + document.getElementsByName(names[i])[0].checked = + conf_array[names[i]] === true; + if (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; + 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"); + } else { + if (document.getElementsByClassName("password_protected")[0].checked) { + Helper.removeClass(".change_user_pass", "hide"); + } + } + if (Admin.logged_in) { + if (conf != undefined && conf.strictSkip) { + Helper.removeClass(".strict-skip-input", "hide"); + } + } + if (conf != undefined && !conf.strictSkip) { + Helper.addClass(".strict-skip-input", "hide"); + } + if (!document.getElementsByClassName("password_protected")[0].checked) { + Helper.addClass(".change_user_pass", "hide"); + //Crypt.remove_userpass(chan.toLowerCase()); + } + var updated = false; + + if (conf_array.thumbnail != undefined && conf_array.thumbnail != "") { + document.getElementById("thumbnail_image").innerHTML = + "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_input").value = + conf_array.description; + updated = true; + } + + if (conf_array.rules != undefined && conf_array.rules != "") { + var existingRules = document.querySelector(".rules-container"); + if (existingRules) existingRules.remove(); + var rules = conf_array.rules.split("\n"); + var elementToAdd = + "

  • Rules

    "; + for (var i = 0; i < rules.length; i++) { + elementToAdd += "

    " + rules[i] + "

    "; + } + elementToAdd += "
    "; + document + .querySelector(".channel_info_container") + .insertAdjacentHTML("afterend", elementToAdd); + document.getElementById("rules_input").value = conf_array.rules; + updated = true; + } + if (updated) M.updateTextFields(); + }, + + submitAdmin: function(form, userpass_changed) { + voting = form.vote.checked; + addsongs = form.addsongs.checked; + longsongs = form.longsongs.checked; + frontpage = form.frontpage.checked; + allvideos = form.allvideos.checked; + removeplay = form.removeplay.checked; + skipping = form.skip.checked; + shuffling = form.shuffle.checked; + toggleChat = form.toggleChat.checked; + strictSkip = form.strictSkip.checked; + + if (form.strictSkipNumber) { + strictSkipNumber = form.strictSkipNumber; + } else { + strictSkipNumber = conf.strictSkipNumber; + } + + var pass_send = userpass_changed && !form.userpass.checked ? "" : userpass; + configs = { + channel: chan.toLowerCase(), + voting: voting, + addsongs: addsongs, + longsongs: longsongs, + frontpage: frontpage, + allvideos: allvideos, + removeplay: removeplay, + adminpass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass), + skipping: skipping, + shuffling: shuffling, + toggleChat: toggleChat, + strictSkip: strictSkip, + userpass: Crypt.crypt_pass(pass_send), + userpass_changed: userpass_changed, + strictSkipNumber: strictSkipNumber + }; + + emit("conf", configs); + }, + + hide_settings: function() { + var sidenavElem = document.getElementsByClassName("sidenav")[0]; + M.Sidenav.getInstance(sidenavElem).close(); + }, + + shuffle: function() { + if (!offline) { + //var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + //if(u == undefined) u = ""; + emit("shuffle", { channel: chan.toLowerCase() }); + } else { + for (var x = 0; x < full_playlist.length; x++) { + var num = Math.floor(Math.random() * 1000000); + full_playlist[x].added = num; + } + List.sortList(); + List.populate_list(full_playlist); + } + }, + + get_admin: function() { + return [w_p, hasadmin]; + } }; diff --git a/server/public/assets/js/callback.js b/server/public/assets/js/callback.js index 1533065d..9b870f89 100755 --- a/server/public/assets/js/callback.js +++ b/server/public/assets/js/callback.js @@ -1,27 +1,49 @@ window.addEventListener("load", function() { - var query = getQueryHash(window.location.hash); - var redirect = window.location.protocol + "//" + window.location.hostname + "/api/oauth"; - var client_id; - var response; - var scope; + var query = getQueryHash(window.location.hash); + var redirect = + window.location.protocol + "//" + window.location.hostname + "/api/oauth"; + var client_id; + var response; + var scope; - 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"; - 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; + 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"; + 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; + } else if (query.youtube) { + client_id = + "944988770273-butsmlr1aotlsskk8lmgvh0etqqekigf.apps.googleusercontent.com"; + response = "token"; + scope = "https://www.googleapis.com/auth/youtube"; + state = query.nonce; - } else if (query.youtube) { - 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; - } else if(query.soundcloud) { - /* + //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; + } else if (query.soundcloud) { + /* SC.initialize({ client_id: api_key.soundcloud, redirect_uri: 'https://zoff.me/api/oauth' @@ -38,53 +60,61 @@ window.addEventListener("load", function() { console.log(e); });*/ - var redirect_uri = encodeURIComponent("https://zoff.me/api/oauth"); - 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; - //console.log(url); - window.location.href = url; + var redirect_uri = encodeURIComponent("https://zoff.me/api/oauth"); + 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; + //console.log(url); + window.location.href = url; + } else { + var query_parameters; + if (window.location.search.length > 0) { + query_parameters = getQueryHash(window.location.search); } else { - var query_parameters; - if(window.location.search.length > 0) { - query_parameters = getQueryHash(window.location.search); - } else { - query_parameters = getQueryHash(window.location.hash); - } - try { - window.opener.callback(query_parameters); - } catch(e) { - window.setTimeout(window.opener.SC_player.connectCallback, 1); - } + query_parameters = getQueryHash(window.location.hash); } + try { + window.opener.callback(query_parameters); + } catch (e) { + window.setTimeout(window.opener.SC_player.connectCallback, 1); + } + } }); function getQueryHash(url) { - if(window.location.search.length > 0) { - if(url.substring(url.length - 1) == "#") { - url = url.substring(0, url.length - 1); - } - var temp_arr = url.substring(1).split("&"); - var done_obj = {}; - var splitted; - for(var i in temp_arr) { - splitted = temp_arr[i].split("="); - if(splitted.length == 2) { - done_obj[splitted[0]] = splitted[1]; - } - } - return done_obj; - } else { - var temp_arr = url.substring(1).split("&"); - var done_obj = {}; - var splitted; - for(var i in temp_arr) { - splitted = temp_arr[i].split("="); - if(splitted.length == 2) { - done_obj[splitted[0]] = splitted[1]; - } - } - return done_obj; + if (window.location.search.length > 0) { + if (url.substring(url.length - 1) == "#") { + url = url.substring(0, url.length - 1); } + var temp_arr = url.substring(1).split("&"); + var done_obj = {}; + var splitted; + for (var i in temp_arr) { + splitted = temp_arr[i].split("="); + if (splitted.length == 2) { + done_obj[splitted[0]] = splitted[1]; + } + } + return done_obj; + } else { + var temp_arr = url.substring(1).split("&"); + var done_obj = {}; + var splitted; + for (var i in temp_arr) { + splitted = temp_arr[i].split("="); + if (splitted.length == 2) { + done_obj[splitted[0]] = splitted[1]; + } + } + return done_obj; + } } diff --git a/server/public/assets/js/chat.js b/server/public/assets/js/chat.js index 90b189e1..a0d8caf6 100755 --- a/server/public/assets/js/chat.js +++ b/server/public/assets/js/chat.js @@ -1,207 +1,311 @@ var Chat = { + channel_received: 0, + all_received: 0, + chat_admin_help: [ + "/ban USERNAME REASON to ban user", + "/unban USERNAME to unban a user" + ], + chat_help: [ + "/login to register and save a password for a nickname, or to log in with a password on a name.", + "/login to change the password on a nickname", + "/logout to logout", + "/who to see the names of the people in the channel", + "Want your own icon besides your name? If you donate 5$ or more, we'll add a picture of your choosing (following our guidelines) besides your name!" + ], - channel_received: 0, - all_received: 0, - chat_admin_help: [ - "/ban USERNAME REASON to ban user", - "/unban USERNAME to unban a user" - ], - chat_help: [ - "/login to register and save a password for a nickname, or to log in with a password on a name.", - "/login to change the password on a nickname", - "/logout to logout", - "/who to see the names of the people in the channel", - "Want your own icon besides your name? If you donate 5$ or more, we'll add a picture of your choosing (following our guidelines) besides your name!" - ], + namechange: function(data, first, initial) { + var input = data.split(" "); + if (input.length == 2) { + var name = input[0]; + var password = input[1]; - namechange: function(data, first, initial) { - var input = data.split(" "); - if(input.length == 2) { - var name = input[0]; - var password = input[1]; + password = Crypt.crypt_chat_pass(password); + 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]; + var old_password = input[2]; - password = Crypt.crypt_chat_pass(password); - 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]; - var old_password = input[2]; + new_password = Crypt.crypt_chat_pass(new_password); + old_password = Crypt.crypt_chat_pass(old_password); - 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}); - } else if(first) { - var to_send = {initial: initial, first: true}; - if(chan != undefined && chan != "") { - to_send.channel = chan.toLowerCase(); - } - socket.emit("namechange", to_send); - } - }, - - removename: function() { - socket.emit("removename", {channel: chan.toLowerCase()}); - Crypt.remove_name(); - }, - - chat: function(data) { - if(data.value.length > 150) return; - if(data.value.startsWith("/name ") || data.value.startsWith("/removename")) { - data.value = "/help"; - Chat.chat(data); - return; - } else if(data.value.startsWith("/login ")){ - 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("#chatall").children.length > 100) { - document.querySelector("#chatall").children[0].remove() - } - add = "chatall"; - } else { - if(document.querySelector("#chatchannel").children.length > 100) { - document.querySelector("#chatchannel").children[0].remove() - } - add = "chatchannel"; - } - var help = Chat.chat_help; - if(Admin.logged_in) help = help.concat(Chat.chat_admin_help); - for(var x = 0; x < help.length; x++) { - var color = Helper.intToARGB(Helper.hashCode("System")); - if(color.length < 6) { - for(x = color.length; x < 6; x++) { - color = "0" + color; - } - } - var _time = new Date(); - 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", "
  • " + time + " SystemSystem:
    • "); - var in_text = document.createTextNode(help[x]); - document.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") { - socket.emit("all,chat", {channel: chan.toLowerCase(), data: data.value}); - } else { - socket.emit("chat", {channel: chan.toLowerCase(), data: data.value}); - } - data.value = ""; - return; - }, - - createChatElement: function(allchat, channel, time, icon, color, from, message) { - var liElement = document.createElement("li"); - liElement.innerHTML += "" + time + " " + icon; - var nameElement = document.createElement("span"); - nameElement.innerText = from; - nameElement.style.color = color; - liElement.appendChild(nameElement); - if(allchat) { - liElement.title = channel; - liElement.innerHTML += " " + channel + ""; - } - var in_text = document.createTextNode(message); - liElement.appendChild(in_text); - return liElement; - }, - - 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"); - unseen = true; - chat_unseen = true; - Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "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"); - } - - if(document.querySelector("#chatall").children.length > 100) { - document.querySelector("#chatall").children[0].remove() - } - var color = Helper.intToARGB(Helper.hashCode(inp.from)); - 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 = "" + inp.from + ""; - } - - color = Helper.hexToRgb(color.substring(0,6)); - var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false); - var _time = new Date(); - if(time_sent) { - _time = new Date(time_sent); - } - var time = 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; - programscroll = false; - } - }, - - channelchat: function(data, time_sent, disable_blink) { - if(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"); - 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() - } - - var icon_add = ""; - if(data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") { - icon_add = "" + data.from + ""; - } - - var color = Helper.intToARGB(Helper.hashCode(data.from)); - if(color.length < 6) { - for(x = color.length; x < 6; x++) { - color = "0" + color; - } - } - color = Helper.hexToRgb(color.substring(0,6)); - var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false); - var _time = new Date(); - if(time_sent) { - _time = new Date(time_sent); - } - var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes()); - //document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "
  • " + time + " " + icon_add + ""+data.from+"
    • "); - //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); - //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element); - document.querySelector("#chatchannel").appendChild(element); - - if(!userscroll) { - programscroll = true; - document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight; - programscroll = false; - } + 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 != "") { + to_send.channel = chan.toLowerCase(); + } + socket.emit("namechange", to_send); } + }, + + removename: function() { + socket.emit("removename", { channel: chan.toLowerCase() }); + Crypt.remove_name(); + }, + + chat: function(data) { + if (data.value.length > 150) return; + if ( + data.value.startsWith("/name ") || + data.value.startsWith("/removename") + ) { + data.value = "/help"; + Chat.chat(data); + return; + } else if (data.value.startsWith("/login ")) { + 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("#chatall").children.length > 100) { + document.querySelector("#chatall").children[0].remove(); + } + add = "chatall"; + } else { + if (document.querySelector("#chatchannel").children.length > 100) { + document.querySelector("#chatchannel").children[0].remove(); + } + add = "chatchannel"; + } + var help = Chat.chat_help; + if (Admin.logged_in) help = help.concat(Chat.chat_admin_help); + for (var x = 0; x < help.length; x++) { + var color = Helper.intToARGB(Helper.hashCode("System")); + if (color.length < 6) { + for (x = color.length; x < 6; x++) { + color = "0" + color; + } + } + var _time = new Date(); + 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", + "
  • " + + time + + " SystemSystem:
    • " + ); + var in_text = document.createTextNode(help[x]); + document + .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" + ) { + socket.emit("all,chat", { + channel: chan.toLowerCase(), + data: data.value + }); + } else { + socket.emit("chat", { channel: chan.toLowerCase(), data: data.value }); + } + data.value = ""; + return; + }, + + createChatElement: function( + allchat, + channel, + time, + icon, + color, + from, + message + ) { + var liElement = document.createElement("li"); + liElement.innerHTML += + "" + time + " " + icon; + var nameElement = document.createElement("span"); + nameElement.innerText = from; + nameElement.style.color = color; + liElement.appendChild(nameElement); + if (allchat) { + liElement.title = channel; + liElement.innerHTML += + " " + channel + ""; + } + var in_text = document.createTextNode(message); + liElement.appendChild(in_text); + return liElement; + }, + + 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"); + unseen = true; + chat_unseen = true; + Helper.removeClass( + document.querySelector(".chat-link span.badge.new.white"), + "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"); + } + + if (document.querySelector("#chatall").children.length > 100) { + document.querySelector("#chatall").children[0].remove(); + } + var color = Helper.intToARGB(Helper.hashCode(inp.from)); + 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 = + "" + inp.from + ""; + } + + color = Helper.hexToRgb(color.substring(0, 6)); + var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false); + var _time = new Date(); + if (time_sent) { + _time = new Date(time_sent); + } + var time = + 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; + programscroll = false; + } + }, + + channelchat: function(data, time_sent, disable_blink) { + if ( + 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" + ); + 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(); + } + + var icon_add = ""; + if (data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") { + icon_add = + "" + + data.from + + ""; + } + + var color = Helper.intToARGB(Helper.hashCode(data.from)); + if (color.length < 6) { + for (x = color.length; x < 6; x++) { + color = "0" + color; + } + } + color = Helper.hexToRgb(color.substring(0, 6)); + var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false); + var _time = new Date(); + if (time_sent) { + _time = new Date(time_sent); + } + var time = + Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes()); + //document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "
  • " + time + " " + icon_add + ""+data.from+"
    • "); + //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 + ); + //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element); + document.querySelector("#chatchannel").appendChild(element); + + if (!userscroll) { + programscroll = true; + document.getElementById( + "chatchannel" + ).scrollTop = document.getElementById("chatchannel").scrollHeight; + programscroll = false; + } + } }; diff --git a/server/public/assets/js/crypt.js b/server/public/assets/js/crypt.js index 055e9a12..4562875d 100755 --- a/server/public/assets/js/crypt.js +++ b/server/public/assets/js/crypt.js @@ -1,89 +1,108 @@ var Crypt = { + conf_pass: undefined, + user_pass: undefined, + tmp_pass_user: "", + tmp_pass: "", - 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(); + } else { + document.cookie = + chan.toLowerCase() + + "=;path=/" + + chan.toLowerCase() + + ";secure;expires=" + + new Date(0).toUTCString(); + } + } - init: function() { + try { + conf_arr = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt"); + } catch (err) { + conf_arr = Crypt.decrypt(Crypt.create_cookie("_opt"), "_opt"); + } - if(window.location.pathname != "/") { - if (location.protocol != "https:") { - 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(); - } + if (window.location.pathname != "/") { + change_intelligent(Crypt.get_intelligent_list_enabled()); + if (!conf_arr.hasOwnProperty("color")) { + Crypt.set_background_color("dynamic", true); + } else { + 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; } + } + Hostcontroller.change_enabled(conf_arr.remote); + if (conf_arr.width != 100) Player.set_width(conf_arr.width); + } + }, - try { - conf_arr = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt"); - } catch(err) { - conf_arr = Crypt.decrypt(Crypt.create_cookie("_opt"), "_opt"); - } + set_background_color: function(value, first) { + conf_arr.color = value; + if (value != "dynamic" && !first) { + 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); + Helper.css("#controls", "background", value); + } else if (!first) { + var url = "https://img.youtube.com/vi/" + Player.np.id + "/mqdefault.jpg"; + if (videoSource == "soundcloud") url = Player.np.thumbnail; + getColor(url); + } + Crypt.encrypt(conf_arr, "_opt"); + }, - if(window.location.pathname != "/") { - change_intelligent(Crypt.get_intelligent_list_enabled()); - if(!conf_arr.hasOwnProperty("color")) { - Crypt.set_background_color("dynamic", true); - } else { - 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; - } - } - Hostcontroller.change_enabled(conf_arr.remote); - if(conf_arr.width != 100) Player.set_width(conf_arr.width); - } - }, + get_background_color: function(value) { + if (!conf_arr.hasOwnProperty("color")) { + Crypt.set_background_color("dynamic"); + } + return conf_arr.color; + }, - set_background_color: function(value, first) { - conf_arr.color = value; - if(value != "dynamic" && !first) { - 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); - Helper.css("#controls", "background", value); - } else if(!first){ - var url = 'https://img.youtube.com/vi/'+Player.np.id+'/mqdefault.jpg'; - if(videoSource == "soundcloud") url = Player.np.thumbnail; - getColor(url); - } - Crypt.encrypt(conf_arr, "_opt"); - }, + get_intelligent_list_enabled: function() { + if (conf_arr.hasOwnProperty("intelligent")) { + return conf_arr.intelligent; + } else { + conf_arr.intelligent = false; + Crypt.encrypt(conf_arr, "_opt"); + return false; + } + }, - get_background_color: function(value) { - if(!conf_arr.hasOwnProperty("color")) { - Crypt.set_background_color("dynamic"); - } - return conf_arr.color; - }, + set_intelligent_list_enabled: function(enabled) { + conf_arr.intelligent = enabled; + if (Helper.mobilecheck()) { + intelligentList = enabled; + } + Crypt.encrypt(conf_arr, "_opt"); + }, - get_intelligent_list_enabled: function() { - if(conf_arr.hasOwnProperty("intelligent")) { - return conf_arr.intelligent; - } else { - conf_arr.intelligent = false; - Crypt.encrypt(conf_arr, "_opt"); - return false; - } - }, - - set_intelligent_list_enabled: function(enabled) { - conf_arr.intelligent = enabled; - if(Helper.mobilecheck()) { - intelligentList = enabled; - } - Crypt.encrypt(conf_arr, "_opt"); - }, - - decrypt: function(cookie, name) { - 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}; - /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701"); + decrypt: function(cookie, name) { + 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 + }; + /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701"); key = key.substring(0,32); key = btoa(key); var decrypted = CryptoJS.AES.decrypt( @@ -94,13 +113,13 @@ var Crypt = { } );*/ - //return $.parseJSON(decrypted.toString(CryptoJS.enc.Utf8)); - return JSON.parse(atob(cookie)); - }, + //return $.parseJSON(decrypted.toString(CryptoJS.enc.Utf8)); + return JSON.parse(atob(cookie)); + }, - decrypt_pass: function(pass) { - if(socket) { - /*var key = btoa(socket.id) + btoa(socket.id); + decrypt_pass: function(pass) { + if (socket) { + /*var key = btoa(socket.id) + btoa(socket.id); key = key.substring(0,32); key = btoa(key); var decrypted = CryptoJS.AES.decrypt( @@ -111,13 +130,14 @@ var Crypt = { } ); return decrypted.toString(CryptoJS.enc.Utf8);*/ - return atob(pass); - } return false; - }, + return atob(pass); + } + return false; + }, - encrypt: function(json_formated, cookie) { - var to_encrypt = JSON.stringify(json_formated); - /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701"); + encrypt: function(json_formated, cookie) { + var to_encrypt = JSON.stringify(json_formated); + /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701"); key = key.substring(0,32); key = btoa(key); var encrypted = CryptoJS.AES.encrypt( @@ -128,42 +148,61 @@ var Crypt = { padding: CryptoJS.pad.Pkcs7 } );*/ - var encrypted = btoa(to_encrypt); - var CookieDate = new Date(); - CookieDate.setFullYear(CookieDate.getFullYear( ) +1); - if (location.protocol != "https:"){ - document.cookie = cookie+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"; - } else { - document.cookie = cookie+"="+encrypted.toString()+";secure;expires="+CookieDate.toGMTString()+";path=/;"; - } - }, + var encrypted = btoa(to_encrypt); + var CookieDate = new Date(); + CookieDate.setFullYear(CookieDate.getFullYear() + 1); + if (location.protocol != "https:") { + document.cookie = + cookie + + "=" + + encrypted.toString() + + ";expires=" + + CookieDate.toGMTString() + + ";path=/;"; + } else { + document.cookie = + cookie + + "=" + + encrypted.toString() + + ";secure;expires=" + + CookieDate.toGMTString() + + ";path=/;"; + } + }, - get_volume: function() { - return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").volume; - //return conf_arr.volume; - }, + get_volume: function() { + return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").volume; + //return conf_arr.volume; + }, - get_offline: function() { - var temp_offline = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline; - if(temp_offline != undefined){ - return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline; - } else { - Crypt.set_offline(false); - return false; - } - }, + get_offline: function() { + var temp_offline = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline; + if (temp_offline != undefined) { + return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline; + } else { + Crypt.set_offline(false); + return false; + } + }, - set_volume: function(val) { - conf_arr.volume = val; - Crypt.encrypt(conf_arr, "_opt"); - }, + set_volume: function(val) { + conf_arr.volume = val; + Crypt.encrypt(conf_arr, "_opt"); + }, - create_cookie: function(name) { - if(name == "_opt") cookie_object = {volume: 100, width: 100, remote: true, name: "", offline: false}; - else cookie_object = {passwords: {}}; + create_cookie: function(name) { + 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); - /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701"); + var string_it = JSON.stringify(cookie_object); + /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701"); key = key.substring(0,32); key = btoa(key); var encrypted = CryptoJS.AES.encrypt( @@ -174,22 +213,34 @@ var Crypt = { padding: CryptoJS.pad.Pkcs7 } );*/ - var encrypted = btoa(string_it); + var encrypted = btoa(string_it); - var CookieDate = new Date(); - CookieDate.setFullYear(CookieDate.getFullYear( ) +1); + var CookieDate = new Date(); + CookieDate.setFullYear(CookieDate.getFullYear() + 1); - if (location.protocol != "https:"){ - 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()+";expires="+CookieDate.toGMTString()+";path=/;" - //document.cookie = na"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;" - return Crypt.getCookie(name); - }, + if (location.protocol != "https:") { + 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()+";expires="+CookieDate.toGMTString()+";path=/;" + //document.cookie = na"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;" + return Crypt.getCookie(name); + }, - /*set_pass: function(chan, pass) { + /*set_pass: function(chan, pass) { Crypt.conf_pass.passwords[chan] = pass; Crypt.encrypt(Crypt.conf_pass, chan); }, @@ -209,44 +260,45 @@ var Crypt = { Crypt.encrypt(Crypt.conf_pass, chan.toLowerCase()); },*/ - set_name:function(name, pass) { - conf_arr.name = encodeURIComponent(name).replace(/\W/g, ''); - conf_arr.chat_pass = pass; - Crypt.encrypt(conf_arr, "_opt"); - }, + set_name: function(name, pass) { + conf_arr.name = encodeURIComponent(name).replace(/\W/g, ""); + conf_arr.chat_pass = pass; + Crypt.encrypt(conf_arr, "_opt"); + }, - set_offline: function(enabled) { - conf_arr.offline = enabled; - Crypt.encrypt(conf_arr, "_opt"); - }, + set_offline: function(enabled) { + conf_arr.offline = enabled; + Crypt.encrypt(conf_arr, "_opt"); + }, - remove_name:function() { - conf_arr.name = ""; - conf_arr.chat_pass = ""; - Crypt.encrypt(conf_arr, "_opt"); - }, + remove_name: function() { + conf_arr.name = ""; + conf_arr.chat_pass = ""; + Crypt.encrypt(conf_arr, "_opt"); + }, - get_pass: function(chan) { - if(Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords[chan]; - return undefined; - }, + get_pass: function(chan) { + if (Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords[chan]; + return undefined; + }, - get_userpass: function(chan) { - if(Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords["userpass"]; - return ""; - }, + get_userpass: function(chan) { + if (Crypt.conf_pass !== undefined) + return Crypt.conf_pass.passwords["userpass"]; + return ""; + }, - set_remote: function(val) { - conf_arr.remote = val; - Crypt.encrypt(conf_arr, "_opt"); - }, + set_remote: function(val) { + conf_arr.remote = val; + Crypt.encrypt(conf_arr, "_opt"); + }, - get_remote: function(val) { - return conf_arr.remote; - }, + get_remote: function(val) { + return conf_arr.remote; + }, - crypt_chat_pass: function(pass) { - /*var key = btoa(socket.id) + btoa(socket.id); + crypt_chat_pass: function(pass) { + /*var key = btoa(socket.id) + btoa(socket.id); key = key.substring(0,32); key = btoa(key); var iv = btoa(Crypt.makeiv()); @@ -259,43 +311,48 @@ var Crypt = { iv: CryptoJS.enc.Base64.parse(iv), } );*/ - //window.encrypted = encrypted; - return btoa(pass); - //return encrypted.toString() + "$" + iv; - }, + //window.encrypted = encrypted; + return btoa(pass); + //return encrypted.toString() + "$" + iv; + }, - crypt_pass: function(pass, userpass) { - if(userpass) { - Crypt.tmp_pass_user = pass; - } else { - Crypt.tmp_pass = pass; - } - //return Crypt.crypt_chat_pass(pass); - return btoa(pass); - }, - - makeiv: function() { - var text = ""; - var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - - for( var i=0; i < 16; i++ ) - text += possible.charAt(Math.floor(Math.random() * possible.length)); - - return text; - }, - - get_width: function() { - return conf_arr.width; - }, - - set_width: function(val) { - conf_arr.width = val; - Crypt.encrypt(conf_arr, "_opt"); - }, - - getCookie: function(name) { - var value = "; " + document.cookie; - var parts = value.split("; " + name + "="); - if (parts.length == 2) return parts.pop().split(";").shift(); + crypt_pass: function(pass, userpass) { + if (userpass) { + Crypt.tmp_pass_user = pass; + } else { + Crypt.tmp_pass = pass; } + //return Crypt.crypt_chat_pass(pass); + return btoa(pass); + }, + + makeiv: function() { + var text = ""; + var possible = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + + for (var i = 0; i < 16; i++) + text += possible.charAt(Math.floor(Math.random() * possible.length)); + + return text; + }, + + get_width: function() { + return conf_arr.width; + }, + + set_width: function(val) { + conf_arr.width = val; + Crypt.encrypt(conf_arr, "_opt"); + }, + + getCookie: function(name) { + var value = "; " + document.cookie; + var parts = value.split("; " + name + "="); + if (parts.length == 2) + return parts + .pop() + .split(";") + .shift(); + } }; diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index 0ee8b627..29a4d3da 100755 --- a/server/public/assets/js/embed.js +++ b/server/public/assets/js/embed.js @@ -7,16 +7,19 @@ var intelligentList = false; var client = false; var _VERSION; try { - _VERSION = localStorage.getItem("VERSION"); - if(_VERSION == null || _VERSION == undefined) throw "Some error"; -} catch(e) { - _VERSION = 6; + _VERSION = localStorage.getItem("VERSION"); + if (_VERSION == null || _VERSION == undefined) throw "Some error"; +} catch (e) { + _VERSION = 6; } var SC_widget; var scUsingWidget = false; var zoff_api_token = "DwpnKVkaMH2HdcpJT2YPy783SY33byF5/32rbs0+xdU="; -if(window.location.hostname == "localhost" || window.location.hostname == "client.localhost") { - var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ="; +if ( + window.location.hostname == "localhost" || + window.location.hostname == "client.localhost" +) { + var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ="; } var SC_player; var durationTimeout; @@ -43,11 +46,11 @@ var beginning = false; var soundcloud_loading = false; var videoSource = ""; var list_html = document.getElementById("list-song-html").innerHTML; -var w_p = true; -var lazy_load = false; +var w_p = true; +var lazy_load = false; var end_programmatically = false; var embed = true; -var vol = 100; +var vol = 100; var adminpass = ""; var mobile_beginning = false; var durationBegun = false; @@ -70,398 +73,462 @@ var user_auth_started = false; var user_auth_avoid = false; var connection_options = { - 'sync disconnect on unload':true, - 'secure': true, - 'force new connection': true + "sync disconnect on unload": true, + secure: true, + "force new connection": true }; var Crypt = { - crypt_pass: function(pass) { - return pass; - }, - get_background_color: function() { - return "dynamic"; - } + crypt_pass: function(pass) { + return pass; + }, + get_background_color: function() { + return "dynamic"; + } }; function receiveMessage(event) { - if(event.data == "parent") { - window.parentWindow = event.source; - window.parentOrigin = event.origin; - } - if(event.data == "lower") { - window.setVolume(10); - }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({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}); - } - } catch(e) { - - } - } + if (event.data == "parent") { + window.parentWindow = event.source; + window.parentOrigin = event.origin; + } + if (event.data == "lower") { + window.setVolume(10); + } 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( + { 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 + }); + } + } 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(){} -} + set_title_width: function() {}, + window_width_volume_slider: function() {} +}; function getSearch(elem) { - var result = {}; - var search = window.location.search.split("&"); - for(var i = 0; i < search.length; i++) { - var currElement = search[i].split("="); - var key = currElement[0].replace("?", ""); - var value = currElement[1]; - if(value == "true") value = true; - else if(value == "false") value = false; - result[key] = value; - } - return result; + var result = {}; + var search = window.location.search.split("&"); + for (var i = 0; i < search.length; i++) { + var currElement = search[i].split("="); + var key = currElement[0].replace("?", ""); + var value = currElement[1]; + if (value == "true") value = true; + else if (value == "false") value = false; + result[key] = value; + } + return result; } window.addEventListener("load", function() { - if(autoplay){ - Helper.css("#player", "visibility", "hidden"); - } - if(videoonly) { - Helper.addClass("#wrapper", "hide"); - Helper.addClass("#controls", "hide"); - Helper.addClass("#player", "video_only"); - Helper.addClass("#player_overlay", "video_only"); - Helper.css("#zoffbutton", "bottom", "0px"); - Helper.css("#song-title", "width", "100vw"); + if (autoplay) { + Helper.css("#player", "visibility", "hidden"); + } + if (videoonly) { + Helper.addClass("#wrapper", "hide"); + Helper.addClass("#controls", "hide"); + Helper.addClass("#player", "video_only"); + Helper.addClass("#player_overlay", "video_only"); + Helper.css("#zoffbutton", "bottom", "0px"); + Helper.css("#song-title", "width", "100vw"); + } + + M.Modal.init(document.getElementById("locked_channel"), { + dismissible: false + }); + + add = "https://zoff.me"; + //if(window.location.hostname == "localhost") add = "localhost"; + //add = "localhost"; + socket = io.connect( + "" + add, + connection_options + ); + + if (localmode) { + change_offline(true, false); + } + + 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-title").innerText = "/" + chan.toLowerCase(); + + socket.on("get_list", function() { + socket_connected = true; + setTimeout(function() { + socket.emit("list", { + version: VERSION, + channel: chan.toLowerCase(), + pass: "" + }); + }, 1000); + }); + + socket.on("self_ping", function() { + if (chan != undefined && chan.toLowerCase() != "") { + socket.emit("self_ping", { channel: chan.toLowerCase() }); } + }); - M.Modal.init(document.getElementById("locked_channel"), { - dismissible: false - }); + socket.on("viewers", function(view) { + viewers = view; - add = "https://zoff.me"; - //if(window.location.hostname == "localhost") add = "localhost"; - //add = "localhost"; - socket = io.connect(''+add, connection_options); + if (song_title !== undefined) Player.getTitle(song_title, viewers); + }); - if(localmode) { - change_offline(true, false); - } + Player.loadPlayer(); + setup_host_initialization(); + setup_now_playing_listener(); + setup_list_listener(); - socket.on('auth_required', function() { - M.Modal.getInstance(document.getElementById("locked_channel")).open(); - }); + if (autoplay) { + startWaitTimerPlay(); + } - document.querySelector(".channel-info-container").href = "https://zoff.me/" + chan.toLowerCase(); - document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase(); + List.calculate_song_heights(); - socket.on("get_list", function() { - socket_connected = true; - setTimeout(function(){socket.emit('list', {version: VERSION, channel: chan.toLowerCase(), pass: ''});},1000); - }); + window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady; + socket.on("toast", toast); - socket.on("self_ping", function() { - if(chan != undefined && chan.toLowerCase() != "") { - socket.emit("self_ping", {channel: chan.toLowerCase()}); - } - }); + Playercontrols.initSlider(); + document + .getElementById("playpause") + .addEventListener("click", Playercontrols.play_pause); + window.setVolume = setVolume; + //Helper.css("#controls", "background-color", color); - socket.on("viewers", function(view) { - viewers = view; - - if(song_title !== undefined) - Player.getTitle(song_title, viewers); - }); - - Player.loadPlayer(); - setup_host_initialization(); - setup_now_playing_listener(); - setup_list_listener(); - - if(autoplay) { - startWaitTimerPlay(); - } - - List.calculate_song_heights(); - - window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady; - socket.on("toast", toast); - - Playercontrols.initSlider(); - document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause); - window.setVolume = setVolume; - //Helper.css("#controls", "background-color", color); - - document.querySelector("body").style.backgroundColor = color; - if(embedOptions.hasOwnProperty("control") && embedOptions.control) { - Hostcontroller.change_enabled(true); - } else { - Hostcontroller.change_enabled(false); - } + document.querySelector("body").style.backgroundColor = color; + if (embedOptions.hasOwnProperty("control") && embedOptions.control) { + Hostcontroller.change_enabled(true); + } else { + Hostcontroller.change_enabled(false); + } }); -window.addEventListener("resize", function(){ - resizeFunction(); +window.addEventListener("resize", function() { + resizeFunction(); }); -function resizePlaylistPlaying(){}; +function resizePlaylistPlaying() {} function startWaitTimerPlay() { - setTimeout(function() { - if(videoSource == "youtube") { - Player.player.playVideo(); - } else if(videoSource == "soundcloud"){ - Player.soundcloud_player.play(); - } - }, 5000); + setTimeout(function() { + if (videoSource == "youtube") { + Player.player.playVideo(); + } else if (videoSource == "soundcloud") { + Player.soundcloud_player.play(); + } + }, 5000); } function setup_host_listener(id) { - socket.on(id, Hostcontroller.host_on_action); + socket.on(id, Hostcontroller.host_on_action); } function setup_host_initialization() { - socket.on("id", Hostcontroller.host_listener); + socket.on("id", Hostcontroller.host_listener); } function setup_now_playing_listener() { - socket.on("np", Player.now_playing_listener); + socket.on("np", Player.now_playing_listener); } function setup_list_listener() { - socket.on("channel", function(msg) { - Helper.addClass(".site_loader", "hide"); - List.channel_function(msg); - }); + socket.on("channel", function(msg) { + Helper.addClass(".site_loader", "hide"); + List.channel_function(msg); + }); } function setVolume(val) { - Playercontrols.visualVolume(val); - Playercontrols.setVolume(val); + Playercontrols.visualVolume(val); + Playercontrols.setVolume(val); } -function updateChromecastMetadata(){} -function loadChromecastVideo(){} +function updateChromecastMetadata() {} +function loadChromecastVideo() {} function toast(msg) { - switch(msg) { - case "suggested_thumbnail": - if(embed) return; - msg = "The thumbnail has been suggested!"; - break; - case "faulty_start_end": - if(embed) return; - break; - case "wait_longer": - if(embed) return; - break; - case "suggested_description": - if(embed) return; - break; - case "thumbnail_denied": - if(embed) return; - break; - case "description_denied": - if(embed) return; - break; - case "addedsong": - if(embed) return; - break; - case "addedplaylist": - if(embed) return; - break; - case "savedsettings": - if(embed) return; - break; - case "wrongpass": - if(embed) return; - break; - case "deleted_songs": - if(embed) return; - break; - case "shuffled": - if(embed) return; - break; - case "deletesong": - 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!"]); - 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."]); - break; - case "skip": - if(embed) return; - break; - case "listhaspass": - if(embed) return; - break; - case "noskip": - if(embed) return; - break; - case "alreadyskip": - if(embed) return; - break; - case "notyetskip": - if(embed) return; - break; - case "correctpass": - if(embed) return; - break; - case "changedpass": - if(embed) return; - break; - case "suggested": - if(embed) return; - break; - case "alreadyplay": - if(embed) return; - break; - } - before_toast(); - M.toast({html: msg, displayLength: 4000}); + switch (msg) { + case "suggested_thumbnail": + if (embed) return; + msg = "The thumbnail has been suggested!"; + break; + case "faulty_start_end": + if (embed) return; + break; + case "wait_longer": + if (embed) return; + break; + case "suggested_description": + if (embed) return; + break; + case "thumbnail_denied": + if (embed) return; + break; + case "description_denied": + if (embed) return; + break; + case "addedsong": + if (embed) return; + break; + case "addedplaylist": + if (embed) return; + break; + case "savedsettings": + if (embed) return; + break; + case "wrongpass": + if (embed) return; + break; + case "deleted_songs": + if (embed) return; + break; + case "shuffled": + if (embed) return; + break; + case "deletesong": + 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!" + ]); + 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." + ]); + break; + case "skip": + if (embed) return; + break; + case "listhaspass": + if (embed) return; + break; + case "noskip": + if (embed) return; + break; + case "alreadyskip": + if (embed) return; + break; + case "notyetskip": + if (embed) return; + break; + case "correctpass": + if (embed) return; + break; + case "changedpass": + if (embed) return; + break; + case "suggested": + if (embed) return; + break; + case "alreadyplay": + if (embed) return; + break; + } + before_toast(); + M.toast({ html: msg, displayLength: 4000 }); } function emit() { - if(!embed) { - lastCommand = []; - for(var i = 0; i < arguments.length; i++) { - lastCommand.push(arguments[i]); - } - } - if(arguments.length == 1) { - socket.emit(arguments[0]); - } else { - socket.emit(arguments[0], arguments[1]); + if (!embed) { + lastCommand = []; + for (var i = 0; i < arguments.length; i++) { + lastCommand.push(arguments[i]); } + } + if (arguments.length == 1) { + socket.emit(arguments[0]); + } else { + socket.emit(arguments[0], arguments[1]); + } } -function change_offline(enabled, already_offline){ - offline = enabled; - 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"))) { - Helper.tooltip("#offline-mode", 'destroy'); - } +function change_offline(enabled, already_offline) { + offline = enabled; + 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")) + ) { + Helper.tooltip("#offline-mode", "destroy"); } + } - var mouseEnter = function(e){ - Helper.removeClass("#seekToDuration", "hide"); - }; + var mouseEnter = function(e) { + Helper.removeClass("#seekToDuration", "hide"); + }; - var mouseLeave = function(e){ - dragging = false; - Helper.addClass("#seekToDuration", "hide"); - }; + var mouseLeave = function(e) { + dragging = false; + Helper.addClass("#seekToDuration", "hide"); + }; - var mouseDown = function(e) { - var acceptable = ["bar", "controls", "duration"]; - if(acceptable.indexOf(e.target.id) >= 0) { - dragging = true; - } - }; - - var mouseUp = function(e) { - dragging = false; - }; - if(enabled){ - Helper.addClass("#viewers", "hide"); - Helper.removeClass(".margin-playbar", "margin-playbar"); - Helper.addClass(".prev playbar", "margin-playbar"); - Helper.removeClass(".prev playbar", "hide"); - - if(window.location.pathname != "/"){ - document.getElementById("controls").addEventListener("mouseenter", mouseEnter, false); - document.getElementById("controls").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", "
    00:00/01:00
    "); - var controlElement = document.querySelector("#controls"); - Helper.css("#seekToDuration", "bottom", "50px"); - Helper.addClass("#controls", "ewresize"); - } - if(full_playlist != undefined && !already_offline && full_playlist.length > 0){ - for(var x = 0; x < full_playlist.length; x++){ - full_playlist[x].votes = 0; - } - - List.sortList(); - List.populate_list(full_playlist); - } + var mouseDown = function(e) { + var acceptable = ["bar", "controls", "duration"]; + if (acceptable.indexOf(e.target.id) >= 0) { + dragging = true; } + }; + + var mouseUp = function(e) { + dragging = false; + }; + if (enabled) { + Helper.addClass("#viewers", "hide"); + Helper.removeClass(".margin-playbar", "margin-playbar"); + Helper.addClass(".prev playbar", "margin-playbar"); + Helper.removeClass(".prev playbar", "hide"); + + if (window.location.pathname != "/") { + document + .getElementById("controls") + .addEventListener("mouseenter", mouseEnter, false); + document + .getElementById("controls") + .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", + "
    00:00/01:00
    " + ); + var controlElement = document.querySelector("#controls"); + Helper.css("#seekToDuration", "bottom", "50px"); + Helper.addClass("#controls", "ewresize"); + } + if ( + full_playlist != undefined && + !already_offline && + full_playlist.length > 0 + ) { + for (var x = 0; x < full_playlist.length; x++) { + full_playlist[x].votes = 0; + } + + List.sortList(); + List.populate_list(full_playlist); + } + } } -function before_toast(){ - /*if($('.toast').length > 0) { +function before_toast() { + /*if($('.toast').length > 0) { var toastElement = $('.toast').first()[0]; var toastInstance = toastElement.M_Toast; toastInstance.remove(); }*/ -M.Toast.dismissAll(); -//Materialize.Toast.removeAll(); + 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'); + this.preventDefault(); + Player.pauseVideo(); + window.open("https://zoff.me/" + chan.toLowerCase() + "/", "_blank"); }); addListener("click", ".vote-container", function(e) { - var that = e; - var id = that.getAttribute("data-video-id"); + var that = e; + var id = that.getAttribute("data-video-id"); - List.vote(id, "pos"); + List.vote(id, "pos"); }); addListener("click", ".prev_page", function(e) { - event.preventDefault(); - List.dynamicContentPage(-1); + event.preventDefault(); + List.dynamicContentPage(-1); }); addListener("click", "#player_overlay", function(event) { - if(videoSource == "soundcloud") Playercontrols.play_pause(); + if (videoSource == "soundcloud") Playercontrols.play_pause(); }); addListener("click", ".next_page", function(e) { - event.preventDefault(); - List.dynamicContentPage(1); + event.preventDefault(); + List.dynamicContentPage(1); }); -addListener("click", ".prev", function(event){ - this.preventDefault(); - if(!offline) return; - List.skip(false); +addListener("click", ".prev", function(event) { + this.preventDefault(); + if (!offline) return; + List.skip(false); }); -addListener("click", ".skip", function(event){ - this.preventDefault(); - //if(!offline) return; - List.skip(true); +addListener("click", ".skip", function(event) { + this.preventDefault(); + //if(!offline) return; + List.skip(true); }); -addListener("click", ".last_page", function(e){ - event.preventDefault(); - List.dynamicContentPage(10); +addListener("click", ".last_page", function(e) { + event.preventDefault(); + List.dynamicContentPage(10); }); -addListener("click", ".first_page", function(e){ - event.preventDefault(); - List.dynamicContentPage(-10); +addListener("click", ".first_page", function(e) { + event.preventDefault(); + List.dynamicContentPage(-10); }); diff --git a/server/public/assets/js/helpers.js b/server/public/assets/js/helpers.js index 9e15b262..ed89a670 100755 --- a/server/public/assets/js/helpers.js +++ b/server/public/assets/js/helpers.js @@ -1,943 +1,1047 @@ var Helper = { - logs: [], + logs: [], - decodeChannelName: function(str) { - var _fn = decodeURIComponent; - str = str.toUpperCase(); - /*if(str.indexOf("%25") >= 0) { + decodeChannelName: function(str) { + var _fn = decodeURIComponent; + str = str.toUpperCase(); + /*if(str.indexOf("%25") >= 0) { var _percentSign = str.indexOf("%25") + 1; var _before = str.substring(0, _percentSign); var _after = str.substring(_percentSign); str = _before + "25" + _after; console.log(str); }*/ - var toReturn = _fn(str.replace(/%5F/g, "_").replace(/%27/g, "'")); - toReturn = toReturn.toLowerCase().replace(/&/g, "&"); - return toReturn.toLowerCase(); - }, + var toReturn = _fn(str.replace(/%5F/g, "_").replace(/%27/g, "'")); + toReturn = toReturn.toLowerCase().replace(/&/g, "&"); + return toReturn.toLowerCase(); + }, - 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(/'/g, "%27"); - toReturn = toReturn.toLowerCase(); - return toReturn; - }, + 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(/'/g, "%27"); + toReturn = toReturn.toLowerCase(); + return toReturn; + }, - log: function(to_log) { - var _DEBUG; - try { - _DEBUG = localStorage.getItem("debug"); - } catch(e) { - _DEBUG = false; + log: function(to_log) { + var _DEBUG; + try { + _DEBUG = localStorage.getItem("debug"); + } catch (e) { + _DEBUG = false; + } + if (_DEBUG === "true") { + 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*/ + } + try { + if (to_log[0] != "FULL PLAYLIST") { + Helper.logs.unshift({ log: to_log, date: new Date() }); + if (Helper.logs.length > 10) { + Helper.logs.splice(-1, Helper.logs.length - 10); } - if(_DEBUG === "true") { - 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*/ - } - try { - if(to_log[0] != "FULL PLAYLIST") { - Helper.logs.unshift({log: to_log, date: new Date()}); - if(Helper.logs.length > 10) { - Helper.logs.splice(-1, Helper.logs.length - 10); - } - } - } catch(e){} - }, + } + } catch (e) {} + }, - rnd: function(arr) { - return arr[Math.floor(Math.random() * arr.length)]; - }, + rnd: function(arr) { + return arr[Math.floor(Math.random() * arr.length)]; + }, - computedStyle: function(element, type) { - try { - return parseInt(window.getComputedStyle(document.querySelector(element), null).getPropertyValue(type).replace("px", "")) - } catch(e) { - return 0; - } - }, + computedStyle: function(element, type) { + try { + return parseInt( + window + .getComputedStyle(document.querySelector(element), null) + .getPropertyValue(type) + .replace("px", "") + ); + } catch (e) { + return 0; + } + }, - toggleClass: function(element, className) { - try { - if(typeof(element) == "object") { - if(element.className.indexOf(className) == -1) { - Helper.addClass(element, className); - } else { - Helper.removeClass(element, className); - } - } else if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - if(elem.className.indexOf(className) == -1) { - Helper.addClass(elem, className); - } else { - Helper.removeClass(elem, className); - } - } else { - var elements; - if(element.substring(0,1) == ".") { - var testSplit = element.substring(1).split(" "); - if(testSplit.length > 1) { - var insideElement = document.getElementsByClassName(testSplit[0]); - elements = []; - for(var i = 0; i < insideElement.length; i++) { - var innards = insideElement[i].querySelectorAll(testSplit[1]); - for(var y = 0; y < innards.length; y++) { - elements.push(innards[y]); - } - } - } else { - elements = document.getElementsByClassName(element.substring(1)); - } - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - if(elements[i].className.indexOf(className) == -1) { - Helper.addClass(elements[i], className); - } else { - Helper.removeClass(element, className); - } - } - } - }catch(e) { - //console.log(e); - } - }, - - css: function(element, attribute, value) { - try { - if(typeof(element) == "object") { - try { - if(element.length > 0) { - for(var i = 0; i < element.length; i++) { - element[i].style[attribute] = value; - } - } else { - element.style[attribute] = value; - } - } catch(e) { - element.style[attribute] = value; - } - } - if(typeof(element) == "object") { - element.style[attribute] = value; - } else if(element.substring(0,1) == "#") { - document.getElementById(element.substring(1)).style[attribute] = value; - } else { - var elements = document.getElementsByClassName(element.substring(1)); - for(var i = 0; i < elements.length; i++) { - elements[i].style[attribute] = value; - } - } - } catch(e) { - //console.log(e); - } - }, - - html: function(element) { - try { - if(element.substring(0,1) == "#") { - return document.getElementById(element.substring(1)).innerHTML; - } else { - var elements = document.getElementsByClassName(element.substring(1)); - for(var i = 0; i < elements.length; i++) { - return elements[i].innerHTML; - } - } - } catch(e){ - //console.log(e); - } - }, - - removeClass: function(element, className) { - try { - if(typeof(element) == "object") { - element.classList.remove(className); - } else if(element.substring(0,1) == "#") { - document.getElementById(element.substring(1)).classList.remove(className); - } else { - var elements = document.getElementsByClassName(element.substring(1)); - for(var i = 0; i < elements.length; i++) { - elements[i].classList.remove(className); - } - } - } catch(e) { - //console.log(e); - } - }, - - removeElement: function(element) { - try { - if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - elem.remove(); - } else { - var elements; - if(element.substring(0,1) == ".") { - var testSplit = element.substring(1).split(" "); - if(testSplit.length > 1) { - var insideElement = document.getElementsByClassName(testSplit[0]); - elements = []; - for(var i = 0; i < insideElement.length; i++) { - var innards = insideElement[i].querySelectorAll(testSplit[1]); - for(var y = 0; y < innards.length; y++) { - elements.push(innards[y]); - } - } - } else { - elements = document.getElementsByClassName(element.substring(1)); - } - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - elements[i].remove(); - } - } - } catch(e) { - //console.log(e); - } - }, - - setHtml: function(element, html) { - try { - if(typeof(element) == "object") { - element.innerHTML = html; - } else if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - elem.innerHTML = html; - } else { - var elements; - if(element.substring(0,1) == ".") { - elements = document.getElementsByClassName(element.substring(1)); - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - elements[i].innerHTML = html; - } - } - } catch(e) { - //console.log(e); - } - }, - - attr: function(element, attr, value) { - if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - elem.setAttribute(attr, value); + toggleClass: function(element, className) { + try { + if (typeof element == "object") { + if (element.className.indexOf(className) == -1) { + Helper.addClass(element, className); } else { - var elements; - if(element.substring(0,1) == ".") { - var testSplit = element.substring(1).split(" "); - if(testSplit.length > 1) { - var insideElement = document.getElementsByClassName(testSplit[0]); - elements = []; - for(var i = 0; i < insideElement.length; i++) { - var innards = insideElement[i].querySelectorAll(testSplit[1]); - for(var y = 0; y < innards.length; y++) { - elements.push(innards[y]); - } - } - } else { - elements = document.getElementsByClassName(element.substring(1)); - } - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - elements[i].setAttribute(attr, value); - } + Helper.removeClass(element, className); } - }, - - tabs: function(element, options) { - if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - if(options == "destroy") { - var this_element = M.Tabs.getInstance(elem); - if(this_element != undefined) this_element.destroy(); - } else { - M.Tabs.init(elem, options); - } + } else if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + if (elem.className.indexOf(className) == -1) { + Helper.addClass(elem, className); } else { - var elements = document.getElementsByClassName(element.substring(1)); - for(var i = 0; i < elements.length; i++) { - if(options == "destroy") { - var this_element = M.Tabs.getInstance(elem); - if(this_element != undefined) this_element.destroy(); - } else { - M.Tabs.init(elements[i], options); - } - } + Helper.removeClass(elem, className); } - }, + } else { + var elements; + if (element.substring(0, 1) == ".") { + var testSplit = element.substring(1).split(" "); + if (testSplit.length > 1) { + var insideElement = document.getElementsByClassName(testSplit[0]); + elements = []; + for (var i = 0; i < insideElement.length; i++) { + var innards = insideElement[i].querySelectorAll(testSplit[1]); + for (var y = 0; y < innards.length; y++) { + elements.push(innards[y]); + } + } + } else { + elements = document.getElementsByClassName(element.substring(1)); + } + } else { + elements = document.getElementsByTagName(element); + } + for (var i = 0; i < elements.length; i++) { + if (elements[i].className.indexOf(className) == -1) { + Helper.addClass(elements[i], className); + } else { + Helper.removeClass(element, className); + } + } + } + } catch (e) { + //console.log(e); + } + }, - tooltip: function(element, options) { + css: function(element, attribute, value) { + try { + if (typeof element == "object") { try { - if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - if(options == "destroy") { - var this_element = M.Tooltip.getInstance(elem); - if(this_element != undefined) this_element.destroy(); - } else { - M.Tooltip.init(elem, options); - } - } else { - var elements = document.getElementsByClassName(element.substring(1)); - for(var i = 0; i < elements.length; i++) { - if(options == "destroy") { - var this_element = M.Tooltip.getInstance(elem); - if(this_element != undefined) this_element.destroy(); - } else { - M.Tooltip.init(elements[i], options); - } - } + if (element.length > 0) { + for (var i = 0; i < element.length; i++) { + element[i].style[attribute] = value; } - } catch(e) {} - }, + } else { + element.style[attribute] = value; + } + } catch (e) { + element.style[attribute] = value; + } + } + if (typeof element == "object") { + element.style[attribute] = value; + } else if (element.substring(0, 1) == "#") { + document.getElementById(element.substring(1)).style[attribute] = value; + } else { + var elements = document.getElementsByClassName(element.substring(1)); + for (var i = 0; i < elements.length; i++) { + elements[i].style[attribute] = value; + } + } + } catch (e) { + //console.log(e); + } + }, - addClass: function(element, className) { + html: function(element) { + try { + if (element.substring(0, 1) == "#") { + return document.getElementById(element.substring(1)).innerHTML; + } else { + var elements = document.getElementsByClassName(element.substring(1)); + for (var i = 0; i < elements.length; i++) { + return elements[i].innerHTML; + } + } + } catch (e) { + //console.log(e); + } + }, + + removeClass: function(element, className) { + try { + if (typeof element == "object") { + element.classList.remove(className); + } else if (element.substring(0, 1) == "#") { + document + .getElementById(element.substring(1)) + .classList.remove(className); + } else { + var elements = document.getElementsByClassName(element.substring(1)); + for (var i = 0; i < elements.length; i++) { + elements[i].classList.remove(className); + } + } + } catch (e) { + //console.log(e); + } + }, + + removeElement: function(element) { + try { + if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + elem.remove(); + } else { + var elements; + if (element.substring(0, 1) == ".") { + var testSplit = element.substring(1).split(" "); + if (testSplit.length > 1) { + var insideElement = document.getElementsByClassName(testSplit[0]); + elements = []; + for (var i = 0; i < insideElement.length; i++) { + var innards = insideElement[i].querySelectorAll(testSplit[1]); + for (var y = 0; y < innards.length; y++) { + elements.push(innards[y]); + } + } + } else { + elements = document.getElementsByClassName(element.substring(1)); + } + } else { + elements = document.getElementsByTagName(element); + } + for (var i = 0; i < elements.length; i++) { + elements[i].remove(); + } + } + } catch (e) { + //console.log(e); + } + }, + + setHtml: function(element, html) { + try { + if (typeof element == "object") { + element.innerHTML = html; + } else if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + elem.innerHTML = html; + } else { + var elements; + if (element.substring(0, 1) == ".") { + elements = document.getElementsByClassName(element.substring(1)); + } else { + elements = document.getElementsByTagName(element); + } + for (var i = 0; i < elements.length; i++) { + elements[i].innerHTML = html; + } + } + } catch (e) { + //console.log(e); + } + }, + + attr: function(element, attr, value) { + if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + elem.setAttribute(attr, value); + } else { + var elements; + if (element.substring(0, 1) == ".") { + var testSplit = element.substring(1).split(" "); + if (testSplit.length > 1) { + var insideElement = document.getElementsByClassName(testSplit[0]); + elements = []; + for (var i = 0; i < insideElement.length; i++) { + var innards = insideElement[i].querySelectorAll(testSplit[1]); + for (var y = 0; y < innards.length; y++) { + elements.push(innards[y]); + } + } + } else { + elements = document.getElementsByClassName(element.substring(1)); + } + } else { + elements = document.getElementsByTagName(element); + } + for (var i = 0; i < elements.length; i++) { + elements[i].setAttribute(attr, value); + } + } + }, + + tabs: function(element, options) { + if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + if (options == "destroy") { + var this_element = M.Tabs.getInstance(elem); + if (this_element != undefined) this_element.destroy(); + } else { + M.Tabs.init(elem, options); + } + } else { + var elements = document.getElementsByClassName(element.substring(1)); + for (var i = 0; i < elements.length; i++) { + if (options == "destroy") { + var this_element = M.Tabs.getInstance(elem); + if (this_element != undefined) this_element.destroy(); + } else { + M.Tabs.init(elements[i], options); + } + } + } + }, + + tooltip: function(element, options) { + try { + if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + if (options == "destroy") { + var this_element = M.Tooltip.getInstance(elem); + if (this_element != undefined) this_element.destroy(); + } else { + M.Tooltip.init(elem, options); + } + } else { + var elements = document.getElementsByClassName(element.substring(1)); + for (var i = 0; i < elements.length; i++) { + if (options == "destroy") { + var this_element = M.Tooltip.getInstance(elem); + if (this_element != undefined) this_element.destroy(); + } else { + M.Tooltip.init(elements[i], options); + } + } + } + } catch (e) {} + }, + + addClass: function(element, className) { + try { + if (typeof element == "object") { try { - if(typeof(element) == "object") { - try { - if(element.length > 0) { - for(var i = 0; i < element.length; i++) { - if(element[i].className.indexOf(className) == -1) { - element[i].className += " " + className; - } - } - } else { - if(element.className.indexOf(className) == -1) { - element.className += " " + className; - } - } - } catch(e) { - if(element.className.indexOf(className) == -1) { - element.className += " " + className; - } - } - } else if(element.substring(0,1) == "#") { - var elem = document.getElementById(element.substring(1)); - if(elem.className.indexOf(className) == -1) { - elem.className += " " + className; - } - } else { - var elements; - if(element.substring(0,1) == ".") { - elements = document.getElementsByClassName(element.substring(1)); - } else { - elements = document.getElementsByTagName(element); - } - for(var i = 0; i < elements.length; i++) { - if(elements[i].className.indexOf(className) == -1) { - elements[i].className += " " + className; - } - } + if (element.length > 0) { + for (var i = 0; i < element.length; i++) { + if (element[i].className.indexOf(className) == -1) { + element[i].className += " " + className; + } } - }catch(e) {} - }, - - ajax: function(obj) { - var _async = true; - if(obj.async) _async = obj.async; - if(obj.method == undefined && obj.type != undefined) obj.method = obj.type; - if(obj.method == undefined) obj.method = "GET"; - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4 - if (xmlhttp.status == 200 || xmlhttp.status == 201 || xmlhttp.status == 202) { - obj.success(xmlhttp.responseText, xmlhttp); - } - else if(obj.hasOwnProperty("error")){ - obj.error(xmlhttp); - } - } - }; - - xmlhttp.open(obj.method, obj.url, _async); - if(obj.headers) { - for(header in obj.headers) { - xmlhttp.setRequestHeader(header, obj.headers[header]); + } else { + if (element.className.indexOf(className) == -1) { + element.className += " " + className; } + } + } catch (e) { + if (element.className.indexOf(className) == -1) { + element.className += " " + className; + } } - if(obj.data) { - if(typeof(obj.data) == "object") obj.data = JSON.stringify(obj.data); - //xmlhttp.send(sendRequest); - xmlhttp.send(obj.data); + } else if (element.substring(0, 1) == "#") { + var elem = document.getElementById(element.substring(1)); + if (elem.className.indexOf(className) == -1) { + elem.className += " " + className; } - else xmlhttp.send(); - }, - - randomString: function(length){ - var text = ""; - var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_"; - for(var i = 0; i < length; i++) { - text += possible.charAt(Math.floor(Math.random() * possible.length)); - } - return text; - }, - - 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) - || /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; - - var default_cmp = function (a, b) { - if(a == undefined) a = 0; - if(b == undefined) b = 0; - if (a === b) return 0; - return a < b ? -1 : 1; - }, - getCmpFunc = function (primer, reverse) { - var dfc = default_cmp, - // closer in scope - cmp = default_cmp; - if (primer) { - cmp = function (a, b) { - return dfc(primer(a), primer(b)); - }; - } - if (reverse) { - return function (a, b) { - return -1 * cmp(a, b); - }; - } - return cmp; - }; - - // preprocess sorting options - for (var i = 0; i < n_fields; i++) { - field = arguments[i]; - if (typeof field === 'string') { - name = field; - cmp = default_cmp; - } else { - name = field.name; - cmp = getCmpFunc(field.primer, field.reverse); - } - fields.push({ - name: name, - cmp: cmp - }); - } - - // final comparison function - return function (A, B) { - var name, result; - for (var i = 0; i < n_fields; i++) { - result = 0; - field = fields[i]; - name = field.name; - - result = field.cmp(A[name], B[name]); - if (result !== 0) break; - } - return result; - }; - }, - - hashCode: function(str) { // java String#hashCode - var hash = 0; - for (var i = 0; i < str.length; i++) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); - } - return hash; - }, - - intToARGB: function(i) { - return ((i>>24)&0xFF).toString(16) + - ((i>>16)&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 ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; - }, - - hslToHex: function(h, s, l) { - h /= 360; - s /= 100; - l /= 100; - var r, g, b; - if (s === 0) { - r = g = b = l; // achromatic + } else { + var elements; + if (element.substring(0, 1) == ".") { + elements = document.getElementsByClassName(element.substring(1)); } else { - var hue2rgb = function(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; - }; - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); + elements = document.getElementsByTagName(element); } - var toHex = function(x) { - var hex = Math.round(x * 255).toString(16); - return hex.length === 1 ? '0' + hex : hex; - }; - return '#' + toHex(r) + "" + toHex(g) + "" + toHex(b); - }, - - hslToRgb: function(h, s, l) { - var r, g, b; - - if (s == 0) { - r = g = b = l; // achromatic - } else { - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); + for (var i = 0; i < elements.length; i++) { + if (elements[i].className.indexOf(className) == -1) { + elements[i].className += " " + className; + } } + } + } catch (e) {} + }, - 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--) { - if (a[i] === obj) { - return true; - } + ajax: function(obj) { + var _async = true; + if (obj.async) _async = obj.async; + if (obj.method == undefined && obj.type != undefined) obj.method = obj.type; + if (obj.method == undefined) obj.method = "GET"; + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == XMLHttpRequest.DONE) { + // XMLHttpRequest.DONE == 4 + if ( + xmlhttp.status == 200 || + xmlhttp.status == 201 || + xmlhttp.status == 202 + ) { + obj.success(xmlhttp.responseText, xmlhttp); + } else if (obj.hasOwnProperty("error")) { + obj.error(xmlhttp); } - return false; - }, + } + }; - sample: function() { - if (Date.now() - lastSample >= SAMPLE_RATE * 2) { - socket.removeAllListeners(); - socket.disconnect(); - socket.connect(); - Player.setup_all_listeners(); + xmlhttp.open(obj.method, obj.url, _async); + if (obj.headers) { + for (header in obj.headers) { + xmlhttp.setRequestHeader(header, obj.headers[header]); + } + } + if (obj.data) { + if (typeof obj.data == "object") obj.data = JSON.stringify(obj.data); + //xmlhttp.send(sendRequest); + xmlhttp.send(obj.data); + } else xmlhttp.send(); + }, + + randomString: function(length) { + var text = ""; + var possible = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-_"; + for (var i = 0; i < length; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)); + } + return text; + }, + + 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 + ) || + /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; + + var default_cmp = function(a, b) { + if (a == undefined) a = 0; + if (b == undefined) b = 0; + if (a === b) return 0; + return a < b ? -1 : 1; + }, + getCmpFunc = function(primer, reverse) { + var dfc = default_cmp, + // closer in scope + cmp = default_cmp; + if (primer) { + cmp = function(a, b) { + return dfc(primer(a), primer(b)); + }; } - lastSample = Date.now(); - setTimeout(Helper.sample, SAMPLE_RATE); - }, + if (reverse) { + return function(a, b) { + return -1 * cmp(a, b); + }; + } + return cmp; + }; - msieversion: function() { - var ua = window.navigator.userAgent; - var msie = ua.indexOf("MSIE "); + // preprocess sorting options + for (var i = 0; i < n_fields; i++) { + field = arguments[i]; + if (typeof field === "string") { + name = field; + cmp = default_cmp; + } else { + name = field.name; + cmp = getCmpFunc(field.primer, field.reverse); + } + fields.push({ + name: name, + cmp: cmp + }); + } - if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number + // final comparison function + return function(A, B) { + var name, result; + for (var i = 0; i < n_fields; i++) { + result = 0; + field = fields[i]; + name = field.name; + + result = field.cmp(A[name], B[name]); + if (result !== 0) break; + } + return result; + }; + }, + + hashCode: function(str) { + // java String#hashCode + var hash = 0; + for (var i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + return hash; + }, + + intToARGB: function(i) { + return ( + ((i >> 24) & 0xff).toString(16) + + ((i >> 16) & 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 + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } + : null; + }, + + hslToHex: function(h, s, l) { + h /= 360; + s /= 100; + l /= 100; + var r, g, b; + if (s === 0) { + r = g = b = l; // achromatic + } else { + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + }; + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + var toHex = function(x) { + var hex = Math.round(x * 255).toString(16); + return hex.length === 1 ? "0" + hex : hex; + }; + return "#" + toHex(r) + "" + toHex(g) + "" + toHex(b); + }, + + hslToRgb: function(h, s, l) { + var r, g, b; + + if (s == 0) { + r = g = b = l; // achromatic + } else { + function hue2rgb(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + } + + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + + 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--) { + if (a[i] === obj) { return true; - else // If another browser, return 0 - return false; - }, + } + } + return false; + }, - getRandomInt: function(min, max) { - return Math.floor(Math.random() * (max - min)) + min; - }, + sample: function() { + if (Date.now() - lastSample >= SAMPLE_RATE * 2) { + socket.removeAllListeners(); + socket.disconnect(); + socket.connect(); + Player.setup_all_listeners(); + } + lastSample = Date.now(); + setTimeout(Helper.sample, SAMPLE_RATE); + }, - secondsToOther: function(seconds) { - var time = seconds; - var minutes = Math.floor(time/60); - time = time - (minutes * 60); - return [minutes, time]; - }, + msieversion: function() { + var ua = window.navigator.userAgent; + var msie = ua.indexOf("MSIE "); - rgbToHsl: function(arr, light) { - r = arr[0]; - g = arr[1]; - b = arr[2]; - r /= 255; - g /= 255; - b /= 255; - var max = Math.max(r, g, b), min = Math.min(r, g, b); - var h, s, l = (max + min) / 2; + if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) + // If Internet Explorer, return version number + return true; + // If another browser, return 0 + else return false; + }, - if(max == min){ - h = s = 0; // achromatic - }else{ - 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 g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; - } - h /= 6; + getRandomInt: function(min, max) { + return Math.floor(Math.random() * (max - min)) + min; + }, + + secondsToOther: function(seconds) { + var time = seconds; + var minutes = Math.floor(time / 60); + time = time - minutes * 60; + return [minutes, time]; + }, + + rgbToHsl: function(arr, light) { + r = arr[0]; + g = arr[1]; + b = arr[2]; + r /= 255; + g /= 255; + b /= 255; + var max = Math.max(r, g, b), + min = Math.min(r, g, b); + var h, + s, + l = (max + min) / 2; + + if (max == min) { + h = s = 0; // achromatic + } else { + 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 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 + 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) + + "%)" + ); + }, + + componentToHex: function(c) { + var hex = c.toString(16); + return hex.length == 1 ? "0" + hex : hex; + }, + + rgbToHex: function(r, g, b) { + return ( + "#" + + Helper.componentToHex(r) + + Helper.componentToHex(g) + + Helper.componentToHex(b) + ); + }, + + upperFirst: function(string) { + 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 + .getElementById("contact-form-message") + .setAttribute("disabled", true); + var captcha_response = grecaptcha.getResponse(); + Helper.ajax({ + type: "POST", + headers: { + "Content-Type": "application/json" + }, + data: { + from: from, + message: message, + "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." + ); + } else { + Helper.setHtml("#contact-container", ""); + Helper.setHtml( + "#contact-container", + "Something went wrong, sorry about that. You could instead try with your own mail-client: contact@zoff.me" + ); + } + }, + 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." + ); + } else { + Helper.setHtml("#contact-container", ""); + Helper.setHtml( + "#contact-container", + "Something went wrong, sorry about that. You could instead try with your own mail-client: contact@zoff.me" + ); + } } - 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)+"%)"; - }, + }); + } + }, - componentToHex: function(c) { - var hex = c.toString(16); - return hex.length == 1 ? "0" + hex : hex; - }, + firstY: null, + lastY: null, + currentY: null, + vertScroll: false, + initAdjustment: 0, - rgbToHex: function(r, g, b) { - return "#" + Helper.componentToHex(r) + Helper.componentToHex(g) + Helper.componentToHex(b); - }, + touchstart: function(event) { + Helper.lastY = Helper.currentY = Helper.firstY = + event.originalEvent.touches[0].pageY; + }, - upperFirst: function(string){ - return string.substring(0,1).toUpperCase()+string.substring(1).toLowerCase(); - }, + touchmove: function(event) { + Helper.currentY = event.originalEvent.touches[0].pageY; + var adjustment = Helper.lastY - Helper.currentY; - send_mail: function(from, message){ - if(from !== "" && message !== ""){ + // Mimic native vertical scrolling where scrolling only starts after the + // cursor has moved up or down from its original position by ~30 pixels. + if (!Helper.vertScroll && Math.abs(Helper.currentY - Helper.firstY) > 30) { + Helper.vertScroll = true; + Helper.initAdjustment = Helper.currentY - Helper.firstY; + } - Helper.addClass("#submit-contact-form", "hide"); - Helper.removeClass("#send-loader", "hide"); - document.getElementById("contact-form-from").setAttribute("disabled", true); - document.getElementById("contact-form-message").setAttribute("disabled", true); - var captcha_response = grecaptcha.getResponse(); - Helper.ajax({ - type: "POST", - headers: { - "Content-Type": "application/json" - }, - data: { - from: from, - message: message, - "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.") - }else{ - Helper.setHtml("#contact-container", ""); - Helper.setHtml("#contact-container", "Something went wrong, sorry about that. You could instead try with your own mail-client: contact@zoff.me") - } - }, 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.") - }else{ - Helper.setHtml("#contact-container", ""); - Helper.setHtml("#contact-container", "Something went wrong, sorry about that. You could instead try with your own mail-client: contact@zoff.me") - } - } - }); - } - }, + // only apply the adjustment if the user has met the threshold for vertical scrolling + if (Helper.vertScroll) { + window.scrollBy(0, adjustment + Helper.initAdjustment); + Helper.lastY = Helper.currentY + adjustment; + } + }, - firstY: null, - lastY: null, - currentY: null, - vertScroll: false, - initAdjustment: 0, + touchend: function(event) { + Helper.vertScroll = false; + Helper.firstY = null; + Helper.currentY = null; + Helper.vertScroll = false; + Helper.initAdjustment = 0; + Helper.currentY = null; + }, - touchstart: function(event) { - Helper.lastY = Helper.currentY = Helper.firstY = event.originalEvent.touches[0].pageY; - }, + invertColor: function(hex) { + if (hex.indexOf("#") === 0) { + hex = hex.slice(1); + } + // convert 3-digit hex to 6-digits. + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + if (hex.length !== 6) { + 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); + }, - touchmove: function(event) { - Helper.currentY = event.originalEvent.touches[0].pageY; - var adjustment = Helper.lastY-Helper.currentY; + padZero: function(str, len) { + len = len || 2; + var zeros = new Array(len).join("0"); + return (zeros + str).slice(-len); + }, - // Mimic native vertical scrolling where scrolling only starts after the - // cursor has moved up or down from its original position by ~30 pixels. - if (!Helper.vertScroll && Math.abs(Helper.currentY-Helper.firstY) > 30) { - Helper.vertScroll = true; - Helper.initAdjustment = Helper.currentY-Helper.firstY; - } + replaceForFind: function(str) { + str = str.toLowerCase(); + if (str.startsWith("the")) { + str = str.replace("the", ""); + } + str = str.replace(" hd", ""); + str = str.replace("official hd video", ""); + str = str.replace("unofficial video", ""); + str = str.replace("studio footage", ""); + str = str.replace("great song", ""); + str = str.replace("-", " "); + str = str.replace("-", " "); + str = str.replace(" hq", " "); + str = str.replace("(explicit)", " "); + str = str.replace("lyric video", ""); + str = str.replace("lyrics video", ""); + str = str.replace("album version", ""); + str = str.replace("drive original movie soundtrack", ""); + str = str.replace("original movie soundtrack", ""); + str = str.replace("live sessions", ""); + str = str.replace("audio only", ""); + str = str.replace("audio", ""); + str = str.replace("(new)", ""); + str = str.replace(" by ", " "); + str = str.replace(" vs ", " "); + str = str.replace("(full)", " "); + str = str.replace("(video)", " "); + str = str.replace("&", " "); + str = str.replace("with lyrics", ""); + str = str.replace("lyrics", ""); + str = str.replace("w/", ""); + str = str.replace("w/", ""); + str = str.replace("official video", ""); + str = str.replace("studio version", ""); + str = str.replace("official music video", ""); + str = str.replace("music video", ""); + str = str.replace("musicvideo", ""); + str = str.replace("original video", ""); + str = str.replace("full version", ""); + str = str.replace("full song", ""); + str = str.replace("(official)", ""); + str = str.replace("official", ""); + str = str.replace("(original)", ""); + str = str.replace(/ *\[[^\]]*]/, ""); + str = str.replace("/w download", ""); + str = str.replace("(", " "); + str = str.replace(")", " "); + str = str.replace("vs.", " "); + str = str.replace("/", " "); + str = str.replace("long version", ""); + str = str.replace("[]", ""); + str = str.replace("()", ""); + str = str.replace("|", ""); + str = str.replace("feat.", " "); + str = str.replace("feat", " "); + str = str.replace("ft.", " "); + str = str.replace("[", " "); + str = str.replace("]", " "); + str = str.replace(" free ", ""); + str = str.replace(" hd", ""); + 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("(", " "); + str = str.replace(")", " "); + str = str.replace("[", " "); + str = str.replace("]", " "); + str = str.replace("-", " "); + str = str.replace("-", " "); + str = str.replace("-", " "); + str = str.replace("original mix", " "); + str = str.replace("album version", " "); + str = str.replace("abum version", " "); + str = str.replace("feat.", " "); + str = str.replace("feat.", " "); + str = str.replace("feat", " "); + str = str.replace("feat", " "); + 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 + .replace(" ", " ") + .replace(" ", " ") + .replace(" ", " ") + .replace(" ", " ") + .replace(" ", " ") + .replace(" ", " ") + .replace(" ", " ") + .replace(" ", " "); + return str; + }, - // only apply the adjustment if the user has met the threshold for vertical scrolling - if (Helper.vertScroll) { - window.scrollBy(0,adjustment + Helper.initAdjustment); - Helper.lastY = Helper.currentY + adjustment; - } + 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(",") + + ")"; - }, + // Get array of RGB values + rgb = rgb.replace(/[^\d,]/g, "").split(","); - touchend: function(event) { - Helper.vertScroll = false; - Helper.firstY = null; - Helper.currentY = null; - Helper.vertScroll = false; - Helper.initAdjustment = 0; - Helper.currentY = null; - }, + var r = rgb[0], + g = rgb[1], + b = rgb[2]; - invertColor: function(hex) { - if (hex.indexOf('#') === 0) { - hex = hex.slice(1); - } - // convert 3-digit hex to 6-digits. - if (hex.length === 3) { - hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; - } - if (hex.length !== 6) { - 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); - }, + // Convert RGB to HSL + // Adapted from answer by 0x000f http://stackoverflow.com/a/34946092/4939630 + r /= 255.0; + g /= 255.0; + 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; - padZero: function(str, len) { - len = len || 2; - var zeros = new Array(len).join('0'); - return (zeros + str).slice(-len); - }, + if (max == min) { + h = s = 0; //achromatic + } else { + var d = max - min; + s = l > 0.5 ? d / (2.0 - max - min) : d / (max + min); - replaceForFind: function(str) { - str = str.toLowerCase(); - if(str.startsWith("the")) { - str = str.replace("the", ""); - } - str = str.replace(" hd", ""); - str = str.replace("official hd video", ""); - str = str.replace("unofficial video", ""); - str = str.replace("studio footage", ""); - str = str.replace("great song", ""); - str = str.replace("-", " "); - str = str.replace("-", " "); - str = str.replace(" hq", " "); - str = str.replace("(explicit)", " "); - str = str.replace("lyric video", ""); - str = str.replace("lyrics video", ""); - str = str.replace("album version", ""); - str = str.replace("drive original movie soundtrack", ""); - str = str.replace("original movie soundtrack", ""); - str = str.replace("live sessions", ""); - str = str.replace("audio only", ""); - str = str.replace("audio", ""); - str = str.replace("(new)", ""); - str = str.replace(" by ", " "); - str = str.replace(" vs ", " "); - str = str.replace("(full)", " "); - str = str.replace("(video)", " "); - str = str.replace("&", " "); - str = str.replace("with lyrics", ""); - str = str.replace("lyrics", ""); - str = str.replace("w/", ""); - str = str.replace("w/", ""); - str = str.replace("official video", ""); - str = str.replace("studio version", ""); - str = str.replace("official music video", ""); - str = str.replace("music video", ""); - str = str.replace("musicvideo", ""); - str = str.replace("original video", ""); - str = str.replace("full version", ""); - str = str.replace("full song", ""); - str = str.replace("(official)", ""); - str = str.replace("official", ""); - str = str.replace("(original)", ""); - str = str.replace(/ *\[[^\]]*]/, ""); - str = str.replace("/w download", ""); - str = str.replace("(", " "); - str = str.replace(")", " "); - str = str.replace("vs.", " "); - str = str.replace("/", " "); - str = str.replace("long version", ""); - str = str.replace("[]", ""); - str = str.replace("()", ""); - str = str.replace("|", ""); - str = str.replace("feat.", " "); - str = str.replace("feat", " "); - str = str.replace("ft.", " "); - str = str.replace("[", " "); - str = str.replace("]", " "); - str = str.replace(" free ", ""); - str = str.replace(" hd", ""); - 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("(", " "); - str = str.replace(")", " "); - str = str.replace("[", " "); - str = str.replace("]", " "); - str = str.replace("-", " "); - str = str.replace("-", " "); - str = str.replace("-", " "); - str = str.replace("original mix", " "); - str = str.replace("album version", " "); - str = str.replace("abum version", " "); - str = str.replace("feat.", " "); - str = str.replace("feat.", " "); - str = str.replace("feat", " "); - str = str.replace("feat", " "); - 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.replace(" ", " ").replace(" ", " ").replace(" ", " ").replace(" ", " ").replace(" ", " ").replace(" ", " ").replace(" ", " ").replace(" ", " "); - return str; - }, + if (max == r && g >= b) { + h = (1.0472 * (g - b)) / d; + } else if (max == r && g < b) { + h = (1.0472 * (g - b)) / d + 6.2832; + } else if (max == g) { + h = (1.0472 * (b - r)) / d + 2.0944; + } else if (max == b) { + h = (1.0472 * (r - g)) / d + 4.1888; + } + } - hexToComplimentary: function(hex){ + h = (h / 6.2832) * 360.0 + 0; - // 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(',') + ')'; + // Shift hue to opposite side of wheel and convert to [0-1] value + h += 180; + if (h > 360) { + h -= 360; + } + h /= 360; - // Get array of RGB values - rgb = rgb.replace(/[^\d,]/g, '').split(','); + // Convert h s and l values into r g and b values + // Adapted from answer by Mohsen http://stackoverflow.com/a/9493060/4939630 + if (s === 0) { + r = g = b = l; // achromatic + } else { + var hue2rgb = function hue2rgb(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + }; - var r = rgb[0], g = rgb[1], b = rgb[2]; + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; - // Convert RGB to HSL - // Adapted from answer by 0x000f http://stackoverflow.com/a/34946092/4939630 - r /= 255.0; - g /= 255.0; - 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; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } - if(max == min) { - h = s = 0; //achromatic - } else { - var 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 ; - } else if(max == r && g < b) { - h = 1.0472 * (g - b) / d + 6.2832; - } else if(max == g) { - h = 1.0472 * (b - r) / d + 2.0944; - } else if(max == b) { - h = 1.0472 * (r - g) / d + 4.1888; - } - } - - 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; } - h /= 360; - - // Convert h s and l values into r g and b values - // Adapted from answer by Mohsen http://stackoverflow.com/a/9493060/4939630 - if(s === 0){ - r = g = b = l; // achromatic - } else { - var hue2rgb = function hue2rgb(p, q, t){ - if(t < 0) t += 1; - if(t > 1) t -= 1; - if(t < 1/6) return p + (q - p) * 6 * t; - if(t < 1/2) return q; - if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - }; - - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - - r = Math.round(r * 255); - g = Math.round(g * 255); - b = Math.round(b * 255); - - // Convert r b and g values to hex - rgb = b | (g << 8) | (r << 16); - return "#" + (0x1000000 | rgb).toString(16).substring(1); - }, + r = Math.round(r * 255); + g = Math.round(g * 255); + b = Math.round(b * 255); + // 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() { - this.parentElement.removeChild(this); + this.parentElement.removeChild(this); }; NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { - for(var i = 0, len = this.length; i < len; i++) { - if(this[i] && this[i].parentElement) { - this[i].parentElement.removeChild(this[i]); - } + for (var i = 0, len = this.length; i < len; i++) { + if (this[i] && this[i].parentElement) { + this[i].parentElement.removeChild(this[i]); } + } }; String.prototype.startsWith = function(searchString, position) { - position = position || 0; - return this.indexOf(searchString, position) === position; + position = position || 0; + return this.indexOf(searchString, position) === position; }; function similarity(s1, s2) { - var longer = s1; - var shorter = s2; - if (s1.length < s2.length) { - longer = s2; - shorter = s1; - } - var longerLength = longer.length; - if (longerLength == 0) { - return 1.0; - } - return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength); + var longer = s1; + var shorter = s2; + if (s1.length < s2.length) { + longer = s2; + shorter = s1; + } + var longerLength = longer.length; + if (longerLength == 0) { + return 1.0; + } + return ( + (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength) + ); } function editDistance(s1, s2) { - s1 = s1.toLowerCase(); - s2 = s2.toLowerCase(); + s1 = s1.toLowerCase(); + s2 = s2.toLowerCase(); - var costs = new Array(); - for (var i = 0; i <= s1.length; i++) { - var lastValue = i; - for (var j = 0; j <= s2.length; j++) { - if (i == 0) - 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), - costs[j]) + 1; - costs[j - 1] = lastValue; - lastValue = newValue; - } - } + var costs = new Array(); + for (var i = 0; i <= s1.length; i++) { + var lastValue = i; + for (var j = 0; j <= s2.length; j++) { + if (i == 0) 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), costs[j]) + 1; + costs[j - 1] = lastValue; + lastValue = newValue; } - if (i > 0) - costs[s2.length] = lastValue; + } } - return costs[s2.length]; + if (i > 0) costs[s2.length] = lastValue; + } + return costs[s2.length]; } diff --git a/server/public/assets/js/hostcontroller.js b/server/public/assets/js/hostcontroller.js index c3d20749..02d5b779 100755 --- a/server/public/assets/js/hostcontroller.js +++ b/server/public/assets/js/hostcontroller.js @@ -1,83 +1,118 @@ var Hostcontroller = { + enabled: true, - enabled: true, + old_id: null, - old_id: null, - - host_listener: function(id) { - if(client) return; - Helper.log([ - "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; - if(embed) { - if(window.parentWindow && 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-link").setAttribute("href", codeURL); - } - if(!began) { - began = true; - setup_host_listener(id); - } - }, - - host_on_action: function(arr) { - if(client) return; - if(Hostcontroller.enabled){ - if(arr.type == "volume") { - try { - Playercontrols.visualVolume(arr.value); - Player.setVolume(arr.value); - if(scUsingWidget) Player.soundcloud_player.setVolume(arr.value); - else Player.soundcloud_player.setVolume(arr.value / 100); - try { - localStorage.setItem("volume", arr.value); - } catch(e){} - Playercontrols.choose_button(arr.value, false); - } catch(e) {} - } else if(arr.type == "channel") { - if(window.location.pathname == "/") return; - socket.emit("change_channel"); - Admin.beginning = true; - - chan = arr.value.toLowerCase(); - Helper.setHtml("#chan", Helper.upperFirst(chan)); - var shareCodeUrl = window.location.protocol + "//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()}); - - window.history.pushState("object or string", "Title", "/"+chan.toLowerCase()); - } else if(arr.type == "pause") { - Player.pauseVideo(); - } else if(arr.type == "play") { - Player.playVideo(); - } else if(arr.type == "skip") { - List.skip(); - } - } - }, - - change_enabled:function(val){ - if(client) return; - Hostcontroller.enabled = val; - try { - document.querySelector(".remote_switch_class").checked = Hostcontroller.enabled; - }catch(e) {} + host_listener: function(id) { + if (client) return; + Helper.log(["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; + if (embed) { + if (window.parentWindow && 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-link").setAttribute("href", codeURL); + } + if (!began) { + began = true; + setup_host_listener(id); + } + }, + + host_on_action: function(arr) { + if (client) return; + if (Hostcontroller.enabled) { + if (arr.type == "volume") { + try { + Playercontrols.visualVolume(arr.value); + Player.setVolume(arr.value); + if (scUsingWidget) Player.soundcloud_player.setVolume(arr.value); + else Player.soundcloud_player.setVolume(arr.value / 100); + try { + localStorage.setItem("volume", arr.value); + } catch (e) {} + Playercontrols.choose_button(arr.value, false); + } catch (e) {} + } else if (arr.type == "channel") { + if (window.location.pathname == "/") return; + socket.emit("change_channel"); + Admin.beginning = true; + + chan = arr.value.toLowerCase(); + Helper.setHtml("#chan", Helper.upperFirst(chan)); + var shareCodeUrl = + window.location.protocol + + "//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() + }); + + window.history.pushState( + "object or string", + "Title", + "/" + chan.toLowerCase() + ); + } else if (arr.type == "pause") { + Player.pauseVideo(); + } else if (arr.type == "play") { + Player.playVideo(); + } else if (arr.type == "skip") { + List.skip(); + } + } + }, + + change_enabled: function(val) { + if (client) return; + Hostcontroller.enabled = val; + try { + document.querySelector(".remote_switch_class").checked = + Hostcontroller.enabled; + } catch (e) {} + } }; diff --git a/server/public/assets/js/mobileremote.js b/server/public/assets/js/mobileremote.js index 92675f4e..39e27498 100755 --- a/server/public/assets/js/mobileremote.js +++ b/server/public/assets/js/mobileremote.js @@ -1,60 +1,89 @@ var Mobile_remote = { - id: "", + id: "", - get_input: function(value) { - if(Mobile_remote.id === "") { - Mobile_remote.set_id(value.toLowerCase()); - } else { - Mobile_remote.set_channel(value.toLowerCase()); - } - }, + get_input: function(value) { + if (Mobile_remote.id === "") { + Mobile_remote.set_id(value.toLowerCase()); + } else { + Mobile_remote.set_channel(value.toLowerCase()); + } + }, - set_id: function(id) { - Mobile_remote.id = id; - document.getElementById("pausebutton_remote").removeAttribute("disabled"); - document.getElementById("skipbutton_remote").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_header").innerText = "Controlling " + id; - Helper.css("#volume-control-remote", "display", "inline-block"); - document.querySelector(".slider-vol-mobile").setAttribute("style", "display: inline-block !important"); - }, + set_id: function(id) { + Mobile_remote.id = id; + document.getElementById("pausebutton_remote").removeAttribute("disabled"); + document + .getElementById("skipbutton_remote") + .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_header").innerText = "Controlling " + id; + Helper.css("#volume-control-remote", "display", "inline-block"); + 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}); - }, + set_channel: function(channel_name) { + socket.emit("id", { + id: Mobile_remote.id, + type: "channel", + value: channel_name + }); + }, - play_remote: function() { - socket.emit("id", {id: Mobile_remote.id, type: "play", value: "mock"}); - }, + play_remote: function() { + socket.emit("id", { id: Mobile_remote.id, type: "play", value: "mock" }); + }, - pause_remote: function() { - socket.emit("id", {id: Mobile_remote.id, type: "pause", value: "mock"}); - }, + pause_remote: function() { + socket.emit("id", { id: Mobile_remote.id, type: "pause", value: "mock" }); + }, - skip_remote: function() { - socket.emit("id", {id: Mobile_remote.id, type: "skip", value: "mock"}); - }, + skip_remote: function() { + socket.emit("id", { id: Mobile_remote.id, type: "skip", value: "mock" }); + }, - initiate_volume: function() { - var vol = 100; - document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "
    "); - document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "
    "); - 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) { - e.preventDefault(); - Playercontrols.dragMouseDown(e); - }, false); - - document.getElementById("volume-control-remote").addEventListener("touchmove", function(e) { - e.preventDefault(); - Playercontrols.elementDrag(e); - }, false); - - - } + initiate_volume: function() { + var vol = 100; + document + .getElementById("volume-control-remote") + .insertAdjacentHTML( + "beforeend", + "
    " + ); + document + .getElementById("volume-control-remote") + .insertAdjacentHTML( + "beforeend", + "
    " + ); + 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) { + e.preventDefault(); + Playercontrols.dragMouseDown(e); + }, + false + ); + document.getElementById("volume-control-remote").addEventListener( + "touchmove", + function(e) { + e.preventDefault(); + Playercontrols.elementDrag(e); + }, + false + ); + } }; diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index 9b76c918..cc5b38bc 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -1,917 +1,1087 @@ var Player = { - loaded: true, - before_load: "", - after_load: "", - player: "", - stopInterval: false, - fireplace: "", - np: {}, - seeking: false, - soundcloud_dead: false, - soundcloud_player: { - setVolume: function(val) {} - }, + loaded: true, + before_load: "", + after_load: "", + player: "", + stopInterval: false, + fireplace: "", + np: {}, + seeking: false, + soundcloud_dead: false, + soundcloud_player: { + setVolume: function(val) {} + }, - now_playing_listener: function(obj) { - if((offline && !local_new_channel) && video_id != undefined) { - return; - } - if(obj.np != undefined) { - Player.np = obj.np[0]; - Player.np.start = obj.np[0].start; - Player.np.end = obj.np[0].end; - Player.np.duration = obj.np[0].duration; - if(Player.np.start == undefined) Player.np.start = 0; - if(Player.np.end == undefined) Player.np.end = Player.np.duration; - song_title = obj.np[0].title; - duration = obj.np[0].duration; - if(embed) { - try { - window.parentWindow.postMessage({type: "np", title: song_title}, window.parentOrigin); - } catch(e) {} - } - if(offline && (video_id == "" || video_id == undefined || local_new_channel) && !client){ - if(obj.conf != undefined) { - conf = obj.conf[0]; - } - time = obj.time; - seekTo = 0 + Player.np.start; - startTime = time - conf.startTime; - videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube"; - Player.getTitle(song_title, viewers); - Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end); - } else { - videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube"; - } - video_id = obj.np[0].id; - } else { - Player.np = { - id: "", - start: 0, - end: 0, - duration: 0, - }; - - document.getElementById('song-title').innerText = "Empty channel. Add some songs!"; - document.title = "Zoff - the shared YouTube based radio"; - Helper.css("#channel-load", "display", "none"); - - if(!window.MSStream && !chromecastAvailable) { - Helper.removeClass("#player_overlay", "hide"); - Helper.addClass("#player", "hide"); - } - try{ - if(!chromecastAvailable) { - Player.stopVideo(); - } - }catch(e){ - - } - } - if(obj.conf != undefined) { - conf = obj.conf[0]; - time = obj.time; - startTime = time - conf.startTime; - } else { - time = 0; - startTime = 0; - } - - // Play video/autoplay video - if(obj.np != undefined && !offline) { - seekTo = (time - conf.startTime) + Player.np.start; - Player.getTitle(song_title, viewers); - Player.setThumbnail(conf, Player.np.id); - if(((embed && autoplay) || !embed) && (!was_stopped || buffering) && !client) { - Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline]) - Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end); - } else if(!client) { - Helper.log(["cueVideoById \nwas_stopped="+was_stopped+"\noffline="+offline]) - Player.cueVideoById(Player.np.id, duration, Player.np.start, Player.np.end); - } - } - local_new_channel = false; - updateChromecastMetadata(); - }, - - setThumbnail: function(conf, video_id) { - if(embed) return; - if(!conf.hasOwnProperty("thumbnail") || conf.thumbnail == "") { - try { - if(videoSource == "soundcloud" && full_playlist != undefined) { - document.getElementById("thumbnail_image").innerHTML = "thumbnail"; - } else { - document.getElementById("thumbnail_image").innerHTML = "thumbnail"; - } - } catch(e) {} - } - }, - - onPlayerStateChange: function(newState) { - Helper.log([ - "onPlayerStateChange", - "New state\nState: ", - newState.data - ]); - if(Player.player && Player.player.getCurrentTime() > startTime + Player.np.start && !fix_too_far && autoplay) { - //Player.seekTo(seekTo); - //Player.playVideo(); - fix_too_far = true; - } + now_playing_listener: function(obj) { + if (offline && !local_new_channel && video_id != undefined) { + return; + } + if (obj.np != undefined) { + Player.np = obj.np[0]; + Player.np.start = obj.np[0].start; + Player.np.end = obj.np[0].end; + Player.np.duration = obj.np[0].duration; + if (Player.np.start == undefined) Player.np.start = 0; + if (Player.np.end == undefined) Player.np.end = Player.np.duration; + song_title = obj.np[0].title; + duration = obj.np[0].duration; + if (embed) { try { - Helper.log(["Duration: " + Player.player.getDuration(), "Current time: " + Player.player.getCurrentTime()]); - Helper.log(["getVideoUrl(): " + Player.player.getVideoUrl().split('v=')[1]]); - } catch(e){} - Helper.log(["video_id variable: " + video_id]); - switch(newState.data) { - case YT.PlayerState.UNSTARTED: - if(small_player) { - Helper.css("#player", "opacity", "1"); - } - break; - case YT.PlayerState.ENDED: - playing = false; - paused = false; - was_stopped = false; - if(!offline) { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); - } else { - Player.playNext(); - } - break; - case YT.PlayerState.PLAYING: - if(embed) Helper.css("#song-title", "display", "block"); - if(videoSource == "soundcloud") { - Player.player.stopVideo(); - //was_stopped = false; - return; - } - Helper.css("#player_overlay", "display", "none"); - if(embed) { - Helper.css("#player", "visibility", "visible"); - } - if(!embed && !client && window.location.pathname != "/") { - if(Helper.mobilecheck()) { - Helper.css("#player", "display", "block"); - Helper.toggleClass(".video-container", "click-through"); - Helper.toggleClass(".page-footer", "padding-bottom-extra"); - } - resizePlaylistPlaying(newState.data == YT.PlayerState.PLAYING || newState.data == YT.PlayerState.BUFFERING, false); - } - if(embed && !autoplay) autoplay = true; - Helper.css("#player", "opacity", "1"); - Helper.css("#channel-load", "display", "none"); - - Helper.addClass("#player", "pointer-events-all-mobile"); - Helper.removeClass("#video-container", "click-through"); - Helper.addClass("#player", "small-display"); - Helper.css("#playpause", "visibility", "visible"); - Helper.css("#playpause", "pointer-events", "all"); - playing = true; - buffering = false; - if(beginning && Helper.mobilecheck() && !chromecastAvailable){ - //Player.pauseVideo(); - beginning = false; - mobile_beginning = false; - - } - if(!embed && window.location.pathname != "/" && !chromecastAvailable) { - Helper.addClass("#player_overlay", "hide"); - Helper.removeClass("#player", "hide"); - } - if(window.location.pathname != "/"){ - if(document.getElementById("play").className.split(" ").length == 1) - Helper.toggleClass("#play", "hide"); - if(document.getElementById("pause").className.split(" ").length == 2) - Helper.toggleClass("#pause", "hide"); - - } - buffering = false; - if((paused || was_stopped) && !offline) { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - socket.emit('pos', {channel: chan.toLowerCase()}); - paused = false; - was_stopped = false; - } - break; - case YT.PlayerState.PAUSED: - if(end_programmatically) { - paused = false; - playing = false; - end_programmatically = false; - } else { - if(!chromecastAvailable){ - was_stopped = true; - if(beginning && mobile_beginning) { - Helper.css("#playpause", "visibility", "visible"); - Helper.css("#playpause", "pointer-events", "all"); - Helper.css("#channel-load", "display", "none"); - } - if(!empty_clear && !gotten_np) { - paused = true; - } - if(gotten_np) gotten_np = false; - if(window.location.pathname != "/") Playercontrols.play_pause_show(); - mobile_beginning = true; - if(!embed && !client && window.location.pathname != "/") { - if(Helper.mobilecheck() && !embed) { - Helper.css("#player", "display", "none"); - Helper.toggleClass(".video-container", "click-through"); - Helper.toggleClass(".page-footer", "padding-bottom-extra"); - } - - resizePlaylistPlaying(newState.data == YT.PlayerState.PLAYING || newState.data == YT.PlayerState.BUFFERING, false); - } - } - } - Helper.removeClass("#player", "pointer-events-all-mobile"); - Helper.addClass("#video-container", "click-through"); - Helper.removeClass("#player", "small-display"); - break; - case YT.PlayerState.BUFFERING: - //was_stopped = false; - buffering = true; - if(small_player || !Helper.mobilecheck()) { - Helper.css("#player", "opacity", "1"); - } - - resizePlaylistPlaying(newState.data == YT.PlayerState.PLAYING || newState.data == YT.PlayerState.BUFFERING, false); - break; + window.parentWindow.postMessage( + { type: "np", title: song_title }, + window.parentOrigin + ); + } catch (e) {} + } + if ( + offline && + (video_id == "" || video_id == undefined || local_new_channel) && + !client + ) { + if (obj.conf != undefined) { + conf = obj.conf[0]; } - }, + time = obj.time; + seekTo = 0 + Player.np.start; + startTime = time - conf.startTime; + videoSource = obj.np[0].hasOwnProperty("source") + ? obj.np[0].source + : "youtube"; + Player.getTitle(song_title, viewers); + Player.loadVideoById( + Player.np.id, + duration, + Player.np.start, + Player.np.end + ); + } else { + videoSource = obj.np[0].hasOwnProperty("source") + ? obj.np[0].source + : "youtube"; + } + video_id = obj.np[0].id; + } else { + Player.np = { + id: "", + start: 0, + end: 0, + duration: 0 + }; - playPauseVideo: function() { - if(chromecastAvailable) { - castSession.sendMessage("urn:x-cast:zoff.me", {type: "playPauseVideo"}); - } - }, + document.getElementById("song-title").innerText = + "Empty channel. Add some songs!"; + document.title = "Zoff - the shared YouTube based radio"; + Helper.css("#channel-load", "display", "none"); - playVideo: function(){ - if(chromecastAvailable){ - castSession.sendMessage("urn:x-cast:zoff.me", {type: "playVideo"}); - //socket.emit('pos', {channel: chan.toLowerCase()}); - chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']}); - //chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg'); - if(document.getElementById("pause").classList.contains("hide")){ - Helper.toggleClass("#play", "hide"); - Helper.toggleClass("#pause", "hide"); - } - //Playercontrols.play_pause(); - } else { - if(videoSource == "soundcloud") { - if(!soundcloud_enabled) { - console.error("SoundCloud isn't enabled, so can't search on SoundCloud.."); - return; - } - Player.soundcloud_player.play(); - //SC.Widget(document.querySelector("#soundcloud_player")).play(); - } else { - Player.player.playVideo(); - } - } - }, - - pauseVideo: function(){ - if(chromecastAvailable){ - castSession.sendMessage("urn:x-cast:zoff.me", {type: "pauseVideo"}); - if(document.getElementById("play").classList.contains("hide")){ - Helper.toggleClass("#play", "hide"); - Helper.toggleClass("#pause", "hide"); - } - //Playercontrols.play_pause(); - } else { - paused = true; - if(videoSource == "soundcloud") { - if(!soundcloud_enabled) { - console.error("SoundCloud isn't enabled, so can't search on SoundCloud.."); - return; - } - Player.soundcloud_player.pause(); - //SC.Widget(document.querySelector("#soundcloud_player")).pause(); - } else { - Player.player.pauseVideo(); - } - } - }, - - seekTo: function(_seekTo){ - if(chromecastAvailable){ - castSession.sendMessage("urn:x-cast:zoff.me", {type: "seekTo", seekTo: _seekTo}); - } else if(!offline){ - Player.player.seekTo(_seekTo); - } else { - Player.player.seekTo(0 + Player.np.start); - } - }, - - loadSoundCloud: function(id, this_duration, start, end, _autoplay) { - if(!soundcloud_enabled) { - console.error("SoundCloud isn't enabled, so can't search on SoundCloud.."); - return; - } - try { - if(SC_player == null) return; - } catch(e) { - return; - } - Player.stopVideo(); - if(_autoplay) was_stopped = false; + if (!window.MSStream && !chromecastAvailable) { Helper.removeClass("#player_overlay", "hide"); Helper.addClass("#player", "hide"); - Helper.css("#player_overlay", "background-color", "#2d2d2d"); - if(start == undefined) start = 0; - if(seekTo == undefined) seekTo = 0; - soundcloud_loading = false; - var _autoAdd = "false"; - try { - if(SC_player == null || !SC_player.stream) return; - } catch(e) { - return; + } + try { + if (!chromecastAvailable) { + Player.stopVideo(); } - if(previousSoundcloud != id || Player.soundcloud_dead) { - previousSoundcloud = id; - if(_autoplay) { - _autoAdd = "true"; - Helper.removeClass("#player_loader_container", "hide"); - } - window.SC_player = SC_player; - SC_player.stream("/tracks/" + id).then(function(player){ - scUsingWidget = false; - Player.soundcloud_player = player; - Player.soundcloud_player.bind("finish", Player.soundcloudFinish); - Player.soundcloud_player.bind("pause", Player.soundcloudPause); - Player.soundcloud_player.bind("play", Player.soundcloudPlay); - Player.soundcloud_player.bind("error", Player.soundcloudError); - window.player = player; - Player.soundcloud_dead = false; - SC_player.get('/tracks', { - ids: id - }).then(function(tracks) { - var sound = tracks[0]; - Helper.removeClass(".soundcloud_info_container", "hide"); - document.querySelector("#soundcloud_listen_link").href = sound.permalink_url; - document.querySelector(".soundcloud_info_container .green").href = sound.user.permalink_url; - //document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url; - }).catch(function(e){}); - if(_autoplay) { - player.play().then(function(){ - Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100); - Player.soundcloud_player.seek((seekTo) * 1000); - }).catch(function(e){}); - } - }).catch(function(error) { - if(error.status == 404) { - Player.errorHandler({data: 5}); - } else { - Player.initializeSCWidget(_autoplay, id); - } - }); - //Player.initializeSCWidget(_autoplay, id); - //Player.initializeSCWidget(_autoplay, id); + } catch (e) {} + } + if (obj.conf != undefined) { + conf = obj.conf[0]; + time = obj.time; + startTime = time - conf.startTime; + } else { + time = 0; + startTime = 0; + } + + // Play video/autoplay video + if (obj.np != undefined && !offline) { + seekTo = time - conf.startTime + Player.np.start; + Player.getTitle(song_title, viewers); + Player.setThumbnail(conf, Player.np.id); + if ( + ((embed && autoplay) || !embed) && + (!was_stopped || buffering) && + !client + ) { + Helper.log([ + "loadVideoById \nwas_stopped=" + was_stopped + "\noffline=" + offline + ]); + Player.loadVideoById( + Player.np.id, + duration, + Player.np.start, + Player.np.end + ); + } else if (!client) { + Helper.log([ + "cueVideoById \nwas_stopped=" + was_stopped + "\noffline=" + offline + ]); + Player.cueVideoById( + Player.np.id, + duration, + Player.np.start, + Player.np.end + ); + } + } + local_new_channel = false; + updateChromecastMetadata(); + }, + + setThumbnail: function(conf, video_id) { + if (embed) return; + if (!conf.hasOwnProperty("thumbnail") || conf.thumbnail == "") { + try { + if (videoSource == "soundcloud" && full_playlist != undefined) { + document.getElementById("thumbnail_image").innerHTML = + "thumbnail"; } else { - try { - Player.soundcloud_player.seek(seekTo * 1000); - } catch(e) {} - try { - if(_autoplay) { - _autoAdd = "true"; - Player.soundcloud_player.play(); - } - } catch(e) {} + document.getElementById("thumbnail_image").innerHTML = + "thumbnail"; } - soundcloud_loading = true; - if(start == undefined) start = 0; - if(seekTo == undefined) seekTo = 0; + } catch (e) {} + } + }, - if(_autoplay) was_stopped = false; - try { - Helper.css("#player_overlay", "background", "url('" + Player.np.thumbnail + "')"); - } catch(e) { - console.error("Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think.."); + onPlayerStateChange: function(newState) { + Helper.log(["onPlayerStateChange", "New state\nState: ", newState.data]); + if ( + Player.player && + Player.player.getCurrentTime() > startTime + Player.np.start && + !fix_too_far && + autoplay + ) { + //Player.seekTo(seekTo); + //Player.playVideo(); + fix_too_far = true; + } + try { + Helper.log([ + "Duration: " + Player.player.getDuration(), + "Current time: " + Player.player.getCurrentTime() + ]); + Helper.log([ + "getVideoUrl(): " + Player.player.getVideoUrl().split("v=")[1] + ]); + } catch (e) {} + Helper.log(["video_id variable: " + video_id]); + switch (newState.data) { + case YT.PlayerState.UNSTARTED: + if (small_player) { + Helper.css("#player", "opacity", "1"); } - - Helper.css("#player_overlay", "background-size", "auto"); - Helper.css("#player_overlay", "background-position", "20%"); - Helper.css("#player_overlay", "background-color", "#2d2d2d"); - Helper.addClass("#player_overlay_text", "hide"); - }, - - initializeSCWidget: function(_autoplay, id) { - try { - Player.soundcloud_player.unbind("finish", Player.soundcloudFinish); - Player.soundcloud_player.unbind("pause", Player.soundcloudPause); - Player.soundcloud_player.unbind("play", Player.soundcloudPlay); - Player.soundcloud_player.unbind("error", Player.soundcloudError); - //Player.soundcloud_player.unbind("seek", Player.soundcloudSeek); - }catch(e){} - var this_autoplay = ""; - scUsingWidget = true; - if(_autoplay) this_autoplay = "?auto_play=true"; - if(document.querySelectorAll("#scplayerElement").length == 0) { - var single = "single_active=false"; - if(_autoplay) single = "&"+single; - else single = "?"+single; - document.querySelector("#sc_player").innerHTML = ''; - Player.addSCWidgetElements(); - } else { - Player.soundcloud_player.bind("finish", Player.soundcloudFinish); - Player.soundcloud_player.bind("pause", Player.soundcloudPause); - Player.soundcloud_player.bind("play", Player.soundcloudPlay); - Player.soundcloud_player.bind("error", Player.soundcloudError); - Player.soundcloud_player.load('https://api.soundcloud.com/tracks/' + id + this_autoplay, {single_active: false}); - } - }, - - soundcloudError: function() { - Player.errorHandler({data: 5}); - }, - - addSCWidgetElements: function() { - try { - Player.soundcloud_player = SC_widget.Widget(document.querySelector("#scplayerElement")); - Player.soundcloud_player.seek = Player.soundcloud_player.seekTo; - Player.soundcloud_player.bind("finish", Player.soundcloudFinish); - Player.soundcloud_player.bind("pause", Player.soundcloudPause); - Player.soundcloud_player.bind("play", Player.soundcloudPlay); - Player.soundcloud_player.bind("error", Player.soundcloudError); - - SC_player.get('/tracks', { - ids: id - }).then(function(tracks) { - var sound = tracks[0]; - Helper.removeClass(".soundcloud_info_container", "hide"); - document.querySelector("#soundcloud_listen_link").href = sound.permalink_url; - document.querySelector(".soundcloud_info_container .green").href = sound.user.permalink_url; - //document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url; - }).catch(function(e){ - }); - } catch(e) { - setTimeout(function() { - Player.addSCWidgetElements(); - }, 500); - } - }, - - loadVideoById: function(id, this_duration, start, end){ - if(id == undefined) return; - var s; - var e; - if(start) s = start; - else s = Player.np.start; - if(end) e = end; - else e = Player.np.end; - if(!embed) { - Suggestions.fetchYoutubeSuggests(id); - } - if(chromecastAvailable){ - //castSession.sendMessage("urn:x-cast:zoff.me", {start: s, end: e, type: "loadVideo", videoId: id, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail, title: Player.np.title}); - loadChromecastVideo(); - chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+id+'/mqdefault.jpg']}); - chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg'); - } else { - if(!durationBegun) { - durationBegun = true; - Player.durationSetter(); - } - if(videoSource == "soundcloud") { - try { - Player.player.stopVideo(); - } catch(e) { - } - - was_stopped = false; - Player.loadSoundCloud(id, this_duration, start, end, true); - //SC.Widget(Player.soundcloud_player).play(); - } else { - //window.player = Player.player; - try { - Player.soundcloud_player.pause(); - } catch(e) { - } - Helper.addClass(".soundcloud_info_container", "hide"); - Helper.addClass("#player_overlay", "hide"); - Helper.removeClass("#player", "hide"); - Helper.css("#player_overlay", "background", "none"); - Helper.addClass("#player_overlay_text", "hide"); - Helper.addClass("#player_overlay", "hide"); - Helper.css("#player_overlay", "display", "none !important"); - if(embed) { - Helper.css("#player", "visibility", "visible"); - } - try { - if(Player.player.getVideoUrl().indexOf(id) > -1) { - Player.player.seekTo(seekTo); - } else { - Player.player.loadVideoById({'videoId': id, 'startSeconds': seekTo, 'endSeconds': e}); - } - } catch(e) { - } - } - } - if(offline && !embed) { - var url = 'https://img.youtube.com/vi/'+id+'/mqdefault.jpg'; - if(videoSource == "soundcloud") url = Player.np.thumbnail; - getColor(url); - } - }, - - cueVideoById: function(id, this_duration, start, end){ - var s; - var e; - if(start) s = start; - else s = Player.np.start; - if(end) e = end; - else e = Player.np.end; - if(!embed) { - Suggestions.fetchYoutubeSuggests(id); - } - if(!durationBegun) { - durationBegun = true; - Player.durationSetter(); - } - was_stopped = true; - Helper.addClass("#pause", "hide"); - Helper.removeClass("#play", "hide"); - if(videoSource == "soundcloud") { - try { - Player.player.stopVideo(); - } catch(e) { - } - Player.loadSoundCloud(id, this_duration, start, end, false); - //SC.Widget(Player.soundcloud_player).play(); - - } else { - try { - Player.soundcloud_player.pause(); - } catch(e) { - } - Helper.addClass("#player_overlay", "hide"); - Helper.css("#player_overlay", "background", "none"); - Helper.addClass("#player_overlay_text", "hide"); - Helper.addClass("#player_overlay", "hide"); - Helper.removeClass("#player", "hide"); - try { - Player.player.cueVideoById({'videoId': id, 'startSeconds': s, 'endSeconds': e}); - } catch(e) { - } - } - }, - - stopVideo: function(){ - if(chromecastAvailable){ - castSession.sendMessage("urn:x-cast:zoff.me", {type: "stopVideo"}); - } else { - try{ - if(videoSource == "soundcloud") { - Player.soundcloud_player.pause(); - } else { - Player.player.stopVideo(); - } - } catch(e){} - } - }, - - setVolume: function(vol){ - if(chromecastAvailable){ - castSession.setVolume(vol/100); - } else { - Player.player.setVolume(vol); - if(scUsingWidget) Player.soundcloud_player.setVolume(vol); - else Player.soundcloud_player.setVolume(vol / 100); - } - }, - - playNext: function(){ - if(full_playlist == undefined || full_playlist.length == 0) return; - var next_song = full_playlist[0]; - var prev_id = Player.np.id; - video_id = next_song.id; - time = (new Date()).getTime(); - song_title = next_song.title; - duration = next_song.duration; - videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube"; - var start; - var end; - if(next_song.hasOwnProperty("start")) start = next_song.start; - else start = 0; - if(next_song.hasOwnProperty("end")) end = next_song.end; - else end = duration; - Player.np = next_song; - Player.np.start = start; - Player.np.end = end; - //seekTo = 0; - Player.np.duration = duration; - - - Player.getTitle(song_title, viewers); - seekTo = start; - //Player.setBGimage(video_id); - if(chromecastAvailable){ - loadChromecastVideo(); - //castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", videoId: video_id, channel: chan.toLowerCase(), start: start, end:end, source: videoSource}); - chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']}); - chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg'); - } else { - - Player.loadVideoById(video_id, duration, start, end); - } - List.channel_function({type:"song_change", time: time, offline_change: true, id: prev_id}); - }, - - playPrev: function() { - if(full_playlist == undefined) return; - var length = full_playlist.length - 2; - if(length < 0) { - length = 0; - } else if(length == 0) return; - var next_song = full_playlist[length]; - video_id = next_song.id; - time = (new Date()).getTime(); - song_title = next_song.title; - duration = next_song.duration; - videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube"; - var start; - var end; - if(next_song.hasOwnProperty("start")) start = next_song.start; - else start = 0; - if(next_song.hasOwnProperty("end")) end = next_song.end; - else end = duration; - - Player.np = next_song; - Player.np.start = start; - Player.np.end = end; - Player.np.duration = duration; - seekTo = start; - Player.getTitle(song_title, viewers); - //Player.setBGimage(video_id); - - if(chromecastAvailable){ - loadChromecastVideo(); - //castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", videoId: video_id, channel: chan.toLowerCase(), start: start, end: end, source: videoSource}); - chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']}); - chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg'); - } else { - Player.loadVideoById(video_id, duration, start, end); - } - - List.channel_function({type:"song_change_prev", time: time, offline_change: true}); - }, - - sendNext: function(obj){ - if(chromecastAvailable){ - castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", title: obj.title, videoId: obj.videoId, source: obj.source, thumbnail: obj.thumbnail}); - } - - if(embed) { - if(window.parentWindow && window.parentOrigin) { - window.parentWindow.postMessage({type: "nextVideo", title: obj.title}, window.parentOrigin); - } - } - }, - - getTitle: function(titt, v) { - var outPutWord = "visibility"//v > 1 ? "viewers" : "viewer"; - var title; - try { - title = decodeURIComponent(titt); - } catch(e) { - title = titt; - } - if(window.location.pathname != "/"){ - //var elem = document.getElementById('song-title'); - //var getTitleViews = document.getElementById('viewers'); - - if(!client && !embed) { - document.getElementById("host-title").innerText = title; - } - if(title != "") { - document.getElementById("song-title").innerText = title; - } - if(!client) document.getElementById("viewers").innerHTML = outPutWord + " " + v; - document.getElementById("song-title").setAttribute("title", title); - //elem.title = title; - if(chromecastAvailable){ - try { - Helper.css("#player_overlay", "background", "url(" + Player.np.thumbnail + ")"); - - } catch(e) { - Helper.css("#player_overlay", "background", "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)"); - } - Helper.css("#player_overlay", "background-position", "center"); - Helper.css("#player_overlay", "background-size", "100%"); - Helper.css("#player_overlay", "background-color", "black"); - Helper.css("#player_overlay", "background-repeat", "no-repeat"); - //$("#player_overlay").css("height", "calc(100% - 32px)"); - } - } - document.title = title + " • Zoff / "+chan; - - }, - - errorHandler: function(newState) { - if(!user_auth_started) { - if(newState.data == 5 || newState.data == 100 || newState.data == 101 || newState.data == 150) { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - emit("skip", {error: newState.data, id: video_id, channel: chan.toLowerCase()}); - - } else if(video_id !== undefined) { - Player.loadVideoById(video_id, duration); - } - } - }, - - soundcloudFinish: function() { + break; + case YT.PlayerState.ENDED: playing = false; - paused = false; - end_programmatically = true; - if(!offline) { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); + paused = false; + was_stopped = false; + if (!offline) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit("end", { id: video_id, channel: chan.toLowerCase() }); } else { - Player.playNext(); + Player.playNext(); } - }, + break; + case YT.PlayerState.PLAYING: + if (embed) Helper.css("#song-title", "display", "block"); + if (videoSource == "soundcloud") { + Player.player.stopVideo(); + //was_stopped = false; + return; + } + Helper.css("#player_overlay", "display", "none"); + if (embed) { + Helper.css("#player", "visibility", "visible"); + } + if (!embed && !client && window.location.pathname != "/") { + if (Helper.mobilecheck()) { + Helper.css("#player", "display", "block"); + Helper.toggleClass(".video-container", "click-through"); + Helper.toggleClass(".page-footer", "padding-bottom-extra"); + } + resizePlaylistPlaying( + newState.data == YT.PlayerState.PLAYING || + newState.data == YT.PlayerState.BUFFERING, + false + ); + } + if (embed && !autoplay) autoplay = true; + Helper.css("#player", "opacity", "1"); + Helper.css("#channel-load", "display", "none"); - soundcloudPause: function() { - if(end_programmatically) { - paused = false; - playing = false; - end_programmatically = false; - } else { - if(!scUsingWidget) was_stopped = true; - if(!embed && !client && window.location.pathname != "/") { - var scPlaying = false; - if(scUsingWidget) { - Player.soundcloud_player.isPaused(function(paused) { - scPlaying = !paused; - try { - resizePlaylistPlaying(Player.player.getPlayerState() == YT.PlayerState.PLAYING || scPlaying || Player.player.getPlayerState() == YT.PlayerState.BUFFERING, false); - } catch(e) { - resizePlaylistPlaying(scPlaying, false); - } - }); - } else { - try { - scPlaying = Player.soundcloud_player.isPlaying(); - } catch(e){} - try { - resizePlaylistPlaying(Player.player.getPlayerState() == YT.PlayerState.PLAYING || scPlaying || Player.player.getPlayerState() == YT.PlayerState.BUFFERING, false); - } catch(e) { - resizePlaylistPlaying(scPlaying, false); - } - } - } - if(!chromecastAvailable){ - if(Helper.mobilecheck()) { - Helper.css("#playpause", "visibility", "visible"); - Helper.css("#playpause", "pointer-events", "all"); - Helper.css("#channel-load", "display", "none"); - } - if(!empty_clear && !gotten_np) { - paused = true; - } - if(gotten_np) gotten_np = false; - if(window.location.pathname != "/") Playercontrols.play_pause_show(); - mobile_beginning = true; - Helper.addClass("#player_overlay", "small-display-hide"); - } - Helper.removeClass("#play", "hide"); - Helper.addClass("#pause", "hide"); - } - }, - - soundcloudPlay: function() { - Helper.addClass("#player_loader_container", "hide"); - Helper.css("#player_overlay", "display", "block"); - Helper.addClass("#player", "hide"); - //if(embed) Helper.css("#song-title", "display", "block"); - if(videoSource == "youtube") { - Player.soundcloud_player.pause(); - } else if(soundcloud_loading){ - if(scUsingWidget) { - Player.soundcloud_player.getPosition(function(pos) { - Player.seeking = true; - Player.soundcloud_player.seek((seekTo) * 1000); - Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume()); - soundcloud_loading = false; - }) - } else { - Player.seeking = true; - Player.soundcloud_player.seek((seekTo) * 1000); - Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100); - soundcloud_loading = false; - } - } - if(embed) { - Helper.css("#player", "visibility", "visible"); - } - if(embed && !autoplay) autoplay = true; - if(!window.MSStream) { - Helper.css("#player", "opacity", "1"); - //if(!Helper.mobilecheck()) { - Helper.css("#channel-load", "display", "none"); - - //} - } - if(!embed && !client && window.location.pathname != "/") { - var scPlaying = false; - if(scUsingWidget) { - Player.soundcloud_player.isPaused(function(paused) { - scPlaying = !paused; - resizePlaylistPlaying(scPlaying, false); - }); - } else { - try { - scPlaying = Player.soundcloud_player.isPlaying(); - } catch(e){} - resizePlaylistPlaying(scPlaying, false); - } - } - Helper.removeClass("#player_overlay", "small-display-hide"); + Helper.addClass("#player", "pointer-events-all-mobile"); + Helper.removeClass("#video-container", "click-through"); + Helper.addClass("#player", "small-display"); Helper.css("#playpause", "visibility", "visible"); Helper.css("#playpause", "pointer-events", "all"); playing = true; - if(beginning && Helper.mobilecheck() && !chromecastAvailable){ - //Player.pauseVideo(); - beginning = false; - mobile_beginning = false; - + buffering = false; + if (beginning && Helper.mobilecheck() && !chromecastAvailable) { + //Player.pauseVideo(); + beginning = false; + mobile_beginning = false; } - //if(!embed && window.location.pathname != "/" && !chromecastAvailable) Helper.addClass("#player_overlay", "hide"); - if(window.location.pathname != "/"){ - Helper.addClass("#play", "hide"); - Helper.removeClass("#pause", "hide"); + if (!embed && window.location.pathname != "/" && !chromecastAvailable) { + Helper.addClass("#player_overlay", "hide"); + Helper.removeClass("#player", "hide"); } - if((was_stopped) && !offline) { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - paused = false; - was_stopped = false; - - socket.emit('pos', {channel: chan.toLowerCase()}); + if (window.location.pathname != "/") { + if (document.getElementById("play").className.split(" ").length == 1) + Helper.toggleClass("#play", "hide"); + if (document.getElementById("pause").className.split(" ").length == 2) + Helper.toggleClass("#pause", "hide"); + } + buffering = false; + if ((paused || was_stopped) && !offline) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit("pos", { channel: chan.toLowerCase() }); + paused = false; + was_stopped = false; + } + break; + case YT.PlayerState.PAUSED: + if (end_programmatically) { + paused = false; + playing = false; + end_programmatically = false; } else { - paused = false; - was_stopped = false; + if (!chromecastAvailable) { + was_stopped = true; + if (beginning && mobile_beginning) { + Helper.css("#playpause", "visibility", "visible"); + Helper.css("#playpause", "pointer-events", "all"); + Helper.css("#channel-load", "display", "none"); + } + if (!empty_clear && !gotten_np) { + paused = true; + } + if (gotten_np) gotten_np = false; + if (window.location.pathname != "/") + Playercontrols.play_pause_show(); + mobile_beginning = true; + if (!embed && !client && window.location.pathname != "/") { + if (Helper.mobilecheck() && !embed) { + Helper.css("#player", "display", "none"); + Helper.toggleClass(".video-container", "click-through"); + Helper.toggleClass(".page-footer", "padding-bottom-extra"); + } + + resizePlaylistPlaying( + newState.data == YT.PlayerState.PLAYING || + newState.data == YT.PlayerState.BUFFERING, + false + ); + } + } + } + Helper.removeClass("#player", "pointer-events-all-mobile"); + Helper.addClass("#video-container", "click-through"); + Helper.removeClass("#player", "small-display"); + break; + case YT.PlayerState.BUFFERING: + //was_stopped = false; + buffering = true; + if (small_player || !Helper.mobilecheck()) { + Helper.css("#player", "opacity", "1"); } - }, + resizePlaylistPlaying( + newState.data == YT.PlayerState.PLAYING || + newState.data == YT.PlayerState.BUFFERING, + false + ); + break; + } + }, - soundcloudReady: function() { - if(SC_player == undefined && sc_need_initialization) { - sc_need_initialization = true; - return; - } else if(client) return; - sc_need_initialization = false; - beginning = true; - player_ready = true; - if(!durationBegun) { - Player.durationSetter(); + playPauseVideo: function() { + if (chromecastAvailable) { + castSession.sendMessage("urn:x-cast:zoff.me", { type: "playPauseVideo" }); + } + }, + + playVideo: function() { + if (chromecastAvailable) { + castSession.sendMessage("urn:x-cast:zoff.me", { type: "playVideo" }); + //socket.emit('pos', {channel: chan.toLowerCase()}); + chrome.cast.media.GenericMediaMetadata({ + metadataType: 0, + title: song_title, + image: "https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg", + images: ["https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg"] + }); + //chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg'); + if (document.getElementById("pause").classList.contains("hide")) { + Helper.toggleClass("#play", "hide"); + Helper.toggleClass("#pause", "hide"); + } + //Playercontrols.play_pause(); + } else { + if (videoSource == "soundcloud") { + if (!soundcloud_enabled) { + console.error( + "SoundCloud isn't enabled, so can't search on SoundCloud.." + ); + return; } - if(videoSource == "soundcloud" && video_id != undefined) Player.loadVideoById(video_id, Player.np.duration, Player.np.start, Player.np.end); - }, + Player.soundcloud_player.play(); + //SC.Widget(document.querySelector("#soundcloud_player")).play(); + } else { + Player.player.playVideo(); + } + } + }, - onPlayerReady: function(event) { - try{ - beginning = true; - player_ready = true; - //if(!window.MSStream) { - if(Helper.mobilecheck()){ - /*Helper.css("#playpause", "visibility", "hidden"); + pauseVideo: function() { + if (chromecastAvailable) { + castSession.sendMessage("urn:x-cast:zoff.me", { type: "pauseVideo" }); + if (document.getElementById("play").classList.contains("hide")) { + Helper.toggleClass("#play", "hide"); + Helper.toggleClass("#pause", "hide"); + } + //Playercontrols.play_pause(); + } else { + paused = true; + if (videoSource == "soundcloud") { + if (!soundcloud_enabled) { + console.error( + "SoundCloud isn't enabled, so can't search on SoundCloud.." + ); + return; + } + Player.soundcloud_player.pause(); + //SC.Widget(document.querySelector("#soundcloud_player")).pause(); + } else { + Player.player.pauseVideo(); + } + } + }, + + seekTo: function(_seekTo) { + if (chromecastAvailable) { + castSession.sendMessage("urn:x-cast:zoff.me", { + type: "seekTo", + seekTo: _seekTo + }); + } else if (!offline) { + Player.player.seekTo(_seekTo); + } else { + Player.player.seekTo(0 + Player.np.start); + } + }, + + loadSoundCloud: function(id, this_duration, start, end, _autoplay) { + if (!soundcloud_enabled) { + console.error( + "SoundCloud isn't enabled, so can't search on SoundCloud.." + ); + return; + } + try { + if (SC_player == null) return; + } catch (e) { + return; + } + Player.stopVideo(); + if (_autoplay) was_stopped = false; + Helper.removeClass("#player_overlay", "hide"); + Helper.addClass("#player", "hide"); + Helper.css("#player_overlay", "background-color", "#2d2d2d"); + if (start == undefined) start = 0; + if (seekTo == undefined) seekTo = 0; + soundcloud_loading = false; + var _autoAdd = "false"; + try { + if (SC_player == null || !SC_player.stream) return; + } catch (e) { + return; + } + if (previousSoundcloud != id || Player.soundcloud_dead) { + previousSoundcloud = id; + if (_autoplay) { + _autoAdd = "true"; + Helper.removeClass("#player_loader_container", "hide"); + } + window.SC_player = SC_player; + SC_player.stream("/tracks/" + id) + .then(function(player) { + scUsingWidget = false; + Player.soundcloud_player = player; + Player.soundcloud_player.bind("finish", Player.soundcloudFinish); + Player.soundcloud_player.bind("pause", Player.soundcloudPause); + Player.soundcloud_player.bind("play", Player.soundcloudPlay); + Player.soundcloud_player.bind("error", Player.soundcloudError); + window.player = player; + Player.soundcloud_dead = false; + SC_player.get("/tracks", { + ids: id + }) + .then(function(tracks) { + var sound = tracks[0]; + Helper.removeClass(".soundcloud_info_container", "hide"); + document.querySelector("#soundcloud_listen_link").href = + sound.permalink_url; + document.querySelector(".soundcloud_info_container .green").href = + sound.user.permalink_url; + //document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url; + }) + .catch(function(e) {}); + if (_autoplay) { + player + .play() + .then(function() { + Player.soundcloud_player.setVolume( + embed ? 1 : Crypt.get_volume() / 100 + ); + Player.soundcloud_player.seek(seekTo * 1000); + }) + .catch(function(e) {}); + } + }) + .catch(function(error) { + if (error.status == 404) { + Player.errorHandler({ data: 5 }); + } else { + Player.initializeSCWidget(_autoplay, id); + } + }); + //Player.initializeSCWidget(_autoplay, id); + //Player.initializeSCWidget(_autoplay, id); + } else { + try { + Player.soundcloud_player.seek(seekTo * 1000); + } catch (e) {} + try { + if (_autoplay) { + _autoAdd = "true"; + Player.soundcloud_player.play(); + } + } catch (e) {} + } + soundcloud_loading = true; + if (start == undefined) start = 0; + if (seekTo == undefined) seekTo = 0; + + if (_autoplay) was_stopped = false; + try { + Helper.css( + "#player_overlay", + "background", + "url('" + Player.np.thumbnail + "')" + ); + } catch (e) { + console.error( + "Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think.." + ); + } + + Helper.css("#player_overlay", "background-size", "auto"); + Helper.css("#player_overlay", "background-position", "20%"); + Helper.css("#player_overlay", "background-color", "#2d2d2d"); + Helper.addClass("#player_overlay_text", "hide"); + }, + + initializeSCWidget: function(_autoplay, id) { + try { + Player.soundcloud_player.unbind("finish", Player.soundcloudFinish); + Player.soundcloud_player.unbind("pause", Player.soundcloudPause); + Player.soundcloud_player.unbind("play", Player.soundcloudPlay); + Player.soundcloud_player.unbind("error", Player.soundcloudError); + //Player.soundcloud_player.unbind("seek", Player.soundcloudSeek); + } catch (e) {} + var this_autoplay = ""; + scUsingWidget = true; + if (_autoplay) this_autoplay = "?auto_play=true"; + if (document.querySelectorAll("#scplayerElement").length == 0) { + var single = "single_active=false"; + if (_autoplay) single = "&" + single; + else single = "?" + single; + document.querySelector("#sc_player").innerHTML = + ''; + Player.addSCWidgetElements(); + } else { + Player.soundcloud_player.bind("finish", Player.soundcloudFinish); + Player.soundcloud_player.bind("pause", Player.soundcloudPause); + Player.soundcloud_player.bind("play", Player.soundcloudPlay); + Player.soundcloud_player.bind("error", Player.soundcloudError); + Player.soundcloud_player.load( + "https://api.soundcloud.com/tracks/" + id + this_autoplay, + { single_active: false } + ); + } + }, + + soundcloudError: function() { + Player.errorHandler({ data: 5 }); + }, + + addSCWidgetElements: function() { + try { + Player.soundcloud_player = SC_widget.Widget( + document.querySelector("#scplayerElement") + ); + Player.soundcloud_player.seek = Player.soundcloud_player.seekTo; + Player.soundcloud_player.bind("finish", Player.soundcloudFinish); + Player.soundcloud_player.bind("pause", Player.soundcloudPause); + Player.soundcloud_player.bind("play", Player.soundcloudPlay); + Player.soundcloud_player.bind("error", Player.soundcloudError); + + SC_player.get("/tracks", { + ids: id + }) + .then(function(tracks) { + var sound = tracks[0]; + Helper.removeClass(".soundcloud_info_container", "hide"); + document.querySelector("#soundcloud_listen_link").href = + sound.permalink_url; + document.querySelector(".soundcloud_info_container .green").href = + sound.user.permalink_url; + //document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url; + }) + .catch(function(e) {}); + } catch (e) { + setTimeout(function() { + Player.addSCWidgetElements(); + }, 500); + } + }, + + loadVideoById: function(id, this_duration, start, end) { + if (id == undefined) return; + var s; + var e; + if (start) s = start; + else s = Player.np.start; + if (end) e = end; + else e = Player.np.end; + if (!embed) { + Suggestions.fetchYoutubeSuggests(id); + } + if (chromecastAvailable) { + //castSession.sendMessage("urn:x-cast:zoff.me", {start: s, end: e, type: "loadVideo", videoId: id, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail, title: Player.np.title}); + loadChromecastVideo(); + chrome.cast.media.GenericMediaMetadata({ + metadataType: 0, + title: song_title, + image: "https://img.youtube.com/vi/" + id + "/mqdefault.jpg", + images: ["https://img.youtube.com/vi/" + id + "/mqdefault.jpg"] + }); + chrome.cast.Image("https://img.youtube.com/vi/" + id + "/mqdefault.jpg"); + } else { + if (!durationBegun) { + durationBegun = true; + Player.durationSetter(); + } + if (videoSource == "soundcloud") { + try { + Player.player.stopVideo(); + } catch (e) {} + + was_stopped = false; + Player.loadSoundCloud(id, this_duration, start, end, true); + //SC.Widget(Player.soundcloud_player).play(); + } else { + //window.player = Player.player; + try { + Player.soundcloud_player.pause(); + } catch (e) {} + Helper.addClass(".soundcloud_info_container", "hide"); + Helper.addClass("#player_overlay", "hide"); + Helper.removeClass("#player", "hide"); + Helper.css("#player_overlay", "background", "none"); + Helper.addClass("#player_overlay_text", "hide"); + Helper.addClass("#player_overlay", "hide"); + Helper.css("#player_overlay", "display", "none !important"); + if (embed) { + Helper.css("#player", "visibility", "visible"); + } + try { + if (Player.player.getVideoUrl().indexOf(id) > -1) { + Player.player.seekTo(seekTo); + } else { + Player.player.loadVideoById({ + videoId: id, + startSeconds: seekTo, + endSeconds: e + }); + } + } catch (e) {} + } + } + if (offline && !embed) { + var url = "https://img.youtube.com/vi/" + id + "/mqdefault.jpg"; + if (videoSource == "soundcloud") url = Player.np.thumbnail; + getColor(url); + } + }, + + cueVideoById: function(id, this_duration, start, end) { + var s; + var e; + if (start) s = start; + else s = Player.np.start; + if (end) e = end; + else e = Player.np.end; + if (!embed) { + Suggestions.fetchYoutubeSuggests(id); + } + if (!durationBegun) { + durationBegun = true; + Player.durationSetter(); + } + was_stopped = true; + Helper.addClass("#pause", "hide"); + Helper.removeClass("#play", "hide"); + if (videoSource == "soundcloud") { + try { + Player.player.stopVideo(); + } catch (e) {} + Player.loadSoundCloud(id, this_duration, start, end, false); + //SC.Widget(Player.soundcloud_player).play(); + } else { + try { + Player.soundcloud_player.pause(); + } catch (e) {} + Helper.addClass("#player_overlay", "hide"); + Helper.css("#player_overlay", "background", "none"); + Helper.addClass("#player_overlay_text", "hide"); + Helper.addClass("#player_overlay", "hide"); + Helper.removeClass("#player", "hide"); + try { + Player.player.cueVideoById({ + videoId: id, + startSeconds: s, + endSeconds: e + }); + } catch (e) {} + } + }, + + stopVideo: function() { + if (chromecastAvailable) { + castSession.sendMessage("urn:x-cast:zoff.me", { type: "stopVideo" }); + } else { + try { + if (videoSource == "soundcloud") { + Player.soundcloud_player.pause(); + } else { + Player.player.stopVideo(); + } + } catch (e) {} + } + }, + + setVolume: function(vol) { + if (chromecastAvailable) { + castSession.setVolume(vol / 100); + } else { + Player.player.setVolume(vol); + if (scUsingWidget) Player.soundcloud_player.setVolume(vol); + else Player.soundcloud_player.setVolume(vol / 100); + } + }, + + playNext: function() { + if (full_playlist == undefined || full_playlist.length == 0) return; + var next_song = full_playlist[0]; + var prev_id = Player.np.id; + video_id = next_song.id; + time = new Date().getTime(); + song_title = next_song.title; + duration = next_song.duration; + videoSource = next_song.hasOwnProperty("source") + ? next_song.source + : "youtube"; + var start; + var end; + if (next_song.hasOwnProperty("start")) start = next_song.start; + else start = 0; + if (next_song.hasOwnProperty("end")) end = next_song.end; + else end = duration; + Player.np = next_song; + Player.np.start = start; + Player.np.end = end; + //seekTo = 0; + Player.np.duration = duration; + + Player.getTitle(song_title, viewers); + seekTo = start; + //Player.setBGimage(video_id); + if (chromecastAvailable) { + loadChromecastVideo(); + //castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", videoId: video_id, channel: chan.toLowerCase(), start: start, end:end, source: videoSource}); + chrome.cast.media.GenericMediaMetadata({ + metadataType: 0, + title: song_title, + image: "https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg", + images: ["https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg"] + }); + chrome.cast.Image( + "https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg" + ); + } else { + Player.loadVideoById(video_id, duration, start, end); + } + List.channel_function({ + type: "song_change", + time: time, + offline_change: true, + id: prev_id + }); + }, + + playPrev: function() { + if (full_playlist == undefined) return; + var length = full_playlist.length - 2; + if (length < 0) { + length = 0; + } else if (length == 0) return; + var next_song = full_playlist[length]; + video_id = next_song.id; + time = new Date().getTime(); + song_title = next_song.title; + duration = next_song.duration; + videoSource = next_song.hasOwnProperty("source") + ? next_song.source + : "youtube"; + var start; + var end; + if (next_song.hasOwnProperty("start")) start = next_song.start; + else start = 0; + if (next_song.hasOwnProperty("end")) end = next_song.end; + else end = duration; + + Player.np = next_song; + Player.np.start = start; + Player.np.end = end; + Player.np.duration = duration; + seekTo = start; + Player.getTitle(song_title, viewers); + //Player.setBGimage(video_id); + + if (chromecastAvailable) { + loadChromecastVideo(); + //castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", videoId: video_id, channel: chan.toLowerCase(), start: start, end: end, source: videoSource}); + chrome.cast.media.GenericMediaMetadata({ + metadataType: 0, + title: song_title, + image: "https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg", + images: ["https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg"] + }); + chrome.cast.Image( + "https://img.youtube.com/vi/" + video_id + "/mqdefault.jpg" + ); + } else { + Player.loadVideoById(video_id, duration, start, end); + } + + List.channel_function({ + type: "song_change_prev", + time: time, + offline_change: true + }); + }, + + sendNext: function(obj) { + if (chromecastAvailable) { + castSession.sendMessage("urn:x-cast:zoff.me", { + type: "nextVideo", + title: obj.title, + videoId: obj.videoId, + source: obj.source, + thumbnail: obj.thumbnail + }); + } + + if (embed) { + if (window.parentWindow && window.parentOrigin) { + window.parentWindow.postMessage( + { type: "nextVideo", title: obj.title }, + window.parentOrigin + ); + } + } + }, + + getTitle: function(titt, v) { + var outPutWord = "visibility"; //v > 1 ? "viewers" : "viewer"; + var title; + try { + title = decodeURIComponent(titt); + } catch (e) { + title = titt; + } + if (window.location.pathname != "/") { + //var elem = document.getElementById('song-title'); + //var getTitleViews = document.getElementById('viewers'); + + if (!client && !embed) { + document.getElementById("host-title").innerText = title; + } + if (title != "") { + document.getElementById("song-title").innerText = title; + } + if (!client) + document.getElementById("viewers").innerHTML = outPutWord + " " + v; + document.getElementById("song-title").setAttribute("title", title); + //elem.title = title; + if (chromecastAvailable) { + try { + Helper.css( + "#player_overlay", + "background", + "url(" + Player.np.thumbnail + ")" + ); + } catch (e) { + Helper.css( + "#player_overlay", + "background", + "url(https://img.youtube.com/vi/" + video_id + "/hqdefault.jpg)" + ); + } + Helper.css("#player_overlay", "background-position", "center"); + Helper.css("#player_overlay", "background-size", "100%"); + Helper.css("#player_overlay", "background-color", "black"); + Helper.css("#player_overlay", "background-repeat", "no-repeat"); + //$("#player_overlay").css("height", "calc(100% - 32px)"); + } + } + document.title = title + " • Zoff / " + chan; + }, + + errorHandler: function(newState) { + if (!user_auth_started) { + if ( + newState.data == 5 || + newState.data == 100 || + newState.data == 101 || + newState.data == 150 + ) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + emit("skip", { + error: newState.data, + id: video_id, + channel: chan.toLowerCase() + }); + } else if (video_id !== undefined) { + Player.loadVideoById(video_id, duration); + } + } + }, + + soundcloudFinish: function() { + playing = false; + paused = false; + end_programmatically = true; + if (!offline) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + socket.emit("end", { id: video_id, channel: chan.toLowerCase() }); + } else { + Player.playNext(); + } + }, + + soundcloudPause: function() { + if (end_programmatically) { + paused = false; + playing = false; + end_programmatically = false; + } else { + if (!scUsingWidget) was_stopped = true; + if (!embed && !client && window.location.pathname != "/") { + var scPlaying = false; + if (scUsingWidget) { + Player.soundcloud_player.isPaused(function(paused) { + scPlaying = !paused; + try { + resizePlaylistPlaying( + Player.player.getPlayerState() == YT.PlayerState.PLAYING || + scPlaying || + Player.player.getPlayerState() == YT.PlayerState.BUFFERING, + false + ); + } catch (e) { + resizePlaylistPlaying(scPlaying, false); + } + }); + } else { + try { + scPlaying = Player.soundcloud_player.isPlaying(); + } catch (e) {} + try { + resizePlaylistPlaying( + Player.player.getPlayerState() == YT.PlayerState.PLAYING || + scPlaying || + Player.player.getPlayerState() == YT.PlayerState.BUFFERING, + false + ); + } catch (e) { + resizePlaylistPlaying(scPlaying, false); + } + } + } + if (!chromecastAvailable) { + if (Helper.mobilecheck()) { + Helper.css("#playpause", "visibility", "visible"); + Helper.css("#playpause", "pointer-events", "all"); + Helper.css("#channel-load", "display", "none"); + } + if (!empty_clear && !gotten_np) { + paused = true; + } + if (gotten_np) gotten_np = false; + if (window.location.pathname != "/") Playercontrols.play_pause_show(); + mobile_beginning = true; + Helper.addClass("#player_overlay", "small-display-hide"); + } + Helper.removeClass("#play", "hide"); + Helper.addClass("#pause", "hide"); + } + }, + + soundcloudPlay: function() { + Helper.addClass("#player_loader_container", "hide"); + Helper.css("#player_overlay", "display", "block"); + Helper.addClass("#player", "hide"); + //if(embed) Helper.css("#song-title", "display", "block"); + if (videoSource == "youtube") { + Player.soundcloud_player.pause(); + } else if (soundcloud_loading) { + if (scUsingWidget) { + Player.soundcloud_player.getPosition(function(pos) { + Player.seeking = true; + Player.soundcloud_player.seek(seekTo * 1000); + Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume()); + soundcloud_loading = false; + }); + } else { + Player.seeking = true; + Player.soundcloud_player.seek(seekTo * 1000); + Player.soundcloud_player.setVolume( + embed ? 1 : Crypt.get_volume() / 100 + ); + soundcloud_loading = false; + } + } + if (embed) { + Helper.css("#player", "visibility", "visible"); + } + if (embed && !autoplay) autoplay = true; + if (!window.MSStream) { + Helper.css("#player", "opacity", "1"); + //if(!Helper.mobilecheck()) { + Helper.css("#channel-load", "display", "none"); + + //} + } + if (!embed && !client && window.location.pathname != "/") { + var scPlaying = false; + if (scUsingWidget) { + Player.soundcloud_player.isPaused(function(paused) { + scPlaying = !paused; + resizePlaylistPlaying(scPlaying, false); + }); + } else { + try { + scPlaying = Player.soundcloud_player.isPlaying(); + } catch (e) {} + resizePlaylistPlaying(scPlaying, false); + } + } + Helper.removeClass("#player_overlay", "small-display-hide"); + Helper.css("#playpause", "visibility", "visible"); + Helper.css("#playpause", "pointer-events", "all"); + playing = true; + if (beginning && Helper.mobilecheck() && !chromecastAvailable) { + //Player.pauseVideo(); + beginning = false; + mobile_beginning = false; + } + //if(!embed && window.location.pathname != "/" && !chromecastAvailable) Helper.addClass("#player_overlay", "hide"); + if (window.location.pathname != "/") { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + } + if (was_stopped && !offline) { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + paused = false; + was_stopped = false; + + socket.emit("pos", { channel: chan.toLowerCase() }); + } else { + paused = false; + was_stopped = false; + } + }, + + soundcloudReady: function() { + if (SC_player == undefined && sc_need_initialization) { + sc_need_initialization = true; + return; + } else if (client) return; + sc_need_initialization = false; + beginning = true; + player_ready = true; + if (!durationBegun) { + Player.durationSetter(); + } + if (videoSource == "soundcloud" && video_id != undefined) + Player.loadVideoById( + video_id, + Player.np.duration, + Player.np.start, + Player.np.end + ); + }, + + onPlayerReady: function(event) { + try { + beginning = true; + player_ready = true; + //if(!window.MSStream) { + if (Helper.mobilecheck()) { + /*Helper.css("#playpause", "visibility", "hidden"); Helper.css("#playpause", "pointer-events", "none");*/ - Helper.css("#player", "opacity", "1"); - if(offline) { - setTimeout(function(){ - Helper.css("#channel-load", "display", "none"); - Helper.css("#playpause", "visibility", "visible"); - Helper.css("#playpause", "pointer-events", "all"); - }, 1500); - } - } else { - //$("#channel-load").css("display", "none"); - } - /*$("#player").css("opacity", "1");*/ - Helper.removeClass(".video-container", "no-opacity"); - Helper.css("#controls", "opacity", "1"); - Helper.css(".playlist", "opacity", "1"); - if(autoplay) { - Player.loadVideoById(video_id, duration); - } else { - Player.cueVideoById(video_id, duration); - } - if(autoplay && (!Helper.mobilecheck() || chromecastAvailable)) { - //Player.playVideo(); - } - if(!durationBegun) { - Player.durationSetter(); - } - /*if(embed){ + Helper.css("#player", "opacity", "1"); + if (offline) { + setTimeout(function() { + Helper.css("#channel-load", "display", "none"); + Helper.css("#playpause", "visibility", "visible"); + Helper.css("#playpause", "pointer-events", "all"); + }, 1500); + } + } else { + //$("#channel-load").css("display", "none"); + } + /*$("#player").css("opacity", "1");*/ + Helper.removeClass(".video-container", "no-opacity"); + Helper.css("#controls", "opacity", "1"); + Helper.css(".playlist", "opacity", "1"); + if (autoplay) { + Player.loadVideoById(video_id, duration); + } else { + Player.cueVideoById(video_id, duration); + } + if (autoplay && (!Helper.mobilecheck() || chromecastAvailable)) { + //Player.playVideo(); + } + if (!durationBegun) { + Player.durationSetter(); + } + /*if(embed){ //setTimeout(function(){ //Player.player.seekTo(seekTo); if(!autoplay){ @@ -923,365 +1093,523 @@ var Player = { //}, 1000); }else Player.seekTo(seekTo);*/ - //} - Player.player.setVolume(Crypt.get_volume()); - Player.readyLooks(); - Playercontrols.initYoutubeControls(Player.player); - Playercontrols.initSlider(); - }catch(e){ - } - }, + //} + Player.player.setVolume(Crypt.get_volume()); + Player.readyLooks(); + Playercontrols.initYoutubeControls(Player.player); + Playercontrols.initSlider(); + } catch (e) {} + }, - readyLooks: function() { - //Player.setBGimage(video_id); - }, + readyLooks: function() { + //Player.setBGimage(video_id); + }, - setBGimage: function(c){ - var color = c.color; - if(Crypt.get_background_color() != "dynamic") { - Crypt.set_background_color(Crypt.get_background_color()); - return; - } - if(window.location.pathname != "/" && ((offline && c.only) || (!offline && !c.only) || (!offline && c.only))) { - document.getElementById("main-container").style.backgroundColor = Helper.rgbToHsl(color,true); - Helper.css("#nav", "background-color", Helper.rgbToHsl(color, true)); - Helper.css(".title-container", "background-color", Helper.rgbToHsl(color, true)); - var hexHsl = Helper.rgbToHex(color[0], color[1], color[2]); - try { - var hsl = Helper.rgbToHsl(color, true).replace("hsl(", "").replace(")", "").replace("%", "").replace(/ /g,'').replace("%", "").split(","); - hexHsl = Helper.hslToHex(parseInt(hsl[0]), parseInt(hsl[1]), parseInt(hsl[2])); - } catch(e) {} - document.querySelector("meta[name=theme-color]").setAttribute("content", hexHsl); - if(!client) { - var new_color = Helper.rgbToHex(color[0], color[1], color[2]); - new_color = Helper.hexToComplimentary(new_color); - new_color = Helper.hexToRgb(new_color); - new_color = Helper.rgbToHsl([new_color.r, new_color.g, new_color.b], true); - Helper.css("#controls", "background", new_color); - } - } - }, - - set_width: function(val){ - document.getElementsByClassName("video-container")[0].style.width = val + "px"; - if(!Helper.mobilecheck()) { - if(window.innerWidth > 769) { - var test_against_width = window.innerWidth - Helper.computedStyle(".control-list", "width") - document.querySelector(".zbrand").offsetWidth - document.querySelector(".brand-logo-navigate").offsetWidth - 66; - title_width = test_against_width; - document.querySelector(".title-container").style.width = title_width + "px"; - } else { - document.querySelector(".title-container").style.width = "100%"; - } - - } - }, - - notifyUser: function(id, title) { - title = title.replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&"); - try{ - if (Notification != undefined && Notification.permission === "granted" && document.hidden && !embed) { - var icon = "https://img.youtube.com/vi/"+id+"/mqdefault.jpg"; - if(videoSource) icon = full_playlist[full_playlist.length - 1].thumbnail; - var notification = new Notification("Now Playing", {body: title, icon: icon, iconUrl: icon}); - notification.onclick = function(x) { window.focus(); this.cancel(); }; - setTimeout(function(){ - notification.close(); - },5000); - } - }catch(e){} - }, - - setup_all_listeners: function() { - get_list_listener(); - setup_now_playing_listener(); - setup_admin_listener(); - setup_chat_listener(); - setup_list_listener(); - }, - - onYouTubeIframeAPIReady: function() { - try { - Player.player = new YT.Player('player', { - videoId: video_id, - playerVars: { rel:"0", autoplay: 1, wmode:"transparent", controls: "0" , fs: "0", iv_load_policy: "3", theme:"light", color:"white", showinfo: 0}, - events: { - 'onReady': Player.onPlayerReady, - 'onStateChange': Player.onPlayerStateChange, - 'onError': Player.errorHandler - } - }); - } catch(e) { - console.log("YouTube not quite loaded yet"); - } - }, - - createFireplacePlayer: function() { - Player.fireplace = new YT.Player('fireplace_player', { - videoId: "L_LUpnjgPso", - playerVars: { rel:"0", wmode:"transparent", controls: "0" , fs: "0", iv_load_policy: "3", theme:"light", color:"white", showinfo: 0}, - events: { - 'onReady': Player.onFireplaceReady, - 'onStateChange': Player.onFireplaceChange - } - }); - }, - - onFireplaceReady: function() { - Player.fireplace.playVideo(); - }, - - onFireplaceChange: function(newState) { - switch(newState.data) { - case 0: - Player.fireplace.seekTo(0); - Player.fireplace.playVideo(); - break; - case 2: - Player.fireplace.playVideo(); - break; - } - }, - - durationSetter: function() { - try{ - if(!user_auth_avoid && duration !== undefined){ - - if(!Player.stopInterval) { - durationBegun = true; - } - - dMinutes = Math.floor(duration / 60); - dSeconds = duration - dMinutes * 60; - if(videoSource == "soundcloud") { - if(scUsingWidget) { - Player.soundcloud_player.getPosition(function(pos) { - currDurr = Math.floor(pos) / 1000; - }); - } else { - currDurr = Math.floor(Player.soundcloud_player.currentTime()) / 1000; - } - } else { - currDurr = Player.player.getCurrentTime() !== undefined ? Math.floor(Player.player.getCurrentTime()) : seekTo; - } - - if(currDurr - Player.np.start > duration && !offline) { - currDurr = duration - Player.np.start; - } - currDurr = currDurr - Player.np.start; - //currDurr = currDurr - Player.np.start; - minutes = Math.floor(currDurr / 60); - seconds = currDurr - (minutes * 60); - if(!isNaN(minutes) && !isNaN(seconds) && !isNaN(dMinutes) && !isNaN(dSeconds)) { - Helper.setHtml("#duration", Helper.pad(minutes)+":"+Helper.pad(seconds)+" / "+Helper.pad(dMinutes)+":"+Helper.pad(dSeconds)); - } - per = (100 / duration) * currDurr; - if(per >= 100) { - per = 100; - } else if(duration === 0) { - per = 0; - } - - if(embed) { - if(window.parentWindow && window.parentOrigin) { - window.parentWindow.postMessage({type: "duration", duration: Player.player.getCurrentTime() - Player.np.start, full_duration: Player.player.getDuration() - Player.np.end, percent: per}, window.parentOrigin); - } - } - - if(!dragging) { - try { - document.getElementById("bar").style.width = per+"%"; - }catch(e){} - } - if(videoSource == "soundcloud") { - if(scUsingWidget) { - Player.soundcloud_player.isPaused(function(playing) { - if(!playing) { - Helper.addClass("#play", "hide"); - Helper.removeClass("#pause", "hide"); - } - playing = !playing; - if(Math.ceil(currDurr) + 1 > Player.np.end && playing) { - end_programmatically = true; - if(!offline) { - Player.soundcloud_player.pause(); - was_stopped = false; - socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); - } else { - Player.playNext(); - } - } - }) - } else { - if(Player.soundcloud_player.isPlaying()) { - Helper.addClass("#play", "hide"); - Helper.removeClass("#pause", "hide"); - } - if(Math.ceil(currDurr) + 1 > Player.np.end && Player.soundcloud_player.isPlaying()) { - end_programmatically = true; - if(!offline) { - Player.soundcloud_player.pause(); - was_stopped = false; - socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); - } else { - Player.playNext(); - } - } - } - } else { - if(Player.player.getPlayerState() == 1) { - Helper.addClass("#play", "hide"); - Helper.removeClass("#pause", "hide"); - } - if(Math.ceil(Player.player.getCurrentTime()) >= Player.np.end && (Player.player.getPlayerState() == YT.PlayerState.PLAYING)) { - end_programmatically = true; - if(!offline) { - Player.player.pauseVideo(); - was_stopped = false; - socket.emit("end", {id: video_id, channel: chan.toLowerCase()}); - } else { - Player.playNext(); - } - } else if(Math.ceil(Player.player.getCurrentTime()) < Player.np.end && Player.player.getState() != YT.PlayerState.PLAYING && !was_stopped) { - Player.player.playVideo(); - } - } - } - }catch(e){} - //if(!Player.stopInterval) { - clearTimeout(durationTimeout); - durationTimeout = setTimeout(Player.durationSetter, 1000); - //} - }, - - loadPlayer: function(notify) { - if(document.querySelectorAll("script[src='https://www.youtube.com/iframe_api']").length == 1){ - try{ - Player.onYouTubeIframeAPIReady(); - //SC.Widget(Player.soundcloud_player).bind("ready", Player.soundcloudReady); - - } catch(error){ - console.error(error); - console.error("Seems YouTube iFrame script isn't correctly loaded. Please reload the page."); - } - - } else { - tag = document.createElement('script'); - tag.src = "https://www.youtube.com/iframe_api"; - firstScriptTag = document.getElementsByTagName('script')[0]; - firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); - } - - Player.loadSoundCloudPlayer(); - Player.loadSoundCloudIframe(); - }, - - loadSoundCloudPlayer: function() { - if(document.querySelectorAll("script[src='https://connect.soundcloud.com/sdk/sdk-3.3.0.js']").length == 1) { - try { - if(SC_player != null && SC_player != undefined && SC_widget != null && SC_widget != undefined && !sc_initialized) { - SC_player.initialize({ - client_id: api_key.soundcloud, - redirect_uri: "https://zoff.me/api/oauth", - }); - sc_initialized = true; - Player.soundcloudReady(); - - } - } catch(error) { - sc_need_initialization = true; - //console.error(error); - //console.error("Seems SoundCloud script isn't correctly loaded. Please reload the page."); - } - } else { - var tagSC = document.createElement('script'); - if (tagSC.readyState){ //IE - tagSC.onreadystatechange = function(){ - if (tagSC.readyState == "loaded" || - tagSC.readyState == "complete"){ - - tagSC.onreadystatechange = null; - SC_player = SC; - if(SC_player != null && SC_player != undefined && ((SC_widget != null && !client) || client) && ((SC_widget != undefined && !client) || client) && !sc_initialized) { - SC_player.initialize({ - client_id: api_key.soundcloud, - redirect_uri: "https://zoff.me/api/oauth", - }); - sc_initialized = true; - Player.soundcloudReady(); - } - //Player.loadSoundCloudIframe(); - } - }; - } else { //Others - tagSC.onload = function(){ - SC_player = SC; - if(SC_player != null && SC_player != undefined && ((SC_widget != null && !client) || client) && ((SC_widget != undefined && !client) || client) && !sc_initialized) { - SC_player.initialize({ - client_id: api_key.soundcloud, - redirect_uri: "https://zoff.me/api/oauth", - }); - sc_initialized = true; - Player.soundcloudReady(); - } - //Player.loadSoundCloudIframe(); - }; - } - tagSC.src = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js"; - var firstScriptTagSC = document.getElementsByTagName('script')[0]; - firstScriptTagSC.parentNode.insertBefore(tagSC, firstScriptTagSC); - } - }, - - loadSoundCloudIframe: function() { - if(document.querySelectorAll("script[src='/assets/sclib/scapi.js']").length == 1) { - try { - if(SC_player != null && SC_player != undefined && SC_widget != null && SC_widget != undefined && !sc_initialized) { - SC_player.initialize({ - client_id: api_key.soundcloud, - redirect_uri: "https://zoff.me/api/oauth", - }); - sc_initialized = true; - Player.soundcloudReady(); - } - } catch(error) { - //sc_need_initialization = true; - //console.error(error); - //console.error("Seems SoundCloud script isn't correctly loaded. Please reload the page."); - } - } else { - var tagSCWidget = document.createElement('script'); - if (tagSCWidget.readyState){ //IE - tagSCWidget.onreadystatechange = function(){ - if (tagSCWidget.readyState == "loaded" || - tagSCWidget.readyState == "complete"){ - tagSCWidget.onreadystatechange = null; - SC_widget = SC; - if(SC_player != null && SC_player != undefined && SC_widget != null && SC_widget != undefined && !sc_initialized) { - SC_player.initialize({ - client_id: api_key.soundcloud, - redirect_uri: "https://zoff.me/api/oauth", - }); - sc_initialized = true; - Player.soundcloudReady(); - } - } - }; - } else { //Others - tagSCWidget.onload = function(){ - SC_widget = SC; - if(SC_player != null && SC_player != undefined && SC_widget != null && SC_widget != undefined && !sc_initialized) { - SC_player.initialize({ - client_id: api_key.soundcloud, - redirect_uri: "https://zoff.me/api/oauth", - }); - sc_initialized = true; - Player.soundcloudReady(); - } - }; - } - tagSCWidget.src = "/assets/sclib/scapi.js"; - var firstScriptTagSCWidget = document.getElementsByTagName('script')[0]; - firstScriptTagSCWidget.parentNode.insertBefore(tagSCWidget, firstScriptTagSCWidget); - } + setBGimage: function(c) { + var color = c.color; + if (Crypt.get_background_color() != "dynamic") { + Crypt.set_background_color(Crypt.get_background_color()); + return; } + if ( + window.location.pathname != "/" && + ((offline && c.only) || (!offline && !c.only) || (!offline && c.only)) + ) { + document.getElementById( + "main-container" + ).style.backgroundColor = Helper.rgbToHsl(color, true); + Helper.css("#nav", "background-color", Helper.rgbToHsl(color, true)); + Helper.css( + ".title-container", + "background-color", + Helper.rgbToHsl(color, true) + ); + var hexHsl = Helper.rgbToHex(color[0], color[1], color[2]); + try { + var hsl = Helper.rgbToHsl(color, true) + .replace("hsl(", "") + .replace(")", "") + .replace("%", "") + .replace(/ /g, "") + .replace("%", "") + .split(","); + hexHsl = Helper.hslToHex( + parseInt(hsl[0]), + parseInt(hsl[1]), + parseInt(hsl[2]) + ); + } catch (e) {} + document + .querySelector("meta[name=theme-color]") + .setAttribute("content", hexHsl); + if (!client) { + var new_color = Helper.rgbToHex(color[0], color[1], color[2]); + new_color = Helper.hexToComplimentary(new_color); + new_color = Helper.hexToRgb(new_color); + new_color = Helper.rgbToHsl( + [new_color.r, new_color.g, new_color.b], + true + ); + Helper.css("#controls", "background", new_color); + } + } + }, + + set_width: function(val) { + document.getElementsByClassName("video-container")[0].style.width = + val + "px"; + if (!Helper.mobilecheck()) { + if (window.innerWidth > 769) { + var test_against_width = + window.innerWidth - + Helper.computedStyle(".control-list", "width") - + document.querySelector(".zbrand").offsetWidth - + document.querySelector(".brand-logo-navigate").offsetWidth - + 66; + title_width = test_against_width; + document.querySelector(".title-container").style.width = + title_width + "px"; + } else { + document.querySelector(".title-container").style.width = "100%"; + } + } + }, + + notifyUser: function(id, title) { + title = title + .replace(/\\\'/g, "'") + .replace(/"/g, "'") + .replace(/&/g, "&"); + try { + if ( + Notification != undefined && + Notification.permission === "granted" && + document.hidden && + !embed + ) { + var icon = "https://img.youtube.com/vi/" + id + "/mqdefault.jpg"; + if (videoSource) + icon = full_playlist[full_playlist.length - 1].thumbnail; + var notification = new Notification("Now Playing", { + body: title, + icon: icon, + iconUrl: icon + }); + notification.onclick = function(x) { + window.focus(); + this.cancel(); + }; + setTimeout(function() { + notification.close(); + }, 5000); + } + } catch (e) {} + }, + + setup_all_listeners: function() { + get_list_listener(); + setup_now_playing_listener(); + setup_admin_listener(); + setup_chat_listener(); + setup_list_listener(); + }, + + onYouTubeIframeAPIReady: function() { + try { + Player.player = new YT.Player("player", { + videoId: video_id, + playerVars: { + rel: "0", + autoplay: 1, + wmode: "transparent", + controls: "0", + fs: "0", + iv_load_policy: "3", + theme: "light", + color: "white", + showinfo: 0 + }, + events: { + onReady: Player.onPlayerReady, + onStateChange: Player.onPlayerStateChange, + onError: Player.errorHandler + } + }); + } catch (e) { + console.log("YouTube not quite loaded yet"); + } + }, + + createFireplacePlayer: function() { + Player.fireplace = new YT.Player("fireplace_player", { + videoId: "L_LUpnjgPso", + playerVars: { + rel: "0", + wmode: "transparent", + controls: "0", + fs: "0", + iv_load_policy: "3", + theme: "light", + color: "white", + showinfo: 0 + }, + events: { + onReady: Player.onFireplaceReady, + onStateChange: Player.onFireplaceChange + } + }); + }, + + onFireplaceReady: function() { + Player.fireplace.playVideo(); + }, + + onFireplaceChange: function(newState) { + switch (newState.data) { + case 0: + Player.fireplace.seekTo(0); + Player.fireplace.playVideo(); + break; + case 2: + Player.fireplace.playVideo(); + break; + } + }, + + durationSetter: function() { + try { + if (!user_auth_avoid && duration !== undefined) { + if (!Player.stopInterval) { + durationBegun = true; + } + + dMinutes = Math.floor(duration / 60); + dSeconds = duration - dMinutes * 60; + if (videoSource == "soundcloud") { + if (scUsingWidget) { + Player.soundcloud_player.getPosition(function(pos) { + currDurr = Math.floor(pos) / 1000; + }); + } else { + currDurr = + Math.floor(Player.soundcloud_player.currentTime()) / 1000; + } + } else { + currDurr = + Player.player.getCurrentTime() !== undefined + ? Math.floor(Player.player.getCurrentTime()) + : seekTo; + } + + if (currDurr - Player.np.start > duration && !offline) { + currDurr = duration - Player.np.start; + } + currDurr = currDurr - Player.np.start; + //currDurr = currDurr - Player.np.start; + minutes = Math.floor(currDurr / 60); + seconds = currDurr - minutes * 60; + if ( + !isNaN(minutes) && + !isNaN(seconds) && + !isNaN(dMinutes) && + !isNaN(dSeconds) + ) { + Helper.setHtml( + "#duration", + Helper.pad(minutes) + + ":" + + Helper.pad(seconds) + + " / " + + Helper.pad(dMinutes) + + ":" + + Helper.pad(dSeconds) + ); + } + per = (100 / duration) * currDurr; + if (per >= 100) { + per = 100; + } else if (duration === 0) { + per = 0; + } + + if (embed) { + if (window.parentWindow && window.parentOrigin) { + window.parentWindow.postMessage( + { + type: "duration", + duration: Player.player.getCurrentTime() - Player.np.start, + full_duration: Player.player.getDuration() - Player.np.end, + percent: per + }, + window.parentOrigin + ); + } + } + + if (!dragging) { + try { + document.getElementById("bar").style.width = per + "%"; + } catch (e) {} + } + if (videoSource == "soundcloud") { + if (scUsingWidget) { + Player.soundcloud_player.isPaused(function(playing) { + if (!playing) { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + } + playing = !playing; + if (Math.ceil(currDurr) + 1 > Player.np.end && playing) { + end_programmatically = true; + if (!offline) { + Player.soundcloud_player.pause(); + was_stopped = false; + socket.emit("end", { + id: video_id, + channel: chan.toLowerCase() + }); + } else { + Player.playNext(); + } + } + }); + } else { + if (Player.soundcloud_player.isPlaying()) { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + } + if ( + Math.ceil(currDurr) + 1 > Player.np.end && + Player.soundcloud_player.isPlaying() + ) { + end_programmatically = true; + if (!offline) { + Player.soundcloud_player.pause(); + was_stopped = false; + socket.emit("end", { + id: video_id, + channel: chan.toLowerCase() + }); + } else { + Player.playNext(); + } + } + } + } else { + if (Player.player.getPlayerState() == 1) { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + } + if ( + Math.ceil(Player.player.getCurrentTime()) >= Player.np.end && + Player.player.getPlayerState() == YT.PlayerState.PLAYING + ) { + end_programmatically = true; + if (!offline) { + Player.player.pauseVideo(); + was_stopped = false; + socket.emit("end", { id: video_id, channel: chan.toLowerCase() }); + } else { + Player.playNext(); + } + } else if ( + Math.ceil(Player.player.getCurrentTime()) < Player.np.end && + Player.player.getState() != YT.PlayerState.PLAYING && + !was_stopped + ) { + Player.player.playVideo(); + } + } + } + } catch (e) {} + //if(!Player.stopInterval) { + clearTimeout(durationTimeout); + durationTimeout = setTimeout(Player.durationSetter, 1000); + //} + }, + + loadPlayer: function(notify) { + if ( + document.querySelectorAll( + "script[src='https://www.youtube.com/iframe_api']" + ).length == 1 + ) { + try { + Player.onYouTubeIframeAPIReady(); + //SC.Widget(Player.soundcloud_player).bind("ready", Player.soundcloudReady); + } catch (error) { + console.error(error); + console.error( + "Seems YouTube iFrame script isn't correctly loaded. Please reload the page." + ); + } + } else { + tag = document.createElement("script"); + tag.src = "https://www.youtube.com/iframe_api"; + firstScriptTag = document.getElementsByTagName("script")[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + } + + Player.loadSoundCloudPlayer(); + Player.loadSoundCloudIframe(); + }, + + loadSoundCloudPlayer: function() { + if ( + document.querySelectorAll( + "script[src='https://connect.soundcloud.com/sdk/sdk-3.3.0.js']" + ).length == 1 + ) { + try { + if ( + SC_player != null && + SC_player != undefined && + SC_widget != null && + SC_widget != undefined && + !sc_initialized + ) { + SC_player.initialize({ + client_id: api_key.soundcloud, + redirect_uri: "https://zoff.me/api/oauth" + }); + sc_initialized = true; + Player.soundcloudReady(); + } + } catch (error) { + sc_need_initialization = true; + //console.error(error); + //console.error("Seems SoundCloud script isn't correctly loaded. Please reload the page."); + } + } else { + var tagSC = document.createElement("script"); + if (tagSC.readyState) { + //IE + tagSC.onreadystatechange = function() { + if (tagSC.readyState == "loaded" || tagSC.readyState == "complete") { + tagSC.onreadystatechange = null; + SC_player = SC; + if ( + SC_player != null && + SC_player != undefined && + ((SC_widget != null && !client) || client) && + ((SC_widget != undefined && !client) || client) && + !sc_initialized + ) { + SC_player.initialize({ + client_id: api_key.soundcloud, + redirect_uri: "https://zoff.me/api/oauth" + }); + sc_initialized = true; + Player.soundcloudReady(); + } + //Player.loadSoundCloudIframe(); + } + }; + } else { + //Others + tagSC.onload = function() { + SC_player = SC; + if ( + SC_player != null && + SC_player != undefined && + ((SC_widget != null && !client) || client) && + ((SC_widget != undefined && !client) || client) && + !sc_initialized + ) { + SC_player.initialize({ + client_id: api_key.soundcloud, + redirect_uri: "https://zoff.me/api/oauth" + }); + sc_initialized = true; + Player.soundcloudReady(); + } + //Player.loadSoundCloudIframe(); + }; + } + tagSC.src = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js"; + var firstScriptTagSC = document.getElementsByTagName("script")[0]; + firstScriptTagSC.parentNode.insertBefore(tagSC, firstScriptTagSC); + } + }, + + loadSoundCloudIframe: function() { + if ( + document.querySelectorAll("script[src='/assets/sclib/scapi.js']") + .length == 1 + ) { + try { + if ( + SC_player != null && + SC_player != undefined && + SC_widget != null && + SC_widget != undefined && + !sc_initialized + ) { + SC_player.initialize({ + client_id: api_key.soundcloud, + redirect_uri: "https://zoff.me/api/oauth" + }); + sc_initialized = true; + Player.soundcloudReady(); + } + } catch (error) { + //sc_need_initialization = true; + //console.error(error); + //console.error("Seems SoundCloud script isn't correctly loaded. Please reload the page."); + } + } else { + var tagSCWidget = document.createElement("script"); + if (tagSCWidget.readyState) { + //IE + tagSCWidget.onreadystatechange = function() { + if ( + tagSCWidget.readyState == "loaded" || + tagSCWidget.readyState == "complete" + ) { + tagSCWidget.onreadystatechange = null; + SC_widget = SC; + if ( + SC_player != null && + SC_player != undefined && + SC_widget != null && + SC_widget != undefined && + !sc_initialized + ) { + SC_player.initialize({ + client_id: api_key.soundcloud, + redirect_uri: "https://zoff.me/api/oauth" + }); + sc_initialized = true; + Player.soundcloudReady(); + } + } + }; + } else { + //Others + tagSCWidget.onload = function() { + SC_widget = SC; + if ( + SC_player != null && + SC_player != undefined && + SC_widget != null && + SC_widget != undefined && + !sc_initialized + ) { + SC_player.initialize({ + client_id: api_key.soundcloud, + redirect_uri: "https://zoff.me/api/oauth" + }); + sc_initialized = true; + Player.soundcloudReady(); + } + }; + } + tagSCWidget.src = "/assets/sclib/scapi.js"; + var firstScriptTagSCWidget = document.getElementsByTagName("script")[0]; + firstScriptTagSCWidget.parentNode.insertBefore( + tagSCWidget, + firstScriptTagSCWidget + ); + } + } }; diff --git a/server/public/assets/js/playercontrols.js b/server/public/assets/js/playercontrols.js index 75d16fa6..beb092e3 100755 --- a/server/public/assets/js/playercontrols.js +++ b/server/public/assets/js/playercontrols.js @@ -1,466 +1,521 @@ var Playercontrols = { + stopInterval: false, - stopInterval: false, + initYoutubeControls: function() { + Playercontrols.initControls(); + }, + initControls: function() { + document + .getElementById("volume-button") + .addEventListener("click", Playercontrols.mute_video); + document + .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); + }, - initYoutubeControls: function() { - Playercontrols.initControls(); - }, - - initControls: function() { - document.getElementById("volume-button").addEventListener("click", Playercontrols.mute_video); - document.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()); - - } catch(e){ - vol = 100; - } - try { - if(document.getElementsByClassName("volume-slid")) { - document.getElementById("volume").innerHTML = ""; - } - }catch(e){} - if((Helper.mobilecheck() || slider_type == "vertical") && !embed) { - //slider_values.orientation = "vertical"; - if(!document.querySelector(".volume-container").classList.contains("hide")) { - Helper.toggleClass(".volume-container", "hide"); - } - } - document.getElementById("volume").insertAdjacentHTML("beforeend", "
    "); - document.getElementById("volume").insertAdjacentHTML("beforeend", "
    "); - if(slider_type != "vertical") { - Helper.removeClass("#volume", "vertical"); - Helper.css(".volume-slid", "width", vol + "%"); - Helper.css(".volume-handle", "left", "calc(" + vol + "% - 1px)"); - } else { - 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; - //Playercontrols.visualVolume(slider_values); - //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("touchstart", function(e) { - e.preventDefault(); - Playercontrols.dragMouseDown(e, "player"); - }, false); - - }, - - dragMouseDown: function(e, element) { - e = e || window.event; - // get the mouse cursor position at startup: - document.onmouseup = function() { - Playercontrols.closeDragElement(element); - } - document.getElementById("volume").addEventListener("touchend", function() { - Playercontrols.closeDragElement(element); - }, false); - // call a function whenever the cursor moves: - document.onmousemove = function(e) { - Playercontrols.elementDrag(e, element); - } - document.getElementById("volume").addEventListener("touchmove", function(e) { - e.preventDefault(); - Playercontrols.elementDrag(e, element); - }, false); - }, - - elementDrag: function(e, element) { - var elmnt; - var cmp_elmnt; - var slid_elmnt; - if(element == "player") { - elmnt = document.getElementsByClassName("volume-handle")[0]; - cmp_elmnt = document.getElementById("volume"); - slid_elmnt = document.getElementsByClassName("volume-slid")[0]; - } else { - elmnt = document.getElementsByClassName("volume-handle-remote")[0]; - cmp_elmnt = document.getElementById("volume-control-remote"); - slid_elmnt = document.getElementsByClassName("volume-slid-remote")[0]; - } - e = e || window.event; - - var pos3 = e.clientX; - var pos4 = e.clientY; - if(pos3 == undefined) { - pos3 = e.touches[0].clientX; - } - if(pos4 == undefined) { - pos4 = e.touches[0].clientY; - } - var volume = 0; - if(slider_type != "vertical" || element != "player") { - if(elmnt.className.indexOf("ui-state-active") == -1) { - elmnt.className += " ui-state-active"; - } - var pos = pos3 - cmp_elmnt.offsetLeft; - if(pos > -1 && pos < cmp_elmnt.offsetWidth + 1) { - elmnt.style.left = pos + "px"; - volume = pos / cmp_elmnt.offsetWidth; - } else if(pos < 1) { - elmnt.style.left = 0 + "px"; - volume = 0; - } else { - elmnt.style.left = cmp_elmnt.offsetWidth + "px"; - volume = 1; - } - 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 { - var pos = pos4 - cmp_elmnt.offsetTop; - var pos0 = window.innerHeight - pos - 14; - - if(pos0 > 64 && pos0 < 164) { - volume = (pos0 - 64) / 100; - } else if(pos0 < 65) { - volume = 0; - } else { - volume = 1; - } - slid_elmnt.style.height = volume * 100 + "%"; - Playercontrols.setVolume(volume * 100); - - } - try{Crypt.set_volume(volume * 100);}catch(e){ - } - }, - - closeDragElement: function(element) { - /* stop moving when mouse button is released:*/ - var elmnt; - if(element == "player") { - elmnt = document.getElementsByClassName("volume-handle")[0]; - } else { - elmnt = document.getElementsByClassName("volume-handle-remote")[0]; - } - if(elmnt.className.indexOf("ui-state-active") > -1) { - setTimeout(function(){ - elmnt.classList.remove("ui-state-active"); - }, 1); - } - document.onmouseup = null; - document.onmousemove = null; - if(element == "player") { - document.getElementById("volume").removeEventListener("touchmove", function(e) { - e.preventDefault(); - Playercontrols.elementDrag(e, element); - }, false); - document.getElementById("volume").removeEventListener("touchend", function() { - Playercontrols.closeDragElement(element); - }, false); - } else { - document.getElementById("volume-control-remote").removeEventListener("touchmove", function(e) { - e.preventDefault(); - Playercontrols.elementDrag(e); - }, false); - document.getElementById("volume-control-remote").removeEventListener("touchend", function() { - Playercontrols.closeDragElement(); - }, false); - } - }, - - fullscreen: function() { - var playerElement; - if(fireplace_initiated) { - playerElement = document.getElementById("fireplace_player"); - } else { - playerElement = document.getElementById("player"); - } - - var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen; - if (requestFullScreen) { - requestFullScreen.bind(playerElement)(); - } - }, - - play_pause: function() { - if(!chromecastAvailable){ - if(videoSource == "soundcloud") { - if(scUsingWidget) { - Player.soundcloud_player.isPaused(function(playing) { - playing = !playing; - if(!playing) { - Player.playVideo(); - } else { - Player.pauseVideo(); - } - was_stopped = true; - }); - } else { - if(!Player.soundcloud_player.isPlaying()) { - Player.playVideo(); - } else { - Player.pauseVideo(); - } - } - } else { - 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){ - //document.getElementById("player").style.display = "none"; - Helper.css("#player", "display", "none"); - 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)){ - Player.playVideo(); - //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ - if(Helper.mobilecheck() && !window.MSStream){ - //document.getElementById("player").style.display = "block"; - Helper.css("#player", "display", "block"); - Helper.toggleClass(".video-container", "click-through"); - Helper.toggleClass(".page-footer", "padding-bottom-extra"); - } - } - } - } else { - Playercontrols.play_pause_show(); - } - }, - - play_pause_show: function() { - if(chromecastAvailable){ - if(document.getElementById("play").classList.contains("hide")){ - Player.pauseVideo(); - } else if(document.getElementById("pause").classList.contains("hide")){ - Player.playVideo(); - } - } else { - - if(!document.getElementById("pause").classList.contains("hide")) { - Helper.toggleClass("#pause", "hide"); - Helper.toggleClass("#pause-overlay", "hide"); - } - if(document.getElementById("play").classList.contains("hide")) { - Helper.toggleClass("#play", "hide"); - Helper.toggleClass("#play-overlay", "hide"); - } - } - }, - - settings: function() { - Helper.toggleClass("#qS", "hide"); - }, - - changeQuality: function(wantedQ) { - if(Player.player.getPlaybackQuality != wantedQ) { - Player.player.setPlaybackQuality(wantedQ); - Player.player.getPlaybackQuality(); - } - Helper.toggleClass("#qS", "hide"); - }, - - mute_video: function() { - if(Helper.mobilecheck() || slider_type == "vertical") { - Helper.toggleClass(".volume-container", "hide"); - } else { - if(!Player.player.isMuted()) { - 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"}); - Player.player.unMute(); - Playercontrols.choose_button(Player.player.getVolume(), false); - } - } - }, - - setVolume: function(vol) { - Player.setVolume(vol); - if(scUsingWidget) Player.soundcloud_player.setVolume(vol); - else Player.soundcloud_player.setVolume(vol / 100); - Playercontrols.choose_button(vol, false); - if(Player.player.isMuted()) - Player.player.unMute(); - }, - - choose_button: function(vol, mute) { - if(!mute){ - if(vol >= 0 && vol <= 33) { - if(!document.getElementById("v-full").classList.contains("hide")) { - Helper.toggleClass("#v-full", "hide"); - Helper.toggleClass("#v-full-overlay", "hide"); - } - if(!document.getElementById("v-medium").classList.contains("hide")) { - Helper.toggleClass("#v-medium", "hide"); - Helper.toggleClass("#v-medium-overlay", "hide"); - } - if(document.getElementById("v-low").classList.contains("hide")) { - Helper.toggleClass("#v-low", "hide"); - Helper.toggleClass("#v-low-overlay", "hide"); - } - if(!document.getElementById("v-mute").classList.contains("hide")) { - Helper.toggleClass("#v-mute", "hide"); - Helper.toggleClass("#v-mute-overlay", "hide"); - } - } else if(vol >= 34 && vol <= 66) { - if(!document.getElementById("v-full").classList.contains("hide")) { - Helper.toggleClass("#v-full", "hide"); - Helper.toggleClass("#v-full-overlay", "hide"); - } - if(document.getElementById("v-medium").classList.contains("hide")) { - Helper.toggleClass("#v-medium", "hide"); - Helper.toggleClass("#v-medium-overlay", "hide"); - } - if(!document.getElementById("v-low").classList.contains("hide")) { - Helper.toggleClass("#v-low", "hide"); - Helper.toggleClass("#v-low-overlay", "hide"); - } - if(!document.getElementById("v-mute").classList.contains("hide")) { - Helper.toggleClass("#v-mute", "hide"); - Helper.toggleClass("#v-mute-overlay", "hide"); - } - } else if(vol >= 67 && vol <= 100) { - if(document.getElementById("v-full").classList.contains("hide")) { - Helper.toggleClass("#v-full", "hide"); - Helper.toggleClass("#v-full-overlay", "hide"); - } - if(!document.getElementById("v-medium").classList.contains("hide")) { - Helper.toggleClass("#v-medium", "hide"); - Helper.toggleClass("#v-medium-overlay", "hide"); - } - if(!document.getElementById("v-low").classList.contains("hide")) { - Helper.toggleClass("#v-low", "hide"); - Helper.toggleClass("#v-low-overlay", "hide"); - } - if(!document.getElementById("v-mute").classList.contains("hide")) { - Helper.toggleClass("#v-mute", "hide"); - Helper.toggleClass("#v-mute-overlay", "hide"); - } - } - } else { - if(!document.getElementById("v-full").classList.contains("hide")) { - Helper.toggleClass("#v-full", "hide"); - Helper.toggleClass("#v-full-overlay", "hide"); - } - if(!document.getElementById("v-medium").classList.contains("hide")) { - Helper.toggleClass("#v-medium", "hide"); - Helper.toggleClass("#v-medium-overlay", "hide"); - } - if(!document.getElementById("v-low").classList.contains("hide")) { - Helper.toggleClass("#v-low", "hide"); - Helper.toggleClass("#v-low-overlay", "hide"); - } - if(document.getElementById("v-mute").classList.contains("hide")) { - Helper.toggleClass("#v-mute", "hide"); - Helper.toggleClass("#v-mute-overlay", "hide"); - } - } - }, - - playPause: function() { - if(videoSource == "soundcloud") { - if(scUsingWidget) { - Player.soundcloud_player.isPaused(function(playing) { - playing = !playing; - if(!playing) { - Helper.addClass("#play", "hide"); - Helper.removeClass("#pause", "hide"); - Player.soundcloud_player.play(); - } else { - Helper.removeClass("#play", "hide"); - Helper.addClass("#pause", "hide"); - Player.soundcloud_player.pause(); - } - }) - } else { - if(!Player.soundcloud_player.isPlaying()) { - Helper.addClass("#play", "hide"); - Helper.removeClass("#pause", "hide"); - Player.soundcloud_player.play(); - } else { - Helper.removeClass("#play", "hide"); - Helper.addClass("#pause", "hide"); - Player.soundcloud_player.pause(); - } - } - } else { - state = Player.player.getPlayerState(); - button = document.getElementById("playpause"); - if(state == YT.PlayerState.PLAYING) { - Player.pauseVideo(); - } else if(state == YT.PlayerState.PAUSED) { - Player.playVideo(); - } - } - }, - - visualVolume: function(val) { - var elmnt = document.getElementsByClassName("volume-handle")[0]; - var cmp_elmnt = document.getElementById("volume"); - var slid_elmnt = document.getElementsByClassName("volume-slid")[0]; - - if(slider_type != "vertical") { - var pos = (cmp_elmnt.offsetWidth / 100) * val; - var volume = 0; - //var pos = pos3 - cmp_elmnt.offsetLeft; - if(pos > -1 && pos < cmp_elmnt.offsetWidth + 1) { - elmnt.style.left = pos + "px"; - volume = pos / cmp_elmnt.offsetWidth; - } else if(pos < 1) { - elmnt.style.left = 0 + "px"; - volume = 0; - } else { - elmnt.style.left = cmp_elmnt.offsetWidth + "px"; - volume = 1; - } - - slid_elmnt.style.width = volume * 100 + "%"; - Playercontrols.setVolume(volume * 100); - } else { - var pos = val; - var pos0 = window.innerHeight - pos - 14; - var volume = 0; - if(pos0 > 64 && pos0 < 164) { - volume = (pos0 - 64) / 100; - } else if(pos0 < 65) { - volume = 0; - } else { - volume = 1; - } - slid_elmnt.style.height = volume * 100 + "%"; - Playercontrols.setVolume(volume * 100); - } - }, - - volumeOptions: function() { - if(!chromecastAvailable) { - if(Player.player.isMuted()) { - Player.player.unMute(); - vol = Player.player.getVolume(); - Playercontrols.visualVolume(Player.player.getVolume()); - } else { - Player.player.mute(); - Playercontrols.visualVolume(0); - } - } - }, - - hoverMute: function(foo) { - vol = Player.player.getVolume(); + initSlider: function() { + try { + vol = Crypt.get_volume(); + } catch (e) { + vol = 100; } + try { + if (document.getElementsByClassName("volume-slid")) { + document.getElementById("volume").innerHTML = ""; + } + } catch (e) {} + if ((Helper.mobilecheck() || slider_type == "vertical") && !embed) { + //slider_values.orientation = "vertical"; + if ( + !document.querySelector(".volume-container").classList.contains("hide") + ) { + Helper.toggleClass(".volume-container", "hide"); + } + } + document + .getElementById("volume") + .insertAdjacentHTML( + "beforeend", + "
    " + ); + document + .getElementById("volume") + .insertAdjacentHTML( + "beforeend", + "
    " + ); + if (slider_type != "vertical") { + Helper.removeClass("#volume", "vertical"); + Helper.css(".volume-slid", "width", vol + "%"); + Helper.css(".volume-handle", "left", "calc(" + vol + "% - 1px)"); + } else { + 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; + //Playercontrols.visualVolume(slider_values); + //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( + "touchstart", + function(e) { + e.preventDefault(); + Playercontrols.dragMouseDown(e, "player"); + }, + false + ); + }, + + dragMouseDown: function(e, element) { + e = e || window.event; + // get the mouse cursor position at startup: + document.onmouseup = function() { + Playercontrols.closeDragElement(element); + }; + document.getElementById("volume").addEventListener( + "touchend", + function() { + Playercontrols.closeDragElement(element); + }, + false + ); + // call a function whenever the cursor moves: + document.onmousemove = function(e) { + Playercontrols.elementDrag(e, element); + }; + document.getElementById("volume").addEventListener( + "touchmove", + function(e) { + e.preventDefault(); + Playercontrols.elementDrag(e, element); + }, + false + ); + }, + + elementDrag: function(e, element) { + var elmnt; + var cmp_elmnt; + var slid_elmnt; + if (element == "player") { + elmnt = document.getElementsByClassName("volume-handle")[0]; + cmp_elmnt = document.getElementById("volume"); + slid_elmnt = document.getElementsByClassName("volume-slid")[0]; + } else { + elmnt = document.getElementsByClassName("volume-handle-remote")[0]; + cmp_elmnt = document.getElementById("volume-control-remote"); + slid_elmnt = document.getElementsByClassName("volume-slid-remote")[0]; + } + e = e || window.event; + + var pos3 = e.clientX; + var pos4 = e.clientY; + if (pos3 == undefined) { + pos3 = e.touches[0].clientX; + } + if (pos4 == undefined) { + pos4 = e.touches[0].clientY; + } + var volume = 0; + if (slider_type != "vertical" || element != "player") { + if (elmnt.className.indexOf("ui-state-active") == -1) { + elmnt.className += " ui-state-active"; + } + var pos = pos3 - cmp_elmnt.offsetLeft; + if (pos > -1 && pos < cmp_elmnt.offsetWidth + 1) { + elmnt.style.left = pos + "px"; + volume = pos / cmp_elmnt.offsetWidth; + } else if (pos < 1) { + elmnt.style.left = 0 + "px"; + volume = 0; + } else { + elmnt.style.left = cmp_elmnt.offsetWidth + "px"; + volume = 1; + } + 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 { + var pos = pos4 - cmp_elmnt.offsetTop; + var pos0 = window.innerHeight - pos - 14; + + if (pos0 > 64 && pos0 < 164) { + volume = (pos0 - 64) / 100; + } else if (pos0 < 65) { + volume = 0; + } else { + volume = 1; + } + slid_elmnt.style.height = volume * 100 + "%"; + Playercontrols.setVolume(volume * 100); + } + try { + Crypt.set_volume(volume * 100); + } catch (e) {} + }, + + closeDragElement: function(element) { + /* stop moving when mouse button is released:*/ + var elmnt; + if (element == "player") { + elmnt = document.getElementsByClassName("volume-handle")[0]; + } else { + elmnt = document.getElementsByClassName("volume-handle-remote")[0]; + } + if (elmnt.className.indexOf("ui-state-active") > -1) { + setTimeout(function() { + elmnt.classList.remove("ui-state-active"); + }, 1); + } + document.onmouseup = null; + document.onmousemove = null; + if (element == "player") { + document.getElementById("volume").removeEventListener( + "touchmove", + function(e) { + e.preventDefault(); + Playercontrols.elementDrag(e, element); + }, + false + ); + document.getElementById("volume").removeEventListener( + "touchend", + function() { + Playercontrols.closeDragElement(element); + }, + false + ); + } else { + document.getElementById("volume-control-remote").removeEventListener( + "touchmove", + function(e) { + e.preventDefault(); + Playercontrols.elementDrag(e); + }, + false + ); + document.getElementById("volume-control-remote").removeEventListener( + "touchend", + function() { + Playercontrols.closeDragElement(); + }, + false + ); + } + }, + + fullscreen: function() { + var playerElement; + if (fireplace_initiated) { + playerElement = document.getElementById("fireplace_player"); + } else { + playerElement = document.getElementById("player"); + } + + var requestFullScreen = + playerElement.requestFullScreen || + playerElement.mozRequestFullScreen || + playerElement.webkitRequestFullScreen; + if (requestFullScreen) { + requestFullScreen.bind(playerElement)(); + } + }, + + play_pause: function() { + if (!chromecastAvailable) { + if (videoSource == "soundcloud") { + if (scUsingWidget) { + Player.soundcloud_player.isPaused(function(playing) { + playing = !playing; + if (!playing) { + Player.playVideo(); + } else { + Player.pauseVideo(); + } + was_stopped = true; + }); + } else { + if (!Player.soundcloud_player.isPlaying()) { + Player.playVideo(); + } else { + Player.pauseVideo(); + } + } + } else { + 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){ + //document.getElementById("player").style.display = "none"; + Helper.css("#player", "display", "none"); + 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 + ) { + Player.playVideo(); + //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ + if (Helper.mobilecheck() && !window.MSStream) { + //document.getElementById("player").style.display = "block"; + Helper.css("#player", "display", "block"); + Helper.toggleClass(".video-container", "click-through"); + Helper.toggleClass(".page-footer", "padding-bottom-extra"); + } + } + } + } else { + Playercontrols.play_pause_show(); + } + }, + + play_pause_show: function() { + if (chromecastAvailable) { + if (document.getElementById("play").classList.contains("hide")) { + Player.pauseVideo(); + } else if (document.getElementById("pause").classList.contains("hide")) { + Player.playVideo(); + } + } else { + if (!document.getElementById("pause").classList.contains("hide")) { + Helper.toggleClass("#pause", "hide"); + Helper.toggleClass("#pause-overlay", "hide"); + } + if (document.getElementById("play").classList.contains("hide")) { + Helper.toggleClass("#play", "hide"); + Helper.toggleClass("#play-overlay", "hide"); + } + } + }, + + settings: function() { + Helper.toggleClass("#qS", "hide"); + }, + + changeQuality: function(wantedQ) { + if (Player.player.getPlaybackQuality != wantedQ) { + Player.player.setPlaybackQuality(wantedQ); + Player.player.getPlaybackQuality(); + } + Helper.toggleClass("#qS", "hide"); + }, + + mute_video: function() { + if (Helper.mobilecheck() || slider_type == "vertical") { + Helper.toggleClass(".volume-container", "hide"); + } else { + if (!Player.player.isMuted()) { + 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" }); + Player.player.unMute(); + Playercontrols.choose_button(Player.player.getVolume(), false); + } + } + }, + + setVolume: function(vol) { + Player.setVolume(vol); + if (scUsingWidget) Player.soundcloud_player.setVolume(vol); + else Player.soundcloud_player.setVolume(vol / 100); + Playercontrols.choose_button(vol, false); + if (Player.player.isMuted()) Player.player.unMute(); + }, + + choose_button: function(vol, mute) { + if (!mute) { + if (vol >= 0 && vol <= 33) { + if (!document.getElementById("v-full").classList.contains("hide")) { + Helper.toggleClass("#v-full", "hide"); + Helper.toggleClass("#v-full-overlay", "hide"); + } + if (!document.getElementById("v-medium").classList.contains("hide")) { + Helper.toggleClass("#v-medium", "hide"); + Helper.toggleClass("#v-medium-overlay", "hide"); + } + if (document.getElementById("v-low").classList.contains("hide")) { + Helper.toggleClass("#v-low", "hide"); + Helper.toggleClass("#v-low-overlay", "hide"); + } + if (!document.getElementById("v-mute").classList.contains("hide")) { + Helper.toggleClass("#v-mute", "hide"); + Helper.toggleClass("#v-mute-overlay", "hide"); + } + } else if (vol >= 34 && vol <= 66) { + if (!document.getElementById("v-full").classList.contains("hide")) { + Helper.toggleClass("#v-full", "hide"); + Helper.toggleClass("#v-full-overlay", "hide"); + } + if (document.getElementById("v-medium").classList.contains("hide")) { + Helper.toggleClass("#v-medium", "hide"); + Helper.toggleClass("#v-medium-overlay", "hide"); + } + if (!document.getElementById("v-low").classList.contains("hide")) { + Helper.toggleClass("#v-low", "hide"); + Helper.toggleClass("#v-low-overlay", "hide"); + } + if (!document.getElementById("v-mute").classList.contains("hide")) { + Helper.toggleClass("#v-mute", "hide"); + Helper.toggleClass("#v-mute-overlay", "hide"); + } + } else if (vol >= 67 && vol <= 100) { + if (document.getElementById("v-full").classList.contains("hide")) { + Helper.toggleClass("#v-full", "hide"); + Helper.toggleClass("#v-full-overlay", "hide"); + } + if (!document.getElementById("v-medium").classList.contains("hide")) { + Helper.toggleClass("#v-medium", "hide"); + Helper.toggleClass("#v-medium-overlay", "hide"); + } + if (!document.getElementById("v-low").classList.contains("hide")) { + Helper.toggleClass("#v-low", "hide"); + Helper.toggleClass("#v-low-overlay", "hide"); + } + if (!document.getElementById("v-mute").classList.contains("hide")) { + Helper.toggleClass("#v-mute", "hide"); + Helper.toggleClass("#v-mute-overlay", "hide"); + } + } + } else { + if (!document.getElementById("v-full").classList.contains("hide")) { + Helper.toggleClass("#v-full", "hide"); + Helper.toggleClass("#v-full-overlay", "hide"); + } + if (!document.getElementById("v-medium").classList.contains("hide")) { + Helper.toggleClass("#v-medium", "hide"); + Helper.toggleClass("#v-medium-overlay", "hide"); + } + if (!document.getElementById("v-low").classList.contains("hide")) { + Helper.toggleClass("#v-low", "hide"); + Helper.toggleClass("#v-low-overlay", "hide"); + } + if (document.getElementById("v-mute").classList.contains("hide")) { + Helper.toggleClass("#v-mute", "hide"); + Helper.toggleClass("#v-mute-overlay", "hide"); + } + } + }, + + playPause: function() { + if (videoSource == "soundcloud") { + if (scUsingWidget) { + Player.soundcloud_player.isPaused(function(playing) { + playing = !playing; + if (!playing) { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + Player.soundcloud_player.play(); + } else { + Helper.removeClass("#play", "hide"); + Helper.addClass("#pause", "hide"); + Player.soundcloud_player.pause(); + } + }); + } else { + if (!Player.soundcloud_player.isPlaying()) { + Helper.addClass("#play", "hide"); + Helper.removeClass("#pause", "hide"); + Player.soundcloud_player.play(); + } else { + Helper.removeClass("#play", "hide"); + Helper.addClass("#pause", "hide"); + Player.soundcloud_player.pause(); + } + } + } else { + state = Player.player.getPlayerState(); + button = document.getElementById("playpause"); + if (state == YT.PlayerState.PLAYING) { + Player.pauseVideo(); + } else if (state == YT.PlayerState.PAUSED) { + Player.playVideo(); + } + } + }, + + visualVolume: function(val) { + var elmnt = document.getElementsByClassName("volume-handle")[0]; + var cmp_elmnt = document.getElementById("volume"); + var slid_elmnt = document.getElementsByClassName("volume-slid")[0]; + + if (slider_type != "vertical") { + var pos = (cmp_elmnt.offsetWidth / 100) * val; + var volume = 0; + //var pos = pos3 - cmp_elmnt.offsetLeft; + if (pos > -1 && pos < cmp_elmnt.offsetWidth + 1) { + elmnt.style.left = pos + "px"; + volume = pos / cmp_elmnt.offsetWidth; + } else if (pos < 1) { + elmnt.style.left = 0 + "px"; + volume = 0; + } else { + elmnt.style.left = cmp_elmnt.offsetWidth + "px"; + volume = 1; + } + + slid_elmnt.style.width = volume * 100 + "%"; + Playercontrols.setVolume(volume * 100); + } else { + var pos = val; + var pos0 = window.innerHeight - pos - 14; + var volume = 0; + if (pos0 > 64 && pos0 < 164) { + volume = (pos0 - 64) / 100; + } else if (pos0 < 65) { + volume = 0; + } else { + volume = 1; + } + slid_elmnt.style.height = volume * 100 + "%"; + Playercontrols.setVolume(volume * 100); + } + }, + + volumeOptions: function() { + if (!chromecastAvailable) { + if (Player.player.isMuted()) { + Player.player.unMute(); + vol = Player.player.getVolume(); + Playercontrols.visualVolume(Player.player.getVolume()); + } else { + Player.player.mute(); + Playercontrols.visualVolume(0); + } + } + }, + + hoverMute: function(foo) { + vol = Player.player.getVolume(); + } }; diff --git a/server/public/assets/js/remotecontroller.js b/server/public/assets/js/remotecontroller.js index 6c2ade56..ada92ad1 100755 --- a/server/public/assets/js/remotecontroller.js +++ b/server/public/assets/js/remotecontroller.js @@ -2,107 +2,136 @@ var start = true; 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); - return check; + 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); + 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, - 'secure': true + "sync disconnect on unload": true, + secure: true }; M.Modal.init(document.getElementById("about")); M.Modal.init(document.getElementById("contact")); M.Modal.init(document.getElementById("help")); - if(window.location.hostname == "remote.zoff.me") add = "https://zoff.me"; + if (window.location.hostname == "remote.zoff.me") add = "https://zoff.me"; else add = "localhost"; - socket = io.connect(add, connection_options); - socket.on('update_required', function() { - window.location.reload(true); + socket = io.connect( + add, + connection_options + ); + socket.on("update_required", function() { + window.location.reload(true); }); id = window.location.pathname.split("/")[1]; - if(id) - { - id = id.toLowerCase(); - Remotecontroller.control(); + if (id) { + id = id.toLowerCase(); + Remotecontroller.control(); } -}, false); - + }, + false +); function handleEvent(e, target, tried, type) { - for(var y = 0; y < e.path.length; y++) { - var target = e.path[y]; - if(dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) { - dynamicListeners[type]["#" + target.id].call(target); - return; - } else { - if(target.classList == undefined) return; - for(var i = 0; i < target.classList.length; i++) { - if(dynamicListeners[type] && dynamicListeners[type]["." + target.classList[i]]) { - dynamicListeners[type]["." + target.classList[i]].call(target); - return; - } - } + for (var y = 0; y < e.path.length; y++) { + var target = e.path[y]; + if (dynamicListeners[type] && dynamicListeners[type]["#" + target.id]) { + dynamicListeners[type]["#" + target.id].call(target); + return; + } else { + if (target.classList == undefined) return; + for (var i = 0; i < target.classList.length; i++) { + if ( + dynamicListeners[type] && + dynamicListeners[type]["." + target.classList[i]] + ) { + dynamicListeners[type]["." + target.classList[i]].call(target); + return; } + } } + } } function addListener(type, element, callback) { - if(dynamicListeners[type] == undefined) dynamicListeners[type] = {}; - dynamicListeners[type][element] = callback; + if (dynamicListeners[type] == undefined) dynamicListeners[type] = {}; + 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"}); + socket.emit("id", { id: id, type: "play", value: "mock" }); }); addListener("click", "#pausebutton", function() { - socket.emit("id", {id: id, type: "pause", value: "mock"}); + socket.emit("id", { id: id, type: "pause", value: "mock" }); }); addListener("click", "#skipbutton", function() { - socket.emit("id", {id: id, type: "skip", value: "mock"}); + socket.emit("id", { id: id, type: "skip", value: "mock" }); }); addListener("submit", "#remoteform", function(e) { - event.preventDefault(); - Remotecontroller.control(); + event.preventDefault(); + Remotecontroller.control(); }); var Remotecontroller = { + control: function() { + if (start) { + if (!id) { + id = document.getElementById("remoteform").chan.value; + window.history.pushState("object or string", "Title", "/" + id); + } + document.getElementById("remoteform").chan.value = ""; + start = false; - control: function() { - if(start) { - if(!id) { - id = document.getElementById("remoteform").chan.value; - window.history.pushState("object or string", "Title", "/"+id); - } - document.getElementById("remoteform").chan.value = ""; - start = false; + Helper.css(".volume-elements", "display", "flex"); + Helper.css(".rc", "display", "block"); - Helper.css(".volume-elements", "display", "flex"); - Helper.css(".rc", "display", "block"); + //document.getElementById("base").setAttribute("onsubmit", "control(); return false;"); + 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("base").setAttribute("onsubmit", "control(); return false;"); - 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"; - - // - /*$("#volume-control").slider({ + // + /*$("#volume-control").slider({ min: 0, max: 100, value: 100, @@ -113,94 +142,123 @@ var Remotecontroller = { } //});*/ - document.getElementById("volume").insertAdjacentHTML("beforeend", "
    "); - document.getElementById("volume").insertAdjacentHTML("beforeend", "
    "); + document + .getElementById("volume") + .insertAdjacentHTML("beforeend", "
    "); + document + .getElementById("volume") + .insertAdjacentHTML("beforeend", "
    "); - 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").addEventListener("touchstart", function(e) { - e.preventDefault(); - Remotecontroller.dragMouseDown(e); - }, 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()}); - document.getElementById("search").value = ""; - } + 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").addEventListener( + "touchstart", + function(e) { + e.preventDefault(); + Remotecontroller.dragMouseDown(e); + }, + 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() + }); + 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() { + Remotecontroller.closeDragElement(); + }, + false + ); + document.getElementById("volume").addEventListener( + "touchmove", + function(e) { + e.preventDefault(); + Remotecontroller.elementDrag(e); + }, + false + ); + }, + elementDrag: function(e) { + var elmnt = document.getElementsByClassName("volume-handle")[0]; + e = e || window.event; - 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() { - Remotecontroller.closeDragElement(); - }, false); - document.getElementById("volume").addEventListener("touchmove", function(e) { - e.preventDefault(); - Remotecontroller.elementDrag(e); - }, false); - }, + var pos3 = e.clientX; + if (pos3 == undefined) { + pos3 = e.touches[0].clientX; + } - elementDrag: function(e) { - var elmnt = document.getElementsByClassName("volume-handle")[0]; - e = e || window.event; + if (elmnt.className.indexOf("ui-state-active") == -1) { + elmnt.className += " ui-state-active"; + } + var pos = pos3 - document.getElementById("volume").offsetLeft; + 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 + "%"; + } else if (pos < 0) { + var volume = 0; + document.getElementsByClassName("volume-slid")[0].style.width = + volume * 100 + "%"; + } else { + var volume = 1; + document.getElementsByClassName("volume-slid")[0].style.width = + volume * 100 + "%"; + } - var pos3 = e.clientX; - if(pos3 == undefined) { - pos3 = e.touches[0].clientX; - } + socket.emit("id", { id: id, type: "volume", value: volume * 100 }); - if(elmnt.className.indexOf("ui-state-active") == -1) { - elmnt.className += " ui-state-active"; - } - var pos = pos3 - document.getElementById("volume").offsetLeft; - 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 + "%"; - } else if(pos < 0) { - var volume = 0; - document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%"; - } else { - var volume = 1; - document.getElementsByClassName("volume-slid")[0].style.width = volume * 100 + "%"; - } + try { + Crypt.set_volume(volume * 100); + } catch (e) {} + }, - socket.emit("id", {id: id, type: "volume", value: volume * 100}); + closeDragElement: function() { + /* stop moving when mouse button is released:*/ + var elmnt = document.getElementsByClassName("volume-handle")[0]; + if (elmnt.className.indexOf("ui-state-active") > -1) { + setTimeout(function() { + elmnt.classList.remove("ui-state-active"); + }, 1); + } + document.onmouseup = null; + document.onmousemove = null; - try{Crypt.set_volume(volume * 100);}catch(e){} - }, - - closeDragElement: function() { - /* stop moving when mouse button is released:*/ - var elmnt = document.getElementsByClassName("volume-handle")[0]; - if(elmnt.className.indexOf("ui-state-active") > -1) { - setTimeout(function(){ - elmnt.classList.remove("ui-state-active"); - }, 1); - } - document.onmouseup = null; - document.onmousemove = null; - - document.getElementById("volume").removeEventListener("touchmove", function(e) { - e.preventDefault(); - Playercontrols.elementDrag(e); - }); - document.getElementById("volume").removeEventListener("touchend", function() { - Playercontrols.closeDragElement(); - }, false); - - }, + document + .getElementById("volume") + .removeEventListener("touchmove", function(e) { + e.preventDefault(); + Playercontrols.elementDrag(e); + }); + document.getElementById("volume").removeEventListener( + "touchend", + function() { + Playercontrols.closeDragElement(); + }, + false + ); + } }; diff --git a/server/public/assets/js/search.js b/server/public/assets/js/search.js index 479cf2e0..75149682 100755 --- a/server/public/assets/js/search.js +++ b/server/public/assets/js/search.js @@ -1,281 +1,394 @@ var Search = { + submitArray: [], + submitArrayExpected: null, + submitYouTubeArrayIds: [], + submitYouTubeArray: [], + submitYouTubeExpected: 0, + submitYouTubeError: false, - submitArray: [], - submitArrayExpected: null, - submitYouTubeArrayIds: [], - submitYouTubeArray: [], - submitYouTubeExpected: 0, - submitYouTubeError: false, + showSearch: function() { + Helper.toggleClass("#search-wrapper", "hide"); + 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"); - showSearch: function(){ - Helper.toggleClass("#search-wrapper", "hide"); - 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.getElementById("results").innerHTML = ""; + document.getElementById("results_soundcloud").innerHTML = ""; + Helper.css(".search_results", "display", "none"); + //Helper.css(".results-tabs", "display", "none"); + document.querySelector(".search_input").value = ""; + document.querySelector("#search-btn i").innerText = "search"; + //Helper.css(document.querySelector(".search_results .col.s12"), "display", "none"); + } else { + document.querySelector("#search-btn i").innerText = "close"; + //Helper.css(".search_results", "display", "block"); + } + document.querySelector("#search").focus(); + }, + search: function(search_input, retried, related, pagination) { + if (result_html === undefined || empty_results_html === undefined) { + result_html = document.getElementById("temp-results-container"); + empty_results_html = Helper.html("#empty-results-container"); + } + if ( + !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"; + 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="; + 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 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.removeClass("#search_loader", "hide"); + Helper.addClass(".search_loader_spinner", "active"); + //Helper.removeClass(".search_results", "hide"); + //Helper.css(".results-tabs", "display", "none"); + + Helper.ajax({ + type: "GET", + url: yt_url, + dataType: "jsonp", + success: function(response) { + response = JSON.parse(response); + var nextPageToken = response.nextPageToken; + var prevPageToken = response.prevPageToken; + //Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); + if (response.items.length === 0) { document.getElementById("results").innerHTML = ""; - document.getElementById("results_soundcloud").innerHTML = ""; - Helper.css(".search_results", "display", "none"); - //Helper.css(".results-tabs", "display", "none"); - document.querySelector(".search_input").value = ""; - document.querySelector("#search-btn i").innerText = "search"; - //Helper.css(document.querySelector(".search_results .col.s12"), "display", "none"); - } else { - document.querySelector("#search-btn i").innerText = "close"; - //Helper.css(".search_results", "display", "block"); - } - document.querySelector("#search").focus(); - - }, - - search: function(search_input, retried, related, pagination){ - if(result_html === undefined || empty_results_html === undefined) { - result_html = document.getElementById("temp-results-container"); - empty_results_html = Helper.html("#empty-results-container"); - } - if(!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"; - 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="; - 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 vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key.youtube+"&id="; + Helper.css("#results", "display", "block"); + //Helper.css(".results-tabs", "display", "block"); + //$("").appendTo($("#results")).show("blind", 83.33); + document + .getElementById("results") + .insertAdjacentHTML( + "beforeend", + "
    " + + empty_results_html + + "
    " + ); + 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 + ","; } - //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.removeClass("#search_loader", "hide"); - Helper.addClass(".search_loader_spinner", "active"); - //Helper.removeClass(".search_results", "hide"); - //Helper.css(".results-tabs", "display", "none"); Helper.ajax({ - type: "GET", - url: yt_url, - dataType: "jsonp", - success: function(response){ - response = JSON.parse(response); - var nextPageToken = response.nextPageToken; - var prevPageToken = response.prevPageToken; - //Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); - if(response.items.length === 0) { - document.getElementById("results").innerHTML = ""; - Helper.css("#results", "display", "block"); - //Helper.css(".results-tabs", "display", "block"); - //$("").appendTo($("#results")).show("blind", 83.33); - document.getElementById("results").insertAdjacentHTML("beforeend", "
    "+empty_results_html+"
    "); - Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide"); - Helper.addClass("#search_loader", "hide"); - Helper.removeClass(".search_loader_spinner", "active"); + type: "GET", + url: vid_url, + dataType: "jsonp", + success: function(response) { + response = JSON.parse(response); + var output = ""; + var pre_result = document.createElement("div"); + pre_result.innerHTML = result_html.outerHTML; - } else if(response.items){ - for(var i = 0; i < response.items.length; i++) { - vid_url += response.items[i].id.videoId+","; - } - - Helper.ajax({ - type: "GET", - url: vid_url, - dataType:"jsonp", - success: function(response){ - response = JSON.parse(response); - var output = ""; - var pre_result = document.createElement("div"); - pre_result.innerHTML = result_html.outerHTML; - - //$("#results").append(result_html); - for(var i = 0; i < response.items.length; i++) { - var song = response.items[i]; - var duration=song.contentDetails.duration; - var secs=Search.durationToSeconds(duration); - var _temp_duration = Helper.secondsToOther(secs); - if((longsongs != undefined && !longsongs) || secs<720){ - 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"); - 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(".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.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.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 != "") { - output += songs.innerHTML; - } - } - } - var fresh = false; - if(document.querySelectorAll("#inner-results").length == 0) { - fresh = true; - } - document.getElementById("results").innerHTML = ""; - if(output.length > 0) { - //$(window).scrollTop(0); - if(!pagination && fresh) { - Helper.css(".search_results", "display", "none"); - } - document.getElementById("results").insertAdjacentHTML("beforeend", pagination_buttons_html); - //$("
    "+output+"
    ").prependTo($("#results")); - document.getElementById("results").insertAdjacentHTML("afterbegin", "
    "+output+"
    "); - /*if(!pagination && fresh) { - $(".search_results").slideDown(); - }*/ - document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:hidden !important") - - if(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); - } else { - Helper.addClass(".prev-results-button", "disabled"); - } - - document.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.addClass("#search_loader", "hide"); - Helper.removeClass(".search_loader_spinner", "active"); - 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 { - //$("").appendTo($("#results")).show("blind", 83.33); - document.getElementById("results").insertAdjacentHTML("beforeend", "
    "+empty_results_html+"
    "); - Helper.css("#results", "display", "block"); - if(document.querySelector("#results_soundcloud").innerHTML.length > 0) { - Helper.css(".search_results", "display", "block"); - } - Helper.removeClass(document.querySelector("#search-btn .material-icons"), "hide"); - Helper.addClass("#search_loader", "hide"); - Helper.removeClass(".search_loader_spinner", "active"); - } - } - }); - } - } - }); - } else { - Helper.removeClass(".main", "blurT"); - Helper.removeClass("#controls", "blurT"); - Helper.removeClass(".main", "clickthrough"); - //Helper.css(".results-tabs", "display", "none"); - Helper.css(".search_results", "display", "none"); - } - }, - - soundcloudSearch: function(keyword) { - if(!soundcloud_enabled) { - document.querySelector("#results_soundcloud").innerHTML = '
    No SoundCloud API-key, search disabled..
    '; - - return; - } - if(keyword.length == 0) return; - SC_player.get('/tracks', { - q: keyword - }).then(function(tracks) { - var pre_result = document.createElement("div"); - pre_result.innerHTML = result_html.outerHTML; - //$("#results").append(result_html); - //Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); - var output = ""; - for(var i = 0; i < tracks.length; i++) { - var song = tracks[i]; - if(!song.streamable) continue; - var duration=Math.floor(song.duration / 1000); - //var secs=Search.durationToSeconds(duration); - var secs = duration; - var _temp_duration = Helper.secondsToOther(secs); - if(longsongs == undefined) longsongs = true; - if((longsongs != undefined && !longsongs) || secs<720){ - var title=song.title; - if(title.indexOf(song.user.username) == -1) { - title = song.user.username + " - " + 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"); - var thumb=song.artwork_url; - //var thumb = null; - if(thumb == null) thumb = song.waveform_url; - else thumb = thumb.replace("-large.jpg", "-t500x500.jpg"); + //$("#results").append(result_html); + for (var i = 0; i < response.items.length; i++) { + var song = response.items[i]; + var duration = song.contentDetails.duration; + var secs = Search.durationToSeconds(duration); + var _temp_duration = Helper.secondsToOther(secs); + if ((longsongs != undefined && !longsongs) || secs < 720) { + 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"); + 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-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.querySelector("#add-many").setAttribute("data-video-length", secs); + songs + .querySelector("#add-many") + .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.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.querySelector("#temp-results").setAttribute("data-type-thumbnail", thumb); + songs + .querySelector("#temp-results") + .setAttribute("data-video-id", id); + 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", + "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 != "") { - output += songs.innerHTML; + if (songs.innerHTML != undefined && songs.innerHTML != "") { + output += songs.innerHTML; } + } } - } - var fresh = false; - if(document.querySelectorAll("#inner-results").length == 0) { - fresh = true; - } - document.getElementById("results_soundcloud").innerHTML = ""; - if(output.length > 0) { + var fresh = false; + if (document.querySelectorAll("#inner-results").length == 0) { + fresh = true; + } + document.getElementById("results").innerHTML = ""; + if (output.length > 0) { + //$(window).scrollTop(0); + if (!pagination && fresh) { + Helper.css(".search_results", "display", "none"); + } + document + .getElementById("results") + .insertAdjacentHTML("beforeend", pagination_buttons_html); + //$("
    "+output+"
    ").prependTo($("#results")); + document + .getElementById("results") + .insertAdjacentHTML( + "afterbegin", + "
    " + output + "
    " + ); + /*if(!pagination && fresh) { + $(".search_results").slideDown(); + }*/ + document + .getElementsByTagName("body")[0] + .setAttribute("style", "overflow-y:hidden !important"); - //$(window).scrollTop(0); - /*if(!pagination && fresh) { + if (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); + } else { + Helper.addClass(".prev-results-button", "disabled"); + } + + document + .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.addClass("#search_loader", "hide"); + Helper.removeClass(".search_loader_spinner", "active"); + 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 { + //$("").appendTo($("#results")).show("blind", 83.33); + document + .getElementById("results") + .insertAdjacentHTML( + "beforeend", + "
    " + + empty_results_html + + "
    " + ); + Helper.css("#results", "display", "block"); + if ( + document.querySelector("#results_soundcloud").innerHTML + .length > 0 + ) { + Helper.css(".search_results", "display", "block"); + } + Helper.removeClass( + document.querySelector("#search-btn .material-icons"), + "hide" + ); + Helper.addClass("#search_loader", "hide"); + Helper.removeClass(".search_loader_spinner", "active"); + } + } + }); + } + } + }); + } else { + Helper.removeClass(".main", "blurT"); + Helper.removeClass("#controls", "blurT"); + Helper.removeClass(".main", "clickthrough"); + //Helper.css(".results-tabs", "display", "none"); + Helper.css(".search_results", "display", "none"); + } + }, + + soundcloudSearch: function(keyword) { + if (!soundcloud_enabled) { + document.querySelector("#results_soundcloud").innerHTML = + '
    No SoundCloud API-key, search disabled..
    '; + + return; + } + if (keyword.length == 0) return; + SC_player.get("/tracks", { + q: keyword + }).then(function(tracks) { + var pre_result = document.createElement("div"); + pre_result.innerHTML = result_html.outerHTML; + //$("#results").append(result_html); + //Helper.css(document.querySelector(".search_results .col.s12"), "display", "block"); + var output = ""; + for (var i = 0; i < tracks.length; i++) { + var song = tracks[i]; + if (!song.streamable) continue; + var duration = Math.floor(song.duration / 1000); + //var secs=Search.durationToSeconds(duration); + var secs = duration; + var _temp_duration = Helper.secondsToOther(secs); + if (longsongs == undefined) longsongs = true; + if ((longsongs != undefined && !longsongs) || secs < 720) { + var title = song.title; + if (title.indexOf(song.user.username) == -1) { + title = song.user.username + " - " + 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"); + var thumb = song.artwork_url; + //var thumb = null; + if (thumb == null) thumb = song.waveform_url; + else thumb = thumb.replace("-large.jpg", "-t500x500.jpg"); + //$("#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(".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 + .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 + .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 + .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 + .querySelector("#temp-results") + .setAttribute("data-type-thumbnail", thumb); + //$($(songs).querySelector("div")[0]).setAttribute("id", id) + //output += undefined; + if (songs.innerHTML != undefined && songs.innerHTML != "") { + output += songs.innerHTML; + } + } + } + var fresh = false; + if (document.querySelectorAll("#inner-results").length == 0) { + fresh = true; + } + 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); - //$("
    "+output+"
    ").prependTo($("#results")); - document.getElementById("results_soundcloud").insertAdjacentHTML("afterbegin", "
    "+output+"
    "); - if(!pagination && fresh) { - //$(".search_results").slideDown(); - } + //document.getElementById("results_soundcloud").insertAdjacentHTML("beforeend", pagination_buttons_html); + //$("
    "+output+"
    ").prependTo($("#results")); + document + .getElementById("results_soundcloud") + .insertAdjacentHTML( + "afterbegin", + "
    " + output + "
    " + ); + if (!pagination && fresh) { + //$(".search_results").slideDown(); + } - /*if(nextPageToken) { + /*if(nextPageToken) { document.querySelector(".next-results-button").setAttribute("data-pagination", nextPageToken); } else { Helper.addClass(".next-results-button", "disabled"); @@ -288,19 +401,27 @@ var Search = { document.querySelector(".pagination-results a").setAttribute("data-original-search", search_input); */ - //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); + //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); - /*Helper.removeClass(".search_loader_spinner", "active"); + /*Helper.removeClass(".search_loader_spinner", "active"); Helper.css(".search_results", "display", "block");*/ - - } else { - document.getElementById("results_soundcloud").insertAdjacentHTML("afterbegin", "
    "+empty_results_html+"
    "); - document.getElementsByTagName("body")[0].setAttribute("style", "overflow-y:hidden !important") - } - if(document.querySelector("#results").innerHTML.length > 0) { - Helper.css(".search_results", "display", "block"); - } - /*else if(!retried){ + } else { + document + .getElementById("results_soundcloud") + .insertAdjacentHTML( + "afterbegin", + "
    " + + empty_results_html + + "
    " + ); + document + .getElementsByTagName("body")[0] + .setAttribute("style", "overflow-y:hidden !important"); + } + if (document.querySelector("#results").innerHTML.length > 0) { + Helper.css(".search_results", "display", "block"); + } + /*else if(!retried){ Search.search(search_input, true); } else { //$("").appendTo($("#results_soundcloud")).show("blind", 83.33); @@ -308,413 +429,570 @@ var Search = { Helper.css("#results_soundcloud", "display", "block"); Helper.removeClass(".search_loader_spinner", "active"); }*/ - }); - }, + }); + }, - 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"; - yt_url+="&q="+keyword; - 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(" "); - Helper.ajax({ + 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"; + yt_url += "&q=" + keyword; + 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(" "); + Helper.ajax({ + type: "GET", + url: yt_url, + dataType: "jsonp", + success: function(response) { + response = JSON.parse(response); + //Helper.log(response); + if (response.items.length === 0) { + Search.readySubmit(false, { totalLength: totalNumber - 1 }); + Helper.log([ + "NO MATCH FOR:", + "Spotify title: " + title + " " + artist.join(" "), + "Spotify length: " + length + ]); + 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") + .setAttribute("title", title + " - " + artist.join(" ")); + not_added_song + .querySelector(".extra-button-search") + .setAttribute("data-text", title + " - " + artist.join(" ")); + document + .querySelector(".not-imported-container") + .insertAdjacentHTML("beforeend", not_added_song.innerHTML); + Helper.removeClass(".not-imported", "hide"); + } else if (response.items.length > 0) { + for (var i = 0; i < response.items.length; i++) { + var data = response.items[i]; + vid_url += data.id.videoId + ","; + } + + Helper.ajax({ type: "GET", - url: yt_url, - dataType:"jsonp", - success: function(response){ - response = JSON.parse(response); - //Helper.log(response); - if(response.items.length === 0){ - Search.readySubmit(false, {totalLength: totalNumber - 1}); + url: vid_url, + dataType: "jsonp", + success: function(response) { + response = JSON.parse(response); + if (response.items.length > 0) { + var matched = false; + for (var y = 0; y < response.items.length; y++) { + var data = response.items[y]; + //Helper.log(data); + //var title = data.snippet.title; + if ( + data.contentDetails == undefined || + data.contentDetails.duration == undefined + ) { + Search.readySubmit(false, { totalLength: totalNumber - 1 }); Helper.log([ - "NO MATCH FOR:", - "Spotify title: " + title + " " + artist.join(" "), - "Spotify length: " + length + "NO MATCH FOR:", + "Spotify title: " + title + " " + artist.join(" "), + "Spotify length: " + length ]); 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").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); + not_added_song.querySelector(".extra-add-text").innerText = + title + " - " + artist.join(" "); + not_added_song + .querySelector(".extra-add-text") + .setAttribute("title", title + " - " + artist.join(" ")); + not_added_song + .querySelector(".extra-button-search") + .setAttribute( + "data-text", + title + " - " + artist.join(" ") + ); + document + .querySelector(".not-imported-container") + .insertAdjacentHTML( + "beforeend", + not_added_song.innerHTML + ); Helper.removeClass(".not-imported", "hide"); - } else if(response.items.length > 0) { - for(var i = 0; i < response.items.length; i++) { - var data = response.items[i]; - vid_url += data.id.videoId+","; + continue; + } + var duration = Search.durationToSeconds( + data.contentDetails.duration + ); + var not_matched = false; + 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 || + !( + data.snippet.title.toLowerCase().indexOf("cover") == + -1 && + title.toLowerCase().indexOf("cover") == -1 && + ((data.snippet.title.toLowerCase().indexOf("remix") == + -1 && + title.toLowerCase().indexOf("remix") == -1) || + (data.snippet.title + .toLowerCase() + .indexOf("remix") != -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; } + } - Helper.ajax({ - type: "GET", - url: vid_url, - dataType:"jsonp", - success: function(response){ - response = JSON.parse(response); - if(response.items.length > 0) { - var matched = false; - for(var y = 0; y < response.items.length; y++) { - var data = response.items[y]; - //Helper.log(data); - //var title = data.snippet.title; - if(data.contentDetails == undefined || data.contentDetails.duration == undefined) { - Search.readySubmit(false, {totalLength: totalNumber - 1}); - Helper.log([ - "NO MATCH FOR:", - "Spotify title: " + title + " " + artist.join(" "), - "Spotify length: " + length - ]); - 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").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 not_matched = false; - 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 || !( - data.snippet.title.toLowerCase().indexOf("cover") == -1 && - title.toLowerCase().indexOf("cover") == -1 && - ((data.snippet.title.toLowerCase().indexOf("remix") == -1 && - title.toLowerCase().indexOf("remix") == -1) || - (data.snippet.title.toLowerCase().indexOf("remix") != -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)){ - 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}); - break; - } - } - if(!matched){ - Search.readySubmit(false, {totalLength: totalNumber - 1}); - Helper.log([ - "NO MATCH FOR:", - "Spotify title: " + title + " " + artist.join(" "), - "Spotify length: " + length - ]); - 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").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"); - } - } - }, - error: function(e) { - console.error(e); - } + 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 }); - + break; + } } - }, error: function(e) { - console.error(e); + if (!matched) { + Search.readySubmit(false, { totalLength: totalNumber - 1 }); + Helper.log([ + "NO MATCH FOR:", + "Spotify title: " + title + " " + artist.join(" "), + "Spotify length: " + length + ]); + 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") + .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"); + } + } + }, + error: function(e) { + console.error(e); } - }); - }, + }); + } + }, + error: function(e) { + console.error(e); + } + }); + }, - readySubmit: function(found, obj){ - if(Search.submitArrayExpected === null){ - Search.submitArrayExpected = obj.totalLength; - } - if(found){ - Search.submitArray.push(obj); - } else { - Search.submitArrayExpected -= 1; - } - if((Search.submitArray.length - 1) == Search.submitArrayExpected) { - socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitArray}); - /*$.each(Search.submitArray, function(i, data){ + readySubmit: function(found, obj) { + if (Search.submitArrayExpected === null) { + Search.submitArrayExpected = obj.totalLength; + } + if (found) { + Search.submitArray.push(obj); + } else { + Search.submitArrayExpected -= 1; + } + if (Search.submitArray.length - 1 == Search.submitArrayExpected) { + 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); });*/ - document.getElementById("import_spotify").disabled = false; - Helper.removeClass("#import_spotify", "hide"); - Helper.addClass("#playlist_loader_spotify", "hide"); - Search.submitArray = []; - Search.submitArrayExpected = null; + document.getElementById("import_spotify").disabled = false; + Helper.removeClass("#import_spotify", "hide"); + Helper.addClass("#playlist_loader_spotify", "hide"); + Search.submitArray = []; + Search.submitArrayExpected = null; } -}, + }, -submitAndClose: function(id,title,duration, start, end, source, thumbnail){ - Search.submit(id,title, duration, false, 0, 1, start, end, source, thumbnail); - Helper.setHtml("#results", ''); + submitAndClose: function(id, title, duration, start, end, source, thumbnail) { + Search.submit( + 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") - Helper.setHtml("#results",""); + document + .getElementsByTagName("body")[0] + .setAttribute("style", "overflow-y:auto"); + Helper.setHtml("#results", ""); Helper.setHtml("#results-soundcloud", ""); Helper.removeClass(".main", "blurT"); Helper.removeClass("#controls", "blurT"); Helper.removeClass(".main", "clickthrough"); Helper.css(".search_results", "display", "none"); -}, + }, -importPlaylist: function(pId,pageToken){ + importPlaylist: function(pId, pageToken) { token = ""; var headers; var datatype; - if(pageToken !== undefined) - token = "&pageToken="+pageToken; - playlist_url = "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', - 'Authorization': 'Bearer ' + access_token_data_youtube.access_token - }; + if (pageToken !== undefined) token = "&pageToken=" + pageToken; + playlist_url = + "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", + Authorization: "Bearer " + access_token_data_youtube.access_token + }; } else { - headers = {};//'Content-Type': 'application/json'}; - datatype = "jsonp"; + headers = {}; //'Content-Type': 'application/json'}; + datatype = "jsonp"; } Helper.ajax({ - type: "GET", - url: playlist_url, - dataType: datatype, - //dataType:"jsonp", - headers: headers, - success: function(response) { - response = JSON.parse(response); - Helper.log(["Import response nr1", response]); - if(response.error){ - if(response.error.errors[0].reason == "playlistItemsNotAccessible"){ - var nonce = Helper.randomString(29); - window.callback = function(data) { - access_token_data_youtube = data; - if(access_token_data_youtube.state == nonce){ - youtube_authenticated = true; - setTimeout(function(){ - youtube_authenticated = false; - access_token_data_youtube = {}; - }, access_token_data_youtube.expires_in * 1000); - Search.importPlaylist(pId, pageToken); - } else { - access_token_data_youtube = ""; - console.error("Nonce doesn't match"); - } - youtube_window.close(); - window.callback = ""; - }; - youtube_window = window.open("/api/oauth#youtube=true&nonce=" + nonce, "", "width=600, height=600"); - } else { - Helper.log([ - "import list error: ", - response.error - ]); - document.getElementById("import").disabled = false; - Helper.addClass("#playlist_loader", "hide"); - Helper.removeClass("#import", "hide"); - before_toast(); - M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); - } - - } else { - var ids=""; - var this_length = 0; - 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++) { - var data = response.items[i]; - ids+=data.contentDetails.videoId+","; - Search.submitYouTubeArrayIds.push(data.contentDetails.videoId); - this_length += 1; - Search.submitYouTubeExpected += 1; - } - - if(response.nextPageToken) { - //Search.addVideos(ids, true, 0, false, this_length); - Search.importPlaylist(pId, response.nextPageToken); - } else { - Search.addVideos(Search.submitYouTubeArrayIds); - //Search.addVideos(ids, true, Search.submitYouTubeExpected, true, this_length); - //Search.submitYouTubeExpected = 0; - } - document.getElementById("import").value = ""; - } - }, - error: function(e) { - if(e.status == 403){ - var nonce = Helper.randomString(29); - window.callback = function(data) { - access_token_data_youtube = data; - if(access_token_data_youtube.state == nonce){ - youtube_authenticated = true; - setTimeout(function(){ - youtube_authenticated = false; - access_token_data_youtube = {}; - }, access_token_data_youtube.expires_in * 1000); - Search.importPlaylist(pId, pageToken); - } else { - access_token_data_youtube = ""; - console.error("Nonce doesn't match"); - } - youtube_window.close(); - window.callback = ""; - }; - youtube_window = window.open("/api/oauth#youtube=true&nonce=" + nonce, "", "width=600, height=600"); - } else { - Helper.log([ - "import list error: ", - response.error - ]); - document.getElementById("import").disabled = false; - Helper.addClass("#playlist_loader", "hide"); - Helper.removeClass("#import", "hide"); - before_toast(); - M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); - } - } - }); -}, - -importSpotifyPlaylist: function(url){ - Helper.ajax({ - method: "get", - url: url, - headers: { - '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); - - } - if(response.next){ - Search.importSpotifyPlaylist(response.next); - } - }, - error: function(e) { - document.getElementById("import_spotify").disabled = false; - Helper.removeClass("#import_spotify", "hide"); - Helper.addClass("#playlist_loader_spotify", "hide"); + type: "GET", + url: playlist_url, + dataType: datatype, + //dataType:"jsonp", + headers: headers, + success: function(response) { + response = JSON.parse(response); + Helper.log(["Import response nr1", response]); + if (response.error) { + if (response.error.errors[0].reason == "playlistItemsNotAccessible") { + var nonce = Helper.randomString(29); + window.callback = function(data) { + access_token_data_youtube = data; + if (access_token_data_youtube.state == nonce) { + youtube_authenticated = true; + setTimeout(function() { + youtube_authenticated = false; + access_token_data_youtube = {}; + }, access_token_data_youtube.expires_in * 1000); + Search.importPlaylist(pId, pageToken); + } else { + access_token_data_youtube = ""; + console.error("Nonce doesn't match"); + } + youtube_window.close(); + window.callback = ""; + }; + youtube_window = window.open( + "/api/oauth#youtube=true&nonce=" + nonce, + "", + "width=600, height=600" + ); + } else { + Helper.log(["import list error: ", response.error]); + document.getElementById("import").disabled = false; + Helper.addClass("#playlist_loader", "hide"); + Helper.removeClass("#import", "hide"); before_toast(); - M.toast({html: "It seems you've entered a invalid url.", displayLength: 4000}); - } - }); -}, + 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); + //Search.addVideos(response.items[0].contentDetails.videoId); + //response.items.shift(); + for (var i = 0; i < response.items.length; i++) { + var data = response.items[i]; + ids += data.contentDetails.videoId + ","; + Search.submitYouTubeArrayIds.push(data.contentDetails.videoId); + this_length += 1; + Search.submitYouTubeExpected += 1; + } -addVideos: function(ids){ + if (response.nextPageToken) { + //Search.addVideos(ids, true, 0, false, this_length); + Search.importPlaylist(pId, response.nextPageToken); + } else { + Search.addVideos(Search.submitYouTubeArrayIds); + //Search.addVideos(ids, true, Search.submitYouTubeExpected, true, this_length); + //Search.submitYouTubeExpected = 0; + } + document.getElementById("import").value = ""; + } + }, + error: function(e) { + if (e.status == 403) { + var nonce = Helper.randomString(29); + window.callback = function(data) { + access_token_data_youtube = data; + if (access_token_data_youtube.state == nonce) { + youtube_authenticated = true; + setTimeout(function() { + youtube_authenticated = false; + access_token_data_youtube = {}; + }, access_token_data_youtube.expires_in * 1000); + Search.importPlaylist(pId, pageToken); + } else { + access_token_data_youtube = ""; + console.error("Nonce doesn't match"); + } + youtube_window.close(); + window.callback = ""; + }; + youtube_window = window.open( + "/api/oauth#youtube=true&nonce=" + nonce, + "", + "width=600, height=600" + ); + } else { + Helper.log(["import list error: ", response.error]); + document.getElementById("import").disabled = false; + Helper.addClass("#playlist_loader", "hide"); + Helper.removeClass("#import", "hide"); + before_toast(); + M.toast({ + html: "It seems you've entered a invalid url.", + displayLength: 4000 + }); + } + } + }); + }, + + importSpotifyPlaylist: function(url) { + Helper.ajax({ + method: "get", + url: url, + headers: { + 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 + ); + } + if (response.next) { + Search.importSpotifyPlaylist(response.next); + } + }, + error: function(e) { + document.getElementById("import_spotify").disabled = false; + 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 + }); + } + }); + }, + + 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="; - for(var i = 0; i < ids.length; i++) { - if(i > 48) { - more = true; - next_ids = ids.slice(i, ids.length); - break; - } - request_url += ids[i] + ","; + 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; + next_ids = ids.slice(i, ids.length); + break; + } + request_url += ids[i] + ","; } Helper.ajax({ - type: "GET", - url: request_url, - success: function(response){ - response = JSON.parse(response); - - 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) { - Helper.log(["Song without duration", song]); - continue; - } - var duration=Search.durationToSeconds(song.contentDetails.duration); - if((longsongs != undefined && !longsongs) || duration<720){ - 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"}); - } - } - if(more) Search.addVideos(next_ids); - else { - socket.emit("addPlaylist", {channel: chan.toLowerCase(), songs: Search.submitYouTubeArray}); - Search.submitYouTubeArray = []; - Search.submitYouTubeExpected = 0; - } - }, - error: function(e) { - console.error(e); - } - }); -}, + type: "GET", + url: request_url, + success: function(response) { + response = JSON.parse(response); -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); - return; - } - 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); + Helper.log([ + "Import response, separate video nr2", + response, + "import response, separate video end" + ]); + var x = 0; + if (response.error) { + Search.submitYouTubeError = true; } - if(found_array.length == 0){ - List.channel_function({ - type: "added", - start: start, - end: end, - value: { - added: (new Date).getTime()/1000, - guids: [1], - id: id, - title: title, - duration: duration, - now_playing: false, - votes: 1 - } + for (var i = 0; i < response.items.length; i++) { + var song = response.items[i]; + if ( + song.contentDetails == undefined || + song.contentDetails.duration == undefined + ) { + Helper.log(["Song without duration", song]); + continue; + } + var duration = Search.durationToSeconds(song.contentDetails.duration); + if ((longsongs != undefined && !longsongs) || duration < 720) { + 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" }); - } else { - List.vote(id, "pos"); + } } - } else { - /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); - if(u == undefined) u = "";*/ - emit("add", { - id: id, - start: start, - end: end, - title: title, - list: chan.toLowerCase(), - duration: duration, - source: source, - thumbnail: thumbnail - }); - }//[id, decodeURIComponent(title), adminpass, duration, playlist]); -}, + if (more) Search.addVideos(next_ids); + else { + socket.emit("addPlaylist", { + channel: chan.toLowerCase(), + songs: Search.submitYouTubeArray + }); + Search.submitYouTubeArray = []; + Search.submitYouTubeExpected = 0; + } + }, + error: function(e) { + console.error(e); + } + }); + }, -durationToSeconds: function(duration) { + 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 + ); + return; + } + 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); + } + if (found_array.length == 0) { + List.channel_function({ + type: "added", + start: start, + end: end, + value: { + added: new Date().getTime() / 1000, + guids: [1], + id: id, + title: title, + duration: duration, + now_playing: false, + votes: 1 + } + }); + } else { + List.vote(id, "pos"); + } + } else { + /*var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true); + if(u == undefined) u = "";*/ + emit("add", { + id: id, + start: start, + end: end, + title: title, + list: chan.toLowerCase(), + duration: duration, + source: source, + thumbnail: thumbnail + }); + } //[id, decodeURIComponent(title), adminpass, duration, playlist]); + }, + + durationToSeconds: function(duration) { var matches = duration.match(time_regex); - hours= parseInt(matches[12])||0; - minutes= parseInt(matches[14])||0; - seconds= parseInt(matches[16])||0; - return hours*60*60+minutes*60+seconds; -} + hours = parseInt(matches[12]) || 0; + minutes = parseInt(matches[14]) || 0; + seconds = parseInt(matches[16]) || 0; + return hours * 60 * 60 + minutes * 60 + seconds; + } }; diff --git a/server/public/assets/js/suggestions.js b/server/public/assets/js/suggestions.js index f76f58d4..eeb6479a 100755 --- a/server/public/assets/js/suggestions.js +++ b/server/public/assets/js/suggestions.js @@ -1,121 +1,167 @@ var Suggestions = { + catchUserSuggests: function(params, single) { + if (single) { + number_suggested = number_suggested + 1; + } else { + number_suggested = number_suggested + params.length; + } + for (var i = 0; i < params.length; i++) { + if (document.querySelectorAll("#suggested-" + params[i].id).length > 0) { + number_suggested -= 1; + } + } + 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" + ); + } + document.querySelector( + ".suggested-link span.badge.new.white" + ).innerText = to_display; + if (single) { + Suggestions.createSuggested(params); + } else { + for (var x in params) { + Suggestions.createSuggested(params[x]); + } + } + Suggestions.checkUserEmpty(); + }, - catchUserSuggests: function(params, single){ - if(single) { - number_suggested = number_suggested + 1; - } else { - number_suggested = number_suggested + params.length; - } - for(var i = 0; i < params.length; i++) { - if(document.querySelectorAll("#suggested-" + params[i].id).length > 0) { - number_suggested -= 1; - } - } - 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"); - } - document.querySelector(".suggested-link span.badge.new.white").innerText = to_display; - if(single){ - Suggestions.createSuggested(params); - }else{ - for(var x in params){ - Suggestions.createSuggested(params[x]); - } - } - Suggestions.checkUserEmpty(); - }, + createSuggested: function(params) { + var duration = Helper.secondsToOther(params.duration); + var video_id = params.id; + var video_title = params.title; + var date = new Date(params.added * 1000); + var addedTime = + Helper.pad(date.getHours()) + + ":" + + Helper.pad(date.getMinutes()) + + " - " + + 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"; + } + if (params.thumbnail) toSend.thumbnail = params.thumbnail; + var song = List.generateSong(toSend, false, false, false, true); + var testingElem; + try { + testingElem = document.getElementById(video_id); + } catch (e) {} - createSuggested: function(params){ - var duration = Helper.secondsToOther(params.duration); - var video_id = params.id; - var video_title = params.title; - var date = new Date(params.added * 1000); - var addedTime = Helper.pad(date.getHours()) + ":" - + Helper.pad(date.getMinutes()) + " - " - + 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"; - } - if(params.thumbnail) toSend.thumbnail = params.thumbnail; - var song = List.generateSong(toSend, false, false, false, true); - var testingElem; - try { - testingElem = document.getElementById(video_id); - } catch(e) {} + if ( + !testingElem && + document.querySelectorAll("#suggested-" + video_id).length == 0 + ) { + document + .getElementById("user-suggest-html") + .insertAdjacentHTML("beforeend", song); + } + }, - if(!testingElem && document.querySelectorAll("#suggested-" + video_id).length == 0) { - document.getElementById("user-suggest-html").insertAdjacentHTML("beforeend", song); - } - }, + fetchYoutubeSuggests: function(id) { + if (videoSource == "soundcloud") { + Helper.addClass(document.querySelector(".suggest-title-info"), "hide"); + Helper.addClass("#suggest-song-html", "hide"); + return; + } else { + 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 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="; - fetchYoutubeSuggests: function(id){ - if(videoSource == "soundcloud") { - Helper.addClass(document.querySelector(".suggest-title-info"), "hide"); - Helper.addClass("#suggest-song-html", "hide"); - return; - } else { - Helper.removeClass(document.querySelector(".suggest-title-info"), "hide"); - Helper.removeClass("#suggest-song-html", "hide"); + Helper.ajax({ + type: "GET", + url: get_url, + dataType: "jsonp", + success: function(response) { + response = JSON.parse(response); + var this_resp = response.items.slice(0, 5); + for (var i = 0; i < this_resp.length; i++) { + var data = this_resp[i]; + video_urls += data.id.videoId + ","; } - var get_url = "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) - { - response = JSON.parse(response); - var this_resp = response.items.slice(0,5); - for(var i = 0; i < this_resp.length; i++) { - var data = this_resp[i]; - video_urls += data.id.videoId+","; - } + type: "GET", + url: video_urls, + dataType: "jsonp", + 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) + ); + 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, ","); + } catch (e) {} - Helper.ajax({ - type: "GET", - url: video_urls, - dataType: "jsonp", - 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)); - 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, ","); - } 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)); - } 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 + ) + ); + } catch (e) {} } + } }); - }, + } + }); + }, - checkUserEmpty: function(){ - var length = document.getElementById("user-suggest-html").children.length; - if(length === 0){ - Helper.addClass("#user_suggests", "hide"); - } else if(Admin.logged_in){ - Helper.removeClass("#user_suggests", "hide"); - } - }, + checkUserEmpty: function() { + var length = document.getElementById("user-suggest-html").children.length; + if (length === 0) { + Helper.addClass("#user_suggests", "hide"); + } else if (Admin.logged_in) { + Helper.removeClass("#user_suggests", "hide"); + } + } }; diff --git a/server/public/assets/js/token_apply.js b/server/public/assets/js/token_apply.js index 5d24bbe2..263edd7f 100644 --- a/server/public/assets/js/token_apply.js +++ b/server/public/assets/js/token_apply.js @@ -1,62 +1,87 @@ window.addEventListener("DOMContentLoaded", function(e) { - M.Modal.init(document.getElementById("about")); - M.Modal.init(document.getElementById("contact")); - Helper.addClass(".help-button-footer", "hide"); + M.Modal.init(document.getElementById("about")); + M.Modal.init(document.getElementById("contact")); + Helper.addClass(".help-button-footer", "hide"); - Helper.setHtml("#contact-container", ""); - Helper.setHtml("#contact-container", "Send a mail to us: contact@zoff.me"); - Helper.css("#submit-contact-form", "display", "none"); + Helper.setHtml("#contact-container", ""); + Helper.setHtml( + "#contact-container", + "Send a mail to us: contact@zoff.me" + ); + Helper.css("#submit-contact-form", "display", "none"); - var page = window.location.pathname; - if(page.substring(page.length - 1) != "/") page += "/"; - ga('send', 'pageview', page); + var page = window.location.pathname; + if (page.substring(page.length - 1) != "/") page += "/"; + ga("send", "pageview", page); - if(!Helper.mobilecheck()) { - if(document.querySelector("#iframe-container")) { - document.getElementById("iframe-container").insertAdjacentHTML("beforeend", ''); - } + if (!Helper.mobilecheck()) { + if (document.querySelector("#iframe-container")) { + document + .getElementById("iframe-container") + .insertAdjacentHTML( + "beforeend", + '' + ); } + } - document.getElementsByClassName("token-form")[0].addEventListener("submit", function(e) { - e.preventDefault(); - var email = document.getElementById("email_address").value; - var origin = document.getElementById("origin").value; - document.getElementById("origin").setAttribute("readonly", true); - document.getElementById("email_address").setAttribute("readonly", true); - Helper.toggleClass(".submit", "disabled"); - Helper.removeClass(".full-form-token", "hide"); - var captcha_response = grecaptcha.getResponse(); - Helper.ajax({ - type: "POST", - url: "/api/apply", - headers: {"Content-Type": "application/json;charset=UTF-8"}, - data: { - origin: origin, - email: email, - "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"}); - } else { - 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"}); - } - }, - error: function(response) { - Helper.addClass(".full-form-token", "hide"); - document.getElementById("email_address").setAttribute("readonly", false); - Helper.toggleClass(".submit", "disabled"); - } - }); + document + .getElementsByClassName("token-form")[0] + .addEventListener("submit", function(e) { + e.preventDefault(); + var email = document.getElementById("email_address").value; + var origin = document.getElementById("origin").value; + document.getElementById("origin").setAttribute("readonly", true); + document.getElementById("email_address").setAttribute("readonly", true); + Helper.toggleClass(".submit", "disabled"); + Helper.removeClass(".full-form-token", "hide"); + var captcha_response = grecaptcha.getResponse(); + Helper.ajax({ + type: "POST", + url: "/api/apply", + headers: { "Content-Type": "application/json;charset=UTF-8" }, + data: { + origin: origin, + email: email, + "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" + }); + } else { + 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" + }); + } + }, + error: function(response) { + Helper.addClass(".full-form-token", "hide"); + document + .getElementById("email_address") + .setAttribute("readonly", false); + Helper.toggleClass(".submit", "disabled"); + } + }); }); - document.getElementById('submit-contact-form').addEventListener('click', function(e) { - e.preventDefault(); - document.getElementById("contact-form").submit(); + document + .getElementById("submit-contact-form") + .addEventListener("click", function(e) { + e.preventDefault(); + document.getElementById("contact-form").submit(); }); }); diff --git a/server/public/assets/manifest.json b/server/public/assets/manifest.json index 3d0c4f78..37e1e914 100755 --- a/server/public/assets/manifest.json +++ b/server/public/assets/manifest.json @@ -1,36 +1,36 @@ { - "short_name": "Zoff", - "name": "Zoff", - "description": "A free YouTube based radio, where no registration is needed for listening to channels, or creating your own channels. ", - "dir": "ltr", - "lang": "en-US", - "start_url": "/", - "display": "standalone", - "background_color": "#2D2D2D", - "theme_color": "#2D2D2D", - "orientation": "portrait", - "related_applications": [ - { - "platform": "play", - "id": "zoff.me.zoff", - "url": "https://play.google.com/store/apps/details?id=zoff.me.zoff" - }, - { - "platform": "itunes", - "id": "me.zoff.zoffnative", - "url": "https://itunes.apple.com/us/app/zoff/id1402037061?ls=1&mt=8" - } - ], - "icons": [ - { - "src": "/assets/images/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/assets/images/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ] + "short_name": "Zoff", + "name": "Zoff", + "description": "A free YouTube based radio, where no registration is needed for listening to channels, or creating your own channels. ", + "dir": "ltr", + "lang": "en-US", + "start_url": "/", + "display": "standalone", + "background_color": "#2D2D2D", + "theme_color": "#2D2D2D", + "orientation": "portrait", + "related_applications": [ + { + "platform": "play", + "id": "zoff.me.zoff", + "url": "https://play.google.com/store/apps/details?id=zoff.me.zoff" + }, + { + "platform": "itunes", + "id": "me.zoff.zoffnative", + "url": "https://itunes.apple.com/us/app/zoff/id1402037061?ls=1&mt=8" + } + ], + "icons": [ + { + "src": "/assets/images/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/assets/images/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] }