From 6334df0ad0d1617f2480f4ed69d5a16876ac9ba5 Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Mon, 8 Aug 2022 11:26:04 +0200 Subject: [PATCH] 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 | 5 ++-- src/renderer/store/modules/utils.js | 7 +++-- src/renderer/views/Channel/Channel.js | 33 +++++++++++++--------- 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js index 15e67e71..74791a8d 100644 --- a/src/renderer/components/top-nav/top-nav.js +++ b/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 } diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index d40732e2..4f6f26a2 100644 --- a/src/renderer/store/modules/utils.js +++ b/src/renderer/store/modules/utils.js @@ -621,7 +621,7 @@ const actions = { let urlType = 'unknown' const channelPattern = - /^\/(?:(c|channel|user)\/)?(?[^/]+)(?:\/(join|featured|videos|playlists|about|community|channels))?\/?$/ + /^\/(?:(?channel|user|c)\/)?(?[^/]+)(?:\/(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 } } diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js index d8765c2e..c8bc6e7f 100644 --- a/src/renderer/views/Channel/Channel.js +++ b/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 - ytch.getChannelInfo({ channelId: expectedId }).then((response) => { + const expectedId = this.originalId + 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 - ytch.getChannelVideos({ channelId: expectedId, sortBy: this.videoSortBy }).then((response) => { - if (expectedId !== this.id) { + const expectedId = this.originalId + ytch.getChannelVideos({ channelId: this.id, channelIdType: this.idType, sortBy: this.videoSortBy }).then((response) => { + if (expectedId !== this.originalId) { return } @@ -383,9 +390,9 @@ export default Vue.extend({ this.isLoading = true this.apiUsed = 'invidious' - const expectedId = this.id - this.invidiousGetChannelInfo(expectedId).then((response) => { - if (expectedId !== this.id) { + const expectedId = this.originalId + this.invidiousGetChannelInfo(this.id).then((response) => { + if (expectedId !== this.originalId) { return } @@ -463,9 +470,9 @@ export default Vue.extend({ }, getPlaylistsLocal: function () { - const expectedId = this.id - ytch.getChannelPlaylistInfo({ channelId: expectedId, sortBy: this.playlistSortBy }).then((response) => { - if (expectedId !== this.id) { + const expectedId = this.originalId + ytch.getChannelPlaylistInfo({ channelId: this.id, channelIdType: this.idType, sortBy: this.playlistSortBy }).then((response) => { + 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