cleanup

dist/css/style.css

@@ -21,6 +21,7 @@ html, body, .app {
   background-color: rgba(0,0,0, 0.5);
 }
 .popup_inner {
+  z-index: 6
   position: absolute;
   left: 25%;
   right: 25%;
@@ -33,9 +34,8 @@ html, body, .app {
 .comment_icon {
   width: 20px;
   height: 20px;
-  background-image: url("/img/anarchybang.jpg");
+  background-image: url("/img/abang.png");
   background-size: cover;
-  background-color: #000
 }
 
 .footer {

server.js

@@ -14,7 +14,7 @@ app.use(require('body-parser').text())
 
 app.use(express.static(path.join(__dirname, 'dist')))
 
-//http://localhost:31337
+//http://localhost:1337
 app.use(proxy('/api', { target: 'http://localhost:1337' }))
 
 app.get('*', (req, res) => {

src/components/waveform/Comment.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Tooltip, Image, Button, Card, Overlay} from 'react-bootstrap'
+import {Tooltip, Overlay} from 'react-bootstrap'
 
 class Example extends React.Component {
   constructor() {
@@ -13,22 +13,20 @@ class Example extends React.Component {
   toggleShow() {
     this.setState({show: !this.state.show})
   }
-
   render() {
     const { show, target } = this.state
     return (
-      <>
+      <div
-        <div
+        className = "comment_icon"
-          className = "comment_icon"
+        ref={this.attachRef}
-          ref={this.attachRef}
+        style={{position: 'absolute', top: 180, left: this.props.commentLoc + '%'}}
-          style={{position: 'absolute', top: 180, left: this.props.commentLoc + '%'}}
+        onClick={this.toggleShow} >
-          onClick={this.toggleShow} />
         <Overlay target={target} show={show} placement="bottom" >
           <Tooltip>
             {this.props.text}
           </Tooltip>
         </Overlay>
-      </>
+      </div>
     )
   }
 }

src/components/waveform/CommentPopup.js

@@ -3,7 +3,6 @@ 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'>
@@ -23,7 +22,7 @@ const Popup = props => {
                 <Form.Control as="textarea" rows="3" value={props.commentText} onChange={props.updateCommentText}/>
               </Form.Group>
 
-              <Button variant="dark" type='submit'>Close</Button>
+              <Button variant="dark" type='submit'>Submit Comment</Button>
             </Form>
           </Card.Body>
         </Card>

src/components/waveform/CommentTable.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import {Table} from 'react-bootstrap'
+
+const CommentTable = props => {
+  const {comments } = props
+
+  return (
+    <Table striped bordered hover variant="dark">
+      <thead>
+        <tr>
+          <th>Time</th>
+          <th>Nick</th>
+          <th>Text</th>
+        </tr>
+      </thead>
+      <tbody>
+        {comments.map(comment=>{
+          <tr>
+            <td>{comment.secs}</td>
+            <td>anon</td>
+            <td>{comment.text}</td>
+          </tr>
+        })}
+      </tbody>
+    </Table>
+  )
+}
+
+export default CommentTable

src/components/waveform/index.js

@@ -1,12 +1,12 @@
 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'
 import {fetchAllComments, addComment} from '../../store'
-import {Container, Row, Col} from 'react-bootstrap'
+import {Button, Container, Row, Col} from 'react-bootstrap'
+const config = require('./audio/loneDigger.json')
 
 const parseTime = secs => {
   var hours   = Math.floor(secs / 3600)
@@ -19,7 +19,6 @@ const parseTime = secs => {
   return minutes+':'+seconds
 }
 
-
 class Player extends Component {
   constructor(props) {
     super(props)
@@ -35,7 +34,7 @@ class Player extends Component {
       showComments: true,
       comments: [{id: 1, commentSecs: 132}]
     }
-    //this.getCommentSecs = this.getCommentSecs.bind(this)
+
     this.getPlayerSize = this.getPlayerSize.bind(this)
     this.submitComment = this.submitComment.bind(this)
     this.openCommentPopup = this.openCommentPopup.bind(this)
@@ -52,10 +51,6 @@ class Player extends Component {
     this.fetchData()
   }
 
-  // getCommentSecs (commentSecs) {
-  //   this.setState({commentSecs})
-  // }
-
   getPlayerSize(e) {
     if(e){
       this.setState({playerSize: e.getBoundingClientRect()})
@@ -70,8 +65,9 @@ class Player extends Component {
     this.setState({showPopup: false, showComments: true})
   }
 
-  openCommentPopup(commentSecs) {
+  openCommentPopup() {
-    this.setState({commentSecs, showPopup: true, showComments: false})
+    console.log(this.state)
+    this.setState({ showPopup: true, showComments: false})
     this.rap.audioEl.pause()
   }
 
@@ -110,8 +106,8 @@ class Player extends Component {
                     commentLoc = {(comment.commentSecs / this.state.duration) * 100}
                     text={comment.text}
                   />
-                ) : null}
+                )
-
+                : null}
             </Col>
           </Row>
         </div>
@@ -126,11 +122,13 @@ class Player extends Component {
               onListen={()=>this.setState({songSecs:this.rap.audioEl.currentTime})}
             />
           </Col>
+          <Col>
+            <Button variant="dark" onClick={() => this.openCommentPopup(this.state.pos)}>Add Comment</Button>
+          </Col>
         </Row>
-
         {this.state.showPopup ?
           <CommentPopup
-            commentSecs = {parseTime(this.state.commentSecs)}
+            commentSecs = {parseTime(this.state.songSecs)}
             commentText={this.state.commentText}
             submitComment={this.submitComment}
             updateCommentText={this.updateCommentText}