Add option to change thumbnail appearance (#3890)

* Add option to blur thumbnails * Add dropdown for different thumbnail display modes * Add dropdown for different thumbnail display modes * Fix thumbnail display mode setting not appearing due to incorrect localization * Rename thumbnail display mode option 'Not Loaded' to 'Hidden' * Fix thumbnail display mode 'hidden' not working * Fix thumbnail display mode not applying to playlists Makes thumbnail display mode setting also affect thumbnails in ft-list-playlist and playlist-info. * Remove unnecessary styling Co-authored-by: PikachuEXE <[email protected]> * Make hidden thumbnails toggleable from thumbnail preferences * Replace thumbnail placeholder png with svg * Fix thumbnail preference 'hidden' not applying to ft-list-playlist * Fix placeholder svg breaking playlist layout * Refactor ft-list-video --------- Co-authored-by: PikachuEXE <[email protected]>
FreeTubeApp · Aug 31, 2023 · 884ba91 · 884ba91
1 parent 1bcbb38
commit 884ba91
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 6 deletions.
diff --git a/src/renderer/assets/img/thumbnail_placeholder.svg b/src/renderer/assets/img/thumbnail_placeholder.svg
diff --git a/src/renderer/components/distraction-settings/distraction-settings.js b/src/renderer/components/distraction-settings/distraction-settings.js
@@ -11,7 +11,7 @@ export default defineComponent({
     'ft-settings-section': FtSettingsSection,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-input-tags': FtInputTags,
-    'ft-flex-box': FtFlexBox
+    'ft-flex-box': FtFlexBox,
   },
   computed: {
     hideVideoViews: function () {
@@ -95,6 +95,12 @@ export default defineComponent({
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
+    thumbnailPreference: function () {
+      return this.$store.getters.getThumbnailPreference
+    },
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden)
     },
@@ -148,7 +154,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
@@ -199,6 +199,13 @@
           :default-value="hideSharingActions"
           @change="updateHideSharingActions"
         />
+        <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">
         <ft-toggle-switch

diff --git 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,18 @@ export default defineComponent({
 
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
+    },
+
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
+
+    blurThumbnailsStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : null
+    },
+
+    thumbnailPreference: function () {
+      return this.$store.getters.getThumbnailPreference
     }
   },
   created: function () {
@@ -67,7 +79,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.thumbnailPreference === 'hidden') {
+        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
+      } 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 +96,11 @@ export default defineComponent({
 
     parseLocalData: function () {
       this.title = this.data.title
-      this.thumbnail = this.data.thumbnail
+      if (this.thumbnailPreference === 'hidden') {
+        this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
+      } 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
@@ -17,6 +17,7 @@
           alt=""
           :src="thumbnail"
           class="thumbnailImage"
+          :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
@@ -88,6 +88,14 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
+
+    blurThumbnailsStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : null
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -239,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`
       }

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -24,6 +24,7 @@
           :src="thumbnail"
           class="thumbnailImage"
           alt=""
+          :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
@@ -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
@@ -42,6 +42,14 @@ export default defineComponent({
       return this.$store.getters.getThumbnailPreference
     },
 
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
+
+    blurThumbnailsStyle: function () {
+      return this.blurThumbnails ? 'blur(20px)' : null
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -51,6 +59,9 @@ 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

diff --git 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: blurThumbnailsStyle}"
         >
       </router-link>
     </div>

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
@@ -91,6 +91,7 @@ $watched-transition-duration: 0.5s;
 
     .thumbnailLink {
       display: flex;
+      overflow: hidden;
     }
 
     .thumbnailImage {

diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
@@ -273,6 +273,7 @@ const state = {
     skip: 'doNothing'
   },
   thumbnailPreference: '',
+  blurThumbnails: false,
   useProxy: false,
   useRssFeeds: false,
   useSponsorBlock: false,

diff --git 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
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ @@
             <img
               :src="thumbnail"
               alt=""
+              :style="{filter: blurThumbnailsStyle}"
             >
           </router-link>
         </div>
@@ Expand Down @@