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) {
- $("
"+empty_results_html+"
").appendTo($("#results")).show("blind", 83.33);
+ $("
"+empty_results_html+"
").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();
+ }
- $("
"+output+"
").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 {
- $("
"+empty_results_html+"
").appendTo($("#results")).show("blind", 83.33);
+ $("
"+empty_results_html+"
").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..
+