From 331517abe640ed5c789e4f244cd6fdf165e445fd Mon Sep 17 00:00:00 2001
From: Roman Rizzi <rizziromanalejandro@gmail.com>
Date: Wed, 11 Nov 2020 14:09:42 -0300
Subject: [PATCH] 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.
---
 .../discourse/app/components/reviewable-item.js  | 16 +++++++++++++---
 .../app/templates/components/reviewable-item.hbs |  2 +-
 .../stylesheets/common/base/reviewables.scss     | 12 ++++++++++++
 app/serializers/reviewable_serializer.rb         |  5 +++++
 config/locales/server.en.yml                     |  1 +
 config/site_settings.yml                         |  3 +++
 6 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/reviewable-item.js b/app/assets/javascripts/discourse/app/components/reviewable-item.js
index ff5021097e4..39cfd92faad 100644
--- a/app/assets/javascripts/discourse/app/components/reviewable-item.js
+++ b/app/assets/javascripts/discourse/app/components/reviewable-item.js
@@ -19,9 +19,19 @@ export default Component.extend({
   editing: false,
   _updates: null,
 
-  @discourseComputed("reviewable.type")
-  customClass(type) {
-    return type.dasherize();
+  @discourseComputed(
+    "reviewable.type",
+    "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(
diff --git a/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs b/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs
index 3df7b43133f..79f25ca62c1 100644
--- a/app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 81ba13d8ae2..49c8d980f3b 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/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;
 }
diff --git a/app/serializers/reviewable_serializer.rb b/app/serializers/reviewable_serializer.rb
index bd7f69d4620..c1af40b2a2b 100644
--- a/app/serializers/reviewable_serializer.rb
+++ b/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
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index 3b47da5ff74..c2b7af01c82 100644
--- a/config/locales/server.en.yml
+++ b/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."
 
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 8f502a803a0..2e49aa2879f 100644
--- a/config/site_settings.yml
+++ b/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: