summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSamantaz Fox <coding@samantaz.fr>2023-07-08 21:17:44 +0200
committerSamantaz Fox <coding@samantaz.fr>2023-07-08 21:33:59 +0200
commit9b75f79fb553403d0af7b2f9a1212a1e93bcf85b (patch)
treee75cf7739e6af44b54eb2114d5f96390ef5389cd /src
parentc17404890ca9618ebc828a06bc88ff2bd79e811e (diff)
downloadinvidious-9b75f79fb553403d0af7b2f9a1212a1e93bcf85b.tar.gz
invidious-9b75f79fb553403d0af7b2f9a1212a1e93bcf85b.tar.bz2
invidious-9b75f79fb553403d0af7b2f9a1212a1e93bcf85b.zip
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.)
Diffstat (limited to 'src')
-rw-r--r--src/invidious/views/components/item.ecr8
-rw-r--r--src/invidious/views/watch.ecr2
2 files changed, 9 insertions, 1 deletions
diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 9b73f7ee..7ffd2d93 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 9275631c..498d57a1 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">