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

<% 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>