Support 'in review' sensitive content

environments/review-self-statu-04677m/deployments/811
Justin 2 years ago
parent d38aa68870
commit dd0f2fcf5b

@ -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"
}

@ -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
}

@ -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 = <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 })}>
{sensitive && (
<div
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'>
<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]'>
<button
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 size='sm'>
<Text theme='white' weight='semibold'>{warning}</Text>
<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>

@ -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}

@ -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 = {

@ -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';

@ -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({

@ -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. */

Loading…
Cancel
Save