glitchier-soc/app/javascript/mastodon/features/explore/components/story.js

import React from 'react';
import PropTypes from 'prop-types';
import Blurhash from 'mastodon/components/blurhash';
import { accountsCountRenderer } from 'mastodon/components/hashtag';
import ShortNumber from 'mastodon/components/short_number';
import Skeleton from 'mastodon/components/skeleton';
import classNames from 'classnames';

export default class Story extends React.PureComponent {

  static propTypes = {
    url: PropTypes.string,
    title: PropTypes.string,
    publisher: PropTypes.string,
    sharedTimes: PropTypes.number,
    thumbnail: PropTypes.string,
    blurhash: PropTypes.string,
  };

  state = {
    thumbnailLoaded: false,
  };

  handleImageLoad = () => this.setState({ thumbnailLoaded: true });

  render () {
    const { url, title, publisher, sharedTimes, thumbnail, blurhash } = this.props;

    const { thumbnailLoaded } = this.state;

    return (
      <a className='story' href={url} target='blank' rel='noopener'>
        <div className='story__details'>
          <div className='story__details__publisher'>{publisher ? publisher : <Skeleton width={50} />}</div>
          <div className='story__details__title'>{title ? title : <Skeleton />}</div>
          <div className='story__details__shared'>{typeof sharedTimes === 'number' ? <ShortNumber value={sharedTimes} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}</div>
        </div>

        <div className='story__thumbnail'>
          {thumbnail ? (
            <React.Fragment>
              <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
              <img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' />
            </React.Fragment>
          ) : <Skeleton />}
        </div>
      </a>
    );
  }

}