From c7a46cd3d54c82a501353141b5cba36fcd917374 Mon Sep 17 00:00:00 2001 From: Omar Roth <omarroth@hotmail.com> Date: Fri, 20 Jul 2018 14:36:23 -0500 Subject: [PATCH] Split Reddit comments into separate request --- assets/css/default.css | 13 +++++++++ src/invidious.cr | 47 +++++++++++++++++++++--------- src/invidious/views/watch.ecr | 54 ++++++++++++++++++++++++----------- 3 files changed, 84 insertions(+), 30 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 6d776074..7908025a 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -12,3 +12,16 @@ div { overflow-wrap: break-word; word-wrap: break-word; } + +.loading { + animation: spin 2s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/invidious.cr b/src/invidious.cr index 02210e84..de86fe17 100644 --- a/src/invidious.cr +++ b/src/invidious.cr @@ -374,19 +374,6 @@ get "/watch" do |env| k2 = k2.join(", ") end - reddit_client = make_client(REDDIT_URL) - headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"} - begin - reddit_comments, reddit_thread = get_reddit_comments(id, reddit_client, headers) - reddit_html = template_comments(reddit_comments) - - reddit_html = fill_links(reddit_html, "https", "www.reddit.com") - reddit_html = add_alt_links(reddit_html) - rescue ex - reddit_thread = nil - reddit_html = "" - end - video.description = fill_links(video.description, "https", "www.youtube.com") video.description = add_alt_links(video.description) @@ -395,6 +382,40 @@ get "/watch" do |env| 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) + headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"} + begin + reddit_comments, reddit_thread = get_reddit_comments(id, reddit_client, headers) + reddit_html = template_comments(reddit_comments) + + reddit_html = fill_links(reddit_html, "https", "www.reddit.com") + reddit_html = add_alt_links(reddit_html) + rescue ex + reddit_thread = nil + reddit_html = "" + end + end + + if !reddit_thread + halt env, status_code: 404 + end + + env.response.content_type = "application/json" + {"title" => reddit_thread.title, + "permalink" => reddit_thread.permalink, + "content_html" => reddit_html}.to_json +end + get "/embed/:id" do |env| if env.params.url["id"]? id = env.params.url["id"] diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 3fb7ecda..f0891dd9 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -133,6 +133,41 @@ for ( var i = 0; i < currentSources.length; i++ ) { player.src(currentSources); <% 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> <div class="h-box"> @@ -207,26 +242,11 @@ player.src(currentSources); <%= video.description %> </div> <hr style="margin-left:1em; margin-right:1em;"> - <% if reddit_thread && !reddit_html.empty? %> - <div id="Comments"> - <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 id="comments"> + <h3><center><i class="loading fas fa-spinner"></i></center></h3> </div> - <hr style="margin-left:1em; margin-right:1em;"> - <% end %> </div> </div> - <div class="pure-u-1 pure-u-md-1-5"> <div class="h-box"> <% rvs.each do |rv| %>