Fullscreen scrubber (#205)

* fix problems with fullscreen scrubber adjustments

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;
             }}>
           <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>
     );

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,