Don't nest YouTube replies0.11.0

2 files changed, 15 insertions, 9 deletions

diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr
index 6a42701c..09eb4fed 100644
--- a/src/invidious/comments.cr
+++ b/src/invidious/comments.cr
@@ -129,7 +129,7 @@ def template_youtube_comments(comments)
       <div class="pure-u-1">
         <p>
           <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
-            onclick="get_youtube_replies(this)">Load more</a>
+            onclick="get_youtube_replies(this, true)">Load more</a>
         </p>
       </div>
     </div>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 6af7e10a..83120fb2 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -379,7 +379,7 @@ function get_youtube_comments() {
   };
 }
 
-function get_youtube_replies(target) {
+function get_youtube_replies(target, load_more) {
   var continuation = target.getAttribute('data-continuation');
 
   var body = target.parentNode.parentNode;
@@ -398,13 +398,19 @@ function get_youtube_replies(target) {
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
-        body.innerHTML = ' \
-            <p><a href="javascript:void(0)" \
-                onclick="hide_youtube_replies(this)">Hide replies \
-            </a></p> \
-            <div>{contentHtml}</div>'.supplant({
-            contentHtml: xhr.response.contentHtml,
-        });
+        if (load_more) {
+            body = body.parentNode.parentNode;
+            body.removeChild(body.lastElementChild);
+            body.innerHTML += xhr.response.contentHtml;
+        } else {
+            body.innerHTML = ' \
+                <p><a href="javascript:void(0)" \
+                    onclick="hide_youtube_replies(this)">Hide replies \
+                </a></p> \
+                <div>{contentHtml}</div>'.supplant({
+                contentHtml: xhr.response.contentHtml,
+            });
+        }
       } else {
         body.innerHTML = fallback;
       }