forked from midou/invidious
Add comments fallback
This commit is contained in:
Omar Roth
parent
41a04e7c67
commit
23aaf7f1b7
@ -761,8 +761,10 @@ post "/preferences" do |env|
|
||||
volume = env.params.body["volume"]?.try &.as(String).to_i?
|
||||
volume ||= 100
|
||||
|
||||
comments = env.params.body["comments"]?
|
||||
comments ||= "youtube"
|
||||
puts env.params.body
|
||||
comments_0 = env.params.body["comments_0"]?.try &.as(String) || "youtube"
|
||||
comments_1 = env.params.body["comments_1"]?.try &.as(String) || ""
|
||||
comments = [comments_0, comments_1]
|
||||
|
||||
captions_0 = env.params.body["captions_0"]?.try &.as(String) || ""
|
||||
captions_1 = env.params.body["captions_1"]?.try &.as(String) || ""
|
||||
|
||||
@ -32,7 +32,7 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
|
||||
"speed" => 1.0,
|
||||
"quality" => "hd720",
|
||||
"volume" => 100,
|
||||
"comments" => "youtube",
|
||||
"comments" => ["youtube", ""],
|
||||
"captions" => ["", "", ""],
|
||||
"dark_mode" => false,
|
||||
"thin_mode " => false,
|
||||
@ -43,6 +43,25 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
|
||||
}.to_json)
|
||||
|
||||
class Preferences
|
||||
module StringToArray
|
||||
def self.to_json(value : Array(String), json : JSON::Builder)
|
||||
return value.to_json
|
||||
end
|
||||
|
||||
def self.from_json(value : JSON::PullParser) : Array(String)
|
||||
begin
|
||||
result = [] of String
|
||||
value.read_array do
|
||||
result << value.read_string
|
||||
end
|
||||
rescue ex
|
||||
result = [value.read_string, ""]
|
||||
end
|
||||
|
||||
result
|
||||
end
|
||||
end
|
||||
|
||||
JSON.mapping({
|
||||
video_loop: Bool,
|
||||
autoplay: Bool,
|
||||
@ -50,8 +69,9 @@ class Preferences
|
||||
quality: String,
|
||||
volume: Int32,
|
||||
comments: {
|
||||
type: String,
|
||||
default: "youtube",
|
||||
type: Array(String),
|
||||
default: ["youtube", ""],
|
||||
converter: StringToArray,
|
||||
},
|
||||
captions: {
|
||||
type: Array(String),
|
||||
|
||||
@ -48,10 +48,19 @@ function update_value(element) {
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label for="comments">Pull comments from: </label>
|
||||
<select name="comments" id="comments">
|
||||
<% {"youtube", "reddit"}.each do |option| %>
|
||||
<option <% if user.preferences.comments == option %> selected <% end %>><%= option %></option>
|
||||
<label for="comments_0">Default comments: </label>
|
||||
<select name="comments_0" id="comments_0">
|
||||
<% {"", "youtube", "reddit"}.each do |option| %>
|
||||
<option <% if user.preferences.comments[0] == option %> selected <% end %>><%= option %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label for="comments_1">Fallback comments: </label>
|
||||
<select name="comments_1" id="comments_1">
|
||||
<% {"", "youtube", "reddit"}.each do |option| %>
|
||||
<option <% if user.preferences.comments[1] == option %> selected <% end %>><%= option %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -30,165 +30,6 @@
|
||||
<%= rendered "components/player" %>
|
||||
</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 {
|
||||
get_youtube_comments();
|
||||
}
|
||||
};
|
||||
|
||||
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");
|
||||
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 = document.getElementById("comments");
|
||||
comments.innerHTML = "";
|
||||
}
|
||||
};
|
||||
|
||||
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 && preferences.comments == "reddit" %>
|
||||
get_reddit_comments();
|
||||
<% else %>
|
||||
get_youtube_comments();
|
||||
<% end %>
|
||||
|
||||
</script>
|
||||
|
||||
<div class="h-box">
|
||||
<h1>
|
||||
<%= HTML.escape(video.title) %>
|
||||
@ -290,3 +131,184 @@ get_youtube_comments();
|
||||
</div>
|
||||
</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");
|
||||
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 {
|
||||
<% 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>
|
||||
Loading…
Reference in New Issue
Block a user