Add a user friendly message for when no results are found

assets/css/search.css

@@ -69,6 +69,15 @@ fieldset, legend {
 
 #filters-apply { text-align: end; }
 
+/* Error message */
+
+.no-results-error {
+	text-align: center;
+	line-height: 180%;
+	font-size: 110%;
+	padding: 15px 15px 125px 15px;
+}
+
 /* Responsive rules */
 
 @media only screen and (max-width: 800px) {

locales/en-US.json

@@ -175,7 +175,9 @@
     "Show less": "Show less",
     "Watch on YouTube": "Watch on YouTube",
     "Switch Invidious Instance": "Switch Invidious Instance",
-    "Broken? Try another Invidious Instance": "Broken? Try another Invidious Instance",
+    "search_message_no_results": "No results found.",
+    "search_message_change_filters_or_query": "Try widening your search query and/or changing the filters.",
+    "search_message_use_another_instance": " You can also <a href=\"`x`\">search on another instance</a>.",
     "Hide annotations": "Hide annotations",
     "Show annotations": "Show annotations",
     "Genre: ": "Genre: ",

src/invidious/frontend/misc.cr

@@ -0,0 +1,14 @@
+module Invidious::Frontend::Misc
+  extend self
+
+  def redirect_url(env : HTTP::Server::Context)
+    prefs = env.get("preferences").as(Preferences)
+
+    if prefs.automatic_instance_redirect
+      current_page = env.get?("current_page").as(String)
+      redirect_url = "/redirect?referer=#{current_page}"
+    else
+      redirect_url = "https://redirect.invidious.io#{env.request.resource}"
+    end
+  end
+end

src/invidious/views/search.ecr

@@ -9,18 +9,13 @@
 
   url_prev_page = "/search?q=#{search_query_encoded}&#{filter_params}&page=#{query.page - 1}"
   url_next_page = "/search?q=#{search_query_encoded}&#{filter_params}&page=#{query.page + 1}"
+
+  redirect_url = Invidious::Frontend::Misc.redirect_url(env)
 -%>
 
 <!-- Search redirection and filtering UI -->
-<% if videos.size == 0 %>
-    <h3 style="text-align: center">
-        <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Broken? Try another Invidious Instance!") %></a>
-    </h3>
-<%- else -%>
-    <%= Invidious::Frontend::SearchFilters.generate(query.filters, query.text, query.page, locale) %>
-<%- end -%>
-
-<% if videos.size == 0 %><hr style="margin: 0;"/><% else %><hr/><% end %>
+<%= Invidious::Frontend::SearchFilters.generate(query.filters, query.text, query.page, locale) %>
+<hr/>
 
 <div class="pure-g h-box v-box">
     <div class="pure-u-1 pure-u-lg-1-5">
@@ -36,11 +31,21 @@
     </div>
 </div>
 
-<div class="pure-g">
-    <% videos.each do |item| %>
-        <%= rendered "components/item" %>
-    <% end %>
+<%- if videos.empty? -%>
+<div class="h-box no-results-error">
+    <div>
+        <%= translate(locale, "search_message_no_results") %><br/><br/>
+        <%= translate(locale, "search_message_change_filters_or_query") %><br/><br/>
+        <%= translate(locale, "search_message_use_another_instance", redirect_url) %>
+    </div>
 </div>
+<%- else -%>
+<div class="pure-g">
+    <%- videos.each do |item| -%>
+        <%= rendered "components/item" %>
+    <%- end -%>
+</div>
+<%- end -%>
 
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">