Merge pull request #508 from zoff-music/refactor/audit-fixes

Fixed some audit-issues, and started using prettify

gulpfile.js

@@ -1,120 +1,198 @@
-var gulp    = require('gulp'),
+var gulp = require("gulp"),
-	gutil   = require('gulp-util'),
+  gutil = require("gulp-util"),
-	uglify  = require('gulp-uglify'),
+  uglify = require("gulp-uglify"),
   //sourcemaps = require('gulp-sourcemaps'),
-    gutil = require('gulp-util'),
+  gutil = require("gulp-util"),
-	concat  = require('gulp-concat'),
+  concat = require("gulp-concat"),
-    cssnano = require('gulp-cssnano');
+  cleanCSS = require("gulp-clean-css");
 
-gulp.task('css', function() {
+gulp.task("css", function() {
-    return gulp.src('server/public/assets/css/style.css')
+  return gulp
-        .pipe(cssnano({
+    .src("server/public/assets/css/style.css")
-            preset: ['default', {
+    .pipe(cleanCSS({ compatibility: "ie8" }))
-                discardComments: {
+    .pipe(gulp.dest("server/public/assets/dist"));
-                    removeAll: true,
-                },
-            }]
-        }))
-        .pipe(gulp.dest('server/public/assets/dist'));
 });
 
-gulp.task('css-embed', function() {
+gulp.task("css-embed", function() {
-    return gulp.src('server/public/assets/css/embed.css')
+  return gulp
-        .pipe(cssnano({
+    .src("server/public/assets/css/embed.css")
-            preset: ['default', {
+    .pipe(cleanCSS({ compatibility: "ie8" }))
-                discardComments: {
+    .pipe(gulp.dest("server/public/assets/dist"));
-                    removeAll: true,
-                },
-            }]
-        }))
-        .pipe(gulp.dest('server/public/assets/dist'));
 });
 
-gulp.task('js', function () {
+gulp.task("js", function() {
-    return gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/*.js', '!server/public/assets/js/embed*', '!server/public/assets/js/token*', '!server/public/assets/js/remotecontroller.js', '!server/public/assets/js/callback.js'])
+  return (
+    gulp
+      .src([
+        "server/VERSION.js",
+        "server/config/api_key.js",
+        "server/public/assets/js/*.js",
+        "!server/public/assets/js/embed*",
+        "!server/public/assets/js/token*",
+        "!server/public/assets/js/remotecontroller.js",
+        "!server/public/assets/js/callback.js"
+      ])
       //.pipe(sourcemaps.init())
-    .pipe(concat('main.min.js'))
+      .pipe(concat("main.min.js"))
-        .pipe(uglify({
+      .pipe(
-        	mangle: true,
+        uglify({
-            compress: true,
-        	enclose: true,
-        }))
-        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
-        //.pipe(sourcemaps.write('maps'))
-        .pipe(gulp.dest('server/public/assets/dist'));
-});
-
-gulp.task('embed', function () {
-    return gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/player.js', 'server/public/assets/js/functions.js', 'server/public/assets/js/helpers.js', 'server/public/assets/js/playercontrols.js', 'server/public/assets/js/list.js', 'server/public/assets/js/embed.js', '!server/public/assets/js/frontpage*', '!server/public/assets/js/remotecontroller.js', 'server/public/assets/js/hostcontroller.js'])
-    //.pipe(sourcemaps.init())
-    .pipe(concat('embed.min.js'))
-        .pipe(uglify({
           mangle: true,
           compress: true,
           enclose: true
-        }))
+        })
-        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
+      )
+      .on("error", function(err) {
+        gutil.log(gutil.colors.red("[Error]"), err.toString());
+      })
       //.pipe(sourcemaps.write('maps'))
-        .pipe(gulp.dest('server/public/assets/dist'));
+      .pipe(gulp.dest("server/public/assets/dist"))
+  );
 });
 
-gulp.task('token', function() {
+gulp.task("embed", function() {
-    return gulp.src(['server/public/assets/js/token*', 'server/public/assets/js/helpers.js'])
+  return (
+    gulp
+      .src([
+        "server/VERSION.js",
+        "server/config/api_key.js",
+        "server/public/assets/js/player.js",
+        "server/public/assets/js/functions.js",
+        "server/public/assets/js/helpers.js",
+        "server/public/assets/js/playercontrols.js",
+        "server/public/assets/js/list.js",
+        "server/public/assets/js/embed.js",
+        "!server/public/assets/js/frontpage*",
+        "!server/public/assets/js/remotecontroller.js",
+        "server/public/assets/js/hostcontroller.js"
+      ])
       //.pipe(sourcemaps.init())
-    .pipe(concat('token.min.js'))
+      .pipe(concat("embed.min.js"))
-        .pipe(uglify({
+      .pipe(
+        uglify({
           mangle: true,
           compress: true,
           enclose: true
-        }))
+        })
-        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
+      )
-
+      .on("error", function(err) {
+        gutil.log(gutil.colors.red("[Error]"), err.toString());
+      })
       //.pipe(sourcemaps.write('maps'))
-        .pipe(gulp.dest('server/public/assets/dist'));
+      .pipe(gulp.dest("server/public/assets/dist"))
-})
+  );
+});
 
-gulp.task('callback', function () {
+gulp.task("token", function() {
-    return gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/callback.js'])
+  return (
+    gulp
+      .src([
+        "server/public/assets/js/token*",
+        "server/public/assets/js/helpers.js"
+      ])
       //.pipe(sourcemaps.init())
-    .pipe(concat('callback.min.js'))
+      .pipe(concat("token.min.js"))
-        .pipe(uglify({
+      .pipe(
+        uglify({
           mangle: true,
           compress: true,
           enclose: true
-        }))
+        })
-        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
+      )
+      .on("error", function(err) {
+        gutil.log(gutil.colors.red("[Error]"), err.toString());
+      })
 
       //.pipe(sourcemaps.write('maps'))
-        .pipe(gulp.dest('server/public/assets/dist'));
+      .pipe(gulp.dest("server/public/assets/dist"))
+  );
 });
 
-gulp.task('build', done => {
+gulp.task("callback", function() {
-    gulp.series('css', 'css-embed', 'js', 'embed', 'remotecontroller', 'callback', 'token')();
+  return (
+    gulp
+      .src([
+        "server/VERSION.js",
+        "server/config/api_key.js",
+        "server/public/assets/js/callback.js"
+      ])
+      //.pipe(sourcemaps.init())
+      .pipe(concat("callback.min.js"))
+      .pipe(
+        uglify({
+          mangle: true,
+          compress: true,
+          enclose: true
+        })
+      )
+      .on("error", function(err) {
+        gutil.log(gutil.colors.red("[Error]"), err.toString());
+      })
+
+      //.pipe(sourcemaps.write('maps'))
+      .pipe(gulp.dest("server/public/assets/dist"))
+  );
+});
+
+gulp.task("build", done => {
+  gulp.series(
+    "css",
+    "css-embed",
+    "js",
+    "embed",
+    "remotecontroller",
+    "callback",
+    "token"
+  )();
   done();
 });
 
-gulp.task('remotecontroller', function () {
+gulp.task("remotecontroller", function() {
-    return gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/remotecontroller.js', 'server/public/assets/js/helpers.js'])
+  return (
+    gulp
+      .src([
+        "server/VERSION.js",
+        "server/config/api_key.js",
+        "server/public/assets/js/remotecontroller.js",
+        "server/public/assets/js/helpers.js"
+      ])
       ////.pipe(sourcemaps.init())
-    .pipe(concat('remote.min.js'))
+      .pipe(concat("remote.min.js"))
-        .pipe(uglify({
+      .pipe(
+        uglify({
           mangle: true,
           compress: true,
           enclose: true
-        }))
+        })
-        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
+      )
+      .on("error", function(err) {
+        gutil.log(gutil.colors.red("[Error]"), err.toString());
+      })
 
       //.pipe(sourcemaps.write('maps'))
-        .pipe(gulp.dest('server/public/assets/dist'));
+      .pipe(gulp.dest("server/public/assets/dist"))
+  );
 });
 
-gulp.task('default', function(){
+gulp.task("default", function() {
-    gulp.watch(['server/VERSION.js', 'server/public/assets/js/*.js'], ['js']);
+  gulp.watch(["server/VERSION.js", "server/public/assets/js/*.js"], ["js"]);
-    gulp.watch(['server/public/assets/css/*.css'], ['css']);
+  gulp.watch(["server/public/assets/css/*.css"], ["css"]);
-    gulp.watch(['server/public/assets/css/*.css'], ['css-embed']);
+  gulp.watch(["server/public/assets/css/*.css"], ["css-embed"]);
-    gulp.watch(['server/public/assets/js/token*.js', 'server/public/assets/js/helpers.js'], ['token']);
+  gulp.watch(
-    gulp.watch(['server/VERSION.js', 'server/public/assets/js/*.js'], ['embed']);
+    ["server/public/assets/js/token*.js", "server/public/assets/js/helpers.js"],
-    gulp.watch(['server/VERSION.js', 'server/public/assets/js/callback.js', 'server/public/assets/js/helpers.js'], ['callback']);
+    ["token"]
+  );
+  gulp.watch(["server/VERSION.js", "server/public/assets/js/*.js"], ["embed"]);
+  gulp.watch(
+    [
+      "server/VERSION.js",
+      "server/public/assets/js/callback.js",
+      "server/public/assets/js/helpers.js"
+    ],
+    ["callback"]
+  );
   //gulp.watch('server/public/assets/js/*.js', ['nochan']);
-    gulp.watch(['server/VERSION.js', 'server/public/assets/js/remotecontroller.js'], ['remotecontroller']);
+  gulp.watch(
+    ["server/VERSION.js", "server/public/assets/js/remotecontroller.js"],
+    ["remotecontroller"]
+  );
 });

package-lock.json

@@ -750,6 +750,14 @@
         }
       }
     },
+    "clean-css": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "requires": {
+        "source-map": "~0.6.0"
+      }
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -2899,6 +2907,45 @@
         }
       }
     },
+    "gulp-clean-css": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.2.0.tgz",
+      "integrity": "sha512-r4zQsSOAK2UYUL/ipkAVCTRg/2CLZ2A+oPVORopBximRksJ6qy3EX1KGrIWT4ZrHxz3Hlobb1yyJtqiut7DNjA==",
+      "requires": {
+        "clean-css": "4.2.1",
+        "plugin-error": "1.0.1",
+        "through2": "3.0.1",
+        "vinyl-sourcemaps-apply": "0.2.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
+          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
+          "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        },
+        "through2": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
+          "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
+          "requires": {
+            "readable-stream": "2 || 3"
+          }
+        }
+      }
+    },
     "gulp-concat": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.6.1.tgz",
@@ -3850,6 +3897,11 @@
         "strip-bom": "^2.0.0"
       }
     },
+    "lodash": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+    },
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
@@ -4150,9 +4202,9 @@
       "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
     },
     "mixin-deep": {
-      "version": "1.3.1",
+      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
       "dev": true,
       "requires": {
         "for-in": "^1.0.2",
@@ -4324,11 +4376,6 @@
           "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.1.tgz",
           "integrity": "sha512-jCGVYLoYMHDkOsbwJZBCqwMHyH4c+wzgI9hG7Z6SZJRXWr+x58pdIbm2i9a/jFGCkRJqRUr8eoI7lDWa0hTkxg=="
         },
-        "lodash": {
-          "version": "4.17.11",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
-        },
         "mongodb": {
           "version": "3.1.13",
           "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.1.13.tgz",
@@ -5835,9 +5882,9 @@
       "dev": true
     },
     "set-value": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
       "dev": true,
       "requires": {
         "extend-shallow": "^2.0.1",
@@ -6647,38 +6694,15 @@
       "dev": true
     },
     "union-value": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
       "dev": true,
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
         "is-extendable": "^0.1.1",
-        "set-value": "^0.4.3"
+        "set-value": "^2.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "set-value": {
-          "version": "0.4.3",
-          "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
-          "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-extendable": "^0.1.1",
-            "is-plain-object": "^2.0.1",
-            "to-object-path": "^0.3.0"
-          }
-        }
       }
     },
     "uniq": {

package.json

@@ -41,6 +41,7 @@
     "express-recaptcha": "^3.0.1",
     "express-session": "^1.15.6",
     "feature-policy": "^0.2.0",
+    "gulp-clean-css": "^4.2.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-uglify-es": "^1.0.4",
     "helmet": "^3.16.0",

server/public/assets/js/channel.js

@@ -1,6 +1,6 @@
 var Channel = {
   init: function() {
-        if(window.location.hash == "#small" || inIframe()) {
+    if (window.location.hash == "#small" || inIframe()) {
       small_player = true;
       document.querySelector("footer").style.display = "none";
       //addJoinBox();
@@ -8,11 +8,11 @@ var Channel = {
       //document.querySelectorAll(".tab.col.s3")[1].remove();
       //document.querySelectorAll(".tab.col.s3")[1].remove();
     }
-        if(client) {
+    if (client) {
       Helper.addClass(".tabs", "hide");
       Helper.removeClass("#wrapper", "tabs_height");
       Helper.addClass("#wrapper", "client-wrapper");
-            if(!Helper.mobilecheck()) {
+      if (!Helper.mobilecheck()) {
         Helper.tooltip(".skip_next_client", {
           delay: 5,
           position: "bottom",
@@ -24,19 +24,27 @@ var Channel = {
       Helper.addClass(".pagination-results", "client-pagination-height");
       Helper.addClass(".control-list", "client-control-list");
     } else {
-            if(!api_key.hasOwnProperty("soundcloud")) soundcloud_enabled = false;
+      if (!api_key.hasOwnProperty("soundcloud")) soundcloud_enabled = false;
       else {
         /*SC.initialize({
                   client_id: api_key.soundcloud
                 }, function() {
                 });*/
       }
-            if(cast_ready_connect || chromecastAvailable || chromecastReady) {
+      if (cast_ready_connect || chromecastAvailable || chromecastReady) {
         Helper.addClass(".volume-container", "volume-container-cast");
       }
-    	    if(!embed) {
+      if (!embed) {
-    	    	document.querySelector("#main-container").insertAdjacentHTML("beforeend", "<a id='hide-playlist' class='hide-on-small-only hide-playlist-button' href='#!'><i class='material-icons'>keyboard_arrow_right</i></div>");
+        document
-    	          document.querySelector("#hide-playlist").style.left = (document.querySelector("#video-container").offsetWidth - document.querySelector("#hide-playlist").offsetWidth) + "px";
+          .querySelector("#main-container")
+          .insertAdjacentHTML(
+            "beforeend",
+            "<a id='hide-playlist' class='hide-on-small-only hide-playlist-button' href='#!'><i class='material-icons'>keyboard_arrow_right</i></div>"
+          );
+        document.querySelector("#hide-playlist").style.left =
+          document.querySelector("#video-container").offsetWidth -
+          document.querySelector("#hide-playlist").offsetWidth +
+          "px";
       }
       //Player.soundcloud_player = document.querySelector("#soundcloud_player");
     }
@@ -48,50 +56,61 @@ var Channel = {
 
     //chan = Helper.decodeChannelName(Helper.html("#chan"));
     var _p = window.location.pathname;
-        if(_p.substring(0,1) == "/") _p = _p.substring(1);
+    if (_p.substring(0, 1) == "/") _p = _p.substring(1);
-        if(_p.substring(_p.length - 1) == "/") _p = _p.substring(0, _p.length - 1);
+    if (_p.substring(_p.length - 1) == "/") _p = _p.substring(0, _p.length - 1);
     chan = Helper.decodeChannelName(_p);
 
     mobile_beginning = Helper.mobilecheck();
     var side = Helper.mobilecheck() ? "left" : "right";
 
-        if(window.location.hostname != "localhost") {
+    if (window.location.hostname != "localhost") {
       var page = window.location.pathname;
-            if(page.substring(page.length - 1) != "/") page += "/";
+      if (page.substring(page.length - 1) != "/") page += "/";
-            ga('send', 'pageview', page);
+      ga("send", "pageview", page);
     }
 
-        window.onpopstate = function(e){
+    window.onpopstate = function(e) {
       Channel.onepage_load();
     };
 
-        if(window.location.hostname == "fb.zoff.me") {
+    if (window.location.hostname == "fb.zoff.me") {
       Helper.addClass("footer", "hide");
     }
 
-        if(window.location.hostname != "fb.zoff.me") Channel.share_link_modifier();
+    if (window.location.hostname != "fb.zoff.me") Channel.share_link_modifier();
-        if(window.location.hostname == "zoff.me" || window.location.hostname == "fb.zoff.me") add = "https://zoff.me";
+    if (
+      window.location.hostname == "zoff.me" ||
+      window.location.hostname == "fb.zoff.me"
+    )
+      add = "https://zoff.me";
     else add = window.location.hostname;
 
-        if(Player !== undefined && !client) {
+    if (Player !== undefined && !client) {
       Player.stopInterval = false;
     }
 
-        if(!client) {
+    if (!client) {
       //Helper.tabs('.playlist-tabs');
-            Helper.tabs('.playlist-tabs-loggedIn', {
+      Helper.tabs(".playlist-tabs-loggedIn", {
         onShow: function(e) {
-                    if(this.index == 2) {
+          if (this.index == 2) {
             document.getElementById("text-chat-input").focus();
             Chat.channel_received = 0;
             Chat.all_received = 0;
-                        Helper.addClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
+            Helper.addClass(
-                        document.getElementById("favicon").setAttribute("href", "/assets/images/favicon.png");
+              document.querySelector(".chat-link span.badge.new.white"),
+              "hide"
+            );
+            document
+              .getElementById("favicon")
+              .setAttribute("href", "/assets/images/favicon.png");
 
             chat_active = true;
             unseen = false;
             chat_unseen = false;
-                        document.getElementsByClassName("chat-link")[0].setAttribute("style", "color: white !important;");
+            document
+              .getElementsByClassName("chat-link")[0]
+              .setAttribute("style", "color: white !important;");
             blinking = false;
             //Helper.css("#chat-container", "display", "block");
             //Helper.css("#wrapper", "display", "none");
@@ -104,17 +123,23 @@ var Channel = {
         }
       });
 
-            if(window.location.hash == "#chat-container") {
+      if (window.location.hash == "#chat-container") {
-                M.Tabs.getInstance(document.querySelector('.playlist-tabs-loggedIn')).select("chat-container");
+        M.Tabs.getInstance(
-            } else if(window.location.hash == "#suggestions") {
+          document.querySelector(".playlist-tabs-loggedIn")
-                M.Tabs.getInstance(document.querySelector('.playlist-tabs-loggedIn')).select("suggestions");
+        ).select("chat-container");
-            } else if(window.location.hash == "#wrapper") {
+      } else if (window.location.hash == "#suggestions") {
-                M.Tabs.getInstance(document.querySelector('.playlist-tabs-loggedIn')).select("wrapper");
+        M.Tabs.getInstance(
+          document.querySelector(".playlist-tabs-loggedIn")
+        ).select("suggestions");
+      } else if (window.location.hash == "#wrapper") {
+        M.Tabs.getInstance(
+          document.querySelector(".playlist-tabs-loggedIn")
+        ).select("wrapper");
       }
 
-            Helper.tabs('.chatTabs');
+      Helper.tabs(".chatTabs");
     }
-        Helper.tabs('.results-tabs');
+    Helper.tabs(".results-tabs");
     var sidenavElem = document.getElementsByClassName("sidenav")[0];
     M.Sidenav.init(sidenavElem, {
       menuWidth: 310,
@@ -126,13 +151,16 @@ var Channel = {
       },
       onCloseStart: function(el) {
         Helper.removeClass(".hamburger-sidenav", "open");
-            },
+      }
-        });
-        M.Collapsible.init(document.getElementsByClassName("settings-collapsible")[0], {
-            accordion : true
     });
+    M.Collapsible.init(
+      document.getElementsByClassName("settings-collapsible")[0],
+      {
+        accordion: true
+      }
+    );
 
-        if(!client) {
+    if (!client) {
       M.Modal.init(document.getElementById("embed"), {
         onCloseStart: function() {
           document.querySelector(".embed-preview").innerHTML = "";
@@ -154,7 +182,7 @@ var Channel = {
       }
     });
 
-        M.FormSelect.init(document.querySelector('.category-advanced-select'));
+    M.FormSelect.init(document.querySelector(".category-advanced-select"));
     M.Modal.init(document.getElementById("help"));
     M.Modal.init(document.getElementById("contact"));
     M.Modal.init(document.getElementById("channel-share-modal"));
@@ -162,24 +190,34 @@ var Channel = {
       dismissible: false
     });
     M.Modal.init(document.getElementById("user_password"), {
-            dismissible: false,
+      dismissible: false
     });
 
     Channel.spotify_is_authenticated(spotify_authenticated);
 
     result_html = document.getElementById("temp-results-container");
-        pagination_buttons_html = "<div class='pagination-results'>" + document.getElementsByClassName("pagination-results")[0].cloneNode(true).innerHTML + "</div>";
+    pagination_buttons_html =
+      "<div class='pagination-results'>" +
+      document.getElementsByClassName("pagination-results")[0].cloneNode(true)
+        .innerHTML +
+      "</div>";
     empty_results_html = Helper.html("#empty-results-container");
     not_import_html = Helper.html(".not-imported-container");
     not_export_html = Helper.html(".not-exported-container");
     Helper.setHtml(".not-imported-container", "");
     Helper.setHtml(".not-exported-container", "");
 
-        if(socket === undefined){
+    if (socket === undefined) {
       no_socket = false;
-            socket = io.connect(''+add, connection_options);
+      if (window.location.port != "") {
-            socket.on('update_required', function(msg) {
+        add = add + ":" + window.location.port + "/";
-                if(window.location.hostname == "localhost") {
+      }
+      socket = io.connect(
+        "" + add,
+        connection_options
+      );
+      socket.on("update_required", function(msg) {
+        if (window.location.hostname == "localhost") {
           console.error(msg);
           return;
         }
@@ -191,20 +229,30 @@ var Channel = {
 
     setup_auth_listener();
 
-        if(Crypt.get_offline()){
+    if (Crypt.get_offline()) {
       document.getElementsByClassName("offline_switch_class")[0].checked = true;
       change_offline(true, offline);
     }
-        if(!Helper.mobilecheck() && (document.querySelectorAll("#alreadychannel").length === 0 || !Hostcontroller.old_id || document.getElementById("code-text").innerText.toUpperCase() == "ABBADUR")) setup_host_initialization();
+    if (
+      !Helper.mobilecheck() &&
+      (document.querySelectorAll("#alreadychannel").length === 0 ||
+        !Hostcontroller.old_id ||
+        document.getElementById("code-text").innerText.toUpperCase() ==
+          "ABBADUR")
+    )
+      setup_host_initialization();
     setup_suggested_listener();
-        if(!Helper.mobilecheck()) {
+    if (!Helper.mobilecheck()) {
       showOnSmallNotMobile();
     }
-        if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
+    if (
+      document.querySelectorAll("#alreadychannel").length === 0 ||
+      Helper.mobilecheck()
+    ) {
       setup_now_playing_listener();
       get_list_listener();
 
-            if(!client) {
+      if (!client) {
         setup_viewers_listener();
       }
     } else {
@@ -212,33 +260,61 @@ var Channel = {
       Helper.css("#player", "opacity", "1");
       Helper.css("#controls", "opacity", "1");
       Helper.css(".playlist", "opacity", "1");
-            if(!client) {
+      if (!client) {
         Player.readyLooks();
         Playercontrols.initYoutubeControls(Player.player);
         Playercontrols.initSlider();
-                if(player_ready) {
+        if (player_ready) {
           try {
             Player.player.setVolume(Crypt.get_volume());
-                    } catch(e){}
+          } catch (e) {}
           try {
-                        if(scUsingWidget) Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume());
+            if (scUsingWidget)
-                        else Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
+              Player.soundcloud_player.setVolume(
-                    } catch(e){}
+                embed ? 1 : Crypt.get_volume()
+              );
+            else
+              Player.soundcloud_player.setVolume(
+                embed ? 1 : Crypt.get_volume() / 100
+              );
+          } catch (e) {}
         }
         Helper.removeClass(".video-container", "no-opacity");
-                var codeURL = "https://remote."+window.location.hostname+"/"+id;
+        var codeURL = "https://remote." + window.location.hostname + "/" + id;
         Helper.setHtml("#code-text", id);
-                document.getElementById("code-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
+        document
+          .getElementById("code-qr")
+          .setAttribute(
+            "src",
+            "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl=" +
+              codeURL
+          );
         document.getElementById("code-link").setAttribute("href", codeURL);
       }
     }
 
-
+    if (!client) {
-        if(!client) {
+      if (!Helper.mobilecheck()) {
-            if(!Helper.mobilecheck()) {
+        var shareCodeUrl =
-                var shareCodeUrl = window.location.protocol + "//client."+window.location.hostname+"/r/"+btoa(encodeURIComponent(chan.toLowerCase()));
+          window.location.protocol +
-                document.getElementById("share-join-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+shareCodeUrl);
+          "//client." +
-                Helper.setHtml("#channel-name-join", "client." + window.location.hostname + "/" + encodeURIComponent(chan.toLowerCase()));
+          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())
+        );
       } /*else if(small_player) {
                 document.querySelector("#channel-share-modal .modal-content").innerHTML = "<p>To listen to this channel with more features, go to</p><p>https://zoff.me/" + encodeURIComponent(chan.toLowerCase()) + "</p><img src='/assets/images/favicon.png' height='100' width='100' alt='circle-logo-zoff'>";
                 //M.Modal.getInstance(document.getElementById("channel-share-modal")).open();
@@ -256,16 +332,16 @@ var Channel = {
       Helper.removeElement(".import-panel");
       Helper.removeElement(".export-panel");
     }
-        if(no_socket || Helper.mobilecheck()){
+    if (no_socket || Helper.mobilecheck()) {
       emit_list();
     }
 
-        if(!Helper.mobilecheck()) {
+    if (!Helper.mobilecheck()) {
-            if(!client) {
+      if (!client) {
         Helper.tooltip("#chan", {
           delay: 5,
           position: "bottom",
-                    html: "Show join URL",
+          html: "Show join URL"
         });
       }
 
@@ -293,59 +369,68 @@ var Channel = {
         html: "Search"
       });
 
-
       Helper.tooltip(".shuffle-btn-container", {
         delay: 5,
         position: "bottom",
-                html: "Shuffle",
+        html: "Shuffle"
       });
 
       Helper.tooltip("#settings", {
         delay: 5,
         position: "bottom",
-                html: "Settings",
+        html: "Settings"
       });
     }
 
-        if(!client) {
+    if (!client) {
       window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
-            if(Player.player === "" || Player.player === undefined || Helper.mobilecheck()) Player.loadPlayer();
+      if (
+        Player.player === "" ||
+        Player.player === undefined ||
+        Helper.mobilecheck()
+      )
+        Player.loadPlayer();
     } else {
       Player.loadSoundCloudPlayer();
     }
     //}
 
-        if(Helper.mobilecheck()) {
+    if (Helper.mobilecheck()) {
-            if(!client) {
+      if (!client) {
         Mobile_remote.initiate_volume();
       }
       Helper.addClass(".close-settings", "hide");
     } else {
-            if(!client) {
+      if (!client) {
         Channel.window_width_volume_slider();
       }
     }
 
     setup_admin_listener();
     setup_list_listener();
-        if(!client) {
+    if (!client) {
       setup_chat_listener();
       get_history();
     }
-        if(client || Helper.mobilecheck()){
+    if (client || Helper.mobilecheck()) {
       get_list_ajax();
       get_np_ajax();
-
     }
 
     try {
-        	if(!Helper.msieversion() && !Helper.mobilecheck() && !client && Notification != undefined) Notification.requestPermission();
+      if (
-	}catch(e){}
+        !Helper.msieversion() &&
+        !Helper.mobilecheck() &&
+        !client &&
+        Notification != undefined
+      )
+        Notification.requestPermission();
+    } catch (e) {}
     document.getElementsByClassName("search_input")[0].focus();
 
     Helper.sample();
-        if(!Helper.mobilecheck() && !client) {
+    if (!Helper.mobilecheck() && !client) {
-            Helper.tooltip('.castButton', {
+      Helper.tooltip(".castButton", {
         delay: 5,
         position: "top",
         html: "Cast Zoff to TV"
@@ -380,57 +465,80 @@ var Channel = {
     Helper.css("#embed-button", "display", "inline-block");
     document.getElementById("search").setAttribute("placeholder", "Search...");
 
-        if(!client) {
+    if (!client) {
       Helper.addClass("footer", "padding-bottom-novideo");
-            document.getElementById("embed-area").value = embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly, embed_localmode);
+      document.getElementById("embed-area").value = embed_code(
+        embed_autoplay,
+        embed_width,
+        embed_height,
+        color,
+        embed_videoonly,
+        embed_localmode
+      );
     }
 
-        if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) && !Helper.mobilecheck() && !client){
+    if (
+      !/chrom(e|ium)/.test(navigator.userAgent.toLowerCase()) &&
+      !Helper.mobilecheck() &&
+      !client
+    ) {
       Helper.css(".castButton", "display", "none");
     }
 
-        Helper.log(["chromecastAvailable " + chromecastAvailable, "chromecastReady " + chromecastReady]);
+    Helper.log([
+      "chromecastAvailable " + chromecastAvailable,
+      "chromecastReady " + chromecastReady
+    ]);
 
-        if(chromecastAvailable && !client){
+    if (chromecastAvailable && !client) {
       hide_native(1);
-        } else if(chromecastReady && !client) {
+    } else if (chromecastReady && !client) {
       initializeCastApi();
-        } else if(!client){
+    } else if (!client) {
-            window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
+      window["__onGCastApiAvailable"] = function(loaded, errorInfo) {
         if (loaded) {
-                    setTimeout(function(){
+          setTimeout(function() {
             chromecastReady = true;
             initializeCastApi();
           }, 1000);
         } else {
           chromecastReady = true;
         }
-            }
+      };
     }
     Channel.listeners(true);
     Channel.add_context_menu();
 
-        if(!Helper.mobilecheck() && navigator.userAgent.match(/iPad/i) == null){
+    if (!Helper.mobilecheck() && navigator.userAgent.match(/iPad/i) == null) {
-            setTimeout(function(){Channel.set_title_width();}, 100);
+      setTimeout(function() {
+        Channel.set_title_width();
+      }, 100);
     }
   },
 
-    set_title_width: function(start){
+  set_title_width: function(start) {
-        if(window.innerWidth > 600){
+    if (window.innerWidth > 600) {
-            var add_width = document.getElementsByClassName("brand-logo")[0].offsetWidth
+      var add_width = document.getElementsByClassName("brand-logo")[0]
-            if(start){
+        .offsetWidth;
+      if (start) {
         add_width = window.innerWidth * 0.15;
       }
-            var test_against_width = window.innerWidth - document.getElementsByClassName("control-list")[0].offsetWidth - add_width - 11;
+      var test_against_width =
+        window.innerWidth -
+        document.getElementsByClassName("control-list")[0].offsetWidth -
+        add_width -
+        11;
       title_width = test_against_width;
-            document.getElementsByClassName("title-container")[0].style.width = title_width + "px";
+      document.getElementsByClassName("title-container")[0].style.width =
+        title_width + "px";
     } else {
-            document.getElementsByClassName("title-container")[0].style.width = "100%";
+      document.getElementsByClassName("title-container")[0].style.width =
+        "100%";
     }
   },
 
-    spotify_is_authenticated: function(bool){
+  spotify_is_authenticated: function(bool) {
-        if(bool){
+    if (bool) {
       Helper.log([
         "Spotify is authenticated",
         "access_token: " + access_token_data.access_token,
@@ -449,7 +557,7 @@ var Channel = {
 
   add_context_menu: function() {
     addListener("contextmenu", ".vote-container", function(e) {
-            if(hostMode) {
+      if (hostMode) {
         return;
       }
       this.preventDefault();
@@ -471,18 +579,49 @@ var Channel = {
     });
   },
 
-    share_link_modifier: function(){
+  share_link_modifier: function() {
-        document.getElementById("facebook-code-link").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" + chan.toLowerCase());
+    document
-        document.getElementById("facebook-code-link").setAttribute("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" + chan.toLowerCase() + "', 'Share Playlist','width=600,height=300'); return false;");
+      .getElementById("facebook-code-link")
-        document.getElementById("twitter-code-link").setAttribute("href", "https://twitter.com/intent/tweet?url=https://zoff.me/" + chan.toLowerCase() + "&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zoff!&amp;via=zoffmusic");
+      .setAttribute(
-        document.getElementById("twitter-code-link").setAttribute("onclick", "window.open('https://twitter.com/intent/tweet?url=https://zoff.me/" + chan.toLowerCase() + "/&amp;text=Check%20out%20this%20playlist%20" + chan.toLowerCase() + "%20on%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
+        "href",
+        "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" +
+          chan.toLowerCase()
+      );
+    document
+      .getElementById("facebook-code-link")
+      .setAttribute(
+        "onclick",
+        "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/" +
+          chan.toLowerCase() +
+          "', 'Share Playlist','width=600,height=300'); return false;"
+      );
+    document
+      .getElementById("twitter-code-link")
+      .setAttribute(
+        "href",
+        "https://twitter.com/intent/tweet?url=https://zoff.me/" +
+          chan.toLowerCase() +
+          "&amp;text=Check%20out%20this%20playlist%20" +
+          chan.toLowerCase() +
+          "%20on%20Zoff!&amp;via=zoffmusic"
+      );
+    document
+      .getElementById("twitter-code-link")
+      .setAttribute(
+        "onclick",
+        "window.open('https://twitter.com/intent/tweet?url=https://zoff.me/" +
+          chan.toLowerCase() +
+          "/&amp;text=Check%20out%20this%20playlist%20" +
+          chan.toLowerCase() +
+          "%20on%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;"
+      );
   },
 
   window_width_volume_slider: function() {
-        if(window.innerWidth <= 600 && slider_type == "horizontal") {
+    if (window.innerWidth <= 600 && slider_type == "horizontal") {
       slider_type = "vertical";
       Playercontrols.initSlider();
-        } else if(window.innerWidth > 600 && slider_type == "vertical") {
+    } else if (window.innerWidth > 600 && slider_type == "vertical") {
       slider_type = "horizontal";
       Playercontrols.initSlider();
       Helper.removeClass(".volume-container", "hide");
@@ -491,49 +630,69 @@ var Channel = {
 
   listeners: function(on) {
     var scrollListener = function(e) {
-            if(!programscroll) {
+      if (!programscroll) {
         userscroll = true;
-                if(document.getElementById("chatchannel").scrollTop + document.getElementById("chatchannel").offsetHeight >= document.getElementById("chatchannel").scrollHeight) {
+        if (
+          document.getElementById("chatchannel").scrollTop +
+            document.getElementById("chatchannel").offsetHeight >=
+          document.getElementById("chatchannel").scrollHeight
+        ) {
           userscroll = false;
         }
       }
-        }
+    };
     var scrollAllListener = function(e) {
-            if(!programscroll) {
+      if (!programscroll) {
         userscroll = true;
-                if(document.getElementById("chatall").scrollTop+ document.getElementById("chatall").offsetHeight >= document.getElementById("chatall").scrollHeight) {
+        if (
+          document.getElementById("chatall").scrollTop +
+            document.getElementById("chatall").offsetHeight >=
+          document.getElementById("chatall").scrollHeight
+        ) {
           userscroll = false;
         }
       }
-        }
+    };
-        if(!client) {
+    if (!client) {
-            if(on) {
+      if (on) {
-                document.getElementById("chatchannel").addEventListener("scroll", scrollListener);
+        document
-                document.getElementById("chatall").addEventListener("scroll", scrollListener);
+          .getElementById("chatchannel")
+          .addEventListener("scroll", scrollListener);
+        document
+          .getElementById("chatall")
+          .addEventListener("scroll", scrollListener);
       } else {
-                document.getElementById("chatchannel").removeEventListener("scroll", scrollListener);
+        document
-                document.getElementById("chatall").removeEventListener("scroll", scrollAllListener);
+          .getElementById("chatchannel")
+          .removeEventListener("scroll", scrollListener);
+        document
+          .getElementById("chatall")
+          .removeEventListener("scroll", scrollAllListener);
       }
     }
   },
 
-    onepage_load: function(){
+  onepage_load: function() {
-        if(changing_to_frontpage) return;
+    if (changing_to_frontpage) return;
-        if(user_auth_started) {
+    if (user_auth_started) {
       clearTimeout(durationTimeout);
       Player.stopInterval = true;
       user_auth_avoid = true;
-            if(!Helper.mobilecheck()) {
+      if (!Helper.mobilecheck()) {
-                Helper.tooltip('.castButton', "destroy");
+        Helper.tooltip(".castButton", "destroy");
         Helper.tooltip("#viewers", "destroy");
-                Helper.tooltip('#addToOtherList', 'destroy');
+        Helper.tooltip("#addToOtherList", "destroy");
         //$('.castButton-unactive').tooltip("destroy");
         Helper.tooltip("#offline-mode", "destroy");
-                Helper.tooltip('#admin-lock', "destroy");
+        Helper.tooltip("#admin-lock", "destroy");
       }
     }
     var url_split = window.location.href.split("/");
-        if(url_split[3].substr(0,1) != "#!" && url_split[3] !== "" && !(url_split.length == 5 && url_split[4].substr(0,1) == "#")){
+    if (
+      url_split[3].substr(0, 1) != "#!" &&
+      url_split[3] !== "" &&
+      !(url_split.length == 5 && url_split[4].substr(0, 1) == "#")
+    ) {
       socket.emit("change_channel", {
         channel: channel_before_move
       });
@@ -544,17 +703,19 @@ var Channel = {
       var add = "";
       w_p = true;
       //if(private_channel) add = Crypt.getCookie("_uI") + "_";
-
+      socket.emit("list", {
-            socket.emit("list", {version: parseInt(_VERSION), channel: add + chan.toLowerCase()});
+        version: parseInt(_VERSION),
-        } else if(url_split[3] === "") {
+        channel: add + chan.toLowerCase()
+      });
+    } else if (url_split[3] === "") {
       /*if(client) {
                 var host = window.location.hostname.split(".");
                 window.location.hostname = host[host.length -1];
             }*/
       Admin.display_logged_out();
-            if(hostMode) {
+      if (hostMode) {
         Helper.removeClass("#main-row", "fullscreened");
-                document.querySelector(".host_switch_class").checked = false
+        document.querySelector(".host_switch_class").checked = false;
         enable_host_mode(false);
       }
       var channel_before_move = chan.toLowerCase();
@@ -562,7 +723,7 @@ var Channel = {
       changing_to_frontpage = true;
       user_change_password = false;
       clearTimeout(width_timeout);
-            if(fireplace_initiated){
+      if (fireplace_initiated) {
         fireplace_initiated = false;
         Player.fireplace.destroy();
         Helper.css("#fireplace_player", "display", "none");
@@ -576,15 +737,18 @@ var Channel = {
       durationBegun = false;
 
       Helper.css("#embed-button", "display", "none");
-            if(!Helper.mobilecheck()) {
+      if (!Helper.mobilecheck()) {
         Helper.tooltip(".castButton", "destroy");
-                Helper.tooltip('#addToOtherList', 'destroy');
+        Helper.tooltip("#addToOtherList", "destroy");
         Helper.tooltip("#viewers", "destroy");
         Helper.tooltip("#offline-mode", "destroy");
         Helper.tooltip("search-btn", "destroy");
-                Helper.tooltip('#fullscreen', "destroy");
+        Helper.tooltip("#fullscreen", "destroy");
-                if(M.Tooltip.getInstance(document.getElementById("admin-lock")) != undefined) {
+        if (
-                    Helper.tooltip('#admin-lock', "destroy");
+          M.Tooltip.getInstance(document.getElementById("admin-lock")) !=
+          undefined
+        ) {
+          Helper.tooltip("#admin-lock", "destroy");
         }
         Helper.tooltip(".search-btn-container", "destroy");
         Helper.tooltip(".shuffle-btn-container", "destroy");
@@ -592,19 +756,21 @@ var Channel = {
       }
       Helper.removeElement("#seekToDuration");
 
-            M.Sidenav.getInstance(document.getElementsByClassName("sidenav")[0]).destroy();
+      M.Sidenav.getInstance(
-            if(!client) {
+        document.getElementsByClassName("sidenav")[0]
-                if(!Helper.mobilecheck()) {
+      ).destroy();
+      if (!client) {
+        if (!Helper.mobilecheck()) {
           Helper.tooltip("#chan", "destroy");
         }
-                var tap_1 = document.querySelectorAll(".tap-target")
+        var tap_1 = document.querySelectorAll(".tap-target");
-                if(tap_1.length > 0 && M.TapTarget.getInstance(tap_1[0])) {
+        if (tap_1.length > 0 && M.TapTarget.getInstance(tap_1[0])) {
           M.TapTarget.getInstance(tap_1[0]).close();
         }
       }
       clearTimeout(tap_target_timeout);
       //before_toast();
-            if(Helper.mobilecheck() || user_auth_avoid || client) {
+      if (Helper.mobilecheck() || user_auth_avoid || client) {
         Helper.log(["Removing all listeners"]);
         //socket.emit("change_channel");
         //removeAllListeners();
@@ -636,25 +802,33 @@ var Channel = {
       Helper.ajax({
         url: "/",
         method: "GET",
-                success: function(e){
+        success: function(e) {
-
+          if (!client) {
-                    if(!client) {
             document.querySelector("#hide-playlist").remove();
-			if(hiddenPlaylist) document.querySelector("main").style.maxWidth = "";
+            if (hiddenPlaylist)
+              document.querySelector("main").style.maxWidth = "";
             hiddenPlaylist = false;
-		        document.getElementById("volume-button").removeEventListener("click", Playercontrols.mute_video);
+            document
-                        document.getElementById("playpause").removeEventListener("click", Playercontrols.play_pause);
+              .getElementById("volume-button")
-                        document.getElementById("fullscreen").removeEventListener("click", Playercontrols.fullscreen);
+              .removeEventListener("click", Playercontrols.mute_video);
+            document
+              .getElementById("playpause")
+              .removeEventListener("click", Playercontrols.play_pause);
+            document
+              .getElementById("fullscreen")
+              .removeEventListener("click", Playercontrols.fullscreen);
           }
           Channel.listeners(false);
-                    if(Helper.mobilecheck() || user_auth_avoid) {
+          if (Helper.mobilecheck() || user_auth_avoid) {
             video_id = "";
             song_title = "";
           }
 
-                    document.querySelectorAll("meta[name=theme-color]")[0].setAttribute("content", "#2D2D2D");
+          document
+            .querySelectorAll("meta[name=theme-color]")[0]
+            .setAttribute("content", "#2D2D2D");
 
-                    if(!Helper.mobilecheck() && !user_auth_avoid){
+          if (!Helper.mobilecheck() && !user_auth_avoid) {
             Helper.removeElement("#playbar");
             Helper.removeElement("#main_components");
             Helper.addClass("#player_overlay", "player_bottom");
@@ -663,18 +837,30 @@ var Channel = {
             Helper.addClass("#main-row", "frontpage_modified_heights");
             Helper.css("#player", "opacity", "1");
             Helper.removeClass("#video-container", "no-opacity");
-                        document.getElementById("main-row").insertAdjacentHTML("afterbegin", "<div id='player_bottom_overlay' class='player player_bottom'></div>");
+            document
-                        document.getElementById("player_bottom_overlay").insertAdjacentHTML("afterbegin", "<a id='closePlayer' title='Close Player'><i class='material-icons'>close</i></a>");
+              .getElementById("main-row")
-                        document.getElementById("player_bottom_overlay").setAttribute("data-channel", channel_before_move.toLowerCase());
+              .insertAdjacentHTML(
+                "afterbegin",
+                "<div id='player_bottom_overlay' class='player player_bottom'></div>"
+              );
+            document
+              .getElementById("player_bottom_overlay")
+              .insertAdjacentHTML(
+                "afterbegin",
+                "<a id='closePlayer' title='Close Player'><i class='material-icons'>close</i></a>"
+              );
+            document
+              .getElementById("player_bottom_overlay")
+              .setAttribute("data-channel", channel_before_move.toLowerCase());
             Helper.removeElement("#playlist");
           } else {
-                        try{
+            try {
               Player.player.destroy();
-                        } catch(error){}
+            } catch (error) {}
             try {
               Player.soundcloud_dead = true;
               Player.soundcloud_player.kill();
-                        } catch(error){}
+            } catch (error) {}
             Player.player = "";
             document.title = "Zoff";
           }
@@ -683,32 +869,53 @@ var Channel = {
           response.innerHTML = e;
 
           var newList = response.querySelector("#lists-script").innerHTML;
-                    newList = newList.trim().replace("window.lists = ", "").replace("window.lists=", "");
+          newList = newList
+            .trim()
+            .replace("window.lists = ", "")
+            .replace("window.lists=", "");
           newList = newList.substring(0, newList.length);
           window.lists = JSON.parse(newList);
 
           response.querySelector("#lists-script").remove();
           Helper.removeElement("#sidenav-overlay");
-                    document.getElementsByTagName("main")[0].className = "center-align container";
+          document.getElementsByTagName("main")[0].className =
+            "center-align container";
           Helper.removeClass("#main-container", "channelpage");
           document.getElementById("main-container").setAttribute("style", "");
-                    document.getElementsByTagName("header")[0].innerHTML = response.querySelectorAll("header")[0].outerHTML;
+          document.getElementsByTagName(
+            "header"
+          )[0].innerHTML = response.querySelectorAll("header")[0].outerHTML;
 
-                    document.getElementsByTagName("header")[0].insertAdjacentHTML("afterend", response.querySelectorAll(".section.mega")[0].outerHTML);
+          document
+            .getElementsByTagName("header")[0]
+            .insertAdjacentHTML(
+              "afterend",
+              response.querySelectorAll(".section.mega")[0].outerHTML
+            );
           //document.getElementsByTagName("header")[0].insertAdjacentHTML("afterend", response.querySelectorAll(".section.mobile-search")[0].innerHTML);
-                    if(Helper.mobilecheck() || user_auth_avoid) {
+          if (Helper.mobilecheck() || user_auth_avoid) {
-                        document.getElementsByTagName("main")[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
+            document.getElementsByTagName(
+              "main"
+            )[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
           } else {
-                        document.getElementsByTagName("main")[0].insertAdjacentHTML("beforeend", response.querySelectorAll("#main_section_frontpage")[0].outerHTML);
+            document
+              .getElementsByTagName("main")[0]
+              .insertAdjacentHTML(
+                "beforeend",
+                response.querySelectorAll("#main_section_frontpage")[0]
+                  .outerHTML
+              );
           }
           Helper.removeClass(".page-footer", "padding-bottom-extra");
           Helper.removeClass(".page-footer", "padding-bottom-novideo");
-                    document.getElementById("favicon").setAttribute("href", "/assets/images/favicon-32x32.png");
+          document
+            .getElementById("favicon")
+            .setAttribute("href", "/assets/images/favicon-32x32.png");
 
           Helper.log(["Socket", socket]);
-                    if(document.querySelectorAll("#alreadyfp").length == 1){
+          if (document.querySelectorAll("#alreadyfp").length == 1) {
             Frontpage.init();
-                    }else {
+          } else {
             fromChannel = true;
             frontpage = true;
             Frontpage.init();
@@ -716,9 +923,17 @@ var Channel = {
 
           changing_to_frontpage = false;
 
-                    if(document.querySelectorAll("#alreadychannel").length === 0 && !user_auth_avoid){
+          if (
-                        document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<div id='alreadychannel'></div");
+            document.querySelectorAll("#alreadychannel").length === 0 &&
-                    } else if(user_auth_avoid) {
+            !user_auth_avoid
+          ) {
+            document
+              .getElementsByTagName("head")[0]
+              .insertAdjacentHTML(
+                "beforeend",
+                "<div id='alreadychannel'></div"
+              );
+          } else if (user_auth_avoid) {
             Helper.removeElement("#alreadychannel");
           }
           Helper.css("#channel-load", "display", "none");
@@ -727,16 +942,16 @@ var Channel = {
       });
     }
   }
-}
+};
 
 function get_history() {
-    if(socket && socket.id) {
+  if (socket && socket.id) {
     /*var p = Crypt.get_userpass();
         if(p == undefined) p = "";
         var c = Crypt.crypt_pass(p, true);
         if(c == undefined) c = "";*/
-        socket.emit("get_history", {channel: chan.toLowerCase(), all: false});
+    socket.emit("get_history", { channel: chan.toLowerCase(), all: false });
-        socket.emit("get_history", {channel: chan.toLowerCase(), all: true});
+    socket.emit("get_history", { channel: chan.toLowerCase(), all: true });
   } else {
     setTimeout(function() {
       get_history();

server/public/assets/js/frontpage.js

@@ -4,12 +4,11 @@ var socket;
 var rotation_timeout;
 
 var Frontpage = {
-
   blob_list: [],
 
-    winter: (new Date()).getMonth() >= 10 ? true : false,
+  winter: new Date().getMonth() >= 10 ? true : false,
   pride: function() {
-        return (new Date()).getMonth() == 5;
+    return new Date().getMonth() == 5;
   },
 
   times_rotated: 0,
@@ -19,19 +18,18 @@ var Frontpage = {
   frontpage_function: function() {
     frontpage = true;
 
-        Helper.log([
+    Helper.log(["Frontpage fetch", msg]);
-            "Frontpage fetch",
-            msg
-        ]);
 
     Frontpage.all_channels = window.lists;
     var msg = window.lists;
     delete window.lists;
     window.lists = undefined;
     //document.querySelector("#lists-script").remove();
-        if(msg.length == 0) {
+    if (msg.length == 0) {
       //Helper.css("#preloader", "display", "none");
-            document.getElementById("channel-list-container").insertAdjacentHTML("beforeend", "<p>No channels yet</p>");
+      document
+        .getElementById("channel-list-container")
+        .insertAdjacentHTML("beforeend", "<p>No channels yet</p>");
     } else {
       Frontpage.populate_channels(msg, true, false);
     }
@@ -42,54 +40,66 @@ var Frontpage = {
     //document.getElementById("channels").innerHTML = "";
 
     var num = 0;
-        if(!set) Frontpage.add_backdrop(lists, 0);
+    if (!set) Frontpage.add_backdrop(lists, 0);
-        else if(set) {
+    else if (set) {
       document.getElementById("channels").innerHTML = "";
-            if(popular) {
+      if (popular) {
-                lists = lists.sort(Helper.predicate({
+        lists = lists.sort(
-                    name: 'pinned',
+          Helper.predicate(
+            {
+              name: "pinned",
               reverse: true
-                }, {
+            },
-                    name: 'viewers',
+            {
+              name: "viewers",
               reverse: true
-                }, {
+            },
-                    name: 'accessed',
+            {
+              name: "accessed",
               reverse: true
-                }, {
+            },
-                    name: 'count',
+            {
+              name: "count",
               reverse: true
-                }));
+            }
+          )
+        );
       } else {
-                lists = lists.sort(Helper.predicate({
+        lists = lists.sort(
-                    name: 'viewers',
+          Helper.predicate(
+            {
+              name: "viewers",
               reverse: true
-                }, {
+            },
-                    name: 'count',
+            {
+              name: "count",
               reverse: true
-                }));
+            }
+          )
+        );
       }
 
-            if(!Helper.mobilecheck()) {
+      if (!Helper.mobilecheck()) {
         clearTimeout(rotation_timeout);
         Frontpage.add_backdrop(lists, 0);
       }
 
       pre_card = channel_list;
 
-            Helper.log([
+      Helper.log(["Pre_card: ", pre_card]);
-                "Pre_card: ",
-                pre_card
-            ]);
 
-            for(var x in lists) {
+      for (var x in lists) {
         var chan = Helper.decodeChannelName(lists[x]._id);
-                if(num<12 || !popular) {
+        if (num < 12 || !popular) {
           var id = lists[x].id;
           var viewers = lists[x].viewers;
           var description = lists[x].description;
           var img;
-                    img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');";
+          img =
-                    if(lists[x].thumbnail && lists[x].thumbnail != "") {
+            "background-image:url('https://img.youtube.com/vi/" +
+            id +
+            "/hqdefault.jpg');";
+          if (lists[x].thumbnail && lists[x].thumbnail != "") {
             img = "background-image:url('" + lists[x].thumbnail + "');";
           }
 
@@ -97,9 +107,11 @@ var Frontpage = {
           var card = document.createElement("div");
           card.innerHTML += pre_card;
           //card.innerHTML = card.children[0];
-                    if(song_count > 3) {
+          if (song_count > 3) {
-                        if(lists[x].pinned == 1) {
+            if (lists[x].pinned == 1) {
-                            card.querySelector(".pin").setAttribute("style", "display:block;");
+              card
+                .querySelector(".pin")
+                .setAttribute("style", "display:block;");
               //card.find(".card").attr("title", "Featured list");
             } else {
               /*card.find(".pin").attr("style", "display:none;");
@@ -113,20 +125,26 @@ var Frontpage = {
             card.querySelector(".chan-bg").setAttribute("style", img);
             card.querySelector(".chan-link").setAttribute("href", chan + "/");
 
-                        if(description != "" && description != undefined && !Helper.mobilecheck() && description != "This list has no description") {
+            if (
+              description != "" &&
+              description != undefined &&
+              !Helper.mobilecheck() &&
+              description != "This list has no description"
+            ) {
               card.querySelector(".card-title").innerText = chan;
               card.querySelector(".description_text").innerText = description;
               description = "";
             } else {
               card.querySelector(".card-reveal").remove();
-                            Helper.removeClass(card.querySelector(".card"), "sticky-action")
+              Helper.removeClass(card.querySelector(".card"), "sticky-action");
             }
 
-                        document.getElementById("channels").insertAdjacentHTML("beforeend", card.children[0].innerHTML);
+            document
+              .getElementById("channels")
+              .insertAdjacentHTML("beforeend", card.children[0].innerHTML);
           } else {
             num--;
           }
-
         }
         num++;
       }
@@ -136,15 +154,22 @@ var Frontpage = {
 
     options_list = options_list.sort(Frontpage.sortFunction_active);
     var data = {};
-        for(var x in options_list) {
+    for (var x in options_list) {
       data[Helper.decodeChannelName(options_list[x]._id)] = null;
     }
-        if(document.querySelectorAll(".pin").length == 1 && !Helper.mobilecheck()) {
+    if (
-            Helper.tooltip(document.querySelectorAll(".pin")[0].parentElement.parentElement.parentElement, {
+      document.querySelectorAll(".pin").length == 1 &&
+      !Helper.mobilecheck()
+    ) {
+      Helper.tooltip(
+        document.querySelectorAll(".pin")[0].parentElement.parentElement
+          .parentElement,
+        {
           delay: 5,
           position: "top",
           html: "Featured playlist"
-            });
+        }
+      );
     }
 
     var to_autocomplete = document.querySelectorAll("input.autocomplete")[0];
@@ -155,7 +180,7 @@ var Frontpage = {
       limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
       onAutocomplete: function(val) {
         Frontpage.to_channel(Helper.encodeChannelName(val), false);
-            },
+      }
     });
 
     //document.getElementById("preloader").style.display = "none";
@@ -180,7 +205,7 @@ var Frontpage = {
     return 0;
   },
 
-    sortFunction_active: function(a, b){
+  sortFunction_active: function(a, b) {
     var o1 = a.accessed;
     var o2 = b.accessed;
 
@@ -196,91 +221,118 @@ var Frontpage = {
 
   getCookie: function(cname) {
     var name = cname + "=";
-        var ca = document.cookie.split(';');
+    var ca = document.cookie.split(";");
-        for(var i=0; i<ca.length; i++) {
+    for (var i = 0; i < ca.length; i++) {
       var c = ca[i];
-            while (c.charAt(0)==' ') c = c.substring(1);
+      while (c.charAt(0) == " ") c = c.substring(1);
-            if (c.indexOf(name) === 0) return c.substring(name.length,c.length);
+      if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
     }
     return "";
   },
 
   add_backdrop: function(list, i) {
-        if(i >= list.length || i >= 20) i = 0;
+    if (i >= list.length || i >= 20) i = 0;
-        if(list[i] == undefined) return;
+    if (list[i] == undefined) return;
     var id = list[i].id;
-        if(Frontpage.blob_list[i] !== undefined){
+    if (Frontpage.blob_list[i] !== undefined) {
       //$(".room-namer").css("opacity", 0);
-            setTimeout(function(){
+      setTimeout(function() {
-                if(frontpage){
+        if (frontpage) {
-                    Helper.css("#mega-background","background", "url(data:image/png;base64,"+Frontpage.blob_list[i]+")");
+          Helper.css(
-                    Helper.css("#mega-background","background-size" , "cover");
+            "#mega-background",
-                    Helper.css("#mega-background","background-repeat" , "no-repeat");
+            "background",
-                    Helper.css("#mega-background","opacity", 1);
+            "url(data:image/png;base64," + Frontpage.blob_list[i] + ")"
-                    document.querySelector(".autocomplete").setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
+          );
+          Helper.css("#mega-background", "background-size", "cover");
+          Helper.css("#mega-background", "background-repeat", "no-repeat");
+          Helper.css("#mega-background", "opacity", 1);
+          document
+            .querySelector(".autocomplete")
+            .setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
           //$(".room-namer").css("opacity", 1);
         }
-            },500);
+      }, 500);
     } else {
       var img = new Image();
-            img.src = "/assets/images/thumbnails/"+id+".jpg";
+      img.src = "/assets/images/thumbnails/" + id + ".jpg";
 
-            img.onerror = function(e){ // Failed to load
+      img.onerror = function(e) {
+        // Failed to load
         var add = "";
-                if(window.location.hostname == "fb.zoff.me") {
+        if (window.location.hostname == "fb.zoff.me") {
           add = "https://zoff.me";
         }
         Helper.ajax({
           type: "POST",
-                    data: {id:id},
+          data: { id: id },
           url: add + "/api/imageblob",
-                    headers: {"Content-Type": "application/json;charset=UTF-8"},
+          headers: { "Content-Type": "application/json;charset=UTF-8" },
-                    success: function(data){
+          success: function(data) {
-                        setTimeout(function(){
+            setTimeout(function() {
               try {
-                                Helper.css("#mega-background", "background", "url(/assets/images/thumbnails/"+data+")");
+                Helper.css(
-                                Helper.css("#mega-background", "background-size" , "cover");
+                  "#mega-background",
-                                Helper.css("#mega-background", "background-repeat" , "no-repeat");
+                  "background",
+                  "url(/assets/images/thumbnails/" + data + ")"
+                );
+                Helper.css("#mega-background", "background-size", "cover");
+                Helper.css(
+                  "#mega-background",
+                  "background-repeat",
+                  "no-repeat"
+                );
                 Helper.css("#mega-background", "opacity", 1);
-                                document.querySelector(".autocomplete").setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
+                document
-                            } catch(e) {}
+                  .querySelector(".autocomplete")
-                        },500);
+                  .setAttribute(
+                    "placeholder",
+                    Helper.decodeChannelName(list[i]._id)
+                  );
+              } catch (e) {}
+            }, 500);
           },
           error: function() {
             try {
-                            document.querySelector(".autocomplete").setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
+              document
-                        } catch(e) {
+                .querySelector(".autocomplete")
+                .setAttribute(
+                  "placeholder",
+                  Helper.decodeChannelName(list[i]._id)
+                );
+            } catch (e) {
               console.log("This is a weird error...", e);
             }
           }
         });
       };
-            img.onload = function(){ // Loaded successfully
+      img.onload = function() {
+        // Loaded successfully
         try {
-                    Helper.css("#mega-background", "background", "url("+img.src+")");
+          Helper.css("#mega-background", "background", "url(" + img.src + ")");
-                    Helper.css("#mega-background", "background-size" , "cover");
+          Helper.css("#mega-background", "background-size", "cover");
-                    Helper.css("#mega-background", "background-repeat" , "no-repeat");
+          Helper.css("#mega-background", "background-repeat", "no-repeat");
           Helper.css("#mega-background", "opacity", 1);
-                    document.querySelector(".autocomplete").setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
+          document
-                } catch(e) {}
+            .querySelector(".autocomplete")
+            .setAttribute("placeholder", Helper.decodeChannelName(list[i]._id));
+        } catch (e) {}
       };
-
     }
-        rotation_timeout = setTimeout(function(){
+    rotation_timeout = setTimeout(function() {
-            if(Frontpage.times_rotated == 50 && frontpage){
+      if (Frontpage.times_rotated == 50 && frontpage) {
         Frontpage.times_rotated = 0;
         i = 0;
         //Frontpage.get_frontpage_lists();
-            }else if(frontpage){
+      } else if (frontpage) {
         Frontpage.times_rotated += 1;
-                Frontpage.add_backdrop(list, i+1);
+        Frontpage.add_backdrop(list, i + 1);
       }
-        },6000);
+    }, 6000);
   },
 
   get_frontpage_lists: function() {
     var add = "";
-        if(window.location.hostname == "fb.zoff.me") {
+    if (window.location.hostname == "fb.zoff.me") {
       add = "https://zoff.me";
     }
     Frontpage.frontpage_function();
@@ -304,14 +356,14 @@ var Frontpage = {
   },
 
   start_snowfall: function() {
-        setTimeout(function(){
+    setTimeout(function() {
-            var x = Math.floor((Math.random() * window.innerWidth) + 1);
+      var x = Math.floor(Math.random() * window.innerWidth + 1);
       var snow = document.createElement("div");
       var parent = document.getElementsByClassName("mega")[0];
 
       snow.className = "snow";
       //snow.attr("left", x);
-            snow.style.left = x+"px";
+      snow.style.left = x + "px";
       snow.style.top = "0px";
       parent.appendChild(snow);
       Frontpage.fall_snow(snow);
@@ -320,18 +372,22 @@ var Frontpage = {
   },
 
   fall_snow: function(corn) {
-        corn.style.top = (parseInt(corn.style.top.replace("px", ""))+2)+"px";
+    corn.style.top = parseInt(corn.style.top.replace("px", "")) + 2 + "px";
-        if(parseInt(corn.style.top.replace("px", "")) < document.getElementById("mega-background").offsetHeight-2.5){
+    if (
-            setTimeout(function(){
+      parseInt(corn.style.top.replace("px", "")) <
+      document.getElementById("mega-background").offsetHeight - 2.5
+    ) {
+      setTimeout(function() {
         Frontpage.fall_snow(corn);
-            },50);
+      }, 50);
-        }else{
+    } else {
       corn.remove();
     }
   },
 
   set_viewers: function(viewers) {
-        document.querySelector("#frontpage-viewer-counter").innerHTML = "<i class='material-icons frontpage-viewers'>visibility</i>" + viewers;
+    document.querySelector("#frontpage-viewer-counter").innerHTML =
+      "<i class='material-icons frontpage-viewers'>visibility</i>" + viewers;
   },
 
   to_channel: function(new_channel, popstate) {
@@ -340,18 +396,22 @@ var Frontpage = {
     frontpage = false;
     new_channel = new_channel.toLowerCase();
     clearTimeout(rotation_timeout);
-        if(Helper.mobilecheck()){
+    if (Helper.mobilecheck()) {
       Helper.log(["removing all listeners"]);
       removeAllListeners();
     }
     Helper.css("#main-container", "background-color", "#2d2d2d");
-        if(!Helper.mobilecheck()) {
+    if (!Helper.mobilecheck()) {
       Helper.tooltip("#frontpage-viewer-counter", "destroy");
       Helper.tooltip(".generate-channel-name", "destroy");
       Helper.tooltip("#offline-mode", "destroy");
       Helper.tooltip("#client-mode-button", "destroy");
-            if(document.querySelectorAll(".pin").length == 1) {
+      if (document.querySelectorAll(".pin").length == 1) {
-                Helper.tooltip(document.querySelectorAll(".pin")[0].parentElement.parentElement.parentElement, "destroy");
+        Helper.tooltip(
+          document.querySelectorAll(".pin")[0].parentElement.parentElement
+            .parentElement,
+          "destroy"
+        );
       }
     }
 
@@ -360,46 +420,73 @@ var Frontpage = {
     Helper.ajax({
       url: "/" + new_channel,
       method: "get",
-            data: {channel: new_channel},
+      data: { channel: new_channel },
-            success: function(e){
+      success: function(e) {
-
+        if (Player.player !== "") {
-                if(Player.player !== ""){
           //Player.player.destroy();
-                    socket.emit("change_channel", {channel: chan.toLowerCase()});
+          socket.emit("change_channel", { channel: chan.toLowerCase() });
         }
         var _player = document.querySelectorAll("#frontpage_player");
-                if(_player.length > 0) _player[0].innerHTML = "";
+        if (_player.length > 0) _player[0].innerHTML = "";
-                if(Helper.mobilecheck()) {
+        if (Helper.mobilecheck()) {
           //Helper.log("disconnecting");
           //socket.disconnect();
           socket.removeAllListeners();
         }
         var old_chan = chan;
-                if(!popstate){
+        if (!popstate) {
-                    window.history.pushState("to the channel!", "Title", "/" + new_channel);
+          window.history.pushState(
-                    if(prev_chan_list == "") prev_chan_list = new_channel;
+            "to the channel!",
-                    if(prev_chan_player == "") prev_chan_player = new_channel;
+            "Title",
+            "/" + new_channel
+          );
+          if (prev_chan_list == "") prev_chan_list = new_channel;
+          if (prev_chan_player == "") prev_chan_player = new_channel;
           chan = new_channel;
         }
 
         var response = document.createElement("div");
         response.innerHTML = e;
 
-                M.FormSelect.getInstance(document.querySelector("#view_channels_select")).destroy();
+        M.FormSelect.getInstance(
+          document.querySelector("#view_channels_select")
+        ).destroy();
         //$('select').formSelect('destroy');
         Helper.removeElement(".mega");
         Helper.removeElement(".mobile-search");
-                document.getElementsByTagName("main")[0].className = "container center-align main";
+        document.getElementsByTagName("main")[0].className =
+          "container center-align main";
         Helper.addClass("#main-container", "channelpage");
 
-                document.getElementsByTagName("header")[0].innerHTML = response.querySelectorAll("header")[0].innerHTML;
+        document.getElementsByTagName(
+          "header"
+        )[0].innerHTML = response.querySelectorAll("header")[0].innerHTML;
 
-                if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck() || Player.player === undefined){
+        if (
-                    document.getElementsByTagName("main")[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
+          document.querySelectorAll("#alreadychannel").length === 0 ||
+          Helper.mobilecheck() ||
+          Player.player === undefined
+        ) {
+          document.getElementsByTagName(
+            "main"
+          )[0].innerHTML = response.querySelectorAll("main")[0].innerHTML;
         } else {
-                    document.getElementById("main-row").insertAdjacentHTML("beforeend", response.querySelectorAll("#playlist")[0].outerHTML);
+          document
-                    if(!client) document.getElementById("video-container").insertAdjacentHTML("beforeend", response.querySelectorAll("#main_components")[0].outerHTML);
+            .getElementById("main-row")
-                    document.getElementById("main-row").insertAdjacentHTML("beforeend", "<div id='playbar'></div>");
+            .insertAdjacentHTML(
+              "beforeend",
+              response.querySelectorAll("#playlist")[0].outerHTML
+            );
+          if (!client)
+            document
+              .getElementById("video-container")
+              .insertAdjacentHTML(
+                "beforeend",
+                response.querySelectorAll("#main_components")[0].outerHTML
+              );
+          document
+            .getElementById("main-row")
+            .insertAdjacentHTML("beforeend", "<div id='playbar'></div>");
           Helper.removeClass("#player", "player_bottom");
           Helper.removeClass("#player_overlay", "player_bottom");
           Helper.removeClass(".video-container", "frontpage-player");
@@ -408,93 +495,110 @@ var Frontpage = {
           Helper.removeElement("#closePlayer");
           Helper.removeElement("#player_bottom_overlay");
         }
-                document.getElementById("search").setAttribute("placeholder", "Search...");
+        document
+          .getElementById("search")
+          .setAttribute("placeholder", "Search...");
         Helper.addClass(".page-footer", "padding-bottom-novideo");
         from_frontpage = true;
         //Player.stopInterval =true;
         //clearTimeout(durationTimeout);
-                if(document.querySelectorAll("#alreadychannel").length == 1){
+        if (document.querySelectorAll("#alreadychannel").length == 1) {
-                    if(old_chan != new_channel) local_new_channel = true;
+          if (old_chan != new_channel) local_new_channel = true;
           Channel.init();
-                }else{
+        } else {
           fromFront = true;
           Channel.init();
         }
-                if(document.querySelectorAll("#alreadyfp").length === 0) document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<div id='alreadyfp'></div>");
+        if (document.querySelectorAll("#alreadyfp").length === 0)
-
+          document
+            .getElementsByTagName("head")[0]
+            .insertAdjacentHTML("beforeend", "<div id='alreadyfp'></div>");
       }
     });
   },
 
   init: function() {
-
     var date = new Date();
     Frontpage.blob_list = [];
-        if(date.getMonth() == 3 && date.getDate() == 1){
+    if (date.getMonth() == 3 && date.getDate() == 1) {
       Helper.css(".mega", "-webkit-transform", "rotate(180deg)");
       Helper.css(".mega", "-moz-transform", "rotate(180deg)");
       //Materialize.toast('<p id="aprilfools">We suck at pranks..<a class="waves-effect waves-light btn light-green" style="pointer-events:none;">Agreed</a></p>', 100000);
     }
 
-        if(window.location.hostname != "localhost") {
+    if (window.location.hostname != "localhost") {
       var page = window.location.pathname;
-            if(page.substring(page.length - 1) != "/") page += "/";
+      if (page.substring(page.length - 1) != "/") page += "/";
-            ga('send', 'pageview', page);
+      ga("send", "pageview", page);
     }
 
-        window.onpopstate = function(e){
+    window.onpopstate = function(e) {
       var url_split = window.location.href.split("/");
-
+      console.log(url_split);
-            if(url_split[3] !== "" && url_split[3].substring(0,1) != "#"){
+      if (url_split[3] !== "" && url_split[3].substring(0, 1) != "#") {
         Frontpage.to_channel(url_split[3], true);
       }
     };
 
-        if(window.location.hostname == "fb.zoff.me") {
+    if (window.location.hostname == "fb.zoff.me") {
       Helper.addClass("footer", "hide");
     }
 
-        channel_list = document.querySelector(".hidden-channel-list").cloneNode(true).innerHTML;
+    channel_list = document
+      .querySelector(".hidden-channel-list")
+      .cloneNode(true).innerHTML;
     try {
       document.querySelector(".hidden-channel-list").remove();
-        }catch(e){}
+    } catch (e) {}
 
     Frontpage.share_link_modifier();
 
-        if(window.location.hostname == "zoff.me" || window.location.hostname == "fb.zoff.me") add = "https://zoff.me";
+    if (
+      window.location.hostname == "zoff.me" ||
+      window.location.hostname == "fb.zoff.me"
+    )
+      add = "https://zoff.me";
     else add = window.location.hostname;
-        if(socket === undefined) {
+    if (socket === undefined) {
       no_socket = false;
-            socket = io.connect(''+add, connection_options);
+      if (window.location.port != "") {
-            socket.on('update_required', function(msg) {
+        add = add + ":" + window.location.port + "/";
-                if(window.location.hostname == "localhost") {
+      }
+      socket = io.connect(
+        "" + add,
+        connection_options
+      );
+      socket.on("update_required", function(msg) {
+        if (window.location.hostname == "localhost") {
           console.log(msg);
           return;
         }
         window.location.reload(true);
       });
     }
-        if(document.querySelectorAll("#alreadyfp").length === 0 || Helper.mobilecheck() || !socket._callbacks.$playlists || user_auth_avoid){
+    if (
+      document.querySelectorAll("#alreadyfp").length === 0 ||
+      Helper.mobilecheck() ||
+      !socket._callbacks.$playlists ||
+      user_auth_avoid
+    ) {
       setup_playlist_listener();
     }
 
     /*M.Modal.init(document.getElementById("about"));
         M.Modal.init(document.getElementById("help"));
         M.Modal.init(document.getElementById("contact"));*/
-        var elem = document.querySelector('select');
+    var elem = document.querySelector("select");
     document.querySelector(".no-jump-select").remove();
     M.FormSelect.init(elem);
 
-        Helper.log([
+    Helper.log(["Sending frontpage_lists", "Socket"]);
-            "Sending frontpage_lists",
-            "Socket"
-        ]);
 
     Crypt.init();
-        if(Crypt.get_offline()){
+    if (Crypt.get_offline()) {
       change_offline(true, offline);
     } else {
-            if(!Helper.mobilecheck()) {
+      if (!Helper.mobilecheck()) {
         Helper.tooltip("#offline-mode", {
           delay: 5,
           position: "bottom",
@@ -502,7 +606,7 @@ var Frontpage = {
         });
       }
     }
-        if(!Helper.mobilecheck()) {
+    if (!Helper.mobilecheck()) {
       Helper.tooltip("#frontpage-viewer-counter", {
         delay: 5,
         position: "bottom",
@@ -523,9 +627,9 @@ var Frontpage = {
 
     Helper.css("#channel-load", "display", "none");
     //Materialize.toast("<a href='/remote' style='color:white;'>Try out our new feature, remote!</a>", 8000)
-        if(window.location.hash == "#donation") {
+    if (window.location.hash == "#donation") {
       window.location.hash = "#";
-            M.Modal.init(document.getElementById("donation"));;
+      M.Modal.init(document.getElementById("donation"));
       M.Modal.getInstance(document.getElementById("donation")).open();
     }
 
@@ -540,30 +644,52 @@ var Frontpage = {
             window.location.href = 'http://etys.no';
         });*/
 
-        if(!Helper.mobilecheck() && Frontpage.winter) {
+    if (!Helper.mobilecheck() && Frontpage.winter) {
-            document.getElementsByClassName("mega")[0].insertAdjacentHTML("afterbegin", '<div id="snow"></div>');
+      document
+        .getElementsByClassName("mega")[0]
+        .insertAdjacentHTML("afterbegin", '<div id="snow"></div>');
     }
-        if(Frontpage.pride()) {
+    if (Frontpage.pride()) {
       Helper.addClass("#fp-nav", "pride-background");
     }
 
-        if(Helper.mobilecheck()){
+    if (Helper.mobilecheck()) {
       //$('input#autocomplete-input').characterCounter();
     }
 
-        window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
+    window["__onGCastApiAvailable"] = function(loaded, errorInfo) {
       if (loaded) {
         chromecastReady = true;
       } else {
       }
-        }
+    };
   },
 
   share_link_modifier: function() {
-        document.getElementById("facebook-code-link").setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/");
+    document
-        document.getElementById("facebook-code-link").setAttribute("onclick", "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/', 'Share Zoff','width=600,height=300'); return false;");
+      .getElementById("facebook-code-link")
-        document.getElementById("twitter-code-link").setAttribute("href", "https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic");
+      .setAttribute(
-        document.getElementById("twitter-code-link").setAttribute("onclick", "window.open('https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;");
+        "href",
+        "https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/"
+      );
+    document
+      .getElementById("facebook-code-link")
+      .setAttribute(
+        "onclick",
+        "window.open('https://www.facebook.com/sharer/sharer.php?u=https://zoff.me/', 'Share Zoff','width=600,height=300'); return false;"
+      );
+    document
+      .getElementById("twitter-code-link")
+      .setAttribute(
+        "href",
+        "https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic"
+      );
+    document
+      .getElementById("twitter-code-link")
+      .setAttribute(
+        "onclick",
+        "window.open('https://twitter.com/intent/tweet?url=https://zoff.me/&amp;text=Check%20out%20Zoff!&amp;via=zoffmusic','Share Playlist','width=600,height=300'); return false;"
+      );
     //$("#qr-code-link").attr("href", "//chart.googleapis.com/chart?chs=500x500&cht=qr&chl=https://zoff.me/&choe=UTF-8&chld=L%7C1");
     //$("#qr-code-image-link").attr("src", "//chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://zoff.me/&choe=UTF-8&chld=L%7C1");
   }