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 {

	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() {
		return classnames({
			option: true,
			unreachable: this.props.converted.error
		});
	}

	getErrorMessage() {
		return this.props.converted.error || null;
	}

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

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