2 files changed, 47 insertions, 1 deletions
diff --git a/assets/css/default.css b/assets/css/default.css
index 9788e9f7..f8b1c9f7 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -145,6 +145,24 @@ img.thumbnail {
   object-fit: cover;
 }
 
+div.watched-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255,255,255,.4);
+}
+
+div.watched-indicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  width: 100%;
+  background-color: red;
+}
+
 .length {
   z-index: 100;
   position: absolute;
@@ -497,7 +515,7 @@ hr {
 
 #descexpansionbutton ~ div {
   overflow: hidden;
-  height: 8.3em;
+  max-height: 8.3em;
 }
 
 #descexpansionbutton:checked ~ div {
@@ -565,3 +583,7 @@ p,
 
 /* Wider settings name to less word wrap */
 .pure-form-aligned .pure-control-group label { width: 19em; }
+
+.channel-emoji {
+  margin: 0 2px;
+}
diff --git a/assets/js/watched_indicator.js b/assets/js/watched_indicator.js
new file mode 100644
index 00000000..e971cd80
--- /dev/null
+++ b/assets/js/watched_indicator.js
@@ -0,0 +1,24 @@
+'use strict';
+var save_player_pos_key = 'save_player_pos';
+
+function get_all_video_times() {
+    return helpers.storage.get(save_player_pos_key) || {};
+}
+
+document.querySelectorAll('.watched-indicator').forEach(function (indicator) {
+    var watched_part = get_all_video_times()[indicator.dataset.id];
+    var total = parseInt(indicator.dataset.length, 10);
+    if (watched_part === undefined) {
+        watched_part = total;
+    }
+    var percentage = Math.round((watched_part / total) * 100);
+
+    if (percentage < 5) {
+        percentage = 5;
+    }
+    if (percentage > 90) {
+        percentage = 100;
+    }
+
+    indicator.style.width = percentage + '%';
+});