Proxy channel profile icons and banners through Invidious when API is preferred

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

@@ -24,6 +24,9 @@ export default Vue.extend({
     }
   },
   computed: {
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
     listType: function () {
       return this.$store.getters.getListType
     },
@@ -53,7 +56,7 @@ export default Vue.extend({
     },
 
     parseInvidiousData: function () {
-      this.thumbnail = this.data.authorThumbnails[2].url
+      this.thumbnail = this.data.authorThumbnails[2].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
       this.channelName = this.data.author
       this.id = this.data.authorId
       if (this.hideChannelSubscriptions) {

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

@@ -29,6 +29,12 @@ export default Vue.extend({
     }
   },
   computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
     profileList: function () {
       return this.$store.getters.getProfileList
     },
@@ -42,7 +48,7 @@ export default Vue.extend({
   },
   watch: {
     profile: function () {
-      this.channels = [].concat(this.primaryProfile.subscriptions).sort((a, b) => {
+      this.channels = JSON.parse(JSON.stringify(this.primaryProfile.subscriptions)).sort((a, b) => {
         const nameA = a.name.toLowerCase()
         const nameB = b.name.toLowerCase()
         if (nameA < nameB) {
@@ -59,6 +65,9 @@ export default Vue.extend({
 
         return index === -1
       }).map((channel) => {
+        if (this.backendPreference === 'invidious') {
+          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
+        }
         channel.selected = false
         return channel
       })
@@ -66,7 +75,7 @@ export default Vue.extend({
   },
   mounted: function () {
     if (typeof this.profile.subscriptions !== 'undefined') {
-      this.channels = [].concat(this.profileList[0].subscriptions).sort((a, b) => {
+      this.channels = JSON.parse(JSON.stringify(this.profileList[0].subscriptions)).sort((a, b) => {
         const nameA = a.name.toLowerCase()
         const nameB = b.name.toLowerCase()
         if (nameA < nameB) {
@@ -83,6 +92,9 @@ export default Vue.extend({
 
         return index === -1
       }).map((channel) => {
+        if (this.backendPreference === 'invidious') {
+          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
+        }
         channel.selected = false
         return channel
       })

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

@@ -39,6 +39,12 @@ export default Vue.extend({
     }
   },
   computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
     profileList: function () {
       return this.$store.getters.getProfileList
     },
@@ -62,7 +68,7 @@ export default Vue.extend({
   },
   watch: {
     profile: function () {
-      this.subscriptions = [].concat(this.profile.subscriptions).sort((a, b) => {
+      this.subscriptions = JSON.parse(JSON.stringify(this.profile.subscriptions)).sort((a, b) => {
         const nameA = a.name.toLowerCase()
         const nameB = b.name.toLowerCase()
         if (nameA < nameB) {
@@ -73,6 +79,9 @@ export default Vue.extend({
         }
         return 0
       }).map((channel) => {
+        if (this.backendPreference === 'invidious') {
+          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
+        }
         channel.selected = false
         return channel
       })
@@ -80,7 +89,7 @@ export default Vue.extend({
   },
   mounted: function () {
     if (typeof this.profile.subscriptions !== 'undefined') {
-      this.subscriptions = [].concat(this.profile.subscriptions).sort((a, b) => {
+      this.subscriptions = JSON.parse(JSON.stringify(this.profile.subscriptions)).sort((a, b) => {
         const nameA = a.name.toLowerCase()
         const nameB = b.name.toLowerCase()
         if (nameA < nameB) {
@@ -91,6 +100,9 @@ export default Vue.extend({
         }
         return 0
       }).map((channel) => {
+        if (this.backendPreference === 'invidious') {
+          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
+        }
         channel.selected = false
         return channel
       })

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

@@ -13,6 +13,12 @@ export default Vue.extend({
     isOpen: function () {
       return this.$store.getters.getIsSideNavOpen
     },
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
     profileList: function () {
       return this.$store.getters.getProfileList
     },
@@ -31,6 +37,12 @@ export default Vue.extend({
           return 1
         }
         return 0
+      }).map((channel) => {
+        if (this.backendPreference === 'invidious') {
+          channel.thumbnail = channel.thumbnail.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
+        }
+
+        return channel
       })
     },
     hidePopularVideos: function () {

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -205,7 +205,7 @@ export default Vue.extend({
 
         const commentData = response.comments.map((comment) => {
           comment.showReplies = false
-          comment.authorThumb = comment.authorThumbnails[1].url
+          comment.authorThumb = comment.authorThumbnails[1].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
           if (this.hideCommentLikes) {
             comment.likes = null
           } else {
@@ -273,7 +273,7 @@ export default Vue.extend({
 
         const commentData = response.comments.map((comment) => {
           comment.showReplies = false
-          comment.authorThumb = comment.authorThumbnails[1].url
+          comment.authorThumb = comment.authorThumbnails[1].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
           if (this.hideCommentLikes) {
             comment.likes = null
           } else {

src/renderer/views/Channel/Channel.js

@@ -74,6 +74,10 @@ export default Vue.extend({
       return this.$store.getters.getBackendFallback
     },
 
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
+
     sessionSearchHistory: function () {
       return this.$store.getters.getSessionSearchHistory
     },
@@ -348,13 +352,17 @@ export default Vue.extend({
         } else {
           this.subCount = response.subCount
         }
-        this.thumbnailUrl = response.authorThumbnails[3].url
+        this.thumbnailUrl = response.authorThumbnails[3].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
         this.channelDescription = autolinker.link(response.description)
-        this.relatedChannels = response.relatedChannels
+        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.invidiousInstance}/ggpht/`)
+
+          return channel
+        })
         this.latestVideos = response.latestVideos
 
         if (typeof (response.authorBanners) !== 'undefined') {
-          this.bannerUrl = response.authorBanners[0].url
+          this.bannerUrl = response.authorBanners[0].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`)
         }
 
         this.isLoading = false

src/renderer/views/Playlist/Playlist.js

@@ -30,9 +30,11 @@ export default Vue.extend({
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
-
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
+    },
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
     }
   },
   watch: {
@@ -145,7 +147,7 @@ export default Vue.extend({
           viewCount: result.viewCount,
           videoCount: result.videoCount,
           channelName: result.author,
-          channelThumbnail: result.authorThumbnails[2].url,
+          channelThumbnail: result.authorThumbnails[2].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`),
           channelId: result.authorId,
           infoSource: 'invidious'
         }

src/renderer/views/Watch/Watch.js

@@ -448,7 +448,7 @@ export default Vue.extend({
           }
           this.channelId = result.authorId
           this.channelName = result.author
-          this.channelThumbnail = result.authorThumbnails[1] ? result.authorThumbnails[1].url : ''
+          this.channelThumbnail = result.authorThumbnails[1] ? result.authorThumbnails[1].url.replace('https://yt3.ggpht.com', `${this.invidiousInstance}/ggpht/`) : ''
           this.videoPublished = result.published * 1000
           this.videoDescriptionHtml = result.descriptionHtml
           this.recommendedVideos = result.recommendedVideos