Archos/masto-fe-archos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/flavours/glitch/components/media_gallery.jsx
View File

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