diff options
| -rw-r--r-- | app/javascript/mastodon/components/media_gallery.js | 41 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | yarn.lock | 18 |
3 files changed, 30 insertions, 30 deletions
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 38b26b1fc..e7f14a7db 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -6,7 +6,6 @@ import IconButton from './icon_button'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { isIOS } from '../is_mobile'; import classNames from 'classnames'; -import sizeMe from 'react-sizeme'; const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, @@ -172,7 +171,6 @@ class Item extends React.PureComponent { } @injectIntl -@sizeMe({}) export default class MediaGallery extends React.PureComponent { static propTypes = { @@ -209,21 +207,42 @@ export default class MediaGallery extends React.PureComponent { this.props.onOpenMedia(this.props.media, index); } + handleRef = (node) => { + if (node && this.isStandaloneEligible()) { + // offsetWidth triggers a layout, so only calculate when we need to + this.setState({ + width: node.offsetWidth, + }); + } + } + + isStandaloneEligible() { + const { media, standalone } = this.props; + return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); + } + render () { - const { media, intl, sensitive, height, standalone, size } = this.props; + const { media, intl, sensitive, height } = this.props; + const { width, visible } = this.state; let children; - const standaloneEligible = standalone && size.width && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); const style = {}; - if (standaloneEligible) { - style.height = size.width / media.getIn([0, 'meta', 'small', 'aspect']); + if (this.isStandaloneEligible()) { + if (!visible && width) { + // only need to forcibly set the height in "sensitive" mode + style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); + } else { + // layout automatically, using image's natural aspect ratio + style.height = ''; + } } else { + // crop the image style.height = height; } - if (!this.state.visible) { + if (!visible) { let warning; if (sensitive) { @@ -233,7 +252,7 @@ export default class MediaGallery extends React.PureComponent { } children = ( - <button className='media-spoiler' onClick={this.handleOpen} style={style}> + <button className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}> <span className='media-spoiler__warning'>{warning}</span> <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> </button> @@ -241,7 +260,7 @@ export default class MediaGallery extends React.PureComponent { } else { const size = media.take(4).size; - if (standaloneEligible) { + if (this.isStandaloneEligible()) { children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} autoPlayGif={this.props.autoPlayGif} />; } else { children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} />); @@ -250,8 +269,8 @@ export default class MediaGallery extends React.PureComponent { return ( <div className='media-gallery' style={style}> - <div className={classNames('spoiler-button', { 'spoiler-button--visible': this.state.visible })}> - <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} /> + <div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}> + <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} /> </div> {children} diff --git a/package.json b/package.json index 7835a0440..be9b90875 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,6 @@ "react-router-dom": "^4.1.1", "react-router-scroll": "ytase/react-router-scroll#build", "react-simple-dropdown": "^3.0.0", - "react-sizeme": "^2.3.5", "react-swipeable-views": "^0.12.3", "react-textarea-autosize": "^5.0.7", "react-toggle": "^4.0.1", diff --git a/yarn.lock b/yarn.lock index 640d06a10..7b8328805 100644 --- a/yarn.lock +++ b/yarn.lock @@ -982,10 +982,6 @@ base64-js@^1.0.2: version "1.2.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886" -batch-processor@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8" - batch@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16" @@ -2057,12 +2053,6 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14: version "1.3.15" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369" -element-resize-detector@^1.1.12: - version "1.1.12" - resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.12.tgz#8b3fd6eedda17f9c00b360a0ea2df9927ae80ba2" - dependencies: - batch-processor "^1.0.0" - elliptic@^6.0.0: version "6.4.0" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df" @@ -5423,14 +5413,6 @@ react-simple-dropdown@^3.0.0: classnames "^2.1.2" prop-types "^15.5.8" -react-sizeme@^2.3.5: - version "2.3.5" - resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.3.5.tgz#f14c0a15f9b24d7b8b6f196871b0af19aa01a422" - dependencies: - element-resize-detector "^1.1.12" - invariant "^2.2.2" - lodash "^4.17.4" - react-swipeable-views-core@^0.11.1: version "0.11.1" resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.11.1.tgz#61d046799f90725bbf91a0eb3abcab805c774cac" |