blob: a8b40b82a4d4a4f755adcf7f036525a8ad950b9c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { EfluxClose } from '../nav/eflux.icons'
import { Arrow } from '../nav/viewer.icons'
class HandheldModal extends Component {
state = {
visible: false,
}
componentDidUpdate(prevProps) {
if (prevProps.showAtEndOfSection !== this.props.showAtEndOfSection && this.props.showAtEndOfSection) {
this.setState({ visible: true })
}
}
render() {
const { showAtEndOfSection } = this.props
const { visible } = this.state
console.log(showAtEndOfSection, visible)
return (
<div className={(showAtEndOfSection && visible) ? "modal handheld-modal visible" : "modal handheld-modal"}>
<div>
<p>
{"The full episode is not currently supported on mobile devices."}
</p>
<p>
{"To continue viewing, please switch to your computer."}
</p>
<div onClick={() => this.setState({ visible: false })} className='ok'>OK</div>
</div>
</div>
)
}
}
const mapStateToProps = state => ({
showAtEndOfSection: state.viewer.onlyEnableFirstSection && state.viewer.atEndOfSection,
})
export default connect(mapStateToProps)(HandheldModal)
|
