Webplayer automatically plays next song in the playlist when reaching the end of current song

This commit is contained in:
Lucas Verney 2016-08-11 23:38:03 +02:00
parent 43d3b927c1
commit 7c1d7dacc3
4 changed files with 66 additions and 30 deletions

View File

@ -23,6 +23,8 @@ class WebPlayer extends Component {
// Bind this
this.startPlaying = this.startPlaying.bind(this);
this.stopPlaying = this.stopPlaying.bind(this);
this.isPlaying = this.isPlaying.bind(this);
}
componentDidMount() {
@ -32,16 +34,27 @@ class WebPlayer extends Component {
componentWillUpdate(nextProps) {
// Handle stop
if (!nextProps.currentSong || nextProps.playlist.size < 1) {
if (
// No current song in updated props
!nextProps.currentSong ||
// No playlist in updated props
nextProps.playlist.size < 1 ||
// Song played is not the song currently played
(this.props.currentSong && nextProps.currentSong.get("id") != this.props.currentSong.get("id"))
) {
if (this.howl) {
this.howl.stop();
this.stopPlaying();
}
}
// Toggle play / pause
if (nextProps.isPlaying != this.props.isPlaying) {
if (
// This check ensure we do not start playing multiple times the
// same song
(nextProps.isPlaying != this.props.isPlaying) ||
// Or we should be playing but there is no howl object playing
(nextProps.isPlaying && !this.isPlaying())
) {
this.startPlaying(nextProps);
}
@ -71,6 +84,7 @@ class WebPlayer extends Component {
mute: props.isMute,
volume: props.volume / 100, // Set current volume
autoplay: false, // No autoplay, we handle it manually
onend: () => props.actions.playNextSong(), // Play next song at the end
});
} else {
// Else, something is playing
@ -88,6 +102,28 @@ class WebPlayer extends Component {
}
}
/**
* Stop playback through Howler and Web Audio API.
*/
stopPlaying() {
// Stop music playback
this.howl.stop();
// Reset howl object
this.howl = null;
}
/**
* Check whether some music is currently playing or not.
*
* @return True / False whether music is playing.
*/
isPlaying() {
if (this.howl) {
return this.howl.playing();
}
return false;
}
render() {
const webplayerProps = {
isPlaying: this.props.isPlaying,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long