2 files changed, 40 insertions, 0 deletions
diff --git a/assets/css/default.css b/assets/css/default.css
index ab2b79e6..30a562e2 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -135,6 +135,9 @@ div.thumbnail {
   position: relative;
   box-sizing: border-box;
 }
+div.thumbnail.thumbnail-watched {
+  background-color: rgba(255,255,255,.4);
+}
 
 img.thumbnail {
   position: absolute;
@@ -143,6 +146,16 @@ img.thumbnail {
   left: 0;
   top: 0;
   object-fit: cover;
+  z-index: -1;
+}
+
+div.watched-indicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  width: 100%;
+  background: red;
 }
 
 .length {
diff --git a/assets/js/watched_widget.js b/assets/js/watched_widget.js
index f1ac9cb4..10b33c1a 100644
--- a/assets/js/watched_widget.js
+++ b/assets/js/watched_widget.js
@@ -32,3 +32,30 @@ function mark_unwatched(target) {
         }
     });
 }
+
+
+var save_player_pos_key = 'save_player_pos';
+
+function get_all_video_times() {
+    return helpers.storage.get(save_player_pos_key) || {};
+}
+
+var watchedIndicators = document.getElementsByClassName('watched-indicator');
+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;
+    }
+    if (percentage > 90) {
+        percentage = 100;
+    }
+
+    indicator.style.width = percentage + '%';
+}