501 lines
18 KiB
Plaintext
501 lines
18 KiB
Plaintext
<% content_for "header" do %>
|
|
<meta name="thumbnail" content="<%= thumbnail %>">
|
|
<meta name="description" content="<%= 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="<%= HTML.escape(video.title) %>">
|
|
<meta property="og:image" content="/vi/<%= video.id %>/maxres.jpg">
|
|
<meta property="og:description" content="<%= 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="<%= HTML.escape(video.title) %>">
|
|
<meta name="twitter:description" content="<%= description %>">
|
|
<meta name="twitter:image" content="/vi/<%= video.id %>/hqdefault.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">
|
|
<script src="/js/watch.js"></script>
|
|
<%= rendered "components/player_sources" %>
|
|
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
|
<% end %>
|
|
|
|
<div id="player-container" class="h-box">
|
|
<%= rendered "components/player" %>
|
|
</div>
|
|
|
|
<div class="h-box">
|
|
<h1>
|
|
<%= HTML.escape(video.title) %>
|
|
<% if params[:listen] %>
|
|
<a href="/watch?<%= env.params.query %>&listen=0">
|
|
<i class="icon ion-ios-videocam"></i>
|
|
</a>
|
|
<% else %>
|
|
<a href="/watch?<%= env.params.query %>&listen=1">
|
|
<i class="icon ion-ios-volume-high"></i>
|
|
</a>
|
|
<% end %>
|
|
</h1>
|
|
<% if !reason.empty? %>
|
|
<h3><%= reason %></h3>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<div class="h-box">
|
|
<p><a href="https://www.youtube.com/watch?v=<%= video.id %>"><%= translate(locale, "Watch video on Youtube") %></a></p>
|
|
|
|
<form class="pure-form pure-form-stacked">
|
|
<div class="pure-control-group">
|
|
<label for="download_widget"><%= translate(locale, "Download as: ") %></label>
|
|
<select style="width:100%" name="download_widget" id="download_widget">
|
|
<% video_streams.each do |option| %>
|
|
<option data-url="<%= option["url"] %>"><%= option["quality_label"] %> - <%= option["type"].split(";")[0] %> @ <%= option["fps"] %>fps - video only</option>
|
|
<% end %>
|
|
<% audio_streams.each do |option| %>
|
|
<option data-url="<%= option["url"] %>"><%= option["type"].split(";")[0] %> @ <%= option["bitrate"] %>k - audio only</option>
|
|
<% end %>
|
|
<% fmt_stream.each do |option| %>
|
|
<option data-url="<%= option["url"] %>"><%= itag_to_metadata?(option["itag"]).try &.["height"]? || "~240" %>p - <%= option["type"].split(";")[0] %></option>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="progress-container" style="width:100%; display:none">
|
|
<div id="download-progress">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" data-title="<%= video.title.dump_unquoted %>-<%= video.id %>.mp4" onclick="download_video(this)"
|
|
class="pure-button pure-button-primary">
|
|
<%= translate(locale, "Download") %>
|
|
</button>
|
|
</form>
|
|
|
|
<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>
|
|
<p id="Genre"><%= translate(locale, "Genre: ") %>
|
|
<% if video.genre_url.empty? %>
|
|
<%= video.genre %>
|
|
<% else %>
|
|
<a href="<%= video.genre_url %>"><%= video.genre %></a>
|
|
<% end %>
|
|
</p>
|
|
<% if !video.license.empty? %>
|
|
<p id="License"><%= translate(locale, "License: ") %><%= video.license %></p>
|
|
<% end %>
|
|
<p id="FamilyFriendly"><%= translate(locale, "Family friendly? ") %><%= 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>
|
|
<% if video.allowed_regions.size != REGIONS.size %>
|
|
<p id="AllowedRegions">
|
|
<% 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 preferences && !preferences.related_videos && !plid %>pure-u-md-4-5<% else %>pure-u-md-3-5<% end %>">
|
|
<div class="h-box">
|
|
<p>
|
|
<a href="/channel/<%= video.ucid %>">
|
|
<h3><%= video.author %></h3>
|
|
</a>
|
|
</p>
|
|
<% ucid = video.ucid %>
|
|
<% author = video.author %>
|
|
<% sub_count_text = video.sub_count_text %>
|
|
<%= rendered "components/subscribe_widget" %>
|
|
<p>
|
|
<b><%= translate(locale, "Shared `x`", video.published.to_s("%B %-d, %Y")) %></b>
|
|
</p>
|
|
<div>
|
|
<%= video.description %>
|
|
</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 disabled. Click here to view comments, keep in mind it may take a bit longer to load.") %>
|
|
</a>
|
|
</noscript>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% if preferences && preferences.related_videos || plid %>
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<% if plid %>
|
|
<div id="playlist" class="h-box">
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if !preferences || preferences && preferences.related_videos %>
|
|
<div class="h-box">
|
|
|
|
<% if !rvs.empty? %>
|
|
<div id="continue" <% if plid %>style="display:none"<% end %>>
|
|
<div class="pure-control-group">
|
|
<label for="continue"><%= translate(locale, "Autoplay next video: ") %></label>
|
|
<input name="continue" onclick="continue_autoplay(this)" id="continue" type="checkbox" <% if params[:continue] %>checked<% end %>>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% rvs.each do |rv| %>
|
|
<% if rv["id"]? %>
|
|
<a href="/watch?v=<%= rv["id"] %>">
|
|
<% if preferences && preferences.thin_mode %>
|
|
<% else %>
|
|
<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>
|
|
<p>
|
|
<b style="width: 100%"><%= rv["author"] %></b>
|
|
</p>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<script>
|
|
<% if !rvs.empty? && !plid && params[:continue] %>
|
|
player.on('ended', function() {
|
|
location.assign("/watch?v="
|
|
+ "<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>"
|
|
+ "&continue=1"
|
|
<% if params[:listen] %>
|
|
+ "&listen=1"
|
|
<% end %>
|
|
<% if params[:autoplay] %>
|
|
+ "&autoplay=1"
|
|
<% end %>
|
|
<% if params[:speed] %>
|
|
+ "&speed=<%= params[:speed] %>"
|
|
<% end %>
|
|
);
|
|
});
|
|
<% end %>
|
|
|
|
function continue_autoplay(target) {
|
|
if (target.checked) {
|
|
player.on('ended', function() {
|
|
location.assign("/watch?v="
|
|
+ "<%= rvs.select { |rv| rv["id"]? }[0]?.try &.["id"] %>"
|
|
+ "&continue=1"
|
|
<% if params[:listen] %>
|
|
+ "&listen=1"
|
|
<% end %>
|
|
<% if params[:autoplay] %>
|
|
+ "&autoplay=1"
|
|
<% end %>
|
|
<% if params[:speed] %>
|
|
+ "&speed=<%= params[:speed] %>"
|
|
<% end %>
|
|
);
|
|
});
|
|
} else {
|
|
player.off('ended');
|
|
}
|
|
}
|
|
|
|
function number_with_separator(val) {
|
|
while (/(\d+)(\d{3})/.test(val.toString())) {
|
|
val = val.toString().replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
|
|
}
|
|
return val;
|
|
}
|
|
|
|
<% ucid = video.ucid %>
|
|
<% author = video.author %>
|
|
<% sub_count_text = video.sub_count_text %>
|
|
<%= rendered "components/subscribe_widget_script" %>
|
|
|
|
|
|
<% if plid %>
|
|
function get_playlist(timeouts = 0) {
|
|
playlist = document.getElementById("playlist");
|
|
|
|
if (timeouts > 10) {
|
|
console.log("Failed to pull playlist");
|
|
playlist.innerHTML = "";
|
|
return;
|
|
}
|
|
|
|
playlist.innerHTML = ' \
|
|
<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3> \
|
|
<hr>'
|
|
|
|
var plid = "<%= plid %>"
|
|
|
|
if (plid.startsWith("RD")) {
|
|
var plid_url = "/api/v1/mixes/<%= plid %>?continuation=<%= video.id %>&format=html&hl=<%= env.get("locale").as(String) %>";
|
|
} else {
|
|
var plid_url = "/api/v1/playlists/<%= plid %>?continuation=<%= video.id %>&format=html&hl=<%= env.get("locale").as(String) %>";
|
|
}
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = "json";
|
|
xhr.timeout = 20000;
|
|
xhr.open("GET", plid_url, true);
|
|
xhr.send();
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status == 200) {
|
|
playlist.innerHTML = xhr.response.playlistHtml;
|
|
|
|
if (xhr.response.nextVideo) {
|
|
player.on('ended', function() {
|
|
location.assign("/watch?v="
|
|
+ xhr.response.nextVideo
|
|
+ "&list=<%= plid %>"
|
|
<% if params[:listen] %>
|
|
+ "&listen=1"
|
|
<% end %>
|
|
<% if params[:autoplay] %>
|
|
+ "&autoplay=1"
|
|
<% end %>
|
|
<% if params[:speed] %>
|
|
+ "&speed=<%= params[:speed] %>"
|
|
<% end %>
|
|
);
|
|
});
|
|
}
|
|
} else {
|
|
playlist.innerHTML = "";
|
|
document.getElementById('continue').style.display = "";
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log("Pulling playlist timed out.");
|
|
|
|
comments = document.getElementById("playlist");
|
|
comments.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3><hr>';
|
|
get_playlist(timeouts + 1);
|
|
};
|
|
}
|
|
|
|
get_playlist();
|
|
<% end %>
|
|
|
|
function get_reddit_comments(timeouts = 0) {
|
|
comments = document.getElementById("comments");
|
|
|
|
if (timeouts > 10) {
|
|
console.log("Failed to pull comments");
|
|
comments.innerHTML = "";
|
|
return;
|
|
}
|
|
|
|
var fallback = comments.innerHTML;
|
|
comments.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
|
|
|
|
var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html&hl=<%= env.get("locale").as(String) %>";
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = "json";
|
|
xhr.timeout = 20000;
|
|
xhr.open("GET", url, true);
|
|
xhr.send();
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status == 200) {
|
|
comments.innerHTML = ' \
|
|
<div> \
|
|
<h3> \
|
|
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
|
|
{title} \
|
|
</h3> \
|
|
<p> \
|
|
<b> \
|
|
<a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
|
|
<%= translate(locale, "View YouTube comments") %> \
|
|
</a> \
|
|
</b> \
|
|
</p> \
|
|
<b> \
|
|
<a rel="noopener" target="_blank" href="https://reddit.com{permalink}"><%= translate(locale, "View more comments on Reddit") %></a> \
|
|
</b> \
|
|
</div> \
|
|
<div>{contentHtml}</div> \
|
|
<hr>'.supplant({
|
|
title: xhr.response.title,
|
|
permalink: xhr.response.permalink,
|
|
contentHtml: xhr.response.contentHtml
|
|
});
|
|
} else {
|
|
<% if preferences && preferences.comments[1] == "youtube" %>
|
|
get_youtube_comments();
|
|
<% else %>
|
|
comments.innerHTML = fallback;
|
|
<% end %>
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log("Pulling comments timed out.");
|
|
|
|
get_reddit_comments(timeouts + 1);
|
|
};
|
|
}
|
|
|
|
function get_youtube_comments(timeouts = 0) {
|
|
comments = document.getElementById("comments");
|
|
|
|
if (timeouts > 10) {
|
|
console.log("Failed to pull comments");
|
|
comments.innerHTML = "";
|
|
return;
|
|
}
|
|
|
|
var fallback = comments.innerHTML;
|
|
comments.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
|
|
|
|
var url = "/api/v1/comments/<%= video.id %>?format=html&hl=<%= env.get("locale").as(String) %>";
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = "json";
|
|
xhr.timeout = 20000;
|
|
xhr.open("GET", url, true);
|
|
xhr.send();
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status == 200) {
|
|
if (xhr.response.commentCount > 0) {
|
|
comments.innerHTML = ' \
|
|
<div> \
|
|
<h3> \
|
|
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
|
|
<%= translate(locale, "View `x` comments", "{commentCount}") %> \
|
|
</h3> \
|
|
<b> \
|
|
<a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
|
|
<%= translate(locale, "View Reddit comments") %> \
|
|
</a> \
|
|
</b> \
|
|
</div> \
|
|
<div>{contentHtml}</div> \
|
|
<hr>'.supplant({
|
|
contentHtml: xhr.response.contentHtml,
|
|
commentCount: number_with_separator(xhr.response.commentCount)
|
|
});
|
|
} else {
|
|
comments.innerHTML = "";
|
|
}
|
|
} else {
|
|
<% if preferences && preferences.comments[1] == "youtube" %>
|
|
get_youtube_comments();
|
|
<% else %>
|
|
comments.innerHTML = "";
|
|
<% end %>
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log("Pulling comments timed out.");
|
|
|
|
comments.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
|
|
get_youtube_comments(timeouts + 1);
|
|
};
|
|
}
|
|
|
|
function get_youtube_replies(target, load_more) {
|
|
var continuation = target.getAttribute('data-continuation');
|
|
|
|
var body = target.parentNode.parentNode;
|
|
var fallback = body.innerHTML;
|
|
body.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
|
|
|
|
var url = '/api/v1/comments/<%= video.id %>?format=html&hl=<%= env.get("locale").as(String) %>&continuation=' +
|
|
continuation;
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'json';
|
|
xhr.timeout = 20000;
|
|
xhr.open('GET', url, true);
|
|
xhr.send();
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status == 200) {
|
|
if (load_more) {
|
|
body = body.parentNode.parentNode;
|
|
body.removeChild(body.lastElementChild);
|
|
body.innerHTML += xhr.response.contentHtml;
|
|
} else {
|
|
body.innerHTML = ' \
|
|
<p><a href="javascript:void(0)" \
|
|
onclick="hide_youtube_replies(this)"><%= translate(locale, "Hide replies") %> \
|
|
</a></p> \
|
|
<div>{contentHtml}</div>'.supplant({
|
|
contentHtml: xhr.response.contentHtml,
|
|
});
|
|
}
|
|
} else {
|
|
body.innerHTML = fallback;
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log('Pulling comments timed out.');
|
|
|
|
body.innerHTML = fallback;
|
|
};
|
|
}
|
|
|
|
<% if preferences %>
|
|
<% if preferences.comments[0] == "youtube" %>
|
|
get_youtube_comments();
|
|
<% elsif preferences.comments[0] == "reddit" %>
|
|
get_reddit_comments();
|
|
<% else %>
|
|
<% if preferences.comments[1] == "youtube" %>
|
|
get_youtube_comments();
|
|
<% elsif preferences.comments[1] == "reddit" %>
|
|
get_reddit_comments();
|
|
<% else %>
|
|
comments = document.getElementById("comments");
|
|
comments.innerHTML = "";
|
|
<% end %>
|
|
<% end %>
|
|
<% else %>
|
|
get_youtube_comments();
|
|
<% end %>
|
|
</script>
|