add 10-second seek controls to media player

src/component/mediaPlayer/view.js

@@ -341,6 +341,12 @@ class MediaPlayer extends React.PureComponent {
     this.setState({ paused: true }, this.updateBackgroundMediaNotification);
   };
 
+  handleSeek = time => {
+    const { currentTime } = this.state;
+    const newTime = currentTime + time;
+    this.seekTo(newTime);
+  };
+
   updateBackgroundMediaNotification = () => {
     this.handlePausedState();
     const { backgroundPlayEnabled } = this.props;
@@ -362,14 +368,26 @@ class MediaPlayer extends React.PureComponent {
             <Icon name={'arrow-left'} size={18} style={mediaPlayerStyle.backButtonIcon} />
           </TouchableOpacity>
 
-          <TouchableOpacity style={mediaPlayerStyle.playPauseButton} onPress={this.togglePlay}>
+          <View style={mediaPlayerStyle.midControls}>
-            {this.state.paused && <Icon name="play" size={40} color="#ffffff" />}
+            <TouchableOpacity style={mediaPlayerStyle.rewind10} onPress={() => this.handleSeek(-10)}>
-            {!this.state.paused && <Icon name="pause" size={40} color="#ffffff" />}
+              <Icon name="undo" size={24} color={Colors.White} />
-          </TouchableOpacity>
+              <Text style={[mediaPlayerStyle.midControlText, mediaPlayerStyle.leftMidControlText]}>10</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={mediaPlayerStyle.playPauseButton} onPress={this.togglePlay}>
+              {this.state.paused && <Icon name="play" size={40} color={Colors.White} />}
+              {!this.state.paused && <Icon name="pause" size={40} color={Colors.White} />}
+            </TouchableOpacity>
+
+            <TouchableOpacity style={mediaPlayerStyle.forward10} onPress={() => this.handleSeek(10)}>
+              <Icon name="redo" size={24} color={Colors.White} />
+              <Text style={[mediaPlayerStyle.midControlText, mediaPlayerStyle.rightMidControlText]}>10</Text>
+            </TouchableOpacity>
+          </View>
 
           <TouchableOpacity style={mediaPlayerStyle.toggleFullscreenButton} onPress={this.toggleFullscreenMode}>
-            {this.state.fullscreenMode && <Icon name="compress" size={16} color="#ffffff" />}
+            {this.state.fullscreenMode && <Icon name="compress" size={16} color={Colors.White} />}
-            {!this.state.fullscreenMode && <Icon name="expand" size={16} color="#ffffff" />}
+            {!this.state.fullscreenMode && <Icon name="expand" size={16} color={Colors.White} />}
           </TouchableOpacity>
 
           <Text style={mediaPlayerStyle.elapsedDuration}>{this.formatTime(this.state.currentTime)}</Text>

src/styles/mediaPlayer.js

@@ -56,13 +56,41 @@ const mediaPlayerStyle = StyleSheet.create({
     height: '100%',
   },
   playerControlsContainer: {
-    backgroundColor: '#00000020',
+    backgroundColor: '#00000040',
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  playPauseButton: {
+  midControls: {
+    flex: 1,
+    flexDirection: 'row',
+    height: 64,
     position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  midControlText: {
+    fontFamily: 'Inter-Regular',
+    fontSize: 10,
+    position: 'absolute',
+    top: 10,
+    color: Colors.White,
+  },
+  leftMidControlText: {
+    left: -6,
+  },
+  rightMidControlText: {
+    right: -6,
+  },
+  rewind10: {
+    marginRight: 48,
+    alignItems: 'center',
+  },
+  forward10: {
+    marginLeft: 48,
+    alignItems: 'center',
+  },
+  playPauseButton: {
     width: 64,
     height: 64,
     alignItems: 'center',