HTML: Use the new pagination component for playlists

src/invidious/routes/playlists.cr

@@ -170,6 +170,13 @@ module Invidious::Routes::Playlists
 
     csrf_token = generate_response(sid, {":edit_playlist"}, HMAC_KEY)
 
+    # Pagination
+    page_nav_html = Frontend::Pagination.nav_numeric(locale,
+      base_url: "/playlist?list=#{playlist.id}",
+      current_page: page,
+      show_next: (videos.size == 100)
+    )
+
     templated "edit_playlist"
   end
 
@@ -252,6 +259,14 @@ module Invidious::Routes::Playlists
       videos = [] of SearchVideo
     end
 
+    # Pagination
+    query_encoded = URI.encode_www_form(query.try &.text || "", space_to_plus: true)
+    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)
+    )
+
     env.set "add_playlist_items", plid
     templated "add_playlist_items"
   end
@@ -427,6 +442,13 @@ module Invidious::Routes::Playlists
       env.set "remove_playlist_items", plid
     end
 
+    # Pagination
+    page_nav_html = Frontend::Pagination.nav_numeric(locale,
+      base_url: "/playlist?list=#{playlist.id}",
+      current_page: page,
+      show_next: (page_count != 1 && page < page_count)
+    )
+
     templated "playlist"
   end
 

src/invidious/views/add_playlist_items.ecr

@@ -31,33 +31,5 @@
 </script>
 <script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
 
-<div class="pure-g">
-    <% videos.each_slice(4) do |slice| %>
-            <% slice.each do |item| %>
-                <%= rendered "components/item" %>
-            <% end %>
-    <% end %>
-</div>
 
-<script src="/js/watched_indicator.js"></script>
+<%= rendered "components/items_paginated" %>
-
-<% if query %>
-    <%- query_encoded = URI.encode_www_form(query.text, space_to_plus: true) -%>
-    <div class="pure-g h-box">
-        <div class="pure-u-1 pure-u-lg-1-5">
-            <% if query.page > 1 %>
-                <a href="/add_playlist_items?list=<%= plid %>&q=<%= query_encoded %>&page=<%= page - 1 %>">
-                    <%= translate(locale, "Previous page") %>
-                </a>
-            <% end %>
-        </div>
-        <div class="pure-u-1 pure-u-lg-3-5"></div>
-        <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
-            <% if videos.size >= 20 %>
-                <a href="/add_playlist_items?list=<%= plid %>&q=<%= query_encoded %>&page=<%= page + 1 %>">
-                    <%= translate(locale, "Next page") %>
-                </a>
-            <% end %>
-        </div>
-    </div>
-<% end %>

src/invidious/views/edit_playlist.ecr

@@ -56,28 +56,5 @@
     <hr>
 </div>
 
-<div class="pure-g">
-<% videos.each do |item| %>
-    <%= rendered "components/item" %>
-<% end %>
-</div>
-
-<script src="/js/watched_indicator.js"></script>
 
-<div class="pure-g h-box">
+<%= rendered "components/items_paginated" %>
-    <div class="pure-u-1 pure-u-lg-1-5">
-        <% if page > 1 %>
-            <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
-                <%= translate(locale, "Previous page") %>
-            </a>
-        <% end %>
-    </div>
-    <div class="pure-u-1 pure-u-lg-3-5"></div>
-    <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
-        <% if videos.size == 100 %>
-            <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
-                <%= translate(locale, "Next page") %>
-            </a>
-        <% end %>
-    </div>
-</div>

src/invidious/views/playlist.ecr

@@ -100,28 +100,5 @@
 <script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
 <% end %>
 
-<div class="pure-g">
-<% videos.each do |item| %>
-    <%= rendered "components/item" %>
-<% end %>
-</div>
-
-<script src="/js/watched_indicator.js"></script>
 
-<div class="pure-g h-box">
+<%= rendered "components/items_paginated" %>
-    <div class="pure-u-1 pure-u-lg-1-5">
-        <% if page > 1 %>
-            <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
-                <%= translate(locale, "Previous page") %>
-            </a>
-        <% end %>
-    </div>
-    <div class="pure-u-1 pure-u-lg-3-5"></div>
-    <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
-        <% if page_count != 1 && page < page_count %>
-            <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
-                <%= translate(locale, "Next page") %>
-            </a>
-        <% end %>
-    </div>
-</div>