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

Modal and filter somewhat working

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
server/handlers/list_change.js
View File

@@ -459,9 +459,11 @@ function add_function(arr, coll, guid, offline, socket) {
var thumbnail = arr.thumbnail != undefined ? arr.thumbnail : undefined;
Frontpage.update_frontpage(coll, id, title, thumbnail, arr.source);
if(source != "soundcloud") Search.get_correct_info(new_song, coll, false);
else if(source == "soundcloud") Search.get_genres(new_song, coll);
} else {
io.to(coll).emit("channel", {type: "added", value: new_song});
if(source != "soundcloud") Search.get_correct_info(new_song, coll, true);
else if(source == "soundcloud") Search.get_genres(new_song, coll);
}
db.collection("frontpage_lists").update({_id:coll}, {$inc:{count:1}, $set:{accessed: Functions.get_time()}}, {upsert:true}, function(err, docs){});
List.getNextSong(coll, undefined);

37
server/handlers/search.js
View File

@@ -3,6 +3,7 @@ var time_regex = /P((([0-9]*\.?[0-9]*)Y)?(([0-9]*\.?[0-9]*)M)?(([0-9]*\.?[0-9]*)
try {
var keys = require(path.join(__dirname, '../config/api_key.js'));
var key = keys.youtube;
var soundcloudKey = keys.soundcloud;
} catch(e) {
console.log("Error - missing file");
console.log("Seems you forgot to create the file api_key.js in /server/config/. Have a look at api_key.example.js.");
@@ -11,11 +12,30 @@ try {
var request = require('request');
var db = require(pathThumbnails + '/handlers/db.js');
function get_genres(song, channel) {
console.log(song);
request("http://api.soundcloud.com/tracks/" + song.id + "?client_id=" + soundcloudKey, function(err, response, body) {
var object = JSON.parse(body);
var genres = object.genre + "," + object.tag_list.replace(/"/g, "");
genres = genres.toLowerCase().split(",");
genres = genres.filter(function (el) {
return el != null;
});
db.collection(channel).update({"id": song.id}, {
$set: {
"tags": genres
}
}, function(e,d) {
});
});
}
function get_correct_info(song_generated, channel, broadcast, callback) {
//channel = channel.replace(/ /g,'');
request({
type: "GET",
url: "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id&key="+key+"&id=" + song_generated.id,
url: "https://www.googleapis.com/youtube/v3/videos?part=contentDetails,snippet,id,topicDetails&key="+key+"&id=" + song_generated.id,
}, function(error, response, body) {
try {
@@ -23,6 +43,13 @@ function get_correct_info(song_generated, channel, broadcast, callback) {
if(resp.items.length == 1) {
var duration = parseInt(durationToSeconds(resp.items[0].contentDetails.duration));
var title = resp.items[0].snippet.localized.title;
var genre = resp.items[0].topicDetails.topicCategories;
genre = genre.join(",");
genre = genre.replace(new RegExp("https://en.wikipedia.org/wiki/", "g"), "");
genre = genre.replace(/_/g, " ").toLowerCase().split(",");
genre = genre.filter(function (el) {
return el != null;
});
if(title != song_generated.title || duration < parseInt(song_generated.duration)) {
if(title != song_generated.title) {
song_generated.title = title;
@@ -38,6 +65,7 @@ function get_correct_info(song_generated, channel, broadcast, callback) {
"start": song_generated.start,
"end": song_generated.end,
"title": song_generated.title,
"tags": genre
}
}, function(err, docs) {
if(broadcast && docs.nModified == 1) {
@@ -55,9 +83,15 @@ function get_correct_info(song_generated, channel, broadcast, callback) {
}
});
} else {
db.collection(channel).update({"id": song_generated.id}, {
$set: {
"tags": genre
}
}, function(e,d) {
if(typeof(callback) == "function") {
callback(song_generated, true);
}
});
}
} else {
findSimilar(song_generated, channel, broadcast, callback)
@@ -213,5 +247,6 @@ function durationToSeconds(duration) {
return hours*60*60+minutes*60+seconds;
}
module.exports.get_genres = get_genres;
module.exports.check_error_video = check_error_video;
module.exports.get_correct_info = get_correct_info;

6
server/public/assets/css/style.css
View File

@@ -1180,7 +1180,7 @@ margin:-1px;
padding-left: 8px;
}
#close_find_form_button {
#close_find_form_button, #open_advanced_filter {
display: flex;
align-self: center;
padding-left: 10px;
@@ -2109,6 +2109,10 @@ nav ul li:hover, nav ul li.active {
height:66px;
margin: 2.5px 0 2.5px -1px !important;
}
.filtered-search-element {
background-color: #2d2d2d;
display: flex;
}
.card:hover{
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12);
}

5
server/public/assets/js/channel.js
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"));

31
server/public/assets/js/functions.js
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();

26
server/public/assets/js/list.js
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();

26
server/public/assets/js/listeners.js
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;

19
server/public/assets/js/search.js
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]);
},

5
server/public/assets/js/suggestions.js
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) {}
}
}

17
server/public/partials/channel/modal.handlebars
View File

@@ -39,6 +39,23 @@
</div>
</div>
{{/unless}}
<div id="advanced_filter" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Advanced</h4>
<p>Here you can search by category. Keep in mind, this uses the category/genre/tags defined by the uploader of the video on YouTube or the song on SoundCloud</p>
<div class="row container">
<form id="filter-form">
<input type="text" class="col s9" name="filtersearch_value" placeholder="Find.." id="filtersearch_input" autocomplete="off" />
<a href="#" class="waves-effect waves-light btn col s2 orange submit-filter-search">Search</a>
</form>
</div>
<div class="filter-results">
</div>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="help" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Help</h4>

1
server/public/partials/channel/tabs.handlebars
View File

@@ -17,6 +17,7 @@
<div class="num_of_found">
<span id="num_found">0</span>/<span id="of_total_found">0</span>
</div>
<a href="#" id="open_advanced_filter"><i class="material-icons">filter_list</i></a>
<a href="#" id="close_find_form_button"><i class="material-icons">clear</i></a>
</form>
</div>

2
server/routing/client/api.js
View File

@@ -755,7 +755,7 @@ router.route('/api/search/:channel_name/').post(function(req, res) {
res.status(400).send(to_send);
return;
}
searchQuery = req.body.searchQuery;
searchQuery = req.body.searchQuery.toLowerCase();
var token = "";
if(req.body.hasOwnProperty("token")) {
token = req.body.token;