Migrate channel related functionality to YouTube.js

_scripts/webpack.renderer.config.js

@@ -134,13 +134,7 @@ const config = {
     alias: {
       vue$: 'vue/dist/vue.common.js',
 
-      // use the web version of linkedom
-      linkedom$: 'linkedom/worker',
-
-      // defaults to the prebundled browser version which causes webpack to error with:
-      // "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
-      // webpack likes to bundle the dependencies itself, could really have a better error message though
-      'youtubei.js$': 'youtubei.js/dist/browser.js',
+      'youtubei.js$': 'youtubei.js/web',
     },
     extensions: ['.js', '.vue']
   },

_scripts/webpack.web.config.js

@@ -22,17 +22,10 @@ const config = {
     path: path.join(__dirname, '../dist/web'),
     filename: '[name].js',
   },
-  externals: [
-    {
-      electron: '{}'
-    },
-    ({ request }, callback) => {
-      if (request.startsWith('youtubei.js')) {
-        return callback(null, '{}')
-      }
-      callback()
-    }
-  ],
+  externals: {
+    electron: '{}',
+    'youtubei.js': '{}'
+  },
   module: {
     rules: [
       {

package.json

@@ -75,8 +75,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2",
-    "youtubei.js": "^2.9.0",
-    "yt-channel-info": "^3.2.1"
+    "youtubei.js": "^3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/renderer/App.js

@@ -430,11 +430,14 @@ export default defineComponent({
           }
 
           case 'channel': {
-            const { channelId, subPath } = result
+            const { channelId, subPath, url } = result
 
             openInternalPath({
               path: `/channel/${channelId}/${subPath}`,
-              doCreateNewWindow
+              doCreateNewWindow,
+              query: {
+                url
+              }
             })
             break
           }

src/renderer/components/data-settings/data-settings.js

@@ -6,7 +6,6 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
 
-import ytch from 'yt-channel-info'
 import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
 import {
   copyToClipboard,
@@ -17,6 +16,7 @@ import {
   writeFileFromDialog
 } from '../../helpers/utils'
 import { invidiousAPICall } from '../../helpers/api/invidious'
+import { getLocalChannel } from '../../helpers/api/local'
 
 export default defineComponent({
   name: 'DataSettings',
@@ -967,25 +967,32 @@ export default defineComponent({
       })
     },
 
-    getChannelInfoLocal: function (channelId) {
-      return new Promise((resolve, reject) => {
-        ytch.getChannelInfo({ channelId: channelId }).then(async (response) => {
-          resolve(response)
-        }).catch((err) => {
-          console.error(err)
-          const errorMessage = this.$t('Local API Error (Click to copy)')
-          showToast(`${errorMessage}: ${err}`, 10000, () => {
-            copyToClipboard(err)
-          })
+    getChannelInfoLocal: async function (channelId) {
+      try {
+        const channel = await getLocalChannel(channelId)
 
-          if (this.backendFallback && this.backendPreference === 'local') {
-            showToast(this.$t('Falling back to the Invidious API'))
-            resolve(this.getChannelInfoInvidious(channelId))
-          } else {
-            resolve([])
-          }
+        if (channel.alert) {
+          return undefined
+        }
+
+        return {
+          author: channel.header.author.name,
+          authorThumbnails: channel.header.author.thumbnails
+        }
+      } catch (err) {
+        console.error(err)
+        const errorMessage = this.$t('Local API Error (Click to copy)')
+        showToast(`${errorMessage}: ${err}`, 10000, () => {
+          copyToClipboard(err)
         })
-      })
+
+        if (this.backendFallback && this.backendPreference === 'local') {
+          showToast(this.$t('Falling back to the Invidious API'))
+          return await this.getChannelInfoInvidious(channelId)
+        } else {
+          return []
+        }
+      }
     },
 
     /*

src/renderer/components/top-nav/top-nav.js

@@ -175,12 +175,14 @@ export default defineComponent({
           }
 
           case 'channel': {
-            const { channelId, idType, subPath } = result
+            const { channelId, subPath, url } = result
 
             openInternalPath({
               path: `/channel/${channelId}/${subPath}`,
-              query: { idType },
-              doCreateNewWindow
+              doCreateNewWindow,
+              query: {
+                url
+              }
             })
             break
           }

src/renderer/helpers/api/invidious.js

@@ -6,7 +6,7 @@ function getCurrentInstance() {
   return store.getters.getCurrentInvidiousInstance
 }
 
-export function invidiousAPICall({ resource, id = '', params = {} }) {
+export function invidiousAPICall({ resource, id = '', params = {}, doLogError = true }) {
   return new Promise((resolve, reject) => {
     const requestUrl = getCurrentInstance() + '/api/v1/' + resource + '/' + id + '?' + new URLSearchParams(params).toString()
 
@@ -19,12 +19,39 @@ export function invidiousAPICall({ resource, id = '', params = {} }) {
         resolve(json)
       })
       .catch((error) => {
-        console.error('Invidious API error', requestUrl, error)
+        if (doLogError) {
+          console.error('Invidious API error', requestUrl, error)
+        }
         reject(error)
       })
   })
 }
 
+/**
+ * Gets the channel ID for a channel URL
+ * used to get the ID for channel usernames and handles
+ * @param {string} url
+ */
+export async function invidiousGetChannelId(url) {
+  try {
+    const response = await invidiousAPICall({
+      resource: 'resolveurl',
+      params: {
+        url
+      },
+      doLogError: false
+    })
+
+    if (response.pageType === 'WEB_PAGE_TYPE_CHANNEL') {
+      return response.ucid
+    } else {
+      return null
+    }
+  } catch {
+    return null
+  }
+}
+
 export async function invidiousGetChannelInfo(channelId) {
   return await invidiousAPICall({
     resource: 'channels',