diff options
Diffstat (limited to 'app')
3 files changed, 23 insertions, 62 deletions
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 9310e7c96..1cef029d8 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -12,26 +12,6 @@ const messages = defineMessages({ toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, }); -const shiftToPoint = (containerToImageRatio, containerSize, imageSize, focusSize, toMinus) => { - const containerCenter = Math.floor(containerSize / 2); - const focusFactor = (focusSize + 1) / 2; - const scaledImage = Math.floor(imageSize / containerToImageRatio); - - let focus = Math.floor(focusFactor * scaledImage); - - if (toMinus) focus = scaledImage - focus; - - let focusOffset = focus - containerCenter; - - const remainder = scaledImage - focus; - const containerRemainder = containerSize - containerCenter; - - if (remainder < containerRemainder) focusOffset -= containerRemainder - remainder; - if (focusOffset < 0) focusOffset = 0; - - return (focusOffset * -100 / containerSize) + '%'; -}; - class Item extends React.PureComponent { static contextTypes = { @@ -44,8 +24,6 @@ class Item extends React.PureComponent { index: PropTypes.number.isRequired, size: PropTypes.number.isRequired, onClick: PropTypes.func.isRequired, - containerWidth: PropTypes.number, - containerHeight: PropTypes.number, }; static defaultProps = { @@ -84,7 +62,7 @@ class Item extends React.PureComponent { } render () { - const { attachment, index, size, standalone, containerWidth, containerHeight } = this.props; + const { attachment, index, size, standalone } = this.props; let width = 50; let height = 100; @@ -143,45 +121,16 @@ class Item extends React.PureComponent { const originalUrl = attachment.get('url'); const originalWidth = attachment.getIn(['meta', 'original', 'width']); - const originalHeight = attachment.getIn(['meta', 'original', 'height']); const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; - const focusX = attachment.getIn(['meta', 'focus', 'x']); - const focusY = attachment.getIn(['meta', 'focus', 'y']); - const imageStyle = {}; - - if (originalWidth && originalHeight && containerWidth && containerHeight && focusX && focusY) { - const widthRatio = originalWidth / (containerWidth * (width / 100)); - const heightRatio = originalHeight / (containerHeight * (height / 100)); - - let hShift = 0; - let vShift = 0; - - if (widthRatio > heightRatio) { - hShift = shiftToPoint(heightRatio, (containerWidth * (width / 100)), originalWidth, focusX); - } else if(widthRatio < heightRatio) { - vShift = shiftToPoint(widthRatio, (containerHeight * (height / 100)), originalHeight, focusY, true); - } - - if (originalWidth > originalHeight) { - imageStyle.height = '100%'; - imageStyle.width = 'auto'; - imageStyle.minWidth = '100%'; - } else { - imageStyle.height = 'auto'; - imageStyle.width = '100%'; - imageStyle.minHeight = '100%'; - } - - imageStyle.top = vShift; - imageStyle.left = hShift; - } else { - imageStyle.height = '100%'; - } + const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; + const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; thumbnail = ( <a @@ -196,7 +145,7 @@ class Item extends React.PureComponent { sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} - style={imageStyle} + style={{ objectPosition: `${x}% ${y}%` }} /> </a> ); @@ -320,7 +269,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={style.height} />); + children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} />); } } diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js index 1038e1864..21bf6d81b 100644 --- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js +++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js @@ -103,7 +103,7 @@ export default class FocalPointModal extends ImmutablePureComponent { const height = media.getIn(['meta', 'original', 'height']) || null; return ( - <div className='modal-root__modal video-modal'> + <div className='modal-root__modal video-modal focal-point-modal'> <div className={classNames('focal-point', { dragging })} ref={this.setRef}> <ImageLoader previewSrc={media.get('preview_url')} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 1f3fb0fcd..93faff8b6 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4315,18 +4315,16 @@ a.status-card { display: block; text-decoration: none; color: $ui-secondary-color; - height: 100%; line-height: 0; &, img { + height: 100%; width: 100%; } img { - position: relative; object-fit: cover; - height: auto; } } @@ -5076,6 +5074,12 @@ noscript { } } +.focal-point-modal { + max-width: 80vw; + max-height: 80vh; + position: relative; +} + .focal-point { position: relative; cursor: pointer; @@ -5085,6 +5089,14 @@ noscript { cursor: move; } + img { + max-width: 80vw; + max-height: 80vh; + width: auto; + height: auto; + margin: auto; + } + &__reticle { position: absolute; width: 100px; |