fix issue with replacing thumbnails

src/renderer/components/ft-list-channel/ft-list-channel.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import i18n from '../../i18n/index'
-
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 export default Vue.extend({
   name: 'FtListChannel',
   props: {
@@ -76,14 +76,9 @@ export default Vue.extend({
 
     parseInvidiousData: function () {
       // Can be prefixed with `https://` or `//` (protocol relative)
-      let thumbnailUrl = this.data.authorThumbnails[2].url
-
-      // Update protocol relative URL to be prefixed with `https://`
-      if (thumbnailUrl.startsWith('//')) {
-        thumbnailUrl = `https:${thumbnailUrl}`
-      }
+      const thumbnailUrl = this.data.authorThumbnails[2].url
 
-      this.thumbnail = thumbnailUrl.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+      this.thumbnail = youtubeImageUrlToInvidious(thumbnailUrl, this.currentInvidiousInstance)
 
       this.channelName = this.data.author
       this.id = this.data.authorId

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js

@@ -7,6 +7,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 import { showToast } from '../../helpers/utils'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'FtProfileChannelList',
@@ -80,7 +81,7 @@ export default Vue.extend({
         return 0
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel
@@ -101,7 +102,7 @@ export default Vue.extend({
         return 0
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel

src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.js

@@ -7,6 +7,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import FtButton from '../../components/ft-button/ft-button.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import { showToast } from '../../helpers/utils'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'FtProfileFilterChannelsList',
@@ -71,7 +72,7 @@ export default Vue.extend({
         return index === -1
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel
@@ -98,7 +99,7 @@ export default Vue.extend({
         return index === -1
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
         channel.selected = false
         return channel

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

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
+import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'SideNav',
@@ -41,7 +42,7 @@ export default Vue.extend({
         return 0
       }).map((channel) => {
         if (this.backendPreference === 'invidious') {
-          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          channel.thumbnail = youtubeImageUrlToInvidious(channel.thumbnail, this.currentInvidiousInstance)
         }
 
         return channel

src/renderer/helpers/api/invidious.js

@@ -93,11 +93,26 @@ export async function invidiousGetCommentReplies({ id, replyToken }) {
   return { commentData: parseInvidiousCommentData(response), continuation: response.continuation ?? null }
 }
 
+export function youtubeImageUrlToInvidious(url, currentInstance = null) {
+  if (currentInstance === null) {
+    currentInstance = getCurrentInstance()
+  }
+  // Can be prefixed with `https://` or `//` (protocol relative)
+  if (url.startsWith('//')) {
+    url = 'https:' + url
+  }
+  return url.replace('https://yt3.ggpht.com', `${currentInstance}/ggpht/`)
+}
+
+export function invidiousImageUrlToInvidious(url, currentInstance = null) {
+  return url.replace(/^.+(ggpht.+)/, currentInstance)
+}
+
 function parseInvidiousCommentData(response) {
   return response.comments.map((comment) => {
     comment.showReplies = false
     comment.authorLink = comment.authorId
-    comment.authorThumb = comment.authorThumbnails[1].url.replace('https://yt3.ggpht.com', `${getCurrentInstance()}/ggpht/`)
+    comment.authorThumb = youtubeImageUrlToInvidious(comment.authorThumbnails[1].url)
     comment.likes = comment.likeCount
     comment.text = autolinker.link(stripHTML(comment.content))
     comment.dataType = 'invidious'

src/renderer/views/Channel/Channel.js

@@ -17,7 +17,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
 import i18n from '../../i18n/index'
 import { copyToClipboard, showToast } from '../../helpers/utils'
 import packageDetails from '../../../../package.json'
-import { invidiousAPICall, invidiousGetChannelInfo } from '../../helpers/api/invidious'
+import { invidiousAPICall, invidiousGetChannelInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'Search',
@@ -389,18 +389,21 @@ export default Vue.extend({
           this.subCount = response.subCount
         }
         const thumbnail = response.authorThumbnails[3].url
-        this.thumbnailUrl = thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+        this.thumbnailUrl = youtubeImageUrlToInvidious(thumbnail, this.currentInvidiousInstance)
         this.updateSubscriptionDetails({ channelThumbnailUrl: thumbnail, channelName: channelName, channelId: channelId })
         this.channelDescription = autolinker.link(response.description)
         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/`)
+          channel.authorThumbnails = channel.authorThumbnails.map(thumbnail => {
+            thumbnail.url = youtubeImageUrlToInvidious(thumbnail.url, this.currentInvidiousInstance)
+            return thumbnail
+          })
           channel.channelId = channel.authorId
           return channel
         })
         this.latestVideos = response.latestVideos
 
         if (response.authorBanners instanceof Array && response.authorBanners.length > 0) {
-          this.bannerUrl = response.authorBanners[0].url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+          this.bannerUrl = youtubeImageUrlToInvidious(response.authorBanners[0].url, this.currentInvidiousInstance)
         } else {
           this.bannerUrl = null
         }

src/renderer/views/Playlist/Playlist.js

@@ -9,7 +9,7 @@ import FtButton from '../../components/ft-button/ft-button.vue'
 import i18n from '../../i18n/index'
 import { getLocalPlaylist, parseLocalPlaylistVideo } from '../../helpers/api/local'
 import { extractNumberFromString } from '../../helpers/utils'
-import { invidiousGetPlaylistInfo } from '../../helpers/api/invidious'
+import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'Playlist',
@@ -134,7 +134,7 @@ export default Vue.extend({
           viewCount: result.viewCount,
           videoCount: result.videoCount,
           channelName: result.author,
-          channelThumbnail: result.authorThumbnails[2].url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`),
+          channelThumbnail: youtubeImageUrlToInvidious(result.authorThumbnails[2].url, this.currentInvidiousInstance),
           channelId: result.authorId,
           infoSource: 'invidious'
         }

src/renderer/views/SubscribedChannels/SubscribedChannels.js

@@ -7,7 +7,7 @@ import FtInput from '../../components/ft-input/ft-input.vue'
 import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 import ytch from 'yt-channel-info'
 import { showToast } from '../../helpers/utils'
-import { invidiousGetChannelInfo } from '../../helpers/api/invidious'
+import { invidiousGetChannelInfo, youtubeImageUrlToInvidious, invidiousImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'SubscribedChannels',
@@ -25,9 +25,7 @@ export default Vue.extend({
       filteredChannels: [],
       re: {
         url: /(.+=\w)\d+(.+)/,
-        ivToIv: /^.+(ggpht.+)/,
-        ivToYt: /^.+ggpht\/(.+)/,
-        ytToIv: /^.+ggpht\.com\/(.+)/
+        ivToYt: /^.+ggpht\/(.+)/
       },
       thumbnailSize: 176,
       ytBaseURL: 'https://yt3.ggpht.com',
@@ -166,13 +164,13 @@ export default Vue.extend({
       let newURL = originalURL
       if (new URL(originalURL).hostname === 'yt3.ggpht.com') {
         if (this.backendPreference === 'invidious') { // YT to IV
-          newURL = originalURL.replace(this.re.ytToIv, `${this.currentInvidiousInstance}/ggpht/$1`)
+          newURL = youtubeImageUrlToInvidious(originalURL, this.currentInvidiousInstance)
         }
       } else {
         if (this.backendPreference === 'local') { // IV to YT
           newURL = originalURL.replace(this.re.ivToYt, `${this.ytBaseURL}/$1`)
         } else { // IV to IV
-          newURL = originalURL.replace(this.re.ivToIv, `${this.currentInvidiousInstance}/$1`)
+          newURL = invidiousImageUrlToInvidious(originalURL, this.currentInvidiousInstance)
         }
       }
 

src/renderer/views/Watch/Watch.js

@@ -27,7 +27,7 @@ import {
   parseLocalTextRuns,
   parseLocalWatchNextVideo
 } from '../../helpers/api/local'
-import { invidiousGetVideoInformation } from '../../helpers/api/invidious'
+import { invidiousGetVideoInformation, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
 
 export default Vue.extend({
   name: 'Watch',
@@ -676,7 +676,7 @@ export default Vue.extend({
           this.channelId = result.authorId
           this.channelName = result.author
           const channelThumb = result.authorThumbnails[1]
-          this.channelThumbnail = channelThumb ? channelThumb.url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`) : ''
+          this.channelThumbnail = channelThumb ? youtubeImageUrlToInvidious(channelThumb.url, this.currentInvidiousInstance) : ''
           this.updateSubscriptionDetails({
             channelThumbnailUrl: channelThumb?.url,
             channelName: result.author,