summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/default.css18
-rw-r--r--assets/js/watched_indicator.js24
-rw-r--r--src/invidious/views/add_playlist_items.ecr2
-rw-r--r--src/invidious/views/channel.ecr2
-rw-r--r--src/invidious/views/components/item.ecr17
-rw-r--r--src/invidious/views/edit_playlist.ecr2
-rw-r--r--src/invidious/views/feeds/playlists.ecr2
-rw-r--r--src/invidious/views/feeds/popular.ecr2
-rw-r--r--src/invidious/views/feeds/subscriptions.ecr2
-rw-r--r--src/invidious/views/feeds/trending.ecr2
-rw-r--r--src/invidious/views/hashtag.ecr2
-rw-r--r--src/invidious/views/playlist.ecr2
-rw-r--r--src/invidious/views/search.ecr2
13 files changed, 79 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 + '%';
+});
diff --git a/src/invidious/views/add_playlist_items.ecr b/src/invidious/views/add_playlist_items.ecr
index 22870317..bcba74cf 100644
--- a/src/invidious/views/add_playlist_items.ecr
+++ b/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">
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index a29315ef..6e62a471 100644
--- a/src/invidious/views/channel.ecr
+++ b/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">
diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr
index 0e959ff2..fa12374f 100644
--- a/src/invidious/views/components/item.ecr
+++ b/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>
diff --git a/src/invidious/views/edit_playlist.ecr b/src/invidious/views/edit_playlist.ecr
index 89819ef0..548104c8 100644
--- a/src/invidious/views/edit_playlist.ecr
+++ b/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 %>
diff --git a/src/invidious/views/feeds/playlists.ecr b/src/invidious/views/feeds/playlists.ecr
index a59344c4..e52a7707 100644
--- a/src/invidious/views/feeds/playlists.ecr
+++ b/src/invidious/views/feeds/playlists.ecr
@@ -32,3 +32,5 @@
<%= rendered "components/item" %>
<% end %>
</div>
+
+<script src="/js/watched_indicator.js"></script>
diff --git a/src/invidious/views/feeds/popular.ecr b/src/invidious/views/feeds/popular.ecr
index e77f35b9..5fbe539c 100644
--- a/src/invidious/views/feeds/popular.ecr
+++ b/src/invidious/views/feeds/popular.ecr
@@ -16,3 +16,5 @@
<%= rendered "components/item" %>
<% end %>
</div>
+
+<script src="/js/watched_indicator.js"></script>
diff --git a/src/invidious/views/feeds/subscriptions.ecr b/src/invidious/views/feeds/subscriptions.ecr
index 76f2f2bd..9c69c5b0 100644
--- a/src/invidious/views/feeds/subscriptions.ecr
+++ b/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 %>
diff --git a/src/invidious/views/feeds/trending.ecr b/src/invidious/views/feeds/trending.ecr
index a35c4ee3..7dc416c6 100644
--- a/src/invidious/views/feeds/trending.ecr
+++ b/src/invidious/views/feeds/trending.ecr
@@ -45,3 +45,5 @@
<%= rendered "components/item" %>
<% end %>
</div>
+
+<script src="/js/watched_indicator.js"></script>
diff --git a/src/invidious/views/hashtag.ecr b/src/invidious/views/hashtag.ecr
index 0ecfe832..3351c21c 100644
--- a/src/invidious/views/hashtag.ecr
+++ b/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 -%>
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr
index df3112db..a04acf4c 100644
--- a/src/invidious/views/playlist.ecr
+++ b/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 %>
diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr
index 254449a1..a7469e36 100644
--- a/src/invidious/views/search.ecr
+++ b/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 -%>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-17 21:30:59 +0000