Merge branch 'stillimage-tsx' into 'develop'
Convert StillImage and legacy Avatar components to TSX See merge request soapbox-pub/soapbox-fe!1329
This commit is contained in:
Alex Gleason
commit
3a0b88bb37
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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=''
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue