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,