From 9b75f79fb553403d0af7b2f9a1212a1e93bcf85b Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Sat, 8 Jul 2023 21:17:44 +0200
Subject: [PATCH] HTML/CSS: Add thumbnail placeholder in thin mode

This change is required to make the overlay buttons functional
(add to and delete from playlist, mark as watched, etc.)
---
 assets/css/default.css                  | 5 +++++
 src/invidious/views/components/item.ecr | 8 +++++++-
 src/invidious/views/watch.ecr           | 2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 21121f4db..c31b24e5d 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -199,6 +199,11 @@ img.thumbnail {
   object-fit: cover;
 }
 
+.thumbnail-placeholder {
+  min-height: 50px;
+  border: 2px dotted;
+}
+
 div.watched-overlay {
   z-index: 50;
   position: absolute;
diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 9b73f7eef..7ffd2d937 100644
--- a/src/invidious/views/components/item.ecr
+++ b/src/invidious/views/components/item.ecr
@@ -14,6 +14,8 @@
                         <img loading="lazy" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" />
                     </center>
                 </a>
+            <%- else -%>
+                <div class="thumbnail-placeholder" style="width:56.25%"></div>
             <% end %>
 
             <div class="video-card-row flexible">
@@ -41,6 +43,8 @@
                     <a tabindex="-1" href="<%= link_url %>">
                         <img loading="lazy" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" />
                     </a>
+                <%- else -%>
+                    <div class="thumbnail-placeholder"></div>
                 <%- end -%>
 
                 <div class="bottom-right-overlay">
@@ -76,7 +80,7 @@
             -%>
 
             <div class="thumbnail">
-                <%- if !env.get("preferences").as(Preferences).thin_mode -%>
+                <%- if !thin_mode -%>
                     <a tabindex="-1" href="<%= link_url %>">
                         <img loading="lazy" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
 
@@ -85,6 +89,8 @@
                             <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
                         <% end %>
                     </a>
+                <%- else -%>
+                    <div class="thumbnail-placeholder"></div>
                 <%- end -%>
 
                 <div class="top-left-overlay">
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 9275631c4..498d57a1b 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -311,6 +311,8 @@ we're going to need to do it here in order to allow for translations.
                                     <a tabindex="-1" href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>">
                                         <img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg" alt="" />
                                     </a>
+                                <%- else -%>
+                                    <div class="thumbnail-placeholder"></div>
                                 <%- end -%>
 
                                 <div class="bottom-right-overlay">