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

<% content_for "header" do %>
<title><%= playlist.title %> - Invidious</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" />
<% end %>

<div class="pure-g h-box">
    <div class="pure-u-2-3">
        <h3><%= playlist.title %></h3>
        <% if playlist.is_a? InvidiousPlaylist %>
            <b>
                <% if playlist.author == user.try &.email %>
                <a href="/view_all_playlists"><%= playlist.author %></a> |
                <% else %>
                <%= playlist.author %> |
                <% end %>
                <%= translate(locale, "`x` videos", "#{playlist.video_count}") %> |
                <%= translate(locale, "Updated `x` ago", recode_date(playlist.updated, locale)) %> |
                <% case playlist.as(InvidiousPlaylist).privacy when %>
                <% when PlaylistPrivacy::Public %>
                    <i class="icon ion-md-globe"></i> <%= translate(locale, "Public") %>
                <% when PlaylistPrivacy::Unlisted %>
                    <i class="icon ion-ios-unlock"></i> <%= translate(locale, "Unlisted") %>
                <% when PlaylistPrivacy::Private %>
                    <i class="icon ion-ios-lock"></i> <%= translate(locale, "Private") %>
                <% end %>
            </b>
        <% else %>
            <b>
                <a href="/channel/<%= playlist.ucid %>"><%= playlist.author %></a> |
                <%= translate(locale, "`x` videos", "#{playlist.video_count}") %> |
                <%= translate(locale, "Updated `x` ago", recode_date(playlist.updated, locale)) %>
            </b>
        <% end %>
        <% if !playlist.is_a? InvidiousPlaylist %>
            <div class="pure-u-2-3">
                    <a href="https://www.youtube.com/playlist?list=<%= playlist.id %>">
                        <%= translate(locale, "View playlist on YouTube") %>
                    </a>
            </div>
        <% end %>
    </div>
    <div class="pure-u-1-3" style="text-align:right">
        <h3>
            <div class="pure-g user-field">
                <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
                    <div class="pure-u-1-3"><a href="/edit_playlist?list=<%= plid %>"><i class="icon ion-md-create"></i></a></div>
                    <div class="pure-u-1-3"><a href="/delete_playlist?list=<%= plid %>"><i class="icon ion-md-trash"></i></a></div>
                <% end %>
                <div class="pure-u-1-3"><a href="/feed/playlist/<%= plid %>"><i class="icon ion-logo-rss"></i></a></div>
            </div>
        </h3>
    </div>
</div>

<div class="h-box">
    <p><%= playlist.description_html %></p>
</div>

<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
<div class="h-box" style="text-align:right">
    <h3>
        <a href="/add_playlist_items?list=<%= plid %>"><i class="icon ion-md-add"></i></a>
    </h3>
</div>
<% end %>

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

<% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
<script id="playlist_data" type="application/json">
{
    "csrf_token": "<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>"
}
</script>
<script src="/js/playlist_widget.js"></script>
<% end %>

<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-lg-1-5">
        <% if page > 1 %>
            <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
                <%= translate(locale, "Previous page") %>
            </a>
        <% end %>
    </div>
    <div class="pure-u-1 pure-u-lg-3-5"></div>
    <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
        <% if videos.size == 100 %>
            <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
                <%= translate(locale, "Next page") %>
            </a>
        <% end %>
    </div>
</div>