Merge branch 'stillimage-tsx' into 'develop'

Convert StillImage and legacy Avatar components to TSX

See merge request soapbox-pub/soapbox-fe!1329

app/soapbox/components/__tests__/avatar.test.js

@@ -1,11 +1,12 @@
-import { fromJS } from 'immutable';
 import React from 'react';
 
+import { normalizeAccount } from 'soapbox/normalizers';
+
 import { render, screen } from '../../jest/test-helpers';
 import Avatar from '../avatar';
 
 describe('<Avatar />', () => {
-  const account = fromJS({
+  const account = normalizeAccount({
     username: 'alice',
     acct: 'alice',
     display_name: 'Alice',

app/soapbox/components/avatar.js

@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import StillImage from 'soapbox/components/still_image';
-
-export default class Avatar extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record,
-    size: PropTypes.number,
-    style: PropTypes.object,
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { account, size, className } = this.props;
-    if (!account) return null;
-
-    // : TODO : remove inline and change all avatars to be sized using css
-    const style = !size ? {} : {
-      width: `${size}px`,
-      height: `${size}px`,
-    };
-
-    return (
-      <StillImage
-        className={classNames('rounded-full', {
-          [className]: typeof className !== 'undefined',
-        })}
-        style={style}
-        src={account.get('avatar')}
-        alt=''
-      />
-    );
-  }
-
-}

app/soapbox/components/avatar.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import StillImage from 'soapbox/components/still_image';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IAvatar {
+  account?: Account | null,
+  size?: number,
+  className?: string,
+}
+
+/**
+ * Legacy avatar component.
+ * @see soapbox/components/ui/avatar/avatar.tsx
+ * @deprecated
+ */
+const Avatar: React.FC<IAvatar> = ({ account, size, className }) => {
+  if (!account) return null;
+
+  // : TODO : remove inline and change all avatars to be sized using css
+  const style: React.CSSProperties = !size ? {} : {
+    width: `${size}px`,
+    height: `${size}px`,
+  };
+
+  return (
+    <StillImage
+      className={classNames('rounded-full overflow-hidden', className)}
+      style={style}
+      src={account.avatar}
+      alt=''
+    />
+  );
+};
+
+export default Avatar;

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;

app/soapbox/components/ui/avatar/avatar.tsx

@@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
 
   return (
     <StillImage
-      className={classNames('rounded-full', className)}
+      className={classNames('rounded-full overflow-hidden', className)}
       style={style}
       src={src}
       alt='Avatar'