@ -3,6 +3,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import PropTypes from 'prop-types' ;
import PropTypes from 'prop-types' ;
import ExtendedVideoPlayer from '../../../components/extended_video_player' ;
import ExtendedVideoPlayer from '../../../components/extended_video_player' ;
import classNames from 'classnames' ;
import { defineMessages , injectIntl } from 'react-intl' ;
import { defineMessages , injectIntl } from 'react-intl' ;
import IconButton from '../../../components/icon_button' ;
import IconButton from '../../../components/icon_button' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
@ -26,6 +27,7 @@ export default class MediaModal extends ImmutablePureComponent {
state = {
state = {
index : null ,
index : null ,
navigationHidden : false ,
} ;
} ;
handleSwipe = ( index ) => {
handleSwipe = ( index ) => {
@ -68,14 +70,21 @@ export default class MediaModal extends ImmutablePureComponent {
return this . state . index !== null ? this . state . index : this . props . index ;
return this . state . index !== null ? this . state . index : this . props . index ;
}
}
toggleNavigation = ( ) => {
this . setState ( prevState => ( {
navigationHidden : ! prevState . navigationHidden ,
} ) ) ;
} ;
render ( ) {
render ( ) {
const { media , intl , onClose } = this . props ;
const { media , intl , onClose } = this . props ;
const { navigationHidden } = this . state ;
const index = this . getIndex ( ) ;
const index = this . getIndex ( ) ;
let pagination = [ ] ;
let pagination = [ ] ;
const leftNav = media . size > 1 && < button tabIndex = '0' className = 'modal-container__nav modal-container __nav--left' onClick = { this . handlePrevClick } aria - label = { intl . formatMessage ( messages . previous ) } > < i className = 'fa fa-fw fa-chevron-left' / > < / b u t t o n > ;
const rightNav = media . size > 1 && < button tabIndex = '0' className = 'modal-container__nav modal-container __nav--right' onClick = { this . handleNextClick } aria - label = { intl . formatMessage ( messages . next ) } > < i className = 'fa fa-fw fa-chevron-right' / > < / b u t t o n > ;
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 ) } > < i className = 'fa fa-fw fa-chevron-left' / > < / b u t t o n > ;
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 ) } > < i className = 'fa fa-fw fa-chevron-right' / > < / b u t t o n > ;
if ( media . size > 1 ) {
if ( media . size > 1 ) {
pagination = media . map ( ( item , i ) => {
pagination = media . map ( ( item , i ) => {
@ -92,9 +101,30 @@ export default class MediaModal extends ImmutablePureComponent {
const height = image . getIn ( [ 'meta' , 'original' , 'height' ] ) || null ;
const height = image . getIn ( [ 'meta' , 'original' , 'height' ] ) || null ;
if ( image . get ( 'type' ) === 'image' ) {
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' ) } / > ;
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 }
/ >
) ;
} else if ( image . get ( 'type' ) === 'gifv' ) {
} else if ( image . get ( 'type' ) === 'gifv' ) {
return < ExtendedVideoPlayer src = { image . get ( 'url' ) } muted controls = { false } width = { width } height = { height } key = { image . get ( 'preview_url' ) } alt = { image . get ( 'description' ) } / > ;
return (
< ExtendedVideoPlayer
src = { image . get ( 'url' ) }
muted
controls = { false }
width = { width }
height = { height }
key = { image . get ( 'preview_url' ) }
alt = { image . get ( 'description' ) }
onClick = { this . toggleNavigation }
/ >
) ;
}
}
return null ;
return null ;
@ -104,21 +134,43 @@ export default class MediaModal extends ImmutablePureComponent {
alignItems : 'center' , // center vertically
alignItems : 'center' , // center vertically
} ;
} ;
const navigationClassName = classNames ( 'media-modal__navigation' , {
'media-modal__navigation--hidden' : navigationHidden ,
} ) ;
return (
return (
< div className = 'modal-root__modal media-modal' >
< div className = 'modal-root__modal media-modal' >
{ leftNav }
< div className = 'media-modal__content' >
< IconButton className = 'media-modal__close' title = { intl . formatMessage ( messages . close ) } icon = 'times' onClick = { onClose } size = { 16 } / >
< ReactSwipeableViews containerStyle = { containerStyle } onChangeIndex = { this . handleSwipe } index = { index } >
{ content }
< / R e a c t S w i p e a b l e V i e w s >
< div
className = 'media-modal__closer'
role = 'presentation'
onClick = { onClose }
>
< div className = 'media-modal__content' >
< ReactSwipeableViews
style = { {
// 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
height : ` ${ document . body . clientHeight } px ` ,
} }
containerStyle = { containerStyle }
onChangeIndex = { this . handleSwipe }
onSwitching = { this . handleSwitching }
index = { index }
>
{ content }
< / R e a c t S w i p e a b l e V i e w s >
< / d i v >
< / d i v >
< div className = { navigationClassName } >
< IconButton className = 'media-modal__close' title = { intl . formatMessage ( messages . close ) } icon = 'times' onClick = { onClose } size = { 40 } / >
{ leftNav }
{ rightNav }
< ul className = 'media-modal__pagination' >
{ pagination }
< / u l >
< / d i v >
< / d i v >
< ul className = 'media-modal__pagination' >
{ pagination }
< / u l >
{ rightNav }
< / d i v >
< / d i v >
) ;
) ;
}
}