diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css index 6a8aa47647f71..9da563ac891ef 100644 --- 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 index 42560289a855b..b51d7c1673344 100644 --- 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 index c718683d58377..172bf3e73bee9 100644 --- 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 @@