Display currently watching viewer count on live streams (#4206)

* Display currently watching viewer count on live streams

* Improve watching count styling

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>

---------

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>

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);

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

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -42,7 +42,15 @@
       v-else
       class="relative"
     >
-      <h4>{{ $t("Video.Live Chat") }}</h4>
+      <h4>
+        {{ $t("Video.Live Chat") }}
+        <span
+          v-if="!hideVideoViews && watchingCount !== null"
+          class="watchingCount"
+        >
+          {{ $tc('Global.Counts.Watching Count', watchingCount, { count: formattedWatchingCount }) }}
+        </span>
+      </h4>
       <div
         v-if="superChatComments.length > 0"
         class="superChatComments"