-
Notifications
You must be signed in to change notification settings - Fork 0
/
Player.js
103 lines (95 loc) · 2.98 KB
/
Player.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import Header from './Header'
import AlbumArt from './AlbumArt'
import TrackDetails from './TrackDetails'
import Controls from './Controls'
import Slider from './Slider'
export default class Player extends Component {
constructor(props){
super(props);
this.state = {
paused: true,
totalLength: 100,
currentPosition: 0,
selectedTrack: 0,
repeatOn: false,
shuffleOn: false,
liked: false
};
}
seek(time) {
time = Math.round(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,
});
}*/
console.log('onBack Called');
}
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);
} */
console.log('onForward Called');
}
render(){
return (
<View style={styles.container}>
<Header message={"Playing from Saved Music"}/>
<AlbumArt url={require('./kingkrule.jpg')}/>
<TrackDetails title={"Song"} artist={"Artist"} liked={this.state.liked}
likedCallback={() => this.setState({liked: !this.state.liked})}/>
<Slider onSeek={this.seek.bind(this)}
trackLength={this.state.totalLength}
onSlidingStart={() => this.setState({paused: true})}
currentPosition={this.state.currentPosition}/>
<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}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
},
text: {
color: 'white'
}
});