Fix: Update thumbnail url and channel name for subscriptions when change detected (#1783)

* Update thumbnails of subscriptions

* refactor

* update channel names

* movie update thumbnail action to profiles.js

* fix updating with invidious

* apply code changes

* simplify update condition logic

* remove unneeded variables

* inline variables, use for of

* fix channel null check

src/renderer/store/modules/profiles.js

@@ -89,6 +89,31 @@ const actions = {
     commit('setProfileList', profiles)
   },
 
+  async updateSubscriptionDetails({ getters, dispatch }, { channelThumbnailUrl, channelName, channelId }) {
+    const thumbnail = channelThumbnailUrl?.replace(/=s\d*/, '=s176') ?? null // change thumbnail size if different
+    const profileList = getters.getProfileList
+    for (const profile of profileList) {
+      const currentProfileCopy = JSON.parse(JSON.stringify(profile))
+      const channel = currentProfileCopy.subscriptions.find((channel) => {
+        return channel.id === channelId
+      }) ?? null
+      if (channel === null) { continue }
+      let updated = false
+      if (channel.name !== channelName || (channel.thumbnail !== thumbnail && thumbnail !== null)) {
+        if (thumbnail !== null) {
+          channel.thumbnail = thumbnail
+        }
+        channel.name = channelName
+        updated = true
+      }
+      if (updated) {
+        await dispatch('updateProfile', currentProfileCopy)
+      } else { // channel has not been updated, stop iterating through profiles
+        break
+      }
+    }
+  },
+
   async createProfile({ commit }, profile) {
     try {
       const newProfile = await DBProfileHandlers.create(profile)

src/renderer/views/Channel/Channel.js

@@ -255,16 +255,19 @@ export default Vue.extend({
           return
         }
 
-        this.id = response.authorId
+        const channelId = response.authorId
-        this.channelName = response.author
+        const channelName = response.author
+        const channelThumbnailUrl = response.authorThumbnails[2].url
+        this.id = channelId
+        this.channelName = channelName
         document.title = `${this.channelName} - ${process.env.PRODUCT_NAME}`
         if (this.hideChannelSubscriptions || response.subscriberCount === 0) {
           this.subCount = null
         } else {
           this.subCount = response.subscriberCount.toFixed(0)
         }
-        console.log(response)
+        this.thumbnailUrl = channelThumbnailUrl
-        this.thumbnailUrl = response.authorThumbnails[2].url
+        this.updateSubscriptionDetails({ channelThumbnailUrl, channelName, channelId })
         this.channelDescription = autolinker.link(response.description)
         this.relatedChannels = response.relatedChannels.items
         this.relatedChannels.forEach(relatedChannel => {
@@ -371,15 +374,19 @@ export default Vue.extend({
         }
 
         console.log(response)
-        this.channelName = response.author
+        const channelName = response.author
+        const channelId = response.authorId
+        this.channelName = channelName
         document.title = `${this.channelName} - ${process.env.PRODUCT_NAME}`
-        this.id = response.authorId
+        this.id = channelId
         if (this.hideChannelSubscriptions) {
           this.subCount = null
         } else {
           this.subCount = response.subCount
         }
-        this.thumbnailUrl = response.authorThumbnails[3].url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+        const thumbnail = response.authorThumbnails[3].url
+        this.thumbnailUrl = thumbnail.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`)
+        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/`)
@@ -779,7 +786,8 @@ export default Vue.extend({
       'showToast',
       'updateProfile',
       'invidiousGetChannelInfo',
-      'invidiousAPICall'
+      'invidiousAPICall',
+      'updateSubscriptionDetails'
     ])
   }
 })

src/renderer/views/Playlist/Playlist.js

@@ -84,6 +84,12 @@ export default Vue.extend({
           infoSource: 'local'
         }
 
+        this.updateSubscriptionDetails({
+          channelThumbnailUrl: this.infoData.channelThumbnail,
+          channelName: this.infoData.channelName,
+          channelId: this.infoData.channelId
+        })
+
         this.playlistItems = result.items.map((video) => {
           if (typeof video.author !== 'undefined') {
             const channelName = video.author.name
@@ -136,6 +142,12 @@ export default Vue.extend({
           infoSource: 'invidious'
         }
 
+        this.updateSubscriptionDetails({
+          channelThumbnailUrl: result.authorThumbnails[2].url,
+          channelName: this.infoData.channelName,
+          channelId: this.infoData.channelId
+        })
+
         const dateString = new Date(result.updated * 1000)
         this.infoData.lastUpdated = dateString.toLocaleDateString(this.currentLocale, { year: 'numeric', month: 'short', day: 'numeric' })
 
@@ -174,7 +186,8 @@ export default Vue.extend({
 
     ...mapActions([
       'ytGetPlaylistInfo',
-      'invidiousGetPlaylistInfo'
+      'invidiousGetPlaylistInfo',
+      'updateSubscriptionDetails'
     ])
   }
 })

src/renderer/views/Watch/Watch.js

@@ -276,6 +276,12 @@ export default Vue.extend({
             this.channelName = result.player_response.videoDetails.author
             this.channelThumbnail = result.player_response.embedPreview.thumbnailPreviewRenderer.videoDetails.embeddedPlayerOverlayVideoDetailsRenderer.channelThumbnail.thumbnails[0].url
           }
+          this.updateSubscriptionDetails({
+            channelThumbnailUrl: this.channelThumbnail,
+            channelName: this.channelName,
+            channelId: this.channelId
+          })
+
           this.videoPublished = new Date(result.videoDetails.publishDate.replace('-', '/')).getTime()
           this.videoDescription = result.player_response.videoDetails.shortDescription
 
@@ -561,7 +567,14 @@ export default Vue.extend({
           }
           this.channelId = result.authorId
           this.channelName = result.author
-          this.channelThumbnail = result.authorThumbnails[1] ? result.authorThumbnails[1].url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`) : ''
+          const channelThumb = result.authorThumbnails[1]
+          this.channelThumbnail = channelThumb ? channelThumb.url.replace('https://yt3.ggpht.com', `${this.currentInvidiousInstance}/ggpht/`) : ''
+          this.updateSubscriptionDetails({
+            channelThumbnailUrl: channelThumb?.url,
+            channelName: result.author,
+            channelId: result.authorId
+          })
+
           this.videoPublished = result.published * 1000
           this.videoDescriptionHtml = result.descriptionHtml
           this.recommendedVideos = result.recommendedVideos
@@ -1268,7 +1281,8 @@ export default Vue.extend({
       'updateWatchProgress',
       'getUserDataPath',
       'ytGetVideoInformation',
-      'invidiousGetVideoInformation'
+      'invidiousGetVideoInformation',
+      'updateSubscriptionDetails'
     ])
   }
 })