diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2018-03-02 07:00:04 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-02 07:00:04 +0100 |
commit | 036dd98abb1fe6ae1d25ff0f3ecffe4dd9a79ea3 (patch) | |
tree | 25e9ab71d4f3af615b4806c6633b815ab4ddcc50 /app/javascript/mastodon/components/media_gallery.js | |
parent | 7901f9f63e156732ab10154c34f3c2d188471a9d (diff) |
Responsively enforce 16:9 ratio on all media thumbnails in web UI (#6590)
* Responsively enforce 16:9 ratio on all media thumbnails in web UI Also change video player behaviour to "contain" rather than "cover" videos that don't fit the ratio, unlike images and GIFs, it's expected that a video is shown fully. * Fix spacing issues and remove floor * Remove floor
Diffstat (limited to 'app/javascript/mastodon/components/media_gallery.js')
-rw-r--r-- | app/javascript/mastodon/components/media_gallery.js | 5 |
1 files changed, 3 insertions, 2 deletions
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 9e1bb77c2..3568a8440 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -283,8 +283,9 @@ export default class MediaGallery extends React.PureComponent { if (width) { style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); } + } else if (width) { + style.height = width / (16/9); } else { - // crop the image style.height = height; } @@ -309,7 +310,7 @@ export default class MediaGallery extends React.PureComponent { if (this.isStandaloneEligible()) { children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />; } else { - children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} containerWidth={width} containerHeight={height} />); + children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} containerWidth={width} containerHeight={style.height} />); } } |