attachment: implement optional blur + internationalized text for sensitive content

docs/CONFIGURATION.md

@@ -74,6 +74,9 @@ Enables [PushAPI](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) - b
 ### `nsfwCensorImage`
 Use custom image for NSFW'd images
 
+### `nsfwUseBlur`
+Use blur effect instead of placeholder image for NSFW images
+
 ### `showFeaturesPanel`
 Show panel showcasing instance features/settings to logged-out visitors
 

src/boot/after_store.js

@@ -75,6 +75,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   }
 
   copyInstanceOption('nsfwCensorImage')
+  copyInstanceOption('nsfwUseBlur')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')
   copyInstanceOption('hideUserStats')

src/components/attachment/attachment.js

@@ -17,6 +17,7 @@ const Attachment = {
       nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       preloadImage: this.$store.state.config.preloadImage,
+      nsfwUseBlur: this.$store.state.instance.nsfwUseBlur,
       loading: false,
       img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false,

src/components/attachment/attachment.vue

@@ -24,12 +24,31 @@
       :href="attachment.url"
       @click.prevent="toggleHidden"
     >
+      <div v-if="nsfwUseBlur && type !== 'video'" class="centered-hider">
+        <a href="#">
+          {{$t('general.sensitive')}}<br><small>{{$t('general.sensitive_hint')}}</small>
+        </a>
+      </div>
       <img
+        v-if="!nsfwUseBlur"
         :key="nsfwImage"
         class="nsfw"
         :src="nsfwImage"
         :class="{'small': isSmall}"
       >
+      <StillImage
+        v-else-if="type === 'image' || attachment.large_thumb_url"
+        class="nsfw-blur"
+        :referrerpolicy="referrerpolicy"
+        :mimetype="attachment.mimetype"
+        :src="attachment.large_thumb_url || attachment.url"
+      />
+      <VideoAttachment
+        v-else-if="type === 'video'"
+        class="video nsfw-blur"
+        :attachment="attachment"
+        :controls="allowPlay"
+      />
       <i
         v-if="type === 'video'"
         class="play-icon icon-play-circled"
@@ -42,13 +61,13 @@
       <a
         href="#"
         @click.prevent="toggleHidden"
-      >Hide</a>
+      >{{$t('general.hide')}}</a>
     </div>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
       class="image-attachment"
-      :class="{'hidden': hidden && preloadImage }"
+      :class="{'hidden': hidden && preloadImage && !nsfwUseBlur}"
       :href="attachment.url"
       target="_blank"
       :title="attachment.description"
@@ -226,6 +245,28 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   }
 
+  .centered-hider {
+    position: absolute;
+    width: 14em;
+    height: 2em;
+    top: calc(50% - 1em);
+    left: calc(50% - 7em);
+    text-align: center;
+    white-space: nowrap;
+    margin: auto;
+    padding: 5px;
+    background: rgba(230,230,230,0.6);
+    font-weight: bold;
+    z-index: 4;
+    line-height: 1;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  }
+
+  .hider a, .centered-hider a {
+    color: rgba(25,25,25,1.0);
+  }
+
   video {
     z-index: 0;
   }
@@ -286,6 +327,10 @@
       height: 100%;
     }
 
+    .nsfw-blur {
+      filter: blur(3.0rem);
+    }
+
     img {
       image-orientation: from-image; // NOTE: only FF supports this
     }

src/i18n/en.json

@@ -31,7 +31,10 @@
     "disable": "Disable",
     "enable": "Enable",
     "confirm": "Confirm",
-    "verify": "Verify"
+    "verify": "Verify",
+    "sensitive": "Sensitive content",
+    "sensitive_hint": "Click to show",
+    "hide": "Hide"
   },
   "image_cropper": {
     "crop_picture": "Crop picture",

src/modules/instance.js

@@ -27,6 +27,7 @@ const defaultState = {
   subjectLineBehavior: 'email',
   postContentType: 'text/plain',
   nsfwCensorImage: undefined,
+  nsfwUseBlur: false,
   vapidPublicKey: undefined,
   noAttachmentLinks: false,
   showFeaturesPanel: true,

static/config.json

@@ -19,5 +19,6 @@
   "noAttachmentLinks": false,
   "nsfwCensorImage": "",
   "showFeaturesPanel": true,
-  "minimalScopesMode": false
+  "minimalScopesMode": false,
+  "nsfwUseBlur": false
 }