Webplayer automatically plays next song in the playlist when reaching the end of current song
This commit is contained in:
parent
43d3b927c1
commit
7c1d7dacc3
@ -23,6 +23,8 @@ class WebPlayer extends Component {
|
|||||||
|
|
||||||
// Bind this
|
// Bind this
|
||||||
this.startPlaying = this.startPlaying.bind(this);
|
this.startPlaying = this.startPlaying.bind(this);
|
||||||
|
this.stopPlaying = this.stopPlaying.bind(this);
|
||||||
|
this.isPlaying = this.isPlaying.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -32,16 +34,27 @@ class WebPlayer extends Component {
|
|||||||
|
|
||||||
componentWillUpdate(nextProps) {
|
componentWillUpdate(nextProps) {
|
||||||
// Handle stop
|
// 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) {
|
if (this.howl) {
|
||||||
this.howl.stop();
|
this.stopPlaying();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle play / pause
|
// Toggle play / pause
|
||||||
if (nextProps.isPlaying != this.props.isPlaying) {
|
if (
|
||||||
// This check ensure we do not start playing multiple times the
|
// This check ensure we do not start playing multiple times the
|
||||||
// same song
|
// 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);
|
this.startPlaying(nextProps);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,6 +84,7 @@ class WebPlayer extends Component {
|
|||||||
mute: props.isMute,
|
mute: props.isMute,
|
||||||
volume: props.volume / 100, // Set current volume
|
volume: props.volume / 100, // Set current volume
|
||||||
autoplay: false, // No autoplay, we handle it manually
|
autoplay: false, // No autoplay, we handle it manually
|
||||||
|
onend: () => props.actions.playNextSong(), // Play next song at the end
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// Else, something is playing
|
// 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() {
|
render() {
|
||||||
const webplayerProps = {
|
const webplayerProps = {
|
||||||
isPlaying: this.props.isPlaying,
|
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
Loading…
Reference in New Issue
Block a user