1 files changed, 63 insertions, 2 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 89052ed..47c6cd2 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -1,22 +1,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 { } = this.props
+    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)