Add CSS element for compilation video

This commit is contained in:
broquemonsieur 2023-07-03 19:46:29 -07:00
parent 128d541323
commit 2a9789cc1e
6 changed files with 208 additions and 9 deletions

View File

@ -761,8 +761,16 @@ h1, h2, h3, h4, h5, p,
} }
div.compilation-video-panel { div.compilation-video-panel {
display: block; padding: 28.125%;
margin-left: auto; position: relative;
margin-right: auto; box-sizing: border-box;
color: #d9d9d9;
} }
img.compilation-video-panel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
}

View File

@ -86,6 +86,7 @@ module Invidious::Routing
get "/create_compilation", Routes::Compilations, :new get "/create_compilation", Routes::Compilations, :new
post "/create_compilation", Routes::Compilations, :create post "/create_compilation", Routes::Compilations, :create
post "/compilation_ajax", Routes::Compilations, :compilation_ajax post "/compilation_ajax", Routes::Compilations, :compilation_ajax
get "/add_compilation_items", Routes::Compilations, :add_compilation_items_page
end end
def register_iv_playlist_routes def register_iv_playlist_routes

View File

@ -8,6 +8,7 @@ module Invidious::Search
# Types specific to Invidious # Types specific to Invidious
Subscriptions # Search user subscriptions Subscriptions # Search user subscriptions
Playlist # "Add playlist item" search Playlist # "Add playlist item" search
Compilation # "Add compilation item" search
end end
getter type : Type = Type::Regular getter type : Type = Type::Regular
@ -75,6 +76,12 @@ module Invidious::Search
# #
@filters, _, @query, _ = Filters.from_legacy_filters(@raw_query) @filters, _, @query, _ = Filters.from_legacy_filters(@raw_query)
# #
when .compilation?
# In "add compilation item" mode, filters are parsed from the query
# string itself (legacy), and the channel is ignored.
#
@filters, _, @query, _ = Filters.from_legacy_filters(@raw_query)
#
when .subscriptions?, .regular? when .subscriptions?, .regular?
if params["sp"]? if params["sp"]?
# Parse the `sp` URL parameter (youtube compatibility) # Parse the `sp` URL parameter (youtube compatibility)
@ -112,7 +119,7 @@ module Invidious::Search
return items if self.empty_raw_query? return items if self.empty_raw_query?
case @type case @type
when .regular?, .playlist? when .regular?, .playlist?, .compilation?
items = Processors.regular(self) items = Processors.regular(self)
# #
when .channel? when .channel?

View File

@ -6,3 +6,99 @@
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/compilation/<%= compid %>" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/compilation/<%= compid %>" />
<% end %> <% end %>
<div class="pure-g h-box">
<div class="pure-u-2-3">
<h3><%= title %></h3>
<% if compilation.is_a? InvidiousCompilation %>
<b>
<% if compilation.author == user.try &.email %>
<a href="/feed/compilations"><%= author %></a> |
<% else %>
<%= author %> |
<% end %>
<%= translate_count(locale, "generic_videos_count", compilation.video_count) %> |
<%= translate(locale, "Updated `x` ago", recode_date(compilation.updated, locale)) %> |
<% case compilation.as(InvidiousCompilation).privacy when %>
<% when CompilationPrivacy::Unlisted %>
<i class="icon ion-ios-unlock"></i> <%= translate(locale, "Unlisted") %>
<% when CompilationPrivacy::Private %>
<i class="icon ion-ios-lock"></i> <%= translate(locale, "Private") %>
<% end %>
</b>
<% else %>
<b>
<a href="/channel/<%= compilation.ucid %>"><%= author %></a> |
<%= translate_count(locale, "generic_videos_count", compilation.video_count) %> |
<%= translate(locale, "Updated `x` ago", recode_date(compilation.updated, locale)) %>
</b>
<% end %>
</div>
<div class="pure-u-1-3" style="text-align:right">
<h3>
<div class="pure-g user-field">
<% if compilation.is_a?(InvidiousCompilation) && compilation.author == user.try &.email %>
<div class="pure-u-1-3"><a href="/edit_compilation?list=<%= compid %>"><i class="icon ion-md-create"></i></a></div>
<div class="pure-u-1-3"><a href="/delete_compilation?list=<%= compid %>"><i class="icon ion-md-trash"></i></a></div>
<% else %>
<% if !Invidious::Database::Compilations.exists?(compilation.id) %>
<div class="pure-u-1-3"><a href="/delete_compilation?list=<%= compid %>"><i class="icon ion-md-trash"></i></a></div>
<% end %>
<% end %>
<div class="pure-u-1-3"><a href="/feed/compilation/<%= compid %>"><i class="icon ion-logo-rss"></i></a></div>
</div>
</h3>
</div>
</div>
<div class="h-box">
<div id="descriptionWrapper"><%= compilation.description_html %></div>
</div>
<% if compilation.is_a?(InvidiousCompilation) && compilation.author == user.try &.email %>
<div class="h-box" style="text-align:right">
<h3>
<a href="/add_compilation_items?list=<%= compid %>"><i class="icon ion-md-add"></i></a>
</h3>
</div>
<% end %>
<div class="h-box">
<hr>
</div>
<% if compilation.is_a?(InvidiousCompilation) && compilation.author == user.try &.email %>
<script id="compilation_data" type="application/json">
<%=
{
"csrf_token" => URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "")
}.to_pretty_json
%>
</script>
<script src="/js/compilation_widget.js?v=<%= ASSET_COMMIT %>"></script>
<% end %>
<div class="pure-g">
<% videos.each do |compilation_video| %>
<%= rendered "components/compilation_video" %>
<% end %>
</div>
<script src="/js/watched_indicator.js"></script>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5">
<% if page > 1 %>
<a href="/compilation?complist=<%= compilation.id %>&page=<%= page - 1 %>">
<%= translate(locale, "Previous page") %>
</a>
<% end %>
</div>
<div class="pure-u-1 pure-u-lg-3-5"></div>
<div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
<% if page_count != 1 && page < page_count %>
<a href="/compilation?complist=<%= compilation.id %>&page=<%= page + 1 %>">
<%= translate(locale, "Next page") %>
</a>
<% end %>
</div>
</div>

View File

@ -0,0 +1,15 @@
<div class="pure-u-1 pure-u-md-1">
<div class="h-box">
<div style="display:flex; justify-content:flex-start; width:calc(100% - 20px); height:100px; border:1px solid black; margin: 10px; background: #d9d9d9;">
<div style="display:flex; flex-direction:column; justify-content:space-between;">
<svg style="width:20px; height:50%; background-color: beige; margin: 10px;">
<path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
</svg>
<svg style="width:20px; height:50%; background-color: beige; margin: 10px;">
<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
</svg>
</div>
<img loading="lazy" style="margin:10px;" src="/vi/<%= compilation_video.id %>/mqdefault.jpg" alt="" />
</div>
</div>
</div>

View File

@ -102,13 +102,78 @@
<p dir="auto"><b><%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousCompilation) && !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></b></p> <p dir="auto"><b><%= HTML.escape(item.author) %><% if !item.is_a?(InvidiousCompilation) && !item.is_a?(InvidiousPlaylist) && !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></b></p>
</a> </a>
<% when CompilationVideo %> <% when CompilationVideo %>
<a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.compid %>&index=<%= item.index %>"> <div style="width:100%; height:50px; border:1px solid black;">
<!-- <a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.compid %>&index=<%= item.index %>">
<% if !env.get("preferences").as(Preferences).thin_mode %> <% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="compilation-video-panel"> <div class="thumbnail">
<img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
<% if compid_form = env.get?("remove_compilation_items") %>
<form data-onsubmit="return_false" action="/compilation_ajax?action_remove_video=1&set_video_id=<%= item.index %>&compilation_id=<%= compid_form %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched">
<button type="submit" style="all:unset" data-onclick="remove_compilation_item" data-index="<%= item.index %>" data-compid="<%= compid_form %>"><i class="icon ion-md-trash"></i></button>
</p>
</form>
<% end %>
</div> </div>
<% end %> <% end %>
</a> <p dir="auto"><%= HTML.escape(item.title) %></p>
</a> -->
</div>
<% when PlaylistVideo %>
<a style="width:100%" href="/watch?v=<%= item.id %>&list=<%= item.plid %>&index=<%= item.index %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail">
<img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
<% if plid_form = env.get?("remove_playlist_items") %>
<form data-onsubmit="return_false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= item.index %>&playlist_id=<%= plid_form %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched">
<button type="submit" style="all:unset" data-onclick="remove_playlist_item" data-index="<%= item.index %>" data-plid="<%= plid_form %>"><i class="icon ion-md-trash"></i></button>
</p>
</form>
<% end %>
<% if item.responds_to?(:live_now) && item.live_now %>
<p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
<% elsif item.length_seconds != 0 %>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<% end %>
<% if item_watched %>
<div class="watched-overlay"></div>
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
<% end %>
</div>
<% end %>
<p dir="auto"><%= HTML.escape(item.title) %></p>
</a>
<div class="video-card-row flexible">
<div class="flex-left"><a href="/channel/<%= item.ucid %>">
<p class="channel-name" dir="auto"><%= HTML.escape(item.author) %></p>
</a></div>
<% endpoint_params = "?v=#{item.id}&list=#{item.plid}" %>
<%= rendered "components/video-context-buttons" %>
</div>
<div class="video-card-row flexible">
<div class="flex-left">
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
<p dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p>
<% elsif Time.utc - item.published > 1.minute %>
<p dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
<% end %>
</div>
<% if item.responds_to?(:views) && item.views %>
<div class="flex-right">
<p dir="auto"><%= translate_count(locale, "generic_views_count", item.views || 0, NumberFormatting::Short) %></p>
</div>
<% end %>
</div>
<% when Category %> <% when Category %>
<% else %> <% else %>
<%- <%-
@ -157,6 +222,13 @@
<button type="submit" class="pure-button pure-button-secondary low-profile" <button type="submit" class="pure-button pure-button-secondary low-profile"
data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid_form %>"><i class="icon ion-md-add"></i></button> data-onclick="add_playlist_item" data-id="<%= item.id %>" data-plid="<%= plid_form %>"><i class="icon ion-md-add"></i></button>
</form> </form>
<% elsif compid_form = env.get? "add_compilation_items" %>
<form data-onsubmit="return_false" action="/compilation_ajax?action_add_video=1&video_id=<%= item.id %>&compilation_id=<%= compid_form %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched">
<button type="submit" style="all:unset" data-onclick="add_compilation_item" data-id="<%= item.id %>" data-compid="<%= compid_form %>"><i class="icon ion-md-add"></i></button>
</p>
</form>
<%- elsif item.is_a?(PlaylistVideo) && (plid_form = env.get?("remove_playlist_items")) -%> <%- elsif item.is_a?(PlaylistVideo) && (plid_form = env.get?("remove_playlist_items")) -%>
<%- form_parameters = "action_remove_video=1&set_video_id=#{item.index}&playlist_id=#{plid_form}&referer=#{env.get("current_page")}" -%> <%- form_parameters = "action_remove_video=1&set_video_id=#{item.index}&playlist_id=#{plid_form}&referer=#{env.get("current_page")}" -%>
<form data-onsubmit="return_false" action="/playlist_ajax?<%= form_parameters %>" method="post"> <form data-onsubmit="return_false" action="/playlist_ajax?<%= form_parameters %>" method="post">