post/nas
1
0
Fork 0
forked from gitea/nas
Code Pull requests Activity

Merge remote-tracking branch 'parent/main' into upstream-20240913

Browse source
This commit is contained in:
KMY 2024-09-13 10:31:48 +09:00
commit fc9d27ff91
392 changed files with 3757 additions and 3233 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/javascript/mastodon/components/media_gallery.jsx
View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
@ -10,17 +10,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { debounce } from 'lodash';
import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
import { IconButton } from './icon_button';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
});
class Item extends PureComponent {
static propTypes = {
@ -231,7 +224,6 @@ class MediaGallery extends PureComponent {
size: PropTypes.object,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
visible: PropTypes.bool,
@ -308,7 +300,7 @@ class MediaGallery extends PureComponent {
}
render () {
const { media, lang, intl, sensitive, defaultWidth, autoplay, compact } = this.props;
const { media, lang, sensitive, defaultWidth, autoplay, compact } = this.props;
const { visible } = this.state;
const width = this.state.width || defaultWidth;
@ -340,9 +332,7 @@ class MediaGallery extends PureComponent {
</span>
</button>
);
} else if (visible) {
spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' iconComponent={VisibilityOffIcon} overlay onClick={this.handleOpen} ariaHidden />;
} else {
} else if (!visible) {
spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>
@ -361,17 +351,30 @@ class MediaGallery extends PureComponent {
'media-gallery--column2';
const compactClass = compact ? 'media-gallery__compact' : null;
const classList = ['media-gallery', `media-gallery--layout-${size}`];
if (size > 4) {
classList.push(rowClass, columnClass, compactClass);
}
return (
<div className={classNames('media-gallery', rowClass, columnClass, compactClass)} style={style} ref={this.handleRef}>
<div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
{spoilerButton}
</div>
<div className={classNames(classList)} style={style} ref={this.handleRef}>
{(!visible || uncached) && (
<div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
{spoilerButton}
</div>
)}
{children}
{(visible && !uncached) && (
<div className='media-gallery__actions'>
<button className='media-gallery__actions__pill' onClick={this.handleOpen}><FormattedMessage id='media_gallery.hide' defaultMessage='Hide' /></button>
</div>
)}
</div>
);
}
}
export default injectIntl(MediaGallery);
export default MediaGallery;