mirror of
https://github.com/LBRYFoundation/lbry-android.git
synced 2025-08-23 17:47:28 +00:00
Fullscreen scrubber (#205)
* fix problems with fullscreen scrubber adjustments
This commit is contained in:
parent
5ef300b4a4
commit
e8a572032a
2 changed files with 22 additions and 18 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Add table
Reference in a new issue