\n this.timelineEl = el}\n >\n {children}\n
\n \n \n\n {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 <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