Create StillImage component

app/soapbox/components/still_image.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { getSettings } from 'soapbox/actions/settings';
+import classNames from 'classnames';
+
+const mapStateToProps = state => ({
+  autoPlayGif: getSettings(state).get('autoPlayGif'),
+});
+
+export default @connect(mapStateToProps)
+class StillImage extends React.PureComponent {
+
+  static propTypes = {
+    alt: PropTypes.string,
+    autoPlayGif: PropTypes.bool.isRequired,
+    className: PropTypes.node,
+    src: PropTypes.string.isRequired,
+    style: PropTypes.object,
+  };
+
+  static defaultProps = {
+    alt: '',
+    className: '',
+    style: {},
+  }
+
+  hoverToPlay() {
+    const { autoPlayGif, src } = this.props;
+    return !autoPlayGif && src.endsWith('.gif');
+  }
+
+  setCanvasRef = c => {
+    this.canvas = c;
+  }
+
+  setImageRef = i => {
+    this.img = i;
+  }
+
+  handleImageLoad = () => {
+    if (this.hoverToPlay()) {
+      const img = this.img;
+      const canvas = this.canvas;
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      canvas.getContext('2d').drawImage(img, 0, 0);
+    }
+  }
+
+  render() {
+    const { alt, className, src, style } = this.props;
+    const hoverToPlay = this.hoverToPlay();
+
+    return (
+      <div className={classNames(className, 'still-image', { 'still-image--play-on-hover': hoverToPlay })} style={style}>
+        <img src={src} alt={alt} ref={this.setImageRef} onLoad={this.handleImageLoad} />
+        {hoverToPlay && <canvas ref={this.setCanvasRef} />}
+      </div>
+    );
+  }
+
+}

app/styles/application.scss

@@ -58,6 +58,7 @@
 @import 'components/navigation-bar';
 @import 'components/promo-panel';
 @import 'components/drawer';
+@import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';
 @import 'components/trends';

app/styles/components/still-image.scss

@@ -0,0 +1,28 @@
+.still-image {
+  position: relative;
+  overflow: hidden;
+
+  img,
+  canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    font-family: inherit;
+  }
+
+  &--play-on-hover {
+    img {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    &:hover img {
+      visibility: visible;
+    }
+
+    &:hover canvas {
+      visibility: hidden;
+    }
+  }
+}