Add watch indicators (#3383)

2 files changed, 42 insertions, 0 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 9788e9f7..3deaebe1 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;
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 + '%';
+});