midou/invidious
1
0
Fork 1
mirror of https://github.com/iv-org/invidious.git synced 2024-11-10 07:22:16 +05:30
Code Issues Packages Projects Releases Wiki Activity

Fixed thumbnails with darkreader, Added watched indicator in more locations

Browse Source
This commit is contained in:
Wes van der Vleuten 2022-11-08 23:15:42 +01:00
parent 7b57381773
commit f604c1c68b
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/default.css
View File

@ -135,9 +135,7 @@ 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;
@ -146,7 +144,15 @@ img.thumbnail {
left: 0; left: 0;
top: 0; top: 0;
object-fit: cover; object-fit: cover;
z-index: -1; }
div.watched-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,.4);
} }
div.watched-indicator { div.watched-indicator {
@ -155,7 +161,7 @@ div.watched-indicator {
bottom: 0; bottom: 0;
height: 4px; height: 4px;
width: 100%; width: 100%;
background: red; background-color: red;
} }
.length { .length {

4
assets/js/watched_widget.js
View File

@ -41,15 +41,13 @@ function get_all_video_times() {
} }
var watchedIndicators = document.getElementsByClassName('watched-indicator'); var watchedIndicators = document.getElementsByClassName('watched-indicator');
console.log('indicators', watchedIndicators.length);
for (var i = 0; i < watchedIndicators.length; i++) { for (var i = 0; i < watchedIndicators.length; i++) {
var indicator = watchedIndicators[i]; var indicator = watchedIndicators[i];
var watched_part = get_all_video_times()[indicator.getAttribute('data-id')]; var watched_part = get_all_video_times()[indicator.getAttribute('data-id')];
var total = parseInt(indicator.getAttribute('data-length'), 10); var total = parseInt(indicator.getAttribute('data-length'), 10);
var percentage = Math.round((watched_part / total) * 100); var percentage = Math.round((watched_part / total) * 100);
if (percentage < 5) { if (percentage < 5) {
percentage = 5; percentage = 5;
} }

16
src/invidious/views/components/item.ecr
View File

@ -1,3 +1,5 @@
<% item_watched = !item.is_a?(SearchChannel) && !item.is_a?(SearchPlaylist) && !item.is_a?(InvidiousPlaylist) && !item.is_a?(Category) && env.get("user") && env.get("user").as(User).watched && env.get("user").as(User).watched.index(item.id) != nil %>
<div class="pure-u-1 pure-u-md-1-4"> <div class="pure-u-1 pure-u-md-1-4">
<div class="h-box"> <div class="h-box">
<% case item when %> <% case item when %>
@ -40,6 +42,11 @@
<% if item.length_seconds != 0 %> <% if 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-overlay"></div>
<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>
@ -67,6 +74,11 @@
<% 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-overlay"></div>
<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>
@ -99,8 +111,7 @@
<% 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 %>
<% item_watched = env.get("user") && env.get("user").as(User).watched && env.get("user").as(User).watched.index(item.id) != nil %> <div class="thumbnail">
<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">
@ -127,6 +138,7 @@
<% end %> <% end %>
<% if item_watched %> <% if item_watched %>
<div class="watched-overlay"></div>
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div> <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
<% end %> <% end %>
</div> </div>