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

<% ucid = video.ucid %>
<% title = HTML.escape(video.title) %>
<% author = HTML.escape(video.author) %>


<% content_for "header" do %>
<meta name="thumbnail" content="<%= thumbnail %>">
<meta name="description" content="<%= HTML.escape(video.short_description) %>">
<meta name="keywords" content="<%= video.keywords.join(",") %>">
<meta property="og:site_name" content="Invidious">
<meta property="og:url" content="<%= HOST_URL %>/watch?v=<%= video.id %>">
<meta property="og:title" content="<%= title %>">
<meta property="og:image" content="/vi/<%= video.id %>/maxres.jpg">
<meta property="og:description" content="<%= HTML.escape(video.short_description) %>">
<meta property="og:type" content="video.other">
<meta property="og:video:url" content="<%= HOST_URL %>/embed/<%= video.id %>">
<meta property="og:video:secure_url" content="<%= HOST_URL %>/embed/<%= video.id %>">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@omarroth1">
<meta name="twitter:url" content="<%= HOST_URL %>/watch?v=<%= video.id %>">
<meta name="twitter:title" content="<%= title %>">
<meta name="twitter:description" content="<%= HTML.escape(video.short_description) %>">
<meta name="twitter:image" content="<%= HOST_URL %>/vi/<%= video.id %>/maxres.jpg">
<meta name="twitter:player" content="<%= HOST_URL %>/embed/<%= video.id %>">
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">
<link rel="alternate" href="https://www.youtube.com/watch?v=<%= video.id %>">
<%= rendered "components/player_sources" %>
<title><%= title %> - Invidious</title>

<!-- Description expansion also updates the 'Show more' button to 'Show less' so
we're going to need to do it here in order to allow for translations.
 -->
<style>
#descexpansionbutton ~ label > a::after {
    content: "<%= translate(locale, "Show more") %>"
}

#descexpansionbutton:checked ~ label > a::after {
    content: "<%= translate(locale, "Show less") %>"
}
</style>
<% end %>

<script id="video_data" type="application/json">
<%=
{
    "id" => video.id,
    "index" => continuation,
    "plid" => plid,
    "length_seconds" => video.length_seconds.to_f,
    "play_next" => !video.related_videos.empty? && !plid && params.continue,
    "next_video" => video.related_videos.select { |rv| rv["id"]? }[0]?.try &.["id"],
    "youtube_comments_text" => HTML.escape(translate(locale, "View YouTube comments")),
    "reddit_comments_text" => HTML.escape(translate(locale, "View Reddit comments")),
    "reddit_permalink_text" => HTML.escape(translate(locale, "View more comments on Reddit")),
    "comments_text" => HTML.escape(translate(locale, "View `x` comments", "{commentCount}")),
    "hide_replies_text" => HTML.escape(translate(locale, "Hide replies")),
    "show_replies_text" => HTML.escape(translate(locale, "Show replies")),
    "params" => params,
    "preferences" => preferences,
    "premiere_timestamp" => video.premiere_timestamp.try &.to_unix,
    "vr" => video.is_vr,
    "projection_type" => video.projection_type
}.to_pretty_json
%>
</script>

<div id="player-container" class="h-box">
    <%= rendered "components/player" %>
</div>

<div class="h-box">
    <h1>
        <%= title %>
        <% if params.listen %>
            <a title="<%=translate(locale, "Video mode")%>" href="/watch?<%= env.params.query %>&listen=0">
                <i class="icon ion-ios-videocam"></i>
            </a>
        <% else %>
            <a title="<%=translate(locale, "Audio mode")%>" href="/watch?<%= env.params.query %>&listen=1">
                <i class="icon ion-md-headset"></i>
            </a>
        <% end %>
    </h1>

    <% if !video.is_listed %>
        <h3>
            <i class="icon ion-ios-unlock"></i> <%= translate(locale, "Unlisted") %>
        </h3>
    <% end %>

    <% if video.reason %>
        <h3>
            <%= video.reason %>
        </h3>
    <% elsif video.premiere_timestamp.try &.> Time.utc %>
        <h3>
            <%= video.premiere_timestamp.try { |t| translate(locale, "Premieres in `x`", recode_date((t - Time.utc).ago, locale)) } %>
        </h3>
    <% elsif video.live_now %>
        <h3>
            <%= video.premiere_timestamp.try { |t| translate(locale, "videoinfo_started_streaming_x_ago", recode_date((Time.utc - t).ago, locale)) } %>
        </h3>
    <% end %>
</div>

<div class="pure-g">
    <div class="pure-u-1 pure-u-lg-1-5">
        <div class="h-box">
            <span id="watch-on-youtube">
                <a href="https://www.youtube.com/watch?v=<%= video.id %>"><%= translate(locale, "videoinfo_watch_on_youTube") %></a>
                (<a href="https://www.youtube.com/embed/<%= video.id %>"><%= translate(locale, "videoinfo_youTube_embed_link") %></a>)
            </span>
            <p id="watch-on-another-invidious-instance">
            <% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
                <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
            <% else %>
                <a href="https://redirect.invidious.io<%= env.request.resource %>"><%= translate(locale, "Switch Invidious Instance") %></a>
            <% end %>
            </p>
            <p id="embed-link">
                <a href="<%= embed_link %>"><%= translate(locale, "videoinfo_invidious_embed_link") %></a>
            </p>
            <p id="annotations">
                <% if params.annotations %>
                    <a href="/watch?<%= env.params.query %>&iv_load_policy=3">
                        <%= translate(locale, "Hide annotations") %>
                    </a>
                <% else %>
                    <a href="/watch?<%= env.params.query %>&iv_load_policy=1">
                        <%=translate(locale, "Show annotations")%>
                    </a>
                <% end %>
            </p>

            <% if user %>
                <% playlists = Invidious::Database::Playlists.select_user_created_playlists(user.email) %>
                <% if !playlists.empty? %>
                    <form data-onsubmit="return_false" class="pure-form pure-form-stacked" action="/playlist_ajax" method="post" target="_blank">
                        <div class="pure-control-group">
                            <label for="playlist_id"><%= translate(locale, "Add to playlist: ") %></label>
                            <select style="width:100%" name="playlist_id" id="playlist_id">
                                <% playlists.each do |plid, playlist_title| %>
                                    <option data-plid="<%= plid %>" value="<%= plid %>"><%= HTML.escape(playlist_title) %></option>
                                <% end %>
                            </select>
                        </div>

                        <input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
                        <input type="hidden" name="action_add_video" value="1">
                        <input type="hidden" name="video_id" value="<%= video.id %>">
                        <button data-onclick="add_playlist_video" data-id="<%= video.id %>" type="submit" class="pure-button pure-button-primary">
                            <b><%= translate(locale, "Add to playlist") %></b>
                        </button>
                    </form>
                    <script id="playlist_data" type="application/json">
                    <%=
                    {
                        "csrf_token" => URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "")
                    }.to_pretty_json
                    %>
                    </script>
                    <script src="/js/playlist_widget.js?v=<%= Time.utc.to_unix_ms %>"></script>
                <% end %>
            <% end %>

            <% if CONFIG.dmca_content.includes?(video.id) || CONFIG.disabled?("downloads") %>
                <p id="download"><%= translate(locale, "Download is disabled.") %></p>
            <% else %>
                <form class="pure-form pure-form-stacked" action="/latest_version" method="get" rel="noopener" target="_blank">
                    <div class="pure-control-group">
                        <label for="download_widget"><%= translate(locale, "Download as: ") %></label>
                        <select style="width:100%" name="download_widget" id="download_widget">
                            <% fmt_stream.each do |option| %>
                                <option value='{"id":"<%= video.id %>","itag":"<%= option["itag"] %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= option["mimeType"].as_s.split(";")[0].split("/")[1] %>"}'>
                                    <%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["mimeType"].as_s.split(";")[0] %>
                                </option>
                            <% end %>
                            <% video_streams.each do |option| %>
                                <option value='{"id":"<%= video.id %>","itag":"<%= option["itag"] %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= option["mimeType"].as_s.split(";")[0].split("/")[1] %>"}'>
                                    <%= option["qualityLabel"] %> - <%= option["mimeType"].as_s.split(";")[0] %> @ <%= option["fps"] %>fps - video only
                                </option>
                            <% end %>
                            <% audio_streams.each do |option| %>
                                <option value='{"id":"<%= video.id %>","itag":"<%= option["itag"] %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= option["mimeType"].as_s.split(";")[0].split("/")[1] %>"}'>
                                    <%= option["mimeType"].as_s.split(";")[0] %> @ <%= option["bitrate"]?.try &.as_i./ 1000 %>k - audio only
                                </option>
                            <% end %>
                            <% captions.each do |caption| %>
                                <option value='{"id":"<%= video.id %>","label":"<%= caption.name %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= caption.language_code %>.vtt"}'>
                                    <%= translate(locale, "download_subtitles", translate(locale, caption.name)) %>
                                </option>
                            <% end %>
                        </select>
                    </div>

                    <button type="submit" class="pure-button pure-button-primary">
                        <b><%= translate(locale, "Download") %></b>
                    </button>
                </form>
            <% end %>

            <p id="views"><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
            <p id="likes"><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>
            <p id="dislikes"><i class="icon ion-ios-thumbs-down"></i> <%= number_with_separator(video.dislikes) %></p>
            <p id="genre"><%= translate(locale, "Genre: ") %>
                <% if !video.genre_url %>
                    <%= video.genre %>
                <% else %>
                    <a href="<%= video.genre_url %>"><%= video.genre %></a>
                <% end %>
            </p>
            <% if video.license %>
                <p id="license"><%= translate(locale, "License: ") %><%= video.license %></p>
            <% end %>
            <p id="family_friendly"><%= translate(locale, "Family friendly? ") %><%= translate_bool(locale, video.is_family_friendly) %></p>
            <p id="wilson"><%= translate(locale, "Wilson score: ") %><%= video.wilson_score %></p>
            <p id="rating"><%= translate(locale, "Rating: ") %><%= video.average_rating %> / 5</p>
            <p id="engagement"><%= translate(locale, "Engagement: ") %><%= video.engagement %>%</p>
            <% if video.allowed_regions.size != REGIONS.size %>
                <p id="allowed_regions">
                    <% if video.allowed_regions.size < REGIONS.size // 2 %>
                        <%= translate(locale, "Whitelisted regions: ") %><%= video.allowed_regions.join(", ") %>
                    <% else %>
                        <%= translate(locale, "Blacklisted regions: ") %><%= (REGIONS.to_a - video.allowed_regions).join(", ") %>
                    <% end %>
                </p>
            <% end %>
        </div>
    </div>

    <div class="pure-u-1 <% if params.related_videos || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>">
        <div class="h-box">
            <a href="/channel/<%= video.ucid %>" style="display:block;width:fit-content;width:-moz-fit-content">
                <div class="channel-profile">
                    <% if !video.author_thumbnail.empty? %>
                        <img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>">
                    <% end %>
                    <span id="channel-name"><%= author %></span>
                </div>
            </a>

            <% sub_count_text = video.sub_count_text %>
            <%= rendered "components/subscribe_widget" %>

            <p id="published-date">
                <% if video.premiere_timestamp.try &.> Time.utc %>
                    <b><%= video.premiere_timestamp.try { |t| translate(locale, "Premieres `x`", t.to_s("%B %-d, %R UTC")) } %></b>
                <% else %>
                    <b><%= translate(locale, "Shared `x`", video.published.to_s("%B %-d, %Y")) %></b>
                <% end %>
            </p>

            <div id="description-box"> <!-- Description -->
                <% if video.description.size < 200 || params.extend_desc %>
                    <div id="descriptionWrapper"><%= video.description_html %></div>
                <% else %>
                    <input id="descexpansionbutton" type="checkbox"/>
                    <div id="descriptionWrapper"><%= video.description_html %></div>
                    <label for="descexpansionbutton">
                        <a></a>
                    </label>
                <% end %>
            </div>

            <hr>

            <div id="comments">
                <% if nojs %>
                    <%= comment_html %>
                <% else %>
                    <noscript>
                        <a href="/watch?<%= env.params.query %>&nojs=1">
                            <%= translate(locale, "Hi! Looks like you have JavaScript turned off. Click here to view comments, keep in mind they may take a bit longer to load.") %>
                        </a>
                    </noscript>
                <% end %>
            </div>
        </div>
    </div>

    <% if params.related_videos || plid %>
        <div class="pure-u-1 pure-u-lg-1-5">
            <% if plid %>
                <div id="playlist" class="h-box"></div>
            <% end %>

            <% if params.related_videos %>
                <div class="h-box">
                    <% if !video.related_videos.empty? %>
                        <div <% if plid %>style="display:none"<% end %>>
                            <div class="pure-control-group">
                                <label for="continue"><%= translate(locale, "preferences_continue_label") %></label>
                                <input name="continue" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>
                            </div>
                            <hr>
                        </div>
                    <% end %>

                    <% video.related_videos.each do |rv| %>
                        <% if rv["id"]? %>
                            <a href="/watch?v=<%= rv["id"] %>">
                                <% if !env.get("preferences").as(Preferences).thin_mode %>
                                    <div class="thumbnail">
                                        <img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg">
                                        <p class="length"><%= recode_length_seconds(rv["length_seconds"]?.try &.to_i? || 0) %></p>
                                    </div>
                                <% end %>
                                <p style="width:100%"><%= rv["title"] %></p>
                                <h5 class="pure-g">
                                    <div class="pure-u-14-24">
                                        <% if rv["ucid"]? %>
                                            <b style="width:100%"><a href="/channel/<%= rv["ucid"] %>"><%= rv["author"]? %></a></b>
                                        <% else %>
                                            <b style="width:100%"><%= rv["author"]? %></b>
                                        <% end %>
                                    </div>

                                    <div class="pure-u-10-24" style="text-align:right">
                                        <% if views = rv["short_view_count_text"]?.try &.delete(", views watching") %>
                                            <% if !views.empty? %>
                                                <b class="width:100%"><%= translate_count(locale, "generic_views_count", views.to_i? || 0) %></b>
                                            <% end %>
                                        <% end %>
                                    </div>
                                </h5>
                            </a>
                        <% end %>
                    <% end %>
                </div>
            <% end %>
        </div>
    <% end %>
</div>
<script src="/js/watch.js?v=<%= ASSET_COMMIT %>"></script>