From 7bd6d0ac4961e7f2433eb3268a45b78642229896 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Fri, 21 Apr 2023 00:28:11 +0200
Subject: [PATCH] HTML: Use the new pagination component for channel pages

---
 src/invidious/routes/playlists.cr             | 14 +++++------
 src/invidious/routes/search.cr                |  8 +++---
 src/invidious/views/channel.ecr               | 25 ++++++-------------
 .../views/components/items_paginated.ecr      |  2 +-
 src/invidious/views/search.ecr                |  2 +-
 5 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/invidious/routes/playlists.cr b/src/invidious/routes/playlists.cr
index 604fe4e1..5cb96809 100644
--- a/src/invidious/routes/playlists.cr
+++ b/src/invidious/routes/playlists.cr
@@ -163,9 +163,9 @@ module Invidious::Routes::Playlists
     end
 
     begin
-      videos = get_playlist_videos(playlist, offset: (page - 1) * 100)
+      items = get_playlist_videos(playlist, offset: (page - 1) * 100)
     rescue ex
-      videos = [] of PlaylistVideo
+      items = [] of PlaylistVideo
     end
 
     csrf_token = generate_response(sid, {":edit_playlist"}, HMAC_KEY)
@@ -174,7 +174,7 @@ module Invidious::Routes::Playlists
     page_nav_html = Frontend::Pagination.nav_numeric(locale,
       base_url: "/playlist?list=#{playlist.id}",
       current_page: page,
-      show_next: (videos.size == 100)
+      show_next: (items.size == 100)
     )
 
     templated "edit_playlist"
@@ -254,9 +254,9 @@ module Invidious::Routes::Playlists
 
     begin
       query = Invidious::Search::Query.new(env.params.query, :playlist, region)
-      videos = query.process.select(SearchVideo).map(&.as(SearchVideo))
+      items = query.process.select(SearchVideo).map(&.as(SearchVideo))
     rescue ex
-      videos = [] of SearchVideo
+      items = [] of SearchVideo
     end
 
     # Pagination
@@ -264,7 +264,7 @@ module Invidious::Routes::Playlists
     page_nav_html = Frontend::Pagination.nav_numeric(locale,
       base_url: "/add_playlist_items?list=#{playlist.id}&q=#{query_encoded}",
       current_page: page,
-      show_next: (videos.size >= 20)
+      show_next: (items.size >= 20)
     )
 
     env.set "add_playlist_items", plid
@@ -433,7 +433,7 @@ module Invidious::Routes::Playlists
     end
 
     begin
-      videos = get_playlist_videos(playlist, offset: (page - 1) * 200)
+      items = get_playlist_videos(playlist, offset: (page - 1) * 200)
     rescue ex
       return error_template(500, "Error encountered while retrieving playlist videos.<br>#{ex.message}")
     end
diff --git a/src/invidious/routes/search.cr b/src/invidious/routes/search.cr
index edf0351c..5be33533 100644
--- a/src/invidious/routes/search.cr
+++ b/src/invidious/routes/search.cr
@@ -52,7 +52,7 @@ module Invidious::Routes::Search
       user = env.get? "user"
 
       begin
-        videos = query.process
+        items = query.process
       rescue ex : ChannelSearchException
         return error_template(404, "Unable to find channel with id of '#{HTML.escape(ex.channel)}'. Are you sure that's an actual channel id? It should look like 'UC4QobU6STFB0P71PMvOGN5A'.")
       rescue ex
@@ -65,7 +65,7 @@ module Invidious::Routes::Search
       page_nav_html = Frontend::Pagination.nav_numeric(locale,
         base_url: "/search?#{query.to_http_params}",
         current_page: query.page,
-        show_next: (videos.size >= 20)
+        show_next: (items.size >= 20)
       )
 
       if query.type == Invidious::Search::Query::Type::Channel
@@ -95,7 +95,7 @@ module Invidious::Routes::Search
     end
 
     begin
-      videos = Invidious::Hashtag.fetch(hashtag, page)
+      items = Invidious::Hashtag.fetch(hashtag, page)
     rescue ex
       return error_template(500, ex)
     end
@@ -105,7 +105,7 @@ module Invidious::Routes::Search
     page_nav_html = Frontend::Pagination.nav_numeric(locale,
       base_url: "/hashtag/#{hashtag_encoded}",
       current_page: page,
-      show_next: (videos.size >= 60)
+      show_next: (items.size >= 60)
     )
 
     templated "hashtag"
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 6e62a471..91fe40b9 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -15,7 +15,12 @@
 
   youtube_url = "https://www.youtube.com#{relative_url}"
   redirect_url = Invidious::Frontend::Misc.redirect_url(env)
--%>
+
+  page_nav_html = IV::Frontend::Pagination.nav_ctoken(locale,
+    base_url: relative_url,
+    ctoken: next_continuation
+  )
+%>
 
 <% content_for "header" do %>
 <%- if selected_tab.videos? -%>
@@ -43,21 +48,5 @@
     <hr>
 </div>
 
-<div class="pure-g">
-<% items.each do |item| %>
-    <%= rendered "components/item" %>
-<% end %>
-</div>
 
-<script src="/js/watched_indicator.js"></script>
-
-<div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-4-5"></div>
-    <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
-        <% if next_continuation %>
-            <a href="<%= relative_url %>?continuation=<%= next_continuation %><% if sort_options.any? sort_by %>&sort_by=<%= sort_by %><% end %>">
-                <%= translate(locale, "Next page") %>
-            </a>
-        <% end %>
-    </div>
-</div>
+<%= rendered "components/items_paginated" %>
diff --git a/src/invidious/views/components/items_paginated.ecr b/src/invidious/views/components/items_paginated.ecr
index c82b1772..4534a0a3 100644
--- a/src/invidious/views/components/items_paginated.ecr
+++ b/src/invidious/views/components/items_paginated.ecr
@@ -1,7 +1,7 @@
 <%= page_nav_html %>
 
 <div class="pure-g">
-    <%- videos.each do |item| -%>
+    <%- items.each do |item| -%>
         <%= rendered "components/item" %>
     <%- end -%>
 </div>
diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr
index 627a13b0..b1300214 100644
--- a/src/invidious/views/search.ecr
+++ b/src/invidious/views/search.ecr
@@ -8,7 +8,7 @@
 <hr/>
 
 
-<%- if videos.empty? -%>
+<%- if items.empty? -%>
 <div class="h-box no-results-error">
     <div>
         <%= translate(locale, "search_message_no_results") %><br/><br/>