From 38d112cc6fc2c01646d925c547c679a84bce4092 Mon Sep 17 00:00:00 2001 From: nachtjasmin Date: Sat, 18 Nov 2023 18:28:38 +0100 Subject: [PATCH] Use upstream version for media gallery Mastodon also has a alt badge, now we have a combination of both behaviours. We keep the class if the alt text is missing and add the alt badge if it's there. --- .../mastodon/components/media_gallery.jsx | 55 ++++++++----------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx index 444f9542a..ada4d2e9f 100644 --- a/app/javascript/mastodon/components/media_gallery.jsx +++ b/app/javascript/mastodon/components/media_gallery.jsx @@ -18,7 +18,6 @@ import { IconButton } from './icon_button'; const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' }, - no_descriptive_text: { id: 'media.no_descriptive_text', defaultMessage: 'No descriptive text was provided for this media.' }, }); class Item extends PureComponent { @@ -33,7 +32,6 @@ class Item extends PureComponent { displayWidth: PropTypes.number, visible: PropTypes.bool.isRequired, autoplay: PropTypes.bool, - noDescriptionTitle: PropTypes.string, }; static defaultProps = { @@ -63,7 +61,7 @@ class Item extends PureComponent { return this.props.autoplay || autoPlayGif; } - hoverToPlay () { + hoverToPlay() { const { attachment } = this.props; return !this.getAutoPlay() && attachment.get('type') === 'gifv'; } @@ -87,12 +85,12 @@ class Item extends PureComponent { this.setState({ loaded: true }); }; - render () { + render() { const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props; let badges = [], thumbnail; - let width = 50; + let width = 50; let height = 100; if (size === 1) { @@ -103,7 +101,8 @@ class Item extends PureComponent { height = 50; } - if (attachment.get('description')?.length > 0) { + const hasMediaDescription = !attachment.get('description')?.length > 0; + if (hasMediaDescription) { badges.push(ALT); } @@ -111,8 +110,8 @@ class Item extends PureComponent { if (attachment.get('type') === 'unknown') { return ( -
- +
+ ); } else if (attachment.get('type') === 'image') { - const previewUrl = attachment.get('preview_url'); + const previewUrl = attachment.get('preview_url'); const previewWidth = attachment.getIn(['meta', 'small', 'width']); - const originalUrl = attachment.get('url'); + const originalUrl = attachment.get('url'); const originalWidth = attachment.getIn(['meta', 'original', 'width']); const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; - const sizes = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null; + const sizes = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null; const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; - const x = ((focusX / 2) + .5) * 100; - const y = ((focusY / -2) + .5) * 100; + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; thumbnail = ( - { !attachment.get('description') && }
); } @@ -234,15 +228,15 @@ class MediaGallery extends PureComponent { width: this.props.defaultWidth, }; - componentDidMount () { + componentDidMount() { window.addEventListener('resize', this.handleResize, { passive: true }); } - componentWillUnmount () { + componentWillUnmount() { window.removeEventListener('resize', this.handleResize); } - UNSAFE_componentWillReceiveProps (nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) { this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' }); } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { @@ -278,7 +272,7 @@ class MediaGallery extends PureComponent { } }; - _setDimensions () { + _setDimensions() { const width = this.node.offsetWidth; // offsetWidth triggers a layout, so only calculate when we need to @@ -296,7 +290,7 @@ class MediaGallery extends PureComponent { return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); } - render () { + render() { const { media, lang, intl, sensitive, defaultWidth, autoplay } = this.props; const { visible } = this.state; const width = this.state.width || defaultWidth; @@ -311,14 +305,13 @@ class MediaGallery extends PureComponent { style.aspectRatio = '3 / 2'; } - const size = media.take(4).size; - const uncached = media.every(attachment => attachment.get('type') === 'unknown'); - const noDescriptionTitle = intl.formatMessage(messages.no_descriptive_text); + const size = media.take(4).size; + const uncached = media.every(attachment => attachment.get('type') === 'unknown'); - if (standalone && this.isFullSizeEligible()) { - children = ; + if (this.isFullSizeEligible()) { + children = ; } else { - children = media.take(4).map((attachment, i) => ); + children = media.take(4).map((attachment, i) => ); } if (uncached) {