Add advanced title filter

- Timeout filter-requests based on computer instead of api

server/public/assets/css/style.css

@@ -390,6 +390,10 @@ li.disabled span {
     margin: auto;
 }
 
+.category-advanced {
+    margin-top: 0px;
+}
+
 .bottom-filter-container {
     padding-top: 15px;
 }

server/public/assets/js/channel.js

@@ -153,6 +153,8 @@ var Channel = {
                 document.getElementById("filtersearch_input").focus();
             }
         });
+
+        M.FormSelect.init(document.querySelector('.category-advanced-select'));
         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

@@ -23,6 +23,11 @@ function removeAllListeners() {
 
 function filterPlaylistElements(page) {
     var value = document.getElementById("filtersearch_input").value;
+    var search_type = document.querySelector(".category-advanced-select").value;
+    if(search_type != "category" && search_type != "title") {
+        document.querySelector(".filter-results").innerHTML = "Something went wrong with fetching data..";
+        return;
+    }
     if(value == "") return;
     Helper.ajax({
         type: "POST",
@@ -32,8 +37,8 @@ function filterPlaylistElements(page) {
         url: "/api/search/" + chan.toLowerCase(),
         data: {
             searchQuery: value,
-            token: zoff_api_token,
+            page: page,
-            page: page
+            type: search_type
         },
         success: function(data){
             var json = JSON.parse(data);
@@ -49,10 +54,14 @@ function filterPlaylistElements(page) {
                 document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
             }
         },
-        error: function() {
+        error: function(e) {
-            toast("Couldn't find any items with those tags..", "red");
+            if(e.status != 429) {
+                toast("Couldn't find any items with those tags..", "red");
 
-            document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
+                document.querySelector(".filter-results").innerHTML = "Couldn't find any items with those tags..";
+            } else {
+                toast("You are doing that too much..", "red");
+            }
         }
     });
 }

server/public/partials/channel/modal.handlebars

@@ -1,43 +1,43 @@
 {{#unless client}}
-    <div id="embed" class="modal">
+<div id="embed" class="modal">
-        <div class="modal-content">
+    <div class="modal-content">
-            <h4>Embed</h4>
+        <h4>Embed</h4>
-            <p>Copy the code in the textarea, and paste on your website.</p>
+        <p>Copy the code in the textarea, and paste on your website.</p>
-            <p>
+        <p>
-                <label>
+            <label>
-                    <input type="checkbox" id="autoplay" checked="checked" />
+                <input type="checkbox" id="autoplay" checked="checked" />
-                    <span for="autoplay" class="padding_right_26">Autoplay</span>
+                <span for="autoplay" class="padding_right_26">Autoplay</span>
-                </label>
+            </label>
-                <label for="width_embed" class="embed-label">Width</label>
+            <label for="width_embed" class="embed-label">Width</label>
-                <input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
+            <input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
-                <label for="height_embed" class="padding_left_6 embed-label">Height</label>
+            <label for="height_embed" class="padding_left_6 embed-label">Height</label>
-                <input type="number" value="400" id="height_embed" class="settings_embed" min="1" />
+            <input type="number" value="400" id="height_embed" class="settings_embed" min="1" />
-                <label for="color_embed" class="padding_left_6 embed-label">Color</label>
+            <label for="color_embed" class="padding_left_6 embed-label">Color</label>
-                <input type="color" id="color_embed" class="settings_embed" value="#2d2d2d" />
+            <input type="color" id="color_embed" class="settings_embed" value="#2d2d2d" />
-                <label>
+            <label>
-                    <input type="checkbox" id="videoonly" class="checkbox" />
+                <input type="checkbox" id="videoonly" class="checkbox" />
-                    <span for="videoonly" class="padding_right_26">Video-only</span>
+                <span for="videoonly" class="padding_right_26">Video-only</span>
-                </label>
+            </label>
-                <label>
+            <label>
-                    <input type="checkbox" id="localmode" class="checkbox" />
+                <input type="checkbox" id="localmode" class="checkbox" />
-                    <span for="localmode" class="padding_right_26">Local-mode</span>
+                <span for="localmode" class="padding_right_26">Local-mode</span>
-                </label>
+            </label>
-            </p>
+        </p>
-            <textarea id="embed-area"></textarea>
+        <textarea id="embed-area"></textarea>
-            <div class="embed-preview"></div>
+        <div class="embed-preview"></div>
-        </div>
-        <div class="modal-footer">
-            <a href="#!" class="waves-effect waves-green btn-flat preview-embed">Preview</a>
-            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
-        </div>
     </div>
-    <div id="channel-share-modal" class="modal">
+    <div class="modal-footer">
-        <div class="modal-content">
+        <a href="#!" class="waves-effect waves-green btn-flat preview-embed">Preview</a>
-            <p>To join this channel, go to</p>
+        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
-            <p><span id="channel-name-join"></span></p>
-            <img id="share-join-qr" alt="QR code for joining" title="Link to join this Zoff channel" src="https://chart.googleapis.com/chart?chs=221x221&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.me" />
-        </div>
     </div>
+</div>
+<div id="channel-share-modal" class="modal">
+    <div class="modal-content">
+        <p>To join this channel, go to</p>
+        <p><span id="channel-name-join"></span></p>
+        <img id="share-join-qr" alt="QR code for joining" title="Link to join this Zoff channel" src="https://chart.googleapis.com/chart?chs=221x221&amp;cht=qr&amp;choe=UTF-8&amp;chld=L%7C1&amp;chl=http://zoff.me" />
+    </div>
+</div>
 {{/unless}}
 <div id="advanced_filter" class="modal modal-fixed-footer">
     <div class="modal-content">
@@ -45,8 +45,16 @@
         <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 s8 m9" name="filtersearch_value" placeholder="Find.." id="filtersearch_input" autocomplete="off" />
+                <input type="text" class="col s4 m5" name="filtersearch_value" placeholder="Find.." id="filtersearch_input" autocomplete="off" />
-                <a href="#" class="waves-effect waves-light btn col s4 m2 orange submit-filter-search">Search</a>
+                <div class="input-field col s4 m3 category-advanced">
+                    <select class="category-advanced-select">
+                        <option value="" disabled>Type</option>
+                        <option value="category" selected>Category</option>
+                        <option value="title">Title</option>
+                    </select>
+                </div>
+                <input type="submit" class="hide" />
+                <a href="#" class="waves-effect waves-light btn col s4 m3 orange submit-filter-search">Search</a>
             </form>
         </div>
         <div class="filter-results">

server/routing/client/api.js

@@ -754,6 +754,10 @@ router.route('/api/search/:channel_name/').post(function(req, res) {
             page = req.body.page;
         }
         var searchQuery = "";
+        var searchByCategory = true;
+        if(req.body.hasOwnProperty("type")) {
+            searchByCategory = req.body.type == "category";
+        }
         if(req.body.searchQuery == undefined || req.body.searchQuery == "") {
             var to_send = error.formatting;
             to_send.results = [result];
@@ -805,9 +809,19 @@ router.route('/api/search/:channel_name/').post(function(req, res) {
                             res.status(403).send(error.not_authenticated);
                             return;
                         }
-                        var query = db.collection(channel_name).find({tags: {
+
+                        var querySubObject = {
                             $regex : ".*" + searchQuery + ".*"
-                        }});
+                        };
+                        var queryObject = {};
+                        if(searchByCategory) {
+                            queryObject.tags = querySubObject;
+                        } else {
+                            queryObject.title = querySubObject;
+                            queryObject.title.$regex = searchQuery;
+                            queryObject.title.$options = 'i';
+                        }
+                        var query = db.collection(channel_name).find(queryObject);
                         paginate(query, { limit : 30, page : page }, function(err, result) {
                             if(result.items.length == 0) {
                                 res.status(404).send(error.not_found.local);