Added 'pagination' emulation. Hopefully this will fix some of the major lag caused by the bigger lists

static/css/style.css

@@ -16,6 +16,15 @@
   border:none !important;
 }
 
+#pageButtons, #pageButtons a{
+  color:white !important;
+}
+
+.prev_page_hide, .next_page_hide{
+  visibility: visible !important;
+  color:gray;
+}
+
 .settings_embed:focus{
   border:none !important;
   box-shadow: none !important;
@@ -1206,7 +1215,7 @@ nav ul li:hover, nav ul li.active {
 #add-many i{ line-height: 36px !important;}
 #results{
     background-color: rgba(0,0,0,0.8);
-    margin-top: 0px;
+    margin-top: -27px;
     max-height: calc(100vh - 64px);
     overflow: overlay;
     overflow-x: hidden;
@@ -1245,7 +1254,7 @@ nav ul li:hover, nav ul li.active {
 }
 
 .tabs_height{
-  height:calc(100vh - 48px - 64px) !important;
+  height:calc(100vh - 48px - 64px - 22px) !important;
   overflow:auto;
 }
 
@@ -1348,7 +1357,7 @@ nav ul li:hover, nav ul li.active {
 }
 
 #bottom-button{
-  bottom: 0px;
+  bottom: 22px;
 }
 
 

static/js/list.js

@@ -1,6 +1,7 @@
 var List = {
 
     empty: false,
+    page: 0,
 
     channel_function: function(msg)
     {
@@ -25,28 +26,36 @@ var List = {
     },
 
     insertAtBeginning: function(song_info, transition) {
-        var add = List.generateSong(song_info, transition, false, true, false);
+        var display = List.page == 0 ? "" : "none";
+        var add = List.generateSong(song_info, transition, false, true, false, display, false);
         $("#wrapper").append(add);
     },
 
     insertAtIndex: function(song_info, transition) {
         var i = List.getIndexOfSong(song_info.id);
+        var display = "none";
         if(!song_info.now_playing){
-
+            if(i >= List.page && i < List.page + 19) display = "block"
-            var add = List.generateSong(song_info, transition, false, true, false);
+            var add = List.generateSong(song_info, transition, false, true, false, display, false);
             if(i === 0) {
                 $("#wrapper").prepend(add);
             } else {
                 $("#wrapper > div:nth-child(" + (i) + ")").after(add);
             }
-        }
+            var added = $("#wrapper").children()[i];
-       var added = $("#wrapper").children()[i];
+            $(added).css("display", display);
-
+            if(display == "block" && $("#wrapper").children().length >= List.page + 21){
-        if(transition)
+                $($("#wrapper").children()[List.page + 20]).css("display", "none");
-        {
+            } else if(i < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
-            setTimeout(function(){
+                $($("#wrapper").children()[List.page - 1]).css("display", "block");
-                $(added).css("height", 66);
+            } else if($("#wrapper").children().length > List.page + 20){
-            },5);
+                $($("#wrapper").children()[List.page + 20]).css("display", "block");
+            }
+             if(transition){
+                 setTimeout(function(){
+                     $(added).css("height", 66);
+                 },5);
+             }
         }
     },
 
@@ -54,9 +63,10 @@ var List = {
     {
         if(list_html === undefined) list_html = $("#list-song-html").html();
         full_playlist = msg;
+        List.can_fit = (($("main").height()) / 66);
 
         List.sortList();
-		$("#wrapper").empty();
+	    $("#wrapper").empty();
 
         Helper.log("---------------------------");
         Helper.log("---------FULL PLAYLIST-----");
@@ -66,10 +76,20 @@ var List = {
         if(full_playlist.length > 1){
     		$.each(full_playlist, function(j, current_song){
     			if(!current_song.now_playing){ //check that the song isnt playing
-                    $("#wrapper").append(List.generateSong(current_song, false, lazy_load, true));
+                    $("#wrapper").append(List.generateSong(current_song, false, lazy_load, true, false, "", true));
     			}
     		});
-
+            if($("#wrapper").children().length > 20 && !$("#pageButtons").length){
+                $('<div id="pageButtons"><span class="prev_page_hide">< prev</span><a href="#!" class="prev_page">< prev</a> <span id="pageNumber">1</span> <a href="#!" class="next_page">next ></a><span class="next_page_hide">next ></span></div>').insertAfter("#wrapper");
+                $(".prev_page").toggleClass("hide");
+                $(".next_page_hide").css("display","none");
+            } else if(!$("#pageButtons").length){
+                $('<div id="pageButtons"><span class="prev_page_hide">< prev</span><a href="#!" class="prev_page">< prev</a> <span id="pageNumber">1</span> <a href="#!" class="next_page">next ></a><span class="next_page_hide">next ></span></div>').insertAfter("#wrapper");
+                $(".prev_page").toggleClass("hide");
+                $(".next_page").toggleClass("hide");
+                $(".next_page_hide").css("display","inline-block");
+                $(".prev_page_hide").css("display","inline-block");
+            }
 
             if(lazy_load){
                 if(Helper.mobilecheck()) $(".list-image").lazyload({});
@@ -83,12 +103,56 @@ var List = {
         }else{
             List.empty = true;
             $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
+            if(!$("#pageButtons").length){
+                $('<div id="pageButtons"><span class="prev_page_hide">< prev</span><a href="#!" class="prev_page">< prev</a> <span id="pageNumber">1</span> <a href="#!" class="next_page">next ></a><span class="next_page_hide">next ></span></div>').insertAfter("#wrapper");
+                $(".prev_page").toggleClass("hide");
+                $(".next_page").toggleClass("hide");
+                $(".next_page_hide").css("display","inline-block");
+                $(".prev_page_hide").css("display","inline-block");
+            }
         }
 		$("#settings").css("visibility", "visible");
 		$("#settings").css("opacity", "1");
 		$("#wrapper").css("opacity", "1");
     },
 
+    dynamicContentPage: function(way){
+        if(way == 1){
+            $("#wrapper").children().slice(List.page, List.page + 20).hide();
+            List.page = List.page + 20;
+            $("#wrapper").children().slice(List.page, List.page + 20).show();
+            if(List.page > 0 && $(".prev_page").hasClass("hide")){
+                $(".prev_page").toggleClass("hide");
+                $(".prev_page_hide").css("display", "none");
+            }
+
+            if(List.page + 20 >= $("#wrapper").children().length){
+                $(".next_page_hide").css("display", "inline-block");
+                $(".next_page").css("display", "none");
+            }
+            //$("#wrapper").scrollTop(0);
+        } else {
+            $("#wrapper").children().slice(List.page - 20, List.page).show();
+            $("#wrapper").children().slice(List.page, List.page + 20).hide();
+            List.page = List.page - 20;
+            //$("#wrapper").scrollTop(0);
+            if(List.page == 0 && !$(".prev_page").hasClass("hide")){
+                $(".prev_page").toggleClass("hide");
+                $(".prev_page_hide").css("display", "inline-block");
+            } else if($(".prev_page").hasClass("hide")){
+                $(".prev_page_hide").css("display", "inline-block");
+            } else {
+                $(".prev_page_hide").css("display", "none");
+            }
+
+            if(List.page + 20 < $("#wrapper").children().length){
+                $(".next_page_hide").css("display", "none");
+                $(".next_page").css("display", "inline-block");
+            }
+        }
+        $("#pageNumber").html((List.page / 20) + 1);
+    },
+
     added_song: function(added){
         var now_playing;
 
@@ -106,7 +170,14 @@ var List = {
         }
         $("#empty-channel-message").remove();
         List.insertAtIndex(added, true);
-
+        if($("#wrapper").children().length > List.page + 20){
+            $(".next_page_hide").css("display", "none");
+            $(".next_page").removeClass("hide");
+            $(".next_page").css("display", "inline-block");
+        } else {
+            $(".next_page_hide").css("display", "inline-block");
+            $(".next_page").css("display", "none");
+        }
     },
 
     deleted_song: function(deleted){
@@ -120,20 +191,43 @@ var List = {
             {
                 $("#"+deleted).remove();
                 full_playlist.splice(List.getIndexOfSong(deleted), 1);
+                if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
+                    $($("#wrapper").children()[List.page - 1]).css("display", "block");
+                } else if($("#wrapper").children().length > List.page + 19){
+                    $($("#wrapper").children()[List.page + 19]).css("display", "block");
+                }
+                if(List.page >= $("#wrapper").children().length){
+                    List.dynamicContentPage(-1);
+                } else if(List.page + 20 >= $("#wrapper").children().length){
+                    $(".next_page_hide").css("display", "inline-block");
+                    $(".next_page").css("display", "none");
+                }
             }, 305);
 
-            document.getElementById('wrapper').scrollTop += 1;
-            document.getElementById('wrapper').scrollTop += -1;
         }catch(err){
             full_playlist.splice(List.getIndexOfSong(deleted), 1);
-            if(!List.empty)
+            if(!List.empty){
                 $("#wrapper").children()[$("#wrapper").children().length-1].remove();
+                if(index < List.page && $("#wrapper").children().length - (List.page + 1) >= 0){
+                    $($("#wrapper").children()[List.page - 1]).css("display", "block");
+                } else if($("#wrapper").children().length > List.page + 20){
+                    $($("#wrapper").children()[List.page + 19]).css("display", "block");
+                }
+            }
         }
+
         if(full_playlist.length <= 2){
             List.empty = true;
             $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
         }
         $("#suggested-"+deleted).remove();
+        if(List.page + 20 < $("#wrapper").children().length){
+            $(".next_page_hide").css("display", "none");
+            $(".next_page").css("display", "inline-block");
+        }
+        if(List.page >= $("#wrapper").children().length){
+            List.dynamicContentPage(-1);
+        }
         Suggestions.checkUserEmpty();
     },
 
@@ -170,6 +264,9 @@ var List = {
                 $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
             }
             List.insertAtIndex(full_playlist[length-1], false);
+            if($("#wrapper").children().length >= List.page + 20){
+                $($("#wrapper").children()[List.page + 20]).css("display", "block");
+            }
             document.getElementById('wrapper').scrollTop += 1;
             document.getElementById('wrapper').scrollTop += -1;
         }catch(e){}
@@ -304,7 +401,7 @@ var List = {
     	}
     },
 
-    generateSong: function(song_info, transition, lazy, list, user)
+    generateSong: function(song_info, transition, lazy, list, user, display, initial)
     {
         if(list_html === undefined) list_html = $("#list-song-html").html();
     	var video_id    = song_info.id;
@@ -329,7 +426,9 @@ var List = {
             song.find(".list-votes").text(video_votes);
             song.find("#list-song").attr("id", video_id);
             song.find(".vote-container").attr("title", video_title);
-
+            if((($("#wrapper").children().length >= 20) && initial) || display == "none"){
+                song.find(".card").css("display", "none");
+            }
             attr     = ".vote-container";
             del_attr = "del";
         }else if(!list){

static/js/listeners.js

@@ -21,7 +21,7 @@ var SAMPLE_RATE 		  = 6000; // 6 seconds
 var lastSample 			  = Date.now();
 var began 				  = false;
 var i 					  = -1;
-var lazy_load    		  = true;
+var lazy_load    		  = false;
 var embed				  = false;
 var autoplay			  = true;
 var durationBegun 	      = false;
@@ -408,6 +408,14 @@ $(document).on("click", "#closePlayer", function(e){
   	$("#closePlayer").remove();
 });
 
+$(document).on("click", ".prev_page", function(){
+    List.dynamicContentPage(-1);
+});
+
+$(document).on("click", ".next_page", function(){
+    List.dynamicContentPage(1);
+});
+
 $(document).on('click', '#toast-container', function(){
     $(".toast").fadeOut(function(){
         $(".toast").remove();
@@ -643,6 +651,7 @@ $(document).on("click", ".chat-link", function(e){
 	$("#wrapper").css("display", "none");
 	$("#suggestions").css("display", "none");
 	$("#text-chat-input").focus();
+    $("#pageButtons").css("display", "none");
 });
 
 $(document).on("click", ".playlist-link", function(e){
@@ -650,6 +659,7 @@ $(document).on("click", ".playlist-link", function(e){
 	$("#chatPlaylist").css("display", "none");
 	$("#wrapper").css("display", "block");
 	$("#suggestions").css("display", "none");
+    $("#pageButtons").css("display", "block");
 });
 
 $(document).on("click", ".suggested-link", function(e){
@@ -657,6 +667,7 @@ $(document).on("click", ".suggested-link", function(e){
 	$("#chatPlaylist").css("display", "none");
 	$("#wrapper").css("display", "none");
 	$("#suggestions").css("display", "block");
+    $("#pageButtons").css("display", "none");
 });
 
 $(document).on("click", ".import-spotify-auth", function(e){
@@ -804,7 +815,7 @@ $(document).on("mousemove", "#playlist", function(e)
 	if(((y <= 80 && y >= 48)) && $("#wrapper").scrollTop() > 0){
 		$("#top-button").removeClass("hide");
 		Helper.addClass("#bottom-button", "hide");
-	}else if(y >= $("#playlist").height() - 18 && $("#wrapper").scrollTop() < $("#wrapper")[0].scrollHeight - $("#wrapper").height() - 1){
+	}else if(y >= $("#playlist").height() - 45 && y <= $("#playlist").height() - 18 && $("#wrapper").scrollTop() < $("#wrapper")[0].scrollHeight - $("#wrapper").height() - 1){
 		$("#bottom-button").removeClass("hide");
 		Helper.addClass("#top-button", "hide");
 	}else{