[bugfix] Fix blurhash losing proportion when more than one item (#17)

Fixes #14

The style changes I made in #11 didn't take hidden media in consideration. This PR fixes it.

![Captura de tela de 2025-03-12 11-19-12.png](/attachments/f395e341-9a31-4459-adb5-46439b4b3003)

![Captura de tela de 2025-03-12 11-54-24.png](/attachments/00b01da2-712d-43f7-99a6-e53241663339)

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/17
Co-authored-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Co-committed-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
This commit is contained in:
Thiago 'Jedi' Cerqueira
2025-03-13 13:27:42 +00:00
committed by tobi
parent 1b66719b48
commit 84718945c6

View File

@@ -52,7 +52,7 @@ class Item extends PureComponent {
visible: PropTypes.bool.isRequired,
autoplay: PropTypes.bool,
useBlurhash: PropTypes.bool,
imageStyle: PropTypes.object,
contentStyles: PropTypes.object,
};
static defaultProps = {
@@ -117,7 +117,7 @@ class Item extends PureComponent {
displayWidth,
visible,
useBlurhash,
imageStyle
contentStyles
} = this.props;
let badges = [], thumbnail;
@@ -129,7 +129,7 @@ class Item extends PureComponent {
width = 100;
}
if (size === 4 || (size === 3 && index > 0)) {
if (size >= 4 || (size === 3 && index > 0)) {
height = 50;
}
@@ -184,7 +184,7 @@ class Item extends PureComponent {
alt={description}
title={description}
lang={lang}
style={{ ...imageStyle, objectPosition: letterbox ? null : `${x}% ${y}%` }}
style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
/>
</a>
@@ -216,7 +216,7 @@ class Item extends PureComponent {
}
return (
<div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')} style={contentStyles}>
<Blurhash
hash={attachment.get('blurhash')}
dummy={!useBlurhash}
@@ -384,7 +384,7 @@ class MediaGallery extends PureComponent {
displayWidth={width}
visible={visible || uncached}
useBlurhash={useBlurhash}
imageStyle={{ aspectRatio: '16 / 9' }}
contentStyles={{ aspectRatio: '16 / 9' }}
/>
));
}