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:
commit
ffa37c7b31
5 changed files with 61 additions and 14 deletions
|
@ -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,9 @@ class Status extends ImmutablePureComponent {
|
|||
</header>
|
||||
<StatusContent
|
||||
status={status}
|
||||
media={media}
|
||||
mediaIcons={mediaIcons}
|
||||
media={contentMedia}
|
||||
extraMedia={extraMedia}
|
||||
mediaIcons={contentMediaIcons}
|
||||
expanded={isExpanded}
|
||||
onExpandedToggle={this.handleExpandedToggle}
|
||||
parseClick={parseClick}
|
||||
|
@ -766,6 +780,7 @@ class Status extends ImmutablePureComponent {
|
|||
tagLinks={settings.get('tag_misleading_links')}
|
||||
rewriteMentions={settings.get('rewrite_mentions')}
|
||||
/>
|
||||
|
||||
{!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
|
||||
<StatusActionBar
|
||||
{...other}
|
||||
|
|
|
@ -70,6 +70,7 @@ export default class StatusContent extends React.PureComponent {
|
|||
collapsed: PropTypes.bool,
|
||||
onExpandedToggle: PropTypes.func,
|
||||
media: PropTypes.node,
|
||||
extraMedia: PropTypes.node,
|
||||
mediaIcons: PropTypes.arrayOf(PropTypes.string),
|
||||
parseClick: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
|
@ -256,6 +257,7 @@ export default class StatusContent extends React.PureComponent {
|
|||
const {
|
||||
status,
|
||||
media,
|
||||
extraMedia,
|
||||
mediaIcons,
|
||||
parseClick,
|
||||
disabled,
|
||||
|
@ -351,6 +353,8 @@ export default class StatusContent extends React.PureComponent {
|
|||
{media}
|
||||
</div>
|
||||
|
||||
{extraMedia}
|
||||
|
||||
</div>
|
||||
);
|
||||
} else if (parseClick) {
|
||||
|
@ -372,6 +376,7 @@ export default class StatusContent extends React.PureComponent {
|
|||
lang={lang}
|
||||
/>
|
||||
{media}
|
||||
{extraMedia}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
@ -391,6 +396,7 @@ export default class StatusContent extends React.PureComponent {
|
|||
lang={lang}
|
||||
/>
|
||||
{media}
|
||||
{extraMedia}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
@ -366,6 +375,7 @@ class LocalSettingsPage extends React.PureComponent {
|
|||
onChange={onChange}
|
||||
>
|
||||
<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
|
||||
settings={settings}
|
||||
|
@ -457,6 +467,7 @@ class LocalSettingsPage extends React.PureComponent {
|
|||
dependsOn={[['collapsed', 'enabled']]}
|
||||
>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
@ -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,9 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
|
||||
<StatusContent
|
||||
status={status}
|
||||
media={media}
|
||||
mediaIcons={mediaIcons}
|
||||
media={contentMedia}
|
||||
extraMedia={extraMedia}
|
||||
mediaIcons={contentMediaIcons}
|
||||
expanded={expanded}
|
||||
collapsed={false}
|
||||
onExpandedToggle={onToggleHidden}
|
||||
|
|
|
@ -26,6 +26,7 @@ const initialState = ImmutableMap({
|
|||
rewrite_mentions: 'no',
|
||||
content_warnings : ImmutableMap({
|
||||
filter : null,
|
||||
media_outside: false,
|
||||
}),
|
||||
collapsed : ImmutableMap({
|
||||
enabled : true,
|
||||
|
|
Loading…
Reference in a new issue