Show message when comments are turned off (#4051)

* Add error message when comments are disabled

* Add btn to try reddit comments when yt is disabled

* Escape warning messages for disabled comments

* Add missing semicolons

* Update comment detection to not use msg renderer

* Use short syntax for comment entry-point detection

Co-authored-by: Samantaz Fox <coding@samantaz.fr>

* Condense try-reddit-comments-link HTML in player.js

Co-authored-by: Samantaz Fox <coding@samantaz.fr>

* Improve locale keys for comments disabled messages

Co-authored-by: Samantaz Fox <coding@samantaz.fr>

* Remove extra whitespace

* Use button instead of anchor for try reddit link

* Request Reddit comm when yt disabled during nojs=1

* Change order of commentsEnabled in parse results

* Lint

* Rebase error

* update the naming of the comments section in Innertube

Downstreamed from 36ac67610d

---------

Co-authored-by: Samantaz Fox <coding@samantaz.fr>
Co-authored-by: Fijxu <fijxu@nadeko.net>

assets/css/default.css

@@ -58,6 +58,11 @@ body {
   justify-content: flex-end;
 }
 
+button.simulated_a  {
+  background: none;
+  border: none;
+}
+
 
 /*
  * Channel page
@@ -533,7 +538,9 @@ span > select {
 .light-theme a:active,
 .light-theme summary:hover,
 .light-theme a:focus,
-.light-theme summary:focus {
+.light-theme summary:focus,
+.light-theme .simulated_a:hover,
+.light-theme .simulated_a:active {
   color: #075A9E !important;
 }
 
@@ -551,7 +558,7 @@ span > select {
   background-color: #fff2;
 }
 
-.light-theme a {
+.light-theme a, .light-theme .simulated_a {
   color: #335d7a;
   text-decoration: none;
 }
@@ -576,7 +583,9 @@ span > select {
   .no-theme a:active,
   .no-theme summary:hover,
   .no-theme a:focus,
-  .no-theme summary:focus {
+  .no-theme summary:focus,
+  .no-theme .simulated_a:hover,
+  .no-theme .simulated_a:active {
     color: #075A9E !important;
   }
 
@@ -594,7 +603,7 @@ span > select {
     background-color: #fff2;
   }
 
-  .no-theme a {
+  .no-theme a, .no-theme .simulated_a{
     color: #335d7a;
     text-decoration: none;
   }
@@ -632,7 +641,9 @@ span > select {
 .dark-theme a:active,
 .dark-theme summary:hover,
 .dark-theme a:focus,
-.dark-theme summary:focus {
+.dark-theme summary:focus,
+.dark-theme .simulated_a:hover,
+.dark-theme .simulated_a:active {
   color: rgb(0, 182, 240);
 }
 
@@ -650,7 +661,7 @@ span > select {
   color: #ddd;
 }
 
-.dark-theme a {
+.dark-theme a, .dark-theme .simulated_a {
   color: #adadad;
   text-decoration: none;
 }
@@ -690,7 +701,9 @@ body.dark-theme {
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active,
-  .no-theme a:focus {
+  .no-theme a:focus,
+  .no-theme .simulated_a:hover,
+  .no-theme .simulated_a:active {
     color: rgb(0, 182, 240);
   }
 
@@ -708,7 +721,7 @@ body.dark-theme {
     color: #ddd;
   }
 
-  .no-theme a {
+  .no-theme a, .no-theme .simulated_a{
     color: #adadad;
     text-decoration: none;
   }
@@ -910,3 +923,7 @@ h1, h2, h3, h4, h5, p,
   display: inline-block;
   vertical-align: top;
 }
+
+#comments-turned-off-on-video-message > p, #comments-disabled-message > p {
+  text-align: center;
+}

assets/js/comments.js

@@ -68,7 +68,24 @@ function get_youtube_comments() {
         url += '&ucid=' + video_data.ucid
     }
 
-    var onNon200 = function (xhr) { comments.innerHTML = fallback; };
+    var onNon200 = function (xhr) {
+        if (!video_data.comments_enabled) {
+            comments.innerHTML = `
+            <div id="comments-turned-off-on-video-message" class="h-box v-box">
+                <p><b>${video_data.comments_youtube_disabled_text}</b></p>
+
+                <p><b><button href="javascript:void(0)" data-comments="reddit" id="try-reddit-comments-link" class="simulated_a">
+                    ${video_data.comments_youtube_disabled_try_reddit}
+                </button></b></p>
+            </div>`;
+
+            document.getElementById("try-reddit-comments-link").onclick = swap_comments;
+        } else {
+            comments.innerHTML = fallback; 
+        }
+
+    };
+
     if (video_data.params.comments[1] === 'youtube')
         onNon200 = function (xhr) {};
 

assets/js/watch.js

@@ -182,6 +182,10 @@ addEventListener('load', function (e) {
     if (video_data.plid)
         get_playlist(video_data.plid);
 
+    if (!video_data.comments_enabled && video_data.params.comments.includes("youtube")) {
+        return;
+    }
+
     if (video_data.params.comments[0] === 'youtube') {
         get_youtube_comments();
     } else if (video_data.params.comments[0] === 'reddit') {
@@ -190,8 +194,7 @@ addEventListener('load', function (e) {
         get_youtube_comments();
     } else if (video_data.params.comments[1] === 'reddit') {
         get_reddit_comments();
-    } else {
-        var comments = document.getElementById('comments');
-        comments.innerHTML = '';
     }
 });
+
+document.getElementById("try-reddit-comments-link").onclick = swap_comments;

locales/en-US.json

@@ -222,6 +222,10 @@
     "View Reddit comments": "View Reddit comments",
     "Hide replies": "Hide replies",
     "Show replies": "Show replies",
+    "comments_youtube_disabled_text": "Youtube comments are disabled on this video",
+    "comments_youtube_disabled_try_reddit": "Try reddit comments?",
+    "comments_invidious_disabled_text": "Comments are hidden as per user preferences",
+    "comments_youtube_disabled_try_reddit_no_js": "Hi! Looks like you have JavaScript turned off. Although the uploader has disabled YouTube comments you can still click here to try and view Reddit comments, keep in mind they may take a bit longer to load.",
     "Incorrect password": "Incorrect password",
     "Wrong answer": "Wrong answer",
     "Erroneous CAPTCHA": "Erroneous CAPTCHA",

src/invidious/routes/watch.cr

@@ -79,7 +79,8 @@ module Invidious::Routes::Watch
 
     if nojs
       if preferences
-        source = preferences.comments[0]
+        source = video.comments? ? preferences.comments[0] : "reddit"
+
         if source.empty?
           source = preferences.comments[1]
         end

src/invidious/videos.cr

@@ -193,6 +193,11 @@ struct Video
     }
   end
 
+  # Returns true if comments are enabled on the video
+  def comments?
+    return info["commentsEnabled"].as_bool
+  end
+
   # Macros defining getters/setters for various types of data
 
   private macro getset_string(name)

src/invidious/videos/parser.cr

@@ -295,6 +295,18 @@ module Invidious::Videos::Parser
           "likeButton", "toggleButtonRenderer"
         )
 
+      # Comments enabled?
+      comments_enabled = false
+
+      # When comments are enabled there should be a comments-section section in the primary results
+      if primary_results
+        section = primary_results.as_a.find(&.dig?("itemSectionRenderer", "targetId").== "comments-section")
+
+        if section
+          comments_enabled = true
+        end
+      end
+
       if likes_button
         likes_txt = likes_button.dig?("accessibilityText")
         # Note: The like count from `toggledText` is off by one, as it would
@@ -421,6 +433,7 @@ module Invidious::Videos::Parser
       "isFamilyFriendly" => JSON::Any.new(family_friendly || false),
       "isListed"         => JSON::Any.new(is_listed || false),
       "isUpcoming"       => JSON::Any.new(is_upcoming || false),
+      "commentsEnabled"  => JSON::Any.new(comments_enabled),
       "keywords"         => JSON::Any.new(keywords.map { |v| JSON::Any.new(v) }),
       "isPostLiveDvr"    => JSON::Any.new(post_live_dvr),
       # Related videos

src/invidious/views/watch.ecr

@@ -42,6 +42,12 @@ we're going to need to do it here in order to allow for translations.
     content: "<%= I18n.translate(locale, "Show less") %>"
 }
 </style>
+
+<%
+    # Disable the try reddit link if javascript is disabled
+%>
+<noscript><style> #try-reddit-comments-link { display: none } </style></noscript>
+
 <% end %>
 
 <script id="video_data" type="application/json">
@@ -54,6 +60,8 @@ we're going to need to do it here in order to allow for translations.
     "play_next" => !video.related_videos.empty? && !plid && params.continue,
     "next_video" => video.related_videos.select { |rv| rv["id"]? }[0]?.try &.["id"],
     "youtube_comments_text" => HTML.escape(I18n.translate(locale, "View YouTube comments")),
+    "comments_youtube_disabled_text" => HTML.escape(I18n.translate(locale, "comments_youtube_disabled_text")),
+    "comments_youtube_disabled_try_reddit" => HTML.escape(I18n.translate(locale, "comments_youtube_disabled_try_reddit")),
     "reddit_comments_text" => HTML.escape(I18n.translate(locale, "View Reddit comments")),
     "reddit_permalink_text" => HTML.escape(I18n.translate(locale, "View more comments on Reddit")),
     "comments_text" => HTML.escape(I18n.translate(locale, "View `x` comments", "{commentCount}")),
@@ -63,6 +71,7 @@ we're going to need to do it here in order to allow for translations.
     "preferences" => preferences,
     "premiere_timestamp" => video.premiere_timestamp.try &.to_unix,
     "vr" => video.vr?,
+    "comments_enabled" => video.comments?,
     "projection_type" => video.projection_type,
     "local_disabled" => CONFIG.disabled?("local"),
     "support_reddit" => true,
@@ -289,6 +298,12 @@ we're going to need to do it here in order to allow for translations.
 
             <% end %>
             <div id="comments" class="comments">
+                <% if (params.comments <=> ["", ""]) == 0 %>
+                    <div id="comments-disabled-message" class="h-box v-box">
+                        <p><b><%= HTML.escape(I18n.translate(locale, "comments_invidious_disabled_text")) %></b></p>
+                    </div>
+                <% else %>
+                    <% if video.comments? %>
                         <% if nojs %>
                             <%= comment_html %>
                         <% else %>
@@ -298,6 +313,27 @@ we're going to need to do it here in order to allow for translations.
                                 </a>
                             </noscript>
                         <% end %>
+                    <% else %>
+                        <% if !nojs %>
+                            <div id="comments-turned-off-on-video-message" class="h-box v-box">
+                                <p><b><%= HTML.escape(I18n.translate(locale, "comments_youtube_disabled_text")) %></b></p>
+                                <p><b><button data-comments="reddit" id="try-reddit-comments-link" class="simulated_a">
+                                    <%= HTML.escape(I18n.translate(locale, "comments_youtube_disabled_try_reddit")) %>
+                                </button></b></p>
+                            </div>
+                        <% end %>
+
+                        <noscript>
+                            <% if nojs %>
+                                <%= comment_html %>
+                            <% else %>
+                                <a href="/watch?<%= env.params.query %>&nojs=1">
+                                    <%= I18n.translate(locale, "comments_youtube_disabled_try_reddit_no_js") %>
+                                </a>
+                            <% end %>
+                        </noscript>
+                    <% end %>
+                <% end %>
             </div>
         </div>
     </div>