320 lines
11 KiB
Plaintext
320 lines
11 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="https://i.ytimg.com/vi/<%= video.id %>/hqdefault.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">
|
|
<%= rendered "components/player_sources" %>
|
|
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
|
<% end %>
|
|
|
|
<div 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: <a href="<%= video.genre_url %>"><%= video.genre %></a></p>
|
|
<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 href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
|
|
<b>Unsubscribe from <%= video.author %></b>
|
|
</a>
|
|
</p>
|
|
<% else %>
|
|
<p>
|
|
<a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
|
|
<b>Subscribe to <%= video.author %></b>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
<% else %>
|
|
<p>
|
|
<a 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 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="<%= rv["iurlmq"] %>">
|
|
<% 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>
|
|
function toggle(target) {
|
|
body = target.parentNode.parentNode.children[1];
|
|
if (body.style.display === null || body.style.display === "") {
|
|
target.innerHTML = "[ + ]";
|
|
body.style.display = "none";
|
|
} else {
|
|
target.innerHTML = "[ - ]";
|
|
body.style.display = "";
|
|
}
|
|
}
|
|
|
|
function toggle_comments(target) {
|
|
body = target.parentNode.parentNode.parentNode.children[1];
|
|
if (body.style.display === null || body.style.display === "") {
|
|
target.innerHTML = "[ + ]";
|
|
body.style.display = "none";
|
|
} else {
|
|
target.innerHTML = "[ - ]";
|
|
body.style.display = "";
|
|
}
|
|
}
|
|
|
|
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 = xhr.response.contentHtml;
|
|
} else {
|
|
body.innerHTML = fallback;
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.ontimeout = function() {
|
|
console.log("Pulling comments timed out.");
|
|
|
|
body.innerHTML = fallback;
|
|
};
|
|
}
|
|
|
|
function get_reddit_comments() {
|
|
var url = "/api/v1/comments/<%= video.id %>?source=reddit";
|
|
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>
|
|
<b>
|
|
<a 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>
|
|
</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 commaSeparateNumber(val){
|
|
while (/(\d+)(\d{3})/.test(val.toString())){
|
|
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
|
|
}
|
|
return val;
|
|
}
|
|
|
|
String.prototype.supplant = function(o) {
|
|
return this.replace(/{([^{}]*)}/g, function(a, b) {
|
|
var r = o[b];
|
|
return typeof r === "string" || typeof r === "number" ? r : a;
|
|
});
|
|
};
|
|
|
|
<% 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> |