Input-field update

Nicer transitions. Closes #518

README.md

@@ -83,5 +83,5 @@ Zoff is licensed under a
 <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>.
 Do not redistribute without permission from the developers.
 
-Copyright © 2018
+Copyright © 2019
 Kasper Rynning-Tønnesen and Nicolas Almagro Tonne

package-lock.json

@@ -495,6 +495,11 @@
         "type-is": "~1.6.16"
       }
     },
+    "bowser": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.6.1.tgz",
+      "integrity": "sha512-hySGUuLhi0KetfxPZpuJOsjM0kRvCiCgPBygBkzGzJNsq/nbJmaO8QJc6xlWfeFFnMvtd/LeKkhDJGVrmVobUA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -893,9 +898,9 @@
       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
     },
     "content-security-policy-builder": {
-      "version": "2.0.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/content-security-policy-builder/-/content-security-policy-builder-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/content-security-policy-builder/-/content-security-policy-builder-2.1.0.tgz",
-      "integrity": "sha512-j+Nhmj1yfZAikJLImCvPJFE29x/UuBi+/MWqggGGc515JKaZrjuei2RhULJmy0MsstW3E3htl002bwmBNMKr7w=="
+      "integrity": "sha512-/MtLWhJVvJNkA9dVLAp6fg9LxD2gfI6R2Fi1hPmfjYXSahJJzcfvoeDOxSyp4NvxMuwWv3WMssE9o31DoULHrQ=="
     },
     "content-type": {
       "version": "1.0.4",
@@ -1151,9 +1156,9 @@
       "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I="
     },
     "dns-prefetch-control": {
-      "version": "0.1.0",
+      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dns-prefetch-control/-/dns-prefetch-control-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/dns-prefetch-control/-/dns-prefetch-control-0.2.0.tgz",
-      "integrity": "sha1-YN20V3dOF48flBXwyrsOhbCzALI="
+      "integrity": "sha512-hvSnros73+qyZXhHFjx2CMLwoj3Fe7eR9EJsFsqmcI1bB2OBWL/+0YzaEaKssCHnj/6crawNnUyw74Gm2EKe+Q=="
     },
     "dom-walk": {
       "version": "0.1.1",
@@ -1161,9 +1166,9 @@
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
     },
     "dont-sniff-mimetype": {
-      "version": "1.0.0",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/dont-sniff-mimetype/-/dont-sniff-mimetype-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/dont-sniff-mimetype/-/dont-sniff-mimetype-1.1.0.tgz",
-      "integrity": "sha1-WTKJDcn04vGeXrAqIAJuXl78j1g="
+      "integrity": "sha512-ZjI4zqTaxveH2/tTlzS1wFp+7ncxNZaIEWYg3lzZRHkKf5zPT/MnEG6WL0BhHMJUabkh8GeU5NL5j+rEUCb7Ug=="
     },
     "double-ended-queue": {
       "version": "2.1.0-0",
@@ -1444,9 +1449,9 @@
       }
     },
     "expect-ct": {
-      "version": "0.1.1",
+      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/expect-ct/-/expect-ct-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/expect-ct/-/expect-ct-0.2.0.tgz",
-      "integrity": "sha512-ngXzTfoRGG7fYens3/RMb6yYoVLvLMfmsSllP/mZPxNHgFq41TmPSLF/nLY7fwoclI2vElvAmILFWGUYqdjfCg=="
+      "integrity": "sha512-6SK3MG/Bbhm8MsgyJAylg+ucIOU71/FzyFalcfu5nY19dH8y/z0tBJU0wrNBXD4B27EoQtqPF/9wqH0iYAd04g=="
     },
     "express": {
       "version": "4.16.4",
@@ -1851,9 +1856,9 @@
       }
     },
     "frameguard": {
-      "version": "3.0.0",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/frameguard/-/frameguard-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/frameguard/-/frameguard-3.1.0.tgz",
-      "integrity": "sha1-e8rUae57lukdEs6zlZx4I1qScuk="
+      "integrity": "sha512-TxgSKM+7LTA6sidjOiSZK9wxY0ffMPY3Wta//MqwmX0nZuEHc8QrkV8Fh3ZhMJeiH+Uyh/tcaarImRy8u77O7g=="
     },
     "fresh": {
       "version": "0.5.2",
@@ -2786,9 +2791,9 @@
       }
     },
     "handlebars": {
-      "version": "4.1.2",
+      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
       "requires": {
         "neo-async": "^2.6.0",
         "optimist": "^0.6.1",
@@ -2877,54 +2882,64 @@
       }
     },
     "helmet": {
-      "version": "3.16.0",
+      "version": "3.21.1",
-      "resolved": "https://registry.npmjs.org/helmet/-/helmet-3.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-3.21.1.tgz",
-      "integrity": "sha512-rsTKRogc5OYGlvSHuq5QsmOsOzF6uDoMqpfh+Np8r23+QxDq+SUx90Rf8HyIKQVl7H6NswZEwfcykinbAeZ6UQ==",
+      "integrity": "sha512-IC/54Lxvvad2YiUdgLmPlNFKLhNuG++waTF5KPYq/Feo3NNhqMFbcLAlbVkai+9q0+4uxjxGPJ9bNykG+3zZNg==",
       "requires": {
         "depd": "2.0.0",
-        "dns-prefetch-control": "0.1.0",
+        "dns-prefetch-control": "0.2.0",
-        "dont-sniff-mimetype": "1.0.0",
+        "dont-sniff-mimetype": "1.1.0",
-        "expect-ct": "0.1.1",
+        "expect-ct": "0.2.0",
-        "feature-policy": "0.2.0",
+        "feature-policy": "0.3.0",
-        "frameguard": "3.0.0",
+        "frameguard": "3.1.0",
-        "helmet-crossdomain": "0.3.0",
+        "helmet-crossdomain": "0.4.0",
-        "helmet-csp": "2.7.1",
+        "helmet-csp": "2.9.2",
-        "hide-powered-by": "1.0.0",
+        "hide-powered-by": "1.1.0",
         "hpkp": "2.0.0",
         "hsts": "2.2.0",
         "ienoopen": "1.1.0",
-        "nocache": "2.0.0",
+        "nocache": "2.1.0",
-        "referrer-policy": "1.1.0",
+        "referrer-policy": "1.2.0",
-        "x-xss-protection": "1.1.0"
+        "x-xss-protection": "1.3.0"
       },
       "dependencies": {
         "depd": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
           "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        },
+        "feature-policy": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/feature-policy/-/feature-policy-0.3.0.tgz",
+          "integrity": "sha512-ZtijOTFN7TzCujt1fnNhfWPFPSHeZkesff9AXZj+UEjYBynWNUIYpC87Ve4wHzyexQsImicLu7WsC2LHq7/xrQ=="
+        },
+        "referrer-policy": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/referrer-policy/-/referrer-policy-1.2.0.tgz",
+          "integrity": "sha512-LgQJIuS6nAy1Jd88DCQRemyE3mS+ispwlqMk3b0yjZ257fI1v9c+/p6SD5gP5FGyXUIgrNOAfmyioHwZtYv2VA=="
         }
       }
     },
     "helmet-crossdomain": {
-      "version": "0.3.0",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/helmet-crossdomain/-/helmet-crossdomain-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/helmet-crossdomain/-/helmet-crossdomain-0.4.0.tgz",
-      "integrity": "sha512-YiXhj0E35nC4Na5EPE4mTfoXMf9JTGpN4OtB4aLqShKuH9d2HNaJX5MQoglO6STVka0uMsHyG5lCut5Kzsy7Lg=="
+      "integrity": "sha512-AB4DTykRw3HCOxovD1nPR16hllrVImeFp5VBV9/twj66lJ2nU75DP8FPL0/Jp4jj79JhTfG+pFI2MD02kWJ+fA=="
     },
     "helmet-csp": {
-      "version": "2.7.1",
+      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/helmet-csp/-/helmet-csp-2.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/helmet-csp/-/helmet-csp-2.9.2.tgz",
-      "integrity": "sha512-sCHwywg4daQ2mY0YYwXSZRsgcCeerUwxMwNixGA7aMLkVmPTYBl7gJoZDHOZyXkqPrtuDT3s2B1A+RLI7WxSdQ==",
+      "integrity": "sha512-Lt5WqNfbNjEJ6ysD4UNpVktSyjEKfU9LVJ1LaFmPfYseg/xPealPfgHhtqdAdjPDopp5zbg/VWCyp4cluMIckw==",
       "requires": {
+        "bowser": "^2.6.1",
         "camelize": "1.0.0",
-        "content-security-policy-builder": "2.0.0",
+        "content-security-policy-builder": "2.1.0",
-        "dasherize": "2.0.0",
+        "dasherize": "2.0.0"
-        "platform": "1.3.5"
       }
     },
     "hide-powered-by": {
-      "version": "1.0.0",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hide-powered-by/-/hide-powered-by-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/hide-powered-by/-/hide-powered-by-1.1.0.tgz",
-      "integrity": "sha1-SoWtZYgfYoV/xwr3F0oRhNzM4ys="
+      "integrity": "sha512-Io1zA2yOA1YJslkr+AJlWSf2yWFkKjvkcL9Ni1XSUqnGLr/qRQe2UI3Cn/J9MsJht7yEVCe0SscY1HgVMujbgg=="
     },
     "homedir-polyfill": {
       "version": "1.0.3",
@@ -3934,9 +3949,9 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
     },
     "nocache": {
-      "version": "2.0.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/nocache/-/nocache-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/nocache/-/nocache-2.1.0.tgz",
-      "integrity": "sha1-ICtIAhoMTL3i34DeFaF0Q8i0OYA="
+      "integrity": "sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q=="
     },
     "nodemailer": {
       "version": "4.7.0",
@@ -4386,11 +4401,6 @@
         "pngjs": "^3.0.0"
       }
     },
-    "platform": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.5.tgz",
-      "integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q=="
-    },
     "plugin-error": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
@@ -5980,9 +5990,9 @@
       }
     },
     "x-xss-protection": {
-      "version": "1.1.0",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/x-xss-protection/-/x-xss-protection-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/x-xss-protection/-/x-xss-protection-1.3.0.tgz",
-      "integrity": "sha512-rx3GzJlgEeZ08MIcDsU2vY2B1QEriUKJTSiNHHUIem6eg9pzVOr2TL3Y4Pd6TMAM5D5azGjcxqI62piITBDHVg=="
+      "integrity": "sha512-kpyBI9TlVipZO4diReZMAHWtS0MMa/7Kgx8hwG/EuZLiA6sg4Ah/4TRdASHhRRN3boobzcYgFRUFSgHRge6Qhg=="
     },
     "xhr": {
       "version": "2.4.1",

package.json

@@ -42,7 +42,7 @@
     "gulp-clean-css": "^4.2.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-uglify-es": "^1.0.4",
-    "helmet": "^3.16.0",
+    "helmet": "^3.21.1",
     "jimp": "^0.2.28",
     "mongodb": "^2.2.36",
     "mongojs": "^2.6.0",

pm2.json

@@ -2,18 +2,14 @@
   "apps": [
     {
       "name": "zoff",
-      "script": "./server/app.js",
+      "script": "./server/pm2.js",
       "watch": true,
+      "instances": "max",
+      "exec_mode": "cluster",
       "ignore_watch": [
         "./node_modules",
         "./server/public/assets/images/thumbnails"
       ]
-    },
-    {
-      "name": "gulp",
-      "script": "./gulpfile.js",
-      "watch": true,
-      "ignore_watch": ["./node_modules", "./server/"]
     }
   ]
 }

server/handlers/io.js

@@ -504,6 +504,19 @@ module.exports = function() {
         });
     });
 
+    socket.on("join_silent", function(msg) {
+        if (msg.hasOwnProperty("channel") && msg.channel.indexOf("?") > -1) {
+          var _list = msg.channel.substring(0, msg.channel.indexOf("?"));
+          msg.channel = _list;
+        }
+        if (msg.hasOwnProperty("channel")) {
+          msg.channel = Functions.encodeChannelName(msg.channel);
+      } else {
+          return;
+      }
+      List.join_silent(msg, socket);
+    });
+
     socket.on("list", function(msg) {
       if (msg.hasOwnProperty("channel") && msg.channel.indexOf("?") > -1) {
         var _list = msg.channel.substring(0, msg.channel.indexOf("?"));

server/handlers/list.js

@@ -31,6 +31,41 @@ function now_playing(list, fn, socket) {
   });
 }
 
+function join_silent(msg, socket) {
+    if (typeof msg === "object" && msg !== undefined && msg !== null) {
+      var channelName = msg.channel;
+      var tryingPassword = false;
+      var password = "";
+      if(msg.password != "") {
+        tryingPassword = true;
+        password = Functions.decrypt_string(msg.password);
+        password = crypto
+                 .createHash("sha256")
+                 .update(password)
+                 .digest("base64");
+      }
+
+      channelName = channelName.toLowerCase(); //.replace(/ /g,'');
+      channelName = Functions.removeEmojis(channelName).toLowerCase();
+      db.collection(channelName + "_settings").find(function(err, docs) {
+        if(docs.length == 0) {
+          socket.emit("join_silent_declined", "");
+          return;
+        }
+        if(docs[0].userpass == "" || docs[0].userpass == undefined || docs[0].userpass == password) {
+          socket.join(channelName);
+          socket.emit("join_silent_accepted", "");
+
+          send_play(channelName, socket);
+        } else {
+          socket.emit("join_silent_declined", "");
+        }
+      });
+    } else {
+        return;
+    }
+}
+
 function list(msg, guid, coll, offline, socket) {
   var socketid = socket.zoff_id;
   if (typeof msg === "object" && msg !== undefined && msg !== null) {
@@ -1245,6 +1280,7 @@ function getNextSong(coll, socket, callback) {
   );
 }
 
+module.exports.join_silent = join_silent;
 module.exports.sendColor = sendColor;
 module.exports.now_playing = now_playing;
 module.exports.list = list;

server/handlers/list_settings.js

@@ -244,9 +244,7 @@ function conf_function(params, coll, guid, offline, socket) {
       var adminpass = params.adminpass;
       var skipping = params.skipping;
       var shuffling = params.shuffling;
-
       var userpass = Functions.decrypt_string(params.userpass);
-
       if (
         (!params.userpass_changed && frontpage) ||
         (params.userpass_changed && userpass == "")

server/pm2.js

@@ -0,0 +1,82 @@
+var cluster = require("cluster"),
+  net = require("net"),
+  path = require("path"),
+  //publicPath = path.join(__dirname, 'public'),
+  http = require("http"),
+  port = 8080,
+  //farmhash = require('farmhash'),
+  uniqid = require("uniqid"),
+  num_processes = require("os").cpus().length;
+
+publicPath = path.join(__dirname, "public");
+pathThumbnails = __dirname;
+
+var redis = require("redis");
+var client = redis.createClient({ host: "localhost", port: 6379 });
+
+startSingle(true, true);
+
+function startSingle(clustered, redis_enabled) {
+  var server;
+  var client = require("./apps/client.js");
+  try {
+    var cert_config = require(path.join(
+      path.join(__dirname, "config"),
+      "cert_config.js"
+    ));
+    var fs = require("fs");
+    var privateKey = fs.readFileSync(cert_config.privateKey).toString();
+    var certificate = fs.readFileSync(cert_config.certificate).toString();
+    var ca = fs.readFileSync(cert_config.ca).toString();
+    var credentials = {
+      key: privateKey,
+      cert: certificate,
+      ca: ca
+    };
+    var https = require("https");
+    server = https.Server(credentials, routingFunction);
+  } catch (err) {
+    console.log("Starting without https (probably on localhost)");
+    server = http.createServer(routingFunction);
+  }
+
+  server.listen(port, onListen);
+
+  var socketIO = client.socketIO;
+
+  var redis = require("socket.io-redis");
+  try {
+    socketIO.adapter(redis({ host: "localhost", port: 6379 }));
+  } catch (e) {
+    console.log("No redis-server to connect to..");
+  }
+  socketIO.listen(server);
+}
+
+function onListen() {
+  console.log("Started with pid [" + process.pid + "]");
+}
+
+function routingFunction(req, res, next) {
+  var client = require("./apps/client.js");
+  var admin = require("./apps/admin.js");
+  try {
+    var url = req.headers["x-forwarded-host"]
+      ? req.headers["x-forwarded-host"]
+      : req.headers.host.split(":")[0];
+    var subdomain = req.headers["x-forwarded-host"]
+      ? req.headers["x-forwarded-host"].split(".")
+      : req.headers.host.split(":")[0].split(".");
+
+    if (subdomain.length > 1 && subdomain[0] == "admin") {
+      admin(req, res, next);
+    } else {
+      client(req, res, next);
+    }
+  } catch (e) {
+    console.log("Bad request for " + req.headers.host + req.url, e);
+    res.statusCode = 500;
+    res.write("Bad request"); //write a response to the client
+    res.end(); //end the response
+  }
+}

server/public/assets/css/globals.css

@@ -48,6 +48,10 @@ nav ul li.active {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
+.full-height {
+  height:100vh;
+}
+
 * {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -moz-tap-highlight-color: rgba(0, 0, 0, 0);

server/public/assets/css/style.css

@@ -1273,7 +1273,7 @@ margin:-1px;
   cursor: default;
   display: inline;
   font-size: 50px;
-  font-weight: 100;
+  /*font-weight: 100;*/
   height: auto;
   line-height: 90.069229px;
   text-align: center;
@@ -1384,7 +1384,7 @@ margin:-1px;
   display: inline;
   /* font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; */
   font-size: 18px;
-  font-weight: 300;
+  /*font-weight: 300;*/
   height: auto;
   /*line-height: 24.2857151031494px;*/
   text-align: center;
@@ -1539,6 +1539,8 @@ margin:-1px;
 
 .channel-finder .input-field {
   display: flex;
+  justify-content: center;
+  align-items: center;
   margin-left: 0px !important;
   width: max-content !important;
   justify-content: center;
@@ -1552,7 +1554,9 @@ margin:-1px;
 .channel-finder .input-field .prefix {
   color: white;
   font-size: 17px;
-  /*margin-left: -215px;*/
+  position: initial;
+  margin-right: -45px;
+  margin-bottom: 9px;
   left: 0;
 }
 

server/public/assets/js/helpers.js

@@ -299,6 +299,9 @@ var Helper = {
           var this_element = M.Tooltip.getInstance(elem);
           if (this_element != undefined) this_element.destroy();
         } else {
+          try {
+            elem.removeAttribute("title");
+          } catch (e) {}
           M.Tooltip.init(elem, options);
         }
       } else {
@@ -308,6 +311,9 @@ var Helper = {
             var this_element = M.Tooltip.getInstance(elem);
             if (this_element != undefined) this_element.destroy();
           } else {
+            try {
+              elements[i].removeAttribute("title");
+            } catch (e) {}
             M.Tooltip.init(elements[i], options);
           }
         }

server/public/layouts/admin/main.handlebars

@@ -20,7 +20,7 @@
     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
-    <link rel="stylesheet" type="text/css" href="https://zoff.me/assets/css/style.css" title="Default" />
+    <link rel="stylesheet" type="text/css" href="https://zoff.me/assets/dist/style.css" title="Default" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script>
     <style>

server/public/layouts/admin/not_authenticated.handlebars

@@ -1,4 +1,4 @@
-<main class="container valign-wrapper row">
+<main class="container valign-wrapper row full-height">
       <div class="center-align col m6 offset-m3">
         <img src="https://zoff.me/assets/images/favicon.png" width="100" height="100" alt="image" />
         <form action="/login" id="login_form" method="POST">