Add "show replies" and "hide replies"

2 files changed, 23 insertions, 2 deletions

diff --git a/src/invidious/comments.cr b/src/invidious/comments.cr
index 2c80a190..98062f4e 100644
--- a/src/invidious/comments.cr
+++ b/src/invidious/comments.cr
@@ -109,7 +109,6 @@ def template_youtube_comments(comments)
       </div>
       <div class="pure-u-20-24 pure-u-md-22-24">
         <p>
-          <a href="javascript:void(0)" onclick="toggle_parent(this)">[ - ]</a> 
           <b>
             <a href="#{child["authorUrl"]}">#{child["author"]}</a>
           </b> 
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 92469e47..5a86c219 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -382,7 +382,13 @@ function get_youtube_replies(target) {
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
-        body.innerHTML = xhr.response.contentHtml;
+        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;
       }
@@ -396,6 +402,22 @@ function get_youtube_replies(target) {
   };
 }
 
+function show_youtube_replies(target) {
+    body = target.parentNode.parentNode.children[1];
+    body.style.display = "";
+
+    target.innerHTML = "Hide replies";
+    target.setAttribute('onclick', 'hide_youtube_replies(this)');
+}
+
+function hide_youtube_replies(target) {
+    body = target.parentNode.parentNode.children[1];
+    body.style.display = "none";
+
+    target.innerHTML = "Show replies";
+    target.setAttribute('onclick', 'show_youtube_replies(this)');
+}
+
 <% if preferences %>
     <% if preferences.comments[0] == "youtube" %>
     get_youtube_comments();