3 files changed, 30 insertions, 6 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)