Add watch indicators (#3383)

This commit is contained in:
Samantaz Fox 2023-02-19 23:08:38 +01:00
commit 4bbeb4a4c8
No known key found for this signature in database
GPG Key ID: F42821059186176E
13 changed files with 79 additions and 0 deletions

View File

@ -145,6 +145,24 @@ img.thumbnail {
object-fit: cover; 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 { .length {
z-index: 100; z-index: 100;
position: absolute; position: absolute;

View File

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

View File

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

View File

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

View File

@ -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="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>
@ -124,6 +136,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>

View File

@ -62,6 +62,8 @@
<% end %> <% end %>
</div> </div>
<script src="/js/watched_indicator.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 %>

View File

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

View File

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

View File

@ -62,6 +62,8 @@
<% end %> <% end %>
</div> </div>
<script src="/js/watched_indicator.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 %>

View File

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

View File

@ -24,6 +24,8 @@
<%- end -%> <%- end -%>
</div> </div>
<script src="/js/watched_indicator.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 -%>

View File

@ -106,6 +106,8 @@
<% end %> <% end %>
</div> </div>
<script src="/js/watched_indicator.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 %>

View File

@ -37,6 +37,8 @@
</div> </div>
<%- end -%> <%- end -%>
<script src="/js/watched_indicator.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 query.page > 1 -%> <%- if query.page > 1 -%>