commit: 6387cf5e4deeeb39d42e0a4f9e7b9e9e5fa55444
parent: f36d62179c5f86f5e39563c8c32c02b12205a43f
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Fri, 27 Apr 2018 02:44:03 +0200
app/javascript/mastodon/components/media_gallery.js: Copy the one from glitch-soc and adapt it
Diffstat:
1 file changed, 93 insertions(+), 63 deletions(-)
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
@@ -9,11 +9,34 @@ import classNames from 'classnames';
import { autoPlayGif, displaySensitiveMedia } from '../initial_state';
const messages = defineMessages({
- toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+ hidden: {
+ defaultMessage: 'Media hidden',
+ id: 'status.media_hidden',
+ },
+ sensitive: {
+ defaultMessage: 'Sensitive',
+ id: 'media_gallery.sensitive',
+ },
+ toggle: {
+ defaultMessage: 'Click to view',
+ id: 'status.sensitive_toggle',
+ },
+ toggle_visible: {
+ defaultMessage: 'Toggle visibility',
+ id: 'media_gallery.toggle_visible',
+ },
+ warning: {
+ defaultMessage: 'Sensitive content',
+ id: 'status.sensitive_warning',
+ },
});
class Item extends React.PureComponent {
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
standalone: PropTypes.bool,
@@ -49,7 +72,7 @@ class Item extends React.PureComponent {
handleClick = (e) => {
const { index, onClick } = this.props;
- if (e.button === 0) {
+ if (this.context.router && e.button === 0) {
e.preventDefault();
onClick(index);
}
@@ -224,70 +247,77 @@ export default class MediaGallery extends React.PureComponent {
this.props.onOpenMedia(this.props.media, index);
}
- handleRef = (node) => {
- if (node /*&& this.isStandaloneEligible()*/) {
- // offsetWidth triggers a layout, so only calculate when we need to
- this.setState({
- width: node.offsetWidth,
- });
- }
- }
-
- isStandaloneEligible() {
- const { media, standalone } = this.props;
- return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
- }
-
render () {
- const { media, intl, sensitive, height } = this.props;
- const { width, visible } = this.state;
-
- let children;
-
- const style = {};
-
- if (this.isStandaloneEligible()) {
- if (width) {
- style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
- }
- } else if (width) {
- style.height = width / (16/9);
- } else {
- style.height = height;
- }
-
- if (!visible) {
- let warning;
-
- if (sensitive) {
- warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
- } else {
- warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
- }
-
- children = (
- <button type='button' className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>
- <span className='media-spoiler__warning'>{warning}</span>
- <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
- </button>
- );
- } else {
- const size = media.take(4).size;
-
- if (this.isStandaloneEligible()) {
- children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;
- } else {
- children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} />);
- }
- }
+ const {
+ handleClick,
+ handleOpen,
+ } = this;
+ const {
+ fullwidth,
+ intl,
+ media,
+ sensitive,
+ standalone,
+ } = this.props;
+ const { visible } = this.state;
+ const size = media.take(4).size;
+ const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
return (
- <div className='media-gallery' style={style} ref={this.handleRef}>
- <div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>
- <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
- </div>
-
- {children}
+ <div className={computedClass}>
+ {visible ? (
+ <div className='sensitive-info'>
+ <IconButton
+ icon='eye'
+ onClick={handleOpen}
+ overlay
+ title={intl.formatMessage(messages.toggle_visible)}
+ />
+ {sensitive ? (
+ <span className='sensitive-marker'>
+ <FormattedMessage {...messages.sensitive} />
+ </span>
+ ) : null}
+ </div>
+ ) : null}
+ {function () {
+ switch (true) {
+ case !visible:
+ return (
+ <button
+ className='media-spoiler'
+ onClick={handleOpen}
+ >
+ <span className='media-spoiler__warning'>
+ <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />
+ </span>
+ <span className='media-spoiler__trigger'>
+ <FormattedMessage {...messages.toggle} />
+ </span>
+ </button>
+ );
+ case standalone && media.size === 1 && !!media.getIn([0, 'meta', 'small', 'aspect']):
+ return (
+ <Item
+ attachment={media.get(0)}
+ onClick={handleClick}
+ standalone
+ />
+ );
+ default:
+ return media.take(4).map(
+ (attachment, i) => (
+ <Item
+ attachment={attachment}
+ index={i}
+ key={attachment.get('id')}
+ onClick={handleClick}
+ size={size}
+ />
+ )
+ );
+ }
+ }()}
</div>
);
}
