From 5979e8f114dac17d682712b3ef2b6df9ef63cdbb Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Fri, 25 Jun 2021 20:28:25 -0700
Subject: [PATCH] Enhance chan about page to show channel description

---
 assets/css/channel.css                | 13 +++++++
 locales/ar.json                       |  1 +
 locales/de.json                       |  1 +
 locales/el.json                       |  1 +
 locales/en-US.json                    |  1 +
 locales/eo.json                       |  1 +
 locales/es.json                       |  1 +
 locales/fa.json                       |  1 +
 locales/fi.json                       |  1 +
 locales/fr.json                       |  1 +
 locales/he.json                       |  1 +
 locales/hr.json                       |  1 +
 locales/id.json                       |  1 +
 locales/is.json                       |  1 +
 locales/it.json                       |  1 +
 locales/ja.json                       |  1 +
 locales/nb-NO.json                    |  1 +
 locales/nl.json                       |  1 +
 locales/pl.json                       |  1 +
 locales/pt-BR.json                    |  1 +
 locales/pt-PT.json                    |  1 +
 locales/ro.json                       |  1 +
 locales/ru.json                       |  1 +
 locales/sv-SE.json                    |  1 +
 locales/tr.json                       |  1 +
 locales/uk.json                       |  1 +
 locales/zh-CN.json                    |  1 +
 locales/zh-TW.json                    |  1 +
 src/invidious/views/channel/about.ecr | 56 ++++++++++++++-------------
 29 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/assets/css/channel.css b/assets/css/channel.css
index 660f0792..4e2b79f5 100644
--- a/assets/css/channel.css
+++ b/assets/css/channel.css
@@ -23,8 +23,19 @@
   #link-holder {
     display: none;
   }
+
+  #about-content-container > *  {
+    margin-bottom: 25px;
+  }
+}
+
+@media screen and (min-width: 640px) {
+  #about-content-container > *  {
+    margin-bottom: 50px;
+  }
 }
 
+
 #link-widget-primary {
   margin-right: 1.5em;
 }
@@ -51,6 +62,8 @@
   color: #e1e1e1 !important;
 }
 
+
+
 /* Featured channels page */
 
 .channel-section details {
diff --git a/locales/ar.json b/locales/ar.json
index a2681470..fdb98784 100644
--- a/locales/ar.json
+++ b/locales/ar.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/de.json b/locales/de.json
index fcad1436..1ba55573 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/el.json b/locales/el.json
index 52545a66..a5017934 100644
--- a/locales/el.json
+++ b/locales/el.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/en-US.json b/locales/en-US.json
index 168caeee..732b6491 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "After which you should try to: ",
     "next_steps_error_message_refresh": "Refresh",
     "next_steps_error_message_go_to_youtube": "Go to Youtube",
+    "Description": "Description",
     "Details": "Details",
     "Country: ": "Country: ",
     "Stats": "Stats",
diff --git a/locales/eo.json b/locales/eo.json
index 4dcf29f4..f549a4f4 100644
--- a/locales/eo.json
+++ b/locales/eo.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/es.json b/locales/es.json
index eec3bab8..86b3e4ad 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/fa.json b/locales/fa.json
index 1e5e81b3..92372b45 100644
--- a/locales/fa.json
+++ b/locales/fa.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/fi.json b/locales/fi.json
index 871130cd..921ffff5 100644
--- a/locales/fi.json
+++ b/locales/fi.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/fr.json b/locales/fr.json
index c27762ad..4fdf51d7 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/he.json b/locales/he.json
index 01f75d2e..ce3606ee 100644
--- a/locales/he.json
+++ b/locales/he.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/hr.json b/locales/hr.json
index 77188b73..25f39673 100644
--- a/locales/hr.json
+++ b/locales/hr.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/id.json b/locales/id.json
index 43afced0..89f1bb00 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "next_steps_error_message",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/is.json b/locales/is.json
index 2fe66e91..a938f92d 100644
--- a/locales/is.json
+++ b/locales/is.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/it.json b/locales/it.json
index 8719e401..99140fd9 100644
--- a/locales/it.json
+++ b/locales/it.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/ja.json b/locales/ja.json
index 50acb9f5..3d4b952f 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/nb-NO.json b/locales/nb-NO.json
index 85d35ec2..2a414265 100644
--- a/locales/nb-NO.json
+++ b/locales/nb-NO.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/nl.json b/locales/nl.json
index dba8f681..c480971a 100644
--- a/locales/nl.json
+++ b/locales/nl.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/pl.json b/locales/pl.json
index 4eb18fc0..9d3aa775 100644
--- a/locales/pl.json
+++ b/locales/pl.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
index 8b80963c..24308004 100644
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
index 6202da30..4b454644 100644
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/ro.json b/locales/ro.json
index f7bc89de..7de8d369 100644
--- a/locales/ro.json
+++ b/locales/ro.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/ru.json b/locales/ru.json
index 9de6ec38..34499974 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/sv-SE.json b/locales/sv-SE.json
index 459d1327..4f98d2a4 100644
--- a/locales/sv-SE.json
+++ b/locales/sv-SE.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/tr.json b/locales/tr.json
index 3ff8dd77..5186145e 100644
--- a/locales/tr.json
+++ b/locales/tr.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/uk.json b/locales/uk.json
index 828614ec..50734d85 100644
--- a/locales/uk.json
+++ b/locales/uk.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 2a74d398..588920d4 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 30b1ce43..64c11f7c 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",
diff --git a/src/invidious/views/channel/about.ecr b/src/invidious/views/channel/about.ecr
index 41141607..a931121d 100644
--- a/src/invidious/views/channel/about.ecr
+++ b/src/invidious/views/channel/about.ecr
@@ -1,46 +1,50 @@
 <% content_for "header" do %>
 <title><%= channel.author %> - Invidious</title>
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+
+<!-- Channel description on the header should always be hidden on the about page -->
+<style>
+  #channel-description-container {
+    display: none
+  }
+</style>
+
 <% end %>
 
 <% content_type =  5 %>
 <% sort_options = Tuple.new %>
 <%= rendered "components/channel-information" %>
 
-<div class="pure-g">
-    <% stats_style_append = ""%>
-    <% if !channel.country.empty? %>
-        <div class="pure-u-1 pure-u-md-3-4">
-            <div class="h-box">
-                <h3> <%= translate(locale, "Details") %> </h3>
-                <p><%= translate(locale, "Country: ") %><%=channel.country%></p> <!-- Translate Country Names -->
-            </div>
-        </div>
-    <% else %>
-        <% stats_style_append = "style=\"order: 1;\"" %>
-    <% end %>
+<div class="pure-g h-box" id="about-content-container">
+    <div class="pure-u-1 pure-u-md-3-4">
+        <h3> <%= translate(locale, "Description") %> </h3>
+        <p id="channel-description" class="pure-u-md-22-24" style="margin: 0"><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
+    </div>
 
-    <div class="pure-u-1 pure-u-md-1-4" <%= stats_style_append %>>
-        <div class="h-box">
-            <h3> <%= translate(locale, "Stats") %> </h3>
-            <p> <%= translate(locale, "Joined") %>
-                <time datetime="<%=channel.joined.to_s("%Y-%m-%d")%>">
-                    <%= channel.joined.to_s(translate(locale, "%B %-d, %Y")) %>
-                </time>
-            </p>
-            <p><%= channel.total_views ? translate(locale, "`x` views", number_with_separator(channel.total_views || 0)) : "" %></p>
-        </div>
+    <div class="pure-u-1 pure-u-md-1-4">
+        <h3> <%= translate(locale, "Stats") %> </h3>
+        <p> <%= translate(locale, "Joined") %>
+            <time datetime="<%=channel.joined.to_s("%Y-%m-%d")%>">
+                <%= channel.joined.to_s(translate(locale, "%B %-d, %Y")) %>
+            </time>
+        </p>
+        <p><%= channel.total_views ? translate(locale, "`x` views", number_with_separator(channel.total_views || 0)) : "" %></p>
+    </div>
+
+    <div class="pure-u-1 pure-u-md-3-4">
+        <h3> <%= translate(locale, "Details") %> </h3>
+        <p><%= translate(locale, "Country: ") %><%=channel.country%></p> <!-- Translate Country Names -->
     </div>
 
-    <div class="pure-u-1 pure-u-md-2-3" id="external-links">
-        <div class="h-box">
+    <% if !channel.links.empty? %>
+        <div class="pure-u-1 pure-u-md-2-3" id="external-links">
             <h3> <%= translate(locale, "Links") %> </h3>
             <% channel.links.each do |link_tuple| %>
                 <div class="pure-u-11-24" style="margin-bottom: 2em;">
                     <img src="/fetch_link_favicon?url=<%=link_tuple[2]%>">
-                    <a href="<%=link_tuple[1]%>"><%=link_tuple[0]%></a>
+                    <a href="<%=link_tuple[1]%>"><%=HTML.escape(link_tuple[0])%></a>
                 </div>
             <% end %>
         </div>
-    </div>
+    <% end %>
 </div>