Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, {Component, PropTypes} from 'react';
import Track from './Track';
export default class TrackList extends Component {
static propTypes = {
tracks: PropTypes.object,
user: PropTypes.object,
clientId: PropTypes.string,
auth: PropTypes.func,
play: PropTypes.func
}
static defaultProps = {
tracks: []
}
componentDidUpdate() {
const player = this.player;
if (player) {
if (this.props.tracks.activeTrack) {
player.play();
} else {
player.pause();
}
}
}
render() {
const {tracks: {activeTrack, tracks}} = this.props;
return (
<div>
<div>
{
this.props.user
? <div>Hello {this.props.user.full_name}</div>
: <button onClick={this.props.auth} type='button'>Login</button>
}
</div>
<div>
{
tracks.map((track, key) => {
return (
<Track key={key} track={track} play={this.props.play} />
)
})
}
</div>
<div>
{activeTrack && (
<audio
id='player'
ref={(player) => {this.player = player;}}
src={`${activeTrack.origin.stream_url}?client_id=${clientId}`}>
</audio>
)}
</div>
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment