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
@@ -418,7 +423,7 @@ p.channel-name { margin: 0; overflow-wrap: anywhere;}
 p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
 
 .channel-profile > .channel-name,
-.channel-profile > .channel-name-pronouns >  .channel-name 
+.channel-profile > .channel-name-pronouns >  .channel-name
 {
   overflow-wrap: anywhere;
 }
@@ -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;
   }
@@ -909,4 +922,8 @@ h1, h2, h3, h4, h5, p,
   padding-left: 10px;
   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;