diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index c27ac86f..7db7c7b7 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -1272,12 +1272,26 @@ hide mdi-action-visibility mdi-action-visibility-off display:none; } +#inner-results { + height: calc(100vh - 64px - 76px); + overflow-y: scroll; +} + #empty-results { text-align:center; height:100px; cursor: default; } +.pagination-results { + display: flex; + justify-content: center; +} + +.pagination-results a { + margin: 20px; +} + #empty-results span { margin:auto; } @@ -2739,6 +2753,11 @@ nav ul li:hover, nav ul li.active { width: 100%; } + #inner-results { + height: calc(100vh - 54px - 64px - 76px); + overflow-y: scroll; + } + #results{ background-color: #000; margin-top:56px; diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 218de771..8633e2aa 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -81,6 +81,7 @@ if(localStorage.debug === undefined){ var image_timeout; var result_html; var empty_results_html; +var pagination_buttons_html; var mobile_beginning; var timeout_search; var id; @@ -249,6 +250,7 @@ function init(){ spotify_is_authenticated(spotify_authenticated); result_html = $("#temp-results-container"); + pagination_buttons_html = $("
").append($(".pagination-results").clone()).html(); empty_results_html = $("#empty-results-container").html(); not_import_html = $(".not-imported-container").html(); not_export_html = $(".not-exported-container").html(); @@ -1026,6 +1028,15 @@ function seekToClick(e){ } } +$(document).on("click", ".pagination-results a", function(e) { + e.preventDefault(); + var that = $(this); + var pageToken = that.attr("data-pagination"); + var searchInput = that.attr("data-original-search"); + $(".pagination-results a").addClass("disabled"); + Search.search(searchInput, false, false, pageToken); +}); + $(document).on("click", ".accept-delete", function(e) { e.preventDefault(); /*var delete_id = $(this).attr("data-video-id"); @@ -1038,7 +1049,7 @@ $(document).on("click", ".accept-delete", function(e) { $(document).keyup(function(event) { if(event.keyCode == 27){ - $("#results").html(""); + //$("#results").html(""); if($("#search-wrapper").length != 0 && !Helper.contains($("#search-wrapper").attr("class").split(" "), "hide")) $("#search-wrapper").toggleClass("hide"); if($("#song-title").length != 0 && Helper.contains($("#song-title").attr("class").split(" "), "hide")) @@ -1046,7 +1057,13 @@ $(document).keyup(function(event) { if($("#search-btn i").html() == "close") { + $("#results").slideUp({ + complete: function() { + $("#results").empty(); + } + }); $("#search-btn i").html("search"); + $(".search_input").val(""); } if($(".search-container").length != 0 && !Helper.contains($(".search-container").attr("class").split(" "), "hide")){ $("#results").toggleClass("hide"); diff --git a/server/public/assets/js/search.js b/server/public/assets/js/search.js index a63fd85a..f4452483 100755 --- a/server/public/assets/js/search.js +++ b/server/public/assets/js/search.js @@ -10,8 +10,14 @@ var Search = { $(".search_input").focus(); } $("#song-title").toggleClass("hide"); - $("#results").empty(); + //$("#results").empty(); if($("#search-btn i").html() == "close") { + $("#results").slideUp({ + complete: function() { + $("#results").empty(); + } + }); + $(".search_input").val(""); $("#search-btn i").html("search"); } else { $("#search-btn i").html("close"); @@ -20,19 +26,21 @@ var Search = { }, - search: function(search_input, retried, related){ + search: function(search_input, retried, related, pagination){ if(result_html === undefined || empty_results_html === undefined) { result_html = $("#temp-results-container"); empty_results_html = $("#empty-results-container").html(); } - $(".search_results").html(''); + if(!pagination && $("#inner-results").length == 0) { + $(".search_results").html(''); + } if(search_input !== ""){ searching = true; var keyword= encodeURIComponent(search_input); - var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id&fields=items(id)&type=video&order=viewCount&safeSearch=none&maxResults=25"; + var yt_url = "https://www.googleapis.com/youtube/v3/search?key="+api_key+"&videoEmbeddable=true&part=id&type=video&order=viewCount&safeSearch=none&maxResults=25"; yt_url+="&q="+keyword; if(music)yt_url+="&videoCategoryId=10"; - + if(pagination) yt_url += "&pageToken=" + pagination; var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key+"&id="; if(related) { var yt_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&relatedToVideoId="+keyword+"&type=video&key="+api_key; @@ -50,9 +58,11 @@ var Search = { url: yt_url, dataType:"jsonp", success: function(response){ + var nextPageToken = response.nextPageToken; + var prevPageToken = response.prevPageToken; if(response.items.length === 0) { - $("").appendTo($("#results")).show("blind", 83.33); + $("").appendTo($("#results")).show("blind", 83.33); if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active")) $(".search_loader_spinner").removeClass("active"); @@ -105,9 +115,34 @@ var Search = { } } }); + var fresh = false; + if($("#inner-results").length == 0) { + fresh = true; + } + $(".search_results").empty(); if(output.length > 0) { + if(!pagination && fresh) { + $(".search_results").css("display", "none"); + } + $("#results").append(pagination_buttons_html); + $("
"+output+"
").prependTo($("#results")); + if(!pagination && fresh) { + $(".search_results").slideDown(); + } - $("").appendTo($("#results")).show("blind", (response.items.length-1) * 83.33); + + if(nextPageToken) { + $(".next-results-button").attr("data-pagination", nextPageToken); + } else { + $(".next-results-button").addClass("disabled"); + } + if(prevPageToken) { + $(".prev-results-button").attr("data-pagination", prevPageToken); + } else { + $(".prev-results-button").addClass("disabled"); + } + + $(".pagination-results a").attr("data-original-search", search_input); //setTimeout(function(){$(".thumb").lazyload({container: $("#results")});}, 250); @@ -122,7 +157,7 @@ var Search = { } else if(!retried){ Search.search(search_input, true); } else { - $("").appendTo($("#results")).show("blind", 83.33); + $("").appendTo($("#results")).show("blind", 83.33); if(Helper.contains($(".search_loader_spinner").attr("class").split(" "), "active")) $(".search_loader_spinner").removeClass("active"); } diff --git a/server/public/partials/channel/header.handlebars b/server/public/partials/channel/header.handlebars index 74e3142e..3a1531cd 100644 --- a/server/public/partials/channel/header.handlebars +++ b/server/public/partials/channel/header.handlebars @@ -75,6 +75,10 @@ No results found..
+
+ Prev + Next +