added CommentPopup and Comment

- comments currently rendered from fake state data 
- next step is to update redux store to accept comments

src/components/waveform/Comment.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Card} from 'react-bootstrap'
+
+const Comment = props => {
+  console.log('comment props:', props)
+  return (
+    <Card style={{position: 'relative', width: '100px', height: '100px', left: props.commentLoc + '%' }}>
+      <Card.Body>
+        {props.parseTime(props.commentSecs)}
+      </Card.Body>
+    </Card>
+
+  )
+}
+export default Comment

src/components/waveform/CommentPopup.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import {Card, Form, Row, Col, Button} from 'react-bootstrap'
+
+
+const Popup = props => {
+  console.log('POPUP PROPS!', props)
+  return (
+    <div className='popup text-center'>
+      <div className='popup_inner'>
+        <Card>
+          <Card.Body>
+            <Card.Title>Add Comment</Card.Title>
+            <Form onSubmit={props.submitComment}>
+              <Form.Group as={Row} controlId="time">
+                <Form.Label column sm="4">
+                  Time
+                </Form.Label>
+                <Col sm="6">
+                  <Form.Control plaintext readOnly defaultValue={props.commentSecs} />
+                </Col>
+              </Form.Group>
+              <Form.Group controlId="comment">
+                <Form.Control as="textarea" rows="3" value={props.commentText} onChange={props.updateCommentText}/>
+              </Form.Group>
+
+              <Button variant="dark" type='submit'>Close</Button>
+            </Form>
+          </Card.Body>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+
+export default Popup

src/components/waveform/index.js

@@ -1,69 +1,126 @@
-// import React from 'react'
-// import Waveform from 'react-audio-waveform'
-//
-//
-// const Audio = props => {
-//   return (
-//     <Waveform
-//       barWidth={4}
-//       peaks={props.peaks}
-//       height={200}
-//       pos={props.pos}
-//       duration={210}
-//       onClick={props.handleClick}
-//       color="#676767"
-//       progressGradientColors={[[0, '#888'], [1, '#aaa']]}
-//     />
-//   )}
-//
-// export default Audio
-
 import React, { Component } from 'react'
 import Waveform from 'react-audio-waveform'
+import {connect} from 'react-redux'
 const config = require('./audio/loneDigger.json')
 import ReactAudioPlayer from 'react-audio-player'
+import CommentPopup from './CommentPopup'
+import Comment from './Comment'
+
+const parseTime = secs => {
+  var hours   = Math.floor(secs / 3600)
+  var minutes = Math.floor((secs - (hours * 3600)) / 60)
+  var seconds = secs - (hours * 3600) - (minutes * 60)
+
+  if (hours   < 10) {hours   = '0'+hours}
+  if (minutes < 10) {minutes = '0'+minutes}
+  if (seconds < 10) {seconds = '0'+seconds}
+  return minutes+':'+seconds
+}
+
 
 class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      pos: 0
+      playerSize: {},
+      duration: 3*60+49,
+      songSecs: 0,
+      commentSecs: 0,
+      commentLoc: 0,
+      commentText: '',
+      showPopup: false,
+      showComment: false,
+      comments: [{id: 1, commentSecs: 132}]
     }
-    this.handleClick = this.handleClick.bind(this)
+    this.getCommentSecs = this.getCommentSecs.bind(this)
+    this.getPlayerSize = this.getPlayerSize.bind(this)
+    this.submitComment = this.submitComment.bind(this)
+    this.togglePopup = this.togglePopup.bind(this)
+    this.openCommentPopup = this.openCommentPopup.bind(this)
+    this.updateCommentText = this.updateCommentText.bind(this)
+    //this.showComment = this.showComment.bind(this)
   }
 
-  handleClick (secs) {
-    this.setState({
-      pos: secs
-    })
+  getCommentSecs (commentSecs) {
+    this.setState({commentSecs})
   }
 
+  getPlayerSize(e) {
+    if(e){
+      this.setState({playerSize: e.getBoundingClientRect()})
+      return e.getBoundingClientRect()
+    }
+  }
+  submitComment(e) {
+    e.preventDefault()
+    const commentLoc = (this.state.playerSize.width * this.state.commentSecs) / ( this.state.duration * 100)
+    this.setState({commentLoc})
+    this.togglePopup()
+    this.showComment()
+  }
+
+  openCommentPopup(commentSecs) {
+    this.togglePopup()
+    this.setState({commentSecs})
+    this.rap.audioEl.pause()
+  }
+  togglePopup() {
+    this.setState({showPopup: !this.state.showPopup})
+  }
+
+  updateCommentText(e) {
+    e.preventDefault()
+    this.setState({commentText : e.target.value})
+  }
   render() {
+
     return (
       <div className="container App">
         <header className="App-header">
           <h1 className="App-title">Player</h1>
         </header>
+        <div ref = {this.getPlayerSize} style={{ border: '1px solid red' }}>
           <Waveform
+            ref = {el => {this.waveform = el}}
             peaks={config.data}
             height={200}
-          pos={this.state.pos}
-          duration={3*60+49}
-          onClick={this.handleClick}
+            pos={this.state.songSecs}
+            duration={this.state.duration}
+            onClick={this.openCommentPopup}
             color="#676767"
             progressGradientColors={[[0, '#33cccc'], [1, '#aaa']]}
           />
+          {this.state.comments.map(comment => <Comment
+            parseTime={parseTime}
+            key = {comment.id}
+            commentSecs = {comment.commentSecs}
+            commentLoc = {(comment.commentSecs / this.state.duration) * 100}
+          />) }
+        </div>
+
         <ReactAudioPlayer
-          src="/01. Lone Digger.mp3"
-          autoPlay
+          src="/audio/01. Lone Digger.mp3"
+          //autoPlay
           controls
           listenInterval={100}
           ref={(element) => { this.rap = element }}
-          onListen={()=>this.setState({pos:this.rap.audioEl.currentTime})}
+          onListen={()=>this.setState({songSecs:this.rap.audioEl.currentTime})}
         />
+
+        {this.state.showPopup ?
+          <CommentPopup
+            commentSecs = {parseTime(this.state.commentSecs)}
+            commentText={this.state.commentText}
+            submitComment={this.submitComment}
+            updateCommentText={this.updateCommentText}
+            togglePopup={this.togglePopup}
+          />
+          : null
+        }
       </div>
     )
   }
 }
 
-export default App
+const mapState = state => state
+export default connect(mapState)(App)