Add playlist page and endpoint

src/invidious/views/components/video.ecr

@@ -1,6 +1,11 @@
 <div class="pure-u-1 pure-u-md-1-4">
     <div class="h-box">
-        <a style="width:100%;" href="/watch?v=<%= video.id %>">
+        <% if video.responds_to?(:playlists) %>
+        <% params = "&list=#{video.playlists[0]}" %>
+        <% else %>
+        <% params = nil %>
+        <% end %>
+        <a style="width:100%;" href="/watch?v=<%= video.id %><%= params %>">
             <% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
             <% else %>
             <img style="width:100%;" src="https://i.ytimg.com/vi/<%= video.id %>/mqdefault.jpg"/>

src/invidious/views/playlist.ecr

@@ -0,0 +1,42 @@
+<% content_for "header" do %>
+<title><%= playlist.title %> - Invidious</title>
+<% end %>
+
+<div class="pure-g h-box">
+    <div class="pure-u-2-3">
+        <h3><%= playlist.title %></h3>
+    </div>
+</div>
+<div class="pure-g h-box">
+    <div class="pure-u-1 pure-u-md-1-4">
+        <a href="/channel/<%= playlist.ucid %>">
+            <b><%= playlist.author %></b>
+        </a>
+    </div>
+</div>
+
+<div class="h-box">
+    <p><%= playlist.description %></p>
+</div>
+
+<% videos.each_slice(4) do |slice| %>
+<div class="pure-g">
+    <% slice.each do |video| %>
+        <%= rendered "components/video" %>
+    <% end %>
+</div> 
+<% end %>
+
+<div class="pure-g h-box">
+    <div class="pure-u-1 pure-u-md-1-5">
+    <% if page >= 2 %>
+        <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">Next page</a>
+    <% end %>
+    </div>
+    <div class="pure-u-1 pure-u-md-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <% if videos.size == 100 %>
+        <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">Next page</a>
+    <% end %>
+    </div>
+</div>