add comments.js

settings.py

@@ -128,6 +128,13 @@ For security reasons, enabling this is not recommended.''',
         'comment': '',
     }),
 
+    ('use_comments_js', {
+        'label': 'Enable comments.js',
+        'type': bool,
+        'default': True,
+        'comment': '',
+    }),
+
     ('theme', {
         'type': int,
         'default': 0,

youtube/__init__.py

@@ -25,6 +25,7 @@ theme_names = {
 def inject_theme_preference():
     return {
         'theme_path': '/youtube.com/static/' + theme_names[settings.theme] + '.css',
+        'settings': settings,
     }
 
 @yt_app.template_filter('commatize')

youtube/comments.py

@@ -121,10 +121,18 @@ def post_process_comments_info(comments_info):
             comment['view_replies_text'] = str(reply_count) + ' replies'
 
 
+        def fmt_num(num):
+            for unit in ['','k']:
+                if num < 1000:
+                    return "%3.1f%s" % (num, unit) if unit else num
+                num /= 1000.0
+            return "%.1f%s" % (num, 'm')
+
+        # if comment['like_count'] = '👍 ' + str(fmt_num(comment['like_count']))
         if comment['like_count'] == 1:
             comment['likes_text'] = '1 like'
         else:
-            comment['likes_text'] = str(comment['like_count']) + ' likes'
+            comment['likes_text'] = str(fmt_num(comment['like_count'])) + ' likes'
 
     comments_info['include_avatars'] = settings.enable_comment_avatars
     if comments_info['ctoken']:
@@ -187,8 +195,10 @@ def get_comments_page():
         'replying': replies,
     }
 
+
     return flask.render_template('comments_page.html',
         comments_info = comments_info,
         comment_posting_box_info = comment_posting_box_info,
+        slim = request.args.get('slim', False)
     )
 

youtube/static/js/comments.js

@@ -0,0 +1,20 @@
+function onClickReplies(e) {
+  var details = e.target.parentElement;
+  // e.preventDefault();
+  console.log("loading replies ..");
+  doXhr(details.getAttribute("src") + "&slim=1", (html) => {
+    var div = details.querySelector(".comment_page");
+    div.innerHTML = html;
+  });
+  details.removeEventListener('click', onClickReplies);
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+    QA("details.replies").forEach(details => {
+      details.addEventListener('click', onClickReplies);
+      details.addEventListener('auxclick', (e) => {
+        if (e.target.parentElement !== details) return;
+        if (e.button == 1) window.open(details.getAttribute("src"));
+      });
+    });
+});

youtube/static/js/common.js

@@ -1,4 +1,5 @@
 Q = document.querySelector.bind(document);
+QA = document.querySelectorAll.bind(document);
 function text(msg) { return document.createTextNode(msg); }
 function clearNode(node) { while (node.firstChild) node.removeChild(node.firstChild); }
 function toTimestamp(seconds) {
@@ -36,6 +37,15 @@ function getDefaultTranscriptTrackIdx() {
   return textTracks.length - 1;
 }
 
+function doXhr(url, callback=null) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = (e) => {callback(e.currentTarget.response)};
+    xhr.send();
+    return xhr;
+}
+
+
 window.addEventListener('DOMContentLoaded', function() {
     cur_track_idx = getDefaultTranscriptTrackIdx();
 });

youtube/templates/comments.html

@@ -22,7 +22,14 @@
 
             <span class="likes">{{ comment['likes_text'] if comment['like_count'] else ''}}</span>
             <div class="bottom-row">
+                {% 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 %}

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 with context %}
-{% import "comments.html" as comments %}
 
-{% block style %}
+{% if not slim %}
+    {% extends "base.html" %}
+
+    {% block style %}
         .comments-area{
             margin: auto;
             width:640px;
         }
-{% endblock style %}
+    {% endblock style %}
+{% endif %}
 
 
 {% block main %}
@@ -24,7 +27,9 @@
             </section>
         {% endif %}
 
+        {% if not slim %}
             {{ comments.comment_posting_box(comment_posting_box_info) }}
+        {% endif %}
 
         {% if not comments_info['is_replies'] %}
             <div class="comment-links">
@@ -36,7 +41,7 @@
 
         <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 %}

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,21 @@
         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;
+        border-style: solid;
+        border-width: 1px;
+        border-color: #0402025e;
+    }
+
     .playability-error{
         height: 360px;
         width: 640px;
@@ -682,4 +697,5 @@ Reload without invidious (for usage of new identity button).</a>
         <script src="/youtube.com/static/js/hotkeys.js"></script>
     {% endif %}
     <script src="/youtube.com/static/js/transcript-table.js"></script>
+    <script src="/youtube.com/static/js/comments.js"></script>
 {% endblock main %}

youtube/watch.py

@@ -470,8 +470,6 @@ def get_watch_page(video_id=None):
         comment_count           = info['comment_count'],
         comments_disabled       = info['comments_disabled'],
 
-        settings                = settings,
-
         video_height            = video_height,
         video_width             = video_width,
         theater_video_target_width = theater_video_target_width,