Commit deef8469 authored by Eugen Rochko's avatar Eugen Rochko

Add video in modal for "how it works" button

parent 20863195
......@@ -13,10 +13,12 @@
"react-intl": "^2.4.0",
"react-motion": "^0.4.7",
"react-redux": "^5.0.5",
"react-responsive-modal": "^2.0.1",
"react-responsive-select": "^3.1.4",
"react-router-dom": "^4.0.0",
"react-router-hash-link": "^1.1.0",
"react-snapshot": "^1.1.0",
"react-youtube": "^7.5.0",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
......
import React from 'react';
import React, { PureComponent } from 'react';
import { FormattedHTMLMessage as FormattedMessage } from 'react-intl';
import { HashLink as Link } from 'react-router-hash-link';
import AnchorLink from './AnchorLink';
import Modal from 'react-responsive-modal';
import YouTube from 'react-youtube';
import Features from './Features';
import Wizard from './WizardContainer';
......@@ -25,7 +27,64 @@ import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png';
const Home = () => (
const styles = {
modal: {
padding: 0,
lineHeight: 0,
},
closeIcon: {
zIndex: 200,
right: '-40px',
top: '-30px',
fill: 'white',
},
};
const playerOpts = {
width: 720,
height: 405,
playerVars: {
autoplay: 1,
},
};
export default class Home extends PureComponent {
state = {
open: false,
};
setModalRef = c => {
this.modal = c;
}
setPlayerRef = e => {
this.player = e.target;
this.player.playVideo();
}
handleHowItWorksClick = () => {
this.setState({ open: true });
if (this.player) {
this.player.playVideo();
}
}
onCloseModal = () => {
this.setState({ open: false });
this.player.pauseVideo();
}
render () {
const { open } = this.state;
return (
<div>
<div className='intro'>
<Navigation />
......@@ -35,7 +94,7 @@ const Home = () => (
<p><FormattedMessage id='home.tagline' defaultMessage='The world’s largest free, open-source, decentralized microblogging network' /></p>
<AnchorLink href='#getting-started' className='cta button'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></AnchorLink>
<AnchorLink href='#how-it-works' className='cta button alt'><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></AnchorLink>
<button className='cta button alt' onClick={this.handleHowItWorksClick}><span className='icon-circled'><span className='ion-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button>
</div>
<div className='hero'>
......@@ -96,7 +155,12 @@ const Home = () => (
<HowItWorks />
<Credits />
<Modal open={open} onClose={this.onCloseModal} little showCloseIcon styles={styles}>
<YouTube videoId='IPSbNdBmWKE' onReady={this.setPlayerRef} opts={playerOpts} />
</Modal>
</div>
);
);
}
export default Home;
}
......@@ -689,3 +689,12 @@ $phi: 1.6180339887498948482;
transform: translate(0, -0px);
}
}
.icon-circled {
display: inline-block;
margin-right: 10px;
}
iframe {
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment