From acf9b850c298b3569aac20092459d2af4a5b9a9d Mon Sep 17 00:00:00 2001 From: Preston Date: Tue, 13 Oct 2020 11:06:04 -0400 Subject: [PATCH] Proxy channel profile icons and banners through Invidious when API is preferred --- .../ft-list-channel/ft-list-channel.js | 5 ++++- .../ft-profile-all-channels-list.js | 16 ++++++++++++++-- .../ft-profile-channel-list.js | 16 ++++++++++++++-- src/renderer/components/side-nav/side-nav.js | 12 ++++++++++++ .../watch-video-comments/watch-video-comments.js | 4 ++-- src/renderer/views/Channel/Channel.js | 14 +++++++++++--- src/renderer/views/Playlist/Playlist.js | 6 ++++-- src/renderer/views/Watch/Watch.js | 2 +- 8 files changed, 62 insertions(+), 13 deletions(-) diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.js b/src/renderer/components/ft-list-channel/ft-list-channel.js index 7319b029..762b5560 100644 --- a/src/renderer/components/ft-list-channel/ft-list-channel.js +++ b/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) { diff --git a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.js b/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.js index 13eb84fa..b5bbcf04 100644 --- a/src/renderer/components/ft-profile-all-channels-list/ft-profile-all-channels-list.js +++ b/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 }) diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js index dbb57ba8..d5740bcb 100644 --- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.js +++ b/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 }) diff --git a/src/renderer/components/side-nav/side-nav.js b/src/renderer/components/side-nav/side-nav.js index 6b1e90b0..4edf9fd3 100644 --- a/src/renderer/components/side-nav/side-nav.js +++ b/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 () { diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js index ea103a0c..3364f028 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.js +++ b/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 { diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js index e793c2db..4563801a 100644 --- a/src/renderer/views/Channel/Channel.js +++ b/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 diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 463f3189..c9df0126 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/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' } diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index dd7c0967..048dbfa1 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/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