LBRYCommunity/lbry-android
1
0
Fork 0
Code Issues155 Pull requests6 Projects Releases84 Packages Wiki Activity

fix problems with fullscreen scrubber adjustments

Browse source
This commit is contained in:
Akinwale Ariwodola 2018-07-22 17:28:20 +01:00
parent f8dc59cc88
commit 3acf7e29fe
2 changed files with 23 additions and 20 deletions
app/src
component/mediaPlayer
view.js
styles
mediaPlayer.js

34
app/src/component/mediaPlayer/view.js
View file

@ -151,11 +151,10 @@ class MediaPlayer extends React.PureComponent {
}
checkSeekerPosition(val = 0) {
const offset = this.getTrackingOffset();
if (val < offset) {
val = offset;
} else if (val >= (offset + this.seekerWidth) || (val + offset) >= this.seekerWidth) {
return offset + this.seekerWidth;
if (val < 0) {
val = 0;
} else if (val >= this.seekerWidth) {
return this.seekerWidth;
}
return val;
@ -203,16 +202,11 @@ class MediaPlayer extends React.PureComponent {
}
getCurrentTimeForSeekerPosition() {
return this.state.duration * ((this.state.seekerPosition - this.getTrackingOffset()) / this.seekerWidth);
return this.state.duration * (this.state.seekerPosition / this.seekerWidth);
}
calculateSeekerPosition() {
const position = this.seekerWidth * this.getCurrentTimePercentage();
if (position === 0 && this.state.fullscreenMode) {
return this.getTrackingOffset();
}
return position;
return this.seekerWidth * this.getCurrentTimePercentage();
}
getCurrentTimePercentage() {
@ -265,8 +259,8 @@ class MediaPlayer extends React.PureComponent {
render() {
const { backgroundPlayEnabled, fileInfo, thumbnail, style } = this.props;
const flexCompleted = this.getCurrentTimePercentage() * 100;
const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
const completedWidth = this.getCurrentTimePercentage() * this.seekerWidth;
const remainingWidth = this.seekerWidth - completedWidth;
let styles = [this.state.fullscreenMode ? mediaPlayerStyle.fullscreenContainer : mediaPlayerStyle.container];
if (style) {
if (style.length) {
@ -304,14 +298,18 @@ class MediaPlayer extends React.PureComponent {
this.seekerWidth = evt.nativeEvent.layout.width;
}}>
<View style={mediaPlayerStyle.progress}>
<View style={[mediaPlayerStyle.innerProgressCompleted, { flex: flexCompleted }]} />
<View style={[mediaPlayerStyle.innerProgressRemaining, { flex: flexRemaining }]} />
<View style={[mediaPlayerStyle.innerProgressCompleted, { width: completedWidth }]} />
<View style={[mediaPlayerStyle.innerProgressRemaining, { width: remainingWidth }]} />
</View>
</View>}
{this.state.areControlsVisible &&
<View style={[mediaPlayerStyle.seekerHandle, { left: this.state.seekerPosition }]} { ...this.seekResponder.panHandlers }>
<View style={this.state.seeking ? mediaPlayerStyle.bigSeekerCircle : mediaPlayerStyle.seekerCircle} />
<View style={{ left: this.getTrackingOffset(), width: this.seekerWidth }}>
<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>
);

9
app/src/styles/mediaPlayer.js
View file

@ -100,8 +100,13 @@ const mediaPlayerStyle = StyleSheet.create({
position: 'absolute',
height: 36,
width: 48,
bottom: 0,
marginLeft: -16
marginLeft: -18
},
seekerHandleContained: {
bottom: -17
},
seekerHandleFs: {
bottom: 0
},
bigSeekerCircle: {
borderRadius: 24,