From 17bc9349a8555f7b261b714333500501911704e4 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:02:07 -0400
Subject: [PATCH 1/6] Allow viewing more comments when js is disabled

---
 src/invidious/channels/community.cr        |  2 +-
 src/invidious/comments/youtube.cr          |  7 ++--
 src/invidious/frontend/comments_youtube.cr | 15 +++++--
 src/invidious/routes/api/v1/channels.cr    |  3 +-
 src/invidious/routes/channels.cr           |  3 +-
 src/invidious/routes/watch.cr              | 49 ++++++++++++++++++++++
 src/invidious/routing.cr                   |  2 +
 src/invidious/views/comments_no_js.ecr     |  9 ++++
 src/invidious/views/community.ecr          |  3 +-
 src/invidious/views/post.ecr               |  3 +-
 src/invidious/views/watch.ecr              |  1 +
 11 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 src/invidious/views/comments_no_js.ecr

diff --git a/src/invidious/channels/community.cr b/src/invidious/channels/community.cr
index 49ffd990..bdfbc27c 100644
--- a/src/invidious/channels/community.cr
+++ b/src/invidious/channels/community.cr
@@ -279,7 +279,7 @@ def extract_channel_community(items, *, ucid, locale, format, thin_mode, is_sing
 
   if format == "html"
     response = JSON.parse(response)
-    content_html = IV::Frontend::Comments.template_youtube(response, locale, thin_mode)
+    content_html = IV::Frontend::Comments.template_youtube(response, locale, thin_mode, ucid, "community")
 
     response = JSON.build do |json|
       json.object do
diff --git a/src/invidious/comments/youtube.cr b/src/invidious/comments/youtube.cr
index 0716fcde..ec5adf65 100644
--- a/src/invidious/comments/youtube.cr
+++ b/src/invidious/comments/youtube.cr
@@ -57,7 +57,7 @@ module Invidious::Comments
     return initial_data
   end
 
-  def parse_youtube(id, response, format, locale, thin_mode, sort_by = "top", is_post = false)
+  def parse_youtube(id, response, format, locale, thin_mode, type="video", sort_by = "top")
     contents = nil
 
     if on_response_received_endpoints = response["onResponseReceivedEndpoints"]?
@@ -115,7 +115,7 @@ module Invidious::Comments
           json.field "commentCount", comment_count
         end
 
-        if is_post
+        if type == "post"
           json.field "postId", id
         else
           json.field "videoId", id
@@ -302,7 +302,8 @@ module Invidious::Comments
 
     if format == "html"
       response = JSON.parse(response)
-      content_html = Frontend::Comments.template_youtube(response, locale, thin_mode)
+      content_html = Frontend::Comments.template_youtube(response, locale, thin_mode, id, type)
+
       response = JSON.build do |json|
         json.object do
           json.field "contentHtml", content_html
diff --git a/src/invidious/frontend/comments_youtube.cr b/src/invidious/frontend/comments_youtube.cr
index a0e1d783..fb9b3223 100644
--- a/src/invidious/frontend/comments_youtube.cr
+++ b/src/invidious/frontend/comments_youtube.cr
@@ -1,7 +1,7 @@
 module Invidious::Frontend::Comments
   extend self
 
-  def template_youtube(comments, locale, thin_mode, is_replies = false)
+  def template_youtube(comments, locale, thin_mode, id, type="video", is_replies = false)
     String.build do |html|
       root = comments["comments"].as_a
       root.each do |child|
@@ -13,11 +13,15 @@ module Invidious::Frontend::Comments
           )
 
           replies_html = <<-END_HTML
-          <div id="replies" class="pure-g">
+          <div class="pure-g replies">
             <div class="pure-u-1-24"></div>
             <div class="pure-u-23-24">
               <p>
-                <a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
+                <noscript>
+                  <!-- We open the replies/new comments in a new tab. We could also be using an iframe for comments when js is disabled but that would mean duplicate code.-->
+                  <a target="_blank" href="/comment_viewer?continuation=#{child["replies"]["continuation"]}&id=#{id}&type=#{type}">#{replies_count_text}</a>
+                </noscript>
+                <a class="jsOnly" href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
                   data-onclick="get_youtube_replies" data-load-replies>#{replies_count_text}</a>
               </p>
             </div>
@@ -196,7 +200,10 @@ module Invidious::Frontend::Comments
         <div class="pure-g">
           <div class="pure-u-1">
             <p>
-              <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
+              <noscript>
+                <a href="/comment_viewer?continuation=#{comments["continuation"]}&id=#{id}&type=#{type}" target="_blank">#{translate(locale, "Load more")}</a>
+              </noscript>
+              <a class="jsOnly" href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
                 data-onclick="get_youtube_replies" data-load-more #{"data-load-replies" if is_replies}>#{translate(locale, "Load more")}</a>
             </p>
           </div>
diff --git a/src/invidious/routes/api/v1/channels.cr b/src/invidious/routes/api/v1/channels.cr
index 2da76134..72f6727d 100644
--- a/src/invidious/routes/api/v1/channels.cr
+++ b/src/invidious/routes/api/v1/channels.cr
@@ -440,7 +440,8 @@ module Invidious::Routes::API::V1::Channels
     else
       comments = YoutubeAPI.browse(continuation: continuation)
     end
-    return Comments.parse_youtube(id, comments, format, locale, thin_mode, is_post: true)
+
+    return Comments.parse_youtube(id, comments, format, locale, thin_mode, "post")
   end
 
   def self.channels(env)
diff --git a/src/invidious/routes/channels.cr b/src/invidious/routes/channels.cr
index 952098e0..c43d6fb7 100644
--- a/src/invidious/routes/channels.cr
+++ b/src/invidious/routes/channels.cr
@@ -268,7 +268,8 @@ module Invidious::Routes::Channels
 
     if nojs
       comments = Comments.fetch_community_post_comments(ucid, id)
-      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, is_post: true))["contentHtml"]
+
+      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, "post"))["contentHtml"]
     end
     templated "post"
   end
diff --git a/src/invidious/routes/watch.cr b/src/invidious/routes/watch.cr
index aabe8dfc..c11b0108 100644
--- a/src/invidious/routes/watch.cr
+++ b/src/invidious/routes/watch.cr
@@ -332,4 +332,53 @@ module Invidious::Routes::Watch
       return error_template(400, "Invalid label or itag")
     end
   end
+
+  # used for fetching replies/ fetching more comments when js is disabled.
+  def self.comments(env)
+    locale = env.get("preferences").as(Preferences).locale
+    region = env.params.query["region"]?
+
+    id = env.params.query["id"]
+    continuation = env.params.query["continuation"]?
+
+    source = env.params.query["source"]? || "youtube"
+
+    thin_mode = env.params.query["thin_mode"]? == "true"
+    comment_type = env.params.query["type"]? || "video"
+
+    parent_comment = nil
+    if comment_type == "community"
+      # community posts
+      comment_html = JSON.parse(fetch_channel_community(id, continuation, locale, "html", thin_mode))["contentHtml"]
+    elsif comment_type == "post"
+      # replies to a community post
+      ucid = env.params.query["ucid"]?
+      if ucid.nil?
+        response = YoutubeAPI.resolve_url("https://www.youtube.com/post/#{id}")
+        return error_json(400, "Invalid post ID") if response["error"]?
+        ucid = response.dig("endpoint", "browseEndpoint", "browseId").as_s
+      else
+        ucid = ucid.to_s
+      end
+      case continuation
+      when nil, ""
+        comments = Comments.fetch_community_post_comments(ucid, id)
+      else
+        comments = YoutubeAPI.browse(continuation: continuation)
+      end
+      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, "post"))["contentHtml"]
+    else
+      # video comments
+      if source == "youtube"
+        comment_html = JSON.parse(Comments.fetch_youtube(id, continuation, "html", locale, thin_mode, region))["contentHtml"]
+      elsif source == "reddit"
+        comments, reddit_thread = Comments.fetch_reddit(id)
+        comment_html = Frontend::Comments.template_reddit(comments, locale)
+
+        comment_html = Comments.fill_links(comment_html, "https", "www.reddit.com")
+        comment_html = Comments.replace_links(comment_html)
+      end
+    end
+    templated "comments_no_js"
+  end
 end
diff --git a/src/invidious/routing.cr b/src/invidious/routing.cr
index ba05da19..f16d8a4c 100644
--- a/src/invidious/routing.cr
+++ b/src/invidious/routing.cr
@@ -170,6 +170,8 @@ module Invidious::Routing
 
     get "/embed/", Routes::Embed, :redirect
     get "/embed/:id", Routes::Embed, :show
+    # currently only for fetching continuations when js is disabled.
+    get "/comment_viewer", Routes::Watch, :comments
   end
 
   def register_yt_playlist_routes
diff --git a/src/invidious/views/comments_no_js.ecr b/src/invidious/views/comments_no_js.ecr
new file mode 100644
index 00000000..f9c25432
--- /dev/null
+++ b/src/invidious/views/comments_no_js.ecr
@@ -0,0 +1,9 @@
+<% content_for "header" do %>
+<title>Invidious</title>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
+<% end %>
+
+<!-- basic comments page for people with js disabled. -->
+<div class="comments post-comments">
+    <%= comment_html %>
+</div>
\ No newline at end of file
diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr
index d2a305d3..d79580cd 100644
--- a/src/invidious/views/community.ecr
+++ b/src/invidious/views/community.ecr
@@ -13,6 +13,7 @@
 <% content_for "header" do %>
 <link rel="alternate" href="<%= youtube_url %>">
 <title><%= author %> - Invidious</title>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <%= rendered "components/channel_info" %>
@@ -27,7 +28,7 @@
     </div>
 <% else %>
     <div class="h-box pure-g comments" id="comments">
-        <%= IV::Frontend::Comments.template_youtube(items.not_nil!, locale, thin_mode) %>
+        <%= IV::Frontend::Comments.template_youtube(items.not_nil!, locale, thin_mode, ucid, "community") %>
     </div>
 <% end %>
 
diff --git a/src/invidious/views/post.ecr b/src/invidious/views/post.ecr
index fb03a44c..d4133ffe 100644
--- a/src/invidious/views/post.ecr
+++ b/src/invidious/views/post.ecr
@@ -1,10 +1,11 @@
 <% content_for "header" do %>
 <title>Invidious</title>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <div>
     <div id="post" class="comments post-comments">
-        <%= IV::Frontend::Comments.template_youtube(post_response.not_nil!, locale, thin_mode) %>
+        <%= IV::Frontend::Comments.template_youtube(post_response.not_nil!, locale, thin_mode, id, "post") %>
     </div>
 
     <% if nojs %>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 45c58a16..54922ffd 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -42,6 +42,7 @@ we're going to need to do it here in order to allow for translations.
     content: "<%= translate(locale, "Show less") %>"
 }
 </style>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <script id="video_data" type="application/json">

From 51bb18ff66da1a3a8f7914eeb7e6f7d0646af8c7 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:46:23 -0400
Subject: [PATCH 2/6] Fix YT link for post comments

---
 src/invidious/comments/youtube.cr          |  6 +++++-
 src/invidious/frontend/comments_youtube.cr | 11 ++++++++---
 src/invidious/routes/api/v1/channels.cr    |  3 +--
 src/invidious/routes/channels.cr           |  3 +--
 src/invidious/routes/watch.cr              |  2 +-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/invidious/comments/youtube.cr b/src/invidious/comments/youtube.cr
index ec5adf65..857c0027 100644
--- a/src/invidious/comments/youtube.cr
+++ b/src/invidious/comments/youtube.cr
@@ -57,7 +57,7 @@ module Invidious::Comments
     return initial_data
   end
 
-  def parse_youtube(id, response, format, locale, thin_mode, type="video", sort_by = "top")
+  def parse_youtube(id, response, format, locale, thin_mode, sort_by = "top", type = "video", ucid = nil)
     contents = nil
 
     if on_response_received_endpoints = response["onResponseReceivedEndpoints"]?
@@ -115,6 +115,10 @@ module Invidious::Comments
           json.field "commentCount", comment_count
         end
 
+        if !ucid.nil?
+          json.field "authorId", ucid
+        end
+
         if type == "post"
           json.field "postId", id
         else
diff --git a/src/invidious/frontend/comments_youtube.cr b/src/invidious/frontend/comments_youtube.cr
index fb9b3223..08def85c 100644
--- a/src/invidious/frontend/comments_youtube.cr
+++ b/src/invidious/frontend/comments_youtube.cr
@@ -1,7 +1,7 @@
 module Invidious::Frontend::Comments
   extend self
 
-  def template_youtube(comments, locale, thin_mode, id, type="video", is_replies = false)
+  def template_youtube(comments, locale, thin_mode, id, type = "video", is_replies = false)
     String.build do |html|
       root = comments["comments"].as_a
       root.each do |child|
@@ -27,7 +27,7 @@ module Invidious::Frontend::Comments
             </div>
           </div>
           END_HTML
-        elsif comments["authorId"]? && !comments["singlePost"]?
+        elsif comments["authorId"]? && !comments["singlePost"]? && type != "post"
           # for posts we should display a link to the post
           replies_count_text = translate_count(locale,
             "comments_view_x_replies",
@@ -151,7 +151,12 @@ module Invidious::Frontend::Comments
           |
         END_HTML
 
-        if comments["videoId"]?
+        if type == "post" && !comments["singlePost"]?
+          html << <<-END_HTML
+            <a href="https://www.youtube.com/channel/#{comments["authorId"]}/community?lb=#{id}&lc=#{child["commentId"]}" title="#{translate(locale, "YouTube comment permalink")}">[YT]</a>
+            |
+          END_HTML
+        elsif comments["videoId"]?
           html << <<-END_HTML
             <a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=#{comments["videoId"]}&lc=#{child["commentId"]}" title="#{translate(locale, "YouTube comment permalink")}">[YT]</a>
             |
diff --git a/src/invidious/routes/api/v1/channels.cr b/src/invidious/routes/api/v1/channels.cr
index 72f6727d..0d65dd50 100644
--- a/src/invidious/routes/api/v1/channels.cr
+++ b/src/invidious/routes/api/v1/channels.cr
@@ -440,8 +440,7 @@ module Invidious::Routes::API::V1::Channels
     else
       comments = YoutubeAPI.browse(continuation: continuation)
     end
-
-    return Comments.parse_youtube(id, comments, format, locale, thin_mode, "post")
+    return Comments.parse_youtube(id, comments, format, locale, thin_mode, type: "post", ucid: ucid)
   end
 
   def self.channels(env)
diff --git a/src/invidious/routes/channels.cr b/src/invidious/routes/channels.cr
index c43d6fb7..8e827899 100644
--- a/src/invidious/routes/channels.cr
+++ b/src/invidious/routes/channels.cr
@@ -268,8 +268,7 @@ module Invidious::Routes::Channels
 
     if nojs
       comments = Comments.fetch_community_post_comments(ucid, id)
-
-      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, "post"))["contentHtml"]
+      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, type: "post", ucid: ucid))["contentHtml"]
     end
     templated "post"
   end
diff --git a/src/invidious/routes/watch.cr b/src/invidious/routes/watch.cr
index c11b0108..ad64f53f 100644
--- a/src/invidious/routes/watch.cr
+++ b/src/invidious/routes/watch.cr
@@ -366,7 +366,7 @@ module Invidious::Routes::Watch
       else
         comments = YoutubeAPI.browse(continuation: continuation)
       end
-      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, "post"))["contentHtml"]
+      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, type: "post", ucid: ucid))["contentHtml"]
     else
       # video comments
       if source == "youtube"

From 003b0fc54ca1425ebce1c433d5fb70c61e3d8de5 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Sun, 22 Oct 2023 20:51:14 -0400
Subject: [PATCH 3/6] Use javascript to replace reply links, simplify
 community.js

---
 assets/js/comments.js                      | 10 ++--
 assets/js/community.js                     | 63 ++++------------------
 src/invidious/frontend/comments_youtube.cr | 11 +---
 src/invidious/routes/api/v1/channels.cr    | 10 +++-
 4 files changed, 29 insertions(+), 65 deletions(-)

diff --git a/assets/js/comments.js b/assets/js/comments.js
index 35ffa96e..a26f1f7b 100644
--- a/assets/js/comments.js
+++ b/assets/js/comments.js
@@ -10,6 +10,10 @@ String.prototype.supplant = function (o) {
     });
 };
 
+function updateReplyLinkHtml(contentHtml) {
+    return contentHtml.replace(/target="_blank" href="\/comment_viewer\?[^"]*"/g, 'href="javascript:void(0)"');
+};
+
 function toggle_comments(event) {
     var target = event.target;
     var body = target.parentNode.parentNode.parentNode.children[1];
@@ -93,7 +97,7 @@ function get_youtube_comments() {
             <div>{contentHtml}</div> \
             <hr>'
             commentInnerHtml = commentInnerHtml.supplant({
-                contentHtml: response.contentHtml,
+                contentHtml: updateReplyLinkHtml(response.contentHtml),
                 redditComments: video_data.reddit_comments_text,
                 commentsText: video_data.comments_text.supplant({
                     // toLocaleString correctly splits number with local thousands separator. e.g.:
@@ -142,7 +146,7 @@ function get_youtube_replies(target, load_more, load_replies) {
             if (load_more) {
                 body = body.parentNode.parentNode;
                 body.removeChild(body.lastElementChild);
-                body.insertAdjacentHTML('beforeend', response.contentHtml);
+                body.insertAdjacentHTML('beforeend', updateReplyLinkHtml(response.contentHtml));
             } else {
                 body.removeChild(body.lastElementChild);
 
@@ -157,7 +161,7 @@ function get_youtube_replies(target, load_more, load_replies) {
                 a.textContent = video_data.hide_replies_text;
 
                 var div = document.createElement('div');
-                div.innerHTML = response.contentHtml;
+                div.innerHTML = updateReplyLinkHtml(response.contentHtml);
 
                 body.appendChild(p);
                 body.appendChild(div);
diff --git a/assets/js/community.js b/assets/js/community.js
index 32fe4ebc..4c708090 100644
--- a/assets/js/community.js
+++ b/assets/js/community.js
@@ -1,37 +1,16 @@
 'use strict';
 var community_data = JSON.parse(document.getElementById('community_data').textContent);
 
-function hide_youtube_replies(event) {
-    var target = event.target;
+// first page of community posts are loaded without javascript so we need to update the Load more button
+var initialLoadMore = document.querySelector('a[data-onclick="get_youtube_replies"]');
+initialLoadMore.setAttribute('href', 'javascript:void(0);');
+initialLoadMore.removeAttribute('target');
 
-    var sub_text = target.getAttribute('data-inner-text');
-    var inner_text = target.getAttribute('data-sub-text');
+function updateReplyLinkHtml(contentHtml) {
+    return contentHtml.replace(/target="_blank" href="\/comment_viewer\?[^"]*"/g, 'href="javascript:void(0)"');
+};
 
-    var body = target.parentNode.parentNode.children[1];
-    body.style.display = 'none';
-
-    target.innerHTML = sub_text;
-    target.onclick = show_youtube_replies;
-    target.setAttribute('data-inner-text', inner_text);
-    target.setAttribute('data-sub-text', sub_text);
-}
-
-function show_youtube_replies(event) {
-    var target = event.target;
-
-    var sub_text = target.getAttribute('data-inner-text');
-    var inner_text = target.getAttribute('data-sub-text');
-
-    var body = target.parentNode.parentNode.children[1];
-    body.style.display = '';
-
-    target.innerHTML = sub_text;
-    target.onclick = hide_youtube_replies;
-    target.setAttribute('data-inner-text', inner_text);
-    target.setAttribute('data-sub-text', sub_text);
-}
-
-function get_youtube_replies(target, load_more) {
+function get_youtube_replies(target) {
     var continuation = target.getAttribute('data-continuation');
 
     var body = target.parentNode.parentNode;
@@ -47,29 +26,9 @@ function get_youtube_replies(target, load_more) {
 
     helpers.xhr('GET', url, {}, {
         on200: function (response) {
-            if (load_more) {
-                body = body.parentNode.parentNode;
-                body.removeChild(body.lastElementChild);
-                body.innerHTML += response.contentHtml;
-            } else {
-                body.removeChild(body.lastElementChild);
-
-                var p = document.createElement('p');
-                var a = document.createElement('a');
-                p.appendChild(a);
-
-                a.href = 'javascript:void(0)';
-                a.onclick = hide_youtube_replies;
-                a.setAttribute('data-sub-text', community_data.hide_replies_text);
-                a.setAttribute('data-inner-text', community_data.show_replies_text);
-                a.textContent = community_data.hide_replies_text;
-
-                var div = document.createElement('div');
-                div.innerHTML = response.contentHtml;
-
-                body.appendChild(p);
-                body.appendChild(div);
-            }
+            body = body.parentNode.parentNode;
+            body.removeChild(body.lastElementChild);
+            body.insertAdjacentHTML('beforeend', updateReplyLinkHtml(response.contentHtml));
         },
         onNon200: function (xhr) {
             body.innerHTML = fallback;
diff --git a/src/invidious/frontend/comments_youtube.cr b/src/invidious/frontend/comments_youtube.cr
index 08def85c..2d337d9b 100644
--- a/src/invidious/frontend/comments_youtube.cr
+++ b/src/invidious/frontend/comments_youtube.cr
@@ -17,11 +17,7 @@ module Invidious::Frontend::Comments
             <div class="pure-u-1-24"></div>
             <div class="pure-u-23-24">
               <p>
-                <noscript>
-                  <!-- We open the replies/new comments in a new tab. We could also be using an iframe for comments when js is disabled but that would mean duplicate code.-->
-                  <a target="_blank" href="/comment_viewer?continuation=#{child["replies"]["continuation"]}&id=#{id}&type=#{type}">#{replies_count_text}</a>
-                </noscript>
-                <a class="jsOnly" href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
+                <a target="_blank" href="/comment_viewer?continuation=#{child["replies"]["continuation"]}&id=#{id}&type=#{type}" data-continuation="#{child["replies"]["continuation"]}"
                   data-onclick="get_youtube_replies" data-load-replies>#{replies_count_text}</a>
               </p>
             </div>
@@ -205,10 +201,7 @@ module Invidious::Frontend::Comments
         <div class="pure-g">
           <div class="pure-u-1">
             <p>
-              <noscript>
-                <a href="/comment_viewer?continuation=#{comments["continuation"]}&id=#{id}&type=#{type}" target="_blank">#{translate(locale, "Load more")}</a>
-              </noscript>
-              <a class="jsOnly" href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
+              <a target="_blank" href="/comment_viewer?continuation=#{comments["continuation"]}&id=#{id}&type=#{type}" data-continuation="#{comments["continuation"]}"
                 data-onclick="get_youtube_replies" data-load-more #{"data-load-replies" if is_replies}>#{translate(locale, "Load more")}</a>
             </p>
           </div>
diff --git a/src/invidious/routes/api/v1/channels.cr b/src/invidious/routes/api/v1/channels.cr
index 0d65dd50..9245cdd4 100644
--- a/src/invidious/routes/api/v1/channels.cr
+++ b/src/invidious/routes/api/v1/channels.cr
@@ -432,10 +432,18 @@ module Invidious::Routes::API::V1::Channels
     format ||= "json"
 
     continuation = env.params.query["continuation"]?
+    ucid = env.params.query["ucid"]?
+
+    if ucid.nil?
+      response = YoutubeAPI.resolve_url("https://www.youtube.com/post/#{id}")
+      return error_json(400, "Invalid post ID") if response["error"]?
+      ucid = response.dig("endpoint", "browseEndpoint", "browseId").as_s
+    else
+      ucid = ucid.to_s
+    end
 
     case continuation
     when nil, ""
-      ucid = env.params.query["ucid"]
       comments = Comments.fetch_community_post_comments(ucid, id)
     else
       comments = YoutubeAPI.browse(continuation: continuation)

From 6d654e1bdff26f02cfc55a21ee85d2a01ce9a17b Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 28 Nov 2023 18:14:39 -0500
Subject: [PATCH 4/6] use dom manipulation instead of regex to update reply
 links

---
 assets/js/comments.js  | 19 +++++++++++++------
 assets/js/community.js | 13 +++++++++----
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/assets/js/comments.js b/assets/js/comments.js
index a26f1f7b..86ec1543 100644
--- a/assets/js/comments.js
+++ b/assets/js/comments.js
@@ -10,9 +10,13 @@ String.prototype.supplant = function (o) {
     });
 };
 
-function updateReplyLinkHtml(contentHtml) {
-    return contentHtml.replace(/target="_blank" href="\/comment_viewer\?[^"]*"/g, 'href="javascript:void(0)"');
-};
+function updateReplyLinks() {
+    document.querySelectorAll("a[href^='/comment_viewer']").forEach(function (replyLink) {
+        replyLink.setAttribute("href", "javascript:void(0)");
+        replyLink.removeAttribute("target");
+    });
+}
+updateReplyLinks()
 
 function toggle_comments(event) {
     var target = event.target;
@@ -97,7 +101,7 @@ function get_youtube_comments() {
             <div>{contentHtml}</div> \
             <hr>'
             commentInnerHtml = commentInnerHtml.supplant({
-                contentHtml: updateReplyLinkHtml(response.contentHtml),
+                contentHtml: response.contentHtml,
                 redditComments: video_data.reddit_comments_text,
                 commentsText: video_data.comments_text.supplant({
                     // toLocaleString correctly splits number with local thousands separator. e.g.:
@@ -108,6 +112,7 @@ function get_youtube_comments() {
                 })
             });
             comments.innerHTML = commentInnerHtml;
+            updateReplyLinks()
             comments.children[0].children[0].children[0].onclick = toggle_comments;
             if (video_data.support_reddit) {
                 comments.children[0].children[1].children[0].onclick = swap_comments;
@@ -146,7 +151,8 @@ function get_youtube_replies(target, load_more, load_replies) {
             if (load_more) {
                 body = body.parentNode.parentNode;
                 body.removeChild(body.lastElementChild);
-                body.insertAdjacentHTML('beforeend', updateReplyLinkHtml(response.contentHtml));
+                body.insertAdjacentHTML('beforeend', response.contentHtml);
+                updateReplyLinks()
             } else {
                 body.removeChild(body.lastElementChild);
 
@@ -161,10 +167,11 @@ function get_youtube_replies(target, load_more, load_replies) {
                 a.textContent = video_data.hide_replies_text;
 
                 var div = document.createElement('div');
-                div.innerHTML = updateReplyLinkHtml(response.contentHtml);
+                div.innerHTML = response.contentHtml;
 
                 body.appendChild(p);
                 body.appendChild(div);
+                updateReplyLinks()
             }
         },
         onNon200: function (xhr) {
diff --git a/assets/js/community.js b/assets/js/community.js
index 4c708090..f076af9a 100644
--- a/assets/js/community.js
+++ b/assets/js/community.js
@@ -6,9 +6,13 @@ var initialLoadMore = document.querySelector('a[data-onclick="get_youtube_replie
 initialLoadMore.setAttribute('href', 'javascript:void(0);');
 initialLoadMore.removeAttribute('target');
 
-function updateReplyLinkHtml(contentHtml) {
-    return contentHtml.replace(/target="_blank" href="\/comment_viewer\?[^"]*"/g, 'href="javascript:void(0)"');
-};
+function updateReplyLinks() {
+    document.querySelectorAll("a[href^='/comment_viewer']").forEach(function (replyLink) {
+        replyLink.setAttribute("href", "javascript:void(0)");
+        replyLink.removeAttribute("target");
+    });
+}
+updateReplyLinks()
 
 function get_youtube_replies(target) {
     var continuation = target.getAttribute('data-continuation');
@@ -28,7 +32,8 @@ function get_youtube_replies(target) {
         on200: function (response) {
             body = body.parentNode.parentNode;
             body.removeChild(body.lastElementChild);
-            body.insertAdjacentHTML('beforeend', updateReplyLinkHtml(response.contentHtml));
+            body.insertAdjacentHTML('beforeend', response.contentHtml);
+            updateReplyLinks()
         },
         onNon200: function (xhr) {
             body.innerHTML = fallback;

From 7e752eece4a711a9ec95bbcc115a34922749bf3e Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:49:04 -0400
Subject: [PATCH 5/6] Add missing semicolons, remove unused code

---
 assets/js/comments.js                  | 8 ++++----
 assets/js/community.js                 | 4 ++--
 src/invidious/views/comments_no_js.ecr | 1 -
 src/invidious/views/community.ecr      | 1 -
 src/invidious/views/post.ecr           | 1 -
 src/invidious/views/watch.ecr          | 1 -
 6 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/assets/js/comments.js b/assets/js/comments.js
index 86ec1543..fc0d93d7 100644
--- a/assets/js/comments.js
+++ b/assets/js/comments.js
@@ -16,7 +16,7 @@ function updateReplyLinks() {
         replyLink.removeAttribute("target");
     });
 }
-updateReplyLinks()
+updateReplyLinks();
 
 function toggle_comments(event) {
     var target = event.target;
@@ -112,7 +112,7 @@ function get_youtube_comments() {
                 })
             });
             comments.innerHTML = commentInnerHtml;
-            updateReplyLinks()
+            updateReplyLinks();
             comments.children[0].children[0].children[0].onclick = toggle_comments;
             if (video_data.support_reddit) {
                 comments.children[0].children[1].children[0].onclick = swap_comments;
@@ -152,7 +152,7 @@ function get_youtube_replies(target, load_more, load_replies) {
                 body = body.parentNode.parentNode;
                 body.removeChild(body.lastElementChild);
                 body.insertAdjacentHTML('beforeend', response.contentHtml);
-                updateReplyLinks()
+                updateReplyLinks();
             } else {
                 body.removeChild(body.lastElementChild);
 
@@ -171,7 +171,7 @@ function get_youtube_replies(target, load_more, load_replies) {
 
                 body.appendChild(p);
                 body.appendChild(div);
-                updateReplyLinks()
+                updateReplyLinks();
             }
         },
         onNon200: function (xhr) {
diff --git a/assets/js/community.js b/assets/js/community.js
index f076af9a..347c5a9a 100644
--- a/assets/js/community.js
+++ b/assets/js/community.js
@@ -12,7 +12,7 @@ function updateReplyLinks() {
         replyLink.removeAttribute("target");
     });
 }
-updateReplyLinks()
+updateReplyLinks();
 
 function get_youtube_replies(target) {
     var continuation = target.getAttribute('data-continuation');
@@ -33,7 +33,7 @@ function get_youtube_replies(target) {
             body = body.parentNode.parentNode;
             body.removeChild(body.lastElementChild);
             body.insertAdjacentHTML('beforeend', response.contentHtml);
-            updateReplyLinks()
+            updateReplyLinks();
         },
         onNon200: function (xhr) {
             body.innerHTML = fallback;
diff --git a/src/invidious/views/comments_no_js.ecr b/src/invidious/views/comments_no_js.ecr
index f9c25432..820009e9 100644
--- a/src/invidious/views/comments_no_js.ecr
+++ b/src/invidious/views/comments_no_js.ecr
@@ -1,6 +1,5 @@
 <% content_for "header" do %>
 <title>Invidious</title>
-<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <!-- basic comments page for people with js disabled. -->
diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr
index d79580cd..555cc60f 100644
--- a/src/invidious/views/community.ecr
+++ b/src/invidious/views/community.ecr
@@ -13,7 +13,6 @@
 <% content_for "header" do %>
 <link rel="alternate" href="<%= youtube_url %>">
 <title><%= author %> - Invidious</title>
-<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <%= rendered "components/channel_info" %>
diff --git a/src/invidious/views/post.ecr b/src/invidious/views/post.ecr
index d4133ffe..4e6ebabc 100644
--- a/src/invidious/views/post.ecr
+++ b/src/invidious/views/post.ecr
@@ -1,6 +1,5 @@
 <% content_for "header" do %>
 <title>Invidious</title>
-<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <div>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 54922ffd..45c58a16 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -42,7 +42,6 @@ we're going to need to do it here in order to allow for translations.
     content: "<%= translate(locale, "Show less") %>"
 }
 </style>
-<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <script id="video_data" type="application/json">

From f65627f55f72feb9df2bc5a82845299335a107c1 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 20 Aug 2024 19:55:22 -0400
Subject: [PATCH 6/6] encode parameters retrieved from url

---
 src/invidious/routes/api/v1/channels.cr | 12 ++++++------
 src/invidious/routes/api/v1/videos.cr   |  2 +-
 src/invidious/routes/channels.cr        |  6 +++---
 src/invidious/routes/watch.cr           |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/invidious/routes/api/v1/channels.cr b/src/invidious/routes/api/v1/channels.cr
index 9245cdd4..754d20fc 100644
--- a/src/invidious/routes/api/v1/channels.cr
+++ b/src/invidious/routes/api/v1/channels.cr
@@ -394,7 +394,7 @@ module Invidious::Routes::API::V1::Channels
     locale = env.get("preferences").as(Preferences).locale
 
     env.response.content_type = "application/json"
-    id = env.params.url["id"].to_s
+    id = URI.encode_www_form(env.params.url["id"].to_s)
     ucid = env.params.query["ucid"]?
 
     thin_mode = env.params.query["thin_mode"]?
@@ -406,9 +406,9 @@ module Invidious::Routes::API::V1::Channels
     if ucid.nil?
       response = YoutubeAPI.resolve_url("https://www.youtube.com/post/#{id}")
       return error_json(400, "Invalid post ID") if response["error"]?
-      ucid = response.dig("endpoint", "browseEndpoint", "browseId").as_s
+      ucid = URI.encode_www_form(response.dig("endpoint", "browseEndpoint", "browseId").as_s)
     else
-      ucid = ucid.to_s
+      ucid = URI.encode_www_form(ucid.to_s)
     end
 
     begin
@@ -423,7 +423,7 @@ module Invidious::Routes::API::V1::Channels
 
     env.response.content_type = "application/json"
 
-    id = env.params.url["id"]
+    id = URI.encode_www_form(env.params.url["id"])
 
     thin_mode = env.params.query["thin_mode"]?
     thin_mode = thin_mode == "true"
@@ -437,9 +437,9 @@ module Invidious::Routes::API::V1::Channels
     if ucid.nil?
       response = YoutubeAPI.resolve_url("https://www.youtube.com/post/#{id}")
       return error_json(400, "Invalid post ID") if response["error"]?
-      ucid = response.dig("endpoint", "browseEndpoint", "browseId").as_s
+      ucid = URI.encode_www_form(response.dig("endpoint", "browseEndpoint", "browseId").as_s)
     else
-      ucid = ucid.to_s
+      ucid = URI.encode_www_form(ucid.to_s)
     end
 
     case continuation
diff --git a/src/invidious/routes/api/v1/videos.cr b/src/invidious/routes/api/v1/videos.cr
index 368304ac..19fa7aeb 100644
--- a/src/invidious/routes/api/v1/videos.cr
+++ b/src/invidious/routes/api/v1/videos.cr
@@ -392,7 +392,7 @@ module Invidious::Routes::API::V1::Videos
 
     env.response.content_type = "application/json"
 
-    clip_id = env.params.url["id"]
+    clip_id = URI.encode_www_form(env.params.url["id"])
     region = env.params.query["region"]?
     proxy = {"1", "true"}.any? &.== env.params.query["local"]?
 
diff --git a/src/invidious/routes/channels.cr b/src/invidious/routes/channels.cr
index 8e827899..0bf5efc6 100644
--- a/src/invidious/routes/channels.cr
+++ b/src/invidious/routes/channels.cr
@@ -237,7 +237,7 @@ module Invidious::Routes::Channels
 
   def self.post(env)
     # /post/{postId}
-    id = env.params.url["id"]
+    id = URI.encode_www_form(env.params.url["id"])
     ucid = env.params.query["ucid"]?
 
     prefs = env.get("preferences").as(Preferences)
@@ -253,14 +253,14 @@ module Invidious::Routes::Channels
     nojs = nojs == "1"
 
     if !ucid.nil?
-      ucid = ucid.to_s
+      ucid = URI.encode_www_form(ucid.to_s)
       post_response = fetch_channel_community_post(ucid, id, locale, "json", thin_mode)
     else
       # resolve the url to get the author's UCID
       response = YoutubeAPI.resolve_url("https://www.youtube.com/post/#{id}")
       return error_template(400, "Invalid post ID") if response["error"]?
 
-      ucid = response.dig("endpoint", "browseEndpoint", "browseId").as_s
+      ucid = URI.encode_www_form(response.dig("endpoint", "browseEndpoint", "browseId").as_s)
       post_response = fetch_channel_community_post(ucid, id, locale, "json", thin_mode)
     end
 
diff --git a/src/invidious/routes/watch.cr b/src/invidious/routes/watch.cr
index ad64f53f..ef4a7b23 100644
--- a/src/invidious/routes/watch.cr
+++ b/src/invidious/routes/watch.cr
@@ -338,7 +338,7 @@ module Invidious::Routes::Watch
     locale = env.get("preferences").as(Preferences).locale
     region = env.params.query["region"]?
 
-    id = env.params.query["id"]
+    id = URI.encode_www_form(env.params.query["id"])
     continuation = env.params.query["continuation"]?
 
     source = env.params.query["source"]? || "youtube"
@@ -356,9 +356,9 @@ module Invidious::Routes::Watch
       if ucid.nil?
         response = YoutubeAPI.resolve_url("https://www.youtube.com/post/#{id}")
         return error_json(400, "Invalid post ID") if response["error"]?
-        ucid = response.dig("endpoint", "browseEndpoint", "browseId").as_s
+        ucid = URI.encode_www_form(response.dig("endpoint", "browseEndpoint", "browseId").as_s)
       else
-        ucid = ucid.to_s
+        ucid = URI.encode_www_form(ucid.to_s)
       end
       case continuation
       when nil, ""