From dd0f2fcf5b2d1bd471d7577be5e632923d8dfb9a Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 18 Aug 2022 14:23:34 -0400 Subject: [PATCH] Support 'in review' sensitive content --- app/soapbox/__fixtures__/pleroma-status.json | 183 ++++++++++++++++++ .../truthsocial-status-in-moderation.json | 85 ++++++++ app/soapbox/components/media_gallery.js | 52 +++-- app/soapbox/components/status-media.tsx | 1 + .../components/ui/button/useButtonStyles.ts | 3 +- app/soapbox/features/test_timeline/index.tsx | 2 + app/soapbox/normalizers/status.ts | 2 +- app/soapbox/utils/status.ts | 4 +- 8 files changed, 315 insertions(+), 17 deletions(-) create mode 100644 app/soapbox/__fixtures__/pleroma-status.json create mode 100644 app/soapbox/__fixtures__/truthsocial-status-in-moderation.json diff --git a/app/soapbox/__fixtures__/pleroma-status.json b/app/soapbox/__fixtures__/pleroma-status.json new file mode 100644 index 000000000..69f84afab --- /dev/null +++ b/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": "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" + } + ], + "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.

I'm vegan btw

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": "

Good morning! Hope you have a wonderful day.

", + "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" +} diff --git a/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json b/app/soapbox/__fixtures__/truthsocial-status-in-moderation.json new file mode 100644 index 000000000..e9402876f --- /dev/null +++ b/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": "

A federal agent inspects a 'lumber' truck after smelling alcohol during the prohibition period. Los Angeles, 1926 (during the Prohibition era).

", + "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": "

Launching Truth Social

", + "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 +} diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index a49f4ab75..defe361dc 100644 --- a/app/soapbox/components/media_gallery.js +++ b/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 left = 'auto'; + let top = '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 = ; + } else if (inReview) { + // warning = ; + warning = 'Content Under Review'; } else { warning = ; } return (
-
- {sensitive && ( +
+ {(sensitive | inReview) && ( (visible || compact) ? (
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx index 2721d726b..d64d88e4b 100644 --- a/app/soapbox/components/status-media.tsx +++ b/app/soapbox/components/status-media.tsx @@ -144,6 +144,7 @@ const StatusMedia: React.FC = ({