Added a previous_page_button preference option and made switching between the first page and previous page buttons possible

locales/en-US.json

@@ -105,6 +105,7 @@
     "preferences_category_visual": "Visual preferences",
     "preferences_region_label": "Content country: ",
     "preferences_player_style_label": "Player style: ",
+    "preferences_previous_page_button_label": "Previous page button (requires Javascript):",
     "Dark mode: ": "Dark mode: ",
     "preferences_dark_mode_label": "Theme: ",
     "dark": "dark",

src/invidious/config.cr

@@ -44,6 +44,7 @@ struct ConfigPreferences
   property vr_mode : Bool = true
   property show_nick : Bool = true
   property save_player_pos : Bool = false
+  property previous_page_button : Bool = true
 
   def to_tuple
     {% begin %}

src/invidious/frontend/pagination.cr

@@ -3,7 +3,10 @@ require "uri"
 module Invidious::Frontend::Pagination
   extend self
 
-  private def first_page(str : String::Builder, locale : String?, url : String)
+  private def first_page(str : String::Builder, locale : String?, url : String, previous_page_button : Bool)
+    if previous_page_button
+      str << %(<noscript>)
+    end
     str << %(<a href=") << url << %(" class="pure-button pure-button-secondary">)
 
     if locale_is_rtl?(locale)
@@ -19,6 +22,9 @@ module Invidious::Frontend::Pagination
     end
 
     str << "</a>"
+    if previous_page_button
+      str << "</noscript>"
+    end
   end
 
   private def previous_page(str : String::Builder, locale : String?, url : String)
@@ -90,7 +96,7 @@ module Invidious::Frontend::Pagination
     end
   end
 
-  def nav_ctoken(locale : String?, *, base_url : String | URI, ctoken : String?, first_page : Bool)
+  def nav_ctoken(locale : String?, *, base_url : String | URI, ctoken : String?, first_page : Bool, previous_page_button : Bool)
     return String.build do |str|
       str << %(<div class="h-box">\n)
       str << %(<div class="page-nav-container flexible">\n)
@@ -98,7 +104,7 @@ module Invidious::Frontend::Pagination
       str << %(<div class="page-prev-container flex-left">)
 
       if !first_page
-        self.first_page(str, locale, base_url.to_s)
+        self.first_page(str, locale, base_url.to_s, previous_page_button)
       end
 
       str << %(</div>\n)

src/invidious/routes/before_all.cr

@@ -104,10 +104,13 @@ module Invidious::Routes::BeforeAll
     thin_mode = env.params.query["thin_mode"]? || preferences.thin_mode.to_s
     thin_mode = thin_mode == "true"
     locale = env.params.query["hl"]? || preferences.locale
+    previous_page_button = env.params.query["previous_page_button"]? || preferences.previous_page_button.to_s
+    previous_page_button = previous_page_button == "true"
 
     preferences.dark_mode = dark_mode
     preferences.thin_mode = thin_mode
     preferences.locale = locale
+    preferences.previous_page_button = previous_page_button
     env.set "preferences", preferences
 
     current_page = env.request.path

src/invidious/routes/preferences.cr

@@ -140,6 +140,10 @@ module Invidious::Routes::PreferencesRoute
     notifications_only ||= "off"
     notifications_only = notifications_only == "on"
 
+    previous_page_button = env.params.body["previous_page_button"]?.try &.as(String)
+    previous_page_button ||= "off"
+    previous_page_button = previous_page_button == "on"
+
     # Convert to JSON and back again to take advantage of converters used for compatibility
     preferences = Preferences.from_json({
       annotations:                 annotations,
@@ -175,6 +179,7 @@ module Invidious::Routes::PreferencesRoute
       vr_mode:                     vr_mode,
       show_nick:                   show_nick,
       save_player_pos:             save_player_pos,
+      previous_page_button:        previous_page_button
     }.to_json)
 
     if user = env.get? "user"

src/invidious/user/preferences.cr

@@ -55,6 +55,7 @@ struct Preferences
   property extend_desc : Bool = CONFIG.default_user_preferences.extend_desc
   property volume : Int32 = CONFIG.default_user_preferences.volume
   property save_player_pos : Bool = CONFIG.default_user_preferences.save_player_pos
+  property previous_page_button : Bool = CONFIG.default_user_preferences.previous_page_button
 
   module BoolToString
     def self.to_json(value : String, json : JSON::Builder)

src/invidious/views/channel.ecr

@@ -21,7 +21,8 @@
   page_nav_html = IV::Frontend::Pagination.nav_ctoken(locale,
     base_url: relative_url,
     ctoken: next_continuation,
-    first_page: continuation.nil?
+    first_page: continuation.nil?,
+    previous_page_button: env.get("preferences").as(Preferences).previous_page_button
   )
 %>
 
@@ -41,6 +42,10 @@
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= ucid %>" />
 <%- end -%>
 
+<%- if env.get("preferences").as(Preferences).previous_page_button -%>
+<script src="/js/pagination.js?v=<%= ASSET_COMMIT %>"></script>
+<%- end -%>
+
 <link rel="alternate" href="<%= youtube_url %>">
 <title><%= author %> - Invidious</title>
 <% end %>

src/invidious/views/components/items_paginated.ecr

@@ -8,4 +8,14 @@
 
 <%= page_nav_html %>
 
+<script id="pagination-data" type="application/json">
+<%=
+{
+   "next_page" => translate(locale, "Next page"),
+   "prev_page" => translate(locale, "Previous page"),
+   "is_rtl"    => locale_is_rtl?(locale)
+}.to_json
+%>
+</script>
+
 <script src="/js/watched_indicator.js"></script>

src/invidious/views/user/preferences.ecr

@@ -189,6 +189,12 @@
                     </select>
                 <% end %>
             </div>
+
+	    <div class="pure-control-group">
+               <label for="previous_page_button"><%= translate(locale, "preferences_previous_page_button_label") %></label>
+	       <input name="previous_page_button" id="previous_page_button" type="checkbox" <% if preferences.previous_page_button %>checked<% end %>>
+	    </div>
+
             <% if env.get? "user" %>
                 <div class="pure-control-group">
                     <label for="show_nick"><%= translate(locale, "preferences_show_nick_label") %></label>