added option for showing all channels on frontpage, will probably crash stuff

public/css/style.css

@@ -2035,6 +2035,10 @@ nav ul li:hover, nav ul li.active {
       width: 57%;
     }
 
+    #main_section_frontpage {
+      margin-top: -20px;
+    }
+
     .delete_button, .del_suggested, .del_user_suggested{
       bottom: -9px;
       /* line-height: inherit; */

public/js/frontpage.js

@@ -27,29 +27,57 @@ var Frontpage = {
 
   times_rotated: 0,
 
+  all_channels: [],
+
   frontpage_function: function(msg)
   {
-    $("#channels").empty();
     frontpage = true;
 
     Helper.log("-----------");
     Helper.log("Frontpage fetch");
     Helper.log(msg);
     Helper.log("------------");
-
-    Frontpage.populate_channels(msg.channels);
+    Frontpage.all_channels = msg.channels;
+    Frontpage.populate_channels(msg.channels, true);
 
     Frontpage.set_viewers(msg.viewers);
   },
 
-  populate_channels: function(lists)
+  populate_channels: function(lists, popular)
   {
+      $("#channels").empty();
+
       var num = 0;
       var pinned;
       if(lists[0].pinned == 1){
         pinned = lists.shift();
       }
-      lists.sort(Frontpage.sortFunction);
+      //lists.sort(Frontpage.sortFunction);
+      if(popular) {
+        lists = lists.sort(Helper.predicate({
+               name: 'viewers',
+               reverse: true
+           }, {
+               name: 'accessed',
+               reverse: true
+           }, {
+               name: 'count',
+               reverse: true
+            }
+          )
+        );
+      } else {
+        lists = lists.sort(Helper.predicate({
+               name: 'viewers',
+               reverse: true
+           }, {
+               name: 'count',
+               reverse: true
+            }
+          )
+        );
+      }
+
       if(pinned !== undefined){
         lists.unshift(pinned);
       }
@@ -67,7 +95,7 @@ var Frontpage = {
       {
 
           var chan = lists[x].channel;
-          if(num<12)
+          if(num<12 || !popular)
           {
             var id = lists[x].id;
             var viewers = lists[x].viewers;
@@ -145,6 +173,7 @@ var Frontpage = {
       //Materialize.fadeInImage('#channels');
       $("#channels").fadeIn(800);
       $("#searchFrontpage").focus();
+      num = 0;
   },
 
   sortFunction: function(a, b) {
@@ -388,7 +417,7 @@ function initfp(){
       }
     };
 
-    channel_list = $("#channel-list-container").html();
+    channel_list = $("#channel-list-container").clone().html();
 
     if(window.location.hostname != "fb.zoff.me") share_link_modifier_frontpage();
 
@@ -402,6 +431,7 @@ function initfp(){
     $("#about").modal();
     $("#help").modal();
     $("#contact").modal();
+    $('select').material_select();
 
     Helper.log("----");
     Helper.log("Sending frontpage_lists");

public/js/listeners.js

@@ -16,6 +16,7 @@ var player_ready 	   	  = false;
 var viewers 			  = 1;
 var dragging = false;
 var paused 				  = false;
+var currently_showing_channels = 1;
 var playing 			  = false;
 var SAMPLE_RATE 		  = 6000; // 6 seconds
 var lastSample 			  = Date.now();
@@ -969,6 +970,15 @@ $(document).on('click', "#aprilfools", function(){
   $(".mega").css("-moz-transform", "rotate(0deg)");
 });
 
+$(document).on('change', '#view_channels_select', function(e) {
+	var that = this;
+	if(currently_showing_channels != parseInt(that.value)) {
+
+		Frontpage.populate_channels(Frontpage.all_channels, (parseInt(that.value) == 1 ? true : false));
+	}
+	currently_showing_channels = parseInt(that.value);
+});
+
 $(document).on('keyup mouseup', '#width_embed', function(){
     var that = $(this);
     embed_width = that.val();

public/php/frontpage.php

@@ -130,10 +130,22 @@ if(isset($_GET['chan'])){
         </div>
     <main class="center-align container">
         <div id="main_section_frontpage" class="section">
+          <div class="col s12">
+            <div class="row">
+              <div class="input-field col s12">
+                <select id="view_channels_select">
+                  <option value="" disabled>Choose your option</option>
+                  <option value="1" selected>Most Popular</option>
+                  <option value="2">All Channels</option>
+                </select>
+              </div>
+            </div>
+          </div>
             <div id="preloader" class="progress">
                 <div class="indeterminate"></div>
             </div>
             <div id="channel-list-container">
+
             <ul class="row" id="channels">
                     <li id="chan-card" class="col s6 m4 l3">
                         <div class="card sticky-action">

public/php/header.php

@@ -37,9 +37,9 @@
 </script>
 <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
 <script type="text/javascript" src="/public/dist/lib/jquery-2.1.3.min.js"></script>
-<script type="text/javascript" src="/public/dist/lib/jquery.ui.touch-punch.min.js"></script>
 <script type="text/javascript" src="/public/dist/lib/materialize.min.js"></script>
 <script type="text/javascript" src="/public/dist/lib/jquery-ui-1.10.3.min.js"></script>
+<script type="text/javascript" src="/public/dist/lib/jquery.ui.touch-punch.min.js"></script>
 <script type="text/javascript" src="/public/dist/lib/socket.io.min.js"></script>
 <script type="text/javascript" src="/public/dist/lib/color-thief.js"></script>
 <script type="text/javascript" src="/public/dist/lib/sha256.js"></script>