diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 9cd71b7c9..55e0e77d6 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -315,15 +315,22 @@ class MediaGallery extends React.PureComponent { style.height = height; } - const size = media.take(4).size; + const size = media.take(4).size; + const uncached = media.every(attachment => attachment.get('type') === 'unknown'); if (this.isStandaloneEligible()) { children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } - if (visible) { + if (uncached) { + spoilerButton = ( + + ); + } else if (visible) { spoilerButton = ; } else { spoilerButton = ( @@ -335,7 +342,7 @@ class MediaGallery extends React.PureComponent { return (
-
+
{spoilerButton}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d7e90fcaf..0b569bb8f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3477,6 +3477,14 @@ a.status-card.compact:hover { background: rgba($base-overlay-background, 0.8); } } + + &:disabled { + cursor: not-allowed; + + .spoiler-button__overlay__label { + background: rgba($base-overlay-background, 0.5); + } + } } }