diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index d2e80de4964..6928af6d6bf 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -9,7 +9,26 @@ import classNames from 'classnames';
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
const messages = defineMessages({
- toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+ hidden: {
+ defaultMessage: 'Media hidden',
+ id: 'status.media_hidden',
+ },
+ sensitive: {
+ defaultMessage: 'Sensitive',
+ id: 'media_gallery.sensitive',
+ },
+ toggle: {
+ defaultMessage: 'Click to view',
+ id: 'status.sensitive_toggle',
+ },
+ toggle_visible: {
+ defaultMessage: 'Toggle visibility',
+ id: 'media_gallery.toggle_visible',
+ },
+ warning: {
+ defaultMessage: 'Sensitive content',
+ id: 'status.sensitive_warning',
+ },
});
class Item extends React.PureComponent {
@@ -206,48 +225,79 @@ export default class MediaGallery extends React.PureComponent {
this.props.onOpenMedia(this.props.media, index);
}
- isStandaloneEligible() {
- const { media, standalone } = this.props;
- return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
- }
-
render () {
- const { media, intl, sensitive, letterbox, fullwidth } = this.props;
+ const {
+ handleClick,
+ handleOpen,
+ } = this;
+ const {
+ fullwidth,
+ intl,
+ letterbox,
+ media,
+ sensitive,
+ standalone,
+ } = this.props;
const { visible } = this.state;
const size = media.take(4).size;
-
- let children;
-
- if (!visible) {
- let warning;
-
- if (sensitive) {
- warning = ;
- } else {
- warning = ;
- }
-
- children = (
-
- );
- } else {
- if (this.isStandaloneEligible()) {
- children = ;
- } else {
- children = media.take(4).map((attachment, i) => );
- }
- }
+ const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
return (
-
-
-
-
-
- {children}
+
+ {visible ? (
+
+
+ {sensitive ? (
+
+
+
+ ) : null}
+
+ ) : null}
+ {function () {
+ switch (true) {
+ case !visible:
+ return (
+
+ );
+ case standalone && media.size === 1 && !!media.getIn([0, 'meta', 'small', 'aspect']):
+ return (
+
+ );
+ default:
+ return media.take(4).map(
+ (attachment, i) => (
+
+ )
+ );
+ }
+ }()}
);
}
diff --git a/app/javascript/flavours/glitch/locales/en.js b/app/javascript/flavours/glitch/locales/en.js
index de6af099062..fb3763ced5b 100644
--- a/app/javascript/flavours/glitch/locales/en.js
+++ b/app/javascript/flavours/glitch/locales/en.js
@@ -34,6 +34,8 @@ const messages = {
'status.collapse': 'Collapse',
'status.uncollapse': 'Uncollapse',
+ 'media_gallery.sensitive': 'Sensitive',
+
'favourite_modal.combo': 'You can press {combo} to skip this next time',
'home.column_settings.show_direct': 'Show DMs',
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index c07d4162ee9..fae42d45ae7 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -2487,17 +2487,29 @@
font-weight: 500;
}
-.spoiler-button {
- display: none;
- left: 4px;
+.sensitive-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
position: absolute;
- text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
top: 4px;
+ left: 4px;
z-index: 100;
+}
- &.spoiler-button--visible {
- display: block;
- }
+.sensitive-marker {
+ margin: 0 3px;
+ border-radius: 2px;
+ padding: 2px 6px;
+ color: rgba($primary-text-color, 0.8);
+ background: rgba($base-overlay-background, 0.5);
+ font-size: 12px;
+ line-height: 15px;
+ text-transform: uppercase;
+ opacity: .9;
+ transition: opacity .1s ease;
+
+ .media-gallery:hover & { opacity: 1 }
}
.modal-container--preloader {