some fullscreen elements fading in...

10 files changed, 158 insertions, 11 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
new file mode 100644
index 0000000..c0e4b0e
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const Image = ({ element, media, transitionDuration }) => {
+  const item = media.lookup[element.settings.media_id]
+  const style = {
+    transitionDuration,
+    backgroundImage: 'url(' + item.settings.display.url + ')',
+  }
+  return (
+    <div
+      className='fullscreen-element image'
+      style={style}
+    >
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
new file mode 100644
index 0000000..c86236d
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const Curtain = ({ element, transitionDuration }) => {
+  // console.log(element, isEntering)
+  const { color } = element
+  const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
+    transitionDuration,
+  }
+  return (
+    <div
+      className='fullscreen-element curtain'
+      style={style}
+    >
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
new file mode 100644
index 0000000..3befbde
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+// import {
+//   MediaVideo
+// } from './fullscreen.video'
+
+import {
+  Image
+} from './fullscreen.image'
+
+import {
+  Curtain
+} from './fullscreen.utility'
+
+export const fullscreenComponents = {
+  curtain: React.memo(Curtain),
+  // video: React.memo(MediaVideo),
+  image: React.memo(Image),
+}
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index ee65641..89d1d42 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 import {
   Paragraph, ParagraphHeading
-} from './elementTypes.text'
+} from './inline.text'
 
 import {
   MediaVideo
-} from './elementTypes.video'
+} from './inline.video'
 
 import {
   MediaImage
-} from './elementTypes.image'
+} from './inline.image'
 
 export const transcriptElementLookup = {
   paragraph: React.memo(Paragraph),
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index f005fc0..f005fc0 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index 8825479..8825479 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index fe821eb..fe821eb 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 1ddb5c7..9655955 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { floatInRange } from 'app/utils'
 
 import actions from 'app/actions'
+import { floatInRange } from 'app/utils'
 
 import PlayerTranscript from './player.transcript'
 import PlayerFullscreen from './player.fullscreen'
@@ -38,17 +38,16 @@ class PlayerContainer extends Component {
       actions.viewer.setCurrentSection(sections[0])
     }
   }
-
   
   render() {
     // const { } = this.props
-    const { currentSection, fullscreenTimeline } = this.props
+    const { currentSection } = this.props
     if (!currentSection) { return <div /> }
     // console.log(currentSection)
     return (
       <div className='viewer-container'>
         <PlayerTranscript section={currentSection} />
-        <PlayerFullscreen timeline={fullscreenTimeline} />
+        <PlayerFullscreen />
       </div>
     )
   }
@@ -57,7 +56,6 @@ class PlayerContainer extends Component {
 const mapStateToProps = state => ({
   audio: state.audio,
   sections: state.viewer.sections,
-  fullscreenTimeline: state.viewer.fullscreenTimeline,
   currentSection: state.viewer.currentSection,
 })
 
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 8041c84..fb4d8af 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -11,4 +11,39 @@
 .viewer-fullscreen.active {
   pointer-events: auto;
   user-select: auto;
-}
\ No newline at end of file
+}
+
+/* transitions */
+
+.viewer-fullscreen .fade-enter {
+  opacity: 0;
+}
+.viewer-fullscreen .fade-enter.fade-enter-active {
+  opacity: 1;
+  transition-property: opacity;
+}
+.viewer-fullscreen .fade-exit {
+  opacity: 1;
+}
+.viewer-fullscreen .fade-exit-active {
+  opacity: 0;
+  transition-property: opacity;
+}
+
+/* elements */
+
+.viewer-fullscreen .fullscreen-element {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.viewer-fullscreen .curtain {
+}
+
+.viewer-fullscreen .image {
+  background-size: cover;
+  background-position: center center;
+}
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)