invidious-mod/src/invidious/views/components/item.ecr

<div class="pure-u-1 pure-u-md-1-4">
    <div class="h-box">
    <% case item when %>
    <% when SearchChannel %>
        <a style="width:100%;" href="/channel/<%= item.ucid %>">
            <% if env.get("preferences").as(Preferences).thin_mode %>
            <% else %>
            <center>
                <img style="width:56.25%;" src="/ggpht<%= URI.parse(item.author_thumbnail).full_path %>"/>
            </center>
            <% end %>
            <p><%= item.author %></p>
        </a>
        <p><%= translate(locale, "`x` subscribers", number_with_separator(item.subscriber_count)) %></p>
        <p><%= translate(locale, "`x` videos", number_with_separator(item.video_count)) %></p>
        <h5><%= item.description_html %></h5>
    <% when SearchPlaylist %>
        <% if item.id.starts_with? "RD" %>
        <% url = "/mix?list=#{item.id}&continuation=#{item.thumbnail_id}" %>
        <% else %>
        <% url = "/playlist?list=#{item.id}" %>
        <% end %>
        <a style="width:100%;" href="<%= url %>">
            <% if env.get("preferences").as(Preferences).thin_mode %>
            <% else %>
            <div class="thumbnail">
                <img class="thumbnail" src="/vi/<%= item.thumbnail_id %>/mqdefault.jpg"/>
                <p class="length"><%= number_with_separator(item.video_count) %> videos</p>
            </div>
            <% end %>
            <p><%= item.title %></p>
        </a>
        <p>
            <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
        </p>
    <% when MixVideo %>
        <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.mixes[0] %>">
            <% if env.get("preferences").as(Preferences).thin_mode %>
            <% else %>
            <div class="thumbnail">
                <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                <% if item.length_seconds != 0 %>
                <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                <% end %>
            </div>
            <% end %>
            <p><%= item.title %></p>
        </a>
        <p>
            <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
        </p>
    <% when PlaylistVideo %>
        <a style="width:100%;" href="/watch?v=<%= item.id %>&list=<%= item.playlists[0] %>">
            <% if env.get("preferences").as(Preferences).thin_mode %>
            <% else %>
            <div class="thumbnail">
                <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                <% if item.responds_to?(:live_now) && item.live_now %>
                <p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
                <% elsif item.length_seconds != 0 %>
                <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                <% end %>
            </div>
            <% end %>
            <p><%= item.title %></p>
        </a>
        <p>
            <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
        </p>

        <h5 class="pure-g">
            <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp && item.premiere_timestamp.not_nil! > Time.now %>
                <%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.now).ago, locale)) %></h5>
            <% elsif Time.now - item.published > 1.minute %>
                <div class="pure-u-2-3"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></div>
            <% else %>
                <div class="pure-u-2-3"></div>
            <% end %>

            <div class="pure-u-1-3" style="text-align: right">
                <%= item.responds_to?(:views) ? translate(locale, "`x` views", number_to_short_text(item.views)) : "" %>
            </div>
        </h5>
    <% else %>
        <% if env.get("preferences").as(Preferences).thin_mode %>
        <% else %>
        <a style="width:100%;" href="/watch?v=<%= item.id %>">
            <div class="thumbnail">
                <img class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg"/>
                <% if env.get? "show_watched" %>
                <form onsubmit="return false;" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
                    <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
                    <p class="watched">
                        <a onclick="mark_watched(this)" data-id="<%= item.id %>" href="#">
                            <button type="submit" style="all:unset">
                                <i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
                                onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'
                                class="icon ion-ios-eye">
                                </i>
                            </button>
                        </a>
                    </p>
                </form>
                <% end %>
                <% if item.responds_to?(:live_now) && item.live_now %>
                <p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
                <% elsif item.length_seconds != 0 %>
                <p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
                <% end %>
            </div>
        </a>
        <% end %>
        <p><a href="/watch?v=<%= item.id %>"><%= item.title %></a></p>
        <p>
            <b><a style="width:100%;" href="/channel/<%= item.ucid %>"><%= item.author %></a></b>
        </p>

        <h5 class="pure-g">
            <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp && item.premiere_timestamp.not_nil! > Time.now %>
                <%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.now).ago, locale)) %></h5>
            <% elsif Time.now - item.published > 1.minute %>
                <div class="pure-u-2-3"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></div>
            <% else %>
                <div class="pure-u-2-3"></div>
            <% end %>

            <div class="pure-u-1-3" style="text-align: right">
                <%= item.responds_to?(:views) ? translate(locale, "`x` views", number_to_short_text(item.views)) : "" %>
            </div>
        </h5>
    <% end %>
    </div>
</div>