Add local setting toggle to move media attachments outside CWs

Fixes #1812
rebase/4.0.0rc1
Claire 2022-07-24 11:10:49 +02:00
parent 85d0e34745
commit 3f4e27ab6f
4 changed files with 55 additions and 14 deletions

View File

@ -508,8 +508,21 @@ class Status extends ImmutablePureComponent {
const { isExpanded, isCollapsed, forceFilter } = this.state;
let background = null;
let attachments = null;
let media = [];
let mediaIcons = [];
// Depending on user settings, some media are considered as parts of the
// contents (affected by CW) while other will be displayed outside of the
// CW.
let contentMedia = [];
let contentMediaIcons = [];
let extraMedia = [];
let extraMediaIcons = [];
let media = contentMedia;
let mediaIcons = contentMediaIcons;
if (settings.getIn(['content_warnings', 'media_outside'])) {
media = extraMedia;
mediaIcons = extraMediaIcons;
}
if (status === null) {
return null;
@ -681,8 +694,8 @@ class Status extends ImmutablePureComponent {
}
if (status.get('poll')) {
media.push(<PollContainer pollId={status.get('poll')} />);
mediaIcons.push('tasks');
contentMedia.push(<PollContainer pollId={status.get('poll')} />);
contentMediaIcons.push('tasks');
}
// Here we prepare extra data-* attributes for CSS selectors.
@ -748,7 +761,7 @@ class Status extends ImmutablePureComponent {
</span>
<StatusIcons
status={status}
mediaIcons={mediaIcons}
mediaIcons={contentMediaIcons.concat(extraMediaIcons)}
collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isCollapsed}
setCollapsed={setCollapsed}
@ -757,8 +770,8 @@ class Status extends ImmutablePureComponent {
</header>
<StatusContent
status={status}
media={media}
mediaIcons={mediaIcons}
media={contentMedia}
mediaIcons={contentMediaIcons}
expanded={isExpanded}
onExpandedToggle={this.handleExpandedToggle}
parseClick={parseClick}
@ -766,6 +779,9 @@ class Status extends ImmutablePureComponent {
tagLinks={settings.get('tag_misleading_links')}
rewriteMentions={settings.get('rewrite_mentions')}
/>
{extraMedia}
{!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
<StatusActionBar
{...other}

View File

@ -303,6 +303,15 @@ class LocalSettingsPage extends React.PureComponent {
({ intl, onChange, settings }) => (
<div className='glitch local-settings__page content_warnings'>
<h1><FormattedMessage id='settings.content_warnings' defaultMessage='Content warnings' /></h1>
<LocalSettingsPageItem
settings={settings}
item={['content_warnings', 'media_outside']}
id='mastodon-settings--content_warnings-media_outside'
onChange={onChange}
>
<FormattedMessage id='settings.content_warnings_media_outside' defaultMessage='Display media attachments outside content warnings' />
<span className='hint'><FormattedMessage id='settings.content_warnings_media_outside_hint' defaultMessage='Reproduce upstream Mastodon behavior by having the Content Warning toggle not affect media attachments' /></span>
</LocalSettingsPageItem>
<DeprecatedLocalSettingsPageItem
id='mastodon-settings--content_warnings-auto_unfold'
value={expandSpoilers}

View File

@ -122,14 +122,27 @@ class DetailedStatus extends ImmutablePureComponent {
return null;
}
let media = [];
let mediaIcons = [];
let applicationLink = '';
let reblogLink = '';
let reblogIcon = 'retweet';
let favouriteLink = '';
let edited = '';
// Depending on user settings, some media are considered as parts of the
// contents (affected by CW) while other will be displayed outside of the
// CW.
let contentMedia = [];
let contentMediaIcons = [];
let extraMedia = [];
let extraMediaIcons = [];
let media = contentMedia;
let mediaIcons = contentMediaIcons;
if (settings.getIn(['content_warnings', 'media_outside'])) {
media = extraMedia;
mediaIcons = extraMediaIcons;
}
if (this.props.measureHeight) {
outerStyle.height = `${this.state.height}px`;
}
@ -199,8 +212,8 @@ class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('poll')) {
media.push(<PollContainer pollId={status.get('poll')} />);
mediaIcons.push('tasks');
contentMedia.push(<PollContainer pollId={status.get('poll')} />);
contentMediaIcons.push('tasks');
}
if (status.get('application')) {
@ -282,8 +295,8 @@ class DetailedStatus extends ImmutablePureComponent {
<StatusContent
status={status}
media={media}
mediaIcons={mediaIcons}
media={contentMedia}
mediaIcons={contentMediaIcons}
expanded={expanded}
collapsed={false}
onExpandedToggle={onToggleHidden}
@ -294,6 +307,8 @@ class DetailedStatus extends ImmutablePureComponent {
disabled
/>
{extraMedia}
<div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />

View File

@ -25,7 +25,8 @@ const initialState = ImmutableMap({
tag_misleading_links: true,
rewrite_mentions: 'no',
content_warnings : ImmutableMap({
filter : null,
filter : null,
media_outside: false,
}),
collapsed : ImmutableMap({
enabled : true,