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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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, currentSection, media } = this.props
const { play_ts } = audio
let elements = timeline.filter(element => (
floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
))
if (elements.length && !audio.playing && elements[0].type === 'curtain') {
elements.shift()
}
if (elements.length > 1) {
elements = elements.map((e, i) => [(e.type === 'curtain' ? i + 100 : i), e])
.sort((a,b) => a[0] - b[0])
.map(p => p[1])
}
// console.log(elements)
if (elements.length) {
const lastElement = elements[elements.length - 1]
if (lastElement.color && lastElement.color.textColor === '#ffffff') {
actions.viewer.setNavStyle('black')
} else {
actions.viewer.setNavStyle('white')
}
if (lastElement.type === 'video') {
const item = media.lookup[lastElement.settings.media_id]
actions.viewer.setMediaTitle(item.title)
} else {
actions.viewer.setMediaTitle(null)
}
} else {
actions.viewer.setNavStyle(currentSection.color)
actions.viewer.setMediaTitle(null)
}
// elements.reverse()
this.setState({ elements })
}
render() {
const { audio, media } = this.props
const { play_ts } = audio
const { elements } = this.state
const className = elements.length ? "viewer-fullscreen active" : "viewer-fullscreen"
// console.log(elements, play_ts)
return (
<div className={className}>
<TransitionGroup>
{elements.map(element => {
if (!(element.type in fullscreenComponents)) {
return null
}
let {
type, index,
fadeInDuration, fadeOutDuration,
start_ts, end_ts,
fade_in_end_ts, fade_out_start_ts,
} = element
const isEntering = floatInRange(start_ts, play_ts, fade_in_end_ts)
const isLeaving = floatInRange(fade_out_start_ts, play_ts, end_ts)
const FullscreenComponent = fullscreenComponents[type]
fadeInDuration *= 1000
fadeOutDuration *= 1000
if (!isEntering && !isLeaving) {
fadeInDuration = 0
fadeOutDuration = 0
}
const transitionDuration = (isEntering ? fadeInDuration : fadeOutDuration) + 'ms'
// console.log(play_ts, isEntering, isLeaving, fadeInDuration, fadeOutDuration)
return (
<CSSTransition
key={index}
classNames="fade"
timeout={{
enter: fadeInDuration,
exit: fadeOutDuration,
}}
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 => ({
currentSection: state.viewer.currentSection,
audio: state.audio,
media: state.media.index,
timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [],
})
export default connect(mapStateToProps)(PlayerFullscreen)
|
