diff --git a/src/index.html b/src/index.html
index 997919912..2d7cd4743 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,8 @@
+
+
Search Filters
+
+
+
+
+
Your Subscription list is currently empty. Start adding subscriptions
diff --git a/src/js/templates.js b/src/js/templates.js
index 644e93f12..9612872ec 100644
--- a/src/js/templates.js
+++ b/src/js/templates.js
@@ -50,6 +50,13 @@ let loadingView = new Vue({
}
});
+let searchFilter = new Vue({
+ el: '#searchFilter',
+ data: {
+ seen: false
+ }
+});
+
let noSubscriptions = new Vue({
el: '#noSubscriptions',
data: {
@@ -377,7 +384,7 @@ let searchView = new Vue({
play: (videoId) => {
loadingView.seen = true;
playVideo(videoId);
-
+
backButtonView.lastView = searchView
},
channel: (channelId) => {
diff --git a/src/js/videos.js b/src/js/videos.js
index add044e1f..1fb11837a 100644
--- a/src/js/videos.js
+++ b/src/js/videos.js
@@ -33,6 +33,12 @@ const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
*/
function search(page = 1) {
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 === '') {
return;
@@ -52,7 +58,10 @@ function search(page = 1) {
invidiousAPI('search', '', {
q: query,
page: page,
- type: 'all',
+ sort_by: searchSortby,
+ date: searchDate,
+ duration: searchDuration,
+ type: searchType,
}, function (data) {
console.log(data);
@@ -219,7 +228,7 @@ function displayChannel(channel) {
let channelData = {};
channelData.channelId = channel.authorId;
- channelData.thumbnail = channel.authorThumbnails[4].url;
+ channelData.thumbnail = "https:" + channel.authorThumbnails[4].url;
channelData.channelName = channel.author;
channelData.description = channel.description;
channelData.subscriberCount = channel.subCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
diff --git a/src/style/darkTheme.css b/src/style/darkTheme.css
index 299392e7d..af72d1924 100644
--- a/src/style/darkTheme.css
+++ b/src/style/darkTheme.css
@@ -85,6 +85,14 @@ input[type=text] {
color: #E0E0E0;
}
+.filterButton {
+ color: #E0E0E0;
+}
+
+#searchFilter {
+ background-color: #424242;
+}
+
.jumpToInput {
border-bottom: 1px solid #E0E0E0;
}
diff --git a/src/style/lightTheme.css b/src/style/lightTheme.css
index 287a6b4a9..bc2090c74 100644
--- a/src/style/lightTheme.css
+++ b/src/style/lightTheme.css
@@ -72,6 +72,14 @@ body {
color: black;
}
+.filterButton {
+ color: black;
+}
+
+#searchFilter {
+ background-color: white;
+}
+
.jumpToInput {
border-bottom: 1px solid #757575;
}
diff --git a/src/style/main.css b/src/style/main.css
index cb185c77e..2c4c4cf7d 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -118,17 +118,31 @@ a {
.searchBar {
position: absolute;
- right: 135px;
+ right: 100px;
top: 0;
- width: 50%;
+ width: 600px;
}
.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 {
text-decoration: none;
+ cursor: pointer;
+}
+
+.filterButton {
+ text-decoration: none;
+ margin-right: 10px;
+ cursor: pointer;
}
#sideNav {