From 4b2ba552f6b06510cc912a118bcab40cdf916b0d Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Tue, 5 Sep 2023 09:27:52 +0800
Subject: [PATCH] ! Fix thumbnail not respecting backend preference

---
 .../ft-list-playlist/ft-list-playlist.js      | 27 +++++++++++--------
 .../ft-playlist-selector.js                   | 14 +++++++---
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.js b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
index 9c92ea3e7b8ea..654e5c97b9dd2 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -22,12 +22,15 @@ export default defineComponent({
       playlistId: '',
       channelId: '',
       title: 'Pop Music Playlist - Timeless Pop Songs (Updated Weekly 2020)',
-      thumbnail: 'https://i.ytimg.com/vi/JGwWNGJdvx8/mqdefault.jpg',
+      thumbnail: require('../../assets/img/thumbnail_placeholder.svg'),
       channelName: '#RedMusic: Just Hits',
       videoCount: 200,
     }
   },
   computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },
@@ -62,6 +65,9 @@ export default defineComponent({
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
+    thumbnailCanBeShown() {
+      return this.thumbnailPreference !== 'hidden'
+    },
   },
   created: function () {
     if (this.data._id != null) {
@@ -88,9 +94,7 @@ export default defineComponent({
 
     parseInvidiousData: function () {
       this.title = this.data.title
-      if (this.thumbnailPreference === 'hidden') {
-        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
-      } else {
+      if (this.thumbnailCanBeShown) {
         this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
       }
       this.channelName = this.data.author
@@ -105,9 +109,7 @@ export default defineComponent({
 
     parseLocalData: function () {
       this.title = this.data.title
-      if (this.thumbnailPreference === 'hidden') {
-        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
-      } else {
+      if (this.thumbnailCanBeShown) {
         this.thumbnail = this.data.thumbnail
       }
       this.channelName = this.data.channelName
@@ -118,10 +120,13 @@ export default defineComponent({
 
     parseUserData: function () {
       this.title = this.data.playlistName
-      if (this.thumbnailPreference === 'hidden' || this.data.videos.length === 0) {
-        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
-      } else {
-        this.thumbnail = `https://i.ytimg.com/vi/${this.data.videos[0].videoId}/mqdefault.jpg`
+      if (this.thumbnailCanBeShown && this.data.videos.length > 0) {
+        const thumbnailURL = `https://i.ytimg.com/vi/${this.data.videos[0].videoId}/mqdefault.jpg`
+        if (this.backendPreference === 'invidious') {
+          this.thumbnail = thumbnailURL.replace('https://i.ytimg.com', this.currentInvidiousInstance)
+        } else {
+          this.thumbnail = thumbnailURL
+        }
       }
       this.channelName = ''
       this.channelId = ''
diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js
index 4de8884c5aca1..e865056593e9f 100644
--- a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js
+++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js
@@ -28,11 +28,14 @@ export default Vue.extend({
   data: function () {
     return {
       title: '',
-      thumbnail: '',
+      thumbnail: require('../../assets/img/thumbnail_placeholder.svg'),
       videoCount: 0,
     }
   },
   computed: {
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },
@@ -51,9 +54,12 @@ export default Vue.extend({
     parseUserData: function () {
       this.title = this.data.playlistName
       if (this.data.videos.length > 0) {
-        this.thumbnail = `https://i.ytimg.com/vi/${this.data.videos[0].videoId}/mqdefault.jpg`
-      } else {
-        this.thumbnail = 'https://i.ytimg.com/vi/aaaaaa/mqdefault.jpg'
+        const thumbnailURL = `https://i.ytimg.com/vi/${this.data.videos[0].videoId}/mqdefault.jpg`
+        if (this.backendPreference === 'invidious') {
+          this.thumbnail = thumbnailURL.replace('https://i.ytimg.com', this.currentInvidiousInstance)
+        } else {
+          this.thumbnail = thumbnailURL
+        }
       }
       this.videoCount = this.data.videos.length
     },