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.
This commit is contained in:
syeopite 2021-05-08 21:09:30 -07:00
parent 22f6fe16c3
commit 36019fa438
No known key found for this signature in database
GPG key ID: 6FA616E5A5294A82
10 changed files with 126 additions and 19 deletions

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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

View file

@ -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)

View file

@ -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">

View file

@ -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" %>

View file

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

View file

@ -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>

View file

@ -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">

View file

@ -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}" %>