Make duration search filters more like YouTube

See #2464

locales/en-US.json

@@ -412,8 +412,9 @@
     "playlist": "Playlist",
     "movie": "Movie",
     "show": "Show",
-    "short": "Short (< 4 minutes)",
-    "long": "Long (> 20 minutes)",
+    "search_filters_duration_short": "Under 4 minutes",
+    "search_filters_duration_between": "4 - 20 minutes",
+    "search_filters_duration_long": "Over 20 minutes",
     "hd": "HD",
     "subtitles": "Subtitles/CC",
     "creative_commons": "Creative Commons",

src/invidious/search.cr

@@ -91,10 +91,12 @@ def produce_search_params(page = 1, sort : String = "relevance", date : String =
   end
 
   case duration
-  when "short"
+  when "search_filters_duration_short"
     object["2:embedded"].as(Hash)["3:varint"] = 1_i64
-  when "long"
+  when "search_filters_duration_long"
     object["2:embedded"].as(Hash)["3:varint"] = 2_i64
+  when "search_filters_duration_between"
+    object["2:embedded"].as(Hash)["3:varint"] = 3_i64
   else nil # Ignore
   end
 

src/invidious/views/components/search-filters/filter-column.ecr

@@ -20,7 +20,7 @@
 
                 <% if operators.fetch(filter_name, selected_default) == filter %>
                     <% if allow_removal %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&#{filter_name}=[a-z]+/, "")}"%>">
+                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&#{filter_name}=[a-z_]+/, "")}"%>">
                             <b><%= translate(locale, filter) %></b>
                             <i class="remove-filter icon ion-md-close"></i>
                         </a>
@@ -28,7 +28,7 @@
                         <b><%= translate(locale, filter) %></b>
                     <% end %>
                 <% else %>
-                    <a href="<%= base_url + "#{filter_params.gsub(/&#{filter_name}=[a-z]+/, "")}&#{filter_name}=#{filter}"%>">
+                    <a href="<%= base_url + "#{filter_params.gsub(/&#{filter_name}=[a-z_]+/, "")}&#{filter_name}=#{filter}"%>">
                         <%= translate(locale, filter) %>
                     </a>
                 <% end %>

src/invidious/views/components/search-filters/search-filters.ecr

@@ -27,7 +27,7 @@
         <% filter_name = "content_type" %>
         <%= rendered "components/search-filters/filter-column" -%>
 
-        <% filters = ["short", "long"] %>
+        <% filters = ["search_filters_duration_short", "search_filters_duration_between", "search_filters_duration_long"] %>
         <% filter_name = "duration" %>
         <%= rendered "components/search-filters/filter-column" -%>