Fix comment section style inconsistency and more... (#3231)

* ! Fix YT comment loading for video with comment disabled * * Update video view w/ Local API to render video comment disabled as no comment * ! Fix style with less side effects
FreeTubeApp · May 22, 2023 · 9523bc7 · 9523bc7
1 parent 7ef638f
commit 9523bc7
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 15 deletions.
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -17,16 +17,18 @@
   color: var(--title-color);
 }
 
-.commentsTitle,
-.getMoreComments {
-  padding-bottom: 1em;
+.noCommentMsg {
   padding-top: 1em;
-}
+  padding-bottom: 1em;
 
-.center {
   text-align: center;
 }
 
+.commentsTitle {
+  padding-bottom: 1em;
+  padding-top: 1em;
+}
+
 .commentSort {
   float: right;
 }
@@ -36,10 +38,6 @@
   position: relative;
 }
 
-.comment:last-child {
-  padding-bottom: 0;
-}
-
 .hideComments {
   font-size: 13px;
   text-decoration: underline;
@@ -166,6 +164,8 @@
 }
 
 .getMoreComments {
+  padding-bottom: 1em;
+
   text-align: center;
   text-decoration: underline;
   cursor: pointer;

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
@@ -32,6 +32,10 @@ export default defineComponent({
       type: Boolean,
       required: true
     },
+    forceState: {
+      type: String,
+      default: null,
+    },
   },
   data: function () {
     return {
@@ -110,7 +114,20 @@ export default defineComponent({
       return this.commentData.length > 0 && !this.isLoading && this.showComments && this.nextPageToken
     },
   },
-
+  mounted: function () {
+    // region No comment detection
+    // For videos without any comment (comment disabled?)
+    // e.g. https://youtu.be/8NBSwDEf8a8
+    //
+    // `comments_entry_point_header` is null probably when comment disabled
+    if (this.forceState === 'noComment') {
+      this.commentData = []
+      this.nextPageToken = null
+      this.isLoading = false
+      this.showComments = true
+    }
+    // endregion No comment detection
+  },
   methods: {
     onTimestamp: function (timestamp) {
       this.$emit('timestamp-event', timestamp)
@@ -248,11 +265,24 @@ export default defineComponent({
         this.nextPageToken = response.continuation
         this.isLoading = false
         this.showComments = true
-      }).catch((xhr) => {
-        console.error(xhr)
+      }).catch((err) => {
+        // region No comment detection
+        // No comment related info when video info requested earlier in parent component
+        if (err.message.includes('Comments not found')) {
+          // For videos without any comment (comment disabled?)
+          // e.g. https://youtu.be/8NBSwDEf8a8
+          this.commentData = []
+          this.nextPageToken = null
+          this.isLoading = false
+          this.showComments = true
+          return
+        }
+        // endregion No comment detection
+
+        console.error(err)
         const errorMessage = this.$t('Invidious API Error (Click to copy)')
-        showToast(`${errorMessage}: ${xhr.responseText}`, 10000, () => {
-          copyToClipboard(xhr.responseText)
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
+          copyToClipboard(err)
         })
         if (process.env.IS_ELECTRON && this.backendFallback && this.backendPreference === 'invidious') {
           showToast(this.$t('Falling back to local API'))

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue
@@ -233,7 +233,7 @@
     <div
       v-else-if="showComments && !isLoading"
     >
-      <h3 class="center">
+      <h3 class="noCommentMsg">
         {{ $t("There are no comments available for this video") }}
       </h3>
     </div>

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -118,6 +118,7 @@ export default defineComponent({
       playNextTimeout: null,
       playNextCountDownIntervalId: null,
       infoAreaSticky: true,
+      commentsEnabled: true,
     }
   },
   computed: {
@@ -673,6 +674,17 @@ export default defineComponent({
           }
         }
 
+        // region No comment detection
+        // For videos without any comment (comment disabled?)
+        // e.g. https://youtu.be/8NBSwDEf8a8
+        //
+        // `comments_entry_point_header` is null probably when comment disabled
+        // e.g. https://youtu.be/8NBSwDEf8a8
+        // However videos with comments enabled but have no comment
+        // are different (which is not detected here)
+        this.commentsEnabled = result.comments_entry_point_header != null
+        // endregion No comment detection
+
         this.isLoading = false
         this.updateTitle()
       } catch (err) {

diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
@@ -144,6 +144,7 @@
         :channel-thumbnail="channelThumbnail"
         :channel-name="channelName"
         :video-player-ready="videoPlayerReady"
+        :force-state="commentsEnabled ? null : 'noComment'"
         @timestamp-event="changeTimestamp"
       />
     </div>