Add Advanced Search Filtering

src/index.html

@@ -38,7 +38,8 @@
     <i v-on:click='back' v-if="canShowBackButton" class="fas fa-arrow-left" id="backButton"></i>
     <div class="searchBar">
       <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>&nbsp;&nbsp;&nbsp;&nbsp;Filter</span>
+      <span class='searchButton' onclick='parseSearchText()'><i class="fas fa-search" style='margin-right: -10px; cursor: pointer'></i>&nbsp;&nbsp;&nbsp;&nbsp;Search</span>
     </div>
     <img src='icons/iconBlackSmall.png' id='menuIcon' /> &nbsp;
     <img src='icons/textBlackSmall.png' id='menuText' />
@@ -64,6 +65,34 @@
     </div>
   </div>
   <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'>
       <h2 class="message">
         Your Subscription list is currently empty.  Start adding subscriptions

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) => {

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

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

src/style/lightTheme.css

@@ -72,6 +72,14 @@ body {
     color: black;
 }
 
+.filterButton {
+    color: black;
+}
+
+#searchFilter {
+  background-color: white;
+}
+
 .jumpToInput {
     border-bottom: 1px solid #757575;
 }

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 {