diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-07-09 15:02:26 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-09 15:02:26 +0200 |
commit | fc4c74660b690038ae48264f9d5b0230df58acc4 (patch) | |
tree | 51ed1a92c15a1700da32b6914e446f1d4a12e24e /app/javascript/mastodon/features/ui/components/media_modal.js | |
parent | caf938562ef0d0fdb03bf57f15bbab8d76c5b4c0 (diff) |
Swipeable views (#4105)
* feat: Replace react-swipeable with react-swipeable-views * fix: iOS 9
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/media_modal.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/media_modal.js | 18 |
1 files changed, 12 insertions, 6 deletions
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index a5b9dc19f..769e18820 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.js +++ b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -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} |