StillImage: convert to TSX

app/soapbox/components/still_image.js

@@ -1,64 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-
-import { getSettings } from 'soapbox/actions/settings';
-
-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 src && !autoPlayGif && (src.endsWith('.gif') || src.startsWith('blob:'));
-  }
-
-  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 data-testid='still-image-container' 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/soapbox/components/still_image.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import React, { useRef } from 'react';
+
+import { useSettings } from 'soapbox/hooks';
+
+interface IStillImage {
+  /** Image alt text. */
+  alt?: string,
+  /** Extra class names for the outer <div> container. */
+  className?: string,
+  /** URL to the image */
+  src: string,
+  /** Extra CSS styles on the outer <div> element. */
+  style?: React.CSSProperties,
+}
+
+/** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
+  const settings = useSettings();
+  const autoPlayGif = settings.get('autoPlayGif');
+
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const img    = useRef<HTMLImageElement>(null);
+
+  const hoverToPlay = (
+    src && !autoPlayGif && (src.endsWith('.gif') || src.startsWith('blob:'))
+  );
+
+  const handleImageLoad = () => {
+    if (hoverToPlay && canvas.current && img.current) {
+      canvas.current.width  = img.current.naturalWidth;
+      canvas.current.height = img.current.naturalHeight;
+      canvas.current.getContext('2d')?.drawImage(img.current, 0, 0);
+    }
+  };
+
+
+  return (
+    <div data-testid='still-image-container' className={classNames(className, 'still-image', { 'still-image--play-on-hover': hoverToPlay })} style={style}>
+      <img src={src} alt={alt} ref={img} onLoad={handleImageLoad} />
+      {hoverToPlay && <canvas ref={canvas} />}
+    </div>
+  );
+};
+
+export default StillImage;