React Native Shuffling songs in Music player using React-Native-Video - react-native

Question

So I am making a music player and used react-native-video. For my output, I am able to play all the songs that I added it into the App.js where the data is Track. But I am able to change songs but not able to shuffle the music player when I press the forward button. Even when I toggled it on. I am not my error that does not allow me to shuffle them.
This is my Player Component
import Controls from './Controls';
import Video from 'react-native-video';
export default class Player extends Component {
constructor(props) {
super(props);
this.state = {
paused: true,
totalLength: 1,
currentPosition: 0,
selectedTrack: 0,
repeatOn: false,
shuffleOn: true,
};
}
setDuration(data) {
// console.log(totalLength);
this.setState({totalLength: Math.floor(data.duration)});
}
setTime(data) {
//console.log(data);
this.setState({currentPosition: Math.floor(data.currentTime)});
}
seek(time) {
time = Math.round(time);
this.refs.audioElement && this.refs.audioElement.seek(time);
this.setState({
currentPosition: time,
paused: false,
});
}
onBack() {
if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) {
this.refs.audioElement && this.refs.audioElement.seek(0);
this.setState({ isChanging: true });
setTimeout(() => this.setState({
currentPosition: 0,
paused: false,
totalLength: 1,
isChanging: false,
selectedTrack: this.state.selectedTrack - 1,
}), 0);
} else {
this.refs.audioElement.seek(0);
this.setState({
currentPosition: 0,
});
}
}
onForward() {
if (this.state.selectedTrack < this.props.tracks.length - 1) {
this.refs.audioElement && this.refs.audioElement.seek(0);
this.setState({ isChanging: true });
setTimeout(() => this.setState({
currentPosition: 0,
totalLength: 1,
paused: false,
isChanging: false,
selectedTrack: this.state.selectedTrack + 1,
}), 0);
}
}
render() {
const track = this.props.tracks[this.state.selectedTrack];
const video = this.state.isChanging ? null : (
<Video source={{uri: track.url}} // Can be a URL or a local file.
ref="audioElement"
paused={this.state.paused} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={false} // Repeat forever.
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration.bind(this)} // Callback when video loads
onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
style={styles.audioElement} />
);
return (
<View style={styles.container}>
<Controls
onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})}
repeatOn={this.state.repeatOn}
shuffleOn={this.state.shuffleOn}
forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1}
onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})}
onPressPlay={() => this.setState({paused: false})}
onPressPause={() => this.setState({paused: true})}
onBack={this.onBack.bind(this)}
onForward={this.onForward.bind(this)}
paused={this.state.paused}/>
{video}
</View>
);
}
}
This is my CSS
const styles = {
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
},
audioElement: {
height: 0,
width: 0,
}
};
And this is my App.js Component
import React, { Component } from 'react';
import Player from './Player';
export const TRACKS = [
{
id: '1',
url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
title: 'Better Now',
artist: 'Post Malone',
artwork: 'https://upload.wikimedia.org/wikipedia/en/thumb/c/c1/Beerbongs_%26_Bentleys_by_Post_Malone.png/220px-Beerbongs_%26_Bentleys_by_Post_Malone.png'
},
{
id: '2',
url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
title: 'Despacito',
artist: 'Luis Fonsi',
artwork:'https://upload.wikimedia.org/wikipedia/en/c/c8/Luis_Fonsi_Feat._Daddy_Yankee_-_Despacito_%28Official_Single_Cover%29.png'
},
{
id: '3',
url: 'http://tegos.kz/new/mp3_full/Clean_Bandit_-_Solo_(feat._Demi_Lovato)_(Latin_Remix).mp3',
title: 'Solo (Latin Remix)',
artist: 'Clean Bandit feat. Demi Lovato',
},
{
id: '4',
url: 'http://tegos.kz/new/mp3_full/Greyson_Chance_-_Waiting_Outside_The_Lines.mp3',
title: 'Waiting Outside The Lines',
artist: 'Greyson Chance',
artwork: ''
},
];
export default class App extends Component {
render() {
return <Player tracks={TRACKS} />
}
}

Answer 1

If you got autoPlay variable(I got that in redux) , then just check below condition for auto play.
if(this.props.autoPlay){
if( this.state.currentPosition >= this.state.totalLength ){
this.onForward();
}
}