From 9c3f2f44da15a563e792a136f297cd288a2d4367 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 27 Aug 2018 16:53:03 +0100
Subject: [PATCH] show animated activity indicator after the user presses the
 Play button (#261)

---
 app/src/component/button/view.js             |  5 +-
 app/src/component/fileDownloadButton/view.js |  7 +-
 app/src/page/file/view.js                    | 71 +++++++++++---------
 app/src/styles/filePage.js                   |  6 +-
 buildozer.spec.sample                        |  2 +-
 buildozer.spec.travis                        |  2 +-
 buildozer.spec.vagrant                       |  4 +-
 7 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/app/src/component/button/view.js b/app/src/component/button/view.js
index d0bdde34..ec3745eb 100644
--- a/app/src/component/button/view.js
+++ b/app/src/component/button/view.js
@@ -12,7 +12,8 @@ export default class Button extends React.PureComponent {
       text,
       icon,
       theme,
-      onPress
+      onPress,
+      onLayout
     } = this.props;
 
     let styles = [buttonStyle.button, buttonStyle.row];
@@ -41,7 +42,7 @@ export default class Button extends React.PureComponent {
     }
 
     return (
-      <TouchableOpacity disabled={disabled} style={styles} onPress={onPress}>
+      <TouchableOpacity disabled={disabled} style={styles} onPress={onPress} onLayout={onLayout}>
         {icon && <Icon name={icon} size={18} color={'light' === theme ? Colors.DarkGrey : Colors.White} />}
         {text && (text.trim().length > 0) && <Text style={textStyles}>{text}</Text>}
       </TouchableOpacity>
diff --git a/app/src/component/fileDownloadButton/view.js b/app/src/component/fileDownloadButton/view.js
index fe05f737..2f9fbe87 100644
--- a/app/src/component/fileDownloadButton/view.js
+++ b/app/src/component/fileDownloadButton/view.js
@@ -42,7 +42,8 @@ class FileDownloadButton extends React.PureComponent {
       loading,
       doPause,
       style,
-      openFile
+      openFile,
+      onButtonLayout
     } = this.props;
 
     if (loading || downloading) {
@@ -67,6 +68,7 @@ class FileDownloadButton extends React.PureComponent {
       return (
         <Button icon={isPlayable ? 'play' : null}
                 text={isPlayable ? 'Play' : 'Download'}
+                onLayout={onButtonLayout}
                 style={[style, fileDownloadButtonStyle.container]} onPress={() => {
           if (NativeModules.Mixpanel) {
             NativeModules.Mixpanel.track('Purchase Uri', { Uri: uri });
@@ -79,7 +81,8 @@ class FileDownloadButton extends React.PureComponent {
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (
-        <TouchableOpacity style={[style, fileDownloadButtonStyle.container]} onPress={openFile}>
+        <TouchableOpacity onLayout={onButtonLayout}
+                          style={[style, fileDownloadButtonStyle.container]} onPress={openFile}>
           <Text style={fileDownloadButtonStyle.text}>Open</Text>
         </TouchableOpacity>
       );
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index a1ce624f..e165411d 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -43,6 +43,8 @@ class FilePage extends React.PureComponent {
     this.state = {
       mediaLoaded: false,
       autoplayMedia: false,
+      downloadButtonShown: false,
+      downloadPressed: false,
       fullscreenMode: false,
       showImageViewer: false,
       showWebView: false,
@@ -123,7 +125,10 @@ class FilePage extends React.PureComponent {
       'Are you sure you want to remove this file from your device?',
       [
         { text: 'No' },
-        { text: 'Yes', onPress: () => { deleteFile(fileInfo.outpoint, true); } }
+        { text: 'Yes', onPress: () => {
+          deleteFile(fileInfo.outpoint, true);
+          this.setState({ downloadPressed: false, mediaLoaded: false });
+        }}
       ],
       { cancelable: true }
     );
@@ -137,7 +142,10 @@ class FilePage extends React.PureComponent {
       'Are you sure you want to stop downloading this file?',
       [
         { text: 'No' },
-        { text: 'Yes', onPress: () => { stopDownload(navigation.state.params.uri, fileInfo); } }
+        { text: 'Yes', onPress: () => {
+          stopDownload(navigation.state.params.uri, fileInfo);
+          this.setState({ downloadPressed: false, mediaLoaded: false });
+        } }
       ],
       { cancelable: true }
     );
@@ -305,40 +313,43 @@ class FilePage extends React.PureComponent {
               <View style={filePageStyle.mediaContainer}>
                 {(canOpen || (!fileInfo || (isPlayable && !canLoadMedia))) &&
                   <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
-                {(canOpen || (isPlayable && !this.state.mediaLoaded)) && <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />}
-                {((isPlayable && !completed && !canLoadMedia) || !completed || canOpen) &&
+                {((!this.state.downloadButtonShown || this.state.downloadPressed) && !this.state.mediaLoaded) &&
+                    <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />}
+                {((isPlayable && !completed && !canLoadMedia) || !completed || canOpen) && (!this.state.downloadPressed) &&
                   <FileDownloadButton uri={uri}
                                       style={filePageStyle.downloadButton}
                                       openFile={openFile}
                                       isPlayable={isPlayable}
-                                      onPlay={() => this.setState({ autoPlayMedia: true })} />}
+                                      onPlay={() => this.setState({ downloadPressed: true, autoPlayMedia: true })}
+                                      onButtonLayout={() => this.setState({ downloadButtonShown: true })} />}
                 {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}
               </View>
-              {canLoadMedia && <View style={playerBgStyle} ref={(ref) => { this.playerBackground = ref; }}
-                                     onLayout={(evt) => {
-                                       if (!this.state.playerBgHeight) {
-                                         this.setState({ playerBgHeight: evt.nativeEvent.layout.height });
-                                       }
-                                     }} />}
-              {canLoadMedia && <MediaPlayer fileInfo={fileInfo}
-                                            ref={(ref) => { this.player = ref; }}
-                                            uri={uri}
-                                            style={playerStyle}
-                                            autoPlay={this.state.autoPlayMedia}
-                                            onFullscreenToggled={this.handleFullscreenToggle}
-                                            onMediaLoaded={() => {
-                                              this.setState({ mediaLoaded: true });
-                                              window.currentMediaInfo = {
-                                                title: title,
-                                                channel: channelName
-                                              };
-                                            }}
-                                            onLayout={(evt) => {
-                                              if (!this.state.playerHeight) {
-                                                this.setState({ playerHeight: evt.nativeEvent.layout.height });
-                                              }
-                                            }}
-                                            />}
+              {canLoadMedia && fileInfo && <View style={playerBgStyle}
+                                                 ref={(ref) => { this.playerBackground = ref; }}
+                                                 onLayout={(evt) => {
+                                                  if (!this.state.playerBgHeight) {
+                                                    this.setState({ playerBgHeight: evt.nativeEvent.layout.height });
+                                                  }
+                                                }} />}
+              {canLoadMedia && fileInfo && <MediaPlayer fileInfo={fileInfo}
+                                                        ref={(ref) => { this.player = ref; }}
+                                                        uri={uri}
+                                                        style={playerStyle}
+                                                        autoPlay={this.state.autoPlayMedia}
+                                                        onFullscreenToggled={this.handleFullscreenToggle}
+                                                        onMediaLoaded={() => {
+                                                          this.setState({ mediaLoaded: true });
+                                                          window.currentMediaInfo = {
+                                                            title: title,
+                                                            channel: channelName
+                                                          };
+                                                        }}
+                                                        onLayout={(evt) => {
+                                                          if (!this.state.playerHeight) {
+                                                            this.setState({ playerHeight: evt.nativeEvent.layout.height });
+                                                          }
+                                                        }}
+                                                        />}
 
               { showActions &&
               <View style={filePageStyle.actions}>
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index 3bdef210..d9041300 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -146,11 +146,13 @@ const filePageStyle = StyleSheet.create({
     paddingTop: 16,
     paddingBottom: 8,
     marginTop: -14,
-    width: '50%',
+    width: '100%',
   },
   actionButton: {
+    alignSelf: 'flex-start',
     backgroundColor: Colors.White,
-    width: 160
+    paddingLeft: 24,
+    paddingRight: 24
   },
   loading: {
     position: 'absolute',
diff --git a/buildozer.spec.sample b/buildozer.spec.sample
index e39cd0f6..fbbc5af0 100644
--- a/buildozer.spec.sample
+++ b/buildozer.spec.sample
@@ -36,7 +36,7 @@ version.filename = %(source.dir)s/main.py
 
 # (list) Application requirements
 # comma seperated e.g. requirements = sqlite3,kivy
-requirements = openssl, sqlite3, hostpython2, android, distro, pyjnius, certifi==2018.4.16, constantly, incremental, functools32, miniupnpc==1.9, gmpy==1.17, twisted==16.6.0, appdirs==1.4.3, argparse==1.2.1, docopt==0.6.2, base58==0.2.2, colorama==0.3.7, dnspython==1.12.0, ecdsa==0.13, envparse==0.2.0, jsonrpc==1.2, jsonrpclib==0.1.7, jsonschema==2.5.1, pbkdf2==1.3, pyyaml==3.12, qrcode==5.2.2, requests==2.9.1, seccure==0.3.1.3, attrs==18.1.0, pyasn1, pyasn1-modules, service_identity==16.0.0, six==1.9.0, slowaes==0.1a1, txJSON-RPC==0.5, wsgiref==0.1.2, zope.interface==4.3.3, protobuf==3.2.0, keyring==10.4.0, netifaces, txupnp==0.0.1a10, git+https://github.com/lbryio/lbryschema.git@v0.0.16#egg=lbryschema, git+https://github.com/lbryio/lbryum.git#egg=lbryum, git+https://github.com/lbryio/lbry.git#egg=lbrynet, asn1crypto, cryptography==2.2.2, pyopenssl==17.4.0, treq==17.8.0, funcsigs, mock, pbr, unqlite
+requirements = openssl, sqlite3, hostpython2, android, distro, pyjnius, certifi==2018.4.16, constantly, incremental, functools32, miniupnpc==1.9, gmpy==1.17, twisted==16.6.0, appdirs==1.4.3, argparse==1.2.1, docopt==0.6.2, base58==0.2.2, colorama==0.3.7, dnspython==1.12.0, ecdsa==0.13, envparse==0.2.0, jsonrpc==1.2, jsonrpclib==0.1.7, jsonschema==2.5.1, pbkdf2==1.3, pyyaml==3.12, qrcode==5.2.2, requests==2.9.1, seccure==0.3.1.3, attrs==18.1.0, pyasn1, pyasn1-modules, service_identity==16.0.0, six==1.9.0, slowaes==0.1a1, txJSON-RPC==0.5, wsgiref==0.1.2, zope.interface==4.3.3, protobuf==3.2.0, keyring==10.4.0, netifaces, txupnp==0.0.1a10, git+https://github.com/lbryio/lbryschema.git@v0.0.16#egg=lbryschema, git+https://github.com/lbryio/lbryum.git#egg=lbryum, git+https://github.com/lbryio/lbry.git@v0.21.2#egg=lbrynet, asn1crypto, cryptography==2.2.2, pyopenssl==17.4.0, treq==17.8.0, funcsigs, mock, pbr, unqlite
 
 # (str) Custom source folders for requirements
 # Sets custom source for any requirements with recipes
diff --git a/buildozer.spec.travis b/buildozer.spec.travis
index e39cd0f6..fbbc5af0 100644
--- a/buildozer.spec.travis
+++ b/buildozer.spec.travis
@@ -36,7 +36,7 @@ version.filename = %(source.dir)s/main.py
 
 # (list) Application requirements
 # comma seperated e.g. requirements = sqlite3,kivy
-requirements = openssl, sqlite3, hostpython2, android, distro, pyjnius, certifi==2018.4.16, constantly, incremental, functools32, miniupnpc==1.9, gmpy==1.17, twisted==16.6.0, appdirs==1.4.3, argparse==1.2.1, docopt==0.6.2, base58==0.2.2, colorama==0.3.7, dnspython==1.12.0, ecdsa==0.13, envparse==0.2.0, jsonrpc==1.2, jsonrpclib==0.1.7, jsonschema==2.5.1, pbkdf2==1.3, pyyaml==3.12, qrcode==5.2.2, requests==2.9.1, seccure==0.3.1.3, attrs==18.1.0, pyasn1, pyasn1-modules, service_identity==16.0.0, six==1.9.0, slowaes==0.1a1, txJSON-RPC==0.5, wsgiref==0.1.2, zope.interface==4.3.3, protobuf==3.2.0, keyring==10.4.0, netifaces, txupnp==0.0.1a10, git+https://github.com/lbryio/lbryschema.git@v0.0.16#egg=lbryschema, git+https://github.com/lbryio/lbryum.git#egg=lbryum, git+https://github.com/lbryio/lbry.git#egg=lbrynet, asn1crypto, cryptography==2.2.2, pyopenssl==17.4.0, treq==17.8.0, funcsigs, mock, pbr, unqlite
+requirements = openssl, sqlite3, hostpython2, android, distro, pyjnius, certifi==2018.4.16, constantly, incremental, functools32, miniupnpc==1.9, gmpy==1.17, twisted==16.6.0, appdirs==1.4.3, argparse==1.2.1, docopt==0.6.2, base58==0.2.2, colorama==0.3.7, dnspython==1.12.0, ecdsa==0.13, envparse==0.2.0, jsonrpc==1.2, jsonrpclib==0.1.7, jsonschema==2.5.1, pbkdf2==1.3, pyyaml==3.12, qrcode==5.2.2, requests==2.9.1, seccure==0.3.1.3, attrs==18.1.0, pyasn1, pyasn1-modules, service_identity==16.0.0, six==1.9.0, slowaes==0.1a1, txJSON-RPC==0.5, wsgiref==0.1.2, zope.interface==4.3.3, protobuf==3.2.0, keyring==10.4.0, netifaces, txupnp==0.0.1a10, git+https://github.com/lbryio/lbryschema.git@v0.0.16#egg=lbryschema, git+https://github.com/lbryio/lbryum.git#egg=lbryum, git+https://github.com/lbryio/lbry.git@v0.21.2#egg=lbrynet, asn1crypto, cryptography==2.2.2, pyopenssl==17.4.0, treq==17.8.0, funcsigs, mock, pbr, unqlite
 
 # (str) Custom source folders for requirements
 # Sets custom source for any requirements with recipes
diff --git a/buildozer.spec.vagrant b/buildozer.spec.vagrant
index 228ba3ec..fbbc5af0 100644
--- a/buildozer.spec.vagrant
+++ b/buildozer.spec.vagrant
@@ -36,7 +36,7 @@ version.filename = %(source.dir)s/main.py
 
 # (list) Application requirements
 # comma seperated e.g. requirements = sqlite3,kivy
-requirements = openssl, sqlite3, hostpython2, android, distro, pyjnius, certifi==2018.4.16, constantly, incremental, functools32, miniupnpc==1.9, gmpy==1.17, twisted==16.6.0, appdirs==1.4.3, argparse==1.2.1, docopt==0.6.2, base58==0.2.2, colorama==0.3.7, dnspython==1.12.0, ecdsa==0.13, envparse==0.2.0, jsonrpc==1.2, jsonrpclib==0.1.7, jsonschema==2.5.1, pbkdf2==1.3, pyyaml==3.12, qrcode==5.2.2, requests==2.9.1, seccure==0.3.1.3, attrs==18.1.0, pyasn1, pyasn1-modules, service_identity==16.0.0, six==1.9.0, slowaes==0.1a1, txJSON-RPC==0.5, wsgiref==0.1.2, zope.interface==4.3.3, protobuf==3.2.0, keyring==10.4.0, netifaces, txupnp==0.0.1a10, git+https://github.com/lbryio/lbryschema.git@v0.0.16#egg=lbryschema, git+https://github.com/lbryio/lbryum.git#egg=lbryum, git+https://github.com/lbryio/lbry.git#egg=lbrynet, asn1crypto, cryptography==2.2.2, pyopenssl==17.4.0, treq==17.8.0, funcsigs, mock, pbr, unqlite
+requirements = openssl, sqlite3, hostpython2, android, distro, pyjnius, certifi==2018.4.16, constantly, incremental, functools32, miniupnpc==1.9, gmpy==1.17, twisted==16.6.0, appdirs==1.4.3, argparse==1.2.1, docopt==0.6.2, base58==0.2.2, colorama==0.3.7, dnspython==1.12.0, ecdsa==0.13, envparse==0.2.0, jsonrpc==1.2, jsonrpclib==0.1.7, jsonschema==2.5.1, pbkdf2==1.3, pyyaml==3.12, qrcode==5.2.2, requests==2.9.1, seccure==0.3.1.3, attrs==18.1.0, pyasn1, pyasn1-modules, service_identity==16.0.0, six==1.9.0, slowaes==0.1a1, txJSON-RPC==0.5, wsgiref==0.1.2, zope.interface==4.3.3, protobuf==3.2.0, keyring==10.4.0, netifaces, txupnp==0.0.1a10, git+https://github.com/lbryio/lbryschema.git@v0.0.16#egg=lbryschema, git+https://github.com/lbryio/lbryum.git#egg=lbryum, git+https://github.com/lbryio/lbry.git@v0.21.2#egg=lbrynet, asn1crypto, cryptography==2.2.2, pyopenssl==17.4.0, treq==17.8.0, funcsigs, mock, pbr, unqlite
 
 # (str) Custom source folders for requirements
 # Sets custom source for any requirements with recipes
@@ -272,5 +272,3 @@ warn_on_root = 1
 #    Then, invoke the command line with the "demo" profile:
 #
 #buildozer --profile demo android debug
-
-builddir = /home/vagrant
\ No newline at end of file