diff --git a/src/components/waveform/Comment.js b/src/components/waveform/Comment.js index 21d8cff..5a4246a 100644 --- a/src/components/waveform/Comment.js +++ b/src/components/waveform/Comment.js @@ -1,15 +1,35 @@ import React from 'react' -import {Card} from 'react-bootstrap' +import {Tooltip, Image, Button, Card, Overlay} from 'react-bootstrap' -const Comment = props => { - console.log('comment props:', props) - return ( - - - {props.parseTime(props.commentSecs)} - - +class Example extends React.Component { + constructor() { + super() + this.attachRef = target => this.setState({ target }) + this.state = { + show: false, + } + this.toggleShow=this.toggleShow.bind(this) + } + toggleShow() { + this.setState({show: !this.state.show}) + } - ) + render() { + const { show, target } = this.state + return ( + <> +
+ + + {this.props.text} + + + + ) + } } -export default Comment +export default Example diff --git a/src/components/waveform/index.js b/src/components/waveform/index.js index e8c5b61..fdbabb5 100644 --- a/src/components/waveform/index.js +++ b/src/components/waveform/index.js @@ -5,6 +5,8 @@ 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' const parseTime = secs => { var hours = Math.floor(secs / 3600) @@ -18,10 +20,11 @@ const parseTime = secs => { } -class App extends Component { +class Player extends Component { constructor(props) { super(props) this.state = { + loading: true, playerSize: {}, duration: 3*60+49, songSecs: 0, @@ -29,22 +32,30 @@ class App extends Component { commentLoc: 0, commentText: '', showPopup: false, - showComment: false, + showComments: true, comments: [{id: 1, commentSecs: 132}] } - this.getCommentSecs = this.getCommentSecs.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) + this.commentID = 3 } - getCommentSecs (commentSecs) { - this.setState({commentSecs}) + async fetchData() { + await this.props.fetchComments() + await this.setState({loading: false}) } + componentDidMount() { + this.fetchData() + } + + // getCommentSecs (commentSecs) { + // this.setState({commentSecs}) + // } + getPlayerSize(e) { if(e){ this.setState({playerSize: e.getBoundingClientRect()}) @@ -53,20 +64,16 @@ class App extends Component { } submitComment(e) { e.preventDefault() - const commentLoc = (this.state.playerSize.width * this.state.commentSecs) / ( this.state.duration * 100) - this.setState({commentLoc}) - this.togglePopup() - this.showComment() + console.log(this.state.commentText) + this.props.postComment({id: this.commentID, commentSecs: this.state.commentSecs, text: this.state.commentText}) + this.commentID ++ + this.setState({showPopup: false, showComments: true}) } openCommentPopup(commentSecs) { - this.togglePopup() - this.setState({commentSecs}) + this.setState({commentSecs, showPopup: true, showComments: false}) this.rap.audioEl.pause() } - togglePopup() { - this.setState({showPopup: !this.state.showPopup}) - } updateCommentText(e) { e.preventDefault() @@ -75,37 +82,51 @@ class App extends Component { render() { return ( -
+

Player

-
- {this.waveform = el}} - peaks={config.data} - height={200} - pos={this.state.songSecs} - duration={this.state.duration} - onClick={this.openCommentPopup} - color="#676767" - progressGradientColors={[[0, '#33cccc'], [1, '#aaa']]} - /> - {this.state.comments.map(comment => ) } -
+
+ + + {this.waveform = el}} + peaks={config.data} + height={200} + pos={this.state.songSecs} + duration={this.state.duration} + onClick={this.openCommentPopup} + color="#676767" + progressGradientColors={[[0, '#33cccc'], [1, '#aaa']]} + /> - { this.rap = element }} - onListen={()=>this.setState({songSecs:this.rap.audioEl.currentTime})} - /> + {this.state.showComments + ? + this.props.comments.map(comment => + + ) : null} + + + +
+ + + { this.rap = element }} + onListen={()=>this.setState({songSecs:this.rap.audioEl.currentTime})} + /> + + {this.state.showPopup ? : null } -
+ ) } } const mapState = state => state -export default connect(mapState)(App) +const mapDispatch = dispatch => { + return { + fetchComments: () => dispatch(fetchAllComments()), + postComment: comment => dispatch(addComment(comment)) + } +} +export default connect(mapState, mapDispatch)(Player) diff --git a/src/store/index.js b/src/store/index.js index 236bf93..493dc73 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,9 +4,10 @@ import thunkMiddleware from 'redux-thunk' import {composeWithDevTools} from 'redux-devtools-extension' import episodes from './reducers/episodes' import captions from './reducers/captions' +import comments from './reducers/comments' -const reducer = combineReducers({episodes, captions}) +const reducer = combineReducers({episodes, captions, comments}) const middleware = composeWithDevTools( applyMiddleware(thunkMiddleware, createLogger({collapsed: true})) ) @@ -15,3 +16,4 @@ const store = createStore(reducer, middleware) export default store export * from './reducers/episodes' export * from './reducers/captions' +export * from './reducers/comments' diff --git a/src/store/reducers/comments.js b/src/store/reducers/comments.js new file mode 100644 index 0000000..1426df9 --- /dev/null +++ b/src/store/reducers/comments.js @@ -0,0 +1,45 @@ +//import axios from 'axios' + +// ACTION TYPES +const GOT_ALL_COMMENTS = 'GOT_ALL_COMMENTS' +const ADD_COMMENT = 'ADD_COMMENT' +const initialComments = [] + +// ACTION CREATORS +export const gotAllComments = comments => ({ + type: GOT_ALL_COMMENTS, + comments +}) + +export const addComment = comment => ({ + type: ADD_COMMENT, + comment +}) + + +// THUNK CREATORS +const comments = [{id: 1, commentSecs: 132, text: 'This is a comment.'}, {id: 2, commentSecs: 32, text: 'Yooo'}] + +export const fetchAllComments = () => async dispatch => { + try { + //const res = await axios.get('https://irc.anarchyplanet.org/ircbang/api/v2/comments') + //const comments = res.data + dispatch(gotAllComments(comments)) + } catch (err) { + console.error(err) + } +} + +// REDUCER +const commentReducer = (comments = initialComments, action) => { + switch (action.type) { + case GOT_ALL_COMMENTS: + return action.comments + case ADD_COMMENT: + return comments.concat(action.comment) + default: + return comments + } +} + +export default commentReducer