Use StillImage on media items and fix autoPlayGif on account gallery

app/soapbox/components/media_gallery.js

@@ -11,6 +11,7 @@ import { decode } from 'blurhash';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 import { Map as ImmutableMap } from 'immutable';
 import { getSettings } from 'soapbox/actions/settings';
+import StillImage from 'soapbox/components/still_image';
 
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@@ -60,8 +61,7 @@ class Item extends React.PureComponent {
 
   hoverToPlay() {
     const { attachment, autoPlayGif } = this.props;
-    return !autoPlayGif &&
+    return !autoPlayGif && attachment.get('type') === 'gifv';
-      (attachment.get('type') === 'gifv' || attachment.getIn(['pleroma', 'mime_type']) === 'image/gif');
   }
 
   handleClick = (e) => {
@@ -72,7 +72,7 @@ class Item extends React.PureComponent {
       e.preventDefault();
     } else {
       if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-        if (!this.canvas && this.hoverToPlay()) {
+        if (this.hoverToPlay()) {
           e.target.pause();
           e.target.currentTime = 0;
         }
@@ -112,23 +112,12 @@ class Item extends React.PureComponent {
     this.canvas = c;
   }
 
-  setImageRef = i => {
-    this.image = i;
-  }
-
   handleImageLoad = () => {
     this.setState({ loaded: true });
-    if (this.hoverToPlay()) {
-      const image = this.image;
-      const canvas = this.canvas;
-      canvas.width = image.naturalWidth;
-      canvas.height = image.naturalHeight;
-      canvas.getContext('2d').drawImage(image, 0, 0);
-    }
   }
 
   render() {
-    const { attachment, standalone, displayWidth, visible, dimensions, autoPlayGif } = this.props;
+    const { attachment, standalone, visible, dimensions, autoPlayGif } = this.props;
 
     let width  = 100;
     let height = '100%';
@@ -162,39 +151,17 @@ class Item extends React.PureComponent {
       );
     } else if (attachment.get('type') === 'image') {
       const previewUrl   = attachment.get('preview_url');
-      const previewWidth = attachment.getIn(['meta', 'small', 'width']);
 
       const originalUrl   = attachment.get('url');
-      const originalWidth = attachment.getIn(['meta', 'original', 'width']);
-
-      const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';
-
-      const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;
-      const sizes  = hasSize && (displayWidth > 0) ? `${displayWidth * (width / 100)}px` : null;
-
-      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
-          className={classNames('media-gallery__item-thumbnail', { 'media-gallery__item-thumbnail--play-on-hover': this.hoverToPlay() })}
+          className='media-gallery__item-thumbnail'
           href={attachment.get('remote_url') || originalUrl}
           onClick={this.handleClick}
           target='_blank'
         >
-          <img
+          <StillImage src={previewUrl} alt={attachment.get('description')} />
-            src={previewUrl}
-            srcSet={srcSet}
-            sizes={sizes}
-            alt={attachment.get('description')}
-            title={attachment.get('description')}
-            style={{ objectPosition: `${x}% ${y}%` }}
-            onLoad={this.handleImageLoad}
-            ref={this.setImageRef}
-          />
-          {this.hoverToPlay() && <canvas ref={this.setCanvasRef} style={{ objectPosition: `${x}% ${y}%` }} />}
         </a>
       );
     } else if (attachment.get('type') === 'gifv') {

app/soapbox/features/account_gallery/components/media_item.js

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { decode } from 'blurhash';
 import { isIOS } from 'soapbox/is_mobile';
 import { getSettings } from 'soapbox/actions/settings';
+import StillImage from 'soapbox/components/still_image';
 
 const mapStateToProps = state => ({
   autoPlayGif: getSettings(state).get('autoPlayGif'),
@@ -113,12 +114,10 @@ class MediaItem extends ImmutablePureComponent {
       const y      = ((focusY / -2) + .5) * 100;
 
       thumbnail = (
-        <img
+        <StillImage
           src={attachment.get('preview_url')}
           alt={attachment.get('description')}
-          title={attachment.get('description')}
           style={{ objectPosition: `${x}% ${y}%` }}
-          onLoad={this.handleImageLoad}
         />
       );
     } else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) {

app/styles/components/media-gallery.scss

@@ -28,47 +28,26 @@
   z-index: 1;
 
   &,
-  img,
+  .still-image {
-  canvas {
     height: 100%;
     width: 100%;
   }
 
-  img,
+  .still-image--play-on-hover::before {
-  canvas {
+    content: 'GIF';
-    object-fit: cover;
+    position: absolute;
-  }
+    color: var(--primary-text-color);
-
+    background: var(--foreground-color);
-  &--play-on-hover {
+    bottom: 6px;
-    &::before {
+    left: 6px;
-      content: 'GIF';
+    padding: 2px 6px;
-      position: absolute;
+    border-radius: 2px;
-      color: var(--primary-text-color);
+    font-size: 11px;
-      background: var(--foreground-color);
+    font-weight: 600;
-      bottom: 6px;
+    pointer-events: none;
-      left: 6px;
+    opacity: 0.9;
-      padding: 2px 6px;
+    transition: opacity 0.1s ease;
-      border-radius: 2px;
+    line-height: 18px;
-      font-size: 11px;
-      font-weight: 600;
-      pointer-events: none;
-      opacity: 0.9;
-      transition: opacity 0.1s ease;
-      line-height: 18px;
-    }
-
-    img {
-      position: absolute;
-    }
-
-    img,
-    &:hover::before {
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible;
-    }
   }
 }
 
@@ -82,6 +61,23 @@
   z-index: 0;
   background: var(--background-color);
 
+  .still-image--play-on-hover::before {
+    content: 'GIF';
+    position: absolute;
+    color: var(--primary-text-color);
+    background: var(--foreground-color);
+    bottom: 6px;
+    left: 6px;
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 11px;
+    font-weight: 600;
+    pointer-events: none;
+    opacity: 0.9;
+    transition: opacity 0.1s ease;
+    line-height: 18px;
+  }
+
   &--hidden {
     display: none;
   }