KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-11-17 15:54:48 +01:00
parent 31d6da3c85
commit 90f8a8f1a6
5 changed files with 148 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
static/js/list.js
View File

@@ -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){
var add = List.generateSong(song_info, transition, false, true, false);
if(i >= List.page && i < List.page + 19) display = "block"
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];
if(transition)
{
setTimeout(function(){
$(added).css("height", 66);
},5);
var added = $("#wrapper").children()[i];
$(added).css("display", display);
if(display == "block" && $("#wrapper").children().length >= List.page + 21){
$($("#wrapper").children()[List.page + 20]).css("display", "none");
} else if(i < 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 + 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){

15
static/js/listeners.js
View File

@@ -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{