invidious-copy-2022-08-14/src/invidious/views/watch.ecr

261 lines
13 KiB
Text
Raw Normal View History

2018-01-07 17:40:03 +00:00
<% content_for "header" do %>
2018-03-07 22:48:26 +00:00
<meta name="thumbnail" content="<%= thumbnail %>">
2019-06-08 20:08:27 +00:00
<meta name="description" content="<%= video.short_description %>">
2018-11-02 13:09:28 +00:00
<meta name="keywords" content="<%= video.keywords.join(",") %>">
2018-07-23 01:02:49 +00:00
<meta property="og:site_name" content="Invidious">
<meta property="og:url" content="<%= host_url %>/watch?v=<%= video.id %>">
<meta property="og:title" content="<%= HTML.escape(video.title) %>">
2018-09-15 02:24:28 +00:00
<meta property="og:image" content="/vi/<%= video.id %>/maxres.jpg">
2019-06-08 20:08:27 +00:00
<meta property="og:description" content="<%= video.short_description %>">
2018-07-23 01:02:49 +00:00
<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 %>">
2018-07-23 01:02:49 +00:00
<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">
2018-08-13 18:24:10 +00:00
<meta name="twitter:site" content="@omarroth1">
<meta name="twitter:url" content="<%= host_url %>/watch?v=<%= video.id %>">
<meta name="twitter:title" content="<%= HTML.escape(video.title) %>">
2019-06-08 20:08:27 +00:00
<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 %>">
2018-07-23 04:20:49 +00:00
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">
<%= rendered "components/player_sources" %>
<title><%= HTML.escape(video.title) %> - Invidious</title>
2018-01-07 17:40:03 +00:00
<% end %>
2018-01-15 03:16:09 +00:00
2019-05-06 16:23:14 +00:00
<script>
var video_data = {
id: '<%= video.id %>',
2019-08-05 23:49:13 +00:00
index: '<%= continuation %>',
2019-05-06 16:23:14 +00:00
plid: '<%= plid %>',
2019-07-30 00:41:45 +00:00
length_seconds: <%= video.length_seconds.to_f %>,
2019-05-06 16:23:14 +00:00
play_next: <%= !rvs.empty? && !plid && params.continue %>,
next_video: '<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>',
2019-05-08 13:58:10 +00:00
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")) %>',
2019-05-06 16:23:14 +00:00
params: <%= params.to_json %>,
2019-06-08 15:18:45 +00:00
preferences: <%= preferences.to_json %>,
premiere_timestamp: <%= video.premiere_timestamp.try &.to_unix || "null" %>
2019-05-06 16:23:14 +00:00
}
</script>
<div id="player-container" class="h-box">
2019-05-02 01:03:39 +00:00
<%= rendered "components/player" %>
2018-03-11 17:05:56 +00:00
</div>
2018-01-16 19:58:08 +00:00
2018-08-25 23:33:15 +00:00
<div class="h-box">
2019-05-02 01:03:39 +00:00
<h1>
<%= HTML.escape(video.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>
2019-08-05 23:54:39 +00:00
<i class="icon ion-ios-unlock"></i> <%= translate(locale, "Unlisted") %>
2019-05-02 01:03:39 +00:00
</h3>
<% end %>
<% if !reason.empty? %>
<h3>
<%= reason %>
</h3>
2019-06-08 15:18:45 +00:00
<% elsif video.premiere_timestamp %>
<h3>
<%= translate(locale, "Premieres in `x`", recode_date((video.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>
</h3>
2018-08-25 23:33:15 +00:00
<% end %>
</div>
<div class="pure-g">
2019-04-14 22:04:52 +00:00
<div class="pure-u-1 pure-u-lg-1-5">
2018-08-25 23:33:15 +00:00
<div class="h-box">
<span>
2019-05-02 01:03:39 +00:00
<a href="https://www.youtube.com/watch?v=<%= video.id %>"><%= translate(locale, "Watch on YouTube") %></a>
</span>
2019-05-02 01:03:39 +00:00
<p>
<% 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 %>
2019-05-01 04:39:04 +00:00
</p>
<% if CONFIG.dmca_content.includes?(video.id) || CONFIG.disabled?("downloads") %>
2019-05-02 01:03:39 +00:00
<p><%= translate(locale, "Download is disabled.") %></p>
<% else %>
2019-05-02 01:03:39 +00:00
<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["type"].split(";")[0].split("/")[1] %>"}'>
2019-05-02 01:03:39 +00:00
<%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["type"].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["type"].split(";")[0].split("/")[1] %>"}'>
2019-05-02 01:03:39 +00:00
<%= option["quality_label"] %> - <%= option["type"].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["type"].split(";")[0].split("/")[1] %>"}'>
2019-05-02 01:03:39 +00:00
<%= option["type"].split(";")[0] %> @ <%= option["bitrate"] %>k - audio only
</option>
<% end %>
<% captions.each do |caption| %>
<option value='{"id":"<%= video.id %>","label":"<%= caption.name.simpleText %>","title":"<%= URI.encode_www_form(video.title) %>-<%= video.id %>.<%= caption.languageCode %>.vtt"}'>
2019-05-02 01:03:39 +00:00
<%= translate(locale, "Subtitles - `x` (.vtt)", caption.name.simpleText) %>
</option>
<% end %>
</select>
</div>
2019-01-24 01:05:24 +00:00
2019-05-02 01:03:39 +00:00
<button type="submit" class="pure-button pure-button-primary">
<b><%= translate(locale, "Download") %></b>
</button>
</form>
<% end %>
2019-01-24 01:05:24 +00:00
2018-08-25 23:33:15 +00:00
<p><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
<p><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>
<p><i class="icon ion-ios-thumbs-down"></i> <%= number_with_separator(video.dislikes) %></p>
2019-05-02 01:03:39 +00:00
<p id="genre"><%= translate(locale, "Genre: ") %>
<% if video.genre_url.empty? %>
<%= video.genre %>
<% else %>
<a href="<%= video.genre_url %>"><%= video.genre %></a>
<% end %>
2018-09-25 15:10:25 +00:00
</p>
2018-09-09 19:47:26 +00:00
<% if !video.license.empty? %>
2019-05-02 01:03:39 +00:00
<p id="license"><%= translate(locale, "License: ") %><%= video.license %></p>
2018-09-09 19:47:26 +00:00
<% end %>
2019-05-02 01:03:39 +00:00
<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.round(4) %></p>
<p id="rating"><%= translate(locale, "Rating: ") %><%= rating.round(4) %> / 5</p>
<p id="engagement"><%= translate(locale, "Engagement: ") %><%= engagement.round(2) %>%</p>
2018-08-25 23:33:15 +00:00
<% if video.allowed_regions.size != REGIONS.size %>
2019-05-02 01:03:39 +00:00
<p id="allowed_regions">
2019-06-08 01:23:37 +00:00
<% if video.allowed_regions.size < REGIONS.size // 2 %>
2019-05-02 01:03:39 +00:00
<%= translate(locale, "Whitelisted regions: ") %><%= video.allowed_regions.join(", ") %>
<% else %>
<%= translate(locale, "Blacklisted regions: ") %><%= (REGIONS.to_a - video.allowed_regions).join(", ") %>
<% end %>
2018-08-25 23:33:15 +00:00
</p>
<% end %>
</div>
</div>
2019-05-01 04:39:04 +00:00
<div class="pure-u-1 <% if params.related_videos || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>">
2018-08-25 23:33:15 +00:00
<div class="h-box">
2019-07-03 15:53:33 +00:00
<a href="/channel/<%= video.ucid %>" style="display:block;width:fit-content;width:-moz-fit-content">
<div class="channel-profile">
2019-06-30 17:31:16 +00:00
<img src="/ggpht<%= URI.parse(video.author_thumbnail).full_path %>">
<span><%= video.author %></span>
</div>
</a>
2019-05-02 01:03:39 +00:00
<% ucid = video.ucid %>
<% author = video.author %>
<% sub_count_text = video.sub_count_text %>
<%= rendered "components/subscribe_widget" %>
2019-05-02 01:03:39 +00:00
2018-08-25 23:33:15 +00:00
<p>
2019-06-08 15:18:45 +00:00
<% if video.premiere_timestamp %>
<b><%= translate(locale, "Premieres `x`", video.premiere_timestamp.not_nil!.to_s("%B %-d, %R UTC")) %></b>
<% else %>
<b><%= translate(locale, "Shared `x`", video.published.to_s("%B %-d, %Y")) %></b>
<% end %>
2018-08-25 23:33:15 +00:00
</p>
2019-05-02 01:03:39 +00:00
2018-08-25 23:33:15 +00:00
<div>
2019-06-08 20:08:27 +00:00
<%= video.description_html %>
2018-08-25 23:33:15 +00:00
</div>
2019-05-02 01:03:39 +00:00
2018-08-25 23:33:15 +00:00
<hr>
2019-05-02 01:03:39 +00:00
2018-08-25 23:33:15 +00:00
<div id="comments">
<% if nojs %>
<%= comment_html %>
<% else %>
2019-05-02 01:03:39 +00:00
<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 %>
2018-08-25 23:33:15 +00:00
</div>
</div>
</div>
2018-10-08 02:11:33 +00:00
2019-05-02 01:03:39 +00:00
<% 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 %>
2018-11-11 17:45:05 +00:00
2019-05-02 01:03:39 +00:00
<% if params.related_videos %>
<div class="h-box">
<% if !rvs.empty? %>
<div <% if plid %>style="display:none"<% end %>>
<div class="pure-control-group">
2019-05-27 16:56:52 +00:00
<label for="continue"><%= translate(locale, "Play next by default: ") %></label>
2019-05-15 18:30:30 +00:00
<input name="continue" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>
2019-05-02 01:03:39 +00:00
</div>
<hr>
</div>
<% end %>
2019-04-28 17:07:19 +00:00
2019-05-02 01:03:39 +00:00
<% rvs.each do |rv| %>
<% if rv["id"]? %>
<a href="/watch?v=<%= rv["id"] %>">
<% if !env.get("preferences").as(Preferences).thin_mode %>
<div class="thumbnail">
<img 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">
2019-08-27 13:00:04 +00:00
<% 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 %>
2019-05-02 01:03:39 +00:00
</div>
<div class="pure-u-10-24" style="text-align:right">
<% if views = rv["short_view_count_text"]?.try &.delete(", views watching") %>
2019-05-02 01:03:39 +00:00
<b class="width:100%"><%= translate(locale, "`x` views", views) %></b>
<% end %>
</div>
</h5>
</a>
2019-04-28 17:07:19 +00:00
<% end %>
2019-05-02 01:03:39 +00:00
<% end %>
</div>
2018-08-25 23:33:15 +00:00
<% end %>
</div>
<% end %>
2018-08-25 23:33:15 +00:00
</div>
<script src="/js/watch.js?v=<%= ASSET_COMMIT %>"></script>