From 05adaf7315a7f8691c0ce5fc8cd8932e0b559c28 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Mon, 12 Apr 2021 03:55:53 -0700
Subject: [PATCH] Refactor channel tab templates

---
 src/invidious.cr                              |   1 +
 src/invidious/views/channel.ecr               | 111 +------------
 src/invidious/views/community.ecr             |  71 +--------
 .../views/components/channel-information.ecr  | 146 ++++++++++++++++++
 src/invidious/views/playlists.ecr             |  85 +---------
 5 files changed, 157 insertions(+), 257 deletions(-)
 create mode 100644 src/invidious/views/components/channel-information.ecr

diff --git a/src/invidious.cr b/src/invidious.cr
index 4af87648..0ab526f8 100644
--- a/src/invidious.cr
+++ b/src/invidious.cr
@@ -1760,6 +1760,7 @@ get "/channel/:ucid/playlists" do |env|
 
   continuation = env.params.query["continuation"]?
 
+  sort_options = {"last", "oldest", "newest"}
   sort_by = env.params.query["sort_by"]?.try &.downcase
   sort_by ||= "last"
 
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 00d2dcc2..7e0777fd 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -1,113 +1,6 @@
-<% content_for "header" do %>
-<title><%= channel.author %> - Invidious</title>
-<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= channel.ucid %>" />
-<% end %>
+<% content_type =  0 %>
 
-<% 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><%= channel.author %></span>
-        </div>
-    </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3>
-            <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
-
-<div class="h-box">
-    <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
-</div>
-
-<div class="h-box">
-    <% ucid = channel.ucid %>
-    <% author = channel.author %>
-    <% sub_count_text = number_to_short_text(channel.sub_count) %>
-    <%= rendered "components/subscribe_widget" %>
-</div>
-
-<div class="pure-g h-box" id="content-navigation">
-    <div class="pure-u-1-3">
-        <!-- <a href="https://www.youtube.com/channel/<%= channel.ucid %>"><%= translate(locale, "View channel on YouTube") %></a> -->
-        <!--             <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a> -->
-        <div class="pure-menu pure-menu-horizontal">
-          <ui class="pure-menu-list">
-              <% if !channel.auto_generated %>
-                  <li class="pure-menu-item pure-menu-selected">
-                    <a href="/channel/<%= channel.ucid %>" class="pure-menu-link">
-                      <b><%= translate(locale, "Videos") %></b>
-                    </a>
-                  </li>
-              <% end %>
-              <li class="pure-menu-item">
-                  <% if channel.auto_generated %>
-                      <b><%= translate(locale, "Playlists") %></b>
-                  <% else %>
-                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/playlists">
-                        <%= translate(locale, "Playlists") %>
-                      </a>
-                  <% end %>
-              </li>
-              <li class="pure-menu-item">
-                  <% if channel.tabs.includes? "community" %>
-                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/community">
-                        <%= translate(locale, "Community") %>
-                      </a>
-                  <% end %>
-              </li>
-              <li class="pure-menu-item navbar" style="margin: 0 0 0 0.5em">
-                  <div class="searchbar">
-                      <form class="pure-form" action="/search" method="get">
-                          <fieldset>
-                              <button class="search-button"><i class="icon ion-md-search"></i></button>
-                              <input type="search" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-                              <input type="hidden" name="channel" value="<%= channel.ucid %>">
-                          </fieldset>
-                      </form>
-                  </div>
-              </li>
-          </ui>
-        </div>
-    </div>
-    <div class="pure-u-1-3"></div>
-    <div class="pure-u-1-3"> <!-- Sort by -->
-        <div class="pure-menu pure-menu-horizontal" style="">
-            <ul class="pure-menu-list", style="float: right">
-                <% sort_options.each do |sort| %>
-                    <% if sort_by == sort %>
-                        <li class="pure-menu-item pure-menu-selected">
-                            <a class="pure-menu-link" href="/channel/<%= channel.ucid %>?page=<%= page %>&sort_by=<%= sort %>">
-                                <b><%= translate(locale, sort) %></b>
-                            </a>
-                        </li>
-                    <% else %>
-                        <li class="pure-menu-item">
-                            <a class="pure-menu-link" href="/channel/<%= channel.ucid %>?page=<%= page %>&sort_by=<%= sort %>">
-                                <%= translate(locale, sort) %>
-                            </a>
-                        </li>
-                    <% end %>
-                <% end %>
-            </ul>
-        </div>
-    </div>
-</div>
-
-<div class="h-box">
-    <hr>
-</div>
+<%= rendered "components/channel-information" %>
 
 <div class="pure-g">
     <% items.each_slice(4) do |slice| %>
diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr
index b0092e5f..a89a16d9 100644
--- a/src/invidious/views/community.ecr
+++ b/src/invidious/views/community.ecr
@@ -1,68 +1,9 @@
-<% content_for "header" do %>
-<title><%= channel.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><%= channel.author %></span>
-        </div>
-    </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3>
-            <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
-
-<div class="h-box">
-    <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %></span></p>
-</div>
-
-<div class="h-box">
-    <% ucid = channel.ucid %>
-    <% author = channel.author %>
-    <% 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">
-            <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-        </div>
-        <% if !channel.auto_generated %>
-            <div class="pure-u-1 pure-md-1-3">
-                <a href="/channel/<%= channel.ucid %>"><%= translate(locale, "Videos") %></a>
-            </div>
-        <% end %>
-        <div class="pure-u-1 pure-md-1-3">
-            <a href="/channel/<%= channel.ucid %>/playlists"><%= translate(locale, "Playlists") %></a>
-        </div>
-        <div class="pure-u-1 pure-md-1-3">
-            <% if channel.tabs.includes? "community" %>
-                <b><%= translate(locale, "Community") %></b>
-            <% end %>
-        </div>
-    </div>
-    <div class="pure-u-2-3"></div>
-</div>
-
-<div class="h-box">
-    <hr>
-</div>
+<% content_type =  2 %>
+<%
+# Make compiler happy
+%>
+<% sort_options = Tuple.new %>
+<%= rendered "components/channel-information" %>
 
 <% if error_message %>
     <div class="h-box">
diff --git a/src/invidious/views/components/channel-information.ecr b/src/invidious/views/components/channel-information.ecr
new file mode 100644
index 00000000..6e636922
--- /dev/null
+++ b/src/invidious/views/components/channel-information.ecr
@@ -0,0 +1,146 @@
+<% content_for "header" do %>
+<title><%= channel.author %> - Invidious</title>
+<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= 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>
+
+    <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><%= channel.author %></span>
+        </div>
+    </div>
+    <div class="pure-u-1-3" style="text-align:right">
+        <h3>
+            <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
+        </h3>
+    </div>
+</div>
+
+<div class="h-box">
+    <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
+</div>
+
+<div class="h-box">
+    <% ucid = channel.ucid %>
+    <% author = channel.author %>
+    <% sub_count_text = number_to_short_text(channel.sub_count) %>
+    <%= rendered "components/subscribe_widget" %>
+</div>
+
+<div class="pure-g h-box" id="content-navigation">
+    <div class="pure-u-1-3">
+        <!-- TODO Add these!
+        <a href="https://www.youtube.com/channel/<%= channel.ucid %>"><%= translate(locale, "View channel on YouTube") %></a> -->
+        <!-- <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a> -->
+        <!-- TODO Refactor this! -->
+        <div class="pure-menu pure-menu-horizontal">
+          <ui class="pure-menu-list">
+              <% if !channel.auto_generated %>
+                  <% if content_type == 0 %>
+                      <li class="pure-menu-item pure-menu-selected">
+                        <a href="/channel/<%= channel.ucid %>" class="pure-menu-link">
+                          <b><%= translate(locale, "Videos") %></b>
+                        </a>
+                      </li>
+                  <% else %>
+                      <li class="pure-menu-item pure-menu">
+                        <a href="/channel/<%= channel.ucid %>" class="pure-menu-link">
+                          <%= translate(locale, "Videos") %>
+                        </a>
+                      </li>
+                  <% end %>
+              <% end %>
+
+              <% if content_type == 1 || channel.auto_generated %>
+                  <li class="pure-menu-item pure-menu-selected">
+                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/playlists">
+                        <b> <%= translate(locale, "Playlists") %> </b>
+                      </a>
+                  </li>
+              <% else %>
+                  <li class="pure-menu-item">
+                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/playlists">
+                        <%= translate(locale, "Playlists") %>
+                      </a>
+                  </li>
+              <% end %>
+
+              <% if channel.tabs.includes? "community" %>
+                      <% if content_type == 2 %>
+                          <li class="pure-menu-item pure-menu-selected">
+                              <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/community">
+                                <b> <%= translate(locale, "Community") %> </b>
+                              </a>
+                          </li>
+                      <% else %>
+                          <li class="pure-menu-item">
+                              <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/community">
+                                <%= translate(locale, "Community") %>
+                              </a>
+                          </li>
+                      <% end %>
+              <% end %>
+
+              <% if !channel.auto_generated %>
+                  <li class="pure-menu-item navbar" style="margin: 0 0 0 0.5em">
+                      <div class="searchbar">
+                          <form class="pure-form" action="/search" method="get">
+                              <fieldset>
+                                  <button class="search-button"><i class="icon ion-md-search"></i></button>
+                                  <input type="search" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+                                  <input type="hidden" name="channel" value="<%= channel.ucid %>">
+                              </fieldset>
+                          </form>
+                      </div>
+                  </li>
+              <% end %>
+          </ui>
+        </div>
+    </div>
+    <div class="pure-u-1-3"></div>
+
+    <% if content_type == 0 || content_type == 1 %>
+        <% route = content_type == 1 ? "/playlists" : "" %>
+        <% url = "/channel/#{channel.ucid + route}" %>
+        <% if env.params.query %>
+            <% url += "?#{env.params.query}"%>
+        <% end %>
+
+        <div class="pure-u-1-3"> <!-- Sort by -->
+            <div class="pure-menu pure-menu-horizontal" style="">
+                <ul class="pure-menu-list", style="float: right">
+                    <% sort_options.each do |sort| %>
+                        <% if sort_by == sort %>
+                            <li class="pure-menu-item pure-menu-selected">
+                                <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
+                                    <b><%= translate(locale, sort) %></b>
+                                </a>
+                            </li>
+                        <% else %>
+                            <li class="pure-menu-item">
+                                <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
+                                    <%= translate(locale, sort) %>
+                                </a>
+                            </li>
+                        <% end %>
+                    <% end %>
+                </ul>
+            </div>
+        </div>
+    <% end %>
+</div>
+
+<div class="h-box">
+    <hr>
+</div>
diff --git a/src/invidious/views/playlists.ecr b/src/invidious/views/playlists.ecr
index 975ccd6c..09bde10c 100644
--- a/src/invidious/views/playlists.ecr
+++ b/src/invidious/views/playlists.ecr
@@ -1,87 +1,6 @@
-<% content_for "header" do %>
-<title><%= channel.author %> - Invidious</title>
-<% end %>
+<% content_type =  1 %>
 
-<% 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><%= channel.author %></span>
-        </div>
-    </div>
-    <div class="pure-u-1-3" style="text-align:right">
-        <h3>
-            <a href="/feed/channel/<%= channel.ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
-
-<div class="h-box">
-    <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 class="h-box">
-    <% ucid = channel.ucid %>
-    <% author = channel.author %>
-    <% 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/<%= channel.ucid %>/playlists"><%= translate(locale, "View channel on YouTube") %></a>
-        </div>
-
-        <div class="pure-u-1 pure-md-1-3">
-            <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
-        </div>
-
-        <div class="pure-u-1 pure-md-1-3">
-            <a href="/channel/<%= channel.ucid %>"><%= translate(locale, "Videos") %></a>
-        </div>
-        <div class="pure-u-1 pure-md-1-3">
-            <% if !channel.auto_generated %>
-                <b><%= translate(locale, "Playlists") %></b>
-            <% end %>
-        </div>
-        <div class="pure-u-1 pure-md-1-3">
-            <% if channel.tabs.includes? "community" %>
-                <a href="/channel/<%= channel.ucid %>/community"><%= translate(locale, "Community") %></a>
-            <% end %>
-        </div>
-    </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/<%= channel.ucid %>/playlists?sort_by=<%= sort %>">
-                            <%= translate(locale, sort) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
-    </div>
-</div>
-
-<div class="h-box">
-    <hr>
-</div>
+<%= rendered "components/channel-information" %>
 
 <div class="pure-g">
     <% items.each_slice(4) do |slice| %>