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

Add advanced title filter

Browse Source 
- Timeout filter-requests based on computer instead of api
This commit is contained in:
Kasper Rynning-Tønnesen
2019-03-10 21:40:58 +01:00
parent cff3faf820
commit e58f569f80
5 changed files with 83 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
server/public/assets/js/channel.js
View File

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

19
server/public/assets/js/functions.js
View File

@@ -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() {
toast("Couldn't find any items with those tags..", "red");
error: function(e) {
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");
}
}
});
}

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

@@ -1,43 +1,43 @@
{{#unless client}}
<div id="embed" class="modal">
<div class="modal-content">
<h4>Embed</h4>
<p>Copy the code in the textarea, and paste on your website.</p>
<p>
<label>
<input type="checkbox" id="autoplay" checked="checked" />
<span for="autoplay" class="padding_right_26">Autoplay</span>
</label>
<label for="width_embed" class="embed-label">Width</label>
<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>
<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>
<input type="color" id="color_embed" class="settings_embed" value="#2d2d2d" />
<label>
<input type="checkbox" id="videoonly" class="checkbox" />
<span for="videoonly" class="padding_right_26">Video-only</span>
</label>
<label>
<input type="checkbox" id="localmode" class="checkbox" />
<span for="localmode" class="padding_right_26">Local-mode</span>
</label>
</p>
<textarea id="embed-area"></textarea>
<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 id="embed" class="modal">
<div class="modal-content">
<h4>Embed</h4>
<p>Copy the code in the textarea, and paste on your website.</p>
<p>
<label>
<input type="checkbox" id="autoplay" checked="checked" />
<span for="autoplay" class="padding_right_26">Autoplay</span>
</label>
<label for="width_embed" class="embed-label">Width</label>
<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>
<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>
<input type="color" id="color_embed" class="settings_embed" value="#2d2d2d" />
<label>
<input type="checkbox" id="videoonly" class="checkbox" />
<span for="videoonly" class="padding_right_26">Video-only</span>
</label>
<label>
<input type="checkbox" id="localmode" class="checkbox" />
<span for="localmode" class="padding_right_26">Local-mode</span>
</label>
</p>
<textarea id="embed-area"></textarea>
<div class="embed-preview"></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 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-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" />
<a href="#" class="waves-effect waves-light btn col s4 m2 orange submit-filter-search">Search</a>
<input type="text" class="col s4 m5" name="filtersearch_value" placeholder="Find.." id="filtersearch_input" autocomplete="off" />
<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">

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

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