Fixed thumbnails with darkreader, Added watched indicator in more locations

2 files changed, 12 insertions, 8 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 30a562e2..890bd524 100644
--- a/assets/css/default.css
+++ b/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 {
diff --git a/assets/js/watched_widget.js b/assets/js/watched_widget.js
index 10b33c1a..ffcdaad8 100644
--- a/assets/js/watched_widget.js
+++ b/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;
     }