Added listeners on frontpage

php/nochan.php

@@ -17,6 +17,7 @@ if(isset($_GET['chan'])){
                 <a href="#" class="brand-logo hide-on-small-only noselect">
                     <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff" />
                 </a>
+                <span id="frontpage-viewer-counter" class="hide-on-small-only noselect" title="Divided among all channels. Hidden or not"></span>
                 <a href="//zoff.no" class="brand-logo brand-mobile hide-on-med-and-up">Zöff</a>
                 <ul id="nav-mobile" class="right hide-on-med-and-down">
                     <li><a class="modal-trigger waves-effect waves-red" title="Need help with the site?" onclick="$('#help').openModal()">Help</a></li>

php/nochan_content.php

@@ -4,6 +4,7 @@
                 <a href="#" class="brand-logo hide-on-small-only noselect">
                     <img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff" />
                 </a>
+                <span id="frontpage-viewer-counter" class="hide-on-small-only noselect" title="Divided among all channels. Hidden or not"></span>
                 <a href="//zoff.no" class="brand-logo brand-mobile hide-on-med-and-up">Zöff</a>
                 <ul id="nav-mobile" class="right hide-on-med-and-down">
                     <li><a class="modal-trigger waves-effect waves-red" title="Need help with the site?" onclick="$('#help').openModal()">Help</a></li>

static/css/style.css

@@ -20,6 +20,12 @@
   display:none;
 }
 
+#frontpage-viewer-counter{
+  position: absolute;
+  top: 0px;
+  left: 125px;
+}
+
 #toast-container{
   left:2% !important;
   cursor:pointer;

static/js/admin.js

@@ -91,7 +91,6 @@ var Admin = {
 
     	socket.on("conf", function(msg)
     	{
-            
             Crypt.init();
     		Admin.set_conf(msg[0]);
             if(Crypt.get_pass(chan.toLowerCase()) !== undefined && Admin.beginning && Crypt.get_pass(chan.toLowerCase()) != ""){

static/js/nochan.js

@@ -30,6 +30,8 @@ var Nochan = {
 
   winter: false,
 
+  times_rotated: 0,
+
   populate_channels: function(lists)
   {
       var output = "";
@@ -169,7 +171,12 @@ var Nochan = {
    
     }
     setTimeout(function(){
-      if(frontpage) Nochan.add_backdrop(list, i+1);
+      if(Nochan.times_rotated == 2 && frontpage){
+        socket.emit("frontpage_lists");
+      }else if(frontpage){
+        Nochan.times_rotated += 1;
+        Nochan.add_backdrop(list, i+1);
+      }
     },6000);
     
   },
@@ -201,6 +208,13 @@ var Nochan = {
     }
   },
 
+  set_viewers: function(viewers){
+    if(viewers > 0){
+      var to_add = viewers > 1 ? "listeners" : "listener";
+      $("#frontpage-viewer-counter").html(viewers + " " + to_add);
+    }
+  },
+
   to_channel: function(chan, popstate){
 
     $("#channel-load").css("display", "block");
@@ -256,6 +270,17 @@ $().ready(initfp);
 
 function initfp(){
 
+    if(window.location.hostname == "zoff.no") add = "https://zoff.no";
+    else add = "localhost";
+    socket = io.connect(''+add+':8880', connection_options);
+    socket.emit('frontpage_lists');
+    socket.on('playlists', function(msg){
+
+        Nochan.populate_channels(msg.channels);
+
+        Nochan.set_viewers(msg.viewers);
+    });
+
     $("#channel-load").css("display", "none");
     //Materialize.toast("<a href='/remote' style='color:white;'>Try out our new feature, remote!</a>", 8000)
     if(window.location.hash == "#donation")
@@ -273,14 +298,6 @@ function initfp(){
       'force new connection': true 
     };
 
-    if(window.location.hostname == "zoff.no") add = "https://zoff.no";
-    else add = "localhost";
-    socket = io.connect(''+add+':8880', connection_options);
-    socket.emit('frontpage_lists');
-    socket.on('playlists', function(msg){
-        Nochan.populate_channels(msg);
-    });
-
     if(!localStorage["ok_cookie"])
       Materialize.toast("We're using cookies to enhance your experience!  <a class='waves-effect waves-light btn light-green' href='#ok' id='cookieok' style='cursor:pointer;pointer-events:all;'> ok</a>", 10000);