mirror of
https://gitea.invidious.io/iv-org/invidious.git
synced 2024-08-15 00:53:41 +00:00
commit
6c03992369
4 changed files with 190 additions and 48 deletions
|
@ -504,7 +504,7 @@ get "/api/v1/comments/:id" do |env|
|
|||
source ||= "youtube"
|
||||
|
||||
format = env.params.query["format"]?
|
||||
format ||= "html"
|
||||
format ||= "json"
|
||||
|
||||
if source == "youtube"
|
||||
client = make_client(YT_URL)
|
||||
|
@ -627,13 +627,20 @@ get "/api/v1/comments/:id" do |env|
|
|||
end
|
||||
|
||||
env.response.content_type = "application/json"
|
||||
if format == "json"
|
||||
next comments
|
||||
else
|
||||
comments = JSON.parse(comments)
|
||||
content_html = template_youtube_comments(comments)
|
||||
|
||||
{"content_html" => content_html}.to_json
|
||||
end
|
||||
elsif source == "reddit"
|
||||
client = make_client(REDDIT_URL)
|
||||
headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"}
|
||||
begin
|
||||
comments, reddit_thread = get_reddit_comments(id, client, headers)
|
||||
content_html = template_comments(comments)
|
||||
content_html = template_reddit_comments(comments)
|
||||
|
||||
content_html = fill_links(content_html, "https", "www.reddit.com")
|
||||
content_html = add_alt_links(content_html)
|
||||
|
@ -1664,6 +1671,9 @@ post "/preferences" do |env|
|
|||
volume = env.params.body["volume"]?.try &.as(String).to_i
|
||||
volume ||= 100
|
||||
|
||||
comments = env.params.body["comments"]?
|
||||
comments ||= "youtube"
|
||||
|
||||
dark_mode = env.params.body["dark_mode"]?.try &.as(String)
|
||||
dark_mode ||= "off"
|
||||
dark_mode = dark_mode == "on"
|
||||
|
@ -1688,6 +1698,7 @@ post "/preferences" do |env|
|
|||
"speed" => speed,
|
||||
"quality" => quality,
|
||||
"volume" => volume,
|
||||
"comments" => comments,
|
||||
"dark_mode" => dark_mode,
|
||||
"thin_mode" => thin_mode,
|
||||
"max_results" => max_results,
|
||||
|
|
|
@ -23,6 +23,7 @@ DEFAULT_USER_PREFERENCES = Preferences.from_json({
|
|||
"speed" => 1.0,
|
||||
"quality" => "hd720",
|
||||
"volume" => 100,
|
||||
"comments" => "youtube",
|
||||
"dark_mode" => false,
|
||||
"thin_mode " => false,
|
||||
"max_results" => 40,
|
||||
|
@ -157,6 +158,11 @@ class Preferences
|
|||
speed: Float32,
|
||||
quality: String,
|
||||
volume: Int32,
|
||||
comments: {
|
||||
type: String,
|
||||
nilable: true,
|
||||
default: "youtube",
|
||||
},
|
||||
dark_mode: Bool,
|
||||
thin_mode: {
|
||||
type: Bool,
|
||||
|
@ -500,7 +506,56 @@ def get_reddit_comments(id, client, headers)
|
|||
return comments, thread
|
||||
end
|
||||
|
||||
def template_comments(root)
|
||||
def template_youtube_comments(comments)
|
||||
html = ""
|
||||
|
||||
root = comments["comments"].as_a
|
||||
root.each do |child|
|
||||
if child["replies"]?
|
||||
replies_html = <<-END_HTML
|
||||
<div id="replies" class="pure-g">
|
||||
<div class="pure-u-md-1-24"></div>
|
||||
<div class="pure-u-md-23-24">
|
||||
<p>
|
||||
<a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
|
||||
onclick="load_comments(this)">View #{child["replies"]["replyCount"]} replies</a>
|
||||
</p>
|
||||
</div>
|
||||
END_HTML
|
||||
end
|
||||
|
||||
html += <<-END_HTML
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1">
|
||||
<p>
|
||||
<a href="javascript:void(0)" onclick="toggle(this)">[ - ]</a> #{child["likeCount"]} <b>#{child["author"]}</b>
|
||||
</p>
|
||||
<div>
|
||||
#{child["content"]}
|
||||
#{replies_html}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
END_HTML
|
||||
end
|
||||
|
||||
if comments["continuation"]?
|
||||
html += <<-END_HTML
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1">
|
||||
<p>
|
||||
<a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
|
||||
onclick="load_comments(this)">Load more</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
END_HTML
|
||||
end
|
||||
|
||||
return html
|
||||
end
|
||||
|
||||
def template_reddit_comments(root)
|
||||
html = ""
|
||||
root.each do |child|
|
||||
if child.data.is_a?(RedditComment)
|
||||
|
@ -512,7 +567,7 @@ def template_comments(root)
|
|||
replies_html = ""
|
||||
if child.replies.is_a?(RedditThing)
|
||||
replies = child.replies.as(RedditThing)
|
||||
replies_html = template_comments(replies.data.as(RedditListing).children)
|
||||
replies_html = template_reddit_comments(replies.data.as(RedditListing).children)
|
||||
end
|
||||
|
||||
content = <<-END_HTML
|
||||
|
|
|
@ -47,6 +47,15 @@ function update_value(element) {
|
|||
<span class="pure-form-message-inline" id="volume-value"><%= user.preferences.volume %></span>
|
||||
</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>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<legend>Visual preferences</legend>
|
||||
<div class="pure-control-group">
|
||||
<label for="dark_mode">Dark mode: </label>
|
||||
|
|
|
@ -124,28 +124,6 @@ player.offset({
|
|||
end: <%= video_end %>
|
||||
});
|
||||
|
||||
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 = '';
|
||||
}
|
||||
};
|
||||
|
||||
<% if !listen %>
|
||||
var currentSources = player.currentSources();
|
||||
for ( var i = 0; i < currentSources.length; i++ ) {
|
||||
|
@ -158,12 +136,74 @@ for ( var i = 0; i < currentSources.length; i++ ) {
|
|||
player.src(currentSources);
|
||||
<% end %>
|
||||
|
||||
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 timeout(ms, promise) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
setTimeout(function() {
|
||||
reject(new Error("timeout"));
|
||||
}, ms);
|
||||
promise.then(resolve, reject);
|
||||
});
|
||||
}
|
||||
|
||||
function load_comments(target) {
|
||||
var continuation = target.getAttribute("data-continuation");
|
||||
|
||||
var body = target.parentNode.parentNode;
|
||||
var fallback = body.innerHTML;
|
||||
body.innerHTML =
|
||||
'<h3><center><i class="loading fas fa-spinner"></i></center></h3>';
|
||||
|
||||
var url =
|
||||
"/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
|
||||
timeout(5000, fetch(url))
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(
|
||||
function(jsonResponse) {
|
||||
body.innerHTML = jsonResponse.content_html;
|
||||
},
|
||||
function(error) {
|
||||
body.innerHTML = fallback;
|
||||
console.log(response);
|
||||
}
|
||||
)
|
||||
.catch(function(error) {
|
||||
body.innerHTML = fallback;
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
function get_reddit_comments() {
|
||||
fetch("/api/v1/comments/<%= video.id %>?source=reddit")
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(jsonResponse) {
|
||||
comments = document.getElementById('comments');
|
||||
.then(
|
||||
function(jsonResponse) {
|
||||
comments = document.getElementById("comments");
|
||||
comments.innerHTML = `
|
||||
<div>
|
||||
<h3>
|
||||
|
@ -175,25 +215,52 @@ fetch("/api/v1/comments/<%= video.id %>?source=reddit")
|
|||
</b>
|
||||
</div>
|
||||
<div>{content_html}</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-left:1em; margin-right:1em;">`.supplant({
|
||||
title: jsonResponse.title,
|
||||
permalink: jsonResponse.permalink,
|
||||
content_html: jsonResponse.content_html
|
||||
})
|
||||
}, function(response){
|
||||
comments.innerHTML = "";
|
||||
});
|
||||
|
||||
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;
|
||||
},
|
||||
function(response) {
|
||||
get_youtube_comments();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function get_youtube_comments() {
|
||||
fetch("/api/v1/comments/<%= video.id %>?format=html")
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(
|
||||
function(jsonResponse) {
|
||||
comments = document.getElementById("comments");
|
||||
comments.innerHTML = `
|
||||
<div>{content_html}</div>
|
||||
<hr style="margin-left:1em; margin-right:1em;">`.supplant({
|
||||
content_html: jsonResponse.content_html
|
||||
});
|
||||
},
|
||||
function(response) {
|
||||
comments.innerHTML = "";
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
|
|
Loading…
Reference in a new issue