diff options
| -rw-r--r-- | assets/css/default.css | 5 | ||||
| -rw-r--r-- | src/invidious/views/components/item.ecr | 8 | ||||
| -rw-r--r-- | src/invidious/views/watch.ecr | 2 |
3 files changed, 14 insertions, 1 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 21121f4d..c31b24e5 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 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"> |