Support 'in review' sensitive content

app/soapbox/__fixtures__/pleroma-status.json

@@ -0,0 +1,183 @@
+{
+  "account": {
+    "acct": "alex",
+    "avatar": "https://media.gleasonator.com/6d64aecb17348b23aaff78db4687b9476cb0da1c07cc6a819c2e6ec7144c18b1.png",
+    "avatar_static": "https://media.gleasonator.com/6d64aecb17348b23aaff78db4687b9476cb0da1c07cc6a819c2e6ec7144c18b1.png",
+    "bot": false,
+    "created_at": "2020-01-08T01:25:43.000Z",
+    "display_name": "Alex Gleason",
+    "emojis": [],
+    "fields": [
+      {
+        "name": "Website",
+        "value": "<a href=\"https://alexgleason.me\" rel=\"ugc\">https://alexgleason.me</a>"
+      },
+      {
+        "name": "Soapbox",
+        "value": "<a href=\"https://soapbox.pub\" rel=\"ugc\">https://soapbox.pub</a>"
+      },
+      {
+        "name": "Email",
+        "value": "alex@alexgleason.me"
+      },
+      {
+        "name": "Gender identity",
+        "value": "Soyboy"
+      },
+      {
+        "name": "Donate (PayPal)",
+        "value": "<a href=\"https://paypal.me/gleasonator\" rel=\"ugc\">https://paypal.me/gleasonator</a>"
+      },
+      {
+        "name": "$BTC",
+        "value": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n"
+      },
+      {
+        "name": "$ETH",
+        "value": "0xAc9aB5Fc04Dc1cB1789Af75b523Bd23C70B2D717"
+      },
+      {
+        "name": "$DOGE",
+        "value": "D5zVZs6jrRakaPVGiErkQiHt9sayzm6V5D"
+      },
+      {
+        "name": "$XMR",
+        "value": "45JDCLrjJ4bgVUSbbs2yjy9m5Mf4VLPW8fG7jw9sq5u69rXZZopQogZNeyYkMBnXpkaip4p4QwaaJNhdTotPa9g44DBCzdK"
+      }
+    ],
+    "followers_count": 2465,
+    "following_count": 1581,
+    "fqn": "alex@gleasonator.com",
+    "header": "https://media.gleasonator.com/accounts/headers/000/000/001/original/9d0e4dbf1c9dbc8f.png",
+    "header_static": "https://media.gleasonator.com/accounts/headers/000/000/001/original/9d0e4dbf1c9dbc8f.png",
+    "id": "9v5bmRalQvjOy0ECcC",
+    "last_status_at": "2022-03-10T18:19:50",
+    "locked": false,
+    "note": "I create Fediverse software that empowers people online.<br/><br/>I&#39;m vegan btw<br/><br/>Note: If you have a question for me, please tag me publicly. This gives the opportunity for others to chime in, and bystanders to learn.",
+    "pleroma": {
+      "accepts_chat_messages": true,
+      "also_known_as": [
+        "https://mitra.social/users/alex"
+      ],
+      "ap_id": "https://gleasonator.com/users/alex",
+      "background_image": null,
+      "birthday": "1993-07-03",
+      "favicon": "https://gleasonator.com/favicon.png",
+      "hide_favorites": true,
+      "hide_followers": false,
+      "hide_followers_count": false,
+      "hide_follows": false,
+      "hide_follows_count": false,
+      "is_admin": true,
+      "is_confirmed": true,
+      "is_moderator": false,
+      "is_suggested": true,
+      "relationship": {},
+      "skip_thread_containment": false,
+      "tags": []
+    },
+    "source": {
+      "fields": [
+        {
+          "name": "Website",
+          "value": "https://alexgleason.me"
+        },
+        {
+          "name": "Soapbox",
+          "value": "https://soapbox.pub"
+        },
+        {
+          "name": "Email",
+          "value": "alex@alexgleason.me"
+        },
+        {
+          "name": "Gender identity",
+          "value": "Soyboy"
+        },
+        {
+          "name": "Donate (PayPal)",
+          "value": "https://paypal.me/gleasonator"
+        },
+        {
+          "name": "$BTC",
+          "value": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n"
+        },
+        {
+          "name": "$ETH",
+          "value": "0xAc9aB5Fc04Dc1cB1789Af75b523Bd23C70B2D717"
+        },
+        {
+          "name": "$DOGE",
+          "value": "D5zVZs6jrRakaPVGiErkQiHt9sayzm6V5D"
+        },
+        {
+          "name": "$XMR",
+          "value": "45JDCLrjJ4bgVUSbbs2yjy9m5Mf4VLPW8fG7jw9sq5u69rXZZopQogZNeyYkMBnXpkaip4p4QwaaJNhdTotPa9g44DBCzdK"
+        }
+      ],
+      "note": "I create Fediverse software that empowers people online.\r\n\r\nI'm vegan btw\r\n\r\nNote: If you have a question for me, please tag me publicly. This gives the opportunity for others to chime in, and bystanders to learn.",
+      "pleroma": {
+        "actor_type": "Person",
+        "discoverable": false
+      },
+      "sensitive": false
+    },
+    "statuses_count": 23648,
+    "url": "https://gleasonator.com/users/alex",
+    "username": "alex"
+  },
+  "application": null,
+  "bookmarked": false,
+  "card": null,
+  "content": "<p>Good morning! Hope you have a wonderful day.</p>",
+  "created_at": "2020-03-23T19:33:06.000Z",
+  "emojis": [],
+  "favourited": false,
+  "favourites_count": 49,
+  "id": "103874034845713213",
+  "in_reply_to_account_id": null,
+  "in_reply_to_id": null,
+  "language": null,
+  "media_attachments": [],
+  "mentions": [],
+  "muted": false,
+  "pinned": true,
+  "pleroma": {
+    "content": {
+      "text/plain": "What is tolerance?"
+    },
+    "conversation_id": "3023268",
+    "direct_conversation_id": null,
+    "emoji_reactions": [
+      {
+        "count": 3,
+        "me": false,
+        "name": "❤️"
+      }
+    ],
+    "expires_at": null,
+    "in_reply_to_account_acct": null,
+    "local": true,
+    "parent_visible": false,
+    "pinned_at": "2021-11-23T01:38:44.000Z",
+    "quote": null,
+    "quote_url": null,
+    "quote_visible": false,
+    "spoiler_text": {
+      "text/plain": ""
+    },
+    "thread_muted": false
+  },
+  "poll": null,
+  "reblog": null,
+  "reblogged": false,
+  "reblogs_count": 27,
+  "replies_count": 15,
+  "sensitive": false,
+  "spoiler_text": "",
+  "tags": [],
+  "text": null,
+  "uri": "https://gleasonator.com/users/alex/statuses/103874034847713213",
+  "url": "https://gleasonator.com/notice/103874034847713213",
+  "visibility": "public"
+}

app/soapbox/__fixtures__/truthsocial-status-in-moderation.json

@@ -0,0 +1,85 @@
+{
+  "id": "108046224464672537",
+  "created_at": "2022-03-30T15:40:53.287Z",
+  "in_reply_to_id": null,
+  "in_reply_to_account_id": null,
+  "sensitive": false,
+  "spoiler_text": "",
+  "visibility": "self",
+  "language": null,
+  "uri": "https://truthsocial.com/users/alex/statuses/108046244464677537",
+  "url": "https://truthsocial.com/@alex/108046244464677537",
+  "replies_count": 0,
+  "reblogs_count": 0,
+  "favourites_count": 0,
+  "favourited": false,
+  "reblogged": false,
+  "muted": false,
+  "bookmarked": false,
+  "pinned": false,
+  "content": "<p>A federal agent inspects a 'lumber' truck after smelling alcohol during the prohibition period. Los Angeles, 1926 (during the Prohibition era).</p>",
+  "reblog": null,
+  "application": {
+    "name": "Soapbox FE",
+    "website": "https://soapbox.pub/"
+  },
+  "account": {
+    "id": "107759994408336377",
+    "username": "alex",
+    "acct": "alex",
+    "display_name": "Alex Gleason",
+    "locked": false,
+    "bot": false,
+    "discoverable": null,
+    "group": false,
+    "created_at": "2022-02-08T00:00:00.000Z",
+    "note": "<p>Launching Truth Social</p>",
+    "url": "https://truthsocial.com/@alex",
+    "avatar": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/avatars/107/759/994/408/336/377/original/119cb0dd1fa615b7.png",
+    "avatar_static": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/avatars/107/759/994/408/336/377/original/119cb0dd1fa615b7.png",
+    "header": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/headers/107/759/994/408/336/377/original/31f62b0453ccf554.png",
+    "header_static": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/headers/107/759/994/408/336/377/original/31f62b0453ccf554.png",
+    "followers_count": 4713,
+    "following_count": 43,
+    "statuses_count": 7,
+    "last_status_at": "2022-03-30",
+    "verified": true,
+    "location": "Texas",
+    "website": "https://soapbox.pub/",
+    "emojis": [],
+    "fields": []
+  },
+  "media_attachments": [
+    {
+      "id": "108635651287436632",
+      "type": "image",
+      "url": "https://static-assets-1.truthsocial.com/tmtg:prime-ts-assets/media_attachments/files/108/635/651/487/436/632/original/7873bda5a7ab45d3.jpeg",
+      "preview_url": "https://static-assets-1.truthsocial.com/tmtg:prime-ts-assets/media_attachments/files/108/635/651/487/436/632/small/7873bda5a7ab45d3.jpeg",
+      "external_video_id": null,
+      "remote_url": null,
+      "preview_remote_url": null,
+      "text_url": "https://truthsocial.com/media/_Kc-2w2Pe7knhYJV-CM",
+      "meta": {
+        "original": {
+          "width": 1080,
+          "height": 841,
+          "size": "1080x841",
+          "aspect": 1.2841854934601664
+        },
+        "small": {
+          "width": 907,
+          "height": 706,
+          "size": "907x706",
+          "aspect": 1.2847025495750708
+        }
+      },
+      "description": null,
+      "blurhash": "UIIY5?4n~q9FIUIUD%WB?bt7M{t7of%MofIU"
+    }
+  ],
+  "mentions": [],
+  "tags": [],
+  "emojis": [],
+  "card": null,
+  "poll": null
+}

app/soapbox/components/media_gallery.js

@@ -122,12 +122,12 @@ class Item extends React.PureComponent {
   render() {
     const { attachment, standalone, visible, dimensions, autoPlayGif, last, total } = this.props;
 
-    let width  = 100;
+    let width = 100;
     let height = '100%';
-    let top    = 'auto';
+    let top = 'auto';
-    let left   = 'auto';
+    let left = 'auto';
     let bottom = 'auto';
-    let right  = 'auto';
+    let right = 'auto';
     let float = 'left';
     let position = 'relative';
 
@@ -338,7 +338,7 @@ class MediaGallery extends React.PureComponent {
     const getHeight = () => {
       if (!aspectRatio) return width * 9 / 16;
       if (isPanoramic(aspectRatio)) return Math.floor(width / maximumAspectRatio);
-      if (isPortrait(aspectRatio))  return Math.floor(width / minimumAspectRatio);
+      if (isPortrait(aspectRatio)) return Math.floor(width / minimumAspectRatio);
       return Math.floor(width / aspectRatio);
     };
 
@@ -555,7 +555,7 @@ class MediaGallery extends React.PureComponent {
 
     if (width) {
       if (size === 1) return this.getSizeDataSingle();
-      if (size > 1)   return this.getSizeDataMultiple(size);
+      if (size > 1) return this.getSizeDataMultiple(size);
     }
 
     // Default
@@ -568,7 +568,7 @@ class MediaGallery extends React.PureComponent {
   }
 
   render() {
-    const { media, intl, sensitive, compact } = this.props;
+    const { media, intl, sensitive, compact, inReview } = this.props;
     const { visible } = this.state;
     const sizeData = this.getSizeData(media.size);
 
@@ -591,14 +591,23 @@ class MediaGallery extends React.PureComponent {
 
     if (sensitive) {
       warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+    } else if (inReview) {
+      // warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+      warning = 'Content Under Review';
     } else {
       warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
     }
 
     return (
       <div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.get('style')} ref={this.handleRef}>
-        <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible || compact })}>
+        <div
-          {sensitive && (
+          className={classNames({
+            'absolute z-40': true,
+            'inset-0': !visible && !compact,
+            'left-1 top-1': visible || compact,
+          })}
+        >
+          {(sensitive | inReview) && (
             (visible || compact) ? (
               <Button
                 text={intl.formatMessage(messages.toggle_visible)}
@@ -608,16 +617,31 @@ class MediaGallery extends React.PureComponent {
                 size='sm'
               />
             ) : (
-              <button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'>
+              <button
-                <div className='p-4 rounded-xl shadow-xl backdrop-blur-sm bg-white/75 dark:bg-gray-900/75 text-center inline-block space-y-4 max-w-[280px]'>
+                type='button'
+                onClick={this.handleOpen}
+                className={
+                  classNames({
+                    'backdrop-blur-sm rounded-lg w-full h-full border-0 flex items-center justify-center': true,
+                    'bg-gray-800/75': !inReview,
+                    'bg-danger-600/75': inReview,
+                  })
+                }
+              >
+                <div className='text-center space-y-4'>
                   <div className='space-y-1'>
-                    <Text weight='semibold'>{warning}</Text>
+                    <Text theme='white' weight='semibold'>{warning}</Text>
-                    <Text size='sm'>
+                    <Text theme='white' size='sm'>
                       <FormattedMessage id='status.sensitive_warning.subtitle' defaultMessage='This content may not be suitable for all audiences.' />
                     </Text>
                   </div>
 
-                  <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/eye.svg')}>
+                  <Button
+                    type='button'
+                    theme='outline'
+                    size='sm'
+                    icon={require('@tabler/icons/eye.svg')}
+                  >
                     <FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
                   </Button>
                 </div>

app/soapbox/components/status-media.tsx

@@ -144,6 +144,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
             <Component
               media={status.media_attachments}
               sensitive={status.sensitive}
+              inReview={status.visibility === 'self'}
               height={285}
               onOpenMedia={openMedia}
               visible={showMedia}

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent'
+type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent' | 'outline'
 type ButtonSizes = 'sm' | 'md' | 'lg'
 
 type IButtonStyles = {
@@ -27,6 +27,7 @@ const useButtonStyles = ({
     accent: 'border-transparent bg-secondary-500 hover:bg-secondary-300 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
     danger: 'border-transparent bg-danger-600 text-gray-100 hover:bg-danger-500 dark:hover:bg-danger-700 focus:bg-danger-600 dark:focus:bg-danger-600',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
+    outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   };
 
   const sizes = {

app/soapbox/features/test_timeline/index.tsx

@@ -18,11 +18,13 @@ const messages = defineMessages({
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
 const MOCK_STATUSES: any[] = [
+  require('soapbox/__fixtures__/pleroma-status.json'),
   require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
   require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
   require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
   require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
   require('soapbox/__fixtures__/truthsocial-status-with-external-video.json'),
+  require('soapbox/__fixtures__/truthsocial-status-in-moderation.json'),
 ];
 
 const timelineId = 'test';

app/soapbox/normalizers/status.ts

@@ -19,7 +19,7 @@ import { normalizePoll } from 'soapbox/normalizers/poll';
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
 import type { Account, Attachment, Card, Emoji, Mention, Poll, EmbeddedEntity } from 'soapbox/types/entities';
 
-export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct';
+export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct' | 'self';
 
 // https://docs.joinmastodon.org/entities/status/
 export const StatusRecord = ImmutableRecord({

app/soapbox/utils/status.ts

@@ -11,7 +11,9 @@ export const defaultMediaVisibility = (status: StatusEntity | undefined | null,
     status = status.reblog;
   }
 
-  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
+  const isSensitive = status.sensitive || status.visibility === 'self';
+
+  return (displayMedia !== 'hide_all' && !isSensitive || displayMedia === 'show_all');
 };
 
 /** Grab the first external link from a status. */