Added watch indicator

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 {

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 + '%';
+}

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:

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>

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 %>