Fix channel page ID handling (#2457)

* Fix channel page ID check race condition

* Correctly handle the different channel ID types

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

@@ -174,10 +174,11 @@ export default Vue.extend({
           }
 
           case 'channel': {
-            const { channelId, subPath } = result
+            const { channelId, idType, subPath } = result
 
             this.$router.push({
-              path: `/channel/${channelId}/${subPath}`
+              path: `/channel/${channelId}/${subPath}`,
+              query: { idType }
             })
             break
           }

src/renderer/store/modules/utils.js

@@ -621,7 +621,7 @@ const actions = {
     let urlType = 'unknown'
 
     const channelPattern =
-      /^\/(?:(c|channel|user)\/)?(?<channelId>[^/]+)(?:\/(join|featured|videos|playlists|about|community|channels))?\/?$/
+      /^\/(?:(?<type>channel|user|c)\/)?(?<channelId>[^/]+)(?:\/(join|featured|videos|playlists|about|community|channels))?\/?$/
 
     const typePatterns = new Map([
       ['playlist', /^\/playlist\/?$/],
@@ -719,7 +719,9 @@ const actions = {
 
       */
       case 'channel': {
-        const channelId = url.pathname.match(channelPattern).groups.channelId
+        const match = url.pathname.match(channelPattern)
+        const channelId = match.groups.channelId
+        const idType = ['channel', 'user', 'c'].indexOf(match.groups.type) + 1
         if (!channelId) {
           throw new Error('Channel: could not extract id')
         }
@@ -741,6 +743,7 @@ const actions = {
         return {
           urlType: 'channel',
           channelId,
+          idType,
           subPath
         }
       }

src/renderer/views/Channel/Channel.js

@@ -33,6 +33,7 @@ export default Vue.extend({
       isElementListLoading: false,
       currentTab: 'videos',
       id: '',
+      idType: 0,
       channelName: '',
       bannerUrl: '',
       thumbnailUrl: '',
@@ -170,7 +171,9 @@ export default Vue.extend({
   watch: {
     $route() {
       // react to route changes...
+      this.originalId = this.$route.params.id
       this.id = this.$route.params.id
+      this.idType = this.$route.query.idType ? Number(this.$route.query.idType) : 0
       this.currentTab = this.$route.params.currentTab ?? 'videos'
       this.latestVideosPage = 2
       this.searchPage = 2
@@ -232,7 +235,9 @@ export default Vue.extend({
     }
   },
   mounted: function () {
+    this.originalId = this.$route.params.id
     this.id = this.$route.params.id
+    this.idType = this.$route.query.idType ? Number(this.$route.query.idType) : 0
     this.currentTab = this.$route.params.currentTab ?? 'videos'
     this.isLoading = true
 
@@ -259,14 +264,14 @@ export default Vue.extend({
 
     getChannelInfoLocal: function () {
       this.apiUsed = 'local'
-      const expectedId = this.id
+      const expectedId = this.originalId
-      ytch.getChannelInfo({ channelId: expectedId }).then((response) => {
+      ytch.getChannelInfo({ channelId: this.id, channelIdType: this.idType }).then((response) => {
         if (response.alertMessage) {
           this.setErrorMessage(response.alertMessage)
           return
         }
         this.errorMessage = ''
-        if (expectedId !== this.id) {
+        if (expectedId !== this.originalId) {
           return
         }
 
@@ -274,6 +279,8 @@ export default Vue.extend({
         const channelName = response.author
         const channelThumbnailUrl = response.authorThumbnails[2].url
         this.id = channelId
+        // set the id type to 1 so that searching and sorting work
+        this.idType = 1
         this.channelName = channelName
         this.isFamilyFriendly = response.isFamilyFriendly
         document.title = `${this.channelName} - ${process.env.PRODUCT_NAME}`
@@ -332,9 +339,9 @@ export default Vue.extend({
 
     getChannelVideosLocal: function () {
       this.isElementListLoading = true
-      const expectedId = this.id
+      const expectedId = this.originalId
-      ytch.getChannelVideos({ channelId: expectedId, sortBy: this.videoSortBy }).then((response) => {
+      ytch.getChannelVideos({ channelId: this.id, channelIdType: this.idType, sortBy: this.videoSortBy }).then((response) => {
-        if (expectedId !== this.id) {
+        if (expectedId !== this.originalId) {
           return
         }
 
@@ -383,9 +390,9 @@ export default Vue.extend({
       this.isLoading = true
       this.apiUsed = 'invidious'
 
-      const expectedId = this.id
+      const expectedId = this.originalId
-      this.invidiousGetChannelInfo(expectedId).then((response) => {
+      this.invidiousGetChannelInfo(this.id).then((response) => {
-        if (expectedId !== this.id) {
+        if (expectedId !== this.originalId) {
           return
         }
 
@@ -463,9 +470,9 @@ export default Vue.extend({
     },
 
     getPlaylistsLocal: function () {
-      const expectedId = this.id
+      const expectedId = this.originalId
-      ytch.getChannelPlaylistInfo({ channelId: expectedId, sortBy: this.playlistSortBy }).then((response) => {
+      ytch.getChannelPlaylistInfo({ channelId: this.id, channelIdType: this.idType, sortBy: this.playlistSortBy }).then((response) => {
-        if (expectedId !== this.id) {
+        if (expectedId !== this.originalId) {
           return
         }
 
@@ -732,7 +739,7 @@ export default Vue.extend({
 
     searchChannelLocal: function () {
       if (this.searchContinuationString === '') {
-        ytch.searchChannel({ channelId: this.id, query: this.lastSearchQuery }).then((response) => {
+        ytch.searchChannel({ channelId: this.id, channelIdType: this.idType, query: this.lastSearchQuery }).then((response) => {
           console.log(response)
           this.searchResults = response.items
           this.isElementListLoading = false