content: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import { arrayify } from '../utils/jsonld';
  
  export default class ImageObject extends Component {
    static propTypes = {
      maxHeight: PropTypes.number,
      maxWidth: PropTypes.number,
      className: PropTypes.string,
      encoding: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.arrayOf(PropTypes.object)
      ])
    };
  
    render() {
      let { className, encoding, maxHeight, maxWidth } = this.props;
      encoding = arrayify(encoding).find(encoding => encoding.contentUrl);
  
      if (!encoding || encoding['@type'] !== 'ImageObject') return null;
      // we have thumbnails for 940, 640, 320
      let srcSet, sizes;
      const blobs = arrayify(encoding.thumbnail)
        .concat(encoding)
        .filter(
          encoding =>
            encoding.contentUrl &&
            encoding.width &&
            encoding.height &&
            encoding.fileFormat &&
            (encoding.fileFormat.includes('image/png') ||
              encoding.fileFormat.includes('image/jpeg'))
        )
        .sort((a, b) => {
          return b.width * b.height - a.width * a.height;
        });
  
      // TODO fix... see https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
      srcSet = blobs.map(blob => `${blob.contentUrl} ${blob.width}w`).join(', ');
      sizes = [
        `(width > 2000px) calc(100vw - 60rem)`,
        `(width > 1440px) calc(100vw - 40rem)`,
        `(width > 768px) calc(100vw - 20rem)`,
        `(width > 420px) calc(100vw - 4rem)`,
        '100vw'
      ].join(', ');
  
      let style;
      if (maxHeight || maxWidth) {
        style = {};
        if (maxHeight) {
          style.maxHeight = maxHeight;
        }
        if (maxWidth) {
          style.maxWidth = maxWidth;
        }
      }
  
      return (
        <img
          style={style}
          className={classNames(className, 'image-object')}
          src={blobs[0].contentUrl}
          srcSet={srcSet}
          sizes={sizes}
        />
      );
    }
  }
  