Merge remote-tracking branch 'parent/main' into upstream-20250328
This commit is contained in:
commit
12ed20b6d5
257 changed files with 3505 additions and 2010 deletions
|
@ -12,6 +12,7 @@ import { debounce } from 'lodash';
|
|||
|
||||
import { AltTextBadge } from 'mastodon/components/alt_text_badge';
|
||||
import { Blurhash } from 'mastodon/components/blurhash';
|
||||
import { SpoilerButton } from 'mastodon/components/spoiler_button';
|
||||
import { formatTime } from 'mastodon/features/video';
|
||||
|
||||
import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
|
||||
|
@ -38,6 +39,7 @@ class Item extends PureComponent {
|
|||
|
||||
state = {
|
||||
loaded: false,
|
||||
error: false,
|
||||
};
|
||||
|
||||
handleMouseEnter = (e) => {
|
||||
|
@ -81,6 +83,10 @@ class Item extends PureComponent {
|
|||
this.setState({ loaded: true });
|
||||
};
|
||||
|
||||
handleImageError = () => {
|
||||
this.setState({ error: true });
|
||||
};
|
||||
|
||||
render () {
|
||||
const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
|
||||
|
||||
|
@ -164,6 +170,7 @@ class Item extends PureComponent {
|
|||
lang={lang}
|
||||
style={{ objectPosition: `${x}% ${y}%` }}
|
||||
onLoad={this.handleImageLoad}
|
||||
onError={this.handleImageError}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
|
@ -199,7 +206,7 @@ class Item extends PureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
|
||||
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--error': this.state.error, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
|
||||
<Blurhash
|
||||
hash={attachment.get('blurhash')}
|
||||
dummy={!useBlurhash}
|
||||
|
@ -236,6 +243,7 @@ class MediaGallery extends PureComponent {
|
|||
autoplay: PropTypes.bool,
|
||||
onToggleVisibility: PropTypes.func,
|
||||
compact: PropTypes.bool,
|
||||
matchedFilters: PropTypes.arrayOf(PropTypes.string),
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -306,11 +314,11 @@ class MediaGallery extends PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { media, lang, sensitive, defaultWidth, autoplay, compact } = this.props;
|
||||
const { media, lang, sensitive, defaultWidth, autoplay, compact, matchedFilters } = this.props;
|
||||
const { visible } = this.state;
|
||||
const width = this.state.width || defaultWidth;
|
||||
|
||||
let children, spoilerButton;
|
||||
let children;
|
||||
|
||||
const style = {};
|
||||
|
||||
|
@ -329,26 +337,6 @@ class MediaGallery extends PureComponent {
|
|||
children = media.map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} displayWidth={width} visible={visible || uncached} />);
|
||||
}
|
||||
|
||||
if (uncached) {
|
||||
spoilerButton = (
|
||||
<button type='button' disabled className='spoiler-button__overlay'>
|
||||
<span className='spoiler-button__overlay__label'>
|
||||
<FormattedMessage id='status.uncached_media_warning' defaultMessage='Preview not available' />
|
||||
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.open' defaultMessage='Click to open' /></span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
} else if (!visible) {
|
||||
spoilerButton = (
|
||||
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
|
||||
<span className='spoiler-button__overlay__label'>
|
||||
{sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}
|
||||
<span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const rowClass = (size === 5 || size === 6 || size === 9 || size === 10 || size === 11 || size === 12) ? 'media-gallery--row3' :
|
||||
(size === 7 || size === 8 || size === 13 || size === 14 || size === 15 || size === 16) ? 'media-gallery--row4' :
|
||||
'media-gallery--row2';
|
||||
|
@ -366,11 +354,7 @@ class MediaGallery extends PureComponent {
|
|||
<div className={classNames(classList)} style={style} ref={this.handleRef}>
|
||||
{children}
|
||||
|
||||
{(!visible || uncached) && (
|
||||
<div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
|
||||
{spoilerButton}
|
||||
</div>
|
||||
)}
|
||||
{(!visible || uncached) && <SpoilerButton uncached={uncached} sensitive={sensitive} onClick={this.handleOpen} matchedFilters={matchedFilters} />}
|
||||
|
||||
{(visible && !uncached) && (
|
||||
<div className='media-gallery__actions'>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue