logo color on scroll. percolate whether we are in fullscreen mode

6 files changed, 45 insertions, 8 deletions

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 8602284..77de555 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -104,13 +104,11 @@ class PlayerContainer extends Component {
   }
   
   render() {
-    // const { } = this.props
-    const { currentSection } = this.props
-    if (!currentSection) { return <div /> }
+    if (!this.props.currentSection) { return <div /> }
     // console.log(currentSection)
     return (
       <div className='viewer-container'>
-        <PlayerTranscript section={currentSection} />
+        <PlayerTranscript />
         <PlayerFullscreen />
       </div>
     )
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 a60eee9..a4ea7d3 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -115,6 +115,10 @@ class PlayerFullscreen extends Component {
     }
     // elements.reverse()
     this.setState({ elements, persist })
+    // if fullscreen mode started or ended...
+    if (!!elements.length !== this.props.isFullscreen) {
+      actions.viewer.updateFullscreenStatus(!!elements.length, persist)
+    }
   }
 
   render() {
@@ -191,6 +195,7 @@ const FirstChild = (props) => {
 
 const mapStateToProps = state => ({
   currentSection: state.viewer.currentSection,
+  isFullscreen: state.viewer.isFullscreen,
   audio: state.audio,
   media: state.media.index,
   timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [],
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index 7a9d4aa..1743350 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -25,6 +25,26 @@ class PlayerTranscript extends Component {
         this.containerRef.current.scrollTo(0, 0)
       }, 20)
     }
+    if (
+      this.props.currentSection.index === 0 &&
+      this.props.isFullscreen &&
+      this.props.isFullscreen !== prevProps.isFullscreen
+    ) {
+      console.log('fullscreen started for the first time')
+      this.scrollToTopOfSection()
+    }
+  }
+
+  scrollToTopOfSection() {
+    const { current } = this.containerRef
+    console.log('scrollToTopOfSection', current)
+    if (!current) return
+    const heading = current.querySelector('.section_heading')
+    let offset = heading ? heading.offsetTop : 0
+    console.log(heading, offset)
+    if (offset) {
+      current.scrollTo(0, offset)
+    }
   }
 
   handleAnnotationClick(e, paragraph, annotation) {
@@ -50,7 +70,7 @@ class PlayerTranscript extends Component {
     if (isHandheld) {
       const isScrolledPastIntro = this.containerRef.current.scrollTop > 100
       if (xor(this.props.viewer.navGradient, isScrolledPastIntro)) {
-        console.log('toggle nav gradient', isScrolledPastIntro)
+        // console.log('toggle nav gradient', isScrolledPastIntro)
         actions.viewer.toggleNavGradient(isScrolledPastIntro)
       }
     }
@@ -64,7 +84,7 @@ class PlayerTranscript extends Component {
   }
 
   render() {
-    const { paragraphs, color, inlineParagraphCount } = this.props.section
+    const { paragraphs, color, inlineParagraphCount } = this.props.currentSection
     const className = "player-transcript " + color + " " + (
       inlineParagraphCount > 2 ? 'scrollable' : 'not-scrollable'
     )
@@ -91,6 +111,7 @@ class PlayerTranscript extends Component {
 
 const mapStateToProps = state => ({
   viewer: state.viewer,
+  currentSection: state.viewer.currentSection,
 })
 
 export default connect(mapStateToProps)(PlayerTranscript)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 9131763..c1136e7 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -307,6 +307,12 @@ export const toggleNavGradient = value => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key: 'navGradient', value: value })
 }
 
+export const updateFullscreenStatus = (value, persist) => dispatch => {
+  console.log('fullscreen', value, persist)
+  dispatch({ type: types.viewer.toggle_component, key: 'isFullscreen', value: value })
+  dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenPersist', value: persist })
+}
+
 export const toggleComponent = key => dispatch => {
   hideNavElementsNotMatchedBy(key)(dispatch)
   const state = store.getState().viewer
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
index b7676b6..9d5955c 100644
--- a/animism-align/frontend/app/views/viewer/viewer.mobile.css
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -60,9 +60,14 @@
 
   .eflux-header {
   }
+  .eflux-header.white .eflux-logo svg path {
+    fill: #fff;
+  }
+  .eflux-header.white.gradient .eflux-logo svg path {
+    fill: #000;
+  }
   .site-intro {
-    height: calc(100vh - 4.5rem);
-    margin-top: 4.5rem;
+    height: calc(100vh);
     background-size: auto 105%;
   }
   .eflux-nav .transcript-icon {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 6ec615a..1011d4e 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -24,6 +24,8 @@ const initialState = {
   autoAdvance: false,
   atEndOfSection: false,
   onlyEnableFirstSection: isHandheld,
+  isFullscreen: false,
+  isFullscreenPersist: false,
 
   /* footnotes */
   footnoteList: [],