Add thin mode

src/invidious.cr

@@ -1359,6 +1359,10 @@ post "/preferences" do |env|
     dark_mode ||= "off"
     dark_mode = dark_mode == "on"
 
+    thin_mode = env.params.body["thin_mode"]?.try &.as(String)
+    thin_mode ||= "off"
+    thin_mode = thin_mode == "on"
+
     max_results = env.params.body["max_results"]?.try &.as(String).to_i
     max_results ||= 40
 
@@ -1376,6 +1380,7 @@ post "/preferences" do |env|
       "quality"     => quality,
       "volume"      => volume,
       "dark_mode"   => dark_mode,
+      "thin_mode"   => thin_mode,
       "max_results" => max_results,
       "sort"        => sort,
       "latest_only" => latest_only,

src/invidious/helpers.cr

@@ -24,6 +24,7 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
   "quality"     => "hd720",
   "volume"      => 100,
   "dark_mode"   => false,
+  "thin_mode "  => false,
   "max_results" => 40,
   "sort"        => "published",
   "latest_only" => false,
@@ -145,14 +146,20 @@ class User
   })
 end
 
+# TODO: Migrate preferences so this will not be nilable
 class Preferences
   JSON.mapping({
-    video_loop:  Bool,
-    autoplay:    Bool,
-    speed:       Float32,
-    quality:     String,
-    volume:      Int32,
-    dark_mode:   Bool,
+    video_loop: Bool,
+    autoplay:   Bool,
+    speed:      Float32,
+    quality:    String,
+    volume:     Int32,
+    dark_mode:  Bool,
+    thin_mode:  {
+      type:    Bool,
+      nilable: true,
+      default: false,
+    },
     max_results: Int32,
     sort:        String,
     latest_only: Bool,

src/invidious/views/components/subscription_video.ecr

@@ -1,7 +1,10 @@
 <div class="pure-u-1 pure-u-md-1-4">
     <div class="h-box">
         <a style="width:100%;" href="/watch?v=<%= video.id %>">
+            <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
+            <% else %>
             <img style="width:100%;" src="https://i.ytimg.com/vi/<%= video.id %>/mqdefault.jpg"/>
+            <% end %>
             <p><%= video.title %></p>
         </a>
         <p>

src/invidious/views/components/video.ecr

@@ -1,7 +1,10 @@
 <div class="pure-u-1 pure-u-md-1-4">
     <div class="h-box">
         <a style="width:100%;" href="/watch?v=<%= video.id %>">
+            <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
+            <% else %>
             <img style="width:100%;" src="https://i.ytimg.com/vi/<%= video.id %>/mqdefault.jpg"/>
+            <% end %>
             <p><%= video.title %></p>
         </a>
         <p>

src/invidious/views/preferences.ecr

@@ -53,6 +53,11 @@ function update_value(element) {
                 <input name="dark_mode" id="dark_mode" type="checkbox" <% if user.preferences.dark_mode %>checked<% end %>>
             </div>
 
+            <div class="pure-control-group">
+                <label for="thin_mode">Thin mode: </label>
+                <input name="thin_mode" id="thin_mode" type="checkbox" <% if user.preferences.thin_mode %>checked<% end %>>
+            </div>
+
             <legend>Subscription preferences</legend>
             <div class="pure-control-group">
                 <label for="max_results">Number of videos shown in feed: </label>

src/invidious/views/watch.ecr

@@ -278,7 +278,10 @@ String.prototype.supplant = function (o) {
         <% rvs.each do |rv| %>
             <% if rv.has_key?("id") %>
             <a href="/watch?v=<%= rv["id"] %>">
-                <img style="width:100%;" alt="thumbnail" src="<%= rv["iurlmq"] %>">
+                <% if preferences && preferences.thin_mode %>
+                <% else %>
+                <img style="width:100%;" src="<%= rv["iurlmq"] %>">
+                <% end %>
                 <p style="width:100%"><%= rv["title"] %></p>
                 <p>
                     <b style="width: 100%"><%= rv["author"] %></b>