Implemented comment sorting options in the /watch endpoint

assets/js/comments.js

@@ -3,6 +3,11 @@ var video_data = JSON.parse(document.getElementById('video_data').textContent);
 var spinnerHTML = '<h3 style="text-align:center"><div class="loading"><i class="icon ion-ios-refresh"></i></div></h3>';
 var spinnerHTMLwithHR = spinnerHTML + '<hr>';
 
+document.getElementById('sort-type-div').style.display = "block";
+document.getElementById('sort_by').addEventListener('change', function(){
+    get_youtube_comments();
+});
+
 String.prototype.supplant = function (o) {
     return this.replace(/{([^{}]*)}/g, function (a, b) {
         var r = o[b];
@@ -58,11 +63,14 @@ function get_youtube_comments() {
     var fallback = comments.innerHTML;
     comments.innerHTML = spinnerHTML;
 
+    var sort_by = document.getElementById('sort_by').value;
+
     var baseUrl = video_data.base_url || '/api/v1/comments/'+ video_data.id
     var url = baseUrl +
         '?format=html' +
         '&hl=' + video_data.preferences.locale +
-        '&thin_mode=' + video_data.preferences.thin_mode;
+        '&thin_mode=' + video_data.preferences.thin_mode +
+        '&sort_by=' + sort_by;
 
     if (video_data.ucid) {
         url += '&ucid=' + video_data.ucid

locales/en-US.json

@@ -512,5 +512,6 @@
     "timeline_parse_error_placeholder_heading": "Unable to parse item",
     "timeline_parse_error_placeholder_message": "Invidious encountered an error while trying to parse this item. For more information see below:",
     "timeline_parse_error_show_technical_details": "Show technical details",
-    "dmca_content": "This video cannot be downloaded on this instance due to a DMCA/copyright infringement letter sent to the instance administrator."
+    "dmca_content": "This video cannot be downloaded on this instance due to a DMCA/copyright infringement letter sent to the instance administrator.",
+    "Hi! Looks like you have JavaScript turned off. Click the \"Fetch comments\" button below to view comments, keep in mind they may take a bit longer to load.": "Hi! Looks like you have JavaScript turned off. Click the \"Fetch comments\" button below to view comments, keep in mind they may take a bit longer to load."
 }

src/invidious/routes/watch.cr

@@ -33,6 +33,11 @@ module Invidious::Routes::Watch
     nojs ||= "0"
     nojs = nojs == "1"
 
+    if nojs
+      sort_by = env.params.query["sort_by"]?
+      sort_by ||= "top"
+    end
+
     user = env.get?("user").try &.as(User)
     if user
       subscriptions = user.subscriptions
@@ -81,7 +86,7 @@ module Invidious::Routes::Watch
 
         if source == "youtube"
           begin
-            comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region))["contentHtml"]
+            comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region, sort_by: sort_by))["contentHtml"]
           rescue ex
             if preferences.comments[1] == "reddit"
               comments, reddit_thread = Comments.fetch_reddit(id)
@@ -100,12 +105,12 @@ module Invidious::Routes::Watch
             comment_html = Comments.replace_links(comment_html)
           rescue ex
             if preferences.comments[1] == "youtube"
-              comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region))["contentHtml"]
+              comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region, sort_by: sort_by))["contentHtml"]
             end
           end
         end
       else
-        comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region))["contentHtml"]
+        comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region, sort_by: sort_by))["contentHtml"]
       end
 
       comment_html ||= ""

src/invidious/views/watch.ecr

@@ -304,6 +304,13 @@ we're going to need to do it here in order to allow for translations.
             <hr>
 
             <% end %>
+            <div class="pure-form pure-form-aligned" id="sort-type-div" style="display: none">
+                <label for="sort_by">Sort comments by: </label>
+                <select name="sort_by" id="sort_by">
+                     <option value="top">Top</option>
+                     <option value="new">New</option>
+                </select>
+            </div>
             <div id="comments" class="comments">
                 <% if (params.comments <=> ["", ""]) == 0 %>
                     <div id="comments-disabled-message" class="h-box v-box">
@@ -312,12 +319,40 @@ we're going to need to do it here in order to allow for translations.
                 <% else %>
                     <% if video.comments? %>
                         <% if nojs %>
+                            <noscript>
+                                <form class="pure-form pure-form-aligned" action="/watch" method="get">
+                                    <% env.params.query.each do |key, value| %>
+                                        <% if key != "sort_by" && key != "nojs" %>
+                                            <input type="hidden" name="<%= key %>" value="<%= value %>">
+                                        <% end %>
+                                    <% end %>
+                                    <input type="hidden" name="nojs" value="1">
+                                    <label for="sort_by">Sort comments by: </label>
+                                    <select name="sort_by" id="sort_by">
+                                        <option value="top" <% if sort_by == "top" %> selected <% end %> >Top</option>
+                                        <option value="new" <% if sort_by == "new" %> selected <% end %> >New</option>
+                                    </select>
+                                    <button type="submit">Fetch comments</button>
+                                </form>
                                 <%= comment_html %>
+                            </noscript>
                         <% else %>
                             <noscript>
-                                <a href="/watch?<%= env.params.query %>&nojs=1">
+                                <p><%= I18n.translate(locale, "Hi! Looks like you have JavaScript turned off. Click the \"Fetch comments\" button below to view comments, keep in mind they may take a bit longer to load.") %></p>
-                                    <%= I18n.translate(locale, "Hi! Looks like you have JavaScript turned off. Click here to view comments, keep in mind they may take a bit longer to load.") %>
+                                <form class="pure-form pure-form-aligned" action="/watch" method="get">
-                                </a>
+                                    <% env.params.query.each do |key, value| %>
+                                        <% if key != "sort_by" && key != "nojs" %>
+                                            <input type="hidden" name="<%= key %>" value="<%= value %>">
+                                        <% end %>
+                                    <% end %>
+                                    <input type="hidden" name="nojs" value="1">
+                                    <label for="sort_by">Sort comments by: </label>
+                                    <select name="sort_by" id="sort_by">
+                                        <option value="top">Top</option>
+                                        <option value="new">New</option>
+                                    </select>
+                                    <button type="submit">Fetch comments</button>
+                                </form>
                             </noscript>
                         <% end %>
                     <% else %>