{this.renderStepNumber()}
\n \n {this.props.children}\n
\n \n
\n \n
\n {children}\n
\n );\n }\n return Parallax hover is not yet ready.
;\n }\n\n static Layer = class extends React.Component {\n constructor(props) {\n super(props);\n this.config = this.props.config;\n this.state = {\n toStyle: {\n x: 0,\n y: 0\n }\n };\n }\n\n static propTypes = {\n config: PropTypes.shape({}),\n disabled: PropTypes.bool\n };\n\n static defaultProps = {\n config: {},\n disabled: true\n };\n\n componentDidMount() {\n if (!this.props.disabled) {\n window.addEventListener('mousemove', this.handleMouseMove, false);\n }\n }\n\n componentDidUpdate(prevProps) {\n if (!prevProps.disabled && this.props.disabled) {\n window.removeEventListener('mousemove', this.handleMouseMove, false);\n }\n if (prevProps.disabled && !this.props.disabled) {\n window.addEventListener('mousemove', this.handleMouseMove, false);\n }\n }\n\n componentWillUnmount() {\n if (!this.props.disabled) {\n window.removeEventListener('mousemove', this.handleMouseMove, false);\n }\n }\n\n updatePosition = e => {\n const xFactor = this.config.xFactor;\n const yFactor = this.config.yFactor;\n const getYFromCenter = yFactor * (e.view.innerHeight / 2 - e.clientY);\n const getXFromCenter = xFactor * (e.view.innerWidth / 2 - e.clientX);\n this.setState({\n toStyle: {\n x: spring(getXFromCenter, this.config.springSettings),\n y: spring(getYFromCenter, this.config.springSettings)\n }\n });\n };\n\n handleMouseMove = e => {\n window.requestAnimationFrame(() => this.updatePosition(e));\n };\n\n render() {\n const { children } = this.props;\n\n return (\n \n\n\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n <FormattedMessage id={`${chapter}_title`} />\n \n \n \n
\n \n \n {unpublished\n ? this.renderComingSoon(chapter)\n : this.renderArrow()}\n {unpublished ? null : \n
\n \n {scrollBlocked ? (\n \n {children(done, this.handleAnimationEnd)}\n \n
\n );\n }\n}\n\nexport default compose(\n withSound,\n withResponsive\n)(Intro);\n","/* global soundManager:false */\n/* eslint-disable no-nested-ternary */\n\nimport React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport Sound from 'react-sound';\nimport CloudinarySound from 'components/Sound';\nimport withSound from 'components/Sound/withSound';\nimport Responsive from 'containers/Responsive';\nimport { ThemeContext } from 'components/Chapter';\nimport { sound } from 'styles/variables';\n\nclass Music extends PureComponent {\n static contextType = ThemeContext;\n\n static propTypes = {\n sound: PropTypes.shape({\n playStatus: PropTypes.string\n })\n };\n\n static defaultProps = {\n sound: {\n playStatus: 'STOPPED'\n }\n };\n\n state = {\n volume: sound.volume.mediumSoft\n };\n\n componentDidMount() {\n soundManager.setup({ debugMode: false, ignoreMobileRestrictions: true });\n }\n\n render() {\n const { chapter } = this.context;\n const {\n sound: { playStatus },\n ...restProps\n } = this.props;\n const { volume } = this.state;\n return (\n \n
\n
\n \n \n \n \n
\n \n \n
\n
\n \n);\n\nMobileVideo.propTypes = {\n videoID: PropTypes.string,\n details: PropTypes.string,\n handleShowModal: PropTypes.func\n};\n\nMobileVideo.defaultProps = {\n videoID: '',\n details: '',\n handleShowModal: () => {}\n};\n\nexport default MobileVideo;\n","import React, { Fragment, Component } from 'react';\nimport { compose } from 'redux';\nimport axios from 'axios';\nimport { injectIntl } from 'react-intl';\nimport { sanitize } from 'dompurify';\nimport withResponsive from 'containers/Responsive/withResponsive';\nimport Player from 'components/Player';\nimport PropTypes from 'prop-types';\nimport Modal from 'components/Modal';\nimport getVideoUrlById from 'utils/video';\nimport Desktop from './Desktop';\nimport Mobile from './Mobile';\n\nclass Video extends Component {\n static propTypes = {\n videoID: PropTypes.string,\n isMobile: PropTypes.bool.isRequired,\n fullwidth: PropTypes.bool\n };\n\n static defaultProps = {\n videoID: '',\n fullwidth: false\n };\n\n state = {\n showModal: false,\n details: ''\n };\n\n async componentDidMount() {\n try {\n const {\n videoID,\n intl: { locale }\n } = this.props;\n const request = await axios.get(\n `${process.env.API_URL}/api/content/captions/${locale}/${videoID}Thumb`\n );\n this.setState({\n details: sanitize(request.data)\n });\n } catch (e) {\n console.error(e); // eslint-disable-line\n }\n }\n\n handleShowModal = () => {\n this.setState({\n showModal: true\n });\n };\n\n handleCloseModal = () => {\n this.setState({\n showModal: false\n });\n };\n\n renderModal = () => {\n const { videoID } = this.props;\n return (\n
\n \n
\n