adding player transcript, for what its worth

2 files changed, 66 insertions, 14 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 3fa91b1..3c8c1e9 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -5,13 +5,16 @@ import { floatInRange } from 'app/utils'
 
 import actions from 'app/actions'
 
+import PlayerTranscript from './player.transcript'
+
 class PlayerContainer extends Component {
   state = {
-    currentSection: -1,
+    currentSection: null,
   }
 
   componentDidMount() {
-    this.setCurrentSection()
+    console.log(this.props.sections)
+    this.setState({ currentSection: this.props.sections[0] })
   }
 
   componentDidUpdate(prevProps) {
@@ -37,19 +40,19 @@ class PlayerContainer extends Component {
       return false
     })
     if (!insideSection) {
-      this.setState({
-        currentSection: sections[0],
-      })
+      this.setState({ currentSection: sections[0] })
     }
   }
 
   
   render() {
-    const { } = this.props
+    // const { } = this.props
+    const { currentSection } = this.state
+    if (!currentSection) { return <div /> }
+    console.log(currentSection)
     return (
       <div className='viewer-container'>
-        <div className="player">
-        </div>
+        <PlayerTranscript section={currentSection} />
       </div>
     )
   }
@@ -62,9 +65,3 @@ const mapStateToProps = state => ({
 })
 
 export default connect(mapStateToProps)(PlayerContainer)
-
-/*
-- section name, number
-- next link
-- player
-*/
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
new file mode 100644
index 0000000..8c992e7
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import ParagraphList from 'app/views/paragraph/components/paragraph.list'
+import { transcriptElementLookup } from '../transcript/components'
+
+class PlayerTranscript extends Component {
+  constructor(props){
+    super(props)
+    this.handleClose = this.handleClose.bind(this)
+    this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
+    this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
+  }
+
+  handleAnnotationClick(e, annotation) {
+    console.log(annotation)
+  }
+  
+  handleParagraphDoubleClick(e, paragraph) {
+    return
+  }
+  
+  handleClose() {
+  }
+
+  render() {
+    const { paragraphs } = this.props.section
+    return (
+      <div className="player-transcript">
+        <div className='content'>
+          <ParagraphList
+            paragraphs={paragraphs}
+            paragraphElementLookup={transcriptElementLookup}
+            onAnnotationClick={this.handleAnnotationClick}
+            onParagraphDoubleClick={this.handleParagraphDoubleClick}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  // viewer: state.viewer,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayerTranscript)