Merge pull request #24 from omarroth/split-comments

Split Reddit comments into separate request
This commit is contained in:
Omar Roth 2018-07-20 14:41:29 -05:00 committed by GitHub
commit 8c121528e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 30 deletions

View File

@ -12,3 +12,16 @@ div {
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
} }
.loading {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@ -374,6 +374,24 @@ get "/watch" do |env|
k2 = k2.join(", ") k2 = k2.join(", ")
end end
video.description = fill_links(video.description, "https", "www.youtube.com")
video.description = add_alt_links(video.description)
thumbnail = "https://i.ytimg.com/vi/#{id}/mqdefault.jpg"
templated "watch"
end
get "/comments/:id" do |env|
id = env.params.url["id"]
source = env.params.query["source"]?
source ||= "youtube"
format = env.params.query["format"]?
format ||= "html"
if source == "reddit"
reddit_client = make_client(REDDIT_URL) reddit_client = make_client(REDDIT_URL)
headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"} headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"}
begin begin
@ -386,13 +404,16 @@ get "/watch" do |env|
reddit_thread = nil reddit_thread = nil
reddit_html = "" reddit_html = ""
end end
end
video.description = fill_links(video.description, "https", "www.youtube.com") if !reddit_thread
video.description = add_alt_links(video.description) halt env, status_code: 404
end
thumbnail = "https://i.ytimg.com/vi/#{id}/mqdefault.jpg" env.response.content_type = "application/json"
{"title" => reddit_thread.title,
templated "watch" "permalink" => reddit_thread.permalink,
"content_html" => reddit_html}.to_json
end end
get "/embed/:id" do |env| get "/embed/:id" do |env|

View File

@ -133,6 +133,41 @@ for ( var i = 0; i < currentSources.length; i++ ) {
player.src(currentSources); player.src(currentSources);
<% end %> <% end %>
fetch("/comments/<%= video.id %>?source=reddit")
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
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>{content_html}</div>
</div>
<hr style="margin-left:1em; margin-right:1em;">`.supplant({
title: jsonResponse.title,
permalink: jsonResponse.permalink,
content_html: jsonResponse.content_html
})
});
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;
}
);
};
</script> </script>
<div class="h-box"> <div class="h-box">
@ -207,26 +242,11 @@ player.src(currentSources);
<%= video.description %> <%= video.description %>
</div> </div>
<hr style="margin-left:1em; margin-right:1em;"> <hr style="margin-left:1em; margin-right:1em;">
<% if reddit_thread && !reddit_html.empty? %> <div id="comments">
<div id="Comments"> <h3><center><i class="loading fas fa-spinner"></i></center></h3>
<div>
<h3>
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a>
<%= reddit_thread.title %>
</h3>
<b>
<a target="_blank" href="https://reddit.com<%= reddit_thread.permalink %>">View more comments on Reddit</a>
</b>
</div>
<div>
<%= reddit_html %>
</div> </div>
</div> </div>
<hr style="margin-left:1em; margin-right:1em;">
<% end %>
</div> </div>
</div>
<div class="pure-u-1 pure-u-md-1-5"> <div class="pure-u-1 pure-u-md-1-5">
<div class="h-box"> <div class="h-box">
<% rvs.each do |rv| %> <% rvs.each do |rv| %>