UI: Blur review queue images. (#11187)

We blur images by default to protect reviewers against NSFW content. To see the image, they'll have to hover over it.

app/assets/javascripts/discourse/app/components/reviewable-item.js

@@ -19,9 +19,19 @@ export default Component.extend({
   editing: false,
   _updates: null,
 
-  @discourseComputed("reviewable.type")
+  @discourseComputed(
-  customClass(type) {
+    "reviewable.type",
-    return type.dasherize();
+    "siteSettings.blur_tl0_flagged_posts_media",
+    "reviewable.target_created_by_trust_level"
+  )
+  customClasses(type, blurEnabled, trustLevel) {
+    let classes = type.dasherize();
+
+    if (blurEnabled && trustLevel === 0) {
+      classes = `${classes} blur-images`;
+    }
+
+    return classes;
   },
 
   @discourseComputed(

app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs

@@ -1,4 +1,4 @@
-<div data-reviewable-id={{reviewable.id}} class="reviewable-item {{customClass}}">
+<div data-reviewable-id={{reviewable.id}} class="reviewable-item {{customClasses}}">
   <div class="reviewable-meta-data">
     <span class="reviewable-type">{{reviewable.humanType}}</span>
     {{#if reviewable.reply_count}}

app/assets/stylesheets/common/base/reviewables.scss

@@ -281,6 +281,18 @@
   padding-bottom: 1em;
 }
 
+.blur-images {
+  img:not(.avatar):not(.emoji) {
+    filter: blur(10px);
+    transition: 0.2s ease-in-out;
+
+    &:hover {
+      filter: blur(0);
+      transition: 0.2s ease-in-out;
+    }
+  }
+}
+
 .reviewable-histories {
   margin-top: 1em;
 }

app/serializers/reviewable_serializer.rb

@@ -17,6 +17,7 @@ class ReviewableSerializer < ApplicationSerializer
     :can_edit,
     :score,
     :version,
+    :target_created_by_trust_level
   )
 
   has_one :created_by, serializer: UserWithCustomFieldsSerializer, root: 'users'
@@ -130,4 +131,8 @@ class ReviewableSerializer < ApplicationSerializer
     object.category_id.present?
   end
 
+  def target_created_by_trust_level
+    object&.target_created_by&.trust_level
+  end
+
 end

config/locales/server.en.yml

@@ -2161,6 +2161,7 @@ en:
     returning_user_notice_tl: "Minimum trust level required to see returning user post notices."
     returning_users_days: "How many days should pass before a user is considered to be returning."
     review_media_unless_trust_level: "Staff will review posts of users with lower trust levels if they contain embedded media."
+    blur_tl0_flagged_posts_media: "Blur flagged posts images to hide potentially NSFW content."
     enable_page_publishing: "Allow staff members to publish topics to new URLs with their own styling."
     show_published_pages_login_required: "Anonymous users can see published pages, even when login is required."
 

config/site_settings.yml

@@ -983,6 +983,9 @@ posting:
   review_media_unless_trust_level:
     default: 0
     enum: "TrustLevelSetting"
+  blur_tl0_flagged_posts_media:
+    default: true
+    client: true
   enable_page_publishing:
     default: false
   show_published_pages_login_required: