Fixed thumbnails with darkreader, Added watched indicator in more locations

assets/css/default.css

@@ -135,9 +135,7 @@ div.thumbnail {
   position: relative;
   box-sizing: border-box;
 }
-div.thumbnail.thumbnail-watched {
+
-  background-color: rgba(255,255,255,.4);
-}
 
 img.thumbnail {
   position: absolute;
@@ -146,7 +144,15 @@ img.thumbnail {
   left: 0;
   top: 0;
   object-fit: cover;
-  z-index: -1;
+}
+
+div.watched-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,.4);
 }
 
 div.watched-indicator {
@@ -155,7 +161,7 @@ div.watched-indicator {
   bottom: 0;
   height: 4px;
   width: 100%;
-  background: red;
+  background-color: red;
 }
 
 .length {

assets/js/watched_widget.js

@@ -41,15 +41,13 @@ function get_all_video_times() {
 }
 
 var watchedIndicators = document.getElementsByClassName('watched-indicator');
+console.log('indicators', watchedIndicators.length);
 for (var i = 0; i < watchedIndicators.length; i++) {
     var indicator = watchedIndicators[i];
-
     var watched_part = get_all_video_times()[indicator.getAttribute('data-id')];
     var total = parseInt(indicator.getAttribute('data-length'), 10);
-
     var percentage = Math.round((watched_part / total) * 100);
 
-
     if (percentage < 5) {
         percentage = 5;
     }

src/invidious/views/components/item.ecr

@@ -1,3 +1,5 @@
+<% item_watched = !item.is_a?(SearchChannel) && !item.is_a?(SearchPlaylist) && !item.is_a?(InvidiousPlaylist) && !item.is_a?(Category) && env.get("user") && env.get("user").as(User).watched && env.get("user").as(User).watched.index(item.id) != nil %>
+
 <div class="pure-u-1 pure-u-md-1-4">
     <div class="h-box">
         <% case item when %>
@@ -40,6 +42,11 @@
                         <% if 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>
@@ -67,6 +74,11 @@
                         <% 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>
@@ -99,8 +111,7 @@
         <% else %>
             <a style="width:100%" href="/watch?v=<%= item.id %>">
                 <% if !env.get("preferences").as(Preferences).thin_mode %>
-                    <% item_watched = env.get("user") && env.get("user").as(User).watched && env.get("user").as(User).watched.index(item.id) != nil %>
+                    <div class="thumbnail">
-                    <div class="thumbnail<%= item_watched ? " thumbnail-watched" : "" %>">
                         <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                         <% if env.get? "show_watched" %>
                             <form data-onsubmit="return_false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
@@ -127,6 +138,7 @@
                         <% 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>