フォーク元 suwako/invidious-mod
440 行
15 KiB
Plaintext
440 行
15 KiB
Plaintext
<% content_for "header" do %>
|
|
<meta name="thumbnail" content="<%= thumbnail %>">
|
|
<meta name="description" content="<%= description %>">
|
|
<meta name="keywords" content="<%= video.info["keywords"] %>">
|
|
<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="<%= thumbnail %>">
|
|
<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 %>">
|
|
<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 %>">Watch video on YouTube</a></p>
|
|
<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">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">License: <%= video.license %></p>
|
|
<% end %>
|
|
<p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
|
|
<p id="Wilson">Wilson Score: <%= video.wilson_score.round(4) %></p>
|
|
<p id="Rating">Rating: <%= rating.round(4) %> / 5</p>
|
|
<p id="Engagement">Engagement: <%= engagement.round(2) %>%</p>
|
|
<% if video.allowed_regions.size != REGIONS.size %>
|
|
<p id="AllowedRegions">
|
|
<% if video.allowed_regions.size < REGIONS.size / 2 %>
|
|
Whitelisted regions: <%= video.allowed_regions.join(", ") %>
|
|
<% else %>
|
|
Blacklisted regions: <%= (REGIONS.to_a - video.allowed_regions).join(", ") %>
|
|
<% end %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-md-3-5">
|
|
<div class="h-box">
|
|
<p>
|
|
<a href="/channel/<%= video.ucid %>">
|
|
<h3><%= video.author %></h3>
|
|
</a>
|
|
</p>
|
|
<% if user %>
|
|
<% if subscriptions.includes? video.ucid %>
|
|
<p>
|
|
<a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary"
|
|
href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
|
|
<b>Unsubscribe from <%= video.author %> <%= video.sub_count_text %></b>
|
|
</a>
|
|
</p>
|
|
<% else %>
|
|
<p>
|
|
<a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary"
|
|
href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
|
|
<b>Subscribe to <%= video.author %> <%= video.sub_count_text %></b>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
<% else %>
|
|
<p>
|
|
<a id="subscribe" class="pure-button pure-button-primary"
|
|
href="/login?referer=<%= env.get("current_page") %>">
|
|
<b>Login to subscribe to <%= video.author %></b>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
<p>
|
|
<b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
|
|
</p>
|
|
<div>
|
|
<%= video.description %>
|
|
</div>
|
|
<hr>
|
|
<div id="comments">
|
|
<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-5">
|
|
<% if plid %>
|
|
<div id="playlist" class="h-box">
|
|
<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
|
|
<hr>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if !preferences || preferences && preferences.related_videos %>
|
|
<div class="h-box">
|
|
<% rvs.each do |rv| %>
|
|
<% if rv.has_key?("id") %>
|
|
<a href="/watch?v=<%= rv["id"] %>">
|
|
<% if preferences && preferences.thin_mode %>
|
|
<% else %>
|
|
<img style="width:100%;" src="/vi/<%= rv["id"] %>/mqdefault.jpg">
|
|
<% end %>
|
|
<p style="width:100%"><%= rv["title"] %></p>
|
|
<p>
|
|
<b style="width: 100%"><%= rv["author"] %></b>
|
|
</p>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
subscribe_button = document.getElementById("subscribe");
|
|
if (subscribe_button.getAttribute('onclick')) {
|
|
subscribe_button["href"] = "javascript:void(0);";
|
|
}
|
|
|
|
function subscribe() {
|
|
var url = "/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>";
|
|
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) {
|
|
subscribe_button = document.getElementById("subscribe");
|
|
subscribe_button.onclick = unsubscribe;
|
|
subscribe_button.innerHTML = '<b>Unsubscribe from <%= video.author %> <%= video.sub_count_text %></b>'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function unsubscribe() {
|
|
var url = "/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>";
|
|
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) {
|
|
subscribe_button = document.getElementById("subscribe");
|
|
subscribe_button.onclick = subscribe;
|
|
subscribe_button.innerHTML = '<b>Subscribe to <%= video.author %> <%= video.sub_count_text %></b>'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
<% if plid %>
|
|
function get_playlist() {
|
|
var plid = "<%= plid %>"
|
|
|
|
if (plid.startsWith("RD")) {
|
|
var plid_url = "/api/v1/mixes/<%= plid %>?continuation=<%= video.id %>&format=html";
|
|
} else {
|
|
var plid_url = "/api/v1/playlists/<%= plid %>?continuation=<%= video.id %>&format=html";
|
|
}
|
|
|
|
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 = document.getElementById("playlist");
|
|
playlist.innerHTML = xhr.response.playlistHtml;
|
|
|
|
if (xhr.response.nextVideo) {
|
|
player.on('ended', function() {
|
|
window.location.replace("/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 = "";
|
|
}
|
|
}
|
|
};
|
|
|
|
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();
|
|
};
|
|
}
|
|
|
|
get_playlist();
|
|
<% end %>
|
|
|
|
function get_reddit_comments() {
|
|
var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html";
|
|
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 = document.getElementById("comments");
|
|
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\')"> \
|
|
View YouTube comments \
|
|
</a> \
|
|
</b> \
|
|
</p> \
|
|
<b> \
|
|
<a rel="noopener" target="_blank" href="https://reddit.com{permalink}">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 = document.getElementById("comments");
|
|
comments.innerHTML = "";
|
|
<% end %>
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log("Pulling comments timed out.");
|
|
|
|
get_reddit_comments();
|
|
};
|
|
}
|
|
|
|
function get_youtube_comments() {
|
|
var url = "/api/v1/comments/<%= video.id %>?format=html";
|
|
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 = document.getElementById("comments");
|
|
if (xhr.response.commentCount > 0) {
|
|
comments.innerHTML = ' \
|
|
<div> \
|
|
<h3> \
|
|
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
|
|
View {commentCount} comments \
|
|
</h3> \
|
|
<b> \
|
|
<a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
|
|
View Reddit comments \
|
|
</a> \
|
|
</b> \
|
|
</div> \
|
|
<div>{contentHtml}</div> \
|
|
<hr>'.supplant({
|
|
contentHtml: xhr.response.contentHtml,
|
|
commentCount: commaSeparateNumber(xhr.response.commentCount)
|
|
});
|
|
} else {
|
|
comments.innerHTML = "";
|
|
}
|
|
} else {
|
|
<% if preferences && preferences.comments[1] == "youtube" %>
|
|
get_youtube_comments();
|
|
<% else %>
|
|
comments = document.getElementById("comments");
|
|
comments.innerHTML = "";
|
|
<% end %>
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log("Pulling comments timed out.");
|
|
|
|
comments = document.getElementById("comments");
|
|
comments.innerHTML =
|
|
'<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
|
|
get_youtube_comments();
|
|
};
|
|
}
|
|
|
|
function get_youtube_replies(target) {
|
|
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&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) {
|
|
body.innerHTML = ' \
|
|
<p><a href="javascript:void(0)" \
|
|
onclick="hide_youtube_replies(this)">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;
|
|
};
|
|
}
|
|
|
|
function show_youtube_replies(target) {
|
|
body = target.parentNode.parentNode.children[1];
|
|
body.style.display = "";
|
|
|
|
target.innerHTML = "Hide replies";
|
|
target.setAttribute('onclick', 'hide_youtube_replies(this)');
|
|
}
|
|
|
|
function hide_youtube_replies(target) {
|
|
body = target.parentNode.parentNode.children[1];
|
|
body.style.display = "none";
|
|
|
|
target.innerHTML = "Show replies";
|
|
target.setAttribute('onclick', 'show_youtube_replies(this)');
|
|
}
|
|
|
|
<% 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> |