From 7e67e10666d58880cdef52d468aa9e4076dcd632 Mon Sep 17 00:00:00 2001 From: RadoslavL Date: Fri, 25 Sep 2026 04:31:18 +0300 Subject: [PATCH 1/2] Implemented comment sorting options in the /watch endpoint --- assets/js/comments.js | 12 ++++++++-- locales/en-US.json | 3 ++- src/invidious/routes/watch.cr | 11 ++++++--- src/invidious/views/watch.ecr | 43 +++++++++++++++++++++++++++++++---- 4 files changed, 59 insertions(+), 10 deletions(-) diff --git a/assets/js/comments.js b/assets/js/comments.js index ac519388b..b5aae6771 100644 --- a/assets/js/comments.js +++ b/assets/js/comments.js @@ -3,6 +3,11 @@ var video_data = JSON.parse(document.getElementById('video_data').textContent); var spinnerHTML = '

'; var spinnerHTMLwithHR = spinnerHTML + '
'; +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 @@ -188,4 +196,4 @@ function get_youtube_replies(target, load_more, load_replies) { body.innerHTML = fallback; } }); -} \ No newline at end of file +} diff --git a/locales/en-US.json b/locales/en-US.json index 8032cf987..08eda15ab 100644 --- a/locales/en-US.json +++ b/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." } diff --git a/src/invidious/routes/watch.cr b/src/invidious/routes/watch.cr index 4bca37531..51cf303e8 100644 --- a/src/invidious/routes/watch.cr +++ b/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 ||= "" diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 3dc19c9e2..069d6948f 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -304,6 +304,13 @@ we're going to need to do it here in order to allow for translations.
<% end %> +
<% if (params.comments <=> ["", ""]) == 0 %>
@@ -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 %> - <%= comment_html %> + <% else %> <% end %> <% else %> From cba0f210210e53dcd0b17a0332c78980b90c555c Mon Sep 17 00:00:00 2001 From: RadoslavL Date: Sat, 26 Sep 2026 19:39:09 +0300 Subject: [PATCH 2/2] Fixed some issues --- assets/js/comments.js | 19 +++++++++++++------ locales/en-US.json | 6 +++++- src/invidious/views/watch.ecr | 30 +++++++++++++++--------------- 3 files changed, 33 insertions(+), 22 deletions(-) diff --git a/assets/js/comments.js b/assets/js/comments.js index b5aae6771..3200423a4 100644 --- a/assets/js/comments.js +++ b/assets/js/comments.js @@ -3,10 +3,12 @@ var video_data = JSON.parse(document.getElementById('video_data').textContent); var spinnerHTML = '

'; var spinnerHTMLwithHR = spinnerHTML + '
'; -document.getElementById('sort-type-div').style.display = "block"; -document.getElementById('sort_by').addEventListener('change', function(){ - get_youtube_comments(); -}); +sort_by_div = document.getElementById('sort-type-div'); +sort_by_select = document.getElementById('sort_by'); +if (sort_by_div && sort_by_select){ + sort_by_div.style.display = "block"; + sort_by_select.addEventListener('change', get_youtube_comments); +} String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { @@ -63,14 +65,19 @@ function get_youtube_comments() { var fallback = comments.innerHTML; comments.innerHTML = spinnerHTML; - var sort_by = document.getElementById('sort_by').value; + var sort_by = document.getElementById('sort_by'); + if(sort_by){ + sort_by_value = sort_by.value; + }else{ + sort_by_value = "top"; + } 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 + - '&sort_by=' + sort_by; + '&sort_by=' + sort_by_value; if (video_data.ucid) { url += '&ucid=' + video_data.ucid diff --git a/locales/en-US.json b/locales/en-US.json index 08eda15ab..358af3dd2 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -513,5 +513,9 @@ "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.", - "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." + "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.", + "comments_sort_label": "Sort comments by: ", + "comments_sort_top": "Top", + "comments_sort_new": "New", + "comments_sort_submitbtn": "Fetch comments" } diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr index 069d6948f..9676c26ac 100644 --- a/src/invidious/views/watch.ecr +++ b/src/invidious/views/watch.ecr @@ -305,10 +305,10 @@ we're going to need to do it here in order to allow for translations. <% end %>
@@ -323,16 +323,16 @@ we're going to need to do it here in order to allow for translations.
<% env.params.query.each do |key, value| %> <% if key != "sort_by" && key != "nojs" %> - + <% end %> <% end %> - - + + - +
<%= comment_html %> @@ -342,16 +342,16 @@ we're going to need to do it here in order to allow for translations.
<% env.params.query.each do |key, value| %> <% if key != "sort_by" && key != "nojs" %> - + <% end %> <% end %> - - + + - +
<% end %>