diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css index fdf77ea22dda8..d73676000bbce 100644 --- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css +++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css @@ -22,6 +22,13 @@ row-gap: 16px; } +.watchingCount { + font-weight: normal; + margin-inline-start: 5px; + font-size: 15px; + color: var(--tertiary-text-color); +} + .message { font-size: 18px; color: var(--tertiary-text-color); diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js index 5eec0c10ea740..d225a6e3b128d 100644 --- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js +++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js @@ -6,6 +6,7 @@ import FtButton from '../ft-button/ft-button.vue' import autolinker from 'autolinker' import { getRandomColorClass } from '../../helpers/colors' import { getLocalVideoInfo, parseLocalTextRuns } from '../../helpers/api/local' +import { formatNumber } from '../../helpers/utils' export default defineComponent({ name: 'WatchVideoLiveChat', @@ -30,6 +31,7 @@ export default defineComponent({ }, data: function () { return { + /** @type {import('youtubei.js').YT.LiveChat|null} */ liveChatInstance: null, isLoading: true, hasError: false, @@ -52,7 +54,9 @@ export default defineComponent({ amount: '', colorClass: '' } - } + }, + /** @type {number|null} */ + watchingCount: null, } }, computed: { @@ -74,6 +78,14 @@ export default defineComponent({ scrollingBehaviour: function () { return this.$store.getters.getDisableSmoothScrolling ? 'auto' : 'smooth' + }, + + hideVideoViews: function () { + return this.$store.getters.getHideVideoViews + }, + + formattedWatchingCount: function () { + return this.watchingCount !== null ? formatNumber(this.watchingCount) : '0' } }, beforeDestroy: function () { @@ -181,6 +193,12 @@ export default defineComponent({ } }) + this.liveChatInstance.on('metadata-update', metadata => { + if (!this.hideVideoViews && metadata.views && !isNaN(metadata.views.original_view_count)) { + this.watchingCount = metadata.views.original_view_count + } + }) + this.liveChatInstance.once('end', () => { this.hasEnded = true this.liveChatInstance = null diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue index 3719372c10258..f34c1991349f8 100644 --- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue +++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue @@ -42,7 +42,15 @@ v-else class="relative" > -