SoundWave/imports/ui/Options.jsx

import React, { Component, PropTypes } from 'react';
import Video from './Video';
import classnames from 'classnames';

export default class Options extends Component {
	render() {
		return (
			<div>
				{ _.map(this.props.handlers, (h) => (
					<button key={h.type} className={this.getClasses(h.type)}
							onClick={() => h.handler(this.props.video)}
							disabled={this.isDisabled(h.type)} title={this.getErrorMessage(h.type)}>
						<div className="option-progress" style={{ width: this.getProgress(h.type) + '%' }} />
						<i className="fa fa-download" /> {h.type}
					</button>
				)) }
			</div>
		);
	}

	getProgress(type) {
		return !this.props.converted ? 0 : this.props.converted[type === 'MP3' ? 'audio_progress' : 'video_progress'];
	}

	isDisabled(type) {
		return !this.props.converted || !this.props.converted[type === 'MP3' ? 'audio' : 'video'];
	}

	getClasses(type) {
		let option = true;
		let unreachable = null;
		if (this.props.converted)
			unreachable = (type === 'MP3' ? this.props.converted.error_audio : this.props.converted.error_video);
		return classnames({ option, unreachable });
	}

	getErrorMessage(type) {
		let typestr = (type === 'MP3' ? 'audio' : 'video');
		return this.props.converted && this.props.converted[`error_${typestr}`] || null;
	}
}

Options.propTypes = {
	handlers: PropTypes.arrayOf(PropTypes.shape({
		type: PropTypes.string,
		handler: PropTypes.func
	})),
	video: PropTypes.instanceOf(Video),
	converted: PropTypes.object
};