Make number of columns in feed customizable

Add a new preference feed_cols and use it to determine the width of each
video relative to the feed.
This should fix #1018.

src/invidious/helpers/helpers.cr

@@ -33,6 +33,7 @@ struct ConfigPreferences
   property continue : Bool = false
   property continue_autoplay : Bool = true
   property dark_mode : String = ""
+  property feed_cols : Int32 = 4
   property latest_only : Bool = false
   property listen : Bool = false
   property local : Bool = false

src/invidious/routes/preferences.cr

@@ -97,6 +97,9 @@ class Invidious::Routes::PreferencesRoute < Invidious::Routes::BaseRoute
     max_results = env.params.body["max_results"]?.try &.as(String).to_i?
     max_results ||= CONFIG.default_user_preferences.max_results
 
+    feed_cols = env.params.body["feed_cols"]?.try &.as(String).to_i?
+    feed_cols ||= CONFIG.default_user_preferences.feed_cols
+
     sort = env.params.body["sort"]?.try &.as(String)
     sort ||= CONFIG.default_user_preferences.sort
 
@@ -122,6 +125,7 @@ class Invidious::Routes::PreferencesRoute < Invidious::Routes::BaseRoute
       continue:               continue,
       continue_autoplay:      continue_autoplay,
       dark_mode:              dark_mode,
+      feed_cols:              feed_cols,
       latest_only:            latest_only,
       listen:                 listen,
       local:                  local,

src/invidious/users.cr

@@ -50,6 +50,9 @@ struct Preferences
   @[JSON::Field(converter: Preferences::BoolToString)]
   @[YAML::Field(converter: Preferences::BoolToString)]
   property dark_mode : String = CONFIG.default_user_preferences.dark_mode
+
+  @[JSON::Field(converter: Preferences::ClampInt)]
+  property feed_cols : Int32 = CONFIG.default_user_preferences.feed_cols
   property latest_only : Bool = CONFIG.default_user_preferences.latest_only
   property listen : Bool = CONFIG.default_user_preferences.listen
   property local : Bool = CONFIG.default_user_preferences.local

src/invidious/views/components/item.ecr

@@ -1,4 +1,5 @@
-<div class="pure-u-1 pure-u-md-1-4">
+<% feed_cols = env.get("preferences").as(Preferences).feed_cols %>
+<div class="pure-u-1 pure-u-md-1-<%= feed_cols %>">
     <div class="h-box">
         <% case item when %>
         <% when SearchChannel %>

src/invidious/views/history.ecr

@@ -30,7 +30,8 @@
 <div class="pure-g">
     <% watched.each_slice(4) do |slice| %>
             <% slice.each do |item| %>
-                <div class="pure-u-1 pure-u-md-1-4">
+                <% feed_cols = env.get("preferences").as(Preferences).feed_cols %>
+                <div class="pure-u-1 pure-u-md-1-<%= feed_cols %>">
                     <div class="h-box">
                         <a style="width:100%" href="/watch?v=<%= item %>">
                             <% if !env.get("preferences").as(Preferences).thin_mode %>

src/invidious/views/preferences.ecr

@@ -172,6 +172,11 @@
                 <% end %>
             </div>
 
+            <div class="pure-control-group">
+                <label for="feed_cols"><%= translate(locale, "Number of videos shown per row: ") %></label>
+                <input name="feed_cols" id="feed_cols" type="number" value="<%= preferences.feed_cols %>">
+            </div>
+
             <% if env.get? "user" %>
                 <legend><%= translate(locale, "Subscription preferences") %></legend>