HTML: Use the new pagination component for channel pages

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

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"

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

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>

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