invidious-experimenting/src/invidious/views/history.ecr

82 lines
2.6 KiB
Plaintext

<% content_for "header" do %>
<title>History - Invidious</title>
<% end %>
<div class="pure-g h-box">
<div class="pure-u-2-3">
<h3><span id="count"><%= user.watched.size %></span> videos</h3>
</div>
<div class="pure-u-1-3" style="text-align:right;">
<h3>
<a href="/clear_watch_history">Clear watch history</a>
</h3>
</div>
</div>
<div class="pure-g">
<% watched.each_slice(4) do |slice| %>
<% slice.each do |item| %>
<div class="pure-u-1 pure-u-md-1-4">
<div class="h-box">
<a style="width:100%;" href="/watch?v=<%= item %>">
<% if env.get?("user") && env.get("user").as(User).preferences.thin_mode %>
<% else %>
<div class="thumbnail">
<img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
<p class="watched">
<a onclick="mark_unwatched(this)"
data-id="<%= item %>"
onmouseenter='this["href"]="javascript:void(0)"'
href="/mark_unwatched?id=<%= item %>">
<i class="icon ion-md-trash"></i>
</a>
</p>
</div>
<p></p>
<% end %>
</a>
</div>
</div>
<% end %>
<% end %>
</div>
<script>
function mark_unwatched(target) {
var tile = target.parentNode.parentNode.parentNode.parentNode;
tile.style.display = "none";
var count = document.getElementById("count")
count.innerText = count.innerText - 1;
var url = "/mark_unwatched?redirect=false&id=" + target.getAttribute("data-id");
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.timeout = 20000;
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status != 200) {
count.innerText = count.innerText - 1 + 2;
tile.style.display = "";
}
}
}
}
</script>
<div class="pure-g h-box">
<div class="pure-u-1 pure-u-md-1-5">
<% if page >= 2 %>
<a href="/feed/history?page=<%= page - 1 %>">Previous page</a>
<% end %>
</div>
<div class="pure-u-1 pure-u-md-3-5"></div>
<div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
<% if watched.size >= limit %>
<a href="/feed/history?page=<%= page + 1 %>">Next page</a>
<% end %>
</div>
</div>