Allow viewing more comments when js is disabled

src/invidious/channels/community.cr

@@ -279,7 +279,7 @@ def extract_channel_community(items, *, ucid, locale, format, thin_mode, is_sing
 
   if format == "html"
     response = JSON.parse(response)
-    content_html = IV::Frontend::Comments.template_youtube(response, locale, thin_mode)
+    content_html = IV::Frontend::Comments.template_youtube(response, locale, thin_mode, ucid, "community")
 
     response = JSON.build do |json|
       json.object do

src/invidious/comments/youtube.cr

@@ -57,7 +57,7 @@ module Invidious::Comments
     return initial_data
   end
 
-  def parse_youtube(id, response, format, locale, thin_mode, sort_by = "top", is_post = false)
+  def parse_youtube(id, response, format, locale, thin_mode, type="video", sort_by = "top")
     contents = nil
 
     if on_response_received_endpoints = response["onResponseReceivedEndpoints"]?
@@ -115,7 +115,7 @@ module Invidious::Comments
           json.field "commentCount", comment_count
         end
 
-        if is_post
+        if type == "post"
           json.field "postId", id
         else
           json.field "videoId", id
@@ -302,7 +302,8 @@ module Invidious::Comments
 
     if format == "html"
       response = JSON.parse(response)
-      content_html = Frontend::Comments.template_youtube(response, locale, thin_mode)
+      content_html = Frontend::Comments.template_youtube(response, locale, thin_mode, id, type)
+
       response = JSON.build do |json|
         json.object do
           json.field "contentHtml", content_html

src/invidious/frontend/comments_youtube.cr

@@ -1,7 +1,7 @@
 module Invidious::Frontend::Comments
   extend self
 
-  def template_youtube(comments, locale, thin_mode, is_replies = false)
+  def template_youtube(comments, locale, thin_mode, id, type="video", is_replies = false)
     String.build do |html|
       root = comments["comments"].as_a
       root.each do |child|
@@ -13,11 +13,15 @@ module Invidious::Frontend::Comments
           )
 
           replies_html = <<-END_HTML
-          <div id="replies" class="pure-g">
+          <div class="pure-g replies">
             <div class="pure-u-1-24"></div>
             <div class="pure-u-23-24">
               <p>
-                <a href="javascript:void(0)" data-continuation="#{child["replies"]["continuation"]}"
+                <noscript>
+                  <!-- 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>
@@ -196,7 +200,10 @@ module Invidious::Frontend::Comments
         <div class="pure-g">
           <div class="pure-u-1">
             <p>
-              <a href="javascript:void(0)" data-continuation="#{comments["continuation"]}"
+              <noscript>
+                <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

@@ -441,7 +441,8 @@ module Invidious::Routes::API::V1::Channels
     else
       comments = YoutubeAPI.browse(continuation: continuation)
     end
-    return Comments.parse_youtube(id, comments, format, locale, thin_mode, is_post: true)
+
+    return Comments.parse_youtube(id, comments, format, locale, thin_mode, "post")
   end
 
   def self.channels(env)

src/invidious/routes/channels.cr

@@ -270,7 +270,8 @@ module Invidious::Routes::Channels
 
     if nojs
       comments = Comments.fetch_community_post_comments(ucid, id)
-      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, is_post: true))["contentHtml"]
+
+      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, "post"))["contentHtml"]
     end
     templated "post"
   end

src/invidious/routes/watch.cr

@@ -332,4 +332,53 @@ module Invidious::Routes::Watch
       return error_template(400, "Invalid label or itag")
     end
   end
+
+  # used for fetching replies/ fetching more comments when js is disabled.
+  def self.comments(env)
+    locale = env.get("preferences").as(Preferences).locale
+    region = env.params.query["region"]?
+
+    id = env.params.query["id"]
+    continuation = env.params.query["continuation"]?
+
+    source = env.params.query["source"]? || "youtube"
+
+    thin_mode = env.params.query["thin_mode"]? == "true"
+    comment_type = env.params.query["type"]? || "video"
+
+    parent_comment = nil
+    if comment_type == "community"
+      # community posts
+      comment_html = JSON.parse(fetch_channel_community(id, continuation, locale, "html", thin_mode))["contentHtml"]
+    elsif comment_type == "post"
+      # replies to a community post
+      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, ""
+        comments = Comments.fetch_community_post_comments(ucid, id)
+      else
+        comments = YoutubeAPI.browse(continuation: continuation)
+      end
+      comment_html = JSON.parse(Comments.parse_youtube(id, comments, "html", locale, thin_mode, "post"))["contentHtml"]
+    else
+      # video comments
+      if source == "youtube"
+        comment_html = JSON.parse(Comments.fetch_youtube(id, continuation, "html", locale, thin_mode, region))["contentHtml"]
+      elsif source == "reddit"
+        comments, reddit_thread = Comments.fetch_reddit(id)
+        comment_html = Frontend::Comments.template_reddit(comments, locale)
+
+        comment_html = Comments.fill_links(comment_html, "https", "www.reddit.com")
+        comment_html = Comments.replace_links(comment_html)
+      end
+    end
+    templated "comments_no_js"
+  end
 end

src/invidious/routing.cr

@@ -170,6 +170,8 @@ module Invidious::Routing
 
     get "/embed/", Routes::Embed, :redirect
     get "/embed/:id", Routes::Embed, :show
+    # currently only for fetching continuations when js is disabled.
+    get "/comment_viewer", Routes::Watch, :comments
   end
 
   def register_yt_playlist_routes

src/invidious/views/comments_no_js.ecr

@@ -0,0 +1,9 @@
+<% content_for "header" do %>
+<title>Invidious</title>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
+<% end %>
+
+<!-- basic comments page for people with js disabled. -->
+<div class="comments post-comments">
+    <%= comment_html %>
+</div>

src/invidious/views/community.ecr

@@ -13,6 +13,7 @@
 <% content_for "header" do %>
 <link rel="alternate" href="<%= youtube_url %>">
 <title><%= author %> - Invidious</title>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <%= rendered "components/channel_info" %>
@@ -27,7 +28,7 @@
     </div>
 <% else %>
     <div class="h-box pure-g comments" id="comments">
-        <%= IV::Frontend::Comments.template_youtube(items.not_nil!, locale, thin_mode) %>
+        <%= IV::Frontend::Comments.template_youtube(items.not_nil!, locale, thin_mode, ucid, "community") %>
     </div>
 <% end %>
 

src/invidious/views/post.ecr

@@ -1,10 +1,11 @@
 <% content_for "header" do %>
 <title>Invidious</title>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <div>
     <div id="post" class="comments post-comments">
-        <%= IV::Frontend::Comments.template_youtube(post_response.not_nil!, locale, thin_mode) %>
+        <%= IV::Frontend::Comments.template_youtube(post_response.not_nil!, locale, thin_mode, id, "post") %>
     </div>
 
     <% if nojs %>

src/invidious/views/watch.ecr

@@ -42,6 +42,7 @@ we're going to need to do it here in order to allow for translations.
     content: "<%= translate(locale, "Show less") %>"
 }
 </style>
+<noscript><style>.jsOnly { display: none;}</style></noscript>
 <% end %>
 
 <script id="video_data" type="application/json">