diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.js b/app/javascript/mastodon/features/account_gallery/components/media_item.js index f44e20939..2609b96ff 100644 --- a/app/javascript/mastodon/features/account_gallery/components/media_item.js +++ b/app/javascript/mastodon/features/account_gallery/components/media_item.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import Icon from 'mastodon/components/icon'; import { autoPlayGif, displayMedia } from 'mastodon/initial_state'; import classNames from 'classnames'; import { decode } from 'blurhash'; @@ -91,6 +92,7 @@ export default class MediaItem extends ImmutablePureComponent { const title = status.get('spoiler_text') || attachment.get('description'); let thumbnail = ''; + let icon; if (attachment.get('type') === 'unknown') { // Skip @@ -132,11 +134,20 @@ export default class MediaItem extends ImmutablePureComponent { ); } + if (!visible) { + icon = ( + + + + ); + } + return (
{visible && thumbnail} + {!visible && icon}
); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index cf8fa9392..0da3ed909 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4829,6 +4829,14 @@ a.status-card.compact:hover { border-radius: 4px; overflow: hidden; margin: 2px; + + &__icons { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + } } .notification__filter-bar,