Merge 577058617f into 4782a67038

assets/css/default.css

@@ -816,3 +816,9 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+
+/* 404 TV Box */
+.error-page {
+  width: 50%;
+  height: auto;
+}

src/invidious/helpers/errors.cr

@@ -74,6 +74,8 @@ def error_template_helper(env : HTTP::Server::Context, status_code : Int32, exce
   # Don't show the usual "next steps" widget. The same options are
   # proposed above the error message, just worded differently.
   next_steps = ""
+  unfound_tv_box_dark_theme = File.read("assets/404_tv_box_dark_theme.svg")
+  unfound_tv_box_light_theme = File.read("assets/404_tv_box_light_theme.svg")
 
   return templated "error"
 end
@@ -85,6 +87,8 @@ def error_template_helper(env : HTTP::Server::Context, status_code : Int32, mess
   locale = env.get("preferences").as(Preferences).locale
 
   error_message = translate(locale, message)
+  unfound_tv_box_dark_theme = File.read("assets/404_tv_box_dark_theme.svg")
+  unfound_tv_box_light_theme = File.read("assets/404_tv_box_light_theme.svg")
   next_steps = error_redirect_helper(env)
 
   return templated "error"

src/invidious/views/error.ecr

@@ -1,8 +1,23 @@
+<%
+  dark_mode = env.get("preferences").as(Preferences).dark_mode
+%>
+
 <% content_for "header" do %>
 <title><%= "Error" %> - Invidious</title>
 <% end %>
 
 <div class="h-box">
-    <%= error_message %>
+    <div style="display: flex; flex-direction: column; align-items: center;">
+        <%= error_message %>
+        <% if dark_mode == "dark" %>
+            <div style="width: 100px; height: auto;">
+                <img src="/404_tv_box_dark_theme.svg" alt="SVG Image" style="width: 100px; height: auto;">
+            </div>
+        <% else %>
+            <div style="width: 100px; height: auto;">
+                <img src="/404_tv_box_light_theme.svg" alt="SVG Image" style="width: 100px; height: auto;">
+            </div>
+        <% end %>
+    </div>
     <%= next_steps %>
 </div>