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

This commit is contained in:
syeopite
2025-02-26 13:54:25 -08:00
7 changed files with 139 additions and 5 deletions

View File

@@ -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