diff --git a/dist/css/style.css b/dist/css/style.css
index 121def1..b623a5d 100644
--- a/dist/css/style.css
+++ b/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 {
diff --git a/server.js b/server.js
index 92c9732..0231010 100644
--- a/server.js
+++ b/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) => {
diff --git a/src/components/waveform/Comment.js b/src/components/waveform/Comment.js
index 5a4246a..884a1b7 100644
--- a/src/components/waveform/Comment.js
+++ b/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 (
- <>
-
+
{this.props.text}
- >
+
)
}
}
diff --git a/src/components/waveform/CommentPopup.js b/src/components/waveform/CommentPopup.js
index 9cb6757..9bfe03d 100644
--- a/src/components/waveform/CommentPopup.js
+++ b/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 (
@@ -23,7 +22,7 @@ const Popup = props => {
-
+
diff --git a/src/components/waveform/CommentTable.js b/src/components/waveform/CommentTable.js
new file mode 100644
index 0000000..8d11c35
--- /dev/null
+++ b/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 (
+
+
+
+ Time |
+ Nick |
+ Text |
+
+
+
+ {comments.map(comment=>{
+
+ {comment.secs} |
+ anon |
+ {comment.text} |
+
+ })}
+
+
+ )
+}
+
+export default CommentTable
diff --git a/src/components/waveform/index.js b/src/components/waveform/index.js
index fdbabb5..91dec36 100644
--- a/src/components/waveform/index.js
+++ b/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) {
- this.setState({commentSecs, showPopup: true, showComments: false})
+ openCommentPopup() {
+ 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}
@@ -126,11 +122,13 @@ class Player extends Component {
onListen={()=>this.setState({songSecs:this.rap.audioEl.currentTime})}
/>
+
+
+
-
{this.state.showPopup ?