Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Swipeable views (#4105)

Browse source 
* feat: Replace react-swipeable with react-swipeable-views

* fix: iOS 9
This commit is contained in:
Sorin Davidoi 2017-07-09 15:02:26 +02:00 • committed by Eugen Rochko
parent caf938562e
commit fc4c74660b
9 changed files with 150 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/javascript/mastodon/features/ui/components/media_modal.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import ReactSwipeable from 'react-swipeable';
import ReactSwipeableViews from 'react-swipeable-views';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ExtendedVideoPlayer from '../../../components/extended_video_player';
@ -26,6 +26,10 @@ export default class MediaModal extends ImmutablePureComponent {
index: null,
};
handleSwipe = (index) => {
this.setState({ index: (index) % this.props.media.size });
}
handleNextClick = () => {
this.setState({ index: (this.getIndex() + 1) % this.props.media.size });
}
@ -74,10 +78,12 @@ export default class MediaModal extends ImmutablePureComponent {
}
if (attachment.get('type') === 'image') {
const width = attachment.getIn(['meta', 'original', 'width']) || null;
const height = attachment.getIn(['meta', 'original', 'height']) || null;
content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null;
content = <ImageLoader previewSrc={attachment.get('preview_url')} src={url} width={width} height={height} />;
return <ImageLoader previewSrc={image.get('preview_url')} src={image.get('url')} width={width} height={height} key={image.get('preview_url')} />;
}).toArray();
} else if (attachment.get('type') === 'gifv') {
content = <ExtendedVideoPlayer src={url} muted controls={false} />;
}
@ -88,9 +94,9 @@ export default class MediaModal extends ImmutablePureComponent {
<div className='media-modal__content'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<ReactSwipeable onSwipedRight={this.handlePrevClick} onSwipedLeft={this.handleNextClick}>
<ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index}>
{content}
</ReactSwipeable>
</ReactSwipeableViews>
</div>
{rightNav}