components/VideoTutorial/VideoTutorial.jsx

/**
 * Попап с видеоинструкцией
 * @module VideoTutorial
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires actions/StateConfigAction.js
 * @requires components/Common/Link.jsx
 * @requires img/video-camera.png
 * @requires img/title-cancel.png
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as StateConfigAction from '../../actions/StateConfigAction.js';
import Link from '../Common/Link.jsx';
import Camera from '../../img/video-camera.png';
import Cancel from '../../img/title-cancel.png';

/**
 * Попап с видеоинструкцией
 * @extends Component
 */
class VideoTutorial extends Component {

	/**
	 * Закрыть попап
	 * @fires click
	 * @param {Object} e
	 */
	close(e) {
		this.props.StateConfigAction.showElement(this.props.config, 'video_tutorial');
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		return <div className="modal fade show" 
					id="popup6" 
					tabIndex="-1"
					role="dialog">
						<div className="modal-dialog" role="document">
							<div className="modal-content">
								<div className="title">
									<img src={Camera} alt="camera" />
									<span>{this.props.lang.tutorial_title}</span>
									<Link 
										data-dismiss="modal" 
										className="dismiss"
										onClick={this.close.bind(this)}>
											<img src={Cancel} alt="cancel" />
									</Link>
								</div>
								
								<div className="video-block">
									<iframe 
										width="900" 
										height="506" 
										title="video"
										src="https://www.youtube.com/embed/GEQhDeNyM8s" 
										frameborder="0" 
										allow="autoplay; encrypted-media" 
										allowfullscreen></iframe>
								</div>
								
							</div>
						</div>
			</div>
	}
}

/**
 * Init redux states
 * @param {Object} state
 * @return {Object}
 */
function mapStateToProps(state) {
	return {
		lang: state.lang,
		config: state.config
	}
}

/**
 * Init redux actions
 * @param {Function} dispatch
 * @return {Object}
 */
function mapDispatchToProps(dispatch) {
	return {
		StateConfigAction: bindActionCreators(StateConfigAction, dispatch),
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(VideoTutorial);