Use javascript to replace reply links, simplify community.js

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);

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) {
+// first page of community posts are loaded without javascript so we need to update the Load more button
-    var target = event.target;
+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');
+function updateReplyLinkHtml(contentHtml) {
-    var inner_text = target.getAttribute('data-sub-text');
+    return contentHtml.replace(/target="_blank" href="\/comment_viewer\?[^"]*"/g, 'href="javascript:void(0)"');
+};
 
-    var body = target.parentNode.parentNode.children[1];
+function get_youtube_replies(target) {
-    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) {
     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 = body.parentNode.parentNode;
+            body.removeChild(body.lastElementChild);
-                body.removeChild(body.lastElementChild);
+            body.insertAdjacentHTML('beforeend', updateReplyLinkHtml(response.contentHtml));
-                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);
-            }
         },
         onNon200: function (xhr) {
             body.innerHTML = fallback;

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>
+                <a target="_blank" href="/comment_viewer?continuation=#{child["replies"]["continuation"]}&id=#{id}&type=#{type}" data-continuation="#{child["replies"]["continuation"]}"
-                  <!-- 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>
@@ -205,10 +201,7 @@ module Invidious::Frontend::Comments
         <div class="pure-g">
           <div class="pure-u-1">
             <p>
-              <noscript>
+              <a target="_blank" href="/comment_viewer?continuation=#{comments["continuation"]}&id=#{id}&type=#{type}" data-continuation="#{comments["continuation"]}"
-                <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>

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)