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

<% content_for "header" do %>
<title>Subscription manager - Invidious</title>
<% end %>

<div class="pure-g h-box">
    <div class="pure-u-2-3">
        <h3><span id="count"><%= subscriptions.size %></span> subscriptions</h3>
    </div>
    <div class="pure-u-1-3" style="text-align:right;">
        <h3>
            <a href="/data_control?referer=<%= referer %>">Import/Export</a>
        </h3>
    </div>
</div>

<% subscriptions.each do |channel| %>
<div class="h-box">
    <div class="pure-g">
        <div class="pure-u-2-5">
            <h3>
                <a href="/channel/<%= channel.id %>"><%= channel.author %></a>
            </h3>
        </div>
        <div class="pure-u-2-5"></div>
        <div class="pure-u-1-5" style="text-align: right;">
            <h3>
                <a onclick="remove_subscription(this)"
                    data-id="<%= channel.id %>"
                    onmouseenter='this["href"]="javascript:void(0)"'
                    href="/subscription_ajax?action_remove_subscriptions=1&c=<%= channel.id %>">
                    unsubscribe
                </a>
            </h3>
        </div>
    </div>

    <% if subscriptions[-1].author != channel.author %>
    <hr>
    <% end %>
</div>
<% end %>

<script>
function remove_subscription(target) {
    var row = target.parentNode.parentNode.parentNode.parentNode;
    row.style.display = "none";
    var count = document.getElementById("count")
    count.innerText = count.innerText - 1;

    var url = "/subscription_ajax?action_remove_subscriptions=1&redirect=false&c=" + 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;
                row.style.display = "";
            }
        }
    }
}
</script>