3 files changed, 45 insertions, 13 deletions
diff --git a/youtube/templates/comments.html b/youtube/templates/comments.html
index f2cdf65..9d93b8c 100644
--- a/youtube/templates/comments.html
+++ b/youtube/templates/comments.html
@@ -22,7 +22,14 @@
 
             <span class="likes">{{ comment['likes_text'] if comment['like_count'] else ''}}</span>
             <div class="bottom-row">
-                <a href="{{ comment['replies_url'] }}" class="replies">{{ comment['view_replies_text'] }}</a>
+                {% if settings.use_comments_js and comment['reply_count'] %}
+                    <details class="replies" src="{{ comment['replies_url'] }}">
+                        <summary>{{ comment['view_replies_text'] }}</summary>
+                        <div class="comment_page">loading..</div>
+                    </details>
+                {% else %}
+                    <a href="{{ comment['replies_url'] }}" class="replies">{{ comment['view_replies_text'] }}</a>
+                {% endif %}
                 {% if 'delete_url' is in comment %}
                     <a href="{{ comment['delete_url'] }}" target="_blank">Delete</a>
                 {% endif %}
diff --git a/youtube/templates/comments_page.html b/youtube/templates/comments_page.html
index 047404a..269ac83 100644
--- a/youtube/templates/comments_page.html
+++ b/youtube/templates/comments_page.html
@@ -1,13 +1,16 @@
 {% set page_title = ('Replies' if comments_info['is_replies'] else 'Comments page ' + comments_info['page_number']) %}
-{% extends "base.html" %}
-{% import "comments.html" as comments %}
+{% import "comments.html" as comments with context %}
 
-{% block style %}
-    .comments-area{
-        margin: auto;
-        width:640px;
-    }
-{% endblock style %}
+{% if not slim %}
+    {% extends "base.html" %}
+
+    {% block style %}
+        .comments-area{
+            margin: auto;
+            width:640px;
+        }
+    {% endblock style %}
+{% endif %}
 
 
 {% block main %}
@@ -24,7 +27,9 @@
             </section>
         {% endif %}
 
-        {{ comments.comment_posting_box(comment_posting_box_info) }}
+        {% if not slim %}
+            {{ comments.comment_posting_box(comment_posting_box_info) }}
+        {% endif %}
 
         {% if not comments_info['is_replies'] %}
             <div class="comment-links">
@@ -36,13 +41,18 @@
 
         <div class="comments">
             {% for comment in comments_info['comments'] %}
-                {{ comments.render_comment(comment, comments_info['include_avatars']) }}
+                {{ comments.render_comment(comment, comments_info['include_avatars'], slim) }}
             {% endfor %}
         </div>
         {% if 'more_comments_url' is in comments_info %}
             <a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
         {% endif %}
     </section>
+
+    {% if settings.use_comments_js %}
+        <script src="/youtube.com/static/js/common.js"></script>
+        <script src="/youtube.com/static/js/comments.js"></script>
+    {% endif %}
 {% endblock main %}
 
 
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 89f8daa..86644ea 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -1,7 +1,7 @@
 {% set page_title = title %}
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
-{% import "comments.html" as comments %}
+{% import "comments.html" as comments with context %}
 {% block style %}
     details > summary{
         background-color: var(--interface-color);
@@ -14,6 +14,18 @@
         text-decoration: underline;
     }
 
+    details.replies > summary{
+        background-color: var(--interface-color);
+        border-style: outset;
+        border-width: 1px;
+        font-weight: bold;
+        padding-bottom: 0px;
+    }
+
+    details.replies .comment{
+        width: 600px;
+    }
+
     .playability-error{
         height: 360px;
         width: 640px;
@@ -678,8 +690,11 @@ Reload without invidious (for usage of new identity button).</a>
     {% endif %}
 
     <script src="/youtube.com/static/js/common.js"></script>
+    <script src="/youtube.com/static/js/transcript-table.js"></script>
     {% if settings.use_video_hotkeys %}
         <script src="/youtube.com/static/js/hotkeys.js"></script>
     {% endif %}
-    <script src="/youtube.com/static/js/transcript-table.js"></script>
+    {% if settings.use_comments_js %}
+        <script src="/youtube.com/static/js/comments.js"></script>
+    {% endif %}
 {% endblock main %}