Fix focal point cropping in MediaGallery, fix focal point modal (#6740)

* Use object-position with object-fit instead of JS top/left

* Fix focal point modal

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} />);
       }
     }
 

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')}

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;