Merge pull request #1813 from ClearlyClaire/glitch-soc/features/out-of-content-media

Add local setting toggle to move media attachments outside CWs
This commit is contained in:
Claire 2022-07-24 13:48:31 +02:00 committed by GitHub
commit ffa37c7b31
5 changed files with 61 additions and 14 deletions

View file

@ -508,8 +508,21 @@ class Status extends ImmutablePureComponent {
const { isExpanded, isCollapsed, forceFilter } = this.state; const { isExpanded, isCollapsed, forceFilter } = this.state;
let background = null; let background = null;
let attachments = 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) { if (status === null) {
return null; return null;
@ -681,8 +694,8 @@ class Status extends ImmutablePureComponent {
} }
if (status.get('poll')) { if (status.get('poll')) {
media.push(<PollContainer pollId={status.get('poll')} />); contentMedia.push(<PollContainer pollId={status.get('poll')} />);
mediaIcons.push('tasks'); contentMediaIcons.push('tasks');
} }
// Here we prepare extra data-* attributes for CSS selectors. // Here we prepare extra data-* attributes for CSS selectors.
@ -748,7 +761,7 @@ class Status extends ImmutablePureComponent {
</span> </span>
<StatusIcons <StatusIcons
status={status} status={status}
mediaIcons={mediaIcons} mediaIcons={contentMediaIcons.concat(extraMediaIcons)}
collapsible={settings.getIn(['collapsed', 'enabled'])} collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isCollapsed} collapsed={isCollapsed}
setCollapsed={setCollapsed} setCollapsed={setCollapsed}
@ -757,8 +770,9 @@ class Status extends ImmutablePureComponent {
</header> </header>
<StatusContent <StatusContent
status={status} status={status}
media={media} media={contentMedia}
mediaIcons={mediaIcons} extraMedia={extraMedia}
mediaIcons={contentMediaIcons}
expanded={isExpanded} expanded={isExpanded}
onExpandedToggle={this.handleExpandedToggle} onExpandedToggle={this.handleExpandedToggle}
parseClick={parseClick} parseClick={parseClick}
@ -766,6 +780,7 @@ class Status extends ImmutablePureComponent {
tagLinks={settings.get('tag_misleading_links')} tagLinks={settings.get('tag_misleading_links')}
rewriteMentions={settings.get('rewrite_mentions')} rewriteMentions={settings.get('rewrite_mentions')}
/> />
{!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? ( {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
<StatusActionBar <StatusActionBar
{...other} {...other}

View file

@ -70,6 +70,7 @@ export default class StatusContent extends React.PureComponent {
collapsed: PropTypes.bool, collapsed: PropTypes.bool,
onExpandedToggle: PropTypes.func, onExpandedToggle: PropTypes.func,
media: PropTypes.node, media: PropTypes.node,
extraMedia: PropTypes.node,
mediaIcons: PropTypes.arrayOf(PropTypes.string), mediaIcons: PropTypes.arrayOf(PropTypes.string),
parseClick: PropTypes.func, parseClick: PropTypes.func,
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -256,6 +257,7 @@ export default class StatusContent extends React.PureComponent {
const { const {
status, status,
media, media,
extraMedia,
mediaIcons, mediaIcons,
parseClick, parseClick,
disabled, disabled,
@ -351,6 +353,8 @@ export default class StatusContent extends React.PureComponent {
{media} {media}
</div> </div>
{extraMedia}
</div> </div>
); );
} else if (parseClick) { } else if (parseClick) {
@ -372,6 +376,7 @@ export default class StatusContent extends React.PureComponent {
lang={lang} lang={lang}
/> />
{media} {media}
{extraMedia}
</div> </div>
); );
} else { } else {
@ -391,6 +396,7 @@ export default class StatusContent extends React.PureComponent {
lang={lang} lang={lang}
/> />
{media} {media}
{extraMedia}
</div> </div>
); );
} }

View file

@ -303,6 +303,15 @@ class LocalSettingsPage extends React.PureComponent {
({ intl, onChange, settings }) => ( ({ intl, onChange, settings }) => (
<div className='glitch local-settings__page content_warnings'> <div className='glitch local-settings__page content_warnings'>
<h1><FormattedMessage id='settings.content_warnings' defaultMessage='Content warnings' /></h1> <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 <DeprecatedLocalSettingsPageItem
id='mastodon-settings--content_warnings-auto_unfold' id='mastodon-settings--content_warnings-auto_unfold'
value={expandSpoilers} value={expandSpoilers}
@ -366,6 +375,7 @@ class LocalSettingsPage extends React.PureComponent {
onChange={onChange} onChange={onChange}
> >
<FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' /> <FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
<span className='hint'><FormattedMessage id='settings.enable_collapsed_hint' defaultMessage='Collapsed posts have parts of their contents hidden to take up less screen space. This is distinct from the Content Warning feature' /></span>
</LocalSettingsPageItem> </LocalSettingsPageItem>
<LocalSettingsPageItem <LocalSettingsPageItem
settings={settings} settings={settings}
@ -457,6 +467,7 @@ class LocalSettingsPage extends React.PureComponent {
dependsOn={[['collapsed', 'enabled']]} dependsOn={[['collapsed', 'enabled']]}
> >
<FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' /> <FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
<span className='hint'><FormattedMessage id='settings.image_backgrounds_media_hint' defaultMessage='If the post has any media attachment, use the first one as a background' /></span>
</LocalSettingsPageItem> </LocalSettingsPageItem>
</section> </section>
</div> </div>

View file

@ -122,14 +122,27 @@ class DetailedStatus extends ImmutablePureComponent {
return null; return null;
} }
let media = [];
let mediaIcons = [];
let applicationLink = ''; let applicationLink = '';
let reblogLink = ''; let reblogLink = '';
let reblogIcon = 'retweet'; let reblogIcon = 'retweet';
let favouriteLink = ''; let favouriteLink = '';
let edited = ''; 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) { if (this.props.measureHeight) {
outerStyle.height = `${this.state.height}px`; outerStyle.height = `${this.state.height}px`;
} }
@ -199,8 +212,8 @@ class DetailedStatus extends ImmutablePureComponent {
} }
if (status.get('poll')) { if (status.get('poll')) {
media.push(<PollContainer pollId={status.get('poll')} />); contentMedia.push(<PollContainer pollId={status.get('poll')} />);
mediaIcons.push('tasks'); contentMediaIcons.push('tasks');
} }
if (status.get('application')) { if (status.get('application')) {
@ -282,8 +295,9 @@ class DetailedStatus extends ImmutablePureComponent {
<StatusContent <StatusContent
status={status} status={status}
media={media} media={contentMedia}
mediaIcons={mediaIcons} extraMedia={extraMedia}
mediaIcons={contentMediaIcons}
expanded={expanded} expanded={expanded}
collapsed={false} collapsed={false}
onExpandedToggle={onToggleHidden} onExpandedToggle={onToggleHidden}

View file

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