@bigfishtv/cockpit/src/components/asset/ImageCell.js

import React, { Component } from 'react'
import classnames from 'classnames'

import Icon from '../Icon'

/**
 * Dumb asset cell for an image
 */
export default class ImageCell extends Component {
	static defaultProps = {
		url: 'http://placehold.it/300x200',
		mediaRatio: '1',
		onStatus: () => console.warn('[ImageCell] no onStatus prop'),
		queued: false,
	}

	constructor(props) {
		super(props)
		this.state = { broken: false }
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.url != nextProps.url) this.handleStatus(false)
	}

	handleStatus(broken) {
		this.setState({ broken })
		this.props.onStatus(broken)
	}

	render() {
		const { broken } = this.state
		const { queued, url, mediaRatio } = this.props
		return (
			<div className={classnames('media', mediaRatio && 'media-' + mediaRatio, !broken && 'media-transparent-pattern')}>
				{broken ? (
					<div className="media-inner">
						<Icon name="image-broken" size={24} />
						<span className="media-inner-title">Error loading file</span>
					</div>
				) : queued ? (
					<div className="media-inner">
						<Icon name="access-time" size={24} />
					</div>
				) : (
					<img src={url} onError={e => this.handleStatus(true)} onLoad={e => this.handleStatus(false)} />
				)}
			</div>
		)
	}
}