From 9523bc733a1ca63a6e6c667b815a694c3cf48be7 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Tue, 23 May 2023 05:37:59 +0800 Subject: [PATCH] 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 --- .../watch-video-comments.css | 18 ++++----- .../watch-video-comments.js | 40 ++++++++++++++++--- .../watch-video-comments.vue | 2 +- src/renderer/views/Watch/Watch.js | 12 ++++++ src/renderer/views/Watch/Watch.vue | 1 + 5 files changed, 58 insertions(+), 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 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 4fdfed181129b..3184b14c00fff 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 @@
-

+

{{ $t("There are no comments available for this video") }}

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index 8844c9fdae442..70481b1054855 100644 --- 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 index 3b9ba3d188fd3..be7af4f1dcea4 100644 --- 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" />