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 <pikachuexe@gmail.com> * 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 <pikachuexe@gmail.com>
2023-08-31 17:18:52 +02:00 · 2023-08-31 17:18:52 +02:00 · 884ba91115
parent 1bcbb38065
commit 884ba91115
13 changed files with 71 additions and 6 deletions
--- a/src/renderer/assets/img/thumbnail_placeholder.svg
+++ b/src/renderer/assets/img/thumbnail_placeholder.svg
@ -0,0 +1 @@
+<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>
--- 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'
    ])
  }
 })
--- 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
--- 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
--- 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
--- 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`
      }
--- 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
--- 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')
      ]
    },

--- 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
--- 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>
--- 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 {
--- 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,
--- 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
				`@ -0,0 +1 @@`
				`<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>`