Add CSS element for compilation video

assets/css/default.css

@@ -761,8 +761,16 @@ h1, h2, h3, h4, h5, p,
 }
 
 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;
 }    

src/invidious/routing.cr

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

src/invidious/search/query.cr

@@ -8,6 +8,7 @@ module Invidious::Search
       # Types specific to Invidious
       Subscriptions # Search user subscriptions
       Playlist      # "Add playlist item" search
+      Compilation   # "Add compilation item" search
     end
 
     getter type : Type = Type::Regular
@@ -75,6 +76,12 @@ module Invidious::Search
         #
         @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?
         if params["sp"]?
           # Parse the `sp` URL parameter (youtube compatibility)
@@ -112,7 +119,7 @@ module Invidious::Search
       return items if self.empty_raw_query?
 
       case @type
-      when .regular?, .playlist?
+      when .regular?, .playlist?, .compilation?
         items = Processors.regular(self)
         #
       when .channel?

src/invidious/views/compilation.ecr

@@ -6,3 +6,99 @@
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/compilation/<%= compid %>" />
 <% 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>

src/invidious/views/components/compilation_video.ecr

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

src/invidious/views/components/item.ecr

@@ -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>
             </a>    
         <% 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 %>
-                    <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>
                 <% end %>
+                <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 %>
         <% else %>
             <%-
@@ -157,6 +222,13 @@
                             <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>
                         </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")) -%>
                         <%- 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">