stub for fullscreen player. adjusting sizes. refactor component

1 files changed, 8 insertions, 11 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 0340171..1ddb5c7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -1,20 +1,16 @@
 import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { floatInRange } from 'app/utils'
 
 import actions from 'app/actions'
 
 import PlayerTranscript from './player.transcript'
+import PlayerFullscreen from './player.fullscreen'
 
 class PlayerContainer extends Component {
-  state = {
-    currentSection: null,
-  }
-
   componentDidMount() {
     // console.log(this.props.sections)
-    this.setState({ currentSection: this.props.sections[0] })
+    actions.viewer.setCurrentSection(this.props.sections[0])
   }
 
   componentDidUpdate(prevProps) {
@@ -23,8 +19,7 @@ class PlayerContainer extends Component {
   }
 
   setCurrentSection() {
-    const { currentSection } = this.state
-    const { audio, sections } = this.props
+    const { audio, sections, currentSection } = this.props
     const { play_ts } = audio
     if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
       return
@@ -33,26 +28,27 @@ class PlayerContainer extends Component {
     const insideSection = sections.some(section => {
       if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
         if (currentSection !== section) {
-          this.setState({ currentSection: section })
+          actions.viewer.setCurrentSection(section)
         }
         return true
       }
       return false
     })
     if (!insideSection) {
-      this.setState({ currentSection: sections[0] })
+      actions.viewer.setCurrentSection(sections[0])
     }
   }
 
   
   render() {
     // const { } = this.props
-    const { currentSection } = this.state
+    const { currentSection, fullscreenTimeline } = this.props
     if (!currentSection) { return <div /> }
     // console.log(currentSection)
     return (
       <div className='viewer-container'>
         <PlayerTranscript section={currentSection} />
+        <PlayerFullscreen timeline={fullscreenTimeline} />
       </div>
     )
   }
@@ -62,6 +58,7 @@ const mapStateToProps = state => ({
   audio: state.audio,
   sections: state.viewer.sections,
   fullscreenTimeline: state.viewer.fullscreenTimeline,
+  currentSection: state.viewer.currentSection,
 })
 
 export default connect(mapStateToProps)(PlayerContainer)