Modal and filter somewhat working

This commit is contained in:
Kasper Rynning-Tønnesen
2019-02-26 21:42:30 +01:00
parent 1a66320029
commit c3bfac72c6
12 changed files with 148 additions and 35 deletions

View File

@@ -143,6 +143,11 @@ var Channel = {
Helper.removeElement(".embed-button-footer");
Helper.removeElement(".tabs");
}
M.Modal.init(document.getElementById("advanced_filter"), {
onCloseEnd: function() {
document.querySelector(".filter-results").innerHTML = "";
}
});
M.Modal.init(document.getElementById("help"));
M.Modal.init(document.getElementById("contact"));
M.Modal.init(document.getElementById("channel-share-modal"));

View File

@@ -21,6 +21,37 @@ function removeAllListeners() {
socket.removeEventListener(id);
}
function filterPlaylistElements() {
Helper.ajax({
type: "POST",
headers: {
"Content-Type": "application/json"
},
url: "/api/search/" + chan.toLowerCase(),
data: {
searchQuery: document.getElementById("filtersearch_input").value,
token: zoff_api_token
},
success: function(data){
var json = JSON.parse(data);
document.querySelector(".filter-results").innerHTML = "";
if(json.results.length > 0) {
for(var i = 0; i < json.results.length; i++) {
document.querySelector(".filter-results").innerHTML += List.generateSong(json.results[i], false, false, true, false, "block", false, true);;
}
} else {
toast("Couldn't find any items with those tags..", "red");
document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
}
},
error: function() {
toast("Couldn't find any items with those tags..", "red");
document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
}
});
}
function say_updated() {
setTimeout(function() {
before_toast();

View File

@@ -1242,13 +1242,11 @@ var List = {
}
},
generateSong: function(_song_info, transition, lazy, list, user, display, initial) {
generateSong: function(_song_info, transition, lazy, list, user, display, initial, filtered) {
if(list_html === undefined) list_html = Helper.html("#list-song-html");
var video_id = _song_info.id;
var video_title = _song_info.title;
var video_votes = _song_info.votes;
var tags = "";
if(_song_info.tags != undefined) _song_info.tags.join(",").toLowerCase();
var video_thumb_url = "//img.youtube.com/vi/"+video_id+"/mqdefault.jpg";
if(_song_info.source == "soundcloud") {
video_thumb_url = _song_info.thumbnail;
@@ -1277,8 +1275,8 @@ var List = {
}
song.querySelector(".list-image").setAttribute(image_attr,video_thumb);
if(list){
song.querySelector("#list-song")
if(list && !filtered){
//song.querySelector("#list-song")
song.querySelector(".list-votes").innerText = video_votes;
song.querySelector("#list-song").setAttribute("data-video-id", video_id);
song.querySelector("#list-song").setAttribute("data-video-type", "song");
@@ -1294,7 +1292,7 @@ var List = {
var _temp_duration = Helper.secondsToOther(_song_info.duration);
song.querySelector(".card-duration").innerText = Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]);
}else if(!list){
}else if(!list && !filtered){
//song.querySelector(".card-duration").remove();
//song.querySelector(".list-song").removeClass("playlist-element");
@@ -1318,7 +1316,6 @@ var List = {
song.querySelector(attr).setAttribute("data-video-title", video_title);
song.querySelector(attr).setAttribute("data-video-length", _song_info.length);
song.querySelector(attr).setAttribute("data-added-by", added_by);
song.querySelector(attr).setAttribute("data-tags", tags);
song.querySelector(attr).setAttribute("data-video-type", "suggested");
if(_song_info.source == "soundcloud") {
song.querySelector(attr).setAttribute("data-type-thumbnail", _song_info.thumbnail);
@@ -1332,6 +1329,21 @@ var List = {
list_image.classList.remove("list-image");
list_image.className += " list-suggested-image";
//song.querySelector(".list-image").setAttribute("class", song.querySelector(".list-image").getAttribute("class").replace("list-image", "list-suggested-image"));
} else if(filtered) {
song.querySelector("#list-song").className += " filtered-search-element";
song.querySelector(".list-votes").innerText = video_votes;
song.querySelector("#list-song").setAttribute("data-video-id", video_id);
song.querySelector("#list-song").setAttribute("data-video-type", "song");
song.querySelector("#list-song").setAttribute("data-video-source", _song_info.source);
song.querySelector("#list-song").setAttribute("id", "filtered-" + video_id);
song.classList.remove("hide");
song.className += " filtered-search-element";
song.querySelector(".vote-container").setAttribute("title", video_title);
attr = ".vote-container";
del_attr = "delete_button";
var _temp_duration = Helper.secondsToOther(_song_info.duration);
song.querySelector(".card-duration").innerText = Helper.pad(_temp_duration[0]) + ":" + Helper.pad(_temp_duration[1]);
}
if(!embed) {
song.querySelector(".mobile-delete").remove();

View File

@@ -682,13 +682,28 @@ function addDynamicListeners() {
this.preventDefault();
Helper.toggleClass("#find_div", "hide");
document.getElementById("find_input").value = "";
document.getElementById("find_input").blur();
document.getElementById("find_input").focus();
Helper.removeClass(".highlight", "highlight");
found_array = [];
found_array_index = 0;
find_word = "";
});
addListener("click", "#open_advanced_filter", function(e) {
this.preventDefault();
M.Modal.getInstance(document.getElementById("advanced_filter")).open();
});
addListener("submit", "#filter-form", function(e) {
this.preventDefault();
filterPlaylistElements();
});
addListener("click", ".submit-filter-search", function(e) {
this.preventDefault();
filterPlaylistElements();
});
addListener("click", ".delete-context-menu", function(e) {
var that = e;
if(that.classList.contains("context-menu-disabled")) {
@@ -1461,7 +1476,6 @@ function addDynamicListeners() {
if(substr != "<i c" && !html.classList.contains("waves-effect") && !html.classList.contains("result-start") && !html.classList.contains("result-end") && !html.classList.contains("result-get-more-info")){
var id = e.getAttribute("data-video-id");
var title = e.getAttribute("data-video-title");
var tags = e.getAttribute("data-tags").split(",");
var original_length = e.getAttribute("data-video-length");
var start = parseInt(e.querySelector(".result-start").value);
var end = parseInt(e.querySelector(".result-end").value);
@@ -1481,7 +1495,7 @@ function addDynamicListeners() {
} else {
try {
var length = parseInt(end) - parseInt(start);
Search.submitAndClose(id, title, length, start, end, source, thumbnail, tags);
Search.submitAndClose(id, title, length, start, end, source, thumbnail);
} catch(err) {
M.toast({html: "Only numbers are accepted as song start and end parameters..", displayLength: 3000, classes: "red lighten"});
}
@@ -1604,7 +1618,6 @@ function addDynamicListeners() {
var original_length = e.getAttribute("data-video-length");
var parent = e.parentElement.parentElement;
var tags = parent.parentElement.getAttribute("data-tags").split(",");
var start = parseInt(parent.querySelectorAll(".result-start")[0].value);
var end = parseInt(parent.querySelectorAll(".result-end")[0].value);
if(end > original_length) {
@@ -1626,7 +1639,7 @@ function addDynamicListeners() {
var length = parseInt(end) - parseInt(start);
e.parentElement.parentElement.parentElement.remove();
Search.submit(id, title, length, false, 0, 1, start, end, source, thumbnail, tags);
Search.submit(id, title, length, false, 0, 1, start, end, source, thumbnail);
} catch(event) {
M.toast({html: "Only numbers are accepted as song start and end parameters..", displayLength: 3000, classes: "red lighten"});
}
@@ -1654,14 +1667,13 @@ function addDynamicListeners() {
var title = e.getAttribute("data-video-title");
var length = e.getAttribute("data-video-length");
var added_by = e.getAttribute("data-added-by");
var tags = e.getAttribute("data-tags");
var source = "youtube";
var thumbnail;
if(e.getAttribute("data-video-source") != undefined) {
source = "soundcloud";
thumbnail = e.getAttribute("data-type-thumbnail");
}
Search.submit(id, title, parseInt(length), false, 0, 1, 0, parseInt(length), source, thumbnail, tags);
Search.submit(id, title, parseInt(length), false, 0, 1, 0, parseInt(length), source, thumbnail);
if(added_by == "user") {
number_suggested = number_suggested - 1;
if(number_suggested < 0) number_suggested = 0;

View File

@@ -48,12 +48,12 @@ var Search = {
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&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,tags,thumbnails))&key="+api_key.youtube+"&id=";
var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key="+api_key.youtube+"&id=";
if(related) {
var yt_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&relatedToVideoId="+keyword+"&type=video&key="+api_key.youtube;
var vid_url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+api_key.youtube+"&id=";
}
//https://www.googleapis.com/youtube/v3/videos?key={API-key}&fields=items(snippet(title,description,tags))&part=snippet&id={video_id}
//https://www.googleapis.com/youtube/v3/videos?key={API-key}&fields=items(snippet(title,description))&part=snippet&id={video_id}
Helper.addClass(document.querySelector("#search-btn .material-icons"), "hide");
Helper.removeClass("#search_loader", "hide");
@@ -108,8 +108,6 @@ var Search = {
var id=song.id;
duration = duration.replace("PT","").replace("H","h ").replace("M","m ").replace("S","s");
var thumb=song.snippet.thumbnails.medium.url;
var tags = "";
if(song.snippet.tags != undefined) tags = song.snippet.tags.join(",");
//$("#results").append(result_html);
var songs = pre_result.cloneNode(true);
songs.querySelector(".search-title").innerText = title;
@@ -121,7 +119,6 @@ var Search = {
songs.querySelector("#add-many").setAttribute("data-video-length", secs);
//$($(songs).querySelector("div")[0]).setAttribute("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
songs.querySelector("#temp-results").setAttribute("data-video-id", id);
songs.querySelector("#temp-results").setAttribute("data-tags", tags.toLowerCase());
songs.querySelector("#temp-results").setAttribute("data-video-title", enc_title);
songs.querySelector("#temp-results").setAttribute("data-video-length", secs);
songs.querySelector(".open-externally").setAttribute("href", "https://www.youtube.com/watch?v=" + id);
@@ -248,7 +245,6 @@ var Search = {
songs.querySelector("#add-many").setAttribute("data-video-title", enc_title);
songs.querySelector("#add-many").setAttribute("data-video-length", secs);
//$($(songs).querySelector("div")[0]).setAttribute("onclick", "submitAndClose('"+id+"','"+enc_title+"',"+secs+");");
songs.querySelector("#temp-results").setAttribute("data-tags", song.genre.toLowerCase());
songs.querySelector("#temp-results").setAttribute("data-video-id", id);
songs.querySelector("#temp-results").setAttribute("data-video-title", enc_title);
songs.querySelector("#temp-results").setAttribute("data-video-length", secs);
@@ -445,8 +441,8 @@ var Search = {
}
},
submitAndClose: function(id,title,duration, start, end, source, thumbnail, tags){
Search.submit(id,title, duration, false, 0, 1, start, end, source, thumbnail, tags);
submitAndClose: function(id,title,duration, start, end, source, thumbnail){
Search.submit(id,title, duration, false, 0, 1, start, end, source, thumbnail);
Helper.setHtml("#results", '');
Search.showSearch();
document.getElementById("search").value = "";
@@ -649,9 +645,9 @@ addVideos: function(ids){
});
},
submit: function(id,title,duration, playlist, num, full_num, start, end, source, thumbnail, tags){
submit: function(id,title,duration, playlist, num, full_num, start, end, source, thumbnail){
if((client || Helper.mobilecheck()) && !socket_connected) {
add_ajax(id, title, duration, playlist, num, full_num, start, end, source, thumbnail, tags);
add_ajax(id, title, duration, playlist, num, full_num, start, end, source, thumbnail);
return;
}
if(offline && document.getElementsByName("addsongs")[0].checked && document.getElementsByName("addsongs")[0].disabled){
@@ -688,8 +684,7 @@ submit: function(id,title,duration, playlist, num, full_num, start, end, source,
list: chan.toLowerCase(),
duration: duration,
source: source,
thumbnail: thumbnail,
tags: tags
thumbnail: thumbnail
});
}//[id, decodeURIComponent(title), adminpass, duration, playlist]);
},

View File

@@ -63,7 +63,7 @@ var Suggestions = {
Helper.removeClass("#suggest-song-html", "hide");
}
var get_url = "https://www.googleapis.com/youtube/v3/search?part=snippet&relatedToVideoId="+id+"&type=video&key="+api_key.youtube;
var video_urls = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,statistics&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,tags,thumbnails))&key="+api_key.youtube+"&id=";
var video_urls = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,statistics&fields=pageInfo,items(id,contentDetails,snippet(categoryId,channelTitle,publishedAt,title,description,thumbnails))&key="+api_key.youtube+"&id=";
Helper.ajax({
type: "GET",
@@ -93,7 +93,6 @@ var Suggestions = {
duration = Helper.secondsToOther(Search.durationToSeconds(duration));
var video_id = song.id;
var video_title = song.snippet.title;
var tags = song.snippet.tags;
var viewCount = 0;
try {
viewCount = song.statistics.viewCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -102,7 +101,7 @@ var Suggestions = {
}
try {
document.getElementById("suggest-song-html").insertAdjacentHTML("beforeend", List.generateSong({id: video_id, title: video_title, length: length, duration: duration, votes: viewCount, extra: "Views", source: "youtube", tags:tags}, false, false, false));
document.getElementById("suggest-song-html").insertAdjacentHTML("beforeend", List.generateSong({id: video_id, title: video_title, length: length, duration: duration, votes: viewCount, extra: "Views", source: "youtube"}, false, false, false));
} catch(e) {}
}
}