Merge pull request #1629 from tenpura-shrimp/searchui

Add ui for search sort and filter

assets/css/default.css

@@ -628,3 +628,6 @@ body.dark-theme {
   }
 }
 
+#filters {
+  display: none;
+}

assets/js/search.js

@@ -0,0 +1,13 @@
+function toggle_comments(event) {
+    var target = event.target;
+    var body = document.getElementById('filters');
+    if (body.style.display === 'flex') {
+        target.innerHTML = '[ + ]';
+        body.style.display = 'none';
+    } else {
+        target.innerHTML = '[ - ]';
+        body.style.display = 'flex';
+    }
+}
+
+document.getElementById('togglefilters').onclick = toggle_comments;

locales/en-US.json

@@ -383,5 +383,32 @@
     "Videos": "Videos",
     "Playlists": "Playlists",
     "Community": "Community",
+    "relevance": "Relevance",
+    "rating": "Rating",
+    "date": "Upload date",
+    "views": "View count",
+    "content_type": "Type",
+    "duration": "Duration",
+    "features": "Features",
+    "sort": "Sort By",
+    "hour": "Last Hour",
+    "today": "Today",
+    "week": "This week",
+    "month": "This month",
+    "year": "This year",
+    "video": "Video",
+    "channel": "Channel",
+    "playlist": "Playlist",
+    "movie": "Movie",
+    "show": "Show",
+    "hd": "HD",
+    "subtitles": "Subtitles/CC",
+    "creative_commons": "Creative Commons",
+    "3d": "3D",
+    "live": "Live",
+    "4k": "4K",
+    "location": "Location",
+    "hdr": "HDR",
+    "filter": "Filter",
     "Current version: ": "Current version: "
 }

src/invidious/routes/playlists.cr

@@ -267,7 +267,7 @@ class Invidious::Routes::Playlists < Invidious::Routes::BaseRoute
     query = env.params.query["q"]?
     if query
       begin
-        search_query, count, items = process_search_query(query, page, user, region: nil)
+        search_query, count, items, operators = process_search_query(query, page, user, region: nil)
         videos = items.select { |item| item.is_a? SearchVideo }.map { |item| item.as(SearchVideo) }
       rescue ex
         videos = [] of SearchVideo

src/invidious/routes/search.cr

@@ -48,11 +48,17 @@ class Invidious::Routes::Search < Invidious::Routes::BaseRoute
     user = env.get? "user"
 
     begin
-      search_query, count, videos = process_search_query(query, page, user, region: nil)
+      search_query, count, videos, operators = process_search_query(query, page, user, region: nil)
     rescue ex
       return error_template(500, ex)
     end
 
+    operator_hash = {} of String => String
+    operators.each do |operator|
+      key, value = operator.downcase.split(":")
+      operator_hash[key] = value
+    end
+
     env.set "search", query
     templated "search"
   end

src/invidious/search.cr

@@ -445,5 +445,5 @@ def process_search_query(query, page, user, region)
     count, items = search(search_query, page, search_params, region).as(Tuple)
   end
 
-  {search_query, count, items}
+  {search_query, count, items, operators}
 end

src/invidious/views/search.ecr

@@ -2,6 +2,102 @@
 <title><%= search_query.not_nil!.size > 30 ? HTML.escape(query.not_nil![0,30].rstrip(".") + "...") : HTML.escape(query.not_nil!) %> - Invidious</title>
 <% end %>
 
+<h3>
+    <a id="togglefilters" href="javascript:void(0)">[ + ]</a>
+    <%= translate(locale, "filter") %>
+</h3>
+
+<noscript>
+    <style>
+        #filters {
+            display: flex;
+        }
+    </style>
+</noscript>
+<div id="filters" class="pure-g h-box">
+    <div class="pure-u-1-3 pure-u-md-1-5">
+        <b><%= translate(locale, "date") %></b>
+        <hr/>
+        <% ["hour", "today", "week", "month", "year"].each do |date| %>
+            <div class="pure-u-1 pure-md-1-5">
+                <% if operator_hash.fetch("date", "all") == date %>
+                    <b><%= translate(locale, date) %></b>
+                <% else %>
+                    <a href="/search?q=<%= HTML.escape(query.not_nil!.gsub(/ ?date:[a-z]+/, "") + " date:" + date) %>&page=<%= page %>">
+                        <%= translate(locale, date) %>
+                    </a>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+    <div class="pure-u-1-3 pure-u-md-1-5">
+        <b><%= translate(locale, "content_type") %></b>
+        <hr/>
+        <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %>
+            <div class="pure-u-1 pure-md-1-5">
+                <% if operator_hash.fetch("content_type", "all") == content_type %>
+                    <b><%= translate(locale, content_type) %></b>
+                <% else %>
+                    <a href="/search?q=<%= HTML.escape(query.not_nil!.gsub(/ ?content_type:[a-z]+/, "") + " content_type:" + content_type) %>&page=<%= page %>">
+                        <%= translate(locale, content_type) %>
+                    </a>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+    <div class="pure-u-1-3 pure-u-md-1-5">
+        <b><%= translate(locale, "duration") %></b>
+        <hr/>
+        <% ["short", "long"].each do |duration| %>
+            <div class="pure-u-1 pure-md-1-5">
+                <% if operator_hash.fetch("duration", "all") == duration %>
+                    <b><%= translate(locale, duration) %></b>
+                <% else %>
+                    <a href="/search?q=<%= HTML.escape(query.not_nil!.gsub(/ ?duration:[a-z]+/, "") + " duration:" + duration) %>&page=<%= page %>">
+                        <%= translate(locale, duration) %>
+                    </a>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+    <div class="pure-u-1-3 pure-u-md-1-5">
+        <b><%= translate(locale, "features") %></b>
+        <hr/>
+        <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %>
+            <div class="pure-u-1 pure-md-1-5">
+                <% if operator_hash.fetch("features", "all").includes?(feature) %>
+                    <b><%= translate(locale, feature) %></b>
+                <% elsif operator_hash.has_key?("features") %>
+                    <a href="/search?q=<%= HTML.escape(query.not_nil!.gsub(/features:/, "features:" + feature + ",")) %>&page=<%= page %>">
+                        <%= translate(locale, feature) %>
+                    </a>
+                <% else %>
+                    <a href="/search?q=<%= HTML.escape(query.not_nil! + " features:" + feature) %>&page=<%= page %>">
+                        <%= translate(locale, feature) %>
+                    </a>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+    <div class="pure-u-1-3 pure-u-md-1-5">
+        <b><%= translate(locale, "sort") %></b>
+        <hr/>
+        <% ["relevance", "rating", "date", "views"].each do |sort| %>
+            <div class="pure-u-1 pure-md-1-5">
+                <% if operator_hash.fetch("sort", "relevance") == sort %>
+                    <b><%= translate(locale, sort) %></b>
+                <% else %>
+                    <a href="/search?q=<%= HTML.escape(query.not_nil!.gsub(/ ?sort:[a-z]+/, "") + " sort:" + sort) %>&page=<%= page %>">
+                        <%= translate(locale, sort) %>
+                    </a>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+</div>
+
+<hr/>
+
 <div class="pure-g h-box v-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page > 1 %>
@@ -45,3 +141,4 @@
         <% end %>
     </div>
 </div>
+<script src="/js/search.js?v=<%= ASSET_COMMIT %>"></script>