From 7b573817734dfd48fc6d1fbdc9a0a99f379f0ed1 Mon Sep 17 00:00:00 2001
From: Wes van der Vleuten <16665772+WesVleuten@users.noreply.github.com>
Date: Mon, 7 Nov 2022 19:03:23 +0000
Subject: [PATCH] Added watch indicator

---
 assets/css/default.css                      | 13 ++++++++++
 assets/js/watched_widget.js                 | 27 +++++++++++++++++++++
 docker-compose.yml                          |  4 +--
 src/invidious/views/components/item.ecr     |  7 +++++-
 src/invidious/views/feeds/subscriptions.ecr |  3 ++-
 5 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index ab2b79e62..30a562e2a 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 f1ac9cb47..10b33c1af 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 + '%';
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index eb83b020d..48ee6a4ba 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,7 +13,7 @@ services:
       dockerfile: docker/Dockerfile
     restart: unless-stopped
     ports:
-      - "127.0.0.1:3000:3000"
+      - "3003:3000"
     environment:
       # Please read the following file for a comprehensive list of all available
       # configuration options and their associated syntax:
@@ -23,7 +23,7 @@ services:
           dbname: invidious
           user: kemal
           password: kemal
-          host: invidious-db
+          host: invidious-invidious-db-1
           port: 5432
         check_tables: true
         # external_port:
diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index e53fa0756..d63dca143 100644
--- a/src/invidious/views/components/item.ecr
+++ b/src/invidious/views/components/item.ecr
@@ -99,7 +99,8 @@
         <% else %>
             <a style="width:100%" href="/watch?v=<%= item.id %>">
                 <% if !env.get("preferences").as(Preferences).thin_mode %>
-                    <div class="thumbnail<%= env.get("user").as(User).watched.index!() { |x| x == item.id } ? " watched" : "" %>">
+                    <% item_watched = env.get("user") && env.get("user").as(User).watched && env.get("user").as(User).watched.index(item.id) != nil %>
+                    <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">
@@ -124,6 +125,10 @@
                         <% elsif item.length_seconds != 0 %>
                             <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                         <% end %>
+
+                        <% if item_watched %>
+                            <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>
diff --git a/src/invidious/views/feeds/subscriptions.ecr b/src/invidious/views/feeds/subscriptions.ecr
index 8d56ad144..add1eefce 100644
--- a/src/invidious/views/feeds/subscriptions.ecr
+++ b/src/invidious/views/feeds/subscriptions.ecr
@@ -50,7 +50,6 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/watched_widget.js"></script>
 
 <div class="pure-g">
 <% videos.each do |item| %>
@@ -58,6 +57,8 @@
 <% end %>
 </div>
 
+<script src="/js/watched_widget.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page > 1 %>