From 04cc15500f653f7b0a818bd468e73ed7f5c230a1 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Fri, 16 Apr 2021 00:27:37 -0700
Subject: [PATCH] Change channel banner to be CSS background image

This is to allow for contents to be placed on the channel banner itself;
something that is required for the links widget shown on Youtube.
---
 assets/css/default.css                                 | 10 ++++++++++
 src/invidious.cr                                       |  1 -
 src/invidious/channels/about.cr                        |  2 +-
 src/invidious/views/components/channel-information.ecr |  5 +++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 74812d8c..fb12a66e 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -15,6 +15,16 @@ body {
   background-color: rgb(255, 0, 0, 0.5);
 }
 
+#channel-banner-container {
+  margin-bottom: 1em;
+}
+
+#banner {
+  height: calc(100vw / 6.2 - 1px);
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+}
+
 .channel-profile > * {
   font-size: 1.17em;
   font-weight: bold;
diff --git a/src/invidious.cr b/src/invidious.cr
index b91803d1..ac0be960 100644
--- a/src/invidious.cr
+++ b/src/invidious.cr
@@ -1488,7 +1488,6 @@ get "/fetch_link_favicon" do |env|
         env.response.headers["Access-Control-Allow-Origin"] = "*"
         proxy_file(favicon_response, env)
       end
-
     rescue ex
     end
   end
diff --git a/src/invidious/channels/about.cr b/src/invidious/channels/about.cr
index 52647e70..4d8b1ff0 100644
--- a/src/invidious/channels/about.cr
+++ b/src/invidious/channels/about.cr
@@ -195,6 +195,6 @@ def get_about_info(ucid, locale)
     allowed_regions:    allowed_regions,
     related_channels:   related_channels,
     tabs:               tabs,
-    links:              links
+    links:              links,
   })
 end
diff --git a/src/invidious/views/components/channel-information.ecr b/src/invidious/views/components/channel-information.ecr
index a756a446..a3c7a9f0 100644
--- a/src/invidious/views/components/channel-information.ecr
+++ b/src/invidious/views/components/channel-information.ecr
@@ -4,8 +4,9 @@
 <% 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 class="pure-g" id="channel-banner-container">
+        <div class="pure-u-1" id="banner" style='background: url(/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>)'>
+        </div>
     </div>
 
     <div class="h-box">