HTML: Fix thin mode/thumbnail on other items

2 files changed, 61 insertions, 38 deletions

diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 0fa9c807..9b73f7ee 100644
--- a/src/invidious/views/components/item.ecr
+++ b/src/invidious/views/components/item.ecr
@@ -1,39 +1,64 @@
-<% item_watched = !item.is_a?(SearchChannel | SearchPlaylist | InvidiousPlaylist | Category) && env.get?("user").try &.as(User).watched.index(item.id) != nil %>
+<%-
+  thin_mode = env.get("preferences").as(Preferences).thin_mode
+  item_watched = !item.is_a?(SearchChannel | SearchPlaylist | InvidiousPlaylist | Category) && env.get?("user").try &.as(User).watched.index(item.id) != nil
+  author_verified = item.responds_to?(:author_verified) && item.author_verified
+-%>
 
 <div class="pure-u-1 pure-u-md-1-4">
     <div class="h-box">
         <% case item when %>
         <% when SearchChannel %>
-            <a href="/channel/<%= item.ucid %>">
-                <% if !env.get("preferences").as(Preferences).thin_mode %>
+            <% if !thin_mode %>
+                <a tabindex="-1" href="/channel/<%= item.ucid %>">
                     <center>
                         <img loading="lazy" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" />
                     </center>
-                <% end %>
-                <p dir="auto"><%= HTML.escape(item.author) %><% if !item.author_verified.nil? && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></p>
-            </a>
+                </a>
+            <% end %>
+
+            <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) %>
+                        <%- if author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
+                    </p>
+                </a></div>
+            </div>
+
             <p><%= translate_count(locale, "generic_subscribers_count", item.subscriber_count, NumberFormatting::Separator) %></p>
             <% if !item.auto_generated %><p><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p><% end %>
             <h5><%= item.description_html %></h5>
         <% when SearchPlaylist, InvidiousPlaylist %>
-            <% if item.id.starts_with? "RD" %>
-                <% url = "/mix?list=#{item.id}&continuation=#{URI.parse(item.thumbnail || "/vi/-----------").request_target.split("/")[2]}" %>
-            <% else %>
-                <% url = "/playlist?list=#{item.id}" %>
-            <% end %>
+            <%-
+              if item.id.starts_with? "RD"
+                link_url = "/mix?list=#{item.id}&continuation=#{URI.parse(item.thumbnail || "/vi/-----------").request_target.split("/")[2]}"
+              else
+                link_url = "/playlist?list=#{item.id}"
+              end
+            -%>
 
-            <a style="width:100%" href="<%= url %>">
-                <% if !env.get("preferences").as(Preferences).thin_mode %>
-                    <div class="thumbnail">
+            <div class="thumbnail">
+                <%- if !thin_mode %>
+                    <a tabindex="-1" href="<%= link_url %>">
                         <img loading="lazy" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" />
-                        <p class="length"><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p>
-                    </div>
-                <% end %>
-                <p dir="auto"><%= HTML.escape(item.title) %></p>
-            </a>
-            <a href="/channel/<%= item.ucid %>">
-                <p dir="auto"><b><%= HTML.escape(item.author) %><% if !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>
+                <%- end -%>
+
+                <div class="bottom-right-overlay">
+                    <p class="length"><%= translate_count(locale, "generic_videos_count", item.video_count, NumberFormatting::Separator) %></p>
+                </div>
+            </div>
+
+            <div class="video-card-row">
+                <a href="<%= link_url %>"><p dir="auto"><%= HTML.escape(item.title) %></p></a>
+            </div>
+
+            <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) %>
+                        <%- if author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
+                    </p>
+                </a></div>
+            </div>
         <% when Category %>
         <% else %>
             <%-
@@ -106,7 +131,7 @@
             <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) %>
-                        <%- if item.responds_to?(:author_verified) && item.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
+                        <%- if author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end -%>
                     </p>
                 </a></div>
 
diff --git a/src/invidious/views/feeds/history.ecr b/src/invidious/views/feeds/history.ecr
index 5301a232..83ea7238 100644
--- a/src/invidious/views/feeds/history.ecr
+++ b/src/invidious/views/feeds/history.ecr
@@ -31,22 +31,20 @@
     <% watched.each do |item| %>
         <div class="pure-u-1 pure-u-md-1-4">
             <div class="h-box">
-                <a style="width:100%" href="/watch?v=<%= item %>">
-                    <% if !env.get("preferences").as(Preferences).thin_mode %>
-                        <div class="thumbnail">
-                            <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg" alt="" />
+                <div class="thumbnail">
+                    <a style="width:100%" href="/watch?v=<%= item %>">
+                        <img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg" alt="" />
+                    </a>
 
-                            <div class="top-left-overlay"><div class="watched">
-                            <form data-onsubmit="return_false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
-                                <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
-                                <button type="submit" class="pure-button pure-button-secondary low-profile"
-                                        data-onclick="mark_unwatched" data-id="<%= item %>"><i class="icon ion-md-trash"></i></button>
-                            </form>
-                            </div></div>
-                        </div>
-                        <p></p>
-                    <% end %>
-                </a>
+                    <div class="top-left-overlay"><div class="watched">
+                    <form data-onsubmit="return_false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
+                        <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
+                        <button type="submit" class="pure-button pure-button-secondary low-profile"
+                                data-onclick="mark_unwatched" data-id="<%= item %>"><i class="icon ion-md-trash"></i></button>
+                    </form>
+                    </div></div>
+                </div>
+                <p></p>
             </div>
         </div>
     <% end %>