Fullscreen scrubber (#205)

* fix problems with fullscreen scrubber adjustments
This commit is contained in:
Akinwale Ariwodola 2018-07-24 14:28:45 +01:00 committed by GitHub
parent 5ef300b4a4
commit e8a572032a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 18 deletions

View file

@ -152,11 +152,10 @@ class MediaPlayer extends React.PureComponent {
} }
checkSeekerPosition(val = 0) { checkSeekerPosition(val = 0) {
const offset = this.getTrackingOffset(); if (val < 0) {
if (val < offset) { val = 0;
val = offset; } else if (val >= this.seekerWidth) {
} else if (val >= (offset + this.seekerWidth)) { return this.seekerWidth;
return offset + this.seekerWidth;
} }
return val; return val;
@ -211,9 +210,6 @@ class MediaPlayer extends React.PureComponent {
} }
calculateSeekerPosition() { calculateSeekerPosition() {
if (this.state.fullscreenMode) {
return this.getTrackingOffset() + (this.seekerWidth * this.getCurrentTimePercentage());
}
return this.seekerWidth * this.getCurrentTimePercentage(); return this.seekerWidth * this.getCurrentTimePercentage();
} }
@ -229,7 +225,7 @@ class MediaPlayer extends React.PureComponent {
} }
componentDidMount() { componentDidMount() {
this.setSeekerPosition(this.calculateSeekerPosition());
} }
componentWillUnmount() { componentWillUnmount() {
@ -267,8 +263,8 @@ class MediaPlayer extends React.PureComponent {
render() { render() {
const { backgroundPlayEnabled, fileInfo, thumbnail, onLayout, style } = this.props; const { backgroundPlayEnabled, fileInfo, thumbnail, onLayout, style } = this.props;
const flexCompleted = this.getCurrentTimePercentage() * 100; const completedWidth = this.getCurrentTimePercentage() * this.seekerWidth;
const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100; const remainingWidth = this.seekerWidth - completedWidth;
let styles = [this.state.fullscreenMode ? mediaPlayerStyle.fullscreenContainer : mediaPlayerStyle.container]; let styles = [this.state.fullscreenMode ? mediaPlayerStyle.fullscreenContainer : mediaPlayerStyle.container];
if (style) { if (style) {
if (style.length) { if (style.length) {
@ -306,14 +302,18 @@ class MediaPlayer extends React.PureComponent {
this.seekerWidth = evt.nativeEvent.layout.width; this.seekerWidth = evt.nativeEvent.layout.width;
}}> }}>
<View style={mediaPlayerStyle.progress}> <View style={mediaPlayerStyle.progress}>
<View style={[mediaPlayerStyle.innerProgressCompleted, { flex: flexCompleted }]} /> <View style={[mediaPlayerStyle.innerProgressCompleted, { width: completedWidth }]} />
<View style={[mediaPlayerStyle.innerProgressRemaining, { flex: flexRemaining }]} /> <View style={[mediaPlayerStyle.innerProgressRemaining, { width: remainingWidth }]} />
</View> </View>
</View>} </View>}
{this.state.areControlsVisible && {this.state.areControlsVisible &&
<View style={[mediaPlayerStyle.seekerHandle, { left: this.state.seekerPosition }]} { ...this.seekResponder.panHandlers }> <View style={{ left: this.getTrackingOffset(), width: this.seekerWidth }}>
<View style={this.state.seeking ? mediaPlayerStyle.bigSeekerCircle : mediaPlayerStyle.seekerCircle} /> <View style={[mediaPlayerStyle.seekerHandle,
(this.state.fullscreenMode ? mediaPlayerStyle.seekerHandleFs : mediaPlayerStyle.seekerHandleContained),
{ left: this.state.seekerPosition }]} { ...this.seekResponder.panHandlers }>
<View style={this.state.seeking ? mediaPlayerStyle.bigSeekerCircle : mediaPlayerStyle.seekerCircle} />
</View>
</View>} </View>}
</View> </View>
); );

View file

@ -18,7 +18,6 @@ const mediaPlayerStyle = StyleSheet.create({
progress: { progress: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
width: '100%',
height: 3 height: 3
}, },
innerProgressCompleted: { innerProgressCompleted: {
@ -101,8 +100,13 @@ const mediaPlayerStyle = StyleSheet.create({
position: 'absolute', position: 'absolute',
height: 36, height: 36,
width: 48, width: 48,
bottom: 0, marginLeft: -18
marginLeft: -16 },
seekerHandleContained: {
bottom: -17
},
seekerHandleFs: {
bottom: 0
}, },
bigSeekerCircle: { bigSeekerCircle: {
borderRadius: 24, borderRadius: 24,