Frontend Settings - "Blur NSFW" and "Auto Expand" (#1640)

* fix for en-AU locale

* add setting checkboxes for auto-expand and blur nsfw

* mappings for backend

* blur and nsfw settings

* add icon blur

* fix lint

* revert remove en-au

src/assets/css/main.css

@@ -251,7 +251,7 @@ hr {
   flex: 1;
 }
 
-.img-blur {
+.img-blur-thumb {
   filter: blur(10px);
   -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
@@ -259,6 +259,18 @@ hr {
   -ms-filter: blur(10px);
 }
 
+.img-blur-icon {
+  filter: blur(3px);
+  -webkit-filter: blur(3px);
+  -moz-filter: blur(3px);
+  -o-filter: blur(3px);
+  -ms-filter: blur(3px);
+}
+
+.img-cover {
+  object-fit: cover;
+}
+
 .img-expanded {
   max-height: 90vh;
 }

src/shared/components/common/pictrs-image.tsx

@@ -1,6 +1,8 @@
 import classNames from "classnames";
 import { Component } from "inferno";
 
+import { UserService } from "../../services";
+
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
 
@@ -21,6 +23,14 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
   }
 
   render() {
+    let user_blur_nsfw = true;
+    if (UserService.Instance.myUserInfo) {
+      user_blur_nsfw =
+        UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw;
+    }
+
+    const blur_image = this.props.nsfw && user_blur_nsfw;
+
     return (
       <picture>
         <source srcSet={this.src("webp")} type="image/webp" />
@@ -38,7 +48,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
               this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
-            "img-blur": this.props.thumbnail && this.props.nsfw,
+            "img-blur-icon": this.props.icon && blur_image,
+            "img-blur-thumb": this.props.thumbnail && blur_image,
             "object-fit-cover img-icon me-1": this.props.icon,
             "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
               this.props.iconOverlay,

src/shared/components/community/community-link.tsx

@@ -58,12 +58,14 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
 
   avatarAndName(displayName: string) {
     const icon = this.props.community.icon;
+    const nsfw = this.props.community.nsfw;
+
     return (
       <>
         {!this.props.hideAvatar &&
           !this.props.community.removed &&
           showAvatars() &&
-          icon && <PictrsImage src={icon} icon />}
+          icon && <PictrsImage src={icon} icon nsfw={nsfw} />}
         <span className="overflow-wrap-anywhere">{displayName}</span>
       </>
     );

src/shared/components/person/settings.tsx

@@ -54,6 +54,8 @@ interface SettingsState {
   // TODO redo these forms
   saveUserSettingsForm: {
     show_nsfw?: boolean;
+    blur_nsfw?: boolean;
+    auto_expand?: boolean;
     theme?: string;
     default_sort_type?: SortType;
     default_listing_type?: ListingType;
@@ -177,6 +179,8 @@ export class Settings extends Component<any, SettingsState> {
       const {
         local_user: {
           show_nsfw,
+          blur_nsfw,
+          auto_expand,
           theme,
           default_sort_type,
           default_listing_type,
@@ -206,6 +210,8 @@ export class Settings extends Component<any, SettingsState> {
         saveUserSettingsForm: {
           ...this.state.saveUserSettingsForm,
           show_nsfw,
+          blur_nsfw,
+          auto_expand,
           theme: theme ?? "browser",
           default_sort_type,
           default_listing_type,
@@ -665,6 +671,34 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
+          <div className="input-group mb-3">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="user-blur-nsfw"
+                type="checkbox"
+                checked={this.state.saveUserSettingsForm.blur_nsfw}
+                onChange={linkEvent(this, this.handleBlurNsfwChange)}
+              />
+              <label className="form-check-label" htmlFor="user-blur-nsfw">
+                {I18NextService.i18n.t("blur_nsfw")}
+              </label>
+            </div>
+          </div>
+          <div className="input-group mb-3">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="user-auto-expand"
+                type="checkbox"
+                checked={this.state.saveUserSettingsForm.auto_expand}
+                onChange={linkEvent(this, this.handleAutoExpandChange)}
+              />
+              <label className="form-check-label" htmlFor="user-auto-expand">
+                {I18NextService.i18n.t("auto_expand")}
+              </label>
+            </div>
+          </div>
           <div className="input-group mb-3">
             <div className="form-check">
               <input
@@ -1009,6 +1043,18 @@ export class Settings extends Component<any, SettingsState> {
     );
   }
 
+  handleBlurNsfwChange(i: Settings, event: any) {
+    i.setState(
+      s => ((s.saveUserSettingsForm.blur_nsfw = event.target.checked), s),
+    );
+  }
+
+  handleAutoExpandChange(i: Settings, event: any) {
+    i.setState(
+      s => ((s.saveUserSettingsForm.auto_expand = event.target.checked), s),
+    );
+  }
+
   handleShowAvatarsChange(i: Settings, event: any) {
     const mui = UserService.Instance.myUserInfo;
     if (mui) {

src/shared/components/post/post-listing.tsx

@@ -169,6 +169,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   constructor(props: any, context: any) {
     super(props, context);
 
+    if (UserService.Instance.myUserInfo) {
+      this.state.imageExpanded =
+        UserService.Instance.myUserInfo.local_user_view.local_user.auto_expand;
+    }
+
     this.handleEditPost = this.handleEditPost.bind(this);
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
@@ -297,6 +302,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   imgThumb(src: string) {
     const post_view = this.postView;
+
     return (
       <PictrsImage
         src={src}