Local API: Support extracting about information from YouTube's new about popup (#4370)

* Support extracting about information from YouTube's new about popup

* Update YouTube.js from 7.0.0 to 8.0.0

package.json

@@ -77,7 +77,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^7.0.0"
+    "youtubei.js": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",

src/renderer/components/channel-about/channel-about.js

@@ -24,6 +24,10 @@ export default defineComponent({
       type: Number,
       default: null
     },
+    videos: {
+      type: Number,
+      default: null
+    },
     location: {
       type: String,
       default: null
@@ -61,5 +65,9 @@ export default defineComponent({
     formattedViews: function () {
       return formatNumber(this.views)
     },
+
+    formattedVideos: function () {
+      return formatNumber(this.videos)
+    },
   }
 })

src/renderer/components/channel-about/channel-about.vue

@@ -12,7 +12,7 @@
       />
     </template>
     <template
-      v-if="joined || views !== null || location"
+      v-if="joined || views !== null || videos !== null || location"
     >
       <h2>{{ $t('Channel.About.Details') }}</h2>
       <table
@@ -38,6 +38,16 @@
           </th>
           <td>{{ formattedViews }}</td>
         </tr>
+        <tr
+          v-if="videos !== null"
+        >
+          <th
+            scope="row"
+          >
+            {{ $t('Global.Videos') }}
+          </th>
+          <td>{{ formattedVideos }}</td>
+        </tr>
         <tr
           v-if="location"
         >

src/renderer/views/Channel/Channel.js

@@ -70,7 +70,8 @@ export default defineComponent({
       communityContinuationData: null,
       description: '',
       tags: [],
-      views: 0,
+      viewCount: 0,
+      videoCount: 0,
       joined: 0,
       location: null,
       videoSortBy: 'newest',
@@ -670,7 +671,8 @@ export default defineComponent({
           this.getChannelAboutLocal()
         } else {
           this.description = ''
-          this.views = null
+          this.viewCount = null
+          this.videoCount = null
           this.joined = 0
           this.location = null
         }
@@ -742,14 +744,36 @@ export default defineComponent({
         const channel = this.channelInstance
         const about = await channel.getAbout()
 
-        this.description = about.description.isEmpty() ? '' : autolinker.link(about.description.text)
+        if (about.type === 'ChannelAboutFullMetadata') {
+          /** @type {import('youtubei.js').YTNodes.ChannelAboutFullMetadata} */
+          const about_ = about
 
-        const views = extractNumberFromString(about.view_count.text)
+          this.description = about_.description.isEmpty() ? '' : autolinker.link(about_.description.text)
-        this.views = isNaN(views) ? null : views
 
-        this.joined = about.joined_date.isEmpty() ? 0 : new Date(about.joined_date.text.replace('Joined').trim())
+          const viewCount = extractNumberFromString(about_.view_count.text)
+          this.viewCount = isNaN(viewCount) ? null : viewCount
 
-        this.location = about.country.isEmpty() ? null : about.country.text
+          this.videoCount = null
+
+          this.joined = about_.joined_date.isEmpty() ? 0 : new Date(about_.joined_date.text.replace('Joined').trim())
+
+          this.location = about_.country.isEmpty() ? null : about_.country.text
+        } else {
+          /** @type {import('youtubei.js').YTNodes.AboutChannelView} */
+          const metadata = about.metadata
+
+          this.description = metadata.description ? autolinker.link(metadata.description) : ''
+
+          const viewCount = extractNumberFromString(metadata.view_count)
+          this.viewCount = isNaN(viewCount) ? null : viewCount
+
+          const videoCount = extractNumberFromString(metadata.video_count)
+          this.videoCount = isNaN(videoCount) ? null : videoCount
+
+          this.joined = metadata.joined_date.isEmpty() ? 0 : new Date(metadata.joined_date.text.replace('Joined').trim())
+
+          this.location = metadata.country ?? null
+        }
       } catch (err) {
         console.error(err)
         const errorMessage = this.$t('Local API Error (Click to copy)')
@@ -961,7 +985,8 @@ export default defineComponent({
         this.thumbnailUrl = youtubeImageUrlToInvidious(thumbnail, this.currentInvidiousInstance)
         this.updateSubscriptionDetails({ channelThumbnailUrl: thumbnail, channelName: channelName, channelId: channelId })
         this.description = autolinker.link(response.description)
-        this.views = response.totalViews
+        this.viewCount = response.totalViews
+        this.videoCount = null
         this.joined = response.joined > 0 ? new Date(response.joined * 1000) : 0
         this.relatedChannels = response.relatedChannels.map((channel) => {
           const thumbnailUrl = channel.authorThumbnails.at(-1).url

src/renderer/views/Channel/Channel.vue

@@ -223,7 +223,8 @@
         id="aboutPanel"
         :description="description"
         :joined="joined"
-        :views="views"
+        :views="viewCount"
+        :videos="videoCount"
         :location="location"
         :tags="tags"
         :related-channels="relatedChannels"

yarn.lock

@@ -8985,10 +8985,10 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-youtubei.js@^7.0.0:
+youtubei.js@^8.0.0:
-  version "7.0.0"
+  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/youtubei.js/-/youtubei.js-7.0.0.tgz#1a3590e7f5c500c7f50d1edf99d1d763916799a7"
+  resolved "https://registry.yarnpkg.com/youtubei.js/-/youtubei.js-8.0.0.tgz#0fcbe332e263d9be6afe4e3d1917e9ddc1ffbed3"
-  integrity sha512-z87cv6AAjj0c98BkD0qTJvBDTF2DdT+FntJUjmi+vHY2EV+CepeYQAE/eLsdhGvCb6LrNBgGVwVUzXpHYi8NoA==
+  integrity sha512-kUwHvqoB5vfaGaY1quAGcX5JPIyjr5fjj9Zj/ZwUDCrermz/r5uIkNiJ5cNHkmAJbZP9fdygzNMvGHd7fM445g==
   dependencies:
     jintr "^1.1.0"
     tslib "^2.5.0"