Merge pull request #220 from lbryio/play-icon

Add play icon to the Play button for media

app/src/component/fileDownloadButton/view.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NativeModules, Text, View, TouchableOpacity } from 'react-native';
+import Button from '../button';
 import fileDownloadButtonStyle from '../../styles/fileDownloadButton';
 
 class FileDownloadButton extends React.PureComponent {
@@ -64,7 +65,9 @@ class FileDownloadButton extends React.PureComponent {
         );
       }
       return (
-        <TouchableOpacity style={[style, fileDownloadButtonStyle.container]} onPress={() => {
+        <Button icon={isPlayable ? 'play' : null}
+                text={isPlayable ? 'Play' : 'Download'}
+                style={[style, fileDownloadButtonStyle.container]} onPress={() => {
           if (NativeModules.Mixpanel) {
             NativeModules.Mixpanel.track('Purchase Uri', { Uri: uri });
           }
@@ -72,9 +75,7 @@ class FileDownloadButton extends React.PureComponent {
           if (isPlayable && onPlay) {
             this.props.onPlay();
           }
-          }}>
+        }} />
-          <Text style={fileDownloadButtonStyle.text}>{isPlayable ? 'Play' : 'Download'}</Text>
-        </TouchableOpacity>
       );
     } else if (fileInfo && fileInfo.download_path) {
       return (

app/src/styles/button.js

@@ -5,13 +5,14 @@ const buttonStyle = StyleSheet.create({
     borderRadius: 24,
     padding: 8,
     paddingLeft: 12,
-    paddingRight: 12
+    paddingRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   disabled: {
     backgroundColor: '#999999'
   },
   row: {
-    alignSelf: 'flex-start',
     flexDirection: 'row',
   },
   icon: {

app/src/styles/wallet.js

@@ -20,7 +20,8 @@ const walletStyle = StyleSheet.create({
     width: '85%'
   },
   button: {
-    backgroundColor: Colors.LbryGreen
+    backgroundColor: Colors.LbryGreen,
+    alignSelf: 'flex-start'
   },
   historyList: {
     backgroundColor: '#ffffff'