Frontend: Add a first page and previous page buttons for channel navigation (#4123)

3 files changed, 43 insertions, 5 deletions

diff --git a/src/invidious/frontend/pagination.cr b/src/invidious/frontend/pagination.cr
index 3f931f4e..a29f5936 100644
--- a/src/invidious/frontend/pagination.cr
+++ b/src/invidious/frontend/pagination.cr
@@ -3,6 +3,24 @@ require "uri"
 module Invidious::Frontend::Pagination
   extend self
 
+  private def first_page(str : String::Builder, locale : String?, url : String)
+    str << %(<a href=") << url << %(" class="pure-button pure-button-secondary">)
+
+    if locale_is_rtl?(locale)
+      # Inverted arrow ("first" points to the right)
+      str << translate(locale, "First page")
+      str << "&nbsp;&nbsp;"
+      str << %(<i class="icon ion-ios-arrow-forward"></i>)
+    else
+      # Regular arrow ("first" points to the left)
+      str << %(<i class="icon ion-ios-arrow-back"></i>)
+      str << "&nbsp;&nbsp;"
+      str << translate(locale, "First page")
+    end
+
+    str << "</a>"
+  end
+
   private def previous_page(str : String::Builder, locale : String?, url : String)
     # Link
     str << %(<a href=") << url << %(" class="pure-button pure-button-secondary">)
@@ -72,18 +90,24 @@ module Invidious::Frontend::Pagination
     end
   end
 
-  def nav_ctoken(locale : String?, *, base_url : String | URI, ctoken : String?)
+  def nav_ctoken(locale : String?, *, base_url : String | URI, ctoken : String?, first_page : Bool, params : URI::Params)
     return String.build do |str|
       str << %(<div class="h-box">\n)
       str << %(<div class="page-nav-container flexible">\n)
 
-      str << %(<div class="page-prev-container flex-left"></div>\n)
+      str << %(<div class="page-prev-container flex-left">)
+
+      if !first_page
+        self.first_page(str, locale, base_url.to_s)
+      end
+
+      str << %(</div>\n)
 
       str << %(<div class="page-next-container flex-right">)
 
       if !ctoken.nil?
-        params_next = URI::Params{"continuation" => ctoken}
-        url_next = HttpServer::Utils.add_params_to_url(base_url, params_next)
+        params["continuation"] = ctoken
+        url_next = HttpServer::Utils.add_params_to_url(base_url, params)
 
         self.next_page(str, locale, url_next.to_s)
       end
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index a84e44bc..1fe8ab7e 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -20,7 +20,9 @@
 
   page_nav_html = IV::Frontend::Pagination.nav_ctoken(locale,
     base_url: relative_url,
-    ctoken: next_continuation
+    ctoken: next_continuation,
+    first_page: continuation.nil?,
+    params: env.params.query,
   )
 %>
 
@@ -40,6 +42,8 @@
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= ucid %>" />
 <%- end -%>
 
+<script src="/js/pagination.js?v=<%= ASSET_COMMIT %>"></script>
+
 <link rel="alternate" href="<%= youtube_url %>">
 <title><%= author %> - Invidious</title>
 <% end %>
diff --git a/src/invidious/views/components/items_paginated.ecr b/src/invidious/views/components/items_paginated.ecr
index 4534a0a3..f69df3fe 100644
--- a/src/invidious/views/components/items_paginated.ecr
+++ b/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_pretty_json
+%>
+</script>
+
 <script src="/js/watched_indicator.js"></script>