mirror of https://github.com/FreeTubeApp/FreeTube
Add Advanced Search Filtering
This commit is contained in:
parent
552f2d326c
commit
3a1fcdfea2
|
@ -38,7 +38,8 @@
|
||||||
<i v-on:click='back' v-if="canShowBackButton" class="fas fa-arrow-left" id="backButton"></i>
|
<i v-on:click='back' v-if="canShowBackButton" class="fas fa-arrow-left" id="backButton"></i>
|
||||||
<div class="searchBar">
|
<div class="searchBar">
|
||||||
<input id='search' class="search" type="text" placeholder="Search / Go to URL">
|
<input id='search' class="search" type="text" placeholder="Search / Go to URL">
|
||||||
<i onclick='parseSearchText()' class="fas fa-search searchButton" style='margin-right: -10px; cursor: pointer'></i>
|
<span class='filterButton' onclick='searchFilter.seen = !searchFilter.seen'><i class="fas fa-filter" style='margin-right: -10px; cursor: pointer'></i> Filter</span>
|
||||||
|
<span class='searchButton' onclick='parseSearchText()'><i class="fas fa-search" style='margin-right: -10px; cursor: pointer'></i> Search</span>
|
||||||
</div>
|
</div>
|
||||||
<img src='icons/iconBlackSmall.png' id='menuIcon' />
|
<img src='icons/iconBlackSmall.png' id='menuIcon' />
|
||||||
<img src='icons/textBlackSmall.png' id='menuText' />
|
<img src='icons/textBlackSmall.png' id='menuText' />
|
||||||
|
@ -64,6 +65,34 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
|
<div id='searchFilter' class='center' v-show='seen'>
|
||||||
|
<h2>Search Filters</h2>
|
||||||
|
<select id='searchSortby' class='select-text'>
|
||||||
|
<option value="relevance">Most Relevant</option>
|
||||||
|
<option value="rating">Rating</option>
|
||||||
|
<option value="upload_date">Upload Date</option>
|
||||||
|
<option value="view_count">View Count</option>
|
||||||
|
</select>
|
||||||
|
<select id='searchDate' class='select-text'>
|
||||||
|
<option value="">Any Time</option>
|
||||||
|
<option value="hour">Last Hour</option>
|
||||||
|
<option value="today">Today</option>
|
||||||
|
<option value="week">This Week</option>
|
||||||
|
<option value="month">This Month</option>
|
||||||
|
<option value="year">This Year</option>
|
||||||
|
</select>
|
||||||
|
<select id='searchType' class='select-text'>
|
||||||
|
<option value="all">All Types</option>
|
||||||
|
<option value="video">Videos</option>
|
||||||
|
<option value="channel">Channels</option>
|
||||||
|
<option value="playlist">Playlists</option>
|
||||||
|
</select>
|
||||||
|
<select id='searchDuration' class='select-text'>
|
||||||
|
<option value="">All Durations</option>
|
||||||
|
<option value="short">Short (< 4 minutes)</option>
|
||||||
|
<option value="long">Long (> 20 minutes)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
<div id='noSubscriptions' v-if='seen'>
|
<div id='noSubscriptions' v-if='seen'>
|
||||||
<h2 class="message">
|
<h2 class="message">
|
||||||
Your Subscription list is currently empty. Start adding subscriptions
|
Your Subscription list is currently empty. Start adding subscriptions
|
||||||
|
|
|
@ -50,6 +50,13 @@ let loadingView = new Vue({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let searchFilter = new Vue({
|
||||||
|
el: '#searchFilter',
|
||||||
|
data: {
|
||||||
|
seen: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
let noSubscriptions = new Vue({
|
let noSubscriptions = new Vue({
|
||||||
el: '#noSubscriptions',
|
el: '#noSubscriptions',
|
||||||
data: {
|
data: {
|
||||||
|
@ -377,7 +384,7 @@ let searchView = new Vue({
|
||||||
play: (videoId) => {
|
play: (videoId) => {
|
||||||
loadingView.seen = true;
|
loadingView.seen = true;
|
||||||
playVideo(videoId);
|
playVideo(videoId);
|
||||||
|
|
||||||
backButtonView.lastView = searchView
|
backButtonView.lastView = searchView
|
||||||
},
|
},
|
||||||
channel: (channelId) => {
|
channel: (channelId) => {
|
||||||
|
|
|
@ -33,6 +33,12 @@ const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||||
*/
|
*/
|
||||||
function search(page = 1) {
|
function search(page = 1) {
|
||||||
const query = document.getElementById('search').value;
|
const query = document.getElementById('search').value;
|
||||||
|
const searchSortby = document.getElementById('searchSortby').value;
|
||||||
|
const searchType = document.getElementById('searchType').value;
|
||||||
|
const searchDate = document.getElementById('searchDate').value;
|
||||||
|
const searchDuration = document.getElementById('searchDuration').value;
|
||||||
|
|
||||||
|
searchFilter.seen = false;
|
||||||
|
|
||||||
if (query === '') {
|
if (query === '') {
|
||||||
return;
|
return;
|
||||||
|
@ -52,7 +58,10 @@ function search(page = 1) {
|
||||||
invidiousAPI('search', '', {
|
invidiousAPI('search', '', {
|
||||||
q: query,
|
q: query,
|
||||||
page: page,
|
page: page,
|
||||||
type: 'all',
|
sort_by: searchSortby,
|
||||||
|
date: searchDate,
|
||||||
|
duration: searchDuration,
|
||||||
|
type: searchType,
|
||||||
}, function (data) {
|
}, function (data) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
||||||
|
@ -219,7 +228,7 @@ function displayChannel(channel) {
|
||||||
let channelData = {};
|
let channelData = {};
|
||||||
|
|
||||||
channelData.channelId = channel.authorId;
|
channelData.channelId = channel.authorId;
|
||||||
channelData.thumbnail = channel.authorThumbnails[4].url;
|
channelData.thumbnail = "https:" + channel.authorThumbnails[4].url;
|
||||||
channelData.channelName = channel.author;
|
channelData.channelName = channel.author;
|
||||||
channelData.description = channel.description;
|
channelData.description = channel.description;
|
||||||
channelData.subscriberCount = channel.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
channelData.subscriberCount = channel.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||||
|
|
|
@ -85,6 +85,14 @@ input[type=text] {
|
||||||
color: #E0E0E0;
|
color: #E0E0E0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
color: #E0E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchFilter {
|
||||||
|
background-color: #424242;
|
||||||
|
}
|
||||||
|
|
||||||
.jumpToInput {
|
.jumpToInput {
|
||||||
border-bottom: 1px solid #E0E0E0;
|
border-bottom: 1px solid #E0E0E0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -72,6 +72,14 @@ body {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchFilter {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.jumpToInput {
|
.jumpToInput {
|
||||||
border-bottom: 1px solid #757575;
|
border-bottom: 1px solid #757575;
|
||||||
}
|
}
|
||||||
|
|
|
@ -118,17 +118,31 @@ a {
|
||||||
|
|
||||||
.searchBar {
|
.searchBar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 135px;
|
right: 100px;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 50%;
|
width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchBar input {
|
.searchBar input {
|
||||||
width: 90%;
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchFilter {
|
||||||
|
width: 90%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
-webkit-box-shadow: 4px -2px 51px -6px rgba(0, 0, 0, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchButton {
|
.searchButton {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sideNav {
|
#sideNav {
|
||||||
|
|
Loading…
Reference in New Issue