From 7313e2d1c4a9e1194cbe0e227f2168da88202c52 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 31 Aug 2018 00:15:13 +0100
Subject: [PATCH] implement touch to seek for media playback using the seek bar
 (#271)

---
 .../component/floatingWalletBalance/view.js   |  4 +++-
 app/src/component/mediaPlayer/view.js         | 15 +++++++++++++
 app/src/page/file/view.js                     |  4 ++++
 app/src/styles/mediaPlayer.js                 | 21 +++++++++++++++----
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/app/src/component/floatingWalletBalance/view.js b/app/src/component/floatingWalletBalance/view.js
index 8320ecd..42d4361 100644
--- a/app/src/component/floatingWalletBalance/view.js
+++ b/app/src/component/floatingWalletBalance/view.js
@@ -1,9 +1,10 @@
 // @flow
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
 import { formatCredits } from 'lbry-redux'
 import Address from '../address';
 import Button from '../button';
+import Colors from '../../styles/colors';
 import floatingButtonStyle from '../../styles/floatingButton';
 
 type Props = {
@@ -17,6 +18,7 @@ class FloatingWalletBalance extends React.PureComponent<Props> {
     return (
       <TouchableOpacity style={[floatingButtonStyle.container, floatingButtonStyle.bottomRight]}
                         onPress={() => navigation && navigation.navigate({ routeName: 'Wallet' })}>
+        {isNaN(balance) && <ActivityIndicator size="small" color={Colors.White} />}
         <Text style={floatingButtonStyle.text}>
           {(balance || balance === 0) && (formatCredits(balance, 2) + ' LBC')}
         </Text>
diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js
index 6033f2d..9b8e562 100644
--- a/app/src/component/mediaPlayer/view.js
+++ b/app/src/component/mediaPlayer/view.js
@@ -295,6 +295,17 @@ class MediaPlayer extends React.PureComponent {
     return encodedFilePath;
   }
 
+  onSeekerTouchAreaPressed = (evt) => {
+    if (evt && evt.nativeEvent) {
+      const newSeekerPosition = evt.nativeEvent.locationX;
+      if (!isNaN(newSeekerPosition)) {
+        const time = this.state.duration * (newSeekerPosition / this.seekerWidth);
+        this.setSeekerPosition(newSeekerPosition);
+        this.seekTo(time);
+      }
+    }
+  }
+
   render() {
     const { backgroundPlayEnabled, fileInfo, thumbnail, onLayout, style } = this.props;
     const completedWidth = this.getCurrentTimePercentage() * this.seekerWidth;
@@ -348,6 +359,10 @@ class MediaPlayer extends React.PureComponent {
                         { left: this.state.seekerPosition }]} { ...this.seekResponder.panHandlers }>
             <View style={this.state.seeking ? mediaPlayerStyle.bigSeekerCircle : mediaPlayerStyle.seekerCircle} />
           </View>
+          <TouchableOpacity
+            style={[mediaPlayerStyle.seekerTouchArea,
+                    (this.state.fullscreenMode ? mediaPlayerStyle.seekerTouchAreaFs : mediaPlayerStyle.seekerTouchAreaContained)]}
+            onPress={this.onSeekerTouchAreaPressed} />
         </View>}
       </View>
     );
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index a1be260..d7bfb79 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -229,6 +229,10 @@ class FilePage extends React.PureComponent {
     const isLandscape = screenWidth > screenHeight;
     this.setState({ isLandscape });
 
+    if (!this.playerBackground) {
+      return;
+    }
+
     if (isLandscape) {
       this.playerBackground.setNativeProps({ height: screenHeight - StyleSheet.flatten(uriBarStyle.uriContainer).height });
     } else if (this.state.playerBgHeight > 0) {
diff --git a/app/src/styles/mediaPlayer.js b/app/src/styles/mediaPlayer.js
index c836c0b..2b06732 100644
--- a/app/src/styles/mediaPlayer.js
+++ b/app/src/styles/mediaPlayer.js
@@ -39,7 +39,7 @@ const mediaPlayerStyle = StyleSheet.create({
   },
   fullscreenTrackingControls: {
     alignSelf: 'center',
-    width: '70%'
+    width: '60%'
   },
   playerControls: {
     position: 'absolute',
@@ -75,7 +75,7 @@ const mediaPlayerStyle = StyleSheet.create({
     position: 'absolute',
     left: 8,
     bottom: 24,
-    fontSize: 12,
+    fontSize: 14,
     color: '#ffffff'
   },
   totalDuration: {
@@ -83,7 +83,7 @@ const mediaPlayerStyle = StyleSheet.create({
     position: 'absolute',
     right: 40,
     bottom: 24,
-    fontSize: 12,
+    fontSize: 14,
     color: '#ffffff'
   },
   seekerCircle: {
@@ -100,7 +100,8 @@ const mediaPlayerStyle = StyleSheet.create({
     position: 'absolute',
     height: 36,
     width: 48,
-    marginLeft: -18
+    marginLeft: -18,
+    zIndex: 20
   },
   seekerHandleContained: {
     bottom: -17
@@ -108,6 +109,18 @@ const mediaPlayerStyle = StyleSheet.create({
   seekerHandleFs: {
     bottom: 0
   },
+  seekerTouchArea: {
+    position: 'absolute',
+    height: 30,
+    width: '100%',
+    zIndex: 10,
+  },
+  seekerTouchAreaContained: {
+    bottom: -15,
+  },
+  seekerTouchAreaFs: {
+    bottom: 0
+  },
   bigSeekerCircle: {
     borderRadius: 24,
     position: 'relative',