-
Notifications
You must be signed in to change notification settings - Fork 0
/
Slider.js
66 lines (60 loc) · 2.04 KB
/
Slider.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
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import Slider from '@react-native-community/slider';
function pad(n, width, z=0) {
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
const minutesAndSeconds = (position) => ([
pad(Math.floor(position / 60), 2),
pad(position % 60, 2),
]);
export default class Header extends Component {
render(){
const elapsed = minutesAndSeconds(this.props.currentPosition);
const remaining = minutesAndSeconds(this.props.trackLength - this.props.currentPosition);
return(
<View style={styles.container}>
<Slider
onSlidingStart={this.props.onSlidingStart}
onSlidingComplete={this.props.onSeek}
maximumValue={Math.max(this.props.trackLength, 1, this.props.currentPosition + 1)}
value={this.props.currentPosition}
style={styles.slider}
thumbTintColor='#fff'
minimumTrackTintColor='#fff'
maximumTrackTintColor='rgba(255, 255, 255, 0.3)'
/>
<View style={styles.textCont}>
<Text style={styles.text}>
{elapsed[0] + ":" + elapsed[1]}
</Text>
<View style={{flex: 1}} />
<Text style={[styles.text, {width: 40}]}>
{this.props.trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
slider: {
marginTop: 0,
},
container: {
paddingLeft: 30,
paddingRight: 30,
paddingTop: 16,
},
text: {
color: 'rgba(255, 255, 255, 0.72)',
fontSize: 13,
textAlign:'center',
},
textCont: {
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15
}
});