block2.const

styles = StyleSheet.create({
	container: {
		position: 'relative',
		overflow: 'hidden',
		minHeight: 200
	},
	topVideoContainer: {
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%'
	}
});

export default class VidCompare extends Component {
	
	static propTypes = {
		video1webm: PropTypes.string,
		video2webm: PropTypes.string,
		video1mp4: PropTypes.string,
		video2mp4: PropTypes.string
	};

	static defaultProps = {
		video1webm: 'video-1.webm',
		video2webm: 'video-2.webm',
		video1mp4: 'video-1.mp4',
		video2mp4: 'video-2.mp4'
	};
	
	// Notice we have added some state to keep track of everything,
	// the `started` state will control the animation 
	state = {
		pageX: 0,
		started: false
	};
	
	_handleMouseMove(e) {

		let left = this.container.getBoundingClientRect().left;
		
		this.setState({
			pageX: e.touches ? e.touches[0].pageX - left : e.pageX - left
		});
	}
	
	constructor(props) {
		super(props);
		this.handleMouseMove = this._handleMouseMove.bind(this);
	}
	
	render() {

		let { video1webm, video2webm, video1mp4, video2mp4 } = this.props;
		
		
		// Default states for when there is no mouse hovering
		let transform = { transform: 'translateX(100%)' };
		
		// The inverse of the transform
		let transformNegative = { transform: 'translateX(-100%)' };

		// If mouse is hovering, plug the pageX state as the translate value
		if (this.state.started) {
			transform = { transform: `translateX(${pageX}px)` };
			transformNegative = { transform: `translateX(${pageX * -1}px)` }; // inverse
		}

		<div 
			id="vid-compare-container"
			className={css(styles.container)}
			ref={ ref => { this.container = ref } >
			
			<video width="100%" height="100%" autoPlay loop>
				<source src={video1webm} type="video/webm"/>
				<source src={video1mp4} type="video/mp4"/>
			</video>
			
			<div style={transform} className={css(styles.topVideoContainer)}>
				<video style={transformNegative} width="100%" height="100%" autoPlay loop>
					<source src={video2webm} type="video/webm"/>
					<source src={video2mp4} type="video/mp4"/>
				</video>
			</div>

		</div>
	}
}