|
|
@ -43,6 +43,7 @@ class Item extends React.PureComponent { |
|
|
|
onClick: PropTypes.func.isRequired, |
|
|
|
onClick: PropTypes.func.isRequired, |
|
|
|
displayWidth: PropTypes.number, |
|
|
|
displayWidth: PropTypes.number, |
|
|
|
visible: PropTypes.bool.isRequired, |
|
|
|
visible: PropTypes.bool.isRequired, |
|
|
|
|
|
|
|
autoplay: PropTypes.bool, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
static defaultProps = { |
|
|
|
static defaultProps = { |
|
|
@ -68,9 +69,13 @@ class Item extends React.PureComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getAutoPlay() { |
|
|
|
|
|
|
|
return this.props.autoplay || autoPlayGif; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
hoverToPlay () { |
|
|
|
hoverToPlay () { |
|
|
|
const { attachment } = this.props; |
|
|
|
const { attachment } = this.props; |
|
|
|
return !autoPlayGif && attachment.get('type') === 'gifv'; |
|
|
|
return !this.getAutoPlay() && attachment.get('type') === 'gifv'; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleClick = (e) => { |
|
|
|
handleClick = (e) => { |
|
|
@ -222,7 +227,7 @@ class Item extends React.PureComponent { |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
); |
|
|
|
); |
|
|
|
} else if (attachment.get('type') === 'gifv') { |
|
|
|
} else if (attachment.get('type') === 'gifv') { |
|
|
|
const autoPlay = !isIOS() && autoPlayGif; |
|
|
|
const autoPlay = !isIOS() && this.getAutoPlay(); |
|
|
|
|
|
|
|
|
|
|
|
thumbnail = ( |
|
|
|
thumbnail = ( |
|
|
|
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> |
|
|
|
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> |
|
|
@ -271,6 +276,7 @@ class MediaGallery extends React.PureComponent { |
|
|
|
defaultWidth: PropTypes.number, |
|
|
|
defaultWidth: PropTypes.number, |
|
|
|
cacheWidth: PropTypes.func, |
|
|
|
cacheWidth: PropTypes.func, |
|
|
|
visible: PropTypes.bool, |
|
|
|
visible: PropTypes.bool, |
|
|
|
|
|
|
|
autoplay: PropTypes.bool, |
|
|
|
onToggleVisibility: PropTypes.func, |
|
|
|
onToggleVisibility: PropTypes.func, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -328,7 +334,7 @@ class MediaGallery extends React.PureComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
render () { |
|
|
|
const { media, intl, sensitive, letterbox, fullwidth, defaultWidth } = this.props; |
|
|
|
const { media, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props; |
|
|
|
const { visible } = this.state; |
|
|
|
const { visible } = this.state; |
|
|
|
const size = media.take(4).size; |
|
|
|
const size = media.take(4).size; |
|
|
|
const uncached = media.every(attachment => attachment.get('type') === 'unknown'); |
|
|
|
const uncached = media.every(attachment => attachment.get('type') === 'unknown'); |
|
|
@ -350,9 +356,9 @@ class MediaGallery extends React.PureComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.isStandaloneEligible()) { |
|
|
|
if (this.isStandaloneEligible()) { |
|
|
|
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />; |
|
|
|
children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} displayWidth={width} visible={visible} />; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />); |
|
|
|
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (uncached) { |
|
|
|
if (uncached) { |
|
|
|