LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

add 10-second seek controls to media player

Browse source
This commit is contained in:
Akinwale Ariwodola 2020-01-20 18:18:01 +01:00
parent 2465b5514f
commit b9dec86cae
2 changed files with 54 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/component/mediaPlayer/view.js
View file

@ -341,6 +341,12 @@ class MediaPlayer extends React.PureComponent {
this.setState({ paused: true }, this.updateBackgroundMediaNotification);
};
handleSeek = time => {
const { currentTime } = this.state;
const newTime = currentTime + time;
this.seekTo(newTime);
};
updateBackgroundMediaNotification = () => {
this.handlePausedState();
const { backgroundPlayEnabled } = this.props;
@ -362,14 +368,26 @@ class MediaPlayer extends React.PureComponent {
<Icon name={'arrow-left'} size={18} style={mediaPlayerStyle.backButtonIcon} />
</TouchableOpacity>
<TouchableOpacity style={mediaPlayerStyle.playPauseButton} onPress={this.togglePlay}>
{this.state.paused && <Icon name="play" size={40} color="#ffffff" />}
{!this.state.paused && <Icon name="pause" size={40} color="#ffffff" />}
<View style={mediaPlayerStyle.midControls}>
<TouchableOpacity style={mediaPlayerStyle.rewind10} onPress={() => this.handleSeek(-10)}>
<Icon name="undo" size={24} color={Colors.White} />
<Text style={[mediaPlayerStyle.midControlText, mediaPlayerStyle.leftMidControlText]}>10</Text>
</TouchableOpacity>
<TouchableOpacity style={mediaPlayerStyle.playPauseButton} onPress={this.togglePlay}>
{this.state.paused && <Icon name="play" size={40} color={Colors.White} />}
{!this.state.paused && <Icon name="pause" size={40} color={Colors.White} />}
</TouchableOpacity>
<TouchableOpacity style={mediaPlayerStyle.forward10} onPress={() => this.handleSeek(10)}>
<Icon name="redo" size={24} color={Colors.White} />
<Text style={[mediaPlayerStyle.midControlText, mediaPlayerStyle.rightMidControlText]}>10</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={mediaPlayerStyle.toggleFullscreenButton} onPress={this.toggleFullscreenMode}>
{this.state.fullscreenMode && <Icon name="compress" size={16} color="#ffffff" />}
{!this.state.fullscreenMode && <Icon name="expand" size={16} color="#ffffff" />}
{this.state.fullscreenMode && <Icon name="compress" size={16} color={Colors.White} />}
{!this.state.fullscreenMode && <Icon name="expand" size={16} color={Colors.White} />}
</TouchableOpacity>
<Text style={mediaPlayerStyle.elapsedDuration}>{this.formatTime(this.state.currentTime)}</Text>

32
src/styles/mediaPlayer.js
View file

@ -56,13 +56,41 @@ const mediaPlayerStyle = StyleSheet.create({
height: '100%',
},
playerControlsContainer: {
backgroundColor: '#00000020',
backgroundColor: '#00000040',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
playPauseButton: {
midControls: {
flex: 1,
flexDirection: 'row',
height: 64,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
midControlText: {
fontFamily: 'Inter-Regular',
fontSize: 10,
position: 'absolute',
top: 10,
color: Colors.White,
},
leftMidControlText: {
left: -6,
},
rightMidControlText: {
right: -6,
},
rewind10: {
marginRight: 48,
alignItems: 'center',
},
forward10: {
marginLeft: 48,
alignItems: 'center',
},
playPauseButton: {
width: 64,
height: 64,
alignItems: 'center',