[Bug]: Featured Channels throw error on click (only while using the Invidious API)

[MarmadileManteater]

Guidelines

• I have encountered this bug in the latest release of FreeTube.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.
• I have searched the documentation for information that matches the description of the bug I want to file, without success.

Describe the bug

1. Select "Invidious API" as the preferred API backend.
2. Navigate to a channel with featured channels.
3. Click on one of the featured channel icons.
   

The page remains the same except that the body changes to contain the text: "Could not get channel info".
I started debugging this issue in my fork (original issue: MarmadileManteater#12) because I thought it was something I introduced, but I found the issue was inside of ./src/renderer/views/Channel/Channel.vue, and I was able to replicate the issue on the newest release.

Expected Behavior

Clicking one of the featured channel icons should change the route to the id of that featured channel.

Issue Labels

API issue

FreeTube Version

v0.17.1

Operating System Version

Windows 10 Pro Version 21H2 Installed on ‎4/‎3/‎2022 OS build 19044.1889 Experience Windows Feature Experience Pack 120.2212.4180.0

Installation Method

.exe

Primary API used

Invidious API

Last Known Working FreeTube Version (If Any)

No response

Additional Information

I believe the issue is that the ft-channel-bubble element expects featured channels to contain the key "channelId".

<!-- line 130 of src/renderer/views/Channel/Channel.vue -->
<ft-channel-bubble
  v-for="(channel, index) in relatedChannels"
  :key="index"
  :channel-name="channel.author || channel.channelName"
  :channel-id="channel.channelId"
  :channel-thumbnail="channel.authorThumbnails[channel.authorThumbnails.length - 1].url"
  @click="goToChannel(channel.channelId)"
/>

The problem is that the response from the Invidious API only contains a key named "authorId", not "channelId". This could be fixed by mapping the "channelId" field to "authorId" inside of the getChannelInfoInvidious function in ./src/renderer/views/Channel/Channel.js. There already is a map for the related channels, so this could be fixed with one new line of code inside that map.

// line 417 of src/renderer/views/Channel/Channel.js
this.relatedChannels = response.relatedChannels.map((channel) => {
  channel.authorThumbnails[channel.authorThumbnails.length - 1].url = channel.authorThumbnails[channel.authorThumbnails.length - 1].url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
  // Mapping authorId to channelId
  channel.channelId = channel.authorId;
  return channel
})

Nightly Build

• I have encountered this bug in the latest nightly build.

[ChunkyProgrammer]

Would you like to create a PR for this issue or would you want someone else to create one?

[MarmadileManteater]

I can make one.