Add play icon to the Play button for media

This commit is contained in:
Akinwale Ariwodola 2018-08-08 15:29:01 +01:00
parent 56afde24db
commit dad3b86ba7
3 changed files with 17 additions and 14 deletions

View file

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

View file

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

View file

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