Add watch indicators (#3383)

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;

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

src/invidious/views/add_playlist_items.ecr

@@ -39,6 +39,8 @@
     <% end %>
 </div>
 
+<script src="/js/watched_indicator.js"></script>
+
 <% if query %>
     <%- query_encoded = URI.encode_www_form(query.text, space_to_plus: true) -%>
     <div class="pure-g h-box">

src/invidious/views/channel.ecr

@@ -49,6 +49,8 @@
 <% end %>
 </div>
 
+<script src="/js/watched_indicator.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-md-4-5"></div>
     <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">

src/invidious/views/components/item.ecr

@@ -1,3 +1,5 @@
+<% item_watched = !item.is_a?(SearchChannel | SearchPlaylist | InvidiousPlaylist | Category) && env.get?("user").try &.as(User).watched.index(item.id) != nil %>
+
 <div class="pure-u-1 pure-u-md-1-4">
     <div class="h-box">
         <% case item when %>
@@ -40,6 +42,11 @@
                         <% if item.length_seconds != 0 %>
                             <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                         <% end %>
+
+                        <% if item_watched %>
+                            <div class="watched-overlay"></div>
+                            <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>
@@ -67,6 +74,11 @@
                         <% elsif item.length_seconds != 0 %>
                             <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                         <% end %>
+
+                        <% if item_watched %>
+                            <div class="watched-overlay"></div>
+                            <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>
@@ -124,6 +136,11 @@
                         <% elsif item.length_seconds != 0 %>
                             <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                         <% end %>
+
+                        <% if item_watched %>
+                            <div class="watched-overlay"></div>
+                            <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/edit_playlist.ecr

@@ -62,6 +62,8 @@
 <% end %>
 </div>
 
+<script src="/js/watched_indicator.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page > 1 %>

src/invidious/views/feeds/playlists.ecr

@@ -32,3 +32,5 @@
     <%= rendered "components/item" %>
 <% end %>
 </div>
+
+<script src="/js/watched_indicator.js"></script>

src/invidious/views/feeds/popular.ecr

@@ -16,3 +16,5 @@
     <%= rendered "components/item" %>
 <% end %>
 </div>
+
+<script src="/js/watched_indicator.js"></script>

src/invidious/views/feeds/subscriptions.ecr

@@ -62,6 +62,8 @@
 <% end %>
 </div>
 
+<script src="/js/watched_indicator.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page > 1 %>

src/invidious/views/feeds/trending.ecr

@@ -45,3 +45,5 @@
     <%= rendered "components/item" %>
 <% end %>
 </div>
+
+<script src="/js/watched_indicator.js"></script>

src/invidious/views/hashtag.ecr

@@ -24,6 +24,8 @@
     <%- end -%>
 </div>
 
+<script src="/js/watched_indicator.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <%- if page > 1 -%>

src/invidious/views/playlist.ecr

@@ -106,6 +106,8 @@
 <% end %>
 </div>
 
+<script src="/js/watched_indicator.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <% if page > 1 %>

src/invidious/views/search.ecr

@@ -37,6 +37,8 @@
 </div>
 <%- end -%>
 
+<script src="/js/watched_indicator.js"></script>
+
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-lg-1-5">
         <%- if query.page > 1 -%>