Split Reddit comments into separate request

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);
+  }
+}

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"]

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| %>