From 2fd8a234c9a6e2148a69d268b079851c08c5bf38 Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Tue, 15 Aug 2023 16:43:23 +0200
Subject: [PATCH 01/13] Add option to blur thumbnails

---
 .../distraction-settings/distraction-settings.js          | 6 +++++-
 .../distraction-settings/distraction-settings.vue         | 6 ++++++
 src/renderer/components/ft-list-video/ft-list-video.js    | 8 ++++++++
 src/renderer/components/ft-list-video/ft-list-video.scss  | 4 ++++
 src/renderer/components/ft-list-video/ft-list-video.vue   | 1 +
 src/renderer/store/modules/settings.js                    | 1 +
 static/locales/en-US.yaml                                 | 1 +
 7 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index ea67fe25bd60b..8d4d0379d869c 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -92,6 +92,9 @@ export default defineComponent({
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
     },
@@ -144,7 +147,8 @@ export default defineComponent({
       'updateHideChannelReleases',
       'updateHideSubscriptionsVideos',
       'updateHideSubscriptionsShorts',
-      'updateHideSubscriptionsLive'
+      'updateHideSubscriptionsLive',
+      'updateBlurThumbnails'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index dc1af66a7663e..daf4f6506db9b 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -193,6 +193,12 @@
           :default-value="hideSharingActions"
           @change="updateHideSharingActions"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Blur Thumbnails')"
+          :compact="true"
+          :default-value="blurThumbnails"
+          @change="updateBlurThumbnails"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index b719ebf416aa7..bc9a391923e86 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -88,6 +88,14 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
+
+    blurStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : 'none'
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index 9969e06fc8529..86303ca127120 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/ft-list-video/ft-list-video.scss
@@ -1,5 +1,9 @@
 @use '../../scss-partials/_ft-list-item';
 
+.thumbnailLink {
+  overflow: hidden;
+}
+
 .thumbnailLink:hover {
   outline: 3px solid var(--side-nav-hover-color);
 }
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index e3a6303d5649f..ac9dfa89d3a6d 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -23,6 +23,7 @@
           :src="thumbnail"
           class="thumbnailImage"
           alt=""
+          :style="{filter: blurStyle}"
         >
       </router-link>
       <div
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index eee88814bdb9a..baaaf0ca3d980 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -166,6 +166,7 @@ const state = {
   backendFallback: process.env.IS_ELECTRON,
   backendPreference: !process.env.IS_ELECTRON ? 'invidious' : 'local',
   barColor: false,
+  blurThumbnails: false,
   checkForBlogPosts: true,
   checkForUpdates: true,
   baseTheme: 'system',
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 8a2e52fc107f1..d89807941ae49 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -332,6 +332,7 @@ Settings:
       Channel Page: Channel Page
       Watch Page: Watch Page
       General: General
+    Blur Thumbnails: Blur Thumbnails
     Hide Video Views: Hide Video Views
     Hide Video Likes And Dislikes: Hide Video Likes And Dislikes
     Hide Channel Subscribers: Hide Channel Subscribers

From 8a8ad12ee9e8d04e649e840154a34648638178f3 Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Tue, 15 Aug 2023 17:48:08 +0200
Subject: [PATCH 02/13] Add dropdown for different thumbnail display modes

---
 static/locales/en-US.yaml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index d89807941ae49..b289fdeed3dea 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -332,7 +332,6 @@ Settings:
       Channel Page: Channel Page
       Watch Page: Watch Page
       General: General
-    Blur Thumbnails: Blur Thumbnails
     Hide Video Views: Hide Video Views
     Hide Video Likes And Dislikes: Hide Video Likes And Dislikes
     Hide Channel Subscribers: Hide Channel Subscribers
@@ -361,6 +360,11 @@ Settings:
     Hide Subscriptions Videos: Hide Subscriptions Videos
     Hide Subscriptions Shorts: Hide Subscriptions Shorts
     Hide Subscriptions Live: Hide Subscriptions Live
+    Thumbnail Display Mode:
+      Thumbnail Display Mode: Thumbnail Display Mode
+      Default: Default
+      Not Loaded: Not Loaded
+      Blurred: Blurred
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type

From 7eb5c9e4a36d1c61a23bae7d5d8c8aac73f99a1c Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Tue, 15 Aug 2023 17:49:25 +0200
Subject: [PATCH 03/13] Add dropdown for different thumbnail display modes

---
 .../distraction-settings.js                   | 26 ++++++++++++++++---
 .../distraction-settings.vue                  | 11 ++++----
 .../components/ft-list-video/ft-list-video.js |  8 +++---
 src/renderer/store/modules/settings.js        |  2 +-
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 8d4d0379d869c..2865d4a988fa9 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -4,6 +4,7 @@ import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInputTags from '../../components/ft-input-tags/ft-input-tags.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtSelect from '../ft-select/ft-select.vue'
 
 export default defineComponent({
   name: 'PlayerSettings',
@@ -11,7 +12,17 @@ export default defineComponent({
     'ft-settings-section': FtSettingsSection,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-input-tags': FtInputTags,
-    'ft-flex-box': FtFlexBox
+    'ft-flex-box': FtFlexBox,
+    'ft-select': FtSelect
+  },
+  data: function () {
+    return {
+      thumbnailDisplayModeValues: [
+        'default',
+        'not-loaded',
+        'blurred'
+      ]
+    }
   },
   computed: {
     hideVideoViews: function () {
@@ -92,8 +103,15 @@ export default defineComponent({
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
-    blurThumbnails: function () {
-      return this.$store.getters.getBlurThumbnails
+    thumbnailDisplayMode: function () {
+      return this.$store.getters.getThumbnailDisplayMode
+    },
+    thumbnailDisplayModeNames: function () {
+      return [
+        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Default'),
+        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Not Loaded'),
+        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Blurred')
+      ]
     },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
@@ -148,7 +166,7 @@ export default defineComponent({
       'updateHideSubscriptionsVideos',
       'updateHideSubscriptionsShorts',
       'updateHideSubscriptionsLive',
-      'updateBlurThumbnails'
+      'updateThumbnailDisplayMode'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index daf4f6506db9b..b25abc461d1c9 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -193,11 +193,12 @@
           :default-value="hideSharingActions"
           @change="updateHideSharingActions"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Distraction Free Settings.Blur Thumbnails')"
-          :compact="true"
-          :default-value="blurThumbnails"
-          @change="updateBlurThumbnails"
+        <ft-select
+          :placeholder="$t('Settings.Distraction Free Settings.Thumbnail Display Mode')"
+          :value="thumbnailDisplayMode"
+          :select-names="thumbnailDisplayModeNames"
+          :select-values="thumbnailDisplayModeValues"
+          @change="updateThumbnailDisplayMode"
         />
       </div>
       <div class="switchColumn">
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index bc9a391923e86..b5df4138ff7db 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -88,12 +88,12 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
-    blurThumbnails: function () {
-      return this.$store.getters.getBlurThumbnails
+    thumbnailDisplayMode: function () {
+      return this.$store.getters.getThumbnailDisplayMode
     },
 
     blurStyle: function () {
-      return this.blurThumbnails ? 'blur(20px)' : 'none'
+      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
     },
 
     backendPreference: function () {
@@ -234,7 +234,7 @@ export default defineComponent({
 
     thumbnail: function () {
       let baseUrl
-      if (this.backendPreference === 'invidious') {
+      if (this.backendPreference === 'invidious' && this.thumbnailDisplayMode !== 'not-loaded') {
         baseUrl = this.currentInvidiousInstance
       } else {
         baseUrl = 'https://i.ytimg.com'
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index baaaf0ca3d980..c851183a664d8 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -166,7 +166,6 @@ const state = {
   backendFallback: process.env.IS_ELECTRON,
   backendPreference: !process.env.IS_ELECTRON ? 'invidious' : 'local',
   barColor: false,
-  blurThumbnails: false,
   checkForBlogPosts: true,
   checkForUpdates: true,
   baseTheme: 'system',
@@ -273,6 +272,7 @@ const state = {
     skip: 'doNothing'
   },
   thumbnailPreference: '',
+  thumbnailDisplayMode: 'default',
   useProxy: false,
   useRssFeeds: false,
   useSponsorBlock: false,

From f7b08190cbe64a32e7adea68e50a4ce2160fbfb4 Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Tue, 15 Aug 2023 21:17:56 +0200
Subject: [PATCH 04/13] Fix thumbnail display mode setting not appearing due to
 incorrect localization

---
 .../components/distraction-settings/distraction-settings.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index b25abc461d1c9..22f8f9b16d37f 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -194,7 +194,7 @@
           @change="updateHideSharingActions"
         />
         <ft-select
-          :placeholder="$t('Settings.Distraction Free Settings.Thumbnail Display Mode')"
+          :placeholder="$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Thumbnail Display Mode')"
           :value="thumbnailDisplayMode"
           :select-names="thumbnailDisplayModeNames"
           :select-values="thumbnailDisplayModeValues"

From 15cb05f71c140bb1204419c90f3fc0e70b88caeb Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Tue, 15 Aug 2023 21:20:28 +0200
Subject: [PATCH 05/13] Rename thumbnail display mode option 'Not Loaded' to
 'Hidden'

---
 .../components/distraction-settings/distraction-settings.js   | 4 ++--
 static/locales/en-US.yaml                                     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 2865d4a988fa9..0646df780a428 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -19,7 +19,7 @@ export default defineComponent({
     return {
       thumbnailDisplayModeValues: [
         'default',
-        'not-loaded',
+        'hidden',
         'blurred'
       ]
     }
@@ -109,7 +109,7 @@ export default defineComponent({
     thumbnailDisplayModeNames: function () {
       return [
         this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Default'),
-        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Not Loaded'),
+        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Hidden'),
         this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Blurred')
       ]
     },
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index b289fdeed3dea..22682cdcde337 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -363,7 +363,7 @@ Settings:
     Thumbnail Display Mode:
       Thumbnail Display Mode: Thumbnail Display Mode
       Default: Default
-      Not Loaded: Not Loaded
+      Hidden: Hidden
       Blurred: Blurred
   Data Settings:
     Data Settings: Data Settings

From acd5b58802613db92b9bd1527786be08f1069dba Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Wed, 16 Aug 2023 10:42:50 +0200
Subject: [PATCH 06/13] Fix thumbnail display mode 'hidden' not working

---
 .../assets/img/thumbnail_placeholder.png       | Bin 0 -> 461859 bytes
 .../components/ft-list-video/ft-list-video.js  |   7 +++++--
 .../components/ft-list-video/ft-list-video.vue |   2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/assets/img/thumbnail_placeholder.png

diff --git a/src/renderer/assets/img/thumbnail_placeholder.png b/src/renderer/assets/img/thumbnail_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..68f6b04c1577d17309f23e6a187c871f0926442d
GIT binary patch
literal 461859
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
Vhdr<S&VdeJcm1LJUi#}>{|{Beb>sj5

literal 0
HcmV?d00001

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index b5df4138ff7db..3c7a6b36f1cca 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -92,7 +92,7 @@ export default defineComponent({
       return this.$store.getters.getThumbnailDisplayMode
     },
 
-    blurStyle: function () {
+    thumbnailBlurStyle: function () {
       return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
     },
 
@@ -233,8 +233,11 @@ export default defineComponent({
     },
 
     thumbnail: function () {
+      if (this.thumbnailDisplayMode === 'hidden') {
+        return require('../../assets/img/thumbnail_placeholder.png')
+      }
       let baseUrl
-      if (this.backendPreference === 'invidious' && this.thumbnailDisplayMode !== 'not-loaded') {
+      if (this.backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
       } else {
         baseUrl = 'https://i.ytimg.com'
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index ac9dfa89d3a6d..f0d526af5fbc7 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -23,7 +23,7 @@
           :src="thumbnail"
           class="thumbnailImage"
           alt=""
-          :style="{filter: blurStyle}"
+          :style="{filter: thumbnailBlurStyle}"
         >
       </router-link>
       <div

From bdf71e99965f04c076663e7630fe04d93a1d522d Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Wed, 16 Aug 2023 11:13:48 +0200
Subject: [PATCH 07/13] Fix thumbnail display mode not applying to playlists

Makes thumbnail display mode setting also affect thumbnails in ft-list-playlist and playlist-info.
---
 .../ft-list-playlist/ft-list-playlist.js      | 20 +++++++++++++++++--
 .../ft-list-playlist/ft-list-playlist.vue     |  1 +
 .../ft-list-video/ft-list-video.scss          |  4 ----
 .../components/playlist-info/playlist-info.js | 11 ++++++++++
 .../playlist-info/playlist-info.vue           |  1 +
 src/renderer/scss-partials/_ft-list-item.scss |  1 +
 6 files changed, 32 insertions(+), 6 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 5eb0532e5bc48..5ad26caae50d4 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -42,6 +42,14 @@ export default defineComponent({
 
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
+    },
+
+    thumbnailDisplayMode: function () {
+      return this.$store.getters.getThumbnailDisplayMode
+    },
+
+    thumbnailBlurStyle: function () {
+      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
     }
   },
   created: function () {
@@ -67,7 +75,11 @@ export default defineComponent({
 
     parseInvidiousData: function () {
       this.title = this.data.title
-      this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
+      if (this.thumbnailDisplayMode === 'hidden') {
+        this.thumbnail = require('../../assets/img/thumbnail_placeholder.png')
+      } else {
+        this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
+      }
       this.channelName = this.data.author
       this.channelId = this.data.authorId
       this.playlistId = this.data.playlistId
@@ -80,7 +92,11 @@ export default defineComponent({
 
     parseLocalData: function () {
       this.title = this.data.title
-      this.thumbnail = this.data.thumbnail
+      if (this.thumbnailDisplayMode === 'hidden') {
+        this.thumbnail = require('../../assets/img/thumbnail_placeholder.png')
+      } else {
+        this.thumbnail = this.data.thumbnail
+      }
       this.channelName = this.data.channelName
       this.channelId = this.data.channelId
       this.playlistId = this.data.playlistId
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
index 18906c84a7d51..037c0c9e9101e 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
@@ -15,6 +15,7 @@
           alt=""
           :src="thumbnail"
           class="thumbnailImage"
+          :style="{filter: thumbnailBlurStyle}"
         >
       </router-link>
       <div
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index 86303ca127120..9969e06fc8529 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/ft-list-video/ft-list-video.scss
@@ -1,9 +1,5 @@
 @use '../../scss-partials/_ft-list-item';
 
-.thumbnailLink {
-  overflow: hidden;
-}
-
 .thumbnailLink:hover {
   outline: 3px solid var(--side-nav-hover-color);
 }
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index 01b779f9dc34b..65735ae6112c6 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -42,6 +42,14 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
+    thumbnailDisplayMode: function () {
+      return this.$store.getters.getThumbnailDisplayMode
+    },
+
+    thumbnailBlurStyle: function () {
+      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -51,6 +59,9 @@ export default defineComponent({
     },
 
     thumbnail: function () {
+      if (this.thumbnailDisplayMode === 'hidden') {
+        return require('../../assets/img/thumbnail_placeholder.png')
+      }
       let baseUrl
       if (this.backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index 1b254591200b4..320730d8e8552 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -13,6 +13,7 @@
         <img
           :src="thumbnail"
           alt=""
+          :style="{filter: thumbnailBlurStyle}"
         >
       </router-link>
     </div>
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index c3bb46f9adb78..731adf326faab 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -89,6 +89,7 @@ $watched-transition-duration: 0.5s;
 
     .thumbnailLink {
       display: flex;
+      overflow: hidden;
     }
 
     .thumbnailImage {

From 5e185c430428a907fb5ed246ebc43a0912a244a0 Mon Sep 17 00:00:00 2001
From: David Frederick Batt <103059637+da-batt@users.noreply.github.com>
Date: Wed, 16 Aug 2023 15:18:32 +0200
Subject: [PATCH 08/13] Remove unnecessary styling

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---
 src/renderer/components/ft-list-playlist/ft-list-playlist.js | 2 +-
 src/renderer/components/ft-list-video/ft-list-video.js       | 2 +-
 src/renderer/components/playlist-info/playlist-info.js       | 2 +-
 3 files changed, 3 insertions(+), 3 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 5ad26caae50d4..646136a320509 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -49,7 +49,7 @@ export default defineComponent({
     },
 
     thumbnailBlurStyle: function () {
-      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
+      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : null
     }
   },
   created: function () {
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 3c7a6b36f1cca..405374e3df63c 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -93,7 +93,7 @@ export default defineComponent({
     },
 
     thumbnailBlurStyle: function () {
-      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
+      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : null
     },
 
     backendPreference: function () {
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index 65735ae6112c6..7d46dd21f15a3 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -47,7 +47,7 @@ export default defineComponent({
     },
 
     thumbnailBlurStyle: function () {
-      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : 'none'
+      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : null
     },
 
     backendPreference: function () {

From e5c8402113c0ead077aed710afdf59bd26e93f8e Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Thu, 17 Aug 2023 17:05:41 +0200
Subject: [PATCH 09/13] Make hidden thumbnails toggleable from thumbnail
 preferences

---
 .../distraction-settings.js                   | 25 ++++---------------
 .../distraction-settings.vue                  | 12 ++++-----
 .../ft-list-playlist/ft-list-playlist.js      | 12 ++++-----
 .../ft-list-playlist/ft-list-playlist.vue     |  2 +-
 .../components/ft-list-video/ft-list-video.js | 10 ++++----
 .../ft-list-video/ft-list-video.vue           |  2 +-
 .../general-settings/general-settings.js      |  6 +++--
 .../components/playlist-info/playlist-info.js | 10 ++++----
 .../playlist-info/playlist-info.vue           |  2 +-
 src/renderer/store/modules/settings.js        |  2 +-
 static/locales/en-US.yaml                     |  7 ++----
 11 files changed, 37 insertions(+), 53 deletions(-)

diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
index 0646df780a428..bb4d4810ce395 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.js
+++ b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -4,7 +4,6 @@ import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInputTags from '../../components/ft-input-tags/ft-input-tags.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtSelect from '../ft-select/ft-select.vue'
 
 export default defineComponent({
   name: 'PlayerSettings',
@@ -13,16 +12,6 @@ export default defineComponent({
     'ft-toggle-switch': FtToggleSwitch,
     'ft-input-tags': FtInputTags,
     'ft-flex-box': FtFlexBox,
-    'ft-select': FtSelect
-  },
-  data: function () {
-    return {
-      thumbnailDisplayModeValues: [
-        'default',
-        'hidden',
-        'blurred'
-      ]
-    }
   },
   computed: {
     hideVideoViews: function () {
@@ -103,15 +92,11 @@ export default defineComponent({
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
-    thumbnailDisplayMode: function () {
-      return this.$store.getters.getThumbnailDisplayMode
+    thumbnailPreference: function () {
+      return this.$store.getters.getThumbnailPreference
     },
-    thumbnailDisplayModeNames: function () {
-      return [
-        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Default'),
-        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Hidden'),
-        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Blurred')
-      ]
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
     },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
@@ -166,7 +151,7 @@ export default defineComponent({
       'updateHideSubscriptionsVideos',
       'updateHideSubscriptionsShorts',
       'updateHideSubscriptionsLive',
-      'updateThumbnailDisplayMode'
+      'updateBlurThumbnails'
     ])
   }
 })
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 22f8f9b16d37f..fd0592f82bdab 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -193,12 +193,12 @@
           :default-value="hideSharingActions"
           @change="updateHideSharingActions"
         />
-        <ft-select
-          :placeholder="$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Thumbnail Display Mode')"
-          :value="thumbnailDisplayMode"
-          :select-names="thumbnailDisplayModeNames"
-          :select-values="thumbnailDisplayModeValues"
-          @change="updateThumbnailDisplayMode"
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Blur Thumbnails')"
+          :compact="true"
+          :default-value="blurThumbnails && thumbnailPreference !== 'hidden'"
+          :disabled="thumbnailPreference === 'hidden'"
+          v-on="thumbnailPreference === 'hidden' ? { change: updateBlurThumbnails(false) } : { change: updateBlurThumbnails}"
         />
       </div>
       <div class="switchColumn">
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 646136a320509..3a1f486ff4ef0 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -44,12 +44,12 @@ export default defineComponent({
       return this.$store.getters.getDefaultPlayback
     },
 
-    thumbnailDisplayMode: function () {
-      return this.$store.getters.getThumbnailDisplayMode
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
     },
 
-    thumbnailBlurStyle: function () {
-      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : null
+    blurThumbnailsStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : null
     }
   },
   created: function () {
@@ -75,7 +75,7 @@ export default defineComponent({
 
     parseInvidiousData: function () {
       this.title = this.data.title
-      if (this.thumbnailDisplayMode === 'hidden') {
+      if (this.thumbnailPreference === 'hidden') {
         this.thumbnail = require('../../assets/img/thumbnail_placeholder.png')
       } else {
         this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
@@ -92,7 +92,7 @@ export default defineComponent({
 
     parseLocalData: function () {
       this.title = this.data.title
-      if (this.thumbnailDisplayMode === 'hidden') {
+      if (this.thumbnailPreference === 'hidden') {
         this.thumbnail = require('../../assets/img/thumbnail_placeholder.png')
       } else {
         this.thumbnail = this.data.thumbnail
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
index 037c0c9e9101e..62891a6c351ac 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
@@ -15,7 +15,7 @@
           alt=""
           :src="thumbnail"
           class="thumbnailImage"
-          :style="{filter: thumbnailBlurStyle}"
+          :style="{filter: blurThumbnailsStyle}"
         >
       </router-link>
       <div
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 405374e3df63c..10b1fda603685 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -88,12 +88,12 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
-    thumbnailDisplayMode: function () {
-      return this.$store.getters.getThumbnailDisplayMode
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
     },
 
-    thumbnailBlurStyle: function () {
-      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : null
+    blurThumbnailsStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : null
     },
 
     backendPreference: function () {
@@ -233,7 +233,7 @@ export default defineComponent({
     },
 
     thumbnail: function () {
-      if (this.thumbnailDisplayMode === 'hidden') {
+      if (this.thumbnailPreference === 'hidden') {
         return require('../../assets/img/thumbnail_placeholder.png')
       }
       let baseUrl
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index f0d526af5fbc7..eb1af802b9663 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -23,7 +23,7 @@
           :src="thumbnail"
           class="thumbnailImage"
           alt=""
-          :style="{filter: thumbnailBlurStyle}"
+          :style="{filter: blurThumbnailsStyle}"
         >
       </router-link>
       <div
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index 17a7159293ca9..427bc54fe2008 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -48,7 +48,8 @@ export default defineComponent({
         '',
         'start',
         'middle',
-        'end'
+        'end',
+        'hidden'
       ],
       externalLinkHandlingValues: [
         '',
@@ -137,7 +138,8 @@ export default defineComponent({
         this.$t('Settings.General Settings.Thumbnail Preference.Default'),
         this.$t('Settings.General Settings.Thumbnail Preference.Beginning'),
         this.$t('Settings.General Settings.Thumbnail Preference.Middle'),
-        this.$t('Settings.General Settings.Thumbnail Preference.End')
+        this.$t('Settings.General Settings.Thumbnail Preference.End'),
+        this.$t('Settings.General Settings.Thumbnail Preference.Hidden')
       ]
     },
 
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index 7d46dd21f15a3..064199d9f4fe9 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -42,12 +42,12 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
-    thumbnailDisplayMode: function () {
-      return this.$store.getters.getThumbnailDisplayMode
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
     },
 
-    thumbnailBlurStyle: function () {
-      return this.thumbnailDisplayMode === 'blurred' ? 'blur(20px)' : null
+    blurThumbnailsStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : null
     },
 
     backendPreference: function () {
@@ -59,7 +59,7 @@ export default defineComponent({
     },
 
     thumbnail: function () {
-      if (this.thumbnailDisplayMode === 'hidden') {
+      if (this.thumbnailPreference === 'hidden') {
         return require('../../assets/img/thumbnail_placeholder.png')
       }
       let baseUrl
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index 320730d8e8552..bde5b5b083aef 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -13,7 +13,7 @@
         <img
           :src="thumbnail"
           alt=""
-          :style="{filter: thumbnailBlurStyle}"
+          :style="{filter: blurThumbnailsStyle}"
         >
       </router-link>
     </div>
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index c851183a664d8..e92c1070a68c7 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -272,7 +272,7 @@ const state = {
     skip: 'doNothing'
   },
   thumbnailPreference: '',
-  thumbnailDisplayMode: 'default',
+  blurThumbnails: false,
   useProxy: false,
   useRssFeeds: false,
   useSponsorBlock: false,
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 22682cdcde337..df4bef2b57078 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -166,6 +166,7 @@ Settings:
       Beginning: Beginning
       Middle: Middle
       End: End
+      Hidden: Hidden
     Current Invidious Instance: Current Invidious Instance
     The currently set default instance is {instance}: The currently set default instance is {instance}
     No default instance has been set: No default instance has been set
@@ -332,6 +333,7 @@ Settings:
       Channel Page: Channel Page
       Watch Page: Watch Page
       General: General
+    Blur Thumbnails: Blur Thumbnails
     Hide Video Views: Hide Video Views
     Hide Video Likes And Dislikes: Hide Video Likes And Dislikes
     Hide Channel Subscribers: Hide Channel Subscribers
@@ -360,11 +362,6 @@ Settings:
     Hide Subscriptions Videos: Hide Subscriptions Videos
     Hide Subscriptions Shorts: Hide Subscriptions Shorts
     Hide Subscriptions Live: Hide Subscriptions Live
-    Thumbnail Display Mode:
-      Thumbnail Display Mode: Thumbnail Display Mode
-      Default: Default
-      Hidden: Hidden
-      Blurred: Blurred
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type

From be249f2a59485c1a814ec23bf5d4b57367191838 Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Fri, 18 Aug 2023 10:05:40 +0200
Subject: [PATCH 10/13] Replace thumbnail placeholder png with svg

---
 .../assets/img/thumbnail_placeholder.png       | Bin 461859 -> 0 bytes
 .../assets/img/thumbnail_placeholder.svg       |   1 +
 .../ft-list-playlist/ft-list-playlist.js       |   4 ++--
 .../components/ft-list-video/ft-list-video.js  |   2 +-
 .../components/playlist-info/playlist-info.js  |   2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)
 delete mode 100644 src/renderer/assets/img/thumbnail_placeholder.png
 create mode 100644 src/renderer/assets/img/thumbnail_placeholder.svg

diff --git a/src/renderer/assets/img/thumbnail_placeholder.png b/src/renderer/assets/img/thumbnail_placeholder.png
deleted file mode 100644
index 68f6b04c1577d17309f23e6a187c871f0926442d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 461859
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
Vhdr<S&VdeJcm1LJUi#}>{|{Beb>sj5

diff --git a/src/renderer/assets/img/thumbnail_placeholder.svg b/src/renderer/assets/img/thumbnail_placeholder.svg
new file mode 100644
index 0000000000000..5057ad54615a1
--- /dev/null
+++ b/src/renderer/assets/img/thumbnail_placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.667 47.625"><path fill="#9e9e9e" d="M0 0h84.667v47.625H0z"/><path fill="#545454" d="M35.901 34.953V12.672l19.296 11.14z"/></svg>
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 3a1f486ff4ef0..473f57a1676de 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -76,7 +76,7 @@ export default defineComponent({
     parseInvidiousData: function () {
       this.title = this.data.title
       if (this.thumbnailPreference === 'hidden') {
-        this.thumbnail = require('../../assets/img/thumbnail_placeholder.png')
+        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
       } else {
         this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
       }
@@ -93,7 +93,7 @@ export default defineComponent({
     parseLocalData: function () {
       this.title = this.data.title
       if (this.thumbnailPreference === 'hidden') {
-        this.thumbnail = require('../../assets/img/thumbnail_placeholder.png')
+        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
       } else {
         this.thumbnail = this.data.thumbnail
       }
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 10b1fda603685..5bdde929ecc7e 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -234,7 +234,7 @@ export default defineComponent({
 
     thumbnail: function () {
       if (this.thumbnailPreference === 'hidden') {
-        return require('../../assets/img/thumbnail_placeholder.png')
+        return require('../../assets/img/thumbnail_placeholder.svg')
       }
       let baseUrl
       if (this.backendPreference === 'invidious') {
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index 064199d9f4fe9..bf0447a1a425f 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/src/renderer/components/playlist-info/playlist-info.js
@@ -60,7 +60,7 @@ export default defineComponent({
 
     thumbnail: function () {
       if (this.thumbnailPreference === 'hidden') {
-        return require('../../assets/img/thumbnail_placeholder.png')
+        return require('../../assets/img/thumbnail_placeholder.svg')
       }
       let baseUrl
       if (this.backendPreference === 'invidious') {

From d778bdbcee9540a6b33eff26a85054848ec1e485 Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Mon, 21 Aug 2023 09:26:54 +0200
Subject: [PATCH 11/13] Fix thumbnail preference 'hidden' not applying to
 ft-list-playlist

---
 src/renderer/components/ft-list-playlist/ft-list-playlist.js | 4 ++++
 1 file changed, 4 insertions(+)

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 473f57a1676de..5258bd32bde04 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -50,6 +50,10 @@ export default defineComponent({
 
     blurThumbnailsStyle: function () {
       return this.blurThumbnails ? 'blur(20px)' : null
+    },
+
+    thumbnailPreference: function () {
+      return this.$store.getters.getThumbnailPreference
     }
   },
   created: function () {

From 639d5b7129f2b0ad2cb83895d40848ddb04817b4 Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Mon, 21 Aug 2023 10:10:28 +0200
Subject: [PATCH 12/13] Fix placeholder svg breaking playlist layout

---
 src/renderer/assets/img/thumbnail_placeholder.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/assets/img/thumbnail_placeholder.svg b/src/renderer/assets/img/thumbnail_placeholder.svg
index 5057ad54615a1..aca0847aa3fd0 100644
--- a/src/renderer/assets/img/thumbnail_placeholder.svg
+++ b/src/renderer/assets/img/thumbnail_placeholder.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.667 47.625"><path fill="#9e9e9e" d="M0 0h84.667v47.625H0z"/><path fill="#545454" d="M35.901 34.953V12.672l19.296 11.14z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180"><rect width="320" height="180" x="-160" y="-90" transform="translate(160 90)" fill="#9e9e9e"/><path fill="#545454" d="M135.991 131.796V48.427l72.202 41.685z"/></svg>

From a41f9f28d74803ed08faa3635e4629376ac1c69d Mon Sep 17 00:00:00 2001
From: david-frederick-batt <github.rubbing122@slmail.me>
Date: Mon, 21 Aug 2023 18:31:45 +0200
Subject: [PATCH 13/13] Refactor ft-list-video

---
 src/renderer/components/ft-list-video/ft-list-video.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 5bdde929ecc7e..bfc0bb7d956df 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -233,9 +233,6 @@ export default defineComponent({
     },
 
     thumbnail: function () {
-      if (this.thumbnailPreference === 'hidden') {
-        return require('../../assets/img/thumbnail_placeholder.svg')
-      }
       let baseUrl
       if (this.backendPreference === 'invidious') {
         baseUrl = this.currentInvidiousInstance
@@ -250,6 +247,8 @@ export default defineComponent({
           return `${baseUrl}/vi/${this.id}/mq2.jpg`
         case 'end':
           return `${baseUrl}/vi/${this.id}/mq3.jpg`
+        case 'hidden':
+          return require('../../assets/img/thumbnail_placeholder.svg')
         default:
           return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
       }