frontend: Unify the various channel pages

5 files changed, 115 insertions, 232 deletions

diff --git a/src/invidious/routes/channels.cr b/src/invidious/routes/channels.cr
index 78b38341..77d309fb 100644
--- a/src/invidious/routes/channels.cr
+++ b/src/invidious/routes/channels.cr
@@ -7,18 +7,19 @@ module Invidious::Routes::Channels
 
   def self.videos(env)
     data = self.fetch_basic_information(env)
-    if !data.is_a?(Tuple)
-      return data
-    end
+    return data if !data.is_a?(Tuple)
+
     locale, user, subscriptions, continuation, ucid, channel = data
 
     sort_by = env.params.query["sort_by"]?.try &.downcase
 
     if channel.auto_generated
       sort_options = {"last", "oldest", "newest"}
-      sort_by ||= "last"
 
-      items, next_continuation = fetch_channel_playlists(channel.ucid, channel.author, continuation, sort_by)
+      items, next_continuation = fetch_channel_playlists(
+        channel.ucid, channel.author, continuation, (sort_by || "last")
+      )
+
       items.uniq! do |item|
         if item.responds_to?(:title)
           item.title
@@ -30,11 +31,10 @@ module Invidious::Routes::Channels
       items.each(&.author = "")
     else
       sort_options = {"newest", "oldest", "popular"}
-      sort_by ||= "newest"
 
       # Fetch items and continuation token
       items, next_continuation = Channel::Tabs.get_videos(
-        channel, continuation: continuation, sort_by: sort_by
+        channel, continuation: continuation, sort_by: (sort_by || "newest")
       )
     end
 
@@ -90,24 +90,26 @@ module Invidious::Routes::Channels
 
   def self.playlists(env)
     data = self.fetch_basic_information(env)
-    if !data.is_a?(Tuple)
-      return data
-    end
+    return data if !data.is_a?(Tuple)
+
     locale, user, subscriptions, continuation, ucid, channel = data
 
     sort_options = {"last", "oldest", "newest"}
     sort_by = env.params.query["sort_by"]?.try &.downcase
-    sort_by ||= "last"
 
     if channel.auto_generated
       return env.redirect "/channel/#{channel.ucid}"
     end
 
-    items, continuation = fetch_channel_playlists(channel.ucid, channel.author, continuation, sort_by)
+    items, next_continuation = fetch_channel_playlists(
+      channel.ucid, channel.author, continuation, (sort_by || "last")
+    )
+
     items = items.select(SearchPlaylist).map(&.as(SearchPlaylist))
     items.each(&.author = "")
 
-    templated "playlists"
+    selected_tab = Frontend::ChannelPage::TabsAvailable::Playlists
+    templated "channel"
   end
 
   def self.community(env)
@@ -121,12 +123,15 @@ module Invidious::Routes::Channels
     thin_mode = thin_mode == "true"
 
     continuation = env.params.query["continuation"]?
-    # sort_by = env.params.query["sort_by"]?.try &.downcase
 
     if !channel.tabs.includes? "community"
       return env.redirect "/channel/#{channel.ucid}"
     end
 
+    # TODO: support sort options for community posts
+    sort_by = ""
+    sort_options = [] of String
+
     begin
       items = JSON.parse(fetch_channel_community(ucid, continuation, locale, "json", thin_mode))
     rescue ex : InfoException
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index f6cc3340..039f8752 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -1,8 +1,23 @@
-<% ucid = channel.ucid %>
-<% author = HTML.escape(channel.author) %>
-<% channel_profile_pic = URI.parse(channel.author_thumbnail).request_target %>
+<%-
+  ucid = channel.ucid
+  author = HTML.escape(channel.author)
+  channel_profile_pic = URI.parse(channel.author_thumbnail).request_target
+
+  relative_url =
+    case selected_tab
+    when .shorts?    then "/channel/#{ucid}/shorts"
+    when .streams?   then "/channel/#{ucid}/streams"
+    when .playlists? then "/channel/#{ucid}/playlists"
+    else
+      "/channel/#{ucid}"
+    end
+
+  youtube_url = "https://www.youtube.com#{relative_url}"
+  redirect_url = Invidious::Frontend::Misc.redirect_url(env)
+-%>
 
 <% content_for "header" do %>
+<%- if selected_tab.videos? -%>
 <meta name="description" content="<%= channel.description %>">
 <meta property="og:site_name" content="Invidious">
 <meta property="og:url" content="<%= HOST_URL %>/channel/<%= ucid %>">
@@ -14,76 +29,14 @@
 <meta name="twitter:title" content="<%= author %>">
 <meta name="twitter:description" content="<%= channel.description %>">
 <meta name="twitter:image" content="/ggpht<%= channel_profile_pic %>">
-<link rel="alternate" href="https://www.youtube.com/channel/<%= ucid %>">
-<title><%= author %> - Invidious</title>
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= ucid %>" />
-<% end %>
-
-<% if channel.banner %>
-    <div class="h-box">
-        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>">
-    </div>
+<%- end -%>
 
-    <div class="h-box">
-        <hr>
-    </div>
+<link rel="alternate" href="<%= youtube_url %>">
+<title><%= author %> - Invidious</title>
 <% end %>
 
-<div class="pure-g h-box">
-    <div class="pure-u-2-3">
-        <div class="channel-profile">
-            <img src="/ggpht<%= channel_profile_pic %>">
-            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
-        </div>
-    </div>
-    <div class="pure-u-1-3">
-        <h3 style="text-align:right">
-            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
-
-<div class="h-box">
-    <div id="descriptionWrapper">
-        <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
-    </div>
-</div>
-
-<div class="h-box">
-    <% sub_count_text = number_to_short_text(channel.sub_count) %>
-    <%= rendered "components/subscribe_widget" %>
-</div>
-
-<div class="pure-g h-box">
-    <div class="pure-u-1-3">
-        <a href="https://www.youtube.com/channel/<%= ucid %>"><%= translate(locale, "View channel on YouTube") %></a>
-        <div class="pure-u-1 pure-md-1-3">
-            <% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
-                <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-            <% else %>
-                <a href="https://redirect.invidious.io<%= env.request.path %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-            <% end %>
-        </div>
-
-        <%= Invidious::Frontend::ChannelPage.generate_tabs_links(locale, channel, selected_tab) %>
-    </div>
-    <div class="pure-u-1-3"></div>
-    <div class="pure-u-1-3">
-        <div class="pure-g" style="text-align:right">
-            <% sort_options.each do |sort| %>
-                <div class="pure-u-1 pure-md-1-3">
-                    <% if sort_by == sort %>
-                        <b><%= translate(locale, sort) %></b>
-                    <% else %>
-                        <a href="/channel/<%= ucid %>?sort_by=<%= sort %>">
-                            <%= translate(locale, sort) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
-    </div>
-</div>
+<%= rendered "components/channel_info" %>
 
 <div class="h-box">
     <hr>
@@ -99,7 +52,7 @@
     <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="/channel/<%= ucid %>/<%= selected_tab %>?continuation=<%= next_continuation %><% if sort_by != "last" %>&sort_by=<%= URI.encode_www_form(sort_by) %><% end %>">
+            <a href="<%= relative_url %>?continuation=<%= next_continuation %><% if sort_options.any? sort_by %>&sort_by=<%= sort_by %><% end %>">
                 <%= translate(locale, "Next page") %>
             </a>
         <% end %>
diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr
index e467a679..9e11d562 100644
--- a/src/invidious/views/community.ecr
+++ b/src/invidious/views/community.ecr
@@ -1,60 +1,21 @@
-<% ucid = channel.ucid %>
-<% author = HTML.escape(channel.author) %>
+<%-
+  ucid = channel.ucid
+  author = HTML.escape(channel.author)
+  channel_profile_pic = URI.parse(channel.author_thumbnail).request_target
 
-<% content_for "header" do %>
-<title><%= author %> - Invidious</title>
-<% end %>
+  relative_url = "/channel/#{ucid}/community"
+  youtube_url = "https://www.youtube.com#{relative_url}"
+  redirect_url = Invidious::Frontend::Misc.redirect_url(env)
 
-<% if channel.banner %>
-    <div class="h-box">
-        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>">
-    </div>
+  selected_tab = Invidious::Frontend::ChannelPage::TabsAvailable::Community
+-%>
 
-    <div class="h-box">
-        <hr>
-    </div>
+<% content_for "header" do %>
+<link rel="alternate" href="<%= youtube_url %>">
+<title><%= author %> - Invidious</title>
 <% end %>
 
-<div class="pure-g h-box">
-    <div class="pure-u-2-3">
-        <div class="channel-profile">
-            <img src="/ggpht<%= URI.parse(channel.author_thumbnail).request_target %>">
-            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
-        </div>
-    </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3 style="text-align:right">
-            <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
-
-<div class="h-box">
-    <div id="descriptionWrapper">
-        <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %></span></p>
-    </div>
-</div>
-
-<div class="h-box">
-    <% sub_count_text = number_to_short_text(channel.sub_count) %>
-    <%= rendered "components/subscribe_widget" %>
-</div>
-
-<div class="pure-g h-box">
-    <div class="pure-u-1-3">
-        <a href="https://www.youtube.com/channel/<%= channel.ucid %>/community"><%= translate(locale, "View channel on YouTube") %></a>
-        <div class="pure-u-1 pure-md-1-3">
-            <% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
-                <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-            <% else %>
-                <a href="https://redirect.invidious.io<%= env.request.resource %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-            <% end %>
-        </div>
-
-        <%= Invidious::Frontend::ChannelPage.generate_tabs_links(locale, channel, Invidious::Frontend::ChannelPage::TabsAvailable::Community) %>
-    </div>
-    <div class="pure-u-2-3"></div>
-</div>
+<%= rendered "components/channel_info" %>
 
 <div class="h-box">
     <hr>
diff --git a/src/invidious/views/components/channel_info.ecr b/src/invidious/views/components/channel_info.ecr
new file mode 100644
index 00000000..f216359f
--- /dev/null
+++ b/src/invidious/views/components/channel_info.ecr
@@ -0,0 +1,60 @@
+<% if channel.banner %>
+    <div class="h-box">
+        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>">
+    </div>
+
+    <div class="h-box">
+        <hr>
+    </div>
+<% end %>
+
+<div class="pure-g h-box">
+    <div class="pure-u-2-3">
+        <div class="channel-profile">
+            <img src="/ggpht<%= channel_profile_pic %>">
+            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
+        </div>
+    </div>
+    <div class="pure-u-1-3">
+        <h3 style="text-align:right">
+            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
+        </h3>
+    </div>
+</div>
+
+<div class="h-box">
+    <div id="descriptionWrapper">
+        <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
+    </div>
+</div>
+
+<div class="h-box">
+    <% sub_count_text = number_to_short_text(channel.sub_count) %>
+    <%= rendered "components/subscribe_widget" %>
+</div>
+
+<div class="pure-g h-box">
+    <div class="pure-u-1-2">
+        <div class="pure-u-1 pure-md-1-3">
+            <a href="<%= youtube_url %>"><%= translate(locale, "View channel on YouTube") %></a>
+        </div>
+        <div class="pure-u-1 pure-md-1-3">
+            <a href="<%= redirect_url %>"><%= translate(locale, "Switch Invidious Instance") %></a>
+        </div>
+
+        <%= Invidious::Frontend::ChannelPage.generate_tabs_links(locale, channel, selected_tab) %>
+    </div>
+    <div class="pure-u-1-2">
+        <div class="pure-g" style="text-align:end">
+            <% sort_options.each do |sort| %>
+                <div class="pure-u-1 pure-md-1-3">
+                    <% if sort_by == sort %>
+                        <b><%= translate(locale, sort) %></b>
+                    <% else %>
+                        <a href="<%= relative_url %>?sort_by=<%= sort %>"><%= translate(locale, sort) %></a>
+                    <% end %>
+                </div>
+            <% end %>
+        </div>
+    </div>
+</div>
diff --git a/src/invidious/views/playlists.ecr b/src/invidious/views/playlists.ecr
deleted file mode 100644
index 56d25ef5..00000000
--- a/src/invidious/views/playlists.ecr
+++ /dev/null
@@ -1,96 +0,0 @@
-<% ucid = channel.ucid %>
-<% author = HTML.escape(channel.author) %>
-
-<% content_for "header" do %>
-<title><%= author %> - Invidious</title>
-<% end %>
-
-<% if channel.banner %>
-    <div class="h-box">
-        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>">
-    </div>
-
-    <div class="h-box">
-        <hr>
-    </div>
-<% end %>
-
-<div class="pure-g h-box">
-    <div class="pure-u-2-3">
-        <div class="channel-profile">
-            <img src="/ggpht<%= URI.parse(channel.author_thumbnail).request_target %>">
-            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
-        </div>
-    </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3 style="text-align:right">
-            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
-
-<div class="h-box">
-    <div id="descriptionWrapper">
-        <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %></span></p>
-    </div>
-</div>
-
-<div class="h-box">
-    <% sub_count_text = number_to_short_text(channel.sub_count) %>
-    <%= rendered "components/subscribe_widget" %>
-</div>
-
-<div class="pure-g h-box">
-    <div class="pure-g pure-u-1-3">
-        <div class="pure-u-1 pure-md-1-3">
-            <a href="https://www.youtube.com/channel/<%= ucid %>/playlists"><%= translate(locale, "View channel on YouTube") %></a>
-        </div>
-
-        <div class="pure-u-1 pure-md-1-3">
-            <% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
-                <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-            <% else %>
-                <a href="https://redirect.invidious.io<%= env.request.resource %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-            <% end %>
-        </div>
-
-        <%= Invidious::Frontend::ChannelPage.generate_tabs_links(locale, channel, Invidious::Frontend::ChannelPage::TabsAvailable::Playlists) %>
-    </div>
-    <div class="pure-u-1-3"></div>
-    <div class="pure-u-1-3">
-        <div class="pure-g" style="text-align:right">
-            <% {"last", "oldest", "newest"}.each do |sort| %>
-                <div class="pure-u-1 pure-md-1-3">
-                    <% if sort_by == sort %>
-                        <b><%= translate(locale, sort) %></b>
-                    <% else %>
-                        <a href="/channel/<%= ucid %>/playlists?sort_by=<%= sort %>">
-                            <%= translate(locale, sort) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
-    </div>
-</div>
-
-<div class="h-box">
-    <hr>
-</div>
-
-<div class="pure-g">
-<% items.each do |item| %>
-    <%= rendered "components/item" %>
-<% end %>
-</div>
-
-<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 continuation %>
-            <a href="/channel/<%= ucid %>/playlists?continuation=<%= continuation %><% if sort_by != "last" %>&sort_by=<%= URI.encode_www_form(sort_by) %><% end %>">
-                <%= translate(locale, "Next page") %>
-            </a>
-        <% end %>
-    </div>
-</div>