mirror of https://framagit.org/tykayn/mastodon.git
disable size by js option
This commit is contained in:
Baptiste Lemoine
parent
8dea80f71b
commit
213fbc3f51
|
|
@ -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,28 +136,48 @@ class Item extends React.PureComponent {
|
|||
const x = ((focusX / 2) + .5) * 100;
|
||||
const y = ((focusY / -2) + .5) * 100;
|
||||
|
||||
thumbnail = (
|
||||
<a
|
||||
className='media-gallery__item-thumbnail'
|
||||
href={attachment.get('remote_url') || originalUrl}
|
||||
onClick={this.handleClick}
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
src={previewUrl}
|
||||
srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
alt={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
style={{ objectPosition: `${x}% ${y}%` }}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
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'
|
||||
href={attachment.get('remote_url') || originalUrl}
|
||||
onClick={this.handleClick}
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
src={previewUrl}
|
||||
srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
alt={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
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}%` }}>
|
||||
{thumbnail}
|
||||
</div>
|
||||
);
|
||||
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,39 +277,68 @@ class MediaGallery extends React.PureComponent {
|
|||
|
||||
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 (!disableCustomSize) {
|
||||
|
||||
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) {
|
||||
// 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} 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 {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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)} displayWidth={width} />;
|
||||
if (disableCustomSize) {
|
||||
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}/>);
|
||||
}
|
||||
} else {
|
||||
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} />);
|
||||
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 (
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue