Added watch indicator

pull/3383/head
Wes van der Vleuten 2 years ago
parent 437f42250e
commit 7b57381773

@ -135,6 +135,9 @@ div.thumbnail {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
div.thumbnail.thumbnail-watched {
background-color: rgba(255,255,255,.4);
}
img.thumbnail { img.thumbnail {
position: absolute; position: absolute;
@ -143,6 +146,16 @@ img.thumbnail {
left: 0; left: 0;
top: 0; top: 0;
object-fit: cover; object-fit: cover;
z-index: -1;
}
div.watched-indicator {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 100%;
background: red;
} }
.length { .length {

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

@ -13,7 +13,7 @@ services:
dockerfile: docker/Dockerfile dockerfile: docker/Dockerfile
restart: unless-stopped restart: unless-stopped
ports: ports:
- "127.0.0.1:3000:3000" - "3003:3000"
environment: environment:
# Please read the following file for a comprehensive list of all available # Please read the following file for a comprehensive list of all available
# configuration options and their associated syntax: # configuration options and their associated syntax:
@ -23,7 +23,7 @@ services:
dbname: invidious dbname: invidious
user: kemal user: kemal
password: kemal password: kemal
host: invidious-db host: invidious-invidious-db-1
port: 5432 port: 5432
check_tables: true check_tables: true
# external_port: # external_port:

@ -99,7 +99,8 @@
<% else %> <% else %>
<a style="width:100%" href="/watch?v=<%= item.id %>"> <a style="width:100%" href="/watch?v=<%= item.id %>">
<% if !env.get("preferences").as(Preferences).thin_mode %> <% 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"/> <img loading="lazy" tabindex="-1" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
<% if env.get? "show_watched" %> <% 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"> <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 %> <% elsif item.length_seconds != 0 %>
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p> <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
<% end %> <% end %>
<% if item_watched %>
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
<% end %>
</div> </div>
<% end %> <% end %>
<p dir="auto"><%= HTML.escape(item.title) %></p> <p dir="auto"><%= HTML.escape(item.title) %></p>

@ -50,7 +50,6 @@
}.to_pretty_json }.to_pretty_json
%> %>
</script> </script>
<script src="/js/watched_widget.js"></script>
<div class="pure-g"> <div class="pure-g">
<% videos.each do |item| %> <% videos.each do |item| %>
@ -58,6 +57,8 @@
<% end %> <% end %>
</div> </div>
<script src="/js/watched_widget.js"></script>
<div class="pure-g h-box"> <div class="pure-g h-box">
<div class="pure-u-1 pure-u-lg-1-5"> <div class="pure-u-1 pure-u-lg-1-5">
<% if page > 1 %> <% if page > 1 %>

Loading…
Cancel
Save