Fix channel page ID handling (#2457)

* Fix channel page ID check race condition

* Correctly handle the different channel ID types
This commit is contained in:
absidue 2022-08-08 11:26:04 +02:00 committed by GitHub
parent fa012972bd
commit 6334df0ad0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 17 deletions

View File

@ -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
}

View File

@ -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
}
}

View File

@ -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