diff --git a/app/src/component/walletSend/index.js b/app/src/component/walletSend/index.js
index e57233e..080f0a6 100644
--- a/app/src/component/walletSend/index.js
+++ b/app/src/component/walletSend/index.js
@@ -8,15 +8,15 @@ import {
} from 'lbry-redux';
import WalletSend from './view';
-const perform = dispatch => ({
- sendToAddress: (address, amount) => dispatch(doSendDraftTransaction(address, amount)),
- notify: (data) => dispatch(doToast(data))
-});
-
const select = state => ({
balance: selectBalance(state),
draftTransaction: selectDraftTransaction(state),
transactionError: selectDraftTransactionError(state),
});
+const perform = dispatch => ({
+ sendToAddress: (address, amount) => dispatch(doSendDraftTransaction(address, amount)),
+ notify: (data) => dispatch(doToast(data))
+});
+
export default connect(select, perform)(WalletSend);
diff --git a/app/src/page/file/index.js b/app/src/page/file/index.js
index 36256b1..888a269 100644
--- a/app/src/page/file/index.js
+++ b/app/src/page/file/index.js
@@ -3,6 +3,7 @@ import {
doFetchFileInfo,
doFetchCostInfoForUri,
doResolveUri,
+ doSendTip,
doToast,
makeSelectIsUriResolving,
makeSelectCostInfoForUri,
@@ -10,6 +11,7 @@ import {
makeSelectClaimForUri,
makeSelectContentTypeForUri,
makeSelectMetadataForUri,
+ selectBalance,
selectBlackListedOutpoints,
} from 'lbry-redux';
import { selectRewardContentClaimIds } from 'lbryinc';
@@ -19,6 +21,7 @@ import FilePage from './view';
const select = (state, props) => {
const selectProps = { uri: props.navigation.state.params.uri };
return {
+ balance: selectBalance(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
claim: makeSelectClaimForUri(selectProps.uri)(state),
isResolvingUri: makeSelectIsUriResolving(selectProps.uri)(state),
@@ -40,6 +43,7 @@ const perform = dispatch => ({
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
notify: data => dispatch(doToast(data)),
resolveUri: uri => dispatch(doResolveUri(uri)),
+ sendTip: (amount, claimId, uri, successCallback, errorCallback) => dispatch(doSendTip(amount, claimId, uri, successCallback, errorCallback)),
stopDownload: (uri, fileInfo) => dispatch(doStopDownloadingFile(uri, fileInfo)),
});
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index b6f2d92..66dd066 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -37,6 +37,8 @@ class FilePage extends React.PureComponent {
title: ''
};
+ tipAmountInput = null;
+
playerBackground = null;
startTime = null;
@@ -55,8 +57,10 @@ class FilePage extends React.PureComponent {
pageSuspended: false,
showImageViewer: false,
showWebView: false,
+ showTipView: false,
playerBgHeight: 0,
playerHeight: 0,
+ tipAmount: null,
uri: null,
stopDownloadConfirmed: false
};
@@ -310,6 +314,21 @@ class FilePage extends React.PureComponent {
this.setState({ fileViewLogged: true });
}
+ handleSendTip = () => {
+ const { claim, balance, navigation, notify, sendTip } = this.props;
+ const { uri } = navigation.state.params;
+ const { tipAmount } = this.state;
+
+ if (tipAmount > balance) {
+ notify({
+ message: 'Insufficient credits',
+ });
+ return;
+ }
+
+ sendTip(tipAmount, claim.claim_id, uri, () => { this.setState({ tipAmount: 0, showTipView: false }) });
+ }
+
render() {
const {
claim,
@@ -378,12 +397,12 @@ class FilePage extends React.PureComponent {
const mediaType = Lbry.getMediaType(contentType);
const isPlayable = mediaType === 'video' || mediaType === 'audio';
const { height, channel_name: channelName, value } = claim;
- const showActions = !this.state.fullscreenMode &&
- !this.state.showImageViewer &&
- !this.state.showWebView &&
- (completed || (fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes));
+ const showActions = !this.state.fullscreenMode && !this.state.showImageViewer && !this.state.showWebView;
+ const showFileActions = (completed || (fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes));
const channelClaimId =
value && value.publisherSignature && value.publisherSignature.certificateId;
+ const canSendTip = this.state.tipAmount > 0;
+
const playerStyle = [filePageStyle.player,
this.state.isLandscape ? filePageStyle.containedPlayerLandscape :
@@ -473,21 +492,29 @@ class FilePage extends React.PureComponent {
onPlaybackStarted={this.onPlaybackStarted}
/>}
- {fileInfo && showActions &&
+ {showActions &&
- {completed && }
- {!completed && fileInfo && !fileInfo.stopped &&
- fileInfo.written_bytes < fileInfo.total_bytes &&
- !this.state.stopDownloadConfirmed &&
-
- }
+ {}
+ {this.state.showTipView &&
+
+
+ this.tipAmountInput = ref}
+ onChangeText={value => this.setState({tipAmount: value})}
+ keyboardType={'numeric'}
+ value={this.state.tipAmount}
+ style={[filePageStyle.input, filePageStyle.tipAmountInput]} />
+ LBC
+
+ this.setState({ showTipView: false })} />
+
+
+ }
)}
{!this.state.fullscreenMode && }
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index 76a6955..5ced62e 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -142,6 +142,8 @@ const filePageStyle = StyleSheet.create({
color: '#0c604b'
},
actions: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
paddingLeft: 16,
paddingRight: 16,
paddingTop: 16,
@@ -149,6 +151,9 @@ const filePageStyle = StyleSheet.create({
marginTop: -14,
width: '100%',
},
+ fileActions: {
+ alignSelf: 'flex-end'
+ },
actionButton: {
alignSelf: 'flex-start',
backgroundColor: Colors.White,
@@ -200,10 +205,57 @@ const filePageStyle = StyleSheet.create({
zIndex: 100
},
link: {
- color: Colors.LbryGreen
+ color: Colors.Grey
},
linkTapped: {
color: "rgba(64, 184, 154, .2)"
+ },
+ tipCard: {
+ backgroundColor: Colors.White,
+ position: 'absolute',
+ top: containedMediaHeightWithControls - 16,
+ width: '100%',
+ paddingTop: 8,
+ paddingBottom: 8,
+ paddingLeft: 16,
+ paddingRight: 16
+ },
+ row: {
+ flexDirection: 'row',
+ flex: 1,
+ justifyContent: 'space-between'
+ },
+ amountRow: {
+ flexDirection: 'row',
+ flex: 0.75
+ },
+ button: {
+ backgroundColor: Colors.LbryGreen,
+ alignSelf: 'flex-end',
+ marginBottom: 6
+ },
+ cancelTipLink: {
+ alignSelf: 'flex-end',
+ marginBottom: 14
+ },
+ input: {
+ fontFamily: 'Metropolis-Regular',
+ fontSize: 14
+ },
+ tipAmountInput: {
+ alignSelf: 'flex-start',
+ width: 80,
+ fontSize: 16,
+ letterSpacing: 1
+ },
+ currency: {
+ alignSelf: 'flex-start',
+ marginTop: 17
+ },
+ text: {
+ fontFamily: 'Metropolis-Regular',
+ fontSize: 16,
+ lineHeight: 24
}
});