Merge branch 'nsfw-link-preview' into 'develop'

Click-to-reveal cover for link previews in NSFW posts

Closes #973

See merge request pleroma/pleroma-fe!1287

CHANGELOG.md

@@ -28,6 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Proper handling of deletes when using websocket streaming
 - Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
 - Added a small red badge to the favicon when there's unread notifications
+- Added the NSFW alert to link previews
 
 ### Fixed
 - Fixed clicking NSFW hider through status popover

src/components/link-preview/link-preview.js

@@ -1,3 +1,5 @@
+import { mapGetters } from 'vuex'
+
 const LinkPreview = {
   name: 'LinkPreview',
   props: [
@@ -15,11 +17,20 @@ const LinkPreview = {
       // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
       // as it makes sure to hide the image if somehow NSFW tagged preview can
       // exist.
-      return this.card.image && !this.nsfw && this.size !== 'hide'
+      return this.card.image && !this.censored && this.size !== 'hide'
+    },
+    censored () {
+      return this.nsfw && this.hideNsfwConfig
     },
     useDescription () {
       return this.card.description && /\S/.test(this.card.description)
-    }
+    },
+    hideNsfwConfig () {
+      return this.mergedConfig.hideNsfw
+    },
+    ...mapGetters([
+      'mergedConfig'
+    ])
   },
   created () {
     if (this.useImage) {

src/components/link-preview/link-preview.vue

@@ -9,12 +9,17 @@
       <div
         v-if="useImage && imageLoaded"
         class="card-image"
-        :class="{ 'small-image': size === 'small' }"
       >
         <img :src="card.image">
       </div>
       <div class="card-content">
-        <span class="card-host faint">{{ card.provider_name }}</span>
+        <span class="card-host faint">
+          <span
+            v-if="censored"
+            class="nsfw-alert alert warning"
+          >{{ $t('status.nsfw') }}</span>
+          {{ card.provider_name }}
+        </span>
         <h4 class="card-title">{{ card.title }}</h4>
         <p
           v-if="useDescription"
@@ -50,10 +55,6 @@
     }
   }
 
-  .small-image {
-    width: 80px;
-  }
-
   .card-content {
     max-height: 100%;
     margin: 0.5em;
@@ -76,6 +77,10 @@
     max-height: calc(1.2em * 3 - 1px);
   }
 
+  .nsfw-alert {
+    margin: 2em 0;
+  }
+
   color: $fallback--text;
   color: var(--text, $fallback--text);
   border-style: solid;

src/i18n/en.json

@@ -377,7 +377,7 @@
     "hide_followers_count_description": "Don't show follower count",
     "show_admin_badge": "Show Admin badge in my profile",
     "show_moderator_badge": "Show Moderator badge in my profile",
-    "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
+    "nsfw_clickthrough": "Enable clickthrough attachment and link preview image hiding for NSFW statuses",
     "oauth_tokens": "OAuth tokens",
     "token": "Token",
     "refresh_token": "Refresh Token",
@@ -667,7 +667,8 @@
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",
     "hide_content": "Hide content",
-    "status_deleted": "This post was deleted"
+    "status_deleted": "This post was deleted",
+    "nsfw": "NSFW"
   },
   "user_card": {
     "approve": "Approve",