disable size by js option

This commit is contained in:
Baptiste Lemoine 2018-12-28 12:27:40 +01:00
parent 8dea80f71b
commit 213fbc3f51
2 changed files with 123 additions and 51 deletions

View File

@ -1,19 +1,25 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { is } from 'immutable';
import {is} from 'immutable';
import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile';
import {defineMessages, FormattedMessage} from 'react-intl';
import {isIOS} from '../is_mobile';
import classNames from 'classnames';
import { autoPlayGif, displayMedia } from '../initial_state';
import {autoPlayGif, displayMedia} from '../initial_state';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
});
const disableCustomSize = true;
class Item extends React.PureComponent {
mediaWidth = 200;
mediaHeight = 500;
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
standalone: PropTypes.bool,
@ -61,19 +67,20 @@ class Item extends React.PureComponent {
render () {
const { attachment, index, size, standalone, displayWidth } = this.props;
let width = 50;
let height = 100;
let width = this.mediaWidth;
let height = this.mediaHeight;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
// size is the number of pictures attached to the gallery
if (size === 1) {
width = 100;
width = this.mediaWidth;
}
if (size === 4 || (size === 3 && index > 0)) {
height = 50;
height = this.mediaHeight;
}
if (size === 2) {
@ -129,6 +136,24 @@ class Item extends React.PureComponent {
const x = ((focusX / 2) + .5) * 100;
const y = ((focusY / -2) + .5) * 100;
if (disableCustomSize) {
thumbnail = (
<a
className='media-gallery__item-thumbnail'
href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick}
target='_blank'
>
<img
src={previewUrl}
srcSet={srcSet}
alt={attachment.get('description')}
title={attachment.get('description')}
/>
</a>
);
} else {
// thumbnail resized by the js
thumbnail = (
<a
className='media-gallery__item-thumbnail'
@ -142,15 +167,17 @@ class Item extends React.PureComponent {
sizes={sizes}
alt={attachment.get('description')}
title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }}
style={{objectPosition: `${x}% ${y}%`}}
/>
</a>
);
}
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && autoPlayGif;
thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<div className={classNames('media-gallery__gifv', {autoplay: autoPlay})}>
<video
className='media-gallery__item-gifv-thumbnail'
aria-label={attachment.get('description')}
@ -168,13 +195,27 @@ class Item extends React.PureComponent {
<span className='media-gallery__gifv__label'>GIF</span>
</div>
);
}
return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
let template = '';
if (disableCustomSize) {
template = (
<div className={classNames('media-gallery__item', {standalone})} key={attachment.get('id')}
style={{left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%`}}>
{thumbnail}
</div>
);
} else {
template = (
<div className={classNames('media-gallery__item', {standalone})} key={attachment.get('id')}>
{thumbnail}
</div>
);
}
return template;
}
}
@ -236,6 +277,8 @@ class MediaGallery extends React.PureComponent {
const style = {};
if (!disableCustomSize) {
if (this.isStandaloneEligible()) {
if (width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
@ -246,29 +289,56 @@ class MediaGallery extends React.PureComponent {
style.height = height;
}
}
if (!visible) {
let warning;
if (sensitive) {
// TODO translate
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
} else {
// TODO translate
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
}
if (disableCustomSize) {
// TODO translate
children = (
<button type='button' className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>
<button type='button' className='media-spoiler' onClick={this.handleOpen} 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>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle'
defaultMessage='Click to view'/></span>
</button>
);
} else {
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 (disableCustomSize) {
if (this.isStandaloneEligible()) {
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} />;
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width}/>;
} else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} />);
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick}
attachment={attachment} index={i} size={size}/>);
}
} else {
if (this.isStandaloneEligible()) {
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width}/>;
} else {
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick}
attachment={attachment} index={i} size={size}/>);
}
}
}
return (

View File

@ -14,6 +14,8 @@ import Video from '../../video';
export default class DetailedStatus extends ImmutablePureComponent {
mediaHeight = 500
static contextTypes = {
router: PropTypes.object,
};
@ -61,7 +63,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
preview={video.get('preview_url')}
src={video.get('url')}
alt={video.get('description')}
width={300}
width={this.mediaHeight}
height={150}
inline
onOpenVideo={this.handleOpenVideo}
@ -74,7 +76,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
standalone
sensitive={status.get('sensitive')}
media={status.get('media_attachments')}
height={300}
height={this.mediaHeight}
onOpenMedia={this.props.onOpenMedia}
/>
);