Modal and filter somewhat working

server/handlers/list_change.js

@@ -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);

server/handlers/search.js

@@ -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 {
-                    if(typeof(callback) == "function") {
+                    db.collection(channel).update({"id": song_generated.id}, {
-                        callback(song_generated, true);
+                        $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;

server/public/assets/css/style.css

@@ -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);
 }

server/public/assets/js/channel.js

@@ -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"));

server/public/assets/js/functions.js

@@ -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();

server/public/assets/js/list.js

@@ -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){
+        if(list && !filtered){
-            song.querySelector("#list-song")
+            //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();

server/public/assets/js/listeners.js

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

server/public/assets/js/search.js

@@ -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){
+submitAndClose: function(id,title,duration, start, end, source, thumbnail){
-    Search.submit(id,title, duration, false, 0, 1, start, end, source, thumbnail, tags);
+    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,
+            thumbnail: thumbnail
-            tags: tags
         });
     }//[id, decodeURIComponent(title), adminpass, duration, playlist]);
 },

server/public/assets/js/suggestions.js

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

server/public/partials/channel/modal.handlebars

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

server/public/partials/channel/tabs.handlebars

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

server/routing/client/api.js

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