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
commit f95f87e448
No known key found for this signature in database
GPG key ID: A73C186DA3955A1A
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

View file

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

View file

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