diff options
4 files changed, 55 insertions, 14 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 8a5fda676..d3bdcdc91 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -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} diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 2490b6e2d..44d0221c6 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -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} diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index f4e6c24c5..bfbfabcb6 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -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' /> diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index d4cdc124f..6d8feaf66 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -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, |