TuneRain, a SoundCloud clone, is an application enabling users to upload and listen to music.
The splash page, featuring sign-in, sign-up, and home-page links.
A modal for signing up or logging in.
The home-page of TuneRain, where songs that have been uploaded by users are displayed and cyclable through the carousel.
The upload song page.
User profile, enabling users to view songs that have been submitted by that user and, if this is the logged-in users profile, the option to delete songs.
componentDidUpdate(oldProps) {
if ( this.props.currentsong ) {
if (this.props.isplaying === true) {
if ( !oldProps.currentsong || this.props.currentsong.url != oldProps.currentsong.url ) {
this.audio.src = this.props.currentsong.url;
}
this.audio.play();
} else if ( this.props.isplaying === false ) {
this.audio.pause();
}
}
}
play() {
this.props.startplayer();
}
pause() {
this.props.pauseplayer();
}
- Logic for handling the player component and controlling the song
class SongIndexItem extends React.Component {
constructor(props) {
super(props);
this.state = {hover: false};
this.toggleHover = this.toggleHover.bind(this);
}
buttonSwitch() {
if (this.props.isplaying) {
let hovered = this.state.hover ? "player-pause-buttonx" : "hidden";
return ( <button className={hovered} onClick={() => this.props.pauseSong()}></button> )
} else {
let hovered = this.state.hover ? "player-play-buttonx" : "hidden";
return ( <button className={hovered} onClick={() => this.props.playSong(this.props.song)} ></button> )
}
}
toggleHover() {
this.setState({hover: !this.state.hover})
}
render() {
return ( <div>
<div className="slide" onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}> {this.buttonSwitch()} </div>
<p className="song-title">{this.props.song.song_name}</p>
<p className="uploader">{this.props.song.user}</p>
</div>
)
}
} - Rendering individual song items in the context of a Material UI carousel.
- Colin Reitman