Add support channel home pages + gen. improvements

This commit adds support for channel home pages and all of the
categories within it. However, the frontend code is a mess and thus
needs to be refactor soon. Though that would likely require a rework of
items.ecr

This commit also comes with some general cleanups and improvements.

Before this commit channel brand URls would only be supported on the
videos page (now home page). It has been improved to be able to handle
all channel URLs.

The category_type and auxiliary_data property has also been removed from
the Category struct. The former was never used and the latter allows for
random data to be added to the Struct presenting documentation issues.

Since the auxiliary_data variable was mainly used to store values from
the browse_endpoint in order to create URLs, its much simpler to instead
just get the URL from the webCommandMetadata.

As a result of this change the browse_endpoint_data attribute of
Category has also been removed.

assets/css/channel.css

@@ -66,7 +66,6 @@
 }
 
 .category-heading {
-  font-size: 1.2em;
   user-select: none;
   display: inline;
 }
@@ -117,3 +116,23 @@ only show up when the screen is wide enough */
     margin-top: 1em;
   }
 }
+
+.trailer-metadata {
+  margin-left: 15px;
+  font-size: 12px;
+  color: rgb(232, 230, 227);
+}
+
+.trailer-metadata .read-more {
+  line-height: 20px;
+  text-transform: uppercase;
+  color: gray;
+  font-size: 13px;
+}
+
+.trailer-description {
+  overflow: hidden;
+  max-height: 150px;
+  line-height: 20px;
+  margin-top: 20px;
+}

assets/css/default.css

@@ -633,7 +633,8 @@ p,
 }
 
 .category {
-  margin: 3em 0px 4em 0px;
+  margin-bottom: 2em;
+  margin-top: 1em;
 }
 
 .category .heading > p {
@@ -648,3 +649,8 @@ p,
   font-size: 14px;
   margin-left: 10px;
 }
+
+ /* Temp */ 
+.category-description {
+  color: #A8A095;
+}

src/invidious/helpers/serialized_yt_data.cr

@@ -235,9 +235,6 @@ class Category
   property description_html : String
   property badges : Array(Tuple(String, String))?
 
-  # Data unique to only specific types of categories.
-  property auxiliary_data : Hash(String, String)
-
   def to_json(locale, json : JSON::Builder)
     json.object do
       json.field "title", self.title

src/invidious/routes/channels.cr

@@ -2,7 +2,19 @@
 
 module Invidious::Routes::Channels
   def self.home(env)
-    self.videos(env)
+    data = self.fetch_basic_information(env)
+    if !data.is_a?(Tuple)
+      return data
+    end
+    locale, user, subscriptions, continuation, ucid, channel = data
+    items = fetch_channel_home(ucid, channel)
+
+    has_trailer = false
+    if items[0].is_a? Video
+      has_trailer = true
+    end
+
+    templated "channel/home"
   end
 
   def self.videos(env)

src/invidious/views/channel/channel.ecr

@@ -4,7 +4,7 @@
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= channel.ucid %>" >
 <% end %>
 
-<% content_type =  0 %>
+<% content_type =  1 %>
 <%= rendered "components/channel-information" %>
 
 <div class="pure-g">

src/invidious/views/channel/community.ecr

@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
 <% end %>
 
-<% content_type =  2 %>
+<% content_type =  3 %>
 <% sort_options = Tuple.new %>
 <%= rendered "components/channel-information" %>
 

src/invidious/views/channel/featured_channels.ecr

@@ -13,10 +13,9 @@
             <div class="channel-section pure-u-1">
                 <details open="">
                     <summary style="display: revert;">
-                        <h3 class="category-heading">
+                        <span style="font-weight: bold;">
-                            <% if category.auxiliary_data.has_key?("view") %>
+                            <% if category.url %>
-                                <% category_url_param = "?view=#{category.auxiliary_data["view"]}&shelf_id=#{category.auxiliary_data["shelf_id"]}" %>
+                                <a href="<%=category.url%>">
-                                <a href="/channel/<%=channel.ucid%>/channels<%=HTML.escape(category_url_param)%>">
                                     <%= category.title %>
                                 </a>
                             <%else%>

src/invidious/views/channel/home.ecr

@@ -0,0 +1,60 @@
+<% content_for "header" do %>
+    <title><%= channel.author %> - Invidious</title>
+    <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+<% end %>
+
+<% content_type =  0 %>
+<% sort_options = Tuple.new %>
+<%= rendered "components/channel-information" %>
+
+ <div class="pure-g">
+    <% items.each do | section | %>
+        <% # Channel trailer %>
+        <% if section.is_a? Video %>
+            <div class="pure-u-1 h-box trailer-container category">
+                <% # Placeholder solution. A mini player should be placed here
+                %>
+                <div class="player-container pure-u-1 pure-u-md-1-3">
+                    <a style="width:100%" href="/watch?v=<%= section.id %>">
+                        <div class="thumbnail">
+                            <img class="thumbnail" src="/vi/<%=section.id%>/maxres.jpg"/>
+                            <% if section.length_seconds != 0 %>
+                                <p class="length"><%= recode_length_seconds(section.length_seconds) %></p>
+                            <% end %>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="trailer-metadata pure-u-1 pure-u-md-1-3">
+                    <a style="color:rgb(209, 209, 209)"><%= HTML.escape(section.title) %></a>
+                    <p style="color: gray;">
+                        <%= translate(locale, "`x` views", number_to_short_text(section.views || 0)) %>
+                        <%= translate(locale, "Shared `x` ago", recode_date(section.published, locale)) %>
+                    </p>
+                    <div class="trailer-description">
+                        <%= section.description_html %>
+                    </div>
+                    <a class="read-more" href="/watch?v=<%= section.id %>">READ MORE</a>
+                </div>
+            </div>
+        <% else %>
+            <div class="category pure-u-1">
+                <details open = ""> 
+                    <summary style="display: revert;">
+                        <a class="category-heading" href="<%=section.url%>"> <%= section.title %> </a>
+                    </summary>
+
+                    <div class="category-description h-box">
+                        <p> <%= section.description_html %></p>
+                    </div>
+
+                    <div class="pure-g">
+                        <% section.contents.each do |item| %>
+                            <%= rendered "components/item" %>
+                        <% end %>
+                    </div>
+                </details>
+            </div>
+        <% end %>
+    <% end %>
+ </div>

src/invidious/views/channel/playlists.ecr

@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
 <% end %>
 
-<% content_type =  1 %>
+<% content_type =  2 %>
 <%= rendered "components/channel-information" %>
 
 <div class="pure-g">

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

@@ -60,23 +60,37 @@
         <!-- 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">
+                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>">
+                        <b> <%= translate(locale, "Home") %> </b>
+                      </a>
+                  </li>
+              <% else %>
+                  <li class="pure-menu-item">
+                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>">
+                        <%= translate(locale, "Home") %>
+                      </a>
+                  </li>
+              <% end %>
+          
+              <% if !channel.auto_generated %>
+                  <% if content_type == 1 %>
+                      <li class="pure-menu-item pure-menu-selected">
+                        <a href="/channel/<%= channel.ucid %>/videos" 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">
+                        <a href="/channel/<%= channel.ucid %>/videos" class="pure-menu-link">
                           <%= translate(locale, "Videos") %>
                         </a>
                       </li>
                   <% end %>
               <% end %>
 
-              <% if content_type == 1 || channel.auto_generated %>
+              <% if content_type == 2 %>
                   <li class="pure-menu-item pure-menu-selected">
                       <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/playlists">
                         <b> <%= translate(locale, "Playlists") %> </b>
@@ -91,7 +105,7 @@
               <% end %>
 
               <% if channel.tabs.has_key?("community") %>
-                  <% if content_type == 2 %>
+                  <% if content_type == 3 %>
                       <li class="pure-menu-item pure-menu-selected">
                           <a class="pure-menu-link" href="/channel/<%= channel.ucid %>/community">
                             <b> <%= translate(locale, "Community") %> </b>
@@ -152,7 +166,7 @@
     </div>
     <div class="pure-u-1-3"></div>
 
-    <% if content_type == 0 || content_type == 1 %>
+    <% if content_type == 1 || content_type == 2 %>
         <% route = content_type == 1 ? "/playlists" : "" %>
         <% url = "/channel/#{channel.ucid + route}" %>