337 行
17 KiB
Plaintext
337 行
17 KiB
Plaintext
<% 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="<%= 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="<%= 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, "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, "Watch on YouTube") %></a>
|
|
(<a href="https://www.youtube.com/embed/<%= video.id %>"><%= translate(locale, "Embed") %></a>)
|
|
</span>
|
|
<p id="watch-on-another-invidious-instance">
|
|
<a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a>
|
|
</p>
|
|
<p id="embed-link">
|
|
<a href="<%= embed_link %>"><%= translate(locale, "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 = PG_DB.query_all("SELECT id,title FROM playlists WHERE author = $1 AND id LIKE 'IV%'", user.email, as: {String, String}) %>
|
|
<% if !playlists.empty? %>
|
|
<form data-onsubmit="return_false" class="pure-form pure-form-stacked" action="/playlist_ajax" method="post">
|
|
<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>
|
|
|
|
<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, "Subtitles - `x` (.vtt)", 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(locale, "`x` views", views) %></b>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</h5>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<script src="/js/watch.js?v=<%= ASSET_COMMIT %>"></script>
|