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 ( + + + + + + + + + + {comments.map(comment=>{ + + + + + + })} + +
TimeNickText
{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 ?