Add option to change thumbnail appearance

src/renderer/components/distraction-settings/distraction-settings.js

@@ -4,14 +4,25 @@ 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',
   components: {
     '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',
+        'hidden',
+        'blurred'
+      ]
+    }
   },
   computed: {
     hideVideoViews: function () {
@@ -92,6 +103,16 @@ export default defineComponent({
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
+    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.Hidden'),
+        this.$t('Settings.Distraction Free Settings.Thumbnail Display Mode.Blurred')
+      ]
+    },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
     },
@@ -144,7 +165,8 @@ export default defineComponent({
       'updateHideChannelReleases',
       'updateHideSubscriptionsVideos',
       'updateHideSubscriptionsShorts',
-      'updateHideSubscriptionsLive'
+      'updateHideSubscriptionsLive',
+      'updateThumbnailDisplayMode'
     ])
   }
 })

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -193,6 +193,13 @@
           :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"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

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

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

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

@@ -88,6 +88,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
     },
@@ -225,6 +233,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

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -23,6 +23,7 @@
           :src="thumbnail"
           class="thumbnailImage"
           alt=""
+          :style="{filter: thumbnailBlurStyle}"
         >
       </router-link>
       <div

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

src/renderer/components/playlist-info/playlist-info.vue

@@ -13,6 +13,7 @@
         <img
           :src="thumbnail"
           alt=""
+          :style="{filter: thumbnailBlurStyle}"
         >
       </router-link>
     </div>

src/renderer/scss-partials/_ft-list-item.scss

@@ -89,6 +89,7 @@ $watched-transition-duration: 0.5s;
 
     .thumbnailLink {
       display: flex;
+      overflow: hidden;
     }
 
     .thumbnailImage {

src/renderer/store/modules/settings.js

@@ -272,6 +272,7 @@ const state = {
     skip: 'doNothing'
   },
   thumbnailPreference: '',
+  thumbnailDisplayMode: 'default',
   useProxy: false,
   useRssFeeds: false,
   useSponsorBlock: false,

static/locales/en-US.yaml

@@ -360,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
+      Hidden: Hidden
+      Blurred: Blurred
   Data Settings:
     Data Settings: Data Settings
     Select Import Type: Select Import Type