Somewhat prettier css

gulpfile.js

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

pm2.json

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

server/VERSION.js

@@ -1,5 +1,5 @@
 VERSION = 6;
 
 try {
-    module.exports = VERSION;
+  module.exports = VERSION;
-} catch(e) {}
+} catch (e) {}

server/models/user.js

@@ -1,24 +1,24 @@
 // app/models/user.js
 // load the things we need
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
-var bcrypt   = require('bcrypt-nodejs');
+var bcrypt = require("bcrypt-nodejs");
 
 // define the schema for our user model
 var userSchema = mongoose.Schema({
-      username     : String,
+  username: String,
-      password     : String,
+  password: String
 });
 
 // methods ======================
 // generating a hash
 userSchema.methods.generateHash = function(password) {
-    return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);
+  return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);
 };
 
 // checking if password is valid
 userSchema.methods.validPassword = function(password) {
-    return bcrypt.compareSync(password, this.password);
+  return bcrypt.compareSync(password, this.password);
 };
 
 // create the model for users and expose it to our app
-module.exports = mongoose.model('User', userSchema);
+module.exports = mongoose.model("User", userSchema);

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

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

server/public/assets/css/animations.css

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

server/public/assets/css/embed.css

@@ -1,4 +1,4 @@
-.card-image{
+.card-image {
   height: 100px;
   width: 100px;
   background-position: center;
@@ -7,58 +7,63 @@
 }
 
 .side_away {
-  -webkit-transition: all .3s !important;
+  -webkit-transition: all 0.3s !important;
-  -moz-transition: all .3s !important;
+  -moz-transition: all 0.3s !important;
-  -o-transition: all .3s !important;
+  -o-transition: all 0.3s !important;
-  transition: all .3s !important;
+  transition: all 0.3s !important;
 }
 
-.prev.playbar, .skip.playbar {
+.prev.playbar,
-    float: left;
+.skip.playbar {
-    font-size: 24px;
+  float: left;
-    cursor: pointer;
+  font-size: 24px;
-    height: 32px;
+  cursor: pointer;
-    line-height: 31px;
+  height: 32px;
-    padding-top: 3px;
+  line-height: 31px;
+  padding-top: 3px;
 }
 
 .site_loader {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    margin: auto;
+  margin: auto;
-    bottom: 0;
+  bottom: 0;
-    right: 0;
+  right: 0;
-    background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    z-index: 9;
+  z-index: 9;
 }
 
-.prev, .skip {
+.prev,
+.skip {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-#playpause, .prev.playbar, .skip.playbar {
+#playpause,
-    padding: 0 2.5px;
+.prev.playbar,
+.skip.playbar {
+  padding: 0 2.5px;
 }
 .playbar-btn:hover {
-    background-color: rgba(0,0,0,.6);
+  background-color: rgba(0, 0, 0, 0.6);
-    color: hsla(0,0%,100%,.5);
+  color: hsla(0, 0%, 100%, 0.5);
 }
 
 .hide {
-    display: none!important;
+  display: none !important;
 }
 .playbar-btn {
-    cursor: pointer;
+  cursor: pointer;
-    transition: background-color .2s;
+  transition: background-color 0.2s;
 }
-#controls, .playbar {
+#controls,
-    color: #fff;
+.playbar {
+  color: #fff;
 }
 
 #player_loader_container {
@@ -84,7 +89,7 @@
   padding-left: 20px;
   display: flex;
   align-items: center;
-  background: rgba(0,0,0,.7);
+  background: rgba(0, 0, 0, 0.7);
 }
 
 .soundcloud_info_container a {
@@ -92,7 +97,7 @@
 }
 
 .card {
-  cursor:pointer;
+  cursor: pointer;
   background-color: rgba(255, 255, 255, 0.04) !important;
 }
 
@@ -115,34 +120,36 @@
 }
 
 .video_only {
-  width:100vw !important;
+  width: 100vw !important;
   height: 100vh !important;
 }
 
-#player{
+#player {
-  width:60vw;
+  width: 60vw;
   height: calc(100vh - 32px);
   padding-top: 51px;
 }
 
-#pageButtons{
+#pageButtons {
   text-align: center;
-  padding-top:15px;
+  padding-top: 15px;
   display: flex;
   justify-content: space-around;
 }
 
-.prev_page, .next_page{
+.prev_page,
+.next_page {
   cursor: pointer;
 }
 
-#wrapper{
+#wrapper {
-  height:calc(100% - 46px);
+  height: calc(100% - 46px);
 }
 
-.prev_page_hide, .next_page_hide{
+.prev_page_hide,
+.next_page_hide {
   visibility: visible !important;
-  color:gray;
+  color: gray;
 }
 
 .list-song {
@@ -150,26 +157,27 @@
 }
 
 #list-song-html {
-  display:none;
+  display: none;
 }
 
-#song-title{
+#song-title {
-  display:none;
+  display: none;
 }
 
-#zoffchannel{
+#zoffchannel {
-  display:none;
+  display: none;
 }
 
-.list-image, .list-suggested-image{
+.list-image,
+.list-suggested-image {
   width: 34%;
   height: 66px;
   float: left;
 }
 
 .list-image:after {
-  -webkit-transition: all .3s;
+  -webkit-transition: all 0.3s;
-  transition: all .3s;
+  transition: all 0.3s;
   font-family: "Material Icons";
   content: "thumb_up";
   speak: none;
@@ -186,7 +194,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.8);
   opacity: 0;
   /* transition: all .1s ease; */
   display: flex;
@@ -203,58 +211,64 @@
   text-transform: none;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
-  content: "\e625";/*"\e800";*/
+  content: "\e625"; /*"\e800";*/
-  color:white;
+  color: white;
-  font-size:65px;
+  font-size: 65px;
-  position:absolute;
+  position: absolute;
-  width:100%; height:100%;
+  width: 100%;
-  top:0; left:0;
+  height: 100%;
-  background:rgba(0,0,0,0.8);
+  top: 0;
-  opacity:0;
+  left: 0;
-  transition: all .1s ease;
+  background: rgba(0, 0, 0, 0.8);
+  opacity: 0;
+  transition: all 0.1s ease;
 }
 
-.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
+.vote-container:hover .list-image:after,
-  opacity:1;
+.add-suggested:hover .list-suggested-image:after {
+  opacity: 1;
 }
 
-
+.vote-span {
-
-.vote-span{
   opacity: 0.7;
   padding: 0 0 0 10px;
-  color:white !important;
+  color: white !important;
 }
 
-.list-song{
+.list-song {
   background-color: rgba(255, 255, 255, 0.04);
-  color:white;
+  color: white;
-  font:12px Arial,sans-serif;
+  font: 12px Arial, sans-serif;
-  -webkit-transition:height .3s;
+  -webkit-transition: height 0.3s;
-  -moz-transition:height .3s;
+  -moz-transition: height 0.3s;
-  -o-transition:height .3s;
+  -o-transition: height 0.3s;
-  transition:height .3s;
+  transition: height 0.3s;
-  height:66px;
+  height: 66px;
   width: 100%;
 }
-.list-song .card-content{padding:0;}
+.list-song .card-content {
-.list-title{
+  padding: 0;
-  font-size:13px !important;
+}
-  display:block;
+.list-title {
-  color:white;font-size:1em;
+  font-size: 13px !important;
-  text-align:left;
+  display: block;
+  color: white;
+  font-size: 1em;
+  text-align: left;
   padding: 0 10px 0 10px;
   line-height: 2.6rem;
 }
-.card-image{cursor:pointer}
+.card-image {
-.card{
+  cursor: pointer;
+}
+.card {
   margin: 2.5px 0 2.5px 0 !important;
 }
-.card:hover{
+.card:hover {
-  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12);
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 5px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-#playlist{
+#playlist {
   height: 100vh;
   width: 40vw;
   overflow: hidden;
@@ -263,7 +277,7 @@
   padding-top: 5px;
 }
 
-#zoffbutton{
+#zoffbutton {
   cursor: pointer;
   background-image: url(/assets/images/z.svg);
   width: 90px;
@@ -273,74 +287,75 @@
   background-repeat: no-repeat;
 }
 
-.progress{background-color:rgba(0,0,0,0) !important;}
+.progress {
-
+  background-color: rgba(0, 0, 0, 0) !important;
-.indeterminate {
-  background-color:white !important;
 }
 
-#controls
+.indeterminate {
-{
+  background-color: white !important;
+}
+
+#controls {
   background: inherit;
 
   position: relative;
-  opacity:0;
+  opacity: 0;
-  height:32px;
+  height: 32px;
-  width:60vw;
+  width: 60vw;
-  color:white;
+  color: white;
-  margin-top:-5px;
+  margin-top: -5px;
 }
 
-#playpause, #duration, #volume-button
+#playpause,
-{
+#duration,
-  float:left;
+#volume-button {
-  color:white;
+  float: left;
+  color: white;
 }
 
 .margin-playbar {
   margin-left: 10px;
 }
 
-
+#seekToDuration {
-#seekToDuration{
+  position: absolute;
-    position: absolute;
+  background: #2d2d2d;
-    background: #2d2d2d;
+  color: white;
-    color:white;
+  padding: 10px 8px;
-    padding: 10px 8px;
+  z-index: 2000;
-    z-index: 2000;
+  background-color: #2d2d2d;
-    background-color: #2d2d2d;
+  border-radius: 2px;
-    border-radius: 2px;
+  color: #fff;
-    color: #fff;
+  min-height: 36px;
-    min-height: 36px;
+  text-align: center;
-    text-align: center;
+  max-width: calc(100% - 4px);
-    max-width: calc(100% - 4px);
+  pointer-events: none;
-    pointer-events: none;
 }
 
-#playpause, #volume-button
+#playpause,
-{
+#volume-button {
   font-size: 23px;
 }
 
-#playpause:hover, #volume-button:hover, #fullscreen:hover
+#playpause:hover,
-{
+#volume-button:hover,
-  color:rgba(255,255,255,0.5);
+#fullscreen:hover {
+  color: rgba(255, 255, 255, 0.5);
 }
 
-#fullscreen
+#fullscreen {
-{
+  float: right;
-  float:right;
+  color: white;
-  color:white;
+  margin-right: 15px;
-  margin-right:15px;
 }
 
-#duration, #viewers
+#duration,
-{
+#viewers {
-  margin-top:5px;
+  margin-top: 5px;
-  font-family:"Roboto", sans-serif;
+  font-family: "Roboto", sans-serif;
-  font-weight:300;
+  font-weight: 300;
-  margin-left:15px;
+  margin-left: 15px;
-  margin-right:10px;
+  margin-right: 10px;
 }
 
 .channel-info-container {
@@ -349,7 +364,7 @@
   position: absolute;
   bottom: 50px;
   left: 0px;
-  background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
   padding-left: 5px;
   padding-right: 25px;
 }
@@ -358,21 +373,22 @@
   margin-left: -20px;
 }
 
-#viewers{
+#viewers {
   float: right;
   display: flex;
   align-items: center;
 }
 
-#play, #pause, #volume-button, #fullscreen
+#play,
-{
+#pause,
-  font-size:20px;
+#volume-button,
-  cursor:pointer;
+#fullscreen {
+  font-size: 20px;
+  cursor: pointer;
 }
 
-
 .ui-slider-vertical {
-  width: .8em;
+  width: 0.8em;
   height: 100px;
 }
 .ui-slider {
@@ -391,16 +407,16 @@
 .ui-slider .ui-slider-range {
   position: absolute;
   z-index: 1;
-  font-size: .7em;
+  font-size: 0.7em;
   display: block;
   border: 0;
   background-position: 0 0;
 }
 
 .ui-slider-vertical .ui-slider-handle {
-  left: -.3em;
+  left: -0.3em;
   margin-left: 0;
-  margin-bottom: -.6em;
+  margin-bottom: -0.6em;
 }
 .ui-slider .ui-slider-handle {
   position: absolute;
@@ -423,27 +439,27 @@
 .ui-slider .ui-slider-range {
   position: absolute;
   z-index: 1;
-  font-size: .7em;
+  font-size: 0.7em;
   display: block;
   border: 0;
   background-position: 0 0;
 }
 
 .ui-slider-horizontal .ui-slider-handle {
-  top: -.3em;
+  top: -0.3em;
-  margin-left: -.6em;
+  margin-left: -0.6em;
 }
 #volume {
   border-radius: 10px;
-  cursor:pointer;
+  cursor: pointer;
-  float:left;
+  float: left;
   position: relative;
   left: 10px;
   margin: 13px auto;
-  height:5px;
+  height: 5px;
   width: 75px;
   /*background-color:rgba(0, 0, 0, 0.5);*/
-  background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
+  background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
   border: none;
   outline: none;
   /*border-radius: 2px;*/
@@ -486,7 +502,8 @@
   display: none;
 }
 #volume .volume-handle.ui-state-active {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01),
+    0 0 0 7px rgba(255, 255, 255, 0.3);
   position: absolute;
   width: 14px;
   height: 14px;
@@ -494,10 +511,10 @@
   background: #dadada;
 }
 
-#toast-container{
+#toast-container {
-  left:2%;
+  left: 2%;
-  cursor:pointer;
+  cursor: pointer;
-  width:70vw;
+  width: 70vw;
   display: flex;
   flex-direction: column;
   align-items: baseline;
@@ -509,29 +526,25 @@
   cursor: pointer;
 }
 
-.play
+.play {
-{
   background-size: auto;
   width: 55px;
   height: 27px;
 }
 
-.pause
+.pause {
-{
   background-size: auto;
   width: 55px;
   height: 27px;
 }
 
-.hide
+.hide {
-{
+  display: none !important;
-  display:none !important;
 }
 
-#bar
+#bar {
-{
+  height: 100%;
-  height:100%;
+  background-color: rgba(0, 0, 0, 0.5);
-  background-color:rgba(0,0,0,0.5);
 }
 
 html {
@@ -542,22 +555,24 @@ html {
   background: inherit;
 }
 
-#pageButtons, #pageButtons a{
+#pageButtons,
-  color:white !important;
+#pageButtons a {
+  color: white !important;
   width: 100%;
   justify-content: space-evenly;
   align-items: center;
 }
 
-#pageButtons a, #pageButtons span {
+#pageButtons a,
+#pageButtons span {
   padding-left: 1px;
   padding-right: 1px;
 }
 
-#pageNumber{
+#pageNumber {
   cursor: default;
   color: white;
-  padding:0;
+  padding: 0;
   display: inline-flex;
   align-items: center;
   height: 36px;
@@ -565,38 +580,50 @@ html {
   width: 100%;
 }
 
-.prev_page, .next_page, .last_page, .first_page{
+.prev_page,
+.next_page,
+.last_page,
+.first_page {
   cursor: pointer;
 }
 
-
+.prev_page_hide,
-.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{
+.next_page_hide,
+.last_page_hide,
+.first_page_hide {
   visibility: visible !important;
-  color:gray;
+  color: gray;
-  cursor:default;
+  cursor: default;
   height: 32px;
   line-height: 36px;
   width: 100%;
   justify-content: center;
 }
 
-.prev_page_hide, .prev_page, .first_page, .first_page_hide{
+.prev_page_hide,
-  padding:0 1px;
+.prev_page,
+.first_page,
+.first_page_hide {
+  padding: 0 1px;
   height: 32px;
   line-height: 36px;
-
 }
 
-.next_page_hide, .next_page, .last_page, .last_page_hide{
+.next_page_hide,
-  padding:0 0px;
+.next_page,
+.last_page,
+.last_page_hide {
+  padding: 0 0px;
   display: flex;
 }
 
-.first_page, .first_page_hide {
+.first_page,
+.first_page_hide {
   padding: 0 0 0 10px;
 }
 
-.last_page, .last_page_hide {
+.last_page,
+.last_page_hide {
   padding: 0 10px 0 0;
 }
 
@@ -614,7 +641,7 @@ body {
   position: absolute;
   bottom: 0px;
   left: 0px;
-  background: rgba(0,0,0,.7);
+  background: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 0 5px;
 }
@@ -623,7 +650,7 @@ body {
   position: absolute;
   z-index: 9;
   color: white;
-  background: rgba(0,0,0,.5);
+  background: rgba(0, 0, 0, 0.5);
   font-size: 1.5rem;
   padding: 10px;
   width: 60vw;
@@ -634,7 +661,7 @@ body {
 display: none !important;
 }
 */
-#wrapper{
+#wrapper {
   background: inherit;
   /*height: 94%;*/
 }
@@ -645,44 +672,45 @@ display: none !important;
   }
 }
 
-@media only screen and (max-width: 736px) and (max-width:500px), only screen and (max-device-width: 736px)  and (orientation: landscape){
+@media only screen and (max-width: 736px) and (max-width: 500px),
-    #player-container{
+  only screen and (max-device-width: 736px) and (orientation: landscape) {
-        /*display: none;*/
+  #player-container {
-        position: absolute;
+    /*display: none;*/
-        width: 100vw;
+    position: absolute;
-        height: 200px;
+    width: 100vw;
-        bottom: 0px;
+    height: 200px;
-    }
+    bottom: 0px;
-    #controls {
+  }
-      width: 100vw;
+  #controls {
-      margin-top: 0px;
+    width: 100vw;
-    }
+    margin-top: 0px;
+  }
 
-    #player {
+  #player {
-        width: 100vw;
+    width: 100vw;
-        height: 170px;
+    height: 170px;
-        display: block;
+    display: block;
-    }
+  }
 
-    #player_overlay {
+  #player_overlay {
-      position: relative;
+    position: relative;
-      width: 100vw;
+    width: 100vw;
-      margin-bottom: 0px;
+    margin-bottom: 0px;
-    }
+  }
 
-    #playlist {
+  #playlist {
-        width: 100vw;
+    width: 100vw;
-        height: calc(100vh - 208px);
+    height: calc(100vh - 208px);
-    }
+  }
 
-    #toast-container {
+  #toast-container {
-      min-width: 96%;
+    min-width: 96%;
-      bottom: auto;
+    bottom: auto;
-    }
+  }
 
-    #song-title {
+  #song-title {
-      width: 100vw;
+    width: 100vw;
-      font-size: 1.2rem;
+    font-size: 1.2rem;
-      top: calc(100vh - 200px);
+    top: calc(100vh - 200px);
-    }
+  }
 }

server/public/assets/css/globals.css

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

server/public/assets/css/mobile.css

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

server/public/assets/html/callback.html

@@ -1,177 +1,175 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
-  <title>Zoff OAuth Callback</title>
+    <title>Zoff OAuth Callback</title>
-  <script src="https://connect.soundcloud.com/sdk/sdk-3.3.0.js"></script>
+    <script src="https://connect.soundcloud.com/sdk/sdk-3.3.0.js"></script>
-  <script type="text/javascript" src="/assets/dist/callback.min.js"></script>
+    <script type="text/javascript" src="/assets/dist/callback.min.js"></script>
-  <meta charset="UTF-8"/>
+    <meta charset="UTF-8" />
-  <style>
+    <style>
-  @-webkit-keyframes uil-ring-anim {
+      @-webkit-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @-webkit-keyframes uil-ring-anim {
+      @-webkit-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @-moz-keyframes uil-ring-anim {
+      @-moz-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @-ms-keyframes uil-ring-anim {
+      @-ms-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @-moz-keyframes uil-ring-anim {
+      @-moz-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @-webkit-keyframes uil-ring-anim {
+      @-webkit-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @-o-keyframes uil-ring-anim {
+      @-o-keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  @keyframes uil-ring-anim {
+      @keyframes uil-ring-anim {
-    0% {
+        0% {
-      -ms-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
+          -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
-      transform: rotate(0deg);
+          transform: rotate(0deg);
-    }
+        }
-    100% {
+        100% {
-      -ms-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
-      transform: rotate(360deg);
+          transform: rotate(360deg);
-    }
+        }
-  }
+      }
-  .uil-ring-css {
+      .uil-ring-css {
-    background: none;
+        background: none;
-    width: 190px;
+        width: 190px;
-    height: 190px;
+        height: 190px;
-    transform: scale(1);
+        transform: scale(1);
-    position: absolute;
+        position: absolute;
-    left: 0;
+        left: 0;
-    right: 0;
+        right: 0;
-    margin: auto;
+        margin: auto;
-    top: 0;
+        top: 0;
-    bottom: 0;
+        bottom: 0;
-  }
+      }
-  .uil-ring-css > div {
+      .uil-ring-css > div {
-    position: absolute;
+        position: absolute;
-    width: 150px;
+        width: 150px;
-    height: 150px;
+        height: 150px;
-    border: 20px solid black;
+        border: 20px solid black;
-    border-radius: 50%;
+        border-radius: 50%;
-    border-bottom-color: transparent;
+        border-bottom-color: transparent;
-    border-left-color: transparent;
+        border-left-color: transparent;
-    transform: rotate(-45deg);'
+        transform: rotate(-45deg);'
-    -ms-animation: uil-ring-anim 1s linear infinite;
+        -ms-animation: uil-ring-anim 1s linear infinite;
-    -moz-animation: uil-ring-anim 1s linear infinite;
+        -moz-animation: uil-ring-anim 1s linear infinite;
-    -webkit-animation: uil-ring-anim 1s linear infinite;
+        -webkit-animation: uil-ring-anim 1s linear infinite;
-    -o-animation: uil-ring-anim 1s linear infinite;
+        -o-animation: uil-ring-anim 1s linear infinite;
-    animation: uil-ring-anim 1s linear infinite;
+        animation: uil-ring-anim 1s linear infinite;
-  }
+      }
-  h4 {
+      h4 {
-    text-align: center;
+        text-align: center;
-    font-family: sans-serif;
+        font-family: sans-serif;
-    font-size: 2rem;
+        font-size: 2rem;
-  }
+      }
-  </style>
+    </style>
-</head>
+  </head>
-<body>
+  <body>
-  <h4>Loading..</h4>
+    <h4>Loading..</h4>
-  <div class="uil-ring-css" >
+    <div class="uil-ring-css"><div></div></div>
-    <div></div>
+  </body>
-  </div>
-</body>
 </html>

server/public/assets/js/admin.js

@@ -1,291 +1,351 @@
 var Admin = {
+  beginning: true,
+  logged_in: false,
 
-    beginning:true,
+  update_strict_skip: function(value) {
-    logged_in: false,
+    var form = document.getElementById("adminSettingsForm");
+    form.strictSkipNumber = value;
+    Admin.submitAdmin(form, false);
+  },
 
-    update_strict_skip: function(value) {
+  pw: function(msg) {
-        var form = document.getElementById("adminSettingsForm");
+    Admin.logged_in = msg;
-        form.strictSkipNumber = value;
+    if (!msg) return;
-        Admin.submitAdmin(form, false);
+    w_p = false;
-    },
+    M.Modal.init(document.getElementById("channel_info"));
+    if (Admin.logged_in) {
+      Helper.removeClass(".info_change_li", "hide");
+      Helper.removeClass("#user_suggests", "hide");
+      Helper.removeClass("#user-suggest-html", "hide");
+      if (
+        Helper.html(".suggested-badge") != "0" &&
+        Helper.html(".suggested-badge") != ""
+      ) {
+        Helper.removeClass(".suggested-badge", "hide");
+      }
+      if (conf != undefined && conf.strictSkip) {
+        Helper.removeClass(".strict-skip-input", "hide");
+      }
+    } else {
+      Admin.hideUserSuggested();
+      Helper.addClass(".strict-skip-input", "hide");
+    }
+    Helper.removeClass(".delete-context-menu", "context-menu-disabled");
+    names = [
+      "vote",
+      "addsongs",
+      "longsongs",
+      "frontpage",
+      "allvideos",
+      "removeplay",
+      "skip",
+      "shuffle",
+      "userpass",
+      "toggleChat",
+      "strictSkip"
+    ];
+    //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass);
 
-    pw: function(msg) {
+    for (var i = 0; i < names.length; i++) {
-        Admin.logged_in = msg;
+      document.getElementsByName(names[i])[0].removeAttribute("disabled");
-        if(!msg) return;
-        w_p = false;
-        M.Modal.init(document.getElementById("channel_info"));
-        if(Admin.logged_in) {
-            Helper.removeClass(".info_change_li", "hide");
-            Helper.removeClass("#user_suggests", "hide");
-            Helper.removeClass("#user-suggest-html", "hide");
-            if(Helper.html(".suggested-badge") != "0" && Helper.html(".suggested-badge") != "") {
-                Helper.removeClass(".suggested-badge", "hide");
-            }
-            if(conf != undefined && conf.strictSkip) {
-                Helper.removeClass(".strict-skip-input", "hide");
-            }
-        } else {
-            Admin.hideUserSuggested();
-            Helper.addClass(".strict-skip-input", "hide");
-        }
-        Helper.removeClass(".delete-context-menu", "context-menu-disabled");
-        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
-        "removeplay", "skip", "shuffle", "userpass", "toggleChat", "strictSkip"];
-        //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass);
-
-        for (var i = 0; i < names.length; i++) {
-            document.getElementsByName(names[i])[0].removeAttribute("disabled");
-        }
-
-        Helper.removeClass(".card-action", "hide");
-        Helper.addClass("#admin-lock", "clickable");
-        document.getElementById("admin-lock").innerHTML = "lock_open";
-        if(!Helper.mobilecheck()){
-            Helper.tooltip('#admin-lock', {
-                delay: 5,
-                position: "left",
-                html: "Logout"
-            });
-        }
-        document.getElementById("password").value = "";
-        document.getElementById("password").setAttribute("placeholder", "Change admin password");
-        Helper.removeClass(".user-password-li", "hide");
-        Helper.removeClass(".chat-toggle-li", "hide");
-        Helper.removeClass(".delete-all", "hide");
-        if(document.getElementsByClassName("password_protected")[0].checked) {
-            Helper.removeClass(".change_user_pass", "hide");
-        }
-
-        if(Helper.html("#admin-lock") != "lock_open"){
-            Helper.addClass("#admin-lock", "clickable");
-            document.getElementById("admin-lock").innerHTML = "lock_open";
-            if(!Helper.mobilecheck()){
-                Helper.tooltip('#admin-lock', {
-                    delay: 5,
-                    position: "left",
-                    html: "Logout"
-                });
-            }
-        }
-    },
-
-    hideUserSuggested: function() {
-        Helper.addClass("#user_suggests", "hide")
-        Helper.addClass("#user-suggest-html", "hide");
-        Helper.addClass(".suggested-badge", "hide");
-    },
-
-    conf: function(msg) {
-        if(msg[0].adminpass == ""){
-            ////Crypt.remove_pass(chan.toLowerCase());
-        }
-        Admin.set_conf(msg[0]);
-        if(msg[0].adminpass !== "" && Admin.beginning){
-            //emit("password", {password: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase())), channel: chan.toLowerCase()});
-            Admin.beginning = false;
-        }
-    },
-
-    pass_save: function() {
-        if(!w_p) {
-            //emit('password', {password: Crypt.crypt_pass(CryptoJS.SHA256(document.getElementById("password").value).toString()), channel: chan.toLowerCase(), oldpass: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase()))});
-            emit('password', {password: Crypt.crypt_pass(document.getElementById("password").value), channel: chan.toLowerCase()});
-        } else {
-            //emit('password', {password: Crypt.crypt_pass(CryptoJS.SHA256(document.getElementById("password").value).toString()), channel: chan.toLowerCase()});
-            emit('password', {password: Crypt.crypt_pass(document.getElementById("password").value), channel: chan.toLowerCase()});
-        }
-    },
-
-    log_out: function() {
-        before_toast();
-        /*if(Crypt.get_pass(chan.toLowerCase())) {*/
-            //Crypt.remove_pass(chan.toLowerCase());
-        if(Admin.logged_in) {
-            socket.emit("logout");
-            M.toast({html: "Logged out", displayLength: 4000});
-            Admin.display_logged_out();
-        } else {
-            M.toast({html: "Not logged in", displayLength: 4000});
-        }
-    },
-
-    display_logged_out: function() {
-        Admin.logged_in = false;
-        w_p       = true;
-        adminpass = "";
-        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
-        "removeplay", "skip", "shuffle", "toggleChat", "strictSkip"];
-        document.getElementById("password").value = "";
-        Helper.addClass(".info_change_li", "hide");
-        for (i = 0; i < names.length; i++) {
-            document.getElementsByName(names[i])[0].setAttribute("disabled", true);
-        }
-
-        if(Helper.html("#admin-lock") != "lock") {
-            if(!Helper.mobilecheck()) {
-                Helper.tooltip('#admin-lock', "destroy");
-            }
-            Helper.removeClass("#admin-lock", "clickable");
-            document.getElementById("admin-lock").innerHTML = "lock";
-        }
-
-        Helper.addClass(".strict-skip-input", "hide");
-        Helper.addClass(".user-password-li", "hide");
-        Helper.addClass(".chat-toggle-li", "hide");
-        Helper.addClass(".delete-all", "hide");
-
-        if(document.getElementsByClassName("password_protected")[0].checked) {
-            Helper.removeClass(".change_user_pass", "hide");
-        }
-
-        Helper.addClass(".change_user_pass", "hide");
-        Admin.hideUserSuggested();
-
-        Helper.removeClass("#admin-lock", "clickable");
-        document.getElementById("password").setAttribute("placeholder", "Enter admin password");
-        Helper.addClass(".delete-context-menu", "context-menu-disabled");
-    },
-
-    save: function(userpass) {
-        Admin.submitAdmin(document.getElementById("adminSettingsForm").elements, userpass);
-    },
-
-    set_conf: function(conf_array) {
-        conf = conf_array;
-        music     = conf_array.allvideos;
-        longsongs = conf_array.longsongs;
-        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
-        "removeplay", "skip", "shuffle", "userpass", "toggleChat", "strictSkip"];
-        if(!conf.hasOwnProperty("toggleChat")) conf.toggleChat = true;
-        toggleChat = conf.toggleChat;
-        hasadmin = conf_array.adminpass != "";
-        var show_disabled = true;
-        if(hasadmin && Admin.logged_in || !hasadmin) {
-            show_disabled = false;
-        }
-
-        for (var i = 0; i < names.length; i++) {
-            document.getElementsByName(names[i])[0].checked = (conf_array[names[i]] === true);
-            if(show_disabled) {
-                document.getElementsByName(names[i])[0].setAttribute("disabled", show_disabled);
-            } else {
-                document.getElementsByName(names[i])[0].removeAttribute("disabled");
-            }
-        }
-        document.getElementById("strict-input-number").value = conf.strictSkipNumber;
-        if((hasadmin) && !Admin.logged_in) {
-            if(Helper.html("#admin-lock") != "lock") Admin.display_logged_out();
-        } else if(!hasadmin) {
-            document.getElementById("password").setAttribute("placeholder", "Create admin password");
-        } else {
-            if(document.getElementsByClassName("password_protected")[0].checked) {
-                Helper.removeClass(".change_user_pass", "hide");
-            }
-        }
-        if(Admin.logged_in) {
-            if(conf != undefined && conf.strictSkip) {
-                Helper.removeClass(".strict-skip-input", "hide");
-            }
-        }
-        if(conf != undefined && !conf.strictSkip) {
-            Helper.addClass(".strict-skip-input", "hide");
-        }
-        if(!document.getElementsByClassName("password_protected")[0].checked) {
-            Helper.addClass(".change_user_pass", "hide");
-            //Crypt.remove_userpass(chan.toLowerCase());
-        }
-        var updated = false;
-
-        if(conf_array.thumbnail != undefined && conf_array.thumbnail != "") {
-            document.getElementById("thumbnail_image").innerHTML = "<img id='thumbnail_image_channel' src='" + conf_array.thumbnail + "' alt='thumbnail' />";
-            document.getElementById("thumbnail_input").value = conf_array.thumbnail;
-            updated = true;
-        }
-
-        if(conf_array.description != undefined && conf_array.description != "") {
-            document.getElementById("description_area").innerHTML = conf_array.description;
-            document.getElementById("description_input").value = conf_array.description;
-            updated = true;
-        }
-
-        if(conf_array.rules != undefined && conf_array.rules != "") {
-            var existingRules = document.querySelector(".rules-container");
-            if(existingRules) existingRules.remove();
-            var rules = conf_array.rules.split("\n");
-            var elementToAdd = "<li class='rules-container'><div class='row'><div class='col s10 offset-s1'><h4 class='center-align'>Rules</h4>";
-            for(var i = 0; i < rules.length; i++) {
-                elementToAdd += "<p class='initial-line-height'>" + rules[i] + "</p>";
-            }
-            elementToAdd += "</div></div>";
-            document.querySelector(".channel_info_container").insertAdjacentHTML("afterend", elementToAdd);
-            document.getElementById("rules_input").value = conf_array.rules;
-            updated = true;
-        }
-        if(updated) M.updateTextFields();
-    },
-
-    submitAdmin: function(form, userpass_changed) {
-        voting     = form.vote.checked;
-        addsongs   = form.addsongs.checked;
-        longsongs  = form.longsongs.checked;
-        frontpage  = form.frontpage.checked;
-        allvideos  = form.allvideos.checked;
-        removeplay = form.removeplay.checked;
-        skipping   = form.skip.checked;
-        shuffling  = form.shuffle.checked;
-        toggleChat = form.toggleChat.checked;
-        strictSkip = form.strictSkip.checked;
-
-        if(form.strictSkipNumber) {
-            strictSkipNumber = form.strictSkipNumber;
-        } else {
-            strictSkipNumber = conf.strictSkipNumber;
-        }
-
-        var pass_send = userpass_changed && !form.userpass.checked ? "" : userpass;
-        configs = {
-            channel: chan.toLowerCase(),
-            voting: voting,
-            addsongs: addsongs,
-            longsongs: longsongs,
-            frontpage: frontpage,
-            allvideos: allvideos,
-            removeplay: removeplay,
-            adminpass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass),
-            skipping: skipping,
-            shuffling: shuffling,
-            toggleChat: toggleChat,
-            strictSkip: strictSkip,
-            userpass: Crypt.crypt_pass(pass_send),
-            userpass_changed: userpass_changed,
-            strictSkipNumber: strictSkipNumber
-        };
-
-        emit("conf", configs);
-    },
-
-    hide_settings: function() {
-        var sidenavElem = document.getElementsByClassName("sidenav")[0];
-        M.Sidenav.getInstance(sidenavElem).close();
-    },
-
-    shuffle: function() {
-        if(!offline) {
-            //var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true);
-            //if(u == undefined) u = "";
-            emit('shuffle', {channel: chan.toLowerCase()});
-        } else {
-            for(var x = 0; x < full_playlist.length; x++){
-                var num = Math.floor(Math.random()*1000000);
-                full_playlist[x].added = num;
-            }
-            List.sortList();
-            List.populate_list(full_playlist);
-        }
-    },
-
-    get_admin:function() {
-        return [w_p, hasadmin];
     }
 
+    Helper.removeClass(".card-action", "hide");
+    Helper.addClass("#admin-lock", "clickable");
+    document.getElementById("admin-lock").innerHTML = "lock_open";
+    if (!Helper.mobilecheck()) {
+      Helper.tooltip("#admin-lock", {
+        delay: 5,
+        position: "left",
+        html: "Logout"
+      });
+    }
+    document.getElementById("password").value = "";
+    document
+      .getElementById("password")
+      .setAttribute("placeholder", "Change admin password");
+    Helper.removeClass(".user-password-li", "hide");
+    Helper.removeClass(".chat-toggle-li", "hide");
+    Helper.removeClass(".delete-all", "hide");
+    if (document.getElementsByClassName("password_protected")[0].checked) {
+      Helper.removeClass(".change_user_pass", "hide");
+    }
+
+    if (Helper.html("#admin-lock") != "lock_open") {
+      Helper.addClass("#admin-lock", "clickable");
+      document.getElementById("admin-lock").innerHTML = "lock_open";
+      if (!Helper.mobilecheck()) {
+        Helper.tooltip("#admin-lock", {
+          delay: 5,
+          position: "left",
+          html: "Logout"
+        });
+      }
+    }
+  },
+
+  hideUserSuggested: function() {
+    Helper.addClass("#user_suggests", "hide");
+    Helper.addClass("#user-suggest-html", "hide");
+    Helper.addClass(".suggested-badge", "hide");
+  },
+
+  conf: function(msg) {
+    if (msg[0].adminpass == "") {
+      ////Crypt.remove_pass(chan.toLowerCase());
+    }
+    Admin.set_conf(msg[0]);
+    if (msg[0].adminpass !== "" && Admin.beginning) {
+      //emit("password", {password: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase())), channel: chan.toLowerCase()});
+      Admin.beginning = false;
+    }
+  },
+
+  pass_save: function() {
+    if (!w_p) {
+      //emit('password', {password: Crypt.crypt_pass(CryptoJS.SHA256(document.getElementById("password").value).toString()), channel: chan.toLowerCase(), oldpass: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase()))});
+      emit("password", {
+        password: Crypt.crypt_pass(document.getElementById("password").value),
+        channel: chan.toLowerCase()
+      });
+    } else {
+      //emit('password', {password: Crypt.crypt_pass(CryptoJS.SHA256(document.getElementById("password").value).toString()), channel: chan.toLowerCase()});
+      emit("password", {
+        password: Crypt.crypt_pass(document.getElementById("password").value),
+        channel: chan.toLowerCase()
+      });
+    }
+  },
+
+  log_out: function() {
+    before_toast();
+    /*if(Crypt.get_pass(chan.toLowerCase())) {*/
+    //Crypt.remove_pass(chan.toLowerCase());
+    if (Admin.logged_in) {
+      socket.emit("logout");
+      M.toast({ html: "Logged out", displayLength: 4000 });
+      Admin.display_logged_out();
+    } else {
+      M.toast({ html: "Not logged in", displayLength: 4000 });
+    }
+  },
+
+  display_logged_out: function() {
+    Admin.logged_in = false;
+    w_p = true;
+    adminpass = "";
+    names = [
+      "vote",
+      "addsongs",
+      "longsongs",
+      "frontpage",
+      "allvideos",
+      "removeplay",
+      "skip",
+      "shuffle",
+      "toggleChat",
+      "strictSkip"
+    ];
+    document.getElementById("password").value = "";
+    Helper.addClass(".info_change_li", "hide");
+    for (i = 0; i < names.length; i++) {
+      document.getElementsByName(names[i])[0].setAttribute("disabled", true);
+    }
+
+    if (Helper.html("#admin-lock") != "lock") {
+      if (!Helper.mobilecheck()) {
+        Helper.tooltip("#admin-lock", "destroy");
+      }
+      Helper.removeClass("#admin-lock", "clickable");
+      document.getElementById("admin-lock").innerHTML = "lock";
+    }
+
+    Helper.addClass(".strict-skip-input", "hide");
+    Helper.addClass(".user-password-li", "hide");
+    Helper.addClass(".chat-toggle-li", "hide");
+    Helper.addClass(".delete-all", "hide");
+
+    if (document.getElementsByClassName("password_protected")[0].checked) {
+      Helper.removeClass(".change_user_pass", "hide");
+    }
+
+    Helper.addClass(".change_user_pass", "hide");
+    Admin.hideUserSuggested();
+
+    Helper.removeClass("#admin-lock", "clickable");
+    document
+      .getElementById("password")
+      .setAttribute("placeholder", "Enter admin password");
+    Helper.addClass(".delete-context-menu", "context-menu-disabled");
+  },
+
+  save: function(userpass) {
+    Admin.submitAdmin(
+      document.getElementById("adminSettingsForm").elements,
+      userpass
+    );
+  },
+
+  set_conf: function(conf_array) {
+    conf = conf_array;
+    music = conf_array.allvideos;
+    longsongs = conf_array.longsongs;
+    names = [
+      "vote",
+      "addsongs",
+      "longsongs",
+      "frontpage",
+      "allvideos",
+      "removeplay",
+      "skip",
+      "shuffle",
+      "userpass",
+      "toggleChat",
+      "strictSkip"
+    ];
+    if (!conf.hasOwnProperty("toggleChat")) conf.toggleChat = true;
+    toggleChat = conf.toggleChat;
+    hasadmin = conf_array.adminpass != "";
+    var show_disabled = true;
+    if ((hasadmin && Admin.logged_in) || !hasadmin) {
+      show_disabled = false;
+    }
+
+    for (var i = 0; i < names.length; i++) {
+      document.getElementsByName(names[i])[0].checked =
+        conf_array[names[i]] === true;
+      if (show_disabled) {
+        document
+          .getElementsByName(names[i])[0]
+          .setAttribute("disabled", show_disabled);
+      } else {
+        document.getElementsByName(names[i])[0].removeAttribute("disabled");
+      }
+    }
+    document.getElementById("strict-input-number").value =
+      conf.strictSkipNumber;
+    if (hasadmin && !Admin.logged_in) {
+      if (Helper.html("#admin-lock") != "lock") Admin.display_logged_out();
+    } else if (!hasadmin) {
+      document
+        .getElementById("password")
+        .setAttribute("placeholder", "Create admin password");
+    } else {
+      if (document.getElementsByClassName("password_protected")[0].checked) {
+        Helper.removeClass(".change_user_pass", "hide");
+      }
+    }
+    if (Admin.logged_in) {
+      if (conf != undefined && conf.strictSkip) {
+        Helper.removeClass(".strict-skip-input", "hide");
+      }
+    }
+    if (conf != undefined && !conf.strictSkip) {
+      Helper.addClass(".strict-skip-input", "hide");
+    }
+    if (!document.getElementsByClassName("password_protected")[0].checked) {
+      Helper.addClass(".change_user_pass", "hide");
+      //Crypt.remove_userpass(chan.toLowerCase());
+    }
+    var updated = false;
+
+    if (conf_array.thumbnail != undefined && conf_array.thumbnail != "") {
+      document.getElementById("thumbnail_image").innerHTML =
+        "<img id='thumbnail_image_channel' src='" +
+        conf_array.thumbnail +
+        "' alt='thumbnail' />";
+      document.getElementById("thumbnail_input").value = conf_array.thumbnail;
+      updated = true;
+    }
+
+    if (conf_array.description != undefined && conf_array.description != "") {
+      document.getElementById("description_area").innerHTML =
+        conf_array.description;
+      document.getElementById("description_input").value =
+        conf_array.description;
+      updated = true;
+    }
+
+    if (conf_array.rules != undefined && conf_array.rules != "") {
+      var existingRules = document.querySelector(".rules-container");
+      if (existingRules) existingRules.remove();
+      var rules = conf_array.rules.split("\n");
+      var elementToAdd =
+        "<li class='rules-container'><div class='row'><div class='col s10 offset-s1'><h4 class='center-align'>Rules</h4>";
+      for (var i = 0; i < rules.length; i++) {
+        elementToAdd += "<p class='initial-line-height'>" + rules[i] + "</p>";
+      }
+      elementToAdd += "</div></div>";
+      document
+        .querySelector(".channel_info_container")
+        .insertAdjacentHTML("afterend", elementToAdd);
+      document.getElementById("rules_input").value = conf_array.rules;
+      updated = true;
+    }
+    if (updated) M.updateTextFields();
+  },
+
+  submitAdmin: function(form, userpass_changed) {
+    voting = form.vote.checked;
+    addsongs = form.addsongs.checked;
+    longsongs = form.longsongs.checked;
+    frontpage = form.frontpage.checked;
+    allvideos = form.allvideos.checked;
+    removeplay = form.removeplay.checked;
+    skipping = form.skip.checked;
+    shuffling = form.shuffle.checked;
+    toggleChat = form.toggleChat.checked;
+    strictSkip = form.strictSkip.checked;
+
+    if (form.strictSkipNumber) {
+      strictSkipNumber = form.strictSkipNumber;
+    } else {
+      strictSkipNumber = conf.strictSkipNumber;
+    }
+
+    var pass_send = userpass_changed && !form.userpass.checked ? "" : userpass;
+    configs = {
+      channel: chan.toLowerCase(),
+      voting: voting,
+      addsongs: addsongs,
+      longsongs: longsongs,
+      frontpage: frontpage,
+      allvideos: allvideos,
+      removeplay: removeplay,
+      adminpass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass),
+      skipping: skipping,
+      shuffling: shuffling,
+      toggleChat: toggleChat,
+      strictSkip: strictSkip,
+      userpass: Crypt.crypt_pass(pass_send),
+      userpass_changed: userpass_changed,
+      strictSkipNumber: strictSkipNumber
+    };
+
+    emit("conf", configs);
+  },
+
+  hide_settings: function() {
+    var sidenavElem = document.getElementsByClassName("sidenav")[0];
+    M.Sidenav.getInstance(sidenavElem).close();
+  },
+
+  shuffle: function() {
+    if (!offline) {
+      //var u = Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()), true);
+      //if(u == undefined) u = "";
+      emit("shuffle", { channel: chan.toLowerCase() });
+    } else {
+      for (var x = 0; x < full_playlist.length; x++) {
+        var num = Math.floor(Math.random() * 1000000);
+        full_playlist[x].added = num;
+      }
+      List.sortList();
+      List.populate_list(full_playlist);
+    }
+  },
+
+  get_admin: function() {
+    return [w_p, hasadmin];
+  }
 };

server/public/assets/js/callback.js

@@ -1,27 +1,49 @@
 window.addEventListener("load", function() {
-    var query = getQueryHash(window.location.hash);
+  var query = getQueryHash(window.location.hash);
-    var redirect  = window.location.protocol + "//" + window.location.hostname + "/api/oauth";
+  var redirect =
-    var client_id;
+    window.location.protocol + "//" + window.location.hostname + "/api/oauth";
-    var response;
+  var client_id;
-    var scope;
+  var response;
+  var scope;
 
-    if(query.spotify) {
+  if (query.spotify) {
-        client_id = "b934ecdd173648f5bcd38738af529d58";
+    client_id = "b934ecdd173648f5bcd38738af529d58";
-        response  = "token";
+    response = "token";
-        scope     = "playlist-read-private ugc-image-upload playlist-read-collaborative user-read-private playlist-modify-public playlist-modify-private";
+    scope =
-        state     = query.nonce;
+      "playlist-read-private ugc-image-upload playlist-read-collaborative user-read-private playlist-modify-public playlist-modify-private";
-        window.location.href = "https://accounts.spotify.com/authorize?client_id=" + client_id + "&scope=" + scope + "&show_dialog=false&response_type=" + response + "&redirect_uri=" + redirect + "&state=" + state;
+    state = query.nonce;
+    window.location.href =
+      "https://accounts.spotify.com/authorize?client_id=" +
+      client_id +
+      "&scope=" +
+      scope +
+      "&show_dialog=false&response_type=" +
+      response +
+      "&redirect_uri=" +
+      redirect +
+      "&state=" +
+      state;
+  } else if (query.youtube) {
+    client_id =
+      "944988770273-butsmlr1aotlsskk8lmgvh0etqqekigf.apps.googleusercontent.com";
+    response = "token";
+    scope = "https://www.googleapis.com/auth/youtube";
+    state = query.nonce;
 
-    } else if (query.youtube) {
+    //window.opener.callback(query);
-        client_id = "944988770273-butsmlr1aotlsskk8lmgvh0etqqekigf.apps.googleusercontent.com";
+    window.location.href =
-        response  = "token";
+      "https://accounts.google.com/o/oauth2/v2/auth?client_id=" +
-        scope     = "https://www.googleapis.com/auth/youtube";
+      client_id +
-        state     = query.nonce;
+      "&response_type=" +
-
+      response +
-        //window.opener.callback(query);
+      "&state=" +
-        window.location.href = "https://accounts.google.com/o/oauth2/v2/auth?client_id=" + client_id + "&response_type=" + response + "&state=" + state + "&redirect_uri=" + redirect + "&scope=" + scope;
+      state +
-    } else if(query.soundcloud) {
+      "&redirect_uri=" +
-        /*
+      redirect +
+      "&scope=" +
+      scope;
+  } else if (query.soundcloud) {
+    /*
         SC.initialize({
           client_id: api_key.soundcloud,
           redirect_uri: 'https://zoff.me/api/oauth'
@@ -38,53 +60,61 @@ window.addEventListener("load", function() {
           console.log(e);
       });*/
 
-      var redirect_uri = encodeURIComponent("https://zoff.me/api/oauth");
+    var redirect_uri = encodeURIComponent("https://zoff.me/api/oauth");
-      var response_type = "code";
+    var response_type = "code";
-      var scope = "non-expiring";
+    var scope = "non-expiring";
-      var state = query.nonce;
+    var state = query.nonce;
-      var url = "https://soundcloud.com/connect?client_id=" + api_key.soundcloud + "&redirect_uri=" + redirect_uri + "&state=" + state + "&display=page&response_type=code&scope=" + scope;
+    var url =
-      //console.log(url);
+      "https://soundcloud.com/connect?client_id=" +
-      window.location.href = url;
+      api_key.soundcloud +
+      "&redirect_uri=" +
+      redirect_uri +
+      "&state=" +
+      state +
+      "&display=page&response_type=code&scope=" +
+      scope;
+    //console.log(url);
+    window.location.href = url;
+  } else {
+    var query_parameters;
+    if (window.location.search.length > 0) {
+      query_parameters = getQueryHash(window.location.search);
     } else {
-        var query_parameters;
+      query_parameters = getQueryHash(window.location.hash);
-        if(window.location.search.length > 0) {
-            query_parameters = getQueryHash(window.location.search);
-        } else {
-            query_parameters = getQueryHash(window.location.hash);
-        }
-        try {
-            window.opener.callback(query_parameters);
-        } catch(e) {
-            window.setTimeout(window.opener.SC_player.connectCallback, 1);
-        }
     }
+    try {
+      window.opener.callback(query_parameters);
+    } catch (e) {
+      window.setTimeout(window.opener.SC_player.connectCallback, 1);
+    }
+  }
 });
 
 function getQueryHash(url) {
-    if(window.location.search.length > 0) {
+  if (window.location.search.length > 0) {
-        if(url.substring(url.length - 1) == "#") {
+    if (url.substring(url.length - 1) == "#") {
-            url = url.substring(0, url.length - 1);
+      url = url.substring(0, url.length - 1);
-        }
-        var temp_arr = url.substring(1).split("&");
-        var done_obj = {};
-        var splitted;
-        for(var i in temp_arr) {
-            splitted = temp_arr[i].split("=");
-            if(splitted.length == 2) {
-                done_obj[splitted[0]] = splitted[1];
-            }
-        }
-        return done_obj;
-    } else {
-        var temp_arr = url.substring(1).split("&");
-        var done_obj = {};
-        var splitted;
-        for(var i in temp_arr) {
-            splitted = temp_arr[i].split("=");
-            if(splitted.length == 2) {
-                done_obj[splitted[0]] = splitted[1];
-            }
-        }
-        return done_obj;
     }
+    var temp_arr = url.substring(1).split("&");
+    var done_obj = {};
+    var splitted;
+    for (var i in temp_arr) {
+      splitted = temp_arr[i].split("=");
+      if (splitted.length == 2) {
+        done_obj[splitted[0]] = splitted[1];
+      }
+    }
+    return done_obj;
+  } else {
+    var temp_arr = url.substring(1).split("&");
+    var done_obj = {};
+    var splitted;
+    for (var i in temp_arr) {
+      splitted = temp_arr[i].split("=");
+      if (splitted.length == 2) {
+        done_obj[splitted[0]] = splitted[1];
+      }
+    }
+    return done_obj;
+  }
 }

server/public/assets/js/chat.js

@@ -1,207 +1,311 @@
 var Chat = {
+  channel_received: 0,
+  all_received: 0,
+  chat_admin_help: [
+    "/ban USERNAME REASON to ban user",
+    "/unban USERNAME to unban a user"
+  ],
+  chat_help: [
+    "/login <new name> <password> to register and save a password for a nickname, or to log in with a password on a name.",
+    "/login <name> <new_password> <old_password> to change the password on a nickname",
+    "/logout to logout",
+    "/who to see the names of the people in the channel",
+    "Want your own icon besides your name? If you donate 5$ or more, we'll add a picture of your choosing (following our guidelines) besides your name!"
+  ],
 
-    channel_received: 0,
+  namechange: function(data, first, initial) {
-    all_received: 0,
+    var input = data.split(" ");
-    chat_admin_help: [
+    if (input.length == 2) {
-        "/ban USERNAME REASON to ban user",
+      var name = input[0];
-        "/unban USERNAME to unban a user"
+      var password = input[1];
-    ],
-    chat_help: [
-        "/login <new name> <password> to register and save a password for a nickname, or to log in with a password on a name.",
-        "/login <name> <new_password> <old_password> to change the password on a nickname",
-        "/logout to logout",
-        "/who to see the names of the people in the channel",
-        "Want your own icon besides your name? If you donate 5$ or more, we'll add a picture of your choosing (following our guidelines) besides your name!"
-    ],
 
-    namechange: function(data, first, initial) {
+      password = Crypt.crypt_chat_pass(password);
-        var input = data.split(" ");
+      socket.emit("namechange", {
-        if(input.length == 2) {
+        name: name,
-            var name = input[0];
+        channel: chan.toLowerCase(),
-            var password = input[1];
+        password: password,
+        first: first
+      });
+    } else if (input.length == 3) {
+      var name = input[0];
+      var new_password = input[1];
+      var old_password = input[2];
 
-            password = Crypt.crypt_chat_pass(password);
+      new_password = Crypt.crypt_chat_pass(new_password);
-            socket.emit("namechange", {name: name, channel: chan.toLowerCase(), password: password, first: first});
+      old_password = Crypt.crypt_chat_pass(old_password);
-        } else if(input.length == 3) {
-            var name = input[0];
-            var new_password = input[1];
-            var old_password = input[2];
 
-            new_password = Crypt.crypt_chat_pass(new_password);
+      socket.emit("namechange", {
-            old_password = Crypt.crypt_chat_pass(old_password);
+        name: name,
-
+        channel: chan.toLowerCase(),
-            socket.emit("namechange", {name: name, channel: chan.toLowerCase(), new_password: new_password, old_password: old_password});
+        new_password: new_password,
-        } else if(first) {
+        old_password: old_password
-            var to_send = {initial: initial, first: true};
+      });
-            if(chan != undefined && chan != "") {
+    } else if (first) {
-                to_send.channel = chan.toLowerCase();
+      var to_send = { initial: initial, first: true };
-            }
+      if (chan != undefined && chan != "") {
-            socket.emit("namechange", to_send);
+        to_send.channel = chan.toLowerCase();
-        }
+      }
-    },
+      socket.emit("namechange", to_send);
-
-    removename: function() {
-        socket.emit("removename", {channel: chan.toLowerCase()});
-        Crypt.remove_name();
-    },
-
-    chat: function(data) {
-        if(data.value.length > 150) return;
-        if(data.value.startsWith("/name ") || data.value.startsWith("/removename")) {
-            data.value = "/help";
-            Chat.chat(data);
-            return;
-        } else if(data.value.startsWith("/login ")){
-            Chat.namechange(data.value.substring(7), false);
-        } else if(data.value.startsWith("/help")) {
-            var add = "";
-            if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat"){
-                if(document.querySelector("#chatall").children.length > 100) {
-                    document.querySelector("#chatall").children[0].remove()
-                }
-                add = "chatall";
-            } else {
-                if(document.querySelector("#chatchannel").children.length > 100) {
-                    document.querySelector("#chatchannel").children[0].remove()
-                }
-                add = "chatchannel";
-            }
-            var help = Chat.chat_help;
-            if(Admin.logged_in) help = help.concat(Chat.chat_admin_help);
-            for(var x = 0; x < help.length; x++) {
-                var color = Helper.intToARGB(Helper.hashCode("System"));
-                if(color.length < 6) {
-                    for(x = color.length; x < 6; x++) {
-                        color = "0" + color;
-                    }
-                }
-                var _time = new Date();
-                var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
-                 color = Helper.hexToRgb(color.substring(0,6));
-                var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
-                document.querySelector("#" + add).insertAdjacentHTML("beforeend", "<li title='Zoff''><span class='time_color'>" + time + "</span> <img class='chat-icon' src='https://zoff.me/assets/images/favicon-32x32.png' alt='System'><span style='color:" + color_temp + ";'>System</span>: </li>");
-                var in_text = document.createTextNode(help[x]);
-                document.querySelector("#" + add).children[document.querySelector("#" + add).children.length - 1].appendChild(in_text);
-                document.getElementById("" + add).scrollTop = document.getElementById("" + add).scrollHeight;
-            }
-        } else if(data.value.startsWith("/logout")) {
-            Chat.removename();
-        } else if(document.querySelector(".chat-tab-li a.active").getAttribute("href") == "#all_chat") {
-            socket.emit("all,chat", {channel: chan.toLowerCase(), data: data.value});
-        } else {
-            socket.emit("chat", {channel: chan.toLowerCase(), data: data.value});
-        }
-        data.value = "";
-        return;
-    },
-
-    createChatElement: function(allchat, channel, time, icon, color, from, message) {
-        var liElement = document.createElement("li");
-        liElement.innerHTML += "<span class='time_color'>" + time + "</span> " + icon;
-        var nameElement = document.createElement("span");
-        nameElement.innerText = from;
-        nameElement.style.color = color;
-        liElement.appendChild(nameElement);
-        if(allchat) {
-            liElement.title = channel;
-            liElement.innerHTML += "<span class='channel-info-all-chat'> " + channel + "</span>";
-        }
-        var in_text = document.createTextNode(message);
-        liElement.appendChild(in_text);
-        return liElement;
-    },
-
-    allchat: function(inp, time_sent, disable_blink) {
-        if(inp.msg.substring(0,1) == ":" && !chat_active && !disable_blink) {
-            Chat.all_received += 1;
-            document.querySelector("#favicon").getAttribute("href", "/assets/images/highlogo.png");
-            unseen = true;
-            chat_unseen = true;
-            Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
-            var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
-            Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
-        }
-
-        if(document.hidden)	{
-            document.getElementById("favicon").setAttribute("href", "/assets/images/highlogo.png");
-        }
-
-        if(document.querySelector("#chatall").children.length > 100) {
-            document.querySelector("#chatall").children[0].remove()
-        }
-        var color = Helper.intToARGB(Helper.hashCode(inp.from));
-        if(color.length < 6) {
-            for(x = color.length; x < 6; x++){
-                color = "0" + color;
-            }
-        }
-        var icon_add = "";
-        if(inp.hasOwnProperty("icon") && inp.icon !== false && inp.icon != "") {
-            icon_add = "<img class='chat-icon' src='" + inp.icon + "' alt='" + inp.from + "'>";
-        }
-
-        color = Helper.hexToRgb(color.substring(0,6));
-        var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
-        var _time = new Date();
-        if(time_sent) {
-            _time = new Date(time_sent);
-        }
-        var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
-        var element = Chat.createChatElement(true, Helper.decodeChannelName(inp.channel), time, icon_add, color_temp, inp.from, inp.msg);
-        //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
-        document.querySelector("#chatall").appendChild(element);
-        if(!userscroll) {
-            programscroll = true;
-            document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight;
-            programscroll = false;
-        }
-    },
-
-    channelchat: function(data, time_sent, disable_blink) {
-        if(data.msg.substring(0,1) == ":" && !chat_active && !disable_blink && data.from.toLowerCase() != "system") {
-            document.querySelector("#favicon").setAttribute("href", "/assets/images/highlogo.png");
-            unseen = true;
-            chat_unseen = true;
-            Chat.channel_received += 1;
-            //blink_interval = setTimeout(Chat.chat_blink, 1000);
-            Helper.removeClass(document.querySelector(".chat-link span.badge.new.white"), "hide");
-            var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
-            Helper.setHtml(document.querySelector(".chat-link span.badge.new.white"), to_display);
-        }
-
-        if(document.querySelector("#chatchannel").children.length > 100) {
-            document.querySelector("#chatchannel").children[0].remove()
-        }
-
-        var icon_add = "";
-        if(data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") {
-            icon_add = "<img class='chat-icon' src='" + data.icon + "' alt='" + data.from + "'>";
-        }
-
-        var color = Helper.intToARGB(Helper.hashCode(data.from));
-        if(color.length < 6) {
-            for(x = color.length; x < 6; x++) {
-                color = "0" + color;
-            }
-        }
-        color = Helper.hexToRgb(color.substring(0,6));
-        var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
-        var _time = new Date();
-        if(time_sent) {
-            _time = new Date(time_sent);
-        }
-        var time = Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
-        //document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "<li><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+data.from+"</span></li>");
-        //var in_text = document.createTextNode(data.msg);
-        //document.querySelector("#chatchannel").children[document.querySelector("#chatchannel").children.length - 1].appendChild(in_text);
-        var element = Chat.createChatElement(false, null, time, icon_add, color_temp, data.from, data.msg);
-        //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
-        document.querySelector("#chatchannel").appendChild(element);
-
-        if(!userscroll) {
-            programscroll = true;
-            document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight;
-            programscroll = false;
-        }
     }
+  },
+
+  removename: function() {
+    socket.emit("removename", { channel: chan.toLowerCase() });
+    Crypt.remove_name();
+  },
+
+  chat: function(data) {
+    if (data.value.length > 150) return;
+    if (
+      data.value.startsWith("/name ") ||
+      data.value.startsWith("/removename")
+    ) {
+      data.value = "/help";
+      Chat.chat(data);
+      return;
+    } else if (data.value.startsWith("/login ")) {
+      Chat.namechange(data.value.substring(7), false);
+    } else if (data.value.startsWith("/help")) {
+      var add = "";
+      if (
+        document.querySelector(".chat-tab-li a.active").getAttribute("href") ==
+        "#all_chat"
+      ) {
+        if (document.querySelector("#chatall").children.length > 100) {
+          document.querySelector("#chatall").children[0].remove();
+        }
+        add = "chatall";
+      } else {
+        if (document.querySelector("#chatchannel").children.length > 100) {
+          document.querySelector("#chatchannel").children[0].remove();
+        }
+        add = "chatchannel";
+      }
+      var help = Chat.chat_help;
+      if (Admin.logged_in) help = help.concat(Chat.chat_admin_help);
+      for (var x = 0; x < help.length; x++) {
+        var color = Helper.intToARGB(Helper.hashCode("System"));
+        if (color.length < 6) {
+          for (x = color.length; x < 6; x++) {
+            color = "0" + color;
+          }
+        }
+        var _time = new Date();
+        var time =
+          Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
+        color = Helper.hexToRgb(color.substring(0, 6));
+        var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
+        document
+          .querySelector("#" + add)
+          .insertAdjacentHTML(
+            "beforeend",
+            "<li title='Zoff''><span class='time_color'>" +
+              time +
+              "</span> <img class='chat-icon' src='https://zoff.me/assets/images/favicon-32x32.png' alt='System'><span style='color:" +
+              color_temp +
+              ";'>System</span>: </li>"
+          );
+        var in_text = document.createTextNode(help[x]);
+        document
+          .querySelector("#" + add)
+          .children[
+            document.querySelector("#" + add).children.length - 1
+          ].appendChild(in_text);
+        document.getElementById("" + add).scrollTop = document.getElementById(
+          "" + add
+        ).scrollHeight;
+      }
+    } else if (data.value.startsWith("/logout")) {
+      Chat.removename();
+    } else if (
+      document.querySelector(".chat-tab-li a.active").getAttribute("href") ==
+      "#all_chat"
+    ) {
+      socket.emit("all,chat", {
+        channel: chan.toLowerCase(),
+        data: data.value
+      });
+    } else {
+      socket.emit("chat", { channel: chan.toLowerCase(), data: data.value });
+    }
+    data.value = "";
+    return;
+  },
+
+  createChatElement: function(
+    allchat,
+    channel,
+    time,
+    icon,
+    color,
+    from,
+    message
+  ) {
+    var liElement = document.createElement("li");
+    liElement.innerHTML +=
+      "<span class='time_color'>" + time + "</span> " + icon;
+    var nameElement = document.createElement("span");
+    nameElement.innerText = from;
+    nameElement.style.color = color;
+    liElement.appendChild(nameElement);
+    if (allchat) {
+      liElement.title = channel;
+      liElement.innerHTML +=
+        "<span class='channel-info-all-chat'> " + channel + "</span>";
+    }
+    var in_text = document.createTextNode(message);
+    liElement.appendChild(in_text);
+    return liElement;
+  },
+
+  allchat: function(inp, time_sent, disable_blink) {
+    if (inp.msg.substring(0, 1) == ":" && !chat_active && !disable_blink) {
+      Chat.all_received += 1;
+      document
+        .querySelector("#favicon")
+        .getAttribute("href", "/assets/images/highlogo.png");
+      unseen = true;
+      chat_unseen = true;
+      Helper.removeClass(
+        document.querySelector(".chat-link span.badge.new.white"),
+        "hide"
+      );
+      var to_display =
+        Chat.channel_received + Chat.all_received > 9
+          ? "9+"
+          : Chat.channel_received + Chat.all_received;
+      Helper.setHtml(
+        document.querySelector(".chat-link span.badge.new.white"),
+        to_display
+      );
+    }
+
+    if (document.hidden) {
+      document
+        .getElementById("favicon")
+        .setAttribute("href", "/assets/images/highlogo.png");
+    }
+
+    if (document.querySelector("#chatall").children.length > 100) {
+      document.querySelector("#chatall").children[0].remove();
+    }
+    var color = Helper.intToARGB(Helper.hashCode(inp.from));
+    if (color.length < 6) {
+      for (x = color.length; x < 6; x++) {
+        color = "0" + color;
+      }
+    }
+    var icon_add = "";
+    if (inp.hasOwnProperty("icon") && inp.icon !== false && inp.icon != "") {
+      icon_add =
+        "<img class='chat-icon' src='" + inp.icon + "' alt='" + inp.from + "'>";
+    }
+
+    color = Helper.hexToRgb(color.substring(0, 6));
+    var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
+    var _time = new Date();
+    if (time_sent) {
+      _time = new Date(time_sent);
+    }
+    var time =
+      Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
+    var element = Chat.createChatElement(
+      true,
+      Helper.decodeChannelName(inp.channel),
+      time,
+      icon_add,
+      color_temp,
+      inp.from,
+      inp.msg
+    );
+    //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
+    document.querySelector("#chatall").appendChild(element);
+    if (!userscroll) {
+      programscroll = true;
+      document.getElementById("chatall").scrollTop = document.getElementById(
+        "chatall"
+      ).scrollHeight;
+      programscroll = false;
+    }
+  },
+
+  channelchat: function(data, time_sent, disable_blink) {
+    if (
+      data.msg.substring(0, 1) == ":" &&
+      !chat_active &&
+      !disable_blink &&
+      data.from.toLowerCase() != "system"
+    ) {
+      document
+        .querySelector("#favicon")
+        .setAttribute("href", "/assets/images/highlogo.png");
+      unseen = true;
+      chat_unseen = true;
+      Chat.channel_received += 1;
+      //blink_interval = setTimeout(Chat.chat_blink, 1000);
+      Helper.removeClass(
+        document.querySelector(".chat-link span.badge.new.white"),
+        "hide"
+      );
+      var to_display =
+        Chat.channel_received + Chat.all_received > 9
+          ? "9+"
+          : Chat.channel_received + Chat.all_received;
+      Helper.setHtml(
+        document.querySelector(".chat-link span.badge.new.white"),
+        to_display
+      );
+    }
+
+    if (document.querySelector("#chatchannel").children.length > 100) {
+      document.querySelector("#chatchannel").children[0].remove();
+    }
+
+    var icon_add = "";
+    if (data.hasOwnProperty("icon") && data.icon !== false && data.icon != "") {
+      icon_add =
+        "<img class='chat-icon' src='" +
+        data.icon +
+        "' alt='" +
+        data.from +
+        "'>";
+    }
+
+    var color = Helper.intToARGB(Helper.hashCode(data.from));
+    if (color.length < 6) {
+      for (x = color.length; x < 6; x++) {
+        color = "0" + color;
+      }
+    }
+    color = Helper.hexToRgb(color.substring(0, 6));
+    var color_temp = Helper.rgbToHsl([color.r, color.g, color.b], false);
+    var _time = new Date();
+    if (time_sent) {
+      _time = new Date(time_sent);
+    }
+    var time =
+      Helper.pad(_time.getHours()) + ":" + Helper.pad(_time.getMinutes());
+    //document.querySelector("#chatchannel").insertAdjacentHTML("beforeend", "<li><span class='time_color'>" + time + "</span> " + icon_add + "<span style='color:"+color_temp+";'>"+data.from+"</span></li>");
+    //var in_text = document.createTextNode(data.msg);
+    //document.querySelector("#chatchannel").children[document.querySelector("#chatchannel").children.length - 1].appendChild(in_text);
+    var element = Chat.createChatElement(
+      false,
+      null,
+      time,
+      icon_add,
+      color_temp,
+      data.from,
+      data.msg
+    );
+    //document.querySelector("#chatall").insertAdjacentHTML("beforeend", element);
+    document.querySelector("#chatchannel").appendChild(element);
+
+    if (!userscroll) {
+      programscroll = true;
+      document.getElementById(
+        "chatchannel"
+      ).scrollTop = document.getElementById("chatchannel").scrollHeight;
+      programscroll = false;
+    }
+  }
 };

server/public/assets/js/crypt.js

@@ -1,89 +1,108 @@
 var Crypt = {
+  conf_pass: undefined,
+  user_pass: undefined,
+  tmp_pass_user: "",
+  tmp_pass: "",
 
-    conf_pass: undefined,
+  init: function() {
-    user_pass: undefined,
+    if (window.location.pathname != "/") {
-    tmp_pass_user: "",
+      if (location.protocol != "https:") {
-    tmp_pass: "",
+        document.cookie =
+          chan.toLowerCase() +
+          "=;path=/" +
+          chan.toLowerCase() +
+          ";expires=" +
+          new Date(0).toUTCString();
+      } else {
+        document.cookie =
+          chan.toLowerCase() +
+          "=;path=/" +
+          chan.toLowerCase() +
+          ";secure;expires=" +
+          new Date(0).toUTCString();
+      }
+    }
 
-    init: function() {
+    try {
+      conf_arr = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt");
+    } catch (err) {
+      conf_arr = Crypt.decrypt(Crypt.create_cookie("_opt"), "_opt");
+    }
 
-        if(window.location.pathname != "/") {
+    if (window.location.pathname != "/") {
-            if (location.protocol != "https:") {
+      change_intelligent(Crypt.get_intelligent_list_enabled());
-                document.cookie = chan.toLowerCase() + '=;path=/' + chan.toLowerCase() + ';expires=' + new Date(0).toUTCString();
+      if (!conf_arr.hasOwnProperty("color")) {
-            } else {
+        Crypt.set_background_color("dynamic", true);
-                document.cookie = chan.toLowerCase() + '=;path=/' + chan.toLowerCase() + ';secure;expires=' + new Date(0).toUTCString();
+      } else {
-            }
+        document.querySelector(".backround_switch_class").checked =
+          conf_arr.color == "dynamic";
+        if (conf_arr.color != "dynamic") {
+          Helper.removeClass(".background_color_container", "hide");
+          document.querySelector("#background_color_choser").value =
+            conf_arr.color;
         }
+      }
+      Hostcontroller.change_enabled(conf_arr.remote);
+      if (conf_arr.width != 100) Player.set_width(conf_arr.width);
+    }
+  },
 
-        try {
+  set_background_color: function(value, first) {
-            conf_arr = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt");
+    conf_arr.color = value;
-        } catch(err) {
+    if (value != "dynamic" && !first) {
-            conf_arr = Crypt.decrypt(Crypt.create_cookie("_opt"), "_opt");
+      Helper.css("#main-container", "background-color", value);
-        }
+      Helper.css("#nav", "background-color", value);
+      Helper.css(".title-container", "background-color", value);
+      document
+        .querySelector("meta[name=theme-color]")
+        .setAttribute("content", value);
+      Helper.css("#controls", "background", value);
+    } else if (!first) {
+      var url = "https://img.youtube.com/vi/" + Player.np.id + "/mqdefault.jpg";
+      if (videoSource == "soundcloud") url = Player.np.thumbnail;
+      getColor(url);
+    }
+    Crypt.encrypt(conf_arr, "_opt");
+  },
 
-        if(window.location.pathname != "/") {
+  get_background_color: function(value) {
-            change_intelligent(Crypt.get_intelligent_list_enabled());
+    if (!conf_arr.hasOwnProperty("color")) {
-            if(!conf_arr.hasOwnProperty("color")) {
+      Crypt.set_background_color("dynamic");
-                Crypt.set_background_color("dynamic", true);
+    }
-            } else {
+    return conf_arr.color;
-                document.querySelector(".backround_switch_class").checked = conf_arr.color == "dynamic";
+  },
-                if(conf_arr.color != "dynamic") {
-                    Helper.removeClass(".background_color_container", "hide");
-                    document.querySelector("#background_color_choser").value = conf_arr.color;
-                }
-            }
-            Hostcontroller.change_enabled(conf_arr.remote);
-            if(conf_arr.width != 100) Player.set_width(conf_arr.width);
-        }
-    },
 
-    set_background_color: function(value, first) {
+  get_intelligent_list_enabled: function() {
-        conf_arr.color = value;
+    if (conf_arr.hasOwnProperty("intelligent")) {
-        if(value != "dynamic" && !first) {
+      return conf_arr.intelligent;
-            Helper.css("#main-container", "background-color", value);
+    } else {
-            Helper.css("#nav", "background-color", value);
+      conf_arr.intelligent = false;
-            Helper.css(".title-container", "background-color", value);
+      Crypt.encrypt(conf_arr, "_opt");
-            document.querySelector("meta[name=theme-color]").setAttribute("content", value);
+      return false;
-            Helper.css("#controls", "background", value);
+    }
-        } else if(!first){
+  },
-            var url = 'https://img.youtube.com/vi/'+Player.np.id+'/mqdefault.jpg';
-            if(videoSource == "soundcloud") url = Player.np.thumbnail;
-            getColor(url);
-        }
-        Crypt.encrypt(conf_arr, "_opt");
-    },
 
-    get_background_color: function(value) {
+  set_intelligent_list_enabled: function(enabled) {
-        if(!conf_arr.hasOwnProperty("color")) {
+    conf_arr.intelligent = enabled;
-            Crypt.set_background_color("dynamic");
+    if (Helper.mobilecheck()) {
-        }
+      intelligentList = enabled;
-        return conf_arr.color;
+    }
-    },
+    Crypt.encrypt(conf_arr, "_opt");
+  },
 
-    get_intelligent_list_enabled: function() {
+  decrypt: function(cookie, name) {
-        if(conf_arr.hasOwnProperty("intelligent")) {
+    if (Crypt.getCookie(name) === undefined) {
-            return conf_arr.intelligent;
+      cookie = Crypt.create_cookie(name);
-        } else {
+    }
-            conf_arr.intelligent = false;
+    if (cookie == undefined && name == "_opt")
-            Crypt.encrypt(conf_arr, "_opt");
+      return {
-            return false;
+        volume: 100,
-        }
+        width: 100,
-    },
+        remote: true,
-
+        name: "",
-    set_intelligent_list_enabled: function(enabled) {
+        offline: false
-        conf_arr.intelligent = enabled;
+      };
-        if(Helper.mobilecheck()) {
+    /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
-            intelligentList = enabled;
-        }
-        Crypt.encrypt(conf_arr, "_opt");
-    },
-
-    decrypt: function(cookie, name) {
-        if(Crypt.getCookie(name) === undefined) {
-            cookie = Crypt.create_cookie(name);
-        }
-        if(cookie == undefined && name == "_opt") return {"volume":100,"width":100,"remote":true,"name":"","offline":false};
-        /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
         key = key.substring(0,32);
         key = btoa(key);
         var decrypted = CryptoJS.AES.decrypt(
@@ -94,13 +113,13 @@ var Crypt = {
             }
         );*/
 
-        //return $.parseJSON(decrypted.toString(CryptoJS.enc.Utf8));
+    //return $.parseJSON(decrypted.toString(CryptoJS.enc.Utf8));
-        return JSON.parse(atob(cookie));
+    return JSON.parse(atob(cookie));
-    },
+  },
 
-    decrypt_pass: function(pass) {
+  decrypt_pass: function(pass) {
-        if(socket) {
+    if (socket) {
-            /*var key = btoa(socket.id) + btoa(socket.id);
+      /*var key = btoa(socket.id) + btoa(socket.id);
             key = key.substring(0,32);
             key = btoa(key);
             var decrypted = CryptoJS.AES.decrypt(
@@ -111,13 +130,14 @@ var Crypt = {
                 }
             );
             return decrypted.toString(CryptoJS.enc.Utf8);*/
-            return atob(pass);
+      return atob(pass);
-        } return false;
+    }
-    },
+    return false;
+  },
 
-    encrypt: function(json_formated, cookie) {
+  encrypt: function(json_formated, cookie) {
-        var to_encrypt = JSON.stringify(json_formated);
+    var to_encrypt = JSON.stringify(json_formated);
-        /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
+    /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
         key = key.substring(0,32);
         key = btoa(key);
         var encrypted = CryptoJS.AES.encrypt(
@@ -128,42 +148,61 @@ var Crypt = {
                 padding: CryptoJS.pad.Pkcs7
             }
         );*/
-        var encrypted = btoa(to_encrypt);
+    var encrypted = btoa(to_encrypt);
-        var CookieDate = new Date();
+    var CookieDate = new Date();
-        CookieDate.setFullYear(CookieDate.getFullYear( ) +1);
+    CookieDate.setFullYear(CookieDate.getFullYear() + 1);
-        if (location.protocol != "https:"){
+    if (location.protocol != "https:") {
-            document.cookie = cookie+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;";
+      document.cookie =
-        } else {
+        cookie +
-            document.cookie = cookie+"="+encrypted.toString()+";secure;expires="+CookieDate.toGMTString()+";path=/;";
+        "=" +
-        }
+        encrypted.toString() +
-    },
+        ";expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
+    } else {
+      document.cookie =
+        cookie +
+        "=" +
+        encrypted.toString() +
+        ";secure;expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
+    }
+  },
 
-    get_volume: function() {
+  get_volume: function() {
-        return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").volume;
+    return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").volume;
-        //return conf_arr.volume;
+    //return conf_arr.volume;
-    },
+  },
 
-    get_offline: function() {
+  get_offline: function() {
-        var temp_offline = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline;
+    var temp_offline = Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline;
-        if(temp_offline != undefined){
+    if (temp_offline != undefined) {
-            return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline;
+      return Crypt.decrypt(Crypt.getCookie("_opt"), "_opt").offline;
-        } else {
+    } else {
-            Crypt.set_offline(false);
+      Crypt.set_offline(false);
-            return false;
+      return false;
-        }
+    }
-    },
+  },
 
-    set_volume: function(val) {
+  set_volume: function(val) {
-        conf_arr.volume = val;
+    conf_arr.volume = val;
-        Crypt.encrypt(conf_arr, "_opt");
+    Crypt.encrypt(conf_arr, "_opt");
-    },
+  },
 
-    create_cookie: function(name) {
+  create_cookie: function(name) {
-        if(name == "_opt") cookie_object = {volume: 100, width: 100, remote: true, name: "", offline: false};
+    if (name == "_opt")
-        else cookie_object = {passwords: {}};
+      cookie_object = {
+        volume: 100,
+        width: 100,
+        remote: true,
+        name: "",
+        offline: false
+      };
+    else cookie_object = { passwords: {} };
 
-        var string_it = JSON.stringify(cookie_object);
+    var string_it = JSON.stringify(cookie_object);
-        /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
+    /*var key = btoa("0103060703080703080701") + btoa("0103060703080703080701");
         key = key.substring(0,32);
         key = btoa(key);
         var encrypted = CryptoJS.AES.encrypt(
@@ -174,22 +213,34 @@ var Crypt = {
                 padding: CryptoJS.pad.Pkcs7
             }
         );*/
-        var encrypted = btoa(string_it);
+    var encrypted = btoa(string_it);
 
-        var CookieDate = new Date();
+    var CookieDate = new Date();
-        CookieDate.setFullYear(CookieDate.getFullYear( ) +1);
+    CookieDate.setFullYear(CookieDate.getFullYear() + 1);
 
-        if (location.protocol != "https:"){
+    if (location.protocol != "https:") {
-            document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;";
+      document.cookie =
-        } else {
+        name +
-            document.cookie = name+"="+encrypted.toString()+";secure;expires="+CookieDate.toGMTString()+";path=/;";
+        "=" +
-        }
+        encrypted.toString() +
-        //document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
+        ";expires=" +
-        //document.cookie = na"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
+        CookieDate.toGMTString() +
-        return Crypt.getCookie(name);
+        ";path=/;";
-    },
+    } else {
+      document.cookie =
+        name +
+        "=" +
+        encrypted.toString() +
+        ";secure;expires=" +
+        CookieDate.toGMTString() +
+        ";path=/;";
+    }
+    //document.cookie = name+"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
+    //document.cookie = na"="+encrypted.toString()+";expires="+CookieDate.toGMTString()+";path=/;"
+    return Crypt.getCookie(name);
+  },
 
-    /*set_pass: function(chan, pass) {
+  /*set_pass: function(chan, pass) {
         Crypt.conf_pass.passwords[chan] = pass;
         Crypt.encrypt(Crypt.conf_pass, chan);
     },
@@ -209,44 +260,45 @@ var Crypt = {
         Crypt.encrypt(Crypt.conf_pass, chan.toLowerCase());
     },*/
 
-    set_name:function(name, pass) {
+  set_name: function(name, pass) {
-        conf_arr.name = encodeURIComponent(name).replace(/\W/g, '');
+    conf_arr.name = encodeURIComponent(name).replace(/\W/g, "");
-        conf_arr.chat_pass = pass;
+    conf_arr.chat_pass = pass;
-        Crypt.encrypt(conf_arr, "_opt");
+    Crypt.encrypt(conf_arr, "_opt");
-    },
+  },
 
-    set_offline: function(enabled) {
+  set_offline: function(enabled) {
-        conf_arr.offline = enabled;
+    conf_arr.offline = enabled;
-        Crypt.encrypt(conf_arr, "_opt");
+    Crypt.encrypt(conf_arr, "_opt");
-    },
+  },
 
-    remove_name:function() {
+  remove_name: function() {
-        conf_arr.name = "";
+    conf_arr.name = "";
-        conf_arr.chat_pass = "";
+    conf_arr.chat_pass = "";
-        Crypt.encrypt(conf_arr, "_opt");
+    Crypt.encrypt(conf_arr, "_opt");
-    },
+  },
 
-    get_pass: function(chan) {
+  get_pass: function(chan) {
-        if(Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords[chan];
+    if (Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords[chan];
-        return undefined;
+    return undefined;
-    },
+  },
 
-    get_userpass: function(chan) {
+  get_userpass: function(chan) {
-        if(Crypt.conf_pass !== undefined) return Crypt.conf_pass.passwords["userpass"];
+    if (Crypt.conf_pass !== undefined)
-        return "";
+      return Crypt.conf_pass.passwords["userpass"];
-    },
+    return "";
+  },
 
-    set_remote: function(val) {
+  set_remote: function(val) {
-        conf_arr.remote = val;
+    conf_arr.remote = val;
-        Crypt.encrypt(conf_arr, "_opt");
+    Crypt.encrypt(conf_arr, "_opt");
-    },
+  },
 
-    get_remote: function(val) {
+  get_remote: function(val) {
-        return conf_arr.remote;
+    return conf_arr.remote;
-    },
+  },
 
-    crypt_chat_pass: function(pass) {
+  crypt_chat_pass: function(pass) {
-        /*var key = btoa(socket.id) + btoa(socket.id);
+    /*var key = btoa(socket.id) + btoa(socket.id);
         key = key.substring(0,32);
         key = btoa(key);
         var iv = btoa(Crypt.makeiv());
@@ -259,43 +311,48 @@ var Crypt = {
                 iv: CryptoJS.enc.Base64.parse(iv),
             }
         );*/
-        //window.encrypted = encrypted;
+    //window.encrypted = encrypted;
-        return btoa(pass);
+    return btoa(pass);
-        //return encrypted.toString() + "$" + iv;
+    //return encrypted.toString() + "$" + iv;
-    },
+  },
 
-    crypt_pass: function(pass, userpass) {
+  crypt_pass: function(pass, userpass) {
-        if(userpass) {
+    if (userpass) {
-            Crypt.tmp_pass_user = pass;
+      Crypt.tmp_pass_user = pass;
-        } else {
+    } else {
-            Crypt.tmp_pass = pass;
+      Crypt.tmp_pass = pass;
-        }
-        //return Crypt.crypt_chat_pass(pass);
-        return btoa(pass);
-    },
-
-    makeiv: function() {
-        var text = "";
-        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-        for( var i=0; i < 16; i++ )
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
-
-        return text;
-    },
-
-    get_width: function() {
-        return conf_arr.width;
-    },
-
-    set_width: function(val) {
-        conf_arr.width = val;
-        Crypt.encrypt(conf_arr, "_opt");
-    },
-
-    getCookie: function(name) {
-        var value = "; " + document.cookie;
-        var parts = value.split("; " + name + "=");
-        if (parts.length == 2) return parts.pop().split(";").shift();
     }
+    //return Crypt.crypt_chat_pass(pass);
+    return btoa(pass);
+  },
+
+  makeiv: function() {
+    var text = "";
+    var possible =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+    for (var i = 0; i < 16; i++)
+      text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+    return text;
+  },
+
+  get_width: function() {
+    return conf_arr.width;
+  },
+
+  set_width: function(val) {
+    conf_arr.width = val;
+    Crypt.encrypt(conf_arr, "_opt");
+  },
+
+  getCookie: function(name) {
+    var value = "; " + document.cookie;
+    var parts = value.split("; " + name + "=");
+    if (parts.length == 2)
+      return parts
+        .pop()
+        .split(";")
+        .shift();
+  }
 };

server/public/assets/js/embed.js

@@ -7,16 +7,19 @@ var intelligentList = false;
 var client = false;
 var _VERSION;
 try {
-    _VERSION = localStorage.getItem("VERSION");
+  _VERSION = localStorage.getItem("VERSION");
-    if(_VERSION == null || _VERSION == undefined) throw "Some error";
+  if (_VERSION == null || _VERSION == undefined) throw "Some error";
-} catch(e) {
+} catch (e) {
-    _VERSION = 6;
+  _VERSION = 6;
 }
 var SC_widget;
 var scUsingWidget = false;
 var zoff_api_token = "DwpnKVkaMH2HdcpJT2YPy783SY33byF5/32rbs0+xdU=";
-if(window.location.hostname == "localhost" || window.location.hostname == "client.localhost") {
+if (
-    var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
+  window.location.hostname == "localhost" ||
+  window.location.hostname == "client.localhost"
+) {
+  var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
 }
 var SC_player;
 var durationTimeout;
@@ -43,11 +46,11 @@ var beginning = false;
 var soundcloud_loading = false;
 var videoSource = "";
 var list_html = document.getElementById("list-song-html").innerHTML;
-var w_p		= true;
+var w_p = true;
-var lazy_load	= false;
+var lazy_load = false;
 var end_programmatically = false;
 var embed = true;
-var vol	= 100;
+var vol = 100;
 var adminpass = "";
 var mobile_beginning = false;
 var durationBegun = false;
@@ -70,398 +73,462 @@ var user_auth_started = false;
 var user_auth_avoid = false;
 
 var connection_options = {
-    'sync disconnect on unload':true,
+  "sync disconnect on unload": true,
-    'secure': true,
+  secure: true,
-    'force new connection': true
+  "force new connection": true
 };
 
 var Crypt = {
-    crypt_pass: function(pass) {
+  crypt_pass: function(pass) {
-        return pass;
+    return pass;
-    },
+  },
-    get_background_color: function() {
+  get_background_color: function() {
-        return "dynamic";
+    return "dynamic";
-    }
+  }
 };
 
 function receiveMessage(event) {
-    if(event.data == "parent") {
+  if (event.data == "parent") {
-        window.parentWindow = event.source;
+    window.parentWindow = event.source;
-        window.parentOrigin = event.origin;
+    window.parentOrigin = event.origin;
-    }
+  }
-    if(event.data == "lower") {
+  if (event.data == "lower") {
-        window.setVolume(10);
+    window.setVolume(10);
-    }else if(event.data == "reset") {
+  } else if (event.data == "reset") {
-        window.setVolume(100);
+    window.setVolume(100);
-    } else if(event.data == "get_info") {
+  } else if (event.data == "get_info") {
-        window.parentWindow.postMessage({type: "np", title: song_title}, window.parentOrigin);
+    window.parentWindow.postMessage(
-        window.parentWindow.postMessage({type: "controller", id: Hostcontroller.old_id}, window.parentOrigin);
+      { type: "np", title: song_title },
-        try {
+      window.parentOrigin
-            if(full_playlist.length > 0) {
+    );
-                Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
+    window.parentWindow.postMessage(
-            }
+      { type: "controller", id: Hostcontroller.old_id },
-        } catch(e) {
+      window.parentOrigin
-
+    );
-        }
+    try {
-    }
+      if (full_playlist.length > 0) {
+        Player.sendNext({
+          title: full_playlist[0].title,
+          videoId: full_playlist[0].id
+        });
+      }
+    } catch (e) {}
+  }
 }
 
 window.addEventListener("message", receiveMessage, false);
-window.addEventListener("DOMContentLoaded", function() {
+window.addEventListener("DOMContentLoaded", function() {});
-
-});
 
 var Channel = {
-    set_title_width: function(){},
+  set_title_width: function() {},
-    window_width_volume_slider: function(){}
+  window_width_volume_slider: function() {}
-}
+};
 
 function getSearch(elem) {
-    var result = {};
+  var result = {};
-    var search = window.location.search.split("&");
+  var search = window.location.search.split("&");
-    for(var i = 0; i < search.length; i++) {
+  for (var i = 0; i < search.length; i++) {
-        var currElement = search[i].split("=");
+    var currElement = search[i].split("=");
-        var key = currElement[0].replace("?", "");
+    var key = currElement[0].replace("?", "");
-        var value = currElement[1];
+    var value = currElement[1];
-        if(value == "true") value = true;
+    if (value == "true") value = true;
-        else if(value == "false") value = false;
+    else if (value == "false") value = false;
-        result[key] = value;
+    result[key] = value;
-    }
+  }
-    return result;
+  return result;
 }
 
 window.addEventListener("load", function() {
-    if(autoplay){
+  if (autoplay) {
-        Helper.css("#player", "visibility", "hidden");
+    Helper.css("#player", "visibility", "hidden");
-    }
+  }
-    if(videoonly) {
+  if (videoonly) {
-        Helper.addClass("#wrapper", "hide");
+    Helper.addClass("#wrapper", "hide");
-        Helper.addClass("#controls", "hide");
+    Helper.addClass("#controls", "hide");
-        Helper.addClass("#player", "video_only");
+    Helper.addClass("#player", "video_only");
-        Helper.addClass("#player_overlay", "video_only");
+    Helper.addClass("#player_overlay", "video_only");
-        Helper.css("#zoffbutton", "bottom", "0px");
+    Helper.css("#zoffbutton", "bottom", "0px");
-        Helper.css("#song-title", "width", "100vw");
+    Helper.css("#song-title", "width", "100vw");
+  }
+
+  M.Modal.init(document.getElementById("locked_channel"), {
+    dismissible: false
+  });
+
+  add = "https://zoff.me";
+  //if(window.location.hostname == "localhost") add = "localhost";
+  //add = "localhost";
+  socket = io.connect(
+    "" + add,
+    connection_options
+  );
+
+  if (localmode) {
+    change_offline(true, false);
+  }
+
+  socket.on("auth_required", function() {
+    M.Modal.getInstance(document.getElementById("locked_channel")).open();
+  });
+
+  document.querySelector(".channel-info-container").href =
+    "https://zoff.me/" + chan.toLowerCase();
+  document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase();
+
+  socket.on("get_list", function() {
+    socket_connected = true;
+    setTimeout(function() {
+      socket.emit("list", {
+        version: VERSION,
+        channel: chan.toLowerCase(),
+        pass: ""
+      });
+    }, 1000);
+  });
+
+  socket.on("self_ping", function() {
+    if (chan != undefined && chan.toLowerCase() != "") {
+      socket.emit("self_ping", { channel: chan.toLowerCase() });
     }
+  });
 
-    M.Modal.init(document.getElementById("locked_channel"), {
+  socket.on("viewers", function(view) {
-        dismissible: false
+    viewers = view;
-    });
 
-    add = "https://zoff.me";
+    if (song_title !== undefined) Player.getTitle(song_title, viewers);
-    //if(window.location.hostname == "localhost") add = "localhost";
+  });
-    //add = "localhost";
-    socket = io.connect(''+add, connection_options);
 
-    if(localmode) {
+  Player.loadPlayer();
-        change_offline(true, false);
+  setup_host_initialization();
-    }
+  setup_now_playing_listener();
+  setup_list_listener();
 
-    socket.on('auth_required', function() {
+  if (autoplay) {
-        M.Modal.getInstance(document.getElementById("locked_channel")).open();
+    startWaitTimerPlay();
-    });
+  }
 
-    document.querySelector(".channel-info-container").href = "https://zoff.me/" + chan.toLowerCase();
+  List.calculate_song_heights();
-    document.querySelector(".channel-title").innerText = "/" + chan.toLowerCase();
 
-    socket.on("get_list", function() {
+  window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
-        socket_connected = true;
+  socket.on("toast", toast);
-        setTimeout(function(){socket.emit('list', {version: VERSION, channel: chan.toLowerCase(), pass: ''});},1000);
-    });
 
-    socket.on("self_ping", function() {
+  Playercontrols.initSlider();
-        if(chan != undefined && chan.toLowerCase() != "") {
+  document
-            socket.emit("self_ping", {channel: chan.toLowerCase()});
+    .getElementById("playpause")
-        }
+    .addEventListener("click", Playercontrols.play_pause);
-    });
+  window.setVolume = setVolume;
+  //Helper.css("#controls", "background-color", color);
 
-    socket.on("viewers", function(view) {
+  document.querySelector("body").style.backgroundColor = color;
-        viewers = view;
+  if (embedOptions.hasOwnProperty("control") && embedOptions.control) {
-
+    Hostcontroller.change_enabled(true);
-        if(song_title !== undefined)
+  } else {
-        Player.getTitle(song_title, viewers);
+    Hostcontroller.change_enabled(false);
-    });
+  }
-
-    Player.loadPlayer();
-    setup_host_initialization();
-    setup_now_playing_listener();
-    setup_list_listener();
-
-    if(autoplay) {
-        startWaitTimerPlay();
-    }
-
-    List.calculate_song_heights();
-
-    window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
-    socket.on("toast", toast);
-
-    Playercontrols.initSlider();
-    document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause);
-    window.setVolume = setVolume;
-    //Helper.css("#controls", "background-color", color);
-
-    document.querySelector("body").style.backgroundColor = color;
-    if(embedOptions.hasOwnProperty("control") && embedOptions.control) {
-        Hostcontroller.change_enabled(true);
-    } else {
-        Hostcontroller.change_enabled(false);
-    }
 });
 
-window.addEventListener("resize", function(){
+window.addEventListener("resize", function() {
-    resizeFunction();
+  resizeFunction();
 });
 
-function resizePlaylistPlaying(){};
+function resizePlaylistPlaying() {}
 
 function startWaitTimerPlay() {
-    setTimeout(function() {
+  setTimeout(function() {
-        if(videoSource == "youtube") {
+    if (videoSource == "youtube") {
-            Player.player.playVideo();
+      Player.player.playVideo();
-        } else if(videoSource == "soundcloud"){
+    } else if (videoSource == "soundcloud") {
-            Player.soundcloud_player.play();
+      Player.soundcloud_player.play();
-        }
+    }
-    }, 5000);
+  }, 5000);
 }
 
 function setup_host_listener(id) {
-    socket.on(id, Hostcontroller.host_on_action);
+  socket.on(id, Hostcontroller.host_on_action);
 }
 
 function setup_host_initialization() {
-    socket.on("id", Hostcontroller.host_listener);
+  socket.on("id", Hostcontroller.host_listener);
 }
 
 function setup_now_playing_listener() {
-    socket.on("np", Player.now_playing_listener);
+  socket.on("np", Player.now_playing_listener);
 }
 
 function setup_list_listener() {
-    socket.on("channel", function(msg) {
+  socket.on("channel", function(msg) {
-        Helper.addClass(".site_loader", "hide");
+    Helper.addClass(".site_loader", "hide");
-        List.channel_function(msg);
+    List.channel_function(msg);
-    });
+  });
 }
 
 function setVolume(val) {
-    Playercontrols.visualVolume(val);
+  Playercontrols.visualVolume(val);
-    Playercontrols.setVolume(val);
+  Playercontrols.setVolume(val);
 }
 
-function updateChromecastMetadata(){}
+function updateChromecastMetadata() {}
-function loadChromecastVideo(){}
+function loadChromecastVideo() {}
 
 function toast(msg) {
-    switch(msg) {
+  switch (msg) {
-        case "suggested_thumbnail":
+    case "suggested_thumbnail":
-        if(embed) return;
+      if (embed) return;
-        msg = "The thumbnail has been suggested!";
+      msg = "The thumbnail has been suggested!";
-        break;
+      break;
-        case "faulty_start_end":
+    case "faulty_start_end":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "wait_longer":
+    case "wait_longer":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "suggested_description":
+    case "suggested_description":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "thumbnail_denied":
+    case "thumbnail_denied":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "description_denied":
+    case "description_denied":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "addedsong":
+    case "addedsong":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "addedplaylist":
+    case "addedplaylist":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "savedsettings":
+    case "savedsettings":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "wrongpass":
+    case "wrongpass":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "deleted_songs":
+    case "deleted_songs":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "shuffled":
+    case "shuffled":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "deletesong":
+    case "deletesong":
-        if(embed) return;
+      if (embed) return;
-        break;
+      break;
-        case "voted":
+    case "voted":
-        msg=Helper.rnd(["You voted!", "You vote like a boss", "Voting is the key to democracy", "May you get your song to the very top!", "I love that song! I vouch for you.", "Only you vote that good", "I like the way you vote...", "Up the video goes!", "Voted Zoff for president", "Only 999 more to go!"]);
+      msg = Helper.rnd([
-        break;
+        "You voted!",
-        case "alreadyvoted":
+        "You vote like a boss",
-        msg=Helper.rnd(["You can't vote twice on that song!", "I see you have voted on that song before", "One vote per person!", "I know you want to hear your song, but have patience!", "I'm sorry, but I can't let you vote twice, Dave."]);
+        "Voting is the key to democracy",
-        break;
+        "May you get your song to the very top!",
-        case "skip":
+        "I love that song! I vouch for you.",
-        if(embed) return;
+        "Only you vote that good",
-        break;
+        "I like the way you vote...",
-        case "listhaspass":
+        "Up the video goes!",
-        if(embed) return;
+        "Voted Zoff for president",
-        break;
+        "Only 999 more to go!"
-        case "noskip":
+      ]);
-        if(embed) return;
+      break;
-        break;
+    case "alreadyvoted":
-        case "alreadyskip":
+      msg = Helper.rnd([
-        if(embed) return;
+        "You can't vote twice on that song!",
-        break;
+        "I see you have voted on that song before",
-        case "notyetskip":
+        "One vote per person!",
-        if(embed) return;
+        "I know you want to hear your song, but have patience!",
-        break;
+        "I'm sorry, but I can't let you vote twice, Dave."
-        case "correctpass":
+      ]);
-        if(embed) return;
+      break;
-        break;
+    case "skip":
-        case "changedpass":
+      if (embed) return;
-        if(embed) return;
+      break;
-        break;
+    case "listhaspass":
-        case "suggested":
+      if (embed) return;
-        if(embed) return;
+      break;
-        break;
+    case "noskip":
-        case "alreadyplay":
+      if (embed) return;
-        if(embed) return;
+      break;
-        break;
+    case "alreadyskip":
-    }
+      if (embed) return;
-    before_toast();
+      break;
-    M.toast({html: msg, displayLength: 4000});
+    case "notyetskip":
+      if (embed) return;
+      break;
+    case "correctpass":
+      if (embed) return;
+      break;
+    case "changedpass":
+      if (embed) return;
+      break;
+    case "suggested":
+      if (embed) return;
+      break;
+    case "alreadyplay":
+      if (embed) return;
+      break;
+  }
+  before_toast();
+  M.toast({ html: msg, displayLength: 4000 });
 }
 
 function emit() {
-    if(!embed) {
+  if (!embed) {
-        lastCommand = [];
+    lastCommand = [];
-        for(var i = 0; i < arguments.length; i++) {
+    for (var i = 0; i < arguments.length; i++) {
-            lastCommand.push(arguments[i]);
+      lastCommand.push(arguments[i]);
-        }
-    }
-    if(arguments.length == 1) {
-        socket.emit(arguments[0]);
-    } else {
-        socket.emit(arguments[0], arguments[1]);
     }
+  }
+  if (arguments.length == 1) {
+    socket.emit(arguments[0]);
+  } else {
+    socket.emit(arguments[0], arguments[1]);
+  }
 }
 
-function change_offline(enabled, already_offline){
+function change_offline(enabled, already_offline) {
-    offline = enabled;
+  offline = enabled;
-    socket.emit("offline", {status: enabled, channel: chan != undefined ? chan.toLowerCase() : ""});
+  socket.emit("offline", {
-    if(!Helper.mobilecheck()) {
+    status: enabled,
-        if(document.querySelectorAll("#offline-mode").length == 1 && M.Tooltip.getInstance(document.getElementById("offline-mode"))) {
+    channel: chan != undefined ? chan.toLowerCase() : ""
-            Helper.tooltip("#offline-mode", 'destroy');
+  });
-        }
+  if (!Helper.mobilecheck()) {
+    if (
+      document.querySelectorAll("#offline-mode").length == 1 &&
+      M.Tooltip.getInstance(document.getElementById("offline-mode"))
+    ) {
+      Helper.tooltip("#offline-mode", "destroy");
     }
+  }
 
-    var mouseEnter = function(e){
+  var mouseEnter = function(e) {
-        Helper.removeClass("#seekToDuration", "hide");
+    Helper.removeClass("#seekToDuration", "hide");
-    };
+  };
 
-    var mouseLeave = function(e){
+  var mouseLeave = function(e) {
-        dragging = false;
+    dragging = false;
-        Helper.addClass("#seekToDuration", "hide");
+    Helper.addClass("#seekToDuration", "hide");
-    };
+  };
 
-    var mouseDown = function(e) {
+  var mouseDown = function(e) {
-        var acceptable = ["bar", "controls", "duration"];
+    var acceptable = ["bar", "controls", "duration"];
-        if(acceptable.indexOf(e.target.id) >= 0) {
+    if (acceptable.indexOf(e.target.id) >= 0) {
-            dragging = true;
+      dragging = true;
-        }
-    };
-
-    var mouseUp = function(e) {
-        dragging = false;
-    };
-    if(enabled){
-        Helper.addClass("#viewers", "hide");
-        Helper.removeClass(".margin-playbar", "margin-playbar");
-        Helper.addClass(".prev playbar", "margin-playbar");
-        Helper.removeClass(".prev playbar", "hide");
-
-        if(window.location.pathname != "/"){
-            document.getElementById("controls").addEventListener("mouseenter", mouseEnter, false);
-            document.getElementById("controls").addEventListener("mouseleave", mouseLeave, false);
-            document.getElementById("controls").addEventListener("mousedown", mouseDown, false);
-            document.getElementById("controls").addEventListener("mouseup", mouseUp, false);
-            document.getElementById("controls").addEventListener("mousemove", seekToMove);
-            document.getElementById("controls").addEventListener("click", seekToClick);
-
-            document.querySelector("#main_components").insertAdjacentHTML("beforeend", "<div id='seekToDuration' class='hide'>00:00/01:00</div>");
-            var controlElement = document.querySelector("#controls");
-            Helper.css("#seekToDuration", "bottom", "50px");
-            Helper.addClass("#controls", "ewresize");
-        }
-        if(full_playlist != undefined && !already_offline && full_playlist.length > 0){
-            for(var x = 0; x < full_playlist.length; x++){
-                full_playlist[x].votes = 0;
-            }
-
-            List.sortList();
-            List.populate_list(full_playlist);
-        }
     }
+  };
+
+  var mouseUp = function(e) {
+    dragging = false;
+  };
+  if (enabled) {
+    Helper.addClass("#viewers", "hide");
+    Helper.removeClass(".margin-playbar", "margin-playbar");
+    Helper.addClass(".prev playbar", "margin-playbar");
+    Helper.removeClass(".prev playbar", "hide");
+
+    if (window.location.pathname != "/") {
+      document
+        .getElementById("controls")
+        .addEventListener("mouseenter", mouseEnter, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mouseleave", mouseLeave, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mousedown", mouseDown, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mouseup", mouseUp, false);
+      document
+        .getElementById("controls")
+        .addEventListener("mousemove", seekToMove);
+      document
+        .getElementById("controls")
+        .addEventListener("click", seekToClick);
+
+      document
+        .querySelector("#main_components")
+        .insertAdjacentHTML(
+          "beforeend",
+          "<div id='seekToDuration' class='hide'>00:00/01:00</div>"
+        );
+      var controlElement = document.querySelector("#controls");
+      Helper.css("#seekToDuration", "bottom", "50px");
+      Helper.addClass("#controls", "ewresize");
+    }
+    if (
+      full_playlist != undefined &&
+      !already_offline &&
+      full_playlist.length > 0
+    ) {
+      for (var x = 0; x < full_playlist.length; x++) {
+        full_playlist[x].votes = 0;
+      }
+
+      List.sortList();
+      List.populate_list(full_playlist);
+    }
+  }
 }
 
-function before_toast(){
+function before_toast() {
-    /*if($('.toast').length > 0) {
+  /*if($('.toast').length > 0) {
     var toastElement = $('.toast').first()[0];
     var toastInstance = toastElement.M_Toast;
     toastInstance.remove();
 }*/
-M.Toast.dismissAll();
+  M.Toast.dismissAll();
-//Materialize.Toast.removeAll();
+  //Materialize.Toast.removeAll();
 }
 
-document.addEventListener("click", function(e) {
+document.addEventListener(
+  "click",
+  function(e) {
     handleEvent(e, e.target, false, "click");
-}, false);
+  },
+  false
+);
 
 addListener("click", ".channel-info-container", function(e) {
-    this.preventDefault();
+  this.preventDefault();
-    Player.pauseVideo();
+  Player.pauseVideo();
-    window.open("https://zoff.me/" + chan.toLowerCase() + "/", '_blank');
+  window.open("https://zoff.me/" + chan.toLowerCase() + "/", "_blank");
 });
 
 addListener("click", ".vote-container", function(e) {
-    var that = e;
+  var that = e;
-    var id = that.getAttribute("data-video-id");
+  var id = that.getAttribute("data-video-id");
 
-    List.vote(id, "pos");
+  List.vote(id, "pos");
 });
 
 addListener("click", ".prev_page", function(e) {
-    event.preventDefault();
+  event.preventDefault();
-    List.dynamicContentPage(-1);
+  List.dynamicContentPage(-1);
 });
 
 addListener("click", "#player_overlay", function(event) {
-    if(videoSource == "soundcloud") Playercontrols.play_pause();
+  if (videoSource == "soundcloud") Playercontrols.play_pause();
 });
 
 addListener("click", ".next_page", function(e) {
-    event.preventDefault();
+  event.preventDefault();
-    List.dynamicContentPage(1);
+  List.dynamicContentPage(1);
 });
 
-addListener("click", ".prev", function(event){
+addListener("click", ".prev", function(event) {
-    this.preventDefault();
+  this.preventDefault();
-    if(!offline) return;
+  if (!offline) return;
-    List.skip(false);
+  List.skip(false);
 });
 
-addListener("click", ".skip", function(event){
+addListener("click", ".skip", function(event) {
-    this.preventDefault();
+  this.preventDefault();
-    //if(!offline) return;
+  //if(!offline) return;
-    List.skip(true);
+  List.skip(true);
 });
 
-addListener("click", ".last_page", function(e){
+addListener("click", ".last_page", function(e) {
-    event.preventDefault();
+  event.preventDefault();
-    List.dynamicContentPage(10);
+  List.dynamicContentPage(10);
 });
 
-addListener("click", ".first_page", function(e){
+addListener("click", ".first_page", function(e) {
-    event.preventDefault();
+  event.preventDefault();
-    List.dynamicContentPage(-10);
+  List.dynamicContentPage(-10);
 });

server/public/assets/js/hostcontroller.js

@@ -1,83 +1,118 @@
 var Hostcontroller = {
+  enabled: true,
 
-    enabled: true,
+  old_id: null,
 
-    old_id: null,
+  host_listener: function(id) {
-
+    if (client) return;
-    host_listener: function(id) {
+    Helper.log(["Host-listener triggered", "Host-listener id:" + id]);
-        if(client) return;
+    if (Hostcontroller.old_id === null) Hostcontroller.old_id = id;
-        Helper.log([
+    else {
-            "Host-listener triggered",
+      socket.removeAllListeners(id);
-            "Host-listener id:" + id
+      began = false;
-        ]);
+      Hostcontroller.old_id = id;
-        if(Hostcontroller.old_id === null) Hostcontroller.old_id = id;
-        else {
-            socket.removeAllListeners(id);
-            began = false;
-            Hostcontroller.old_id = id;
-        }
-        var codeURL = window.location.protocol + "//remote."+window.location.hostname+"/"+id;
-        if(embed) {
-            if(window.parentWindow && window.parentOrigin) {
-                window.parentWindow.postMessage({type: "controller", id: id}, window.parentOrigin);
-            }
-        } else if(!embed) {
-            if(window.location.pathname == "/") return;
-            document.querySelector("#code-text").innerText = id;
-            document.querySelector("#code-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+codeURL);
-            document.querySelector("#code-link").setAttribute("href", codeURL);
-        }
-        if(!began) {
-            began = true;
-            setup_host_listener(id);
-        }
-    },
-
-    host_on_action: function(arr) {
-        if(client) return;
-        if(Hostcontroller.enabled){
-            if(arr.type == "volume") {
-                try {
-                    Playercontrols.visualVolume(arr.value);
-                    Player.setVolume(arr.value);
-                    if(scUsingWidget) Player.soundcloud_player.setVolume(arr.value);
-                    else Player.soundcloud_player.setVolume(arr.value / 100);
-                    try {
-                        localStorage.setItem("volume", arr.value);
-                    } catch(e){}
-                    Playercontrols.choose_button(arr.value, false);
-                } catch(e) {}
-            } else if(arr.type == "channel") {
-                if(window.location.pathname == "/") return;
-                socket.emit("change_channel");
-                Admin.beginning = true;
-
-                chan = arr.value.toLowerCase();
-                Helper.setHtml("#chan", Helper.upperFirst(chan));
-                var shareCodeUrl = window.location.protocol + "//client."+window.location.hostname+"/r/"+btoa(encodeURIComponent(chan.toLowerCase()));
-                document.getElementById("share-join-qr").setAttribute("src", "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl="+shareCodeUrl);
-                Helper.setHtml("#channel-name-join", "client." + window.location.hostname + "/" + encodeURIComponent(chan.toLowerCase()));
-                w_p = true;
-                var add = "";
-                //if(private_channel) add = Crypt.getCookie("_uI") + "_";
-                socket.emit("list", {version: parseInt(_VERSION), channel: add + chan.toLowerCase()});
-
-                window.history.pushState("object or string", "Title", "/"+chan.toLowerCase());
-            } else if(arr.type == "pause") {
-                Player.pauseVideo();
-            } else if(arr.type == "play") {
-                Player.playVideo();
-            } else if(arr.type == "skip") {
-                List.skip();
-            }
-        }
-    },
-
-    change_enabled:function(val){
-        if(client) return;
-        Hostcontroller.enabled = val;
-        try {
-            document.querySelector(".remote_switch_class").checked = Hostcontroller.enabled;
-        }catch(e) {}
     }
+    var codeURL =
+      window.location.protocol +
+      "//remote." +
+      window.location.hostname +
+      "/" +
+      id;
+    if (embed) {
+      if (window.parentWindow && window.parentOrigin) {
+        window.parentWindow.postMessage(
+          { type: "controller", id: id },
+          window.parentOrigin
+        );
+      }
+    } else if (!embed) {
+      if (window.location.pathname == "/") return;
+      document.querySelector("#code-text").innerText = id;
+      document
+        .querySelector("#code-qr")
+        .setAttribute(
+          "src",
+          "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl=" +
+            codeURL
+        );
+      document.querySelector("#code-link").setAttribute("href", codeURL);
+    }
+    if (!began) {
+      began = true;
+      setup_host_listener(id);
+    }
+  },
+
+  host_on_action: function(arr) {
+    if (client) return;
+    if (Hostcontroller.enabled) {
+      if (arr.type == "volume") {
+        try {
+          Playercontrols.visualVolume(arr.value);
+          Player.setVolume(arr.value);
+          if (scUsingWidget) Player.soundcloud_player.setVolume(arr.value);
+          else Player.soundcloud_player.setVolume(arr.value / 100);
+          try {
+            localStorage.setItem("volume", arr.value);
+          } catch (e) {}
+          Playercontrols.choose_button(arr.value, false);
+        } catch (e) {}
+      } else if (arr.type == "channel") {
+        if (window.location.pathname == "/") return;
+        socket.emit("change_channel");
+        Admin.beginning = true;
+
+        chan = arr.value.toLowerCase();
+        Helper.setHtml("#chan", Helper.upperFirst(chan));
+        var shareCodeUrl =
+          window.location.protocol +
+          "//client." +
+          window.location.hostname +
+          "/r/" +
+          btoa(encodeURIComponent(chan.toLowerCase()));
+        document
+          .getElementById("share-join-qr")
+          .setAttribute(
+            "src",
+            "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl=" +
+              shareCodeUrl
+          );
+        Helper.setHtml(
+          "#channel-name-join",
+          "client." +
+            window.location.hostname +
+            "/" +
+            encodeURIComponent(chan.toLowerCase())
+        );
+        w_p = true;
+        var add = "";
+        //if(private_channel) add = Crypt.getCookie("_uI") + "_";
+        socket.emit("list", {
+          version: parseInt(_VERSION),
+          channel: add + chan.toLowerCase()
+        });
+
+        window.history.pushState(
+          "object or string",
+          "Title",
+          "/" + chan.toLowerCase()
+        );
+      } else if (arr.type == "pause") {
+        Player.pauseVideo();
+      } else if (arr.type == "play") {
+        Player.playVideo();
+      } else if (arr.type == "skip") {
+        List.skip();
+      }
+    }
+  },
+
+  change_enabled: function(val) {
+    if (client) return;
+    Hostcontroller.enabled = val;
+    try {
+      document.querySelector(".remote_switch_class").checked =
+        Hostcontroller.enabled;
+    } catch (e) {}
+  }
 };

server/public/assets/js/mobileremote.js

@@ -1,60 +1,89 @@
 var Mobile_remote = {
-	id: "",
+  id: "",
 
-	get_input: function(value) {
+  get_input: function(value) {
-		if(Mobile_remote.id === "") {
+    if (Mobile_remote.id === "") {
-			Mobile_remote.set_id(value.toLowerCase());
+      Mobile_remote.set_id(value.toLowerCase());
-		} else {
+    } else {
-			Mobile_remote.set_channel(value.toLowerCase());
+      Mobile_remote.set_channel(value.toLowerCase());
-		}
+    }
-	},
+  },
 
-	set_id: function(id) {
+  set_id: function(id) {
-		Mobile_remote.id = id;
+    Mobile_remote.id = id;
-		document.getElementById("pausebutton_remote").removeAttribute("disabled");
+    document.getElementById("pausebutton_remote").removeAttribute("disabled");
-		document.getElementById("skipbutton_remote").removeAttribute("disabled", false);
+    document
-		document.getElementById("playbutton_remote").removeAttribute("disabled", false);
+      .getElementById("skipbutton_remote")
-		document.getElementById("skipbutton_remote").removeAttribute("disabled", false);
+      .removeAttribute("disabled", false);
-		document.getElementById("remote_channel").value = "";
+    document
-		document.getElementById("remote_channel").setAttribute("placeholder", "Change channel");
+      .getElementById("playbutton_remote")
-		document.getElementById("remote_header").innerText = "Controlling " + id;
+      .removeAttribute("disabled", false);
-		Helper.css("#volume-control-remote", "display", "inline-block");
+    document
-		document.querySelector(".slider-vol-mobile").setAttribute("style", "display: inline-block !important");
+      .getElementById("skipbutton_remote")
-	},
+      .removeAttribute("disabled", false);
+    document.getElementById("remote_channel").value = "";
+    document
+      .getElementById("remote_channel")
+      .setAttribute("placeholder", "Change channel");
+    document.getElementById("remote_header").innerText = "Controlling " + id;
+    Helper.css("#volume-control-remote", "display", "inline-block");
+    document
+      .querySelector(".slider-vol-mobile")
+      .setAttribute("style", "display: inline-block !important");
+  },
 
-	set_channel: function(channel_name) {
+  set_channel: function(channel_name) {
-		socket.emit("id", {id: Mobile_remote.id, type: "channel", value: channel_name});
+    socket.emit("id", {
-	},
+      id: Mobile_remote.id,
+      type: "channel",
+      value: channel_name
+    });
+  },
 
-	play_remote: function() {
+  play_remote: function() {
-		socket.emit("id", {id: Mobile_remote.id, type: "play", value: "mock"});
+    socket.emit("id", { id: Mobile_remote.id, type: "play", value: "mock" });
-	},
+  },
 
-	pause_remote: function() {
+  pause_remote: function() {
-		socket.emit("id", {id: Mobile_remote.id, type: "pause", value: "mock"});
+    socket.emit("id", { id: Mobile_remote.id, type: "pause", value: "mock" });
-	},
+  },
 
-	skip_remote: function() {
+  skip_remote: function() {
-		socket.emit("id", {id: Mobile_remote.id, type: "skip", value: "mock"});
+    socket.emit("id", { id: Mobile_remote.id, type: "skip", value: "mock" });
-	},
+  },
 
-	initiate_volume: function() {
+  initiate_volume: function() {
-		var vol = 100;
+    var vol = 100;
-        document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "<div class='volume-slid-remote'></div>");
+    document
-        document.getElementById("volume-control-remote").insertAdjacentHTML("beforeend", "<div class='volume-handle-remote'></div>");
+      .getElementById("volume-control-remote")
-            Helper.css(".volume-slid-remote", "width", vol + "%");
+      .insertAdjacentHTML(
-            Helper.css(".volume-handle-remote", "left", "calc(" + vol + "% - 1px)");
+        "beforeend",
-        document.getElementById("volume-control-remote").addEventListener("touchstart", function(e) {
+        "<div class='volume-slid-remote'></div>"
-            e.preventDefault();
+      );
-            Playercontrols.dragMouseDown(e);
+    document
-        }, false);
+      .getElementById("volume-control-remote")
-
+      .insertAdjacentHTML(
-        document.getElementById("volume-control-remote").addEventListener("touchmove", function(e) {
+        "beforeend",
-            e.preventDefault();
+        "<div class='volume-handle-remote'></div>"
-            Playercontrols.elementDrag(e);
+      );
-        }, false);
+    Helper.css(".volume-slid-remote", "width", vol + "%");
-
+    Helper.css(".volume-handle-remote", "left", "calc(" + vol + "% - 1px)");
-
+    document.getElementById("volume-control-remote").addEventListener(
-	}
+      "touchstart",
+      function(e) {
+        e.preventDefault();
+        Playercontrols.dragMouseDown(e);
+      },
+      false
+    );
 
+    document.getElementById("volume-control-remote").addEventListener(
+      "touchmove",
+      function(e) {
+        e.preventDefault();
+        Playercontrols.elementDrag(e);
+      },
+      false
+    );
+  }
 };

server/public/assets/js/playercontrols.js

@@ -1,466 +1,521 @@
 var Playercontrols = {
+  stopInterval: false,
 
-    stopInterval: false,
+  initYoutubeControls: function() {
+    Playercontrols.initControls();
+  },
 
+  initControls: function() {
+    document
+      .getElementById("volume-button")
+      .addEventListener("click", Playercontrols.mute_video);
+    document
+      .getElementById("playpause")
+      .addEventListener("click", Playercontrols.play_pause);
+    document
+      .getElementById("volume-button-overlay")
+      .addEventListener("click", Playercontrols.mute_video);
+    document
+      .getElementById("playpause-overlay")
+      .addEventListener("click", Playercontrols.play_pause);
+    document
+      .getElementById("fullscreen")
+      .addEventListener("click", Playercontrols.fullscreen);
+  },
 
-    initYoutubeControls: function() {
+  initSlider: function() {
-        Playercontrols.initControls();
+    try {
-    },
+      vol = Crypt.get_volume();
-
+    } catch (e) {
-    initControls: function() {
+      vol = 100;
-        document.getElementById("volume-button").addEventListener("click", Playercontrols.mute_video);
-        document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause);
-        document.getElementById("volume-button-overlay").addEventListener("click", Playercontrols.mute_video);
-        document.getElementById("playpause-overlay").addEventListener("click", Playercontrols.play_pause);
-        document.getElementById("fullscreen").addEventListener("click", Playercontrols.fullscreen);
-    },
-
-    initSlider: function() {
-        try {
-
-            vol = (Crypt.get_volume());
-
-        } catch(e){
-            vol = 100;
-        }
-        try {
-            if(document.getElementsByClassName("volume-slid")) {
-                document.getElementById("volume").innerHTML = "";
-            }
-        }catch(e){}
-        if((Helper.mobilecheck() || slider_type == "vertical") && !embed) {
-            //slider_values.orientation = "vertical";
-            if(!document.querySelector(".volume-container").classList.contains("hide")) {
-                Helper.toggleClass(".volume-container", "hide");
-            }
-        }
-        document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-slid " + slider_type + "'></div>");
-        document.getElementById("volume").insertAdjacentHTML("beforeend", "<div class='volume-handle " + slider_type + "'></div>");
-        if(slider_type != "vertical") {
-            Helper.removeClass("#volume", "vertical");
-            Helper.css(".volume-slid", "width", vol + "%");
-            Helper.css(".volume-handle", "left", "calc(" + vol + "% - 1px)");
-        } else {
-            Helper.addClass("#volume", "vertical");
-            Helper.css(".volume-slid", "height", vol + "%");
-            Helper.css(".volume-handle", "bottom", "calc(" + vol + "% - 1px)");
-
-        }
-        Playercontrols.choose_button(vol, false);
-        //document.getElementsByClassName("volume-handle")[0].onmousedown = Playercontrols.dragMouseDown;
-        //Playercontrols.visualVolume(slider_values);
-        //document.getElementsByClassName("volume-slid")[0].onmousedown = Playercontrols.dragMouseDown;
-        document.getElementById("volume").onmousedown = function(e) {
-            Playercontrols.dragMouseDown(e, "player");
-        }
-        if(!Helper.mobilecheck()) {
-            document.getElementById("volume").onclick = function(e) {
-                Playercontrols.elementDrag(e, "player");
-                Playercontrols.closeDragElement("player");
-            }
-        }
-        document.getElementById("volume").addEventListener("touchstart", function(e) {
-            e.preventDefault();
-            Playercontrols.dragMouseDown(e, "player");
-        }, false);
-
-    },
-
-    dragMouseDown: function(e, element) {
-        e = e || window.event;
-        // get the mouse cursor position at startup:
-        document.onmouseup = function() {
-            Playercontrols.closeDragElement(element);
-        }
-        document.getElementById("volume").addEventListener("touchend", function() {
-            Playercontrols.closeDragElement(element);
-        }, false);
-        // call a function whenever the cursor moves:
-        document.onmousemove = function(e) {
-            Playercontrols.elementDrag(e, element);
-        }
-        document.getElementById("volume").addEventListener("touchmove", function(e) {
-            e.preventDefault();
-            Playercontrols.elementDrag(e, element);
-        }, false);
-    },
-
-    elementDrag: function(e, element) {
-        var elmnt;
-        var cmp_elmnt;
-        var slid_elmnt;
-        if(element == "player") {
-            elmnt = document.getElementsByClassName("volume-handle")[0];
-            cmp_elmnt = document.getElementById("volume");
-            slid_elmnt = document.getElementsByClassName("volume-slid")[0];
-        } else {
-            elmnt = document.getElementsByClassName("volume-handle-remote")[0];
-            cmp_elmnt = document.getElementById("volume-control-remote");
-            slid_elmnt = document.getElementsByClassName("volume-slid-remote")[0];
-        }
-        e = e || window.event;
-
-        var pos3 = e.clientX;
-        var pos4 = e.clientY;
-        if(pos3 == undefined) {
-            pos3 = e.touches[0].clientX;
-        }
-        if(pos4 == undefined) {
-            pos4 = e.touches[0].clientY;
-        }
-        var volume = 0;
-        if(slider_type != "vertical" || element != "player") {
-            if(elmnt.className.indexOf("ui-state-active") == -1) {
-                elmnt.className += " ui-state-active";
-            }
-            var pos = pos3 - cmp_elmnt.offsetLeft;
-            if(pos > -1 && pos < cmp_elmnt.offsetWidth + 1) {
-                elmnt.style.left = pos + "px";
-                volume = pos / cmp_elmnt.offsetWidth;
-            } else if(pos < 1) {
-                elmnt.style.left = 0 + "px";
-                volume = 0;
-            } else {
-                elmnt.style.left = cmp_elmnt.offsetWidth + "px";
-                volume = 1;
-            }
-            slid_elmnt.style.width = volume * 100 + "%";
-            if(element == "player") Playercontrols.setVolume(volume * 100);
-            else socket.emit("id", {id: Mobile_remote.id, type: "volume", value: volume * 100});
-        } else {
-            var pos = pos4 - cmp_elmnt.offsetTop;
-            var pos0 = window.innerHeight - pos - 14;
-
-            if(pos0 > 64 && pos0 < 164) {
-                volume = (pos0 - 64) / 100;
-            } else if(pos0 < 65) {
-                volume = 0;
-            } else {
-                volume = 1;
-            }
-            slid_elmnt.style.height = volume * 100 + "%";
-            Playercontrols.setVolume(volume * 100);
-
-        }
-        try{Crypt.set_volume(volume * 100);}catch(e){
-        }
-    },
-
-    closeDragElement: function(element) {
-        /* stop moving when mouse button is released:*/
-        var elmnt;
-        if(element == "player") {
-            elmnt = document.getElementsByClassName("volume-handle")[0];
-        } else {
-            elmnt = document.getElementsByClassName("volume-handle-remote")[0];
-        }
-        if(elmnt.className.indexOf("ui-state-active") > -1) {
-            setTimeout(function(){
-                elmnt.classList.remove("ui-state-active");
-            }, 1);
-        }
-        document.onmouseup = null;
-        document.onmousemove = null;
-        if(element == "player") {
-            document.getElementById("volume").removeEventListener("touchmove", function(e) {
-                e.preventDefault();
-                Playercontrols.elementDrag(e, element);
-            }, false);
-            document.getElementById("volume").removeEventListener("touchend", function() {
-                Playercontrols.closeDragElement(element);
-            }, false);
-        } else {
-            document.getElementById("volume-control-remote").removeEventListener("touchmove", function(e) {
-                e.preventDefault();
-                Playercontrols.elementDrag(e);
-            }, false);
-            document.getElementById("volume-control-remote").removeEventListener("touchend", function() {
-                Playercontrols.closeDragElement();
-            }, false);
-        }
-    },
-
-    fullscreen: function() {
-        var playerElement;
-        if(fireplace_initiated) {
-            playerElement = document.getElementById("fireplace_player");
-        } else {
-            playerElement = document.getElementById("player");
-        }
-
-        var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
-        if (requestFullScreen) {
-            requestFullScreen.bind(playerElement)();
-        }
-    },
-
-    play_pause: function() {
-        if(!chromecastAvailable){
-            if(videoSource == "soundcloud") {
-                if(scUsingWidget) {
-                    Player.soundcloud_player.isPaused(function(playing) {
-                        playing = !playing;
-                        if(!playing) {
-                            Player.playVideo();
-                        } else {
-                            Player.pauseVideo();
-                        }
-                        was_stopped = true;
-                    });
-                } else {
-                    if(!Player.soundcloud_player.isPlaying()) {
-                        Player.playVideo();
-                    } else {
-                        Player.pauseVideo();
-                    }
-                }
-            } else {
-                if(Player.player.getPlayerState() == YT.PlayerState.PLAYING)
-                {
-                    Player.pauseVideo();
-                    if(Helper.mobilecheck() && !window.MSStream && !embed){
-                        //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
-                        //document.getElementById("player").style.display = "none";
-                        Helper.css("#player", "display", "none");
-                        Helper.toggleClass(".video-container", "click-through");
-                        Helper.toggleClass(".page-footer", "padding-bottom-extra");
-                    }
-                } else if(Player.player.getPlayerState() == YT.PlayerState.PAUSED || Player.player.getPlayerState() === YT.PlayerState.ENDED || (Player.player.getPlayerState() === YT.PlayerState.CUED)){
-                    Player.playVideo();
-                    //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
-                    if(Helper.mobilecheck() && !window.MSStream){
-                        //document.getElementById("player").style.display = "block";
-                        Helper.css("#player", "display", "block");
-                        Helper.toggleClass(".video-container", "click-through");
-                        Helper.toggleClass(".page-footer", "padding-bottom-extra");
-                    }
-                }
-            }
-        } else {
-            Playercontrols.play_pause_show();
-        }
-    },
-
-    play_pause_show: function() {
-        if(chromecastAvailable){
-            if(document.getElementById("play").classList.contains("hide")){
-                Player.pauseVideo();
-            } else if(document.getElementById("pause").classList.contains("hide")){
-                Player.playVideo();
-            }
-        } else {
-
-            if(!document.getElementById("pause").classList.contains("hide")) {
-                Helper.toggleClass("#pause", "hide");
-                Helper.toggleClass("#pause-overlay", "hide");
-            }
-            if(document.getElementById("play").classList.contains("hide")) {
-                Helper.toggleClass("#play", "hide");
-                Helper.toggleClass("#play-overlay", "hide");
-            }
-        }
-    },
-
-    settings: function() {
-        Helper.toggleClass("#qS", "hide");
-    },
-
-    changeQuality: function(wantedQ) {
-        if(Player.player.getPlaybackQuality != wantedQ) {
-            Player.player.setPlaybackQuality(wantedQ);
-            Player.player.getPlaybackQuality();
-        }
-        Helper.toggleClass("#qS", "hide");
-    },
-
-    mute_video: function() {
-        if(Helper.mobilecheck() || slider_type == "vertical") {
-            Helper.toggleClass(".volume-container", "hide");
-        } else {
-            if(!Player.player.isMuted()) {
-                if(chromecastAvailable) castSession.sendMessage("urn:x-cast:zoff.me", {type: "mute"});
-                Playercontrols.choose_button(0, true);
-                Player.player.mute();
-            } else {
-                if(chromecastAvailable)castSession.sendMessage("urn:x-cast:zoff.me", {type: "unMute"});
-                Player.player.unMute();
-                Playercontrols.choose_button(Player.player.getVolume(), false);
-            }
-        }
-    },
-
-    setVolume: function(vol) {
-        Player.setVolume(vol);
-        if(scUsingWidget) Player.soundcloud_player.setVolume(vol);
-        else Player.soundcloud_player.setVolume(vol / 100);
-        Playercontrols.choose_button(vol, false);
-        if(Player.player.isMuted())
-        Player.player.unMute();
-    },
-
-    choose_button: function(vol, mute) {
-        if(!mute){
-            if(vol >= 0 && vol <= 33) {
-                if(!document.getElementById("v-full").classList.contains("hide")) {
-                    Helper.toggleClass("#v-full", "hide");
-                    Helper.toggleClass("#v-full-overlay", "hide");
-                }
-                if(!document.getElementById("v-medium").classList.contains("hide")) {
-                    Helper.toggleClass("#v-medium", "hide");
-                    Helper.toggleClass("#v-medium-overlay", "hide");
-                }
-                if(document.getElementById("v-low").classList.contains("hide")) {
-                    Helper.toggleClass("#v-low", "hide");
-                    Helper.toggleClass("#v-low-overlay", "hide");
-                }
-                if(!document.getElementById("v-mute").classList.contains("hide")) {
-                    Helper.toggleClass("#v-mute", "hide");
-                    Helper.toggleClass("#v-mute-overlay", "hide");
-                }
-            } else if(vol >= 34 && vol <= 66) {
-                if(!document.getElementById("v-full").classList.contains("hide")) {
-                    Helper.toggleClass("#v-full", "hide");
-                    Helper.toggleClass("#v-full-overlay", "hide");
-                }
-                if(document.getElementById("v-medium").classList.contains("hide")) {
-                    Helper.toggleClass("#v-medium", "hide");
-                    Helper.toggleClass("#v-medium-overlay", "hide");
-                }
-                if(!document.getElementById("v-low").classList.contains("hide")) {
-                    Helper.toggleClass("#v-low", "hide");
-                    Helper.toggleClass("#v-low-overlay", "hide");
-                }
-                if(!document.getElementById("v-mute").classList.contains("hide")) {
-                    Helper.toggleClass("#v-mute", "hide");
-                    Helper.toggleClass("#v-mute-overlay", "hide");
-                }
-            } else if(vol >= 67 && vol <= 100) {
-                if(document.getElementById("v-full").classList.contains("hide")) {
-                    Helper.toggleClass("#v-full", "hide");
-                    Helper.toggleClass("#v-full-overlay", "hide");
-                }
-                if(!document.getElementById("v-medium").classList.contains("hide")) {
-                    Helper.toggleClass("#v-medium", "hide");
-                    Helper.toggleClass("#v-medium-overlay", "hide");
-                }
-                if(!document.getElementById("v-low").classList.contains("hide")) {
-                    Helper.toggleClass("#v-low", "hide");
-                    Helper.toggleClass("#v-low-overlay", "hide");
-                }
-                if(!document.getElementById("v-mute").classList.contains("hide")) {
-                    Helper.toggleClass("#v-mute", "hide");
-                    Helper.toggleClass("#v-mute-overlay", "hide");
-                }
-            }
-        } else {
-            if(!document.getElementById("v-full").classList.contains("hide")) {
-                Helper.toggleClass("#v-full", "hide");
-                Helper.toggleClass("#v-full-overlay", "hide");
-            }
-            if(!document.getElementById("v-medium").classList.contains("hide")) {
-                Helper.toggleClass("#v-medium", "hide");
-                Helper.toggleClass("#v-medium-overlay", "hide");
-            }
-            if(!document.getElementById("v-low").classList.contains("hide")) {
-                Helper.toggleClass("#v-low", "hide");
-                Helper.toggleClass("#v-low-overlay", "hide");
-            }
-            if(document.getElementById("v-mute").classList.contains("hide")) {
-                Helper.toggleClass("#v-mute", "hide");
-                Helper.toggleClass("#v-mute-overlay", "hide");
-            }
-        }
-    },
-
-    playPause: function() {
-        if(videoSource == "soundcloud") {
-            if(scUsingWidget) {
-                Player.soundcloud_player.isPaused(function(playing) {
-                    playing = !playing;
-                    if(!playing) {
-                        Helper.addClass("#play", "hide");
-                        Helper.removeClass("#pause", "hide");
-                        Player.soundcloud_player.play();
-                    } else {
-                        Helper.removeClass("#play", "hide");
-                        Helper.addClass("#pause", "hide");
-                        Player.soundcloud_player.pause();
-                    }
-                })
-            } else {
-                if(!Player.soundcloud_player.isPlaying()) {
-                    Helper.addClass("#play", "hide");
-                    Helper.removeClass("#pause", "hide");
-                    Player.soundcloud_player.play();
-                } else {
-                    Helper.removeClass("#play", "hide");
-                    Helper.addClass("#pause", "hide");
-                    Player.soundcloud_player.pause();
-                }
-            }
-        } else {
-            state = Player.player.getPlayerState();
-            button = document.getElementById("playpause");
-            if(state == YT.PlayerState.PLAYING) {
-                Player.pauseVideo();
-            } else if(state == YT.PlayerState.PAUSED) {
-                Player.playVideo();
-            }
-        }
-    },
-
-    visualVolume: function(val) {
-        var elmnt = document.getElementsByClassName("volume-handle")[0];
-        var cmp_elmnt = document.getElementById("volume");
-        var slid_elmnt = document.getElementsByClassName("volume-slid")[0];
-
-        if(slider_type != "vertical") {
-            var pos = (cmp_elmnt.offsetWidth / 100) * val;
-            var volume = 0;
-            //var pos = pos3 - cmp_elmnt.offsetLeft;
-            if(pos > -1 && pos < cmp_elmnt.offsetWidth + 1) {
-                elmnt.style.left = pos + "px";
-                volume = pos / cmp_elmnt.offsetWidth;
-            } else if(pos < 1) {
-                elmnt.style.left = 0 + "px";
-                volume = 0;
-            } else {
-                elmnt.style.left = cmp_elmnt.offsetWidth + "px";
-                volume = 1;
-            }
-
-            slid_elmnt.style.width = volume * 100 + "%";
-            Playercontrols.setVolume(volume * 100);
-        } else {
-            var pos = val;
-            var pos0 = window.innerHeight - pos - 14;
-            var volume = 0;
-            if(pos0 > 64 && pos0 < 164) {
-                volume = (pos0 - 64) / 100;
-            } else if(pos0 < 65) {
-                volume = 0;
-            } else {
-                volume = 1;
-            }
-            slid_elmnt.style.height = volume * 100 + "%";
-            Playercontrols.setVolume(volume * 100);
-        }
-    },
-
-    volumeOptions: function() {
-        if(!chromecastAvailable) {
-            if(Player.player.isMuted()) {
-                Player.player.unMute();
-                vol = Player.player.getVolume();
-                Playercontrols.visualVolume(Player.player.getVolume());
-            } else {
-                Player.player.mute();
-                Playercontrols.visualVolume(0);
-            }
-        }
-    },
-
-    hoverMute: function(foo) {
-        vol = Player.player.getVolume();
     }
+    try {
+      if (document.getElementsByClassName("volume-slid")) {
+        document.getElementById("volume").innerHTML = "";
+      }
+    } catch (e) {}
+    if ((Helper.mobilecheck() || slider_type == "vertical") && !embed) {
+      //slider_values.orientation = "vertical";
+      if (
+        !document.querySelector(".volume-container").classList.contains("hide")
+      ) {
+        Helper.toggleClass(".volume-container", "hide");
+      }
+    }
+    document
+      .getElementById("volume")
+      .insertAdjacentHTML(
+        "beforeend",
+        "<div class='volume-slid " + slider_type + "'></div>"
+      );
+    document
+      .getElementById("volume")
+      .insertAdjacentHTML(
+        "beforeend",
+        "<div class='volume-handle " + slider_type + "'></div>"
+      );
+    if (slider_type != "vertical") {
+      Helper.removeClass("#volume", "vertical");
+      Helper.css(".volume-slid", "width", vol + "%");
+      Helper.css(".volume-handle", "left", "calc(" + vol + "% - 1px)");
+    } else {
+      Helper.addClass("#volume", "vertical");
+      Helper.css(".volume-slid", "height", vol + "%");
+      Helper.css(".volume-handle", "bottom", "calc(" + vol + "% - 1px)");
+    }
+    Playercontrols.choose_button(vol, false);
+    //document.getElementsByClassName("volume-handle")[0].onmousedown = Playercontrols.dragMouseDown;
+    //Playercontrols.visualVolume(slider_values);
+    //document.getElementsByClassName("volume-slid")[0].onmousedown = Playercontrols.dragMouseDown;
+    document.getElementById("volume").onmousedown = function(e) {
+      Playercontrols.dragMouseDown(e, "player");
+    };
+    if (!Helper.mobilecheck()) {
+      document.getElementById("volume").onclick = function(e) {
+        Playercontrols.elementDrag(e, "player");
+        Playercontrols.closeDragElement("player");
+      };
+    }
+    document.getElementById("volume").addEventListener(
+      "touchstart",
+      function(e) {
+        e.preventDefault();
+        Playercontrols.dragMouseDown(e, "player");
+      },
+      false
+    );
+  },
+
+  dragMouseDown: function(e, element) {
+    e = e || window.event;
+    // get the mouse cursor position at startup:
+    document.onmouseup = function() {
+      Playercontrols.closeDragElement(element);
+    };
+    document.getElementById("volume").addEventListener(
+      "touchend",
+      function() {
+        Playercontrols.closeDragElement(element);
+      },
+      false
+    );
+    // call a function whenever the cursor moves:
+    document.onmousemove = function(e) {
+      Playercontrols.elementDrag(e, element);
+    };
+    document.getElementById("volume").addEventListener(
+      "touchmove",
+      function(e) {
+        e.preventDefault();
+        Playercontrols.elementDrag(e, element);
+      },
+      false
+    );
+  },
+
+  elementDrag: function(e, element) {
+    var elmnt;
+    var cmp_elmnt;
+    var slid_elmnt;
+    if (element == "player") {
+      elmnt = document.getElementsByClassName("volume-handle")[0];
+      cmp_elmnt = document.getElementById("volume");
+      slid_elmnt = document.getElementsByClassName("volume-slid")[0];
+    } else {
+      elmnt = document.getElementsByClassName("volume-handle-remote")[0];
+      cmp_elmnt = document.getElementById("volume-control-remote");
+      slid_elmnt = document.getElementsByClassName("volume-slid-remote")[0];
+    }
+    e = e || window.event;
+
+    var pos3 = e.clientX;
+    var pos4 = e.clientY;
+    if (pos3 == undefined) {
+      pos3 = e.touches[0].clientX;
+    }
+    if (pos4 == undefined) {
+      pos4 = e.touches[0].clientY;
+    }
+    var volume = 0;
+    if (slider_type != "vertical" || element != "player") {
+      if (elmnt.className.indexOf("ui-state-active") == -1) {
+        elmnt.className += " ui-state-active";
+      }
+      var pos = pos3 - cmp_elmnt.offsetLeft;
+      if (pos > -1 && pos < cmp_elmnt.offsetWidth + 1) {
+        elmnt.style.left = pos + "px";
+        volume = pos / cmp_elmnt.offsetWidth;
+      } else if (pos < 1) {
+        elmnt.style.left = 0 + "px";
+        volume = 0;
+      } else {
+        elmnt.style.left = cmp_elmnt.offsetWidth + "px";
+        volume = 1;
+      }
+      slid_elmnt.style.width = volume * 100 + "%";
+      if (element == "player") Playercontrols.setVolume(volume * 100);
+      else
+        socket.emit("id", {
+          id: Mobile_remote.id,
+          type: "volume",
+          value: volume * 100
+        });
+    } else {
+      var pos = pos4 - cmp_elmnt.offsetTop;
+      var pos0 = window.innerHeight - pos - 14;
+
+      if (pos0 > 64 && pos0 < 164) {
+        volume = (pos0 - 64) / 100;
+      } else if (pos0 < 65) {
+        volume = 0;
+      } else {
+        volume = 1;
+      }
+      slid_elmnt.style.height = volume * 100 + "%";
+      Playercontrols.setVolume(volume * 100);
+    }
+    try {
+      Crypt.set_volume(volume * 100);
+    } catch (e) {}
+  },
+
+  closeDragElement: function(element) {
+    /* stop moving when mouse button is released:*/
+    var elmnt;
+    if (element == "player") {
+      elmnt = document.getElementsByClassName("volume-handle")[0];
+    } else {
+      elmnt = document.getElementsByClassName("volume-handle-remote")[0];
+    }
+    if (elmnt.className.indexOf("ui-state-active") > -1) {
+      setTimeout(function() {
+        elmnt.classList.remove("ui-state-active");
+      }, 1);
+    }
+    document.onmouseup = null;
+    document.onmousemove = null;
+    if (element == "player") {
+      document.getElementById("volume").removeEventListener(
+        "touchmove",
+        function(e) {
+          e.preventDefault();
+          Playercontrols.elementDrag(e, element);
+        },
+        false
+      );
+      document.getElementById("volume").removeEventListener(
+        "touchend",
+        function() {
+          Playercontrols.closeDragElement(element);
+        },
+        false
+      );
+    } else {
+      document.getElementById("volume-control-remote").removeEventListener(
+        "touchmove",
+        function(e) {
+          e.preventDefault();
+          Playercontrols.elementDrag(e);
+        },
+        false
+      );
+      document.getElementById("volume-control-remote").removeEventListener(
+        "touchend",
+        function() {
+          Playercontrols.closeDragElement();
+        },
+        false
+      );
+    }
+  },
+
+  fullscreen: function() {
+    var playerElement;
+    if (fireplace_initiated) {
+      playerElement = document.getElementById("fireplace_player");
+    } else {
+      playerElement = document.getElementById("player");
+    }
+
+    var requestFullScreen =
+      playerElement.requestFullScreen ||
+      playerElement.mozRequestFullScreen ||
+      playerElement.webkitRequestFullScreen;
+    if (requestFullScreen) {
+      requestFullScreen.bind(playerElement)();
+    }
+  },
+
+  play_pause: function() {
+    if (!chromecastAvailable) {
+      if (videoSource == "soundcloud") {
+        if (scUsingWidget) {
+          Player.soundcloud_player.isPaused(function(playing) {
+            playing = !playing;
+            if (!playing) {
+              Player.playVideo();
+            } else {
+              Player.pauseVideo();
+            }
+            was_stopped = true;
+          });
+        } else {
+          if (!Player.soundcloud_player.isPlaying()) {
+            Player.playVideo();
+          } else {
+            Player.pauseVideo();
+          }
+        }
+      } else {
+        if (Player.player.getPlayerState() == YT.PlayerState.PLAYING) {
+          Player.pauseVideo();
+          if (Helper.mobilecheck() && !window.MSStream && !embed) {
+            //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
+            //document.getElementById("player").style.display = "none";
+            Helper.css("#player", "display", "none");
+            Helper.toggleClass(".video-container", "click-through");
+            Helper.toggleClass(".page-footer", "padding-bottom-extra");
+          }
+        } else if (
+          Player.player.getPlayerState() == YT.PlayerState.PAUSED ||
+          Player.player.getPlayerState() === YT.PlayerState.ENDED ||
+          Player.player.getPlayerState() === YT.PlayerState.CUED
+        ) {
+          Player.playVideo();
+          //if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
+          if (Helper.mobilecheck() && !window.MSStream) {
+            //document.getElementById("player").style.display = "block";
+            Helper.css("#player", "display", "block");
+            Helper.toggleClass(".video-container", "click-through");
+            Helper.toggleClass(".page-footer", "padding-bottom-extra");
+          }
+        }
+      }
+    } else {
+      Playercontrols.play_pause_show();
+    }
+  },
+
+  play_pause_show: function() {
+    if (chromecastAvailable) {
+      if (document.getElementById("play").classList.contains("hide")) {
+        Player.pauseVideo();
+      } else if (document.getElementById("pause").classList.contains("hide")) {
+        Player.playVideo();
+      }
+    } else {
+      if (!document.getElementById("pause").classList.contains("hide")) {
+        Helper.toggleClass("#pause", "hide");
+        Helper.toggleClass("#pause-overlay", "hide");
+      }
+      if (document.getElementById("play").classList.contains("hide")) {
+        Helper.toggleClass("#play", "hide");
+        Helper.toggleClass("#play-overlay", "hide");
+      }
+    }
+  },
+
+  settings: function() {
+    Helper.toggleClass("#qS", "hide");
+  },
+
+  changeQuality: function(wantedQ) {
+    if (Player.player.getPlaybackQuality != wantedQ) {
+      Player.player.setPlaybackQuality(wantedQ);
+      Player.player.getPlaybackQuality();
+    }
+    Helper.toggleClass("#qS", "hide");
+  },
+
+  mute_video: function() {
+    if (Helper.mobilecheck() || slider_type == "vertical") {
+      Helper.toggleClass(".volume-container", "hide");
+    } else {
+      if (!Player.player.isMuted()) {
+        if (chromecastAvailable)
+          castSession.sendMessage("urn:x-cast:zoff.me", { type: "mute" });
+        Playercontrols.choose_button(0, true);
+        Player.player.mute();
+      } else {
+        if (chromecastAvailable)
+          castSession.sendMessage("urn:x-cast:zoff.me", { type: "unMute" });
+        Player.player.unMute();
+        Playercontrols.choose_button(Player.player.getVolume(), false);
+      }
+    }
+  },
+
+  setVolume: function(vol) {
+    Player.setVolume(vol);
+    if (scUsingWidget) Player.soundcloud_player.setVolume(vol);
+    else Player.soundcloud_player.setVolume(vol / 100);
+    Playercontrols.choose_button(vol, false);
+    if (Player.player.isMuted()) Player.player.unMute();
+  },
+
+  choose_button: function(vol, mute) {
+    if (!mute) {
+      if (vol >= 0 && vol <= 33) {
+        if (!document.getElementById("v-full").classList.contains("hide")) {
+          Helper.toggleClass("#v-full", "hide");
+          Helper.toggleClass("#v-full-overlay", "hide");
+        }
+        if (!document.getElementById("v-medium").classList.contains("hide")) {
+          Helper.toggleClass("#v-medium", "hide");
+          Helper.toggleClass("#v-medium-overlay", "hide");
+        }
+        if (document.getElementById("v-low").classList.contains("hide")) {
+          Helper.toggleClass("#v-low", "hide");
+          Helper.toggleClass("#v-low-overlay", "hide");
+        }
+        if (!document.getElementById("v-mute").classList.contains("hide")) {
+          Helper.toggleClass("#v-mute", "hide");
+          Helper.toggleClass("#v-mute-overlay", "hide");
+        }
+      } else if (vol >= 34 && vol <= 66) {
+        if (!document.getElementById("v-full").classList.contains("hide")) {
+          Helper.toggleClass("#v-full", "hide");
+          Helper.toggleClass("#v-full-overlay", "hide");
+        }
+        if (document.getElementById("v-medium").classList.contains("hide")) {
+          Helper.toggleClass("#v-medium", "hide");
+          Helper.toggleClass("#v-medium-overlay", "hide");
+        }
+        if (!document.getElementById("v-low").classList.contains("hide")) {
+          Helper.toggleClass("#v-low", "hide");
+          Helper.toggleClass("#v-low-overlay", "hide");
+        }
+        if (!document.getElementById("v-mute").classList.contains("hide")) {
+          Helper.toggleClass("#v-mute", "hide");
+          Helper.toggleClass("#v-mute-overlay", "hide");
+        }
+      } else if (vol >= 67 && vol <= 100) {
+        if (document.getElementById("v-full").classList.contains("hide")) {
+          Helper.toggleClass("#v-full", "hide");
+          Helper.toggleClass("#v-full-overlay", "hide");
+        }
+        if (!document.getElementById("v-medium").classList.contains("hide")) {
+          Helper.toggleClass("#v-medium", "hide");
+          Helper.toggleClass("#v-medium-overlay", "hide");
+        }
+        if (!document.getElementById("v-low").classList.contains("hide")) {
+          Helper.toggleClass("#v-low", "hide");
+          Helper.toggleClass("#v-low-overlay", "hide");
+        }
+        if (!document.getElementById("v-mute").classList.contains("hide")) {
+          Helper.toggleClass("#v-mute", "hide");
+          Helper.toggleClass("#v-mute-overlay", "hide");
+        }
+      }
+    } else {
+      if (!document.getElementById("v-full").classList.contains("hide")) {
+        Helper.toggleClass("#v-full", "hide");
+        Helper.toggleClass("#v-full-overlay", "hide");
+      }
+      if (!document.getElementById("v-medium").classList.contains("hide")) {
+        Helper.toggleClass("#v-medium", "hide");
+        Helper.toggleClass("#v-medium-overlay", "hide");
+      }
+      if (!document.getElementById("v-low").classList.contains("hide")) {
+        Helper.toggleClass("#v-low", "hide");
+        Helper.toggleClass("#v-low-overlay", "hide");
+      }
+      if (document.getElementById("v-mute").classList.contains("hide")) {
+        Helper.toggleClass("#v-mute", "hide");
+        Helper.toggleClass("#v-mute-overlay", "hide");
+      }
+    }
+  },
+
+  playPause: function() {
+    if (videoSource == "soundcloud") {
+      if (scUsingWidget) {
+        Player.soundcloud_player.isPaused(function(playing) {
+          playing = !playing;
+          if (!playing) {
+            Helper.addClass("#play", "hide");
+            Helper.removeClass("#pause", "hide");
+            Player.soundcloud_player.play();
+          } else {
+            Helper.removeClass("#play", "hide");
+            Helper.addClass("#pause", "hide");
+            Player.soundcloud_player.pause();
+          }
+        });
+      } else {
+        if (!Player.soundcloud_player.isPlaying()) {
+          Helper.addClass("#play", "hide");
+          Helper.removeClass("#pause", "hide");
+          Player.soundcloud_player.play();
+        } else {
+          Helper.removeClass("#play", "hide");
+          Helper.addClass("#pause", "hide");
+          Player.soundcloud_player.pause();
+        }
+      }
+    } else {
+      state = Player.player.getPlayerState();
+      button = document.getElementById("playpause");
+      if (state == YT.PlayerState.PLAYING) {
+        Player.pauseVideo();
+      } else if (state == YT.PlayerState.PAUSED) {
+        Player.playVideo();
+      }
+    }
+  },
+
+  visualVolume: function(val) {
+    var elmnt = document.getElementsByClassName("volume-handle")[0];
+    var cmp_elmnt = document.getElementById("volume");
+    var slid_elmnt = document.getElementsByClassName("volume-slid")[0];
+
+    if (slider_type != "vertical") {
+      var pos = (cmp_elmnt.offsetWidth / 100) * val;
+      var volume = 0;
+      //var pos = pos3 - cmp_elmnt.offsetLeft;
+      if (pos > -1 && pos < cmp_elmnt.offsetWidth + 1) {
+        elmnt.style.left = pos + "px";
+        volume = pos / cmp_elmnt.offsetWidth;
+      } else if (pos < 1) {
+        elmnt.style.left = 0 + "px";
+        volume = 0;
+      } else {
+        elmnt.style.left = cmp_elmnt.offsetWidth + "px";
+        volume = 1;
+      }
+
+      slid_elmnt.style.width = volume * 100 + "%";
+      Playercontrols.setVolume(volume * 100);
+    } else {
+      var pos = val;
+      var pos0 = window.innerHeight - pos - 14;
+      var volume = 0;
+      if (pos0 > 64 && pos0 < 164) {
+        volume = (pos0 - 64) / 100;
+      } else if (pos0 < 65) {
+        volume = 0;
+      } else {
+        volume = 1;
+      }
+      slid_elmnt.style.height = volume * 100 + "%";
+      Playercontrols.setVolume(volume * 100);
+    }
+  },
+
+  volumeOptions: function() {
+    if (!chromecastAvailable) {
+      if (Player.player.isMuted()) {
+        Player.player.unMute();
+        vol = Player.player.getVolume();
+        Playercontrols.visualVolume(Player.player.getVolume());
+      } else {
+        Player.player.mute();
+        Playercontrols.visualVolume(0);
+      }
+    }
+  },
+
+  hoverMute: function(foo) {
+    vol = Player.player.getVolume();
+  }
 };

server/public/assets/js/remotecontroller.js

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

server/public/assets/js/suggestions.js

@@ -1,121 +1,167 @@
 var Suggestions = {
+  catchUserSuggests: function(params, single) {
+    if (single) {
+      number_suggested = number_suggested + 1;
+    } else {
+      number_suggested = number_suggested + params.length;
+    }
+    for (var i = 0; i < params.length; i++) {
+      if (document.querySelectorAll("#suggested-" + params[i].id).length > 0) {
+        number_suggested -= 1;
+      }
+    }
+    var to_display = number_suggested > 9 ? "9+" : number_suggested;
+    if (number_suggested > 0 && Admin.logged_in) {
+      Helper.removeClass(
+        document.querySelector(".suggested-link span.badge.new.white"),
+        "hide"
+      );
+    }
+    document.querySelector(
+      ".suggested-link span.badge.new.white"
+    ).innerText = to_display;
+    if (single) {
+      Suggestions.createSuggested(params);
+    } else {
+      for (var x in params) {
+        Suggestions.createSuggested(params[x]);
+      }
+    }
+    Suggestions.checkUserEmpty();
+  },
 
-    catchUserSuggests: function(params, single){
+  createSuggested: function(params) {
-        if(single) {
+    var duration = Helper.secondsToOther(params.duration);
-            number_suggested = number_suggested + 1;
+    var video_id = params.id;
-        } else {
+    var video_title = params.title;
-            number_suggested = number_suggested + params.length;
+    var date = new Date(params.added * 1000);
-        }
+    var addedTime =
-        for(var i = 0; i < params.length; i++) {
+      Helper.pad(date.getHours()) +
-            if(document.querySelectorAll("#suggested-" + params[i].id).length > 0) {
+      ":" +
-                number_suggested -= 1;
+      Helper.pad(date.getMinutes()) +
-            }
+      " - " +
-        }
+      Helper.pad(date.getDate()) +
-        var to_display = number_suggested > 9 ? "9+" : number_suggested;
+      "." +
-        if(number_suggested > 0 && Admin.logged_in){
+      Helper.pad(date.getMonth()) +
-            Helper.removeClass(document.querySelector(".suggested-link span.badge.new.white"), "hide");
+      "." +
-        }
+      Helper.pad(date.getYear() - 100);
-        document.querySelector(".suggested-link span.badge.new.white").innerText = to_display;
+    var toSend = {
-        if(single){
+      id: video_id,
-            Suggestions.createSuggested(params);
+      title: video_title,
-        }else{
+      length: params.duration,
-            for(var x in params){
+      duration: duration,
-                Suggestions.createSuggested(params[x]);
+      votes: addedTime,
-            }
+      extra: "Added"
-        }
+    };
-        Suggestions.checkUserEmpty();
+    if (params.source) toSend.source = params.source;
-    },
+    else {
+      toSend.source = "youtube";
+    }
+    if (params.thumbnail) toSend.thumbnail = params.thumbnail;
+    var song = List.generateSong(toSend, false, false, false, true);
+    var testingElem;
+    try {
+      testingElem = document.getElementById(video_id);
+    } catch (e) {}
 
-    createSuggested: function(params){
+    if (
-        var duration 	= Helper.secondsToOther(params.duration);
+      !testingElem &&
-        var video_id 	= params.id;
+      document.querySelectorAll("#suggested-" + video_id).length == 0
-        var video_title = params.title;
+    ) {
-        var date = new Date(params.added * 1000);
+      document
-        var addedTime = Helper.pad(date.getHours()) + ":"
+        .getElementById("user-suggest-html")
-                        + Helper.pad(date.getMinutes()) + " - "
+        .insertAdjacentHTML("beforeend", song);
-                        + Helper.pad(date.getDate()) + "."
+    }
-                        + Helper.pad(date.getMonth()) + "."
+  },
-                        + Helper.pad((date.getYear()-100));
-        var toSend = {id: video_id, title: video_title, length: params.duration, duration: duration, votes: addedTime, extra: "Added"};
-        if(params.source) toSend.source = params.source;
-        else {
-            toSend.source = "youtube";
-        }
-        if(params.thumbnail) toSend.thumbnail = params.thumbnail;
-        var song 		= List.generateSong(toSend, false, false, false, true);
-        var testingElem;
-        try {
-            testingElem = document.getElementById(video_id);
-        } catch(e) {}
 
-        if(!testingElem && document.querySelectorAll("#suggested-" + video_id).length == 0) {
+  fetchYoutubeSuggests: function(id) {
-            document.getElementById("user-suggest-html").insertAdjacentHTML("beforeend", song);
+    if (videoSource == "soundcloud") {
-        }
+      Helper.addClass(document.querySelector(".suggest-title-info"), "hide");
-    },
+      Helper.addClass("#suggest-song-html", "hide");
+      return;
+    } else {
+      Helper.removeClass(document.querySelector(".suggest-title-info"), "hide");
+      Helper.removeClass("#suggest-song-html", "hide");
+    }
+    var get_url =
+      "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId=" +
+      id +
+      "&type=video&key=" +
+      api_key.youtube;
+    var video_urls =
+      "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,statistics&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key=" +
+      api_key.youtube +
+      "&id=";
 
-    fetchYoutubeSuggests: function(id){
+    Helper.ajax({
-        if(videoSource == "soundcloud") {
+      type: "GET",
-            Helper.addClass(document.querySelector(".suggest-title-info"), "hide");
+      url: get_url,
-            Helper.addClass("#suggest-song-html", "hide");
+      dataType: "jsonp",
-            return;
+      success: function(response) {
-        } else {
+        response = JSON.parse(response);
-            Helper.removeClass(document.querySelector(".suggest-title-info"), "hide");
+        var this_resp = response.items.slice(0, 5);
-            Helper.removeClass("#suggest-song-html", "hide");
+        for (var i = 0; i < this_resp.length; i++) {
+          var data = this_resp[i];
+          video_urls += data.id.videoId + ",";
         }
-        var get_url 	= "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId="+id+"&type=video&key="+api_key.youtube;
-        var video_urls	= "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,statistics&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key="+api_key.youtube+"&id=";
 
         Helper.ajax({
-            type: "GET",
+          type: "GET",
-            url: get_url,
+          url: video_urls,
-            dataType:"jsonp",
+          dataType: "jsonp",
-            success: function(response)
+          success: function(response) {
-            {
+            response = JSON.parse(response);
-                response = JSON.parse(response);
+            Helper.setHtml("#suggest-song-html", "");
-                var this_resp = response.items.slice(0,5);
+            for (var i = 0; i < response.items.length; i++) {
-                for(var i = 0; i < this_resp.length; i++) {
+              var song = response.items[i];
-                    var data = this_resp[i];
+              var duration = song.contentDetails.duration;
-                    video_urls += data.id.videoId+",";
+              var length = Search.durationToSeconds(duration);
-                }
+              duration = Helper.secondsToOther(
+                Search.durationToSeconds(duration)
+              );
+              var video_id = song.id;
+              var video_title = song.snippet.title;
+              var viewCount = 0;
+              try {
+                viewCount = song.statistics.viewCount
+                  .toString()
+                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+              } catch (e) {}
 
-                Helper.ajax({
+              try {
-                    type: "GET",
+                document
-                    url: video_urls,
+                  .getElementById("suggest-song-html")
-                    dataType: "jsonp",
+                  .insertAdjacentHTML(
-                    success: function(response)
+                    "beforeend",
-                    {
+                    List.generateSong(
-                        response = JSON.parse(response);
+                      {
-                        Helper.setHtml("#suggest-song-html", "");
+                        id: video_id,
-                        for(var i = 0; i < response.items.length; i++) {
+                        title: video_title,
-                            var song = response.items[i];
+                        length: length,
-                            var duration 	= song.contentDetails.duration;
+                        duration: duration,
-                            var length 		= Search.durationToSeconds(duration);
+                        votes: viewCount,
-                            duration 		= Helper.secondsToOther(Search.durationToSeconds(duration));
+                        extra: "Views",
-                            var video_id 	= song.id;
+                        source: "youtube"
-                            var video_title = song.snippet.title;
+                      },
-                            var viewCount = 0;
+                      false,
-                            try {
+                      false,
-                                viewCount = song.statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+                      false
-                            } catch(e) {
+                    )
-
+                  );
-                            }
+              } catch (e) {}
-
-                            try {
-                                document.getElementById("suggest-song-html").insertAdjacentHTML("beforeend", List.generateSong({id: video_id, title: video_title, length: length, duration: duration, votes: viewCount, extra: "Views", source: "youtube"}, false, false, false));
-                            } catch(e) {}
-                        }
-                    }
-                });
             }
+          }
         });
-    },
+      }
+    });
+  },
 
-    checkUserEmpty: function(){
+  checkUserEmpty: function() {
-        var length = document.getElementById("user-suggest-html").children.length;
+    var length = document.getElementById("user-suggest-html").children.length;
-        if(length === 0){
+    if (length === 0) {
-            Helper.addClass("#user_suggests", "hide");
+      Helper.addClass("#user_suggests", "hide");
-        } else if(Admin.logged_in){
+    } else if (Admin.logged_in) {
-            Helper.removeClass("#user_suggests", "hide");
+      Helper.removeClass("#user_suggests", "hide");
-        }
+    }
-    },
+  }
 };

server/public/assets/js/token_apply.js

@@ -1,62 +1,87 @@
 window.addEventListener("DOMContentLoaded", function(e) {
-    M.Modal.init(document.getElementById("about"));
+  M.Modal.init(document.getElementById("about"));
-    M.Modal.init(document.getElementById("contact"));
+  M.Modal.init(document.getElementById("contact"));
-    Helper.addClass(".help-button-footer", "hide");
+  Helper.addClass(".help-button-footer", "hide");
 
-    Helper.setHtml("#contact-container", "");
+  Helper.setHtml("#contact-container", "");
-    Helper.setHtml("#contact-container", "Send a mail to us: <a title='Open in client' href='mailto:contact@zoff.me?Subject=Contact%20Zoff'>contact@zoff.me</a>");
+  Helper.setHtml(
-    Helper.css("#submit-contact-form", "display", "none");
+    "#contact-container",
+    "Send a mail to us: <a title='Open in client' href='mailto:contact@zoff.me?Subject=Contact%20Zoff'>contact@zoff.me</a>"
+  );
+  Helper.css("#submit-contact-form", "display", "none");
 
-    var page = window.location.pathname;
+  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);
 
-    if(!Helper.mobilecheck()) {
+  if (!Helper.mobilecheck()) {
-        if(document.querySelector("#iframe-container")) {
+    if (document.querySelector("#iframe-container")) {
-            document.getElementById("iframe-container").insertAdjacentHTML("beforeend", '<iframe id="iframe" src="https://zoff.me/_embed#celebrate&808080&autoplay" width="600px" height="300px" allow="autoplay"></iframe>');
+      document
-        }
+        .getElementById("iframe-container")
+        .insertAdjacentHTML(
+          "beforeend",
+          '<iframe id="iframe" src="https://zoff.me/_embed#celebrate&808080&autoplay" width="600px" height="300px" allow="autoplay"></iframe>'
+        );
     }
+  }
 
-    document.getElementsByClassName("token-form")[0].addEventListener("submit", function(e) {
+  document
-        e.preventDefault();
+    .getElementsByClassName("token-form")[0]
-        var email = document.getElementById("email_address").value;
+    .addEventListener("submit", function(e) {
-        var origin = document.getElementById("origin").value;
+      e.preventDefault();
-        document.getElementById("origin").setAttribute("readonly", true);
+      var email = document.getElementById("email_address").value;
-        document.getElementById("email_address").setAttribute("readonly", true);
+      var origin = document.getElementById("origin").value;
-        Helper.toggleClass(".submit", "disabled");
+      document.getElementById("origin").setAttribute("readonly", true);
-        Helper.removeClass(".full-form-token", "hide");
+      document.getElementById("email_address").setAttribute("readonly", true);
-        var captcha_response = grecaptcha.getResponse();
+      Helper.toggleClass(".submit", "disabled");
-        Helper.ajax({
+      Helper.removeClass(".full-form-token", "hide");
-            type: "POST",
+      var captcha_response = grecaptcha.getResponse();
-            url: "/api/apply",
+      Helper.ajax({
-            headers: {"Content-Type": "application/json;charset=UTF-8"},
+        type: "POST",
-            data: {
+        url: "/api/apply",
-                origin: origin,
+        headers: { "Content-Type": "application/json;charset=UTF-8" },
-                email: email,
+        data: {
-                "g-recaptcha-response": captcha_response,
+          origin: origin,
-            },
+          email: email,
-            success: function(response) {
+          "g-recaptcha-response": captcha_response
-                Helper.addClass(".full-form-token", "hide");
+        },
-                if(response == "success") {
+        success: function(response) {
-                    M.toast({html: "Email sent!", displayLength: 3000, classes: "green lighten"});
+          Helper.addClass(".full-form-token", "hide");
-                } else {
+          if (response == "success") {
-                    document.getElementById("email_address").setAttribute("readonly", false);
+            M.toast({
-                    Helper.toggleClass(".submit", "disabled");
+              html: "Email sent!",
-                    document.getElementById("origin").setAttribute("readonly", false);
+              displayLength: 3000,
-                    grecaptcha.reset();
+              classes: "green lighten"
-                    M.toast({html: "Something went wrong. Sure that email hasn't been used for another token?",displayLength: 3000, classes: "red lighten"});
+            });
-                }
+          } else {
-            },
+            document
-            error: function(response) {
+              .getElementById("email_address")
-                Helper.addClass(".full-form-token", "hide");
+              .setAttribute("readonly", false);
-                document.getElementById("email_address").setAttribute("readonly", false);
+            Helper.toggleClass(".submit", "disabled");
-                Helper.toggleClass(".submit", "disabled");
+            document.getElementById("origin").setAttribute("readonly", false);
-            }
+            grecaptcha.reset();
-        });
+            M.toast({
+              html:
+                "Something went wrong. Sure that email hasn't been used for another token?",
+              displayLength: 3000,
+              classes: "red lighten"
+            });
+          }
+        },
+        error: function(response) {
+          Helper.addClass(".full-form-token", "hide");
+          document
+            .getElementById("email_address")
+            .setAttribute("readonly", false);
+          Helper.toggleClass(".submit", "disabled");
+        }
+      });
     });
 
-    document.getElementById('submit-contact-form').addEventListener('click', function(e) {
+  document
-        e.preventDefault();
+    .getElementById("submit-contact-form")
-        document.getElementById("contact-form").submit();
+    .addEventListener("click", function(e) {
+      e.preventDefault();
+      document.getElementById("contact-form").submit();
     });
 });

server/public/assets/manifest.json

@@ -1,36 +1,36 @@
 {
-    "short_name": "Zoff",
+  "short_name": "Zoff",
-    "name": "Zoff",
+  "name": "Zoff",
-    "description": "A free YouTube based radio, where no registration is needed for listening to channels, or creating your own channels. ",
+  "description": "A free YouTube based radio, where no registration is needed for listening to channels, or creating your own channels. ",
-    "dir": "ltr",
+  "dir": "ltr",
-    "lang": "en-US",
+  "lang": "en-US",
-    "start_url": "/",
+  "start_url": "/",
-    "display": "standalone",
+  "display": "standalone",
-    "background_color": "#2D2D2D",
+  "background_color": "#2D2D2D",
-    "theme_color": "#2D2D2D",
+  "theme_color": "#2D2D2D",
-    "orientation": "portrait",
+  "orientation": "portrait",
-    "related_applications": [
+  "related_applications": [
-        {
+    {
-            "platform": "play",
+      "platform": "play",
-            "id": "zoff.me.zoff",
+      "id": "zoff.me.zoff",
-            "url": "https://play.google.com/store/apps/details?id=zoff.me.zoff"
+      "url": "https://play.google.com/store/apps/details?id=zoff.me.zoff"
-        },
+    },
-        {
+    {
-            "platform": "itunes",
+      "platform": "itunes",
-            "id": "me.zoff.zoffnative",
+      "id": "me.zoff.zoffnative",
-            "url": "https://itunes.apple.com/us/app/zoff/id1402037061?ls=1&mt=8"
+      "url": "https://itunes.apple.com/us/app/zoff/id1402037061?ls=1&mt=8"
-        }
+    }
-    ],
+  ],
-    "icons": [
+  "icons": [
-        {
+    {
-            "src": "/assets/images/android-chrome-192x192.png",
+      "src": "/assets/images/android-chrome-192x192.png",
-            "sizes": "192x192",
+      "sizes": "192x192",
-            "type": "image/png"
+      "type": "image/png"
-        },
+    },
-        {
+    {
-            "src": "/assets/images/android-chrome-512x512.png",
+      "src": "/assets/images/android-chrome-512x512.png",
-            "sizes": "512x512",
+      "sizes": "512x512",
-            "type": "image/png"
+      "type": "image/png"
-        }
+    }
-    ]
+  ]
 }