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,6 +374,24 @@ get "/watch" do |env|
     k2 = k2.join(", ")
   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)
     headers = HTTP::Headers{"User-Agent" => "web:invidio.us:v0.1.0 (by /u/omarroth)"}
     begin
@@ -386,13 +404,16 @@ get "/watch" do |env|
       reddit_thread = nil
       reddit_html = ""
     end
+  end
 
-  video.description = fill_links(video.description, "https", "www.youtube.com")
-  video.description = add_alt_links(video.description)
+  if !reddit_thread
+    halt env, status_code: 404
+  end
 
-  thumbnail = "https://i.ytimg.com/vi/#{id}/mqdefault.jpg"
-
-  templated "watch"
+  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|

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 id="comments">
+                <h3><center><i class="loading fas fa-spinner"></i></center></h3>
             </div>
         </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| %>