fixed issue with remove-button not hiding on switching from private mode to online-mode, and added help function in chat2

public/css/style.css

@@ -1256,9 +1256,16 @@ ul #chat-log{
 }
 
 #search_loader {
-  height:64px;
+  height: 64px;
-  padding: 0 15px;
+  display: flex;
-  margin-top:15px;
+  justify-content: center;
+  /* padding: 15px 15px; */
+  /* margin-top: 15px; */
+  align-items: center;
+}
+
+#search_loader_inner{
+  display: flex;
 }
 
 .playlist_loader_padding{
@@ -1323,8 +1330,6 @@ ul #chat-log{
   position: fixed;
   top: 0;
   right: 0;
-  height: 64px;
-  overflow: hidden;
 }
 
 .title-container{

public/js/chat.js

@@ -2,6 +2,7 @@ var Chat = {
 
   channel_received: 0,
   all_received: 0,
+  chat_help: ["/name <new name> to change name", "/removename to remove name"],
 
   namechange: function(newName)
   {
@@ -21,7 +22,47 @@ var Chat = {
       return;
     if(data.value.startsWith("/name ")){
       Chat.namechange(data.value.substring(6));
-    }else if(data.value.startsWith("/removename")){
+    } else if(data.value.startsWith("/help")){
+      if($(".chat-tab-li a.active").attr("href") == "#all_chat"){
+        if($("#chatall").children().length > 100){
+          $("#chatall").children()[0].remove()
+        }
+        for(var x = 0; x < Chat.chat_help.length; x++){
+          var color = Helper.intToARGB(Helper.hashCode("System"));
+          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);
+          $("#chatall").append("<li title='Zöff''><span style='color:"+color_temp+";'>System</span>: </li>");
+          var in_text = document.createTextNode(Chat.chat_help[x]);
+          $("#chatall li:last")[0].appendChild(in_text);
+          document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight;
+        }
+      } else {
+        if($("#chatchannel").children().length > 100){
+          $("#chatchannel").children()[0].remove()
+        }
+        for(var x = 0; x < Chat.chat_help.length; x++){
+
+          var color = Helper.intToARGB(Helper.hashCode("System"));
+          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);
+          $("#chatchannel").append("<li><span style='color:"+color_temp+";'>System</span>: </li>");
+          var in_text = document.createTextNode(Chat.chat_help[x]);
+          $("#chatchannel li:last")[0].appendChild(in_text);
+          document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight;
+        }
+
+      }
+    } else if(data.value.startsWith("/removename")){
       Chat.removename();
     }
     else if($(".chat-tab-li a.active").attr("href") == "#all_chat")
@@ -55,6 +96,10 @@ var Chat = {
     {
       $("#favicon").attr("href", "public/images/highlogo.png");
     }
+
+    if($("#chatall").children().length > 100){
+      $("#chatall").children()[0].remove()
+    }
     var color = Helper.intToARGB(Helper.hashCode(inp.from));
     if(color.length < 6) {
       for(x = color.length; x < 6; x++){
@@ -85,6 +130,10 @@ var Chat = {
       $("span.badge.new.white").html(to_display);
     }
 
+    if($("#chatchannel").children().length > 100){
+      $("#chatchannel").children()[0].remove()
+    }
+
     var color = Helper.intToARGB(Helper.hashCode(data.from));
     if(color.length < 6) {
       for(x = color.length; x < 6; x++){

public/js/frontpage.js

@@ -426,12 +426,6 @@ function initfp(){
             window.location.href = 'http://etys.no';
     });
 
-    $("#offline-mode").tooltip({
-      delay: 5,
-      position: "bottom",
-      tooltip: "Enable private mode"
-    });
-
     if(!Helper.mobilecheck() && Frontpage.winter) {
       $(".mega").prepend('<div id="snow"></div>');
       //Frontpage.start_snowfall();

public/js/listeners.js

@@ -558,19 +558,19 @@ function change_offline(enabled, already_offline){
 		socket.emit("offline", enabled);
     $("#offline-mode").tooltip('remove');
     if(enabled){
-		if(list_html){
+			if(list_html){
-			list_html = $("<div>" + list_html + "</div>");
+				list_html = $("<div>" + list_html + "</div>");
-			//list_html.find(".card-content").css("display", "flex");
+				//list_html.find(".card-content").css("display", "flex");
-	        //list_html.find(".card-content").css("height", "100%");
+        //list_html.find(".card-content").css("height", "100%");
-	        //list_html.find(".list-title").css("align-self", "center");
+        //list_html.find(".list-title").css("align-self", "center");
-	        //list_html.find(".vote-span").addClass("hide");
+        //list_html.find(".vote-span").addClass("hide");
-			list_html.find(".list-remove").removeClass("hide");
+				list_html.find(".list-remove").removeClass("hide");
-			list_html = list_html.html();
+				list_html = list_html.html();
-		}
+			}
         //$(".card-content").css("display", "flex");
         //$(".card-content").css("height", "100%");
         //$(".list-title").css("align-self", "center");
-		$(".list-remove").removeClass("hide");
+				$(".list-remove").removeClass("hide");
         //$(".vote-span").addClass("hide");
         $("#viewers").addClass("hide");
         $("#offline-mode").removeClass("waves-cyan");
@@ -591,12 +591,12 @@ function change_offline(enabled, already_offline){
 		if(list_html){
 			list_html = $("<div>" + list_html + "</div>");
 			//list_html.find(".card-content").css("display", "block");
-	        //list_html.find(".card-content").css("height", "initial");
+            //list_html.find(".card-content").css("height", "initial");
-	        //list_html.find(".list-title").css("align-self", "center");
+            //list_html.find(".list-title").css("align-self", "center");
-	        //list_html.find(".vote-span").removeClass("hide");
+            //list_html.find(".vote-span").removeClass("hide");
-			if((!hasadmin || !w_p)){
+    		if(hasadmin && w_p){
-				list_html.find(".list-remove").addClass("hide");
+    			list_html.find(".list-remove").addClass("hide");
-			}
+    		}
 			list_html = list_html.html();
 		}
         //$(".card-content").css("display", "block");
@@ -604,7 +604,7 @@ function change_offline(enabled, already_offline){
         //$(".list-title").css("align-self", "center");
         //$(".vote-span").removeClass("hide");
         $("#viewers").removeClass("hide");
-    	if((!hasadmin || !w_p)){
+    	if(hasadmin && w_p){
     		$(".list-remove").addClass("hide");
     	}
         $("#offline-mode").addClass("waves-cyan");
@@ -1133,7 +1133,7 @@ $(document).on("click", ".import-youtube", function(e){
 
 $(document).on("submit", "#chatForm", function(e){
 	e.preventDefault();
-  Chat.chat(document.getElementById("chatForm").input);
+    Chat.chat(document.getElementById("chatForm").input);
 });
 
 $(document).on("click", "#shuffle", function(e)

public/php/channel.php

@@ -29,7 +29,7 @@
 
                 <ul class="right control-list noselect">
                   <li id="search_loader" class="valign-wrapper">
-                      <div class="valign">
+                      <div id="search_loader_inner">
                         <div class="preloader-wrapper small search_loader_spinner">
                          <div class="spinner-layer spinner-white-only">
                            <div class="circle-clipper left">

public/php/frontpage.php

@@ -22,7 +22,7 @@ if(isset($_GET['chan'])){
                 <div id="frontpage-viewer-counter" data-position="bottom" data-delay="5" data-tooltip="Total viewers" class="noselect tooltipped" title="Divided among all channels. Hidden or not"></div>
                 <!--<a href="//zoff.no" class="brand-logo brand-mobile hide-on-med-and-up">Zöff</a>-->
                 <ul class="right hide-on-med-and-down">
-                    <li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Offline mode" href="#">Private</a></li>
+                    <li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Private mode" href="#">Private</a></li>
                     <li><a class="header-buttons waves-effect waves-green" title="Remote control a Zöff player" href="https://remote.zoff.no">Remote</a></li>
                     <li><a class="header-buttons modal-trigger waves-effect waves-orange" onclick="$('#about').modal('open')">About</a></li>
                 </ul>