Add links widget to channel banner + tiny refactor

assets/css/channel.css

@@ -11,3 +11,42 @@
   background-repeat: no-repeat !important;
 }
 
+#link-holder {
+  display: flex;
+  background: rgba(0, 0, 0, 0.3);
+  align-self: flex-end;
+  margin: 15px;
+  padding: 12px;
+}
+
+@media screen and (max-width: 640px) {
+  #link-holder {
+    display: none;
+  }
+}
+
+#link-widget-primary {
+  margin-right: 1.5em;
+}
+
+.link-widget-link {
+  margin-right: 10px;
+}
+
+.link-widget-link:last-child {
+  margin-right: 0;
+}
+
+.link-widget-link img, #external-links img {
+  vertical-align: sub;
+  width: 20px;
+  height: 20px;
+}
+
+#link-widget-primary a {
+  color: white !important;
+}
+
+#link-widget-primary a:hover {
+  color: #e1e1e1 !important;
+}

src/invidious/views/channel.ecr

@@ -1,5 +1,10 @@
-<% content_type =  0 %>
+<% content_for "header" do %>
+<title><%= channel.author %> - Invidious</title>
+<link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= channel.ucid %>" >
+<% end %>
 
+<% content_type =  0 %>
 <%= rendered "components/channel-information" %>
 
 <div class="pure-g">

src/invidious/views/channel_about.ecr

@@ -1,3 +1,8 @@
+<% content_for "header" do %>
+<title><%= channel.author %> - Invidious</title>
+<link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+<% end %>
+
 <% content_type =  4 %>
 <% sort_options = Tuple.new %>
 <%= rendered "components/channel-information" %>

src/invidious/views/community.ecr

@@ -1,3 +1,8 @@
+<% content_for "header" do %>
+<title><%= channel.author %> - Invidious</title>
+<link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+<% end %>
+
 <% content_type =  2 %>
 <% sort_options = Tuple.new %>
 <%= rendered "components/channel-information" %>

src/invidious/views/components/channel-information.ecr

@@ -1,12 +1,24 @@
-<% content_for "header" do %>
-<title><%= channel.author %> - Invidious</title>
-<link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>"/>
-<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= channel.ucid %>" />
-<% end %>
-
 <% if channel.banner %>
     <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 %>)'>
+            <% if channel.links %>
+                <div id="link-holder">
+                    <div id="link-widget-primary" class="link-widget-link">
+                        <a href="<%=channel.links[0][1]%>" title=<%=channel.links[0][0]%>>
+                            <img src="/fetch_link_favicon?url=<%=channel.links[0][2]%>">
+                            <b> <%=channel.links[0][0]%> </b>
+                        </a>
+                    </div>
+
+                    <% channel.links[1..4].each do |link_tuple| %>
+                        <div class="link-widget-link">
+                            <a href="<%=link_tuple[1]%>" title=<%=link_tuple[0]%>>
+                                <img src="/fetch_link_favicon?url=<%=link_tuple[2]%>">
+                            </a>
+                        </div>
+                    <% end %>
+                </div>
+            <% end %>
         </div>
     </div>
 

src/invidious/views/playlists.ecr

@@ -1,5 +1,9 @@
-<% content_type =  1 %>
+<% content_for "header" do %>
+<title><%= channel.author %> - Invidious</title>
+<link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+<% end %>
 
+<% content_type =  1 %>
 <%= rendered "components/channel-information" %>
 
 <div class="pure-g">