diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js index 25f2e48..1108e3c 100644 --- a/app/src/component/mediaPlayer/view.js +++ b/app/src/component/mediaPlayer/view.js @@ -152,11 +152,10 @@ class MediaPlayer extends React.PureComponent { } checkSeekerPosition(val = 0) { - const offset = this.getTrackingOffset(); - if (val < offset) { - val = offset; - } else if (val >= (offset + this.seekerWidth)) { - return offset + this.seekerWidth; + if (val < 0) { + val = 0; + } else if (val >= this.seekerWidth) { + return this.seekerWidth; } return val; @@ -211,9 +210,6 @@ class MediaPlayer extends React.PureComponent { } calculateSeekerPosition() { - if (this.state.fullscreenMode) { - return this.getTrackingOffset() + (this.seekerWidth * this.getCurrentTimePercentage()); - } return this.seekerWidth * this.getCurrentTimePercentage(); } @@ -229,7 +225,7 @@ class MediaPlayer extends React.PureComponent { } componentDidMount() { - + this.setSeekerPosition(this.calculateSeekerPosition()); } componentWillUnmount() { @@ -267,8 +263,8 @@ class MediaPlayer extends React.PureComponent { render() { const { backgroundPlayEnabled, fileInfo, thumbnail, onLayout, 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) { @@ -306,14 +302,18 @@ class MediaPlayer extends React.PureComponent { this.seekerWidth = evt.nativeEvent.layout.width; }}> - - + + } {this.state.areControlsVisible && - - + + + + } ); diff --git a/app/src/styles/mediaPlayer.js b/app/src/styles/mediaPlayer.js index 99b02c9..dd66694 100644 --- a/app/src/styles/mediaPlayer.js +++ b/app/src/styles/mediaPlayer.js @@ -18,7 +18,6 @@ const mediaPlayerStyle = StyleSheet.create({ progress: { flex: 1, flexDirection: 'row', - width: '100%', height: 3 }, innerProgressCompleted: { @@ -101,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,