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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import actions from 'app/actions'
import { floatInRange, floatLT } from 'app/utils'
import { fullscreenComponents } from './components.fullscreen'
class PlayerFullscreen extends Component {
state = {
elements: [],
}
componentDidMount() {
this.setCurrentElements()
}
componentDidUpdate(prevProps) {
if (this.props.audio.play_ts === prevProps.audio.play_ts) return
this.setCurrentElements()
}
setCurrentElements() {
const { audio, timeline } = this.props
const { play_ts } = audio
const elements = timeline.filter(element => (
floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
))
this.setState({ elements })
}
render() {
const { audio, media } = this.props
const { play_ts } = audio
const { elements } = this.state
// console.log(elements, play_ts)
return (
<div className="viewer-fullscreen">
<TransitionGroup>
{elements.map(element => {
if (!(element.type in fullscreenComponents)) {
return null
}
const isEntering = floatInRange(element.start_ts, play_ts, element.fade_in_end_ts)
const FullscreenComponent = fullscreenComponents[element.type]
const transitionDuration = (isEntering ? (1000 * element.fadeInDuration) : (1000 * element.fadeOutDuration)) + 'ms'
return (
<CSSTransition
key={element.index}
classNames="fade"
timeout={{
enter: element.fadeInDuration * 1000,
exit: element.fadeOutDuration * 1000,
}}
component={FirstChild}
>
<FullscreenComponent
element={element}
media={media}
transitionDuration={transitionDuration}
/>
</CSSTransition>
)
})}
</TransitionGroup>
</div>
)
}
}
const FirstChild = (props) => {
const childrenArray = React.Children.toArray(props.children);
return childrenArray[0] || null;
}
const mapStateToProps = state => ({
audio: state.audio,
media: state.media.index,
timeline: state.viewer.fullscreenTimeline,
})
export default connect(mapStateToProps)(PlayerFullscreen)
|
