Chores: move 'blur' to be thumbnailPreference, move 1 dep to devDependencies (#4218)

* Chore: move stylelint-use-logical-spec to devDependencies

* Update blur to be a thumbnail preference instead of its own ft-toggle-switch

* Update en-US.yaml

package.json

@@ -65,7 +65,6 @@
     "marked": "^9.1.3",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
-    "stylelint-use-logical-spec": "^5.0.0",
     "video.js": "7.21.5",
     "videojs-contrib-quality-levels": "^3.0.0",
     "videojs-http-source-selector": "^1.1.6",
@@ -120,6 +119,7 @@
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-high-performance-animation": "^1.9.0",
+    "stylelint-use-logical-spec": "^5.0.0",
     "tree-kill": "1.2.2",
     "vue-devtools": "^5.1.4",
     "vue-eslint-parser": "^9.3.2",

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

@@ -98,12 +98,6 @@ 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)
     },
@@ -159,7 +153,6 @@ export default defineComponent({
       'updateHideSubscriptionsShorts',
       'updateHideSubscriptionsLive',
       'updateHideSubscriptionsCommunity',
-      'updateBlurThumbnails'
     ])
   }
 })

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

@@ -205,13 +205,6 @@
           :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

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

@@ -50,7 +50,8 @@ export default defineComponent({
         'start',
         'middle',
         'end',
-        'hidden'
+        'hidden',
+        'blur'
       ],
       externalLinkHandlingValues: [
         '',
@@ -69,6 +70,9 @@ export default defineComponent({
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
+    blurThumbnails: function () {
+      return this.$store.getters.getBlurThumbnails
+    },
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
     },
@@ -88,7 +92,7 @@ export default defineComponent({
       return this.$store.getters.getListType
     },
     thumbnailPreference: function () {
-      return this.$store.getters.getThumbnailPreference
+      return this.blurThumbnails ? 'blur' : this.$store.getters.getThumbnailPreference
     },
     currentLocale: function () {
       return this.$store.getters.getCurrentLocale
@@ -140,7 +144,8 @@ export default defineComponent({
         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.Hidden')
+        this.$t('Settings.General Settings.Thumbnail Preference.Hidden'),
+        this.$t('Settings.General Settings.Thumbnail Preference.Blur')
       ]
     },
 
@@ -203,6 +208,11 @@ export default defineComponent({
       }
     },
 
+    handleThumbnailPreferenceChange: function (value) {
+      this.updateBlurThumbnails(value === 'blur')
+      this.updateThumbnailPreference(value)
+    },
+
     ...mapMutations([
       'setCurrentInvidiousInstance'
     ]),
@@ -210,6 +220,7 @@ export default defineComponent({
     ...mapActions([
       'updateEnableSearchSuggestions',
       'updateBackendFallback',
+      'updateBlurThumbnails',
       'updateCheckForUpdates',
       'updateCheckForBlogPosts',
       'updateBarColor',

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

@@ -63,7 +63,7 @@
         :select-names="thumbnailTypeNames"
         :select-values="thumbnailTypeValues"
         :tooltip="$t('Tooltips.General Settings.Thumbnail Preference')"
-        @change="updateThumbnailPreference"
+        @change="handleThumbnailPreferenceChange"
       />
       <ft-select
         :placeholder="$t('Settings.General Settings.Locale Preference')"

static/locales/en-US.yaml

@@ -176,6 +176,7 @@ Settings:
       Middle: Middle
       End: End
       Hidden: Hidden
+      Blur: Blur
     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
@@ -344,7 +345,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