invidious-mod-JP/src/invidious/views/channel.ecr

<% content_for "header" do %>
<title><%= author %> - Invidious</title>
<% end %>

<div class="pure-g h-box">
    <div class="pure-u-2-3">
        <h3><%= author %></h3>
    </div>
    <div class="pure-u-1-3" style="text-align:right;">
        <h3>
            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
        </h3>
    </div>
</div>

<div class="h-box">
<% if user %>
    <% if subscriptions.includes? ucid %>
    <p>
        <a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" 
            href="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
            <b>Unsubscribe | <%= number_to_short_text(sub_count) %></b>
        </a>
    </p>
    <% else %>
    <p>
        <a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" 
            href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>">
            <b>Subscribe | <%= number_to_short_text(sub_count) %></b>
        </a>
    </p>
    <% end %>
<% else %>
    <p>
        <a id="subscribe" class="pure-button pure-button-primary" 
            href="/login?referer=<%= env.get("current_page") %>">
            <b>Login to subscribe to <%= author %></b>
        </a>
    </p>
<% end %>
</div>

<div class="pure-g h-box">
    <div class="pure-u-1-3">
        <a href="https://www.youtube.com/channel/<%= ucid %>">View channel on YouTube</a>
    </div>
    <div class="pure-u-1-3">
    </div>
    <div class="pure-u-1-3">
        <div class="pure-g" style="text-align:right;">
        <% {"newest", "oldest", "popular"}.each do |sort| %>
            <div class="pure-u-1 pure-md-1-3">
                <% if sort_by == sort %>
                <b><%= sort %></b>
                <% else %>
                <a href="/channel/<%= ucid %>?page=<%= page %>&sort_by=<%= sort %>">
                <%= sort %>
                </a>
                <% end %>
            </div>
        <% end %>
        </div>
    </div>
</div>

<div class="h-box">
    <hr>
</div>

<div class="pure-g">
<% videos.each_slice(4) do |slice| %>
    <% slice.each do |item| %>
        <%= rendered "components/item" %>
    <% end %>
<% end %>
</div> 

<div class="pure-g h-box">
    <div class="pure-u-1 pure-u-md-1-5">
    <% if page >= 2 %>
        <a href="/channel/<%= ucid %>?page=<%= page - 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">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 count == 60 %>
        <a href="/channel/<%= ucid %>?page=<%= page + 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">Next page</a>
    <% end %>
    </div>
</div>

<script>
document.getElementById("subscribe")["href"] = "javascript:void(0);"

function subscribe() {
    var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
    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) {
                subscribe_button = document.getElementById("subscribe");
                subscribe_button.onclick = unsubscribe;
                subscribe_button.innerHTML = '<b>Unsubscribe | <%= number_to_short_text(sub_count) %></b>'
            }
        }
    }
}

function unsubscribe() {
    var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>";
    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) {
                subscribe_button = document.getElementById("subscribe");
                subscribe_button.onclick = subscribe;
                subscribe_button.innerHTML = '<b>Subscribe | <%= number_to_short_text(sub_count) %></b>'
            }
        }
    }
}
</script>