123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- import React from 'react';
- import ReactSwipeableViews from 'react-swipeable-views';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import PropTypes from 'prop-types';
- import Video from 'mastodon/features/video';
- import classNames from 'classnames';
- import { defineMessages, injectIntl } from 'react-intl';
- import IconButton from 'mastodon/components/icon_button';
- import ImmutablePureComponent from 'react-immutable-pure-component';
- import ImageLoader from './image_loader';
- import Icon from 'mastodon/components/icon';
- import GIFV from 'mastodon/components/gifv';
- import { disableSwiping } from 'mastodon/initial_state';
- import Footer from 'mastodon/features/picture_in_picture/components/footer';
- import { getAverageFromBlurhash } from 'mastodon/blurhash';
- const messages = defineMessages({
- close: { id: 'lightbox.close', defaultMessage: 'Close' },
- previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
- next: { id: 'lightbox.next', defaultMessage: 'Next' },
- });
- export default @injectIntl
- class MediaModal extends ImmutablePureComponent {
- static propTypes = {
- media: ImmutablePropTypes.list.isRequired,
- statusId: PropTypes.string,
- index: PropTypes.number.isRequired,
- onClose: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
- onChangeBackgroundColor: PropTypes.func.isRequired,
- currentTime: PropTypes.number,
- autoPlay: PropTypes.bool,
- volume: PropTypes.number,
- };
- state = {
- index: null,
- navigationHidden: false,
- zoomButtonHidden: false,
- };
- handleSwipe = (index) => {
- this.setState({ index: index % this.props.media.size });
- }
- handleTransitionEnd = () => {
- this.setState({
- zoomButtonHidden: false,
- });
- }
- handleNextClick = () => {
- this.setState({
- index: (this.getIndex() + 1) % this.props.media.size,
- zoomButtonHidden: true,
- });
- }
- handlePrevClick = () => {
- this.setState({
- index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size,
- zoomButtonHidden: true,
- });
- }
- handleChangeIndex = (e) => {
- const index = Number(e.currentTarget.getAttribute('data-index'));
- this.setState({
- index: index % this.props.media.size,
- zoomButtonHidden: true,
- });
- }
- handleKeyDown = (e) => {
- switch(e.key) {
- case 'ArrowLeft':
- this.handlePrevClick();
- e.preventDefault();
- e.stopPropagation();
- break;
- case 'ArrowRight':
- this.handleNextClick();
- e.preventDefault();
- e.stopPropagation();
- break;
- }
- }
- componentDidMount () {
- window.addEventListener('keydown', this.handleKeyDown, false);
- this._sendBackgroundColor();
- }
- componentDidUpdate (prevProps, prevState) {
- if (prevState.index !== this.state.index) {
- this._sendBackgroundColor();
- }
- }
- _sendBackgroundColor () {
- const { media, onChangeBackgroundColor } = this.props;
- const index = this.getIndex();
- const blurhash = media.getIn([index, 'blurhash']);
- if (blurhash) {
- const backgroundColor = getAverageFromBlurhash(blurhash);
- onChangeBackgroundColor(backgroundColor);
- }
- }
- componentWillUnmount () {
- window.removeEventListener('keydown', this.handleKeyDown);
- this.props.onChangeBackgroundColor(null);
- }
- getIndex () {
- return this.state.index !== null ? this.state.index : this.props.index;
- }
- toggleNavigation = () => {
- this.setState(prevState => ({
- navigationHidden: !prevState.navigationHidden,
- }));
- };
- render () {
- const { media, statusId, intl, onClose } = this.props;
- const { navigationHidden } = this.state;
- const index = this.getIndex();
- const leftNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>;
- const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>;
- const content = media.map((image) => {
- const width = image.getIn(['meta', 'original', 'width']) || null;
- const height = image.getIn(['meta', 'original', 'height']) || null;
- if (image.get('type') === 'image') {
- return (
- <ImageLoader
- previewSrc={image.get('preview_url')}
- src={image.get('url')}
- width={width}
- height={height}
- alt={image.get('description')}
- key={image.get('url')}
- onClick={this.toggleNavigation}
- zoomButtonHidden={this.state.zoomButtonHidden}
- />
- );
- } else if (image.get('type') === 'video') {
- const { currentTime, autoPlay, volume } = this.props;
- return (
- <Video
- preview={image.get('preview_url')}
- blurhash={image.get('blurhash')}
- src={image.get('url')}
- width={image.get('width')}
- height={image.get('height')}
- frameRate={image.getIn(['meta', 'original', 'frame_rate'])}
- currentTime={currentTime || 0}
- autoPlay={autoPlay || false}
- volume={volume || 1}
- onCloseVideo={onClose}
- detailed
- alt={image.get('description')}
- key={image.get('url')}
- />
- );
- } else if (image.get('type') === 'gifv') {
- return (
- <GIFV
- src={image.get('url')}
- width={width}
- height={height}
- key={image.get('preview_url')}
- alt={image.get('description')}
- onClick={this.toggleNavigation}
- />
- );
- }
- return null;
- }).toArray();
- // you can't use 100vh, because the viewport height is taller
- // than the visible part of the document in some mobile
- // browsers when it's address bar is visible.
- // https://developers.google.com/web/updates/2016/12/url-bar-resizing
- const swipeableViewsStyle = {
- width: '100%',
- height: '100%',
- };
- const containerStyle = {
- alignItems: 'center', // center vertically
- };
- const navigationClassName = classNames('media-modal__navigation', {
- 'media-modal__navigation--hidden': navigationHidden,
- });
- let pagination;
- if (media.size > 1) {
- pagination = media.map((item, i) => (
- <button key={i} className={classNames('media-modal__page-dot', { active: i === index })} data-index={i} onClick={this.handleChangeIndex}>
- {i + 1}
- </button>
- ));
- }
- return (
- <div className='modal-root__modal media-modal'>
- <div className='media-modal__closer' role='presentation' onClick={onClose} >
- <ReactSwipeableViews
- style={swipeableViewsStyle}
- containerStyle={containerStyle}
- onChangeIndex={this.handleSwipe}
- onTransitionEnd={this.handleTransitionEnd}
- index={index}
- disabled={disableSwiping}
- >
- {content}
- </ReactSwipeableViews>
- </div>
- <div className={navigationClassName}>
- <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
- {leftNav}
- {rightNav}
- <div className='media-modal__overlay'>
- {pagination && <ul className='media-modal__pagination'>{pagination}</ul>}
- {statusId && <Footer statusId={statusId} withOpenButton onClose={onClose} />}
- </div>
- </div>
- </div>
- );
- }
- }
|