mirror of
https://gitea.invidious.io/iv-org/invidious-copy-2023-06-08.git
synced 2024-08-15 00:53:38 +00:00
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:
parent
22f6fe16c3
commit
36019fa438
10 changed files with 126 additions and 19 deletions
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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" %>
|
||||
|
||||
|
|
|
@ -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%>
|
||||
|
|
60
src/invidious/views/channel/home.ecr
Normal file
60
src/invidious/views/channel/home.ecr
Normal 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>
|
|
@ -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">
|
||||
|
|
|
@ -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}" %>
|
||||
|
||||
|
|
Loading…
Reference in a new issue