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:
parent
fa012972bd
commit
6334df0ad0
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue