feat(Settings): added blurUnwatchedImage prop to profile settings

src/routes/Settings/Settings.js

@@ -31,6 +31,7 @@ const Settings = () => {
     const toast = useToast();
     const {
         interfaceLanguageSelect,
+        blurUnwatchedImageToggle,
         subtitlesLanguageSelect,
         subtitlesSizeSelect,
         subtitlesTextColorInput,
@@ -502,6 +503,16 @@ const Settings = () => {
                                 {...playInExternalPlayerSelect}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>{ t('SETTINGS_BLUR_UNWATCHED_IMAGE') }</div>
+                            </div>
+                            <Toggle
+                                className={classnames(styles['option-input-container'], styles['toggle-container'])}
+                                tabIndex={-1}
+                                {...blurUnwatchedImageToggle}
+                            />
+                        </div>
                         {
                             shell.active &&
                                 <div className={styles['option-container']}>

src/routes/Settings/useProfileSettingsInputs.js

@@ -32,6 +32,22 @@ const useProfileSettingsInputs = (profile) => {
         }
     }), [profile.settings]);
 
+    const blurUnwatchedImageToggle = React.useMemo(() => ({
+        checked: profile.settings.blurUnwatchedImage,
+        onClick: () => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        blurUnwatchedImage: !profile.settings.blurUnwatchedImage
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
+
     const quitOnCloseToggle = React.useMemo(() => ({
         checked: profile.settings.quitOnClose,
         onClick: () => {
@@ -325,6 +341,7 @@ const useProfileSettingsInputs = (profile) => {
     }), [profile.settings]);
     return {
         interfaceLanguageSelect,
+        blurUnwatchedImageToggle,
         subtitlesLanguageSelect,
         subtitlesSizeSelect,
         subtitlesTextColorInput,

src/types/models/Ctx.d.ts

@@ -21,6 +21,7 @@ type Settings = {
     hardwareDecoding: boolean,
     escExitFullscreen: boolean,
     interfaceLanguage: string,
+    blurUnwatchedImage: boolean,
     nextVideoNotificationDuration: number,
     playInBackground: boolean,
     playerType: string | null,