fix: merge conflict
This commit is contained in:
commit
ab4e7ee84d
21 changed files with 318 additions and 117 deletions
BIN
src/assets/gerbil-happy.png
Normal file
BIN
src/assets/gerbil-happy.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 265 KiB |
BIN
src/assets/gerbil-sad.png
Normal file
BIN
src/assets/gerbil-sad.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 278 KiB |
|
@ -29,8 +29,9 @@ import {
|
|||
import { connect } from 'react-redux';
|
||||
import { AppState, BackHandler, Linking, NativeModules, TextInput, ToastAndroid } from 'react-native';
|
||||
import { selectDrawerStack } from 'redux/selectors/drawer';
|
||||
import { SETTINGS, doDismissToast, doToast, selectToast } from 'lbry-redux';
|
||||
import { SETTINGS, doDismissToast, doPopulateSharedUserState, doToast, selectToast } from 'lbry-redux';
|
||||
import {
|
||||
Lbryio,
|
||||
doGetSync,
|
||||
doUserCheckEmailVerified,
|
||||
doUserEmailVerify,
|
||||
|
@ -305,6 +306,13 @@ class AppWithNavigationState extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
getUserSettings = () => {
|
||||
const { dispatch } = this.props;
|
||||
Lbryio.call('user_settings', 'get').then(settings => {
|
||||
dispatch(doPopulateSharedUserState(settings));
|
||||
});
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
AppState.removeEventListener('change', this._handleAppStateChange);
|
||||
BackHandler.removeEventListener('hardwareBackPress');
|
||||
|
@ -321,12 +329,8 @@ class AppWithNavigationState extends React.Component {
|
|||
NativeModules.Firebase.track('email_verified', { email: user.primary_email });
|
||||
ToastAndroid.show('Your email address was successfully verified.', ToastAndroid.LONG);
|
||||
|
||||
// upon successful email verification, do wallet sync (if password has been set)
|
||||
NativeModules.UtilityModule.getSecureValue(Constants.KEY_FIRST_RUN_PASSWORD).then(walletPassword => {
|
||||
if (walletPassword && walletPassword.trim().length > 0) {
|
||||
dispatch(doGetSync(walletPassword));
|
||||
}
|
||||
});
|
||||
// get user settings after email verification
|
||||
this.getUserSettings();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -27,7 +27,7 @@ export default class ChannelSelector extends React.PureComponent {
|
|||
|
||||
componentDidMount() {
|
||||
const { channels = [], channelName, fetchChannelListMine, fetchingChannels } = this.props;
|
||||
if (!channels.length && !fetchingChannels) {
|
||||
if ((!channels || channels.length === 0) && !fetchingChannels) {
|
||||
fetchChannelListMine();
|
||||
}
|
||||
this.setState({ currentSelectedValue: channelName });
|
||||
|
@ -37,7 +37,7 @@ export default class ChannelSelector extends React.PureComponent {
|
|||
const { channels: prevChannels = [], channelName } = this.props;
|
||||
const { channels = [] } = nextProps;
|
||||
|
||||
if (channels.length !== prevChannels.length && channelName !== this.state.currentSelectedValue) {
|
||||
if (channels && channels.length !== prevChannels.length && channelName !== this.state.currentSelectedValue) {
|
||||
this.setState({ currentSelectedValue: channelName });
|
||||
}
|
||||
}
|
||||
|
@ -182,7 +182,9 @@ export default class ChannelSelector extends React.PureComponent {
|
|||
render() {
|
||||
const channel = this.state.addingChannel ? 'new' : this.props.channel;
|
||||
const { enabled, fetchingChannels, channels = [] } = this.props;
|
||||
const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(channels.map(ch => ch.name));
|
||||
const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(
|
||||
channels ? channels.map(ch => ch.name) : []
|
||||
);
|
||||
|
||||
const {
|
||||
newChannelName,
|
||||
|
|
4
src/component/emptyStateView/index.js
Normal file
4
src/component/emptyStateView/index.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
import { connect } from 'react-redux';
|
||||
import EmptyStateView from './view';
|
||||
|
||||
export default connect()(EmptyStateView);
|
26
src/component/emptyStateView/view.js
Normal file
26
src/component/emptyStateView/view.js
Normal file
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import { NativeModules, Text, View, Image, TouchableOpacity } from 'react-native';
|
||||
import Button from '../button';
|
||||
import emptyStateStyle from 'styles/emptyState';
|
||||
|
||||
class EmptyStateView extends React.PureComponent {
|
||||
render() {
|
||||
const { message, buttonText, inner, onButtonPress } = this.props;
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[emptyStateStyle.container, inner ? emptyStateStyle.innerContainer : emptyStateStyle.outerContainer]}
|
||||
>
|
||||
<Image style={emptyStateStyle.image} resizeMode={'stretch'} source={require('../../assets/gerbil-happy.png')} />
|
||||
<Text style={emptyStateStyle.message}>{message}</Text>
|
||||
{buttonText && (
|
||||
<View style={emptyStateStyle.buttonContainer}>
|
||||
<Button style={emptyStateStyle.button} text={buttonText} onPress={onButtonPress} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EmptyStateView;
|
|
@ -59,7 +59,8 @@ class RewardCard extends React.PureComponent<Props> {
|
|||
getDisplayAmount = () => {
|
||||
const { reward } = this.props;
|
||||
if (reward) {
|
||||
if (reward.reward_range && reward.reward_range.includes('-')) {
|
||||
const claimed = !!reward.transaction_id;
|
||||
if (!claimed && reward.reward_range && reward.reward_range.includes('-')) {
|
||||
return reward.reward_range.split('-')[0] + '+'; // ex: 5+
|
||||
} else if (reward.reward_amount > 0) {
|
||||
return reward.reward_amount;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { makeSelectClaimForUri, selectMyChannelClaims } from 'lbry-redux';
|
||||
import { doAbandonClaim, doFetchChannelListMine, makeSelectClaimForUri, selectMyChannelClaims } from 'lbry-redux';
|
||||
import { doPopDrawerStack } from 'redux/actions/drawer';
|
||||
import { doSetSortByItem, doSetTimeItem } from 'redux/actions/settings';
|
||||
import { selectDrawerStack } from 'redux/selectors/drawer';
|
||||
|
@ -15,6 +15,8 @@ const select = (state, props) => ({
|
|||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
abandonClaim: (txid, nout) => dispatch(doAbandonClaim(txid, nout)),
|
||||
fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
|
||||
popDrawerStack: () => dispatch(doPopDrawerStack()),
|
||||
setSortByItem: item => dispatch(doSetSortByItem(item)),
|
||||
setTimeItem: item => dispatch(doSetTimeItem(item)),
|
||||
|
|
|
@ -19,6 +19,7 @@ import ClaimList from 'component/claimList';
|
|||
import Colors from 'styles/colors';
|
||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||
import Button from 'component/button';
|
||||
import EmptyStateView from 'component/emptyStateView';
|
||||
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||
import Link from 'component/link';
|
||||
import ModalPicker from 'component/modalPicker';
|
||||
|
@ -47,7 +48,9 @@ class ChannelPage extends React.PureComponent {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { fetchChannelListMine } = this.props;
|
||||
NativeModules.Firebase.setCurrentScreen('Channel');
|
||||
fetchChannelListMine();
|
||||
}
|
||||
|
||||
handleSortByItemSelected = item => {
|
||||
|
@ -128,9 +131,7 @@ class ChannelPage extends React.PureComponent {
|
|||
return (
|
||||
<View style={channelPageStyle.aboutTab}>
|
||||
{!websiteUrl && !email && !description && (
|
||||
<View style={channelPageStyle.busyContainer}>
|
||||
<Text style={channelPageStyle.infoText}>Nothing here yet. Please check back later.</Text>
|
||||
</View>
|
||||
<EmptyStateView message={"There's nothing here yet.\nPlease check back later."} />
|
||||
)}
|
||||
|
||||
{(websiteUrl || email || description) && (
|
||||
|
@ -266,7 +267,7 @@ class ChannelPage extends React.PureComponent {
|
|||
)}
|
||||
{ownedChannel && (
|
||||
<Button
|
||||
style={channelPageStyle.deleteButton}
|
||||
style={[channelPageStyle.actionButton, channelPageStyle.deleteButton]}
|
||||
theme={'light'}
|
||||
icon={'trash-alt'}
|
||||
text={'Delete'}
|
||||
|
|
|
@ -19,6 +19,7 @@ import Button from 'component/button';
|
|||
import ChannelIconItem from 'component/channelIconItem';
|
||||
import Colors from 'styles/colors';
|
||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||
import EmptyStateView from 'component/emptyStateView';
|
||||
import FloatingWalletBalance from 'component/floatingWalletBalance';
|
||||
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||
import Link from 'component/link';
|
||||
|
@ -175,10 +176,8 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
|
||||
if (!isEditMode && hasFormState) {
|
||||
this.loadPendingFormState();
|
||||
this.setState({ currentPhase: Constants.PHASE_CREATE });
|
||||
} else {
|
||||
this.setState({ currentPhase: Constants.PHASE_LIST });
|
||||
}
|
||||
this.setState({ currentPhase: isEditMode || hasFormState ? Constants.PHASE_CREATE : Constants.PHASE_LIST });
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -240,7 +239,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
componentDidUpdate() {
|
||||
const { channels = [] } = this.props;
|
||||
const { editChannelUrl } = this.state;
|
||||
if (channels.length > 0) {
|
||||
if (channels && channels.length > 0) {
|
||||
if (this.state.autoStyles.length !== channels.length) {
|
||||
this.setState({
|
||||
autoStyles: this.generateAutoStyles(channels.length),
|
||||
|
@ -534,10 +533,12 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
};
|
||||
|
||||
showChannelList = () => {
|
||||
const { popDrawerStack } = this.props;
|
||||
popDrawerStack();
|
||||
this.resetChannelCreator();
|
||||
const { drawerStack, popDrawerStack } = this.props;
|
||||
if (drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM) {
|
||||
popDrawerStack();
|
||||
}
|
||||
this.setState({ currentPhase: Constants.PHASE_LIST });
|
||||
this.resetChannelCreator();
|
||||
};
|
||||
|
||||
resetChannelCreator = () => {
|
||||
|
@ -606,6 +607,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
this.setState({
|
||||
claimId: channel.claim_id,
|
||||
currentPhase: Constants.PHASE_CREATE,
|
||||
displayName: value && value.title ? value.title : channel.name.substring(1),
|
||||
editMode: true,
|
||||
coverImageUrl: value && value.cover ? value.cover.url : null,
|
||||
currentChannelName: channel.name.substring(1),
|
||||
|
@ -744,6 +746,8 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
uploadingImage,
|
||||
} = this.state;
|
||||
|
||||
const hasChannels = channels && channels.length > 0;
|
||||
|
||||
return (
|
||||
<View style={channelCreatorStyle.container}>
|
||||
<UriBar
|
||||
|
@ -756,34 +760,34 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
onExitSelectionMode={this.onExitSelectionMode}
|
||||
/>
|
||||
|
||||
{fetchingChannels && (
|
||||
<View style={channelCreatorStyle.loading}>
|
||||
<ActivityIndicator size={'large'} color={Colors.NextLbryGreen} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{currentPhase === Constants.PHASE_LIST && !fetchingChannels && !hasChannels && (
|
||||
<EmptyStateView
|
||||
message={'You have not created a channel.\nStart now by creating a new channel!'}
|
||||
buttonText={'Create a channel'}
|
||||
onButtonPress={this.handleNewChannelPress}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentPhase === Constants.PHASE_LIST && (
|
||||
<FlatList
|
||||
extraData={this.state}
|
||||
ListHeaderComponent={
|
||||
fetchingChannels ? (
|
||||
<View style={channelCreatorStyle.listHeader}>
|
||||
<ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
|
||||
</View>
|
||||
) : null
|
||||
}
|
||||
ListEmptyComponent={
|
||||
fetchingChannels ? null : (
|
||||
<View style={channelCreatorStyle.listEmpty}>
|
||||
<Text style={channelCreatorStyle.listEmptyText}>
|
||||
You have not created a channel. Start now by creating a new channel!
|
||||
</Text>
|
||||
ListFooterComponent={
|
||||
!channels || channels.length === 0 ? null : (
|
||||
<View style={channelCreatorStyle.listFooter}>
|
||||
<Button
|
||||
style={channelCreatorStyle.createChannelButton}
|
||||
text={'Create a channel'}
|
||||
onPress={this.handleNewChannelPress}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
ListFooterComponent={
|
||||
<View style={channelCreatorStyle.listFooter}>
|
||||
<Button
|
||||
style={channelCreatorStyle.createChannelButton}
|
||||
text={'Create a channel'}
|
||||
onPress={this.handleNewChannelPress}
|
||||
/>
|
||||
</View>
|
||||
}
|
||||
style={channelCreatorStyle.scrollContainer}
|
||||
contentContainerStyle={channelCreatorStyle.scrollPadding}
|
||||
initialNumToRender={10}
|
||||
|
@ -825,7 +829,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
</TouchableOpacity>
|
||||
);
|
||||
}}
|
||||
data={channels.filter(channel => !abandoningClaimIds.includes(channel.claim_id))}
|
||||
data={channels ? channels.filter(channel => !abandoningClaimIds.includes(channel.claim_id)) : []}
|
||||
keyExtractor={(item, index) => item.claim_id}
|
||||
/>
|
||||
)}
|
||||
|
@ -864,7 +868,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
source={{ uri: thumbnailUrl }}
|
||||
/>
|
||||
)}
|
||||
{thumbnailUrl !== null && thumbnailUrl.trim().length === 0 && newChannelName.length > 1 && (
|
||||
{(thumbnailUrl === null || thumbnailUrl.trim().length === 0) && newChannelName.length > 1 && (
|
||||
<Text style={channelIconStyle.autothumbCharacter}>
|
||||
{newChannelName.substring(0, 1).toUpperCase()}
|
||||
</Text>
|
||||
|
|
|
@ -15,6 +15,7 @@ import { __, navigateToUri, uriFromFileInfo } from 'utils/helper';
|
|||
import Colors from 'styles/colors';
|
||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||
import PageHeader from 'component/pageHeader';
|
||||
import EmptyStateView from 'component/emptyStateView';
|
||||
import FileListItem from 'component/fileListItem';
|
||||
import FloatingWalletBalance from 'component/floatingWalletBalance';
|
||||
import StorageStatsCard from 'component/storageStatsCard';
|
||||
|
@ -154,6 +155,10 @@ class DownloadsPage extends React.PureComponent {
|
|||
onDeleteActionPressed={this.onDeleteActionPressed}
|
||||
/>
|
||||
|
||||
{!fetching && !hasDownloads && (
|
||||
<EmptyStateView message={'You do not have any\ndownloaded content on this device.'} />
|
||||
)}
|
||||
|
||||
<View style={downloadsStyle.subContainer}>
|
||||
{hasDownloads && <StorageStatsCard fileInfos={this.getFilteredFileInfos()} />}
|
||||
{fetching && (
|
||||
|
@ -161,11 +166,7 @@ class DownloadsPage extends React.PureComponent {
|
|||
<ActivityIndicator size="large" color={Colors.NextLbryGreen} style={downloadsStyle.loading} />
|
||||
</View>
|
||||
)}
|
||||
{!fetching && !hasDownloads && (
|
||||
<View style={downloadsStyle.busyContainer}>
|
||||
<Text style={downloadsStyle.noDownloadsText}>You do not have any downloaded content on this device.</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!fetching && hasDownloads && (
|
||||
<FlatList
|
||||
extraData={this.state}
|
||||
|
|
|
@ -22,6 +22,7 @@ import { navigateBack, navigateToUri } from 'utils/helper';
|
|||
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||
import ImageViewer from 'react-native-image-zoom-viewer';
|
||||
import Button from 'component/button';
|
||||
import EmptyStateView from 'component/emptyStateView';
|
||||
import Tag from 'component/tag';
|
||||
import ChannelPage from 'page/channel';
|
||||
import Colors from 'styles/colors';
|
||||
|
@ -100,7 +101,7 @@ class FilePage extends React.PureComponent {
|
|||
DeviceEventEmitter.addListener('onDownloadUpdated', this.handleDownloadUpdated);
|
||||
DeviceEventEmitter.addListener('onDownloadCompleted', this.handleDownloadCompleted);
|
||||
|
||||
const { fetchChannelListMine, fileInfo, isResolvingUri, resolveUri, navigation } = this.props;
|
||||
const { fetchMyClaims, fileInfo, isResolvingUri, resolveUri, navigation } = this.props;
|
||||
const { uri, uriVars } = navigation.state.params;
|
||||
this.setState({ uri, uriVars });
|
||||
|
||||
|
@ -108,7 +109,7 @@ class FilePage extends React.PureComponent {
|
|||
|
||||
this.fetchFileInfo(this.props);
|
||||
this.fetchCostInfo(this.props);
|
||||
fetchChannelListMine();
|
||||
fetchMyClaims();
|
||||
|
||||
if (NativeModules.Firebase) {
|
||||
NativeModules.Firebase.track('open_file_page', { uri: uri });
|
||||
|
@ -590,14 +591,15 @@ class FilePage extends React.PureComponent {
|
|||
} = this.props;
|
||||
const { uri, autoplay } = navigation.state.params;
|
||||
|
||||
const { isChannel } = parseURI(uri);
|
||||
const myChannelUris = channels ? channels.map(channel => channel.permanent_url) : [];
|
||||
const ownedClaim = myClaimUris.includes(uri) || myChannelUris.includes(uri);
|
||||
const { isChannel } = parseURI(uri);
|
||||
|
||||
let innerContent = null;
|
||||
if ((isResolvingUri && !claim) || !claim) {
|
||||
return (
|
||||
<View style={filePageStyle.container}>
|
||||
<UriBar value={uri} navigation={navigation} />
|
||||
{isResolvingUri && (
|
||||
<View style={filePageStyle.busyContainer}>
|
||||
<ActivityIndicator size="large" color={Colors.NextLbryGreen} />
|
||||
|
@ -607,16 +609,29 @@ class FilePage extends React.PureComponent {
|
|||
{claim === null && !isResolvingUri && (
|
||||
<View style={filePageStyle.container}>
|
||||
{ownedClaim && (
|
||||
<Text style={filePageStyle.emptyClaimText}>
|
||||
{isChannel
|
||||
? 'It looks like you just created this channel. It will appear in a few minutes.'
|
||||
: 'It looks you just published this content. It will appear in a few minutes.'}
|
||||
</Text>
|
||||
<EmptyStateView
|
||||
message={
|
||||
isChannel
|
||||
? 'It looks like you just created this channel. It will appear in a few minutes.'
|
||||
: 'It looks you just published this content. It will appear in a few minutes.'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{!ownedClaim && (
|
||||
<EmptyStateView
|
||||
message={"There's nothing at this location."}
|
||||
buttonText={'Publish something here'}
|
||||
onButtonPress={() =>
|
||||
navigation.navigate({
|
||||
routeName: Constants.DRAWER_ROUTE_PUBLISH,
|
||||
params: { vanityUrl: uri.trim() },
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{!ownedClaim && <Text style={filePageStyle.emptyClaimText}>There's nothing at this location.</Text>}
|
||||
</View>
|
||||
)}
|
||||
<UriBar value={uri} navigation={navigation} />
|
||||
<FloatingWalletBalance navigation={navigation} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -4,7 +4,6 @@ import {
|
|||
doResolveUri,
|
||||
doToast,
|
||||
doUpdatePublishForm,
|
||||
doUploadThumbnail,
|
||||
selectBalance,
|
||||
selectPublishFormValues,
|
||||
} from 'lbry-redux';
|
||||
|
@ -28,7 +27,6 @@ const perform = dispatch => ({
|
|||
clearPublishFormState: () => dispatch(doClearPublishFormState()),
|
||||
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
||||
updatePublishFormState: data => dispatch(doUpdatePublishFormState(data)),
|
||||
uploadThumbnail: (filePath, fsAdapter) => dispatch(doUploadThumbnail(filePath, null, fsAdapter)),
|
||||
publish: (success, fail) => dispatch(doPublish(success, fail)),
|
||||
resolveUri: uri => dispatch(doResolveUri(uri)),
|
||||
pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
|
||||
|
|
|
@ -43,7 +43,7 @@ import Tag from 'component/tag';
|
|||
import TagSearch from 'component/tagSearch';
|
||||
import UriBar from 'component/uriBar';
|
||||
import publishStyle from 'styles/publish';
|
||||
import { __, navigateToUri } from 'utils/helper';
|
||||
import { __, navigateToUri, uploadImageAsset } from 'utils/helper';
|
||||
|
||||
const languages = {
|
||||
en: 'English',
|
||||
|
@ -129,6 +129,8 @@ class PublishPage extends React.PureComponent {
|
|||
uploadedThumbnailUri: null,
|
||||
vanityUrlSet: false,
|
||||
|
||||
thumbnailImagePickerOpen: false,
|
||||
|
||||
// other
|
||||
publishStarted: false,
|
||||
};
|
||||
|
@ -218,10 +220,8 @@ class PublishPage extends React.PureComponent {
|
|||
// replace name with the specified vanity URL if there was one in the pending state
|
||||
this.setState({ name: this.state.vanityUrl });
|
||||
}
|
||||
this.setState({ currentPhase: Constants.PHASE_DETAILS });
|
||||
} else {
|
||||
this.setState({ currentPhase: Constants.PHASE_SELECTOR });
|
||||
}
|
||||
this.setState({ currentPhase: isEditMode || hasFormState ? Constants.PHASE_DETAILS : Constants.PHASE_SELECTOR });
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -256,6 +256,7 @@ class PublishPage extends React.PureComponent {
|
|||
this.setState(
|
||||
{
|
||||
editMode: true,
|
||||
publishStarted: false,
|
||||
currentPhase: Constants.PHASE_DETAILS,
|
||||
|
||||
hasEditedContentAddress: true,
|
||||
|
@ -382,10 +383,12 @@ class PublishPage extends React.PureComponent {
|
|||
};
|
||||
|
||||
handlePublishSuccess = data => {
|
||||
const { navigation, notify } = this.props;
|
||||
const { clearPublishFormState, navigation, notify } = this.props;
|
||||
notify({
|
||||
message: `Your content was successfully published to ${this.state.uri}. It will be available in a few mintues.`,
|
||||
});
|
||||
clearPublishFormState();
|
||||
this.setState({ publishStarted: false });
|
||||
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISHES, params: { publishSuccess: true } });
|
||||
};
|
||||
|
||||
|
@ -436,6 +439,7 @@ class PublishPage extends React.PureComponent {
|
|||
updatePublishFormState({ currentMedia: media, name: newName });
|
||||
this.setState(
|
||||
{
|
||||
publishStarted: false,
|
||||
currentMedia: media,
|
||||
title: null, // no title autogeneration (user will fill this in)
|
||||
name: newName,
|
||||
|
@ -453,7 +457,7 @@ class PublishPage extends React.PureComponent {
|
|||
};
|
||||
|
||||
showSelector() {
|
||||
const { updatePublishForm } = this.props;
|
||||
const { clearPublishFormState, updatePublishForm } = this.props;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
|
@ -490,9 +494,12 @@ class PublishPage extends React.PureComponent {
|
|||
selectedChannel: null,
|
||||
uploadedThumbnailUri: null,
|
||||
|
||||
thumbnailImagePickerOpen: false,
|
||||
|
||||
vanityUrlSet: false,
|
||||
},
|
||||
() => {
|
||||
clearPublishFormState();
|
||||
// reset thumbnail
|
||||
updatePublishForm({ thumbnail: null });
|
||||
}
|
||||
|
@ -526,19 +533,59 @@ class PublishPage extends React.PureComponent {
|
|||
);
|
||||
};
|
||||
|
||||
onFilePicked = evt => {
|
||||
this.setState({ documentPickerOpen: false }, () => {
|
||||
const currentMedia = {
|
||||
id: -1,
|
||||
filePath: `file://${evt.path}`,
|
||||
duration: 0,
|
||||
};
|
||||
this.setCurrentMedia(currentMedia);
|
||||
handleThumbnailUploadSuccess = ({ url }) => {
|
||||
const { updatePublishFormState } = this.props;
|
||||
|
||||
this.setState({
|
||||
uploadThumbnailStarted: false,
|
||||
currentThumbnailUri: url,
|
||||
uploadedThumbnailUri: url,
|
||||
});
|
||||
updatePublishFormState({ currentThumbnailUri: url, uploadedThumbnailUri: url });
|
||||
};
|
||||
|
||||
handleThumbnailUploadFailure = err => {
|
||||
const { notify } = this.props;
|
||||
this.setState({ uploadThumbnailStarted: false });
|
||||
notify({ message: 'The thumbnail could not be uploaded. Please try again.' });
|
||||
};
|
||||
|
||||
onFilePicked = evt => {
|
||||
const { notify } = this.props;
|
||||
if (evt.path && evt.path.length > 0) {
|
||||
const fileUrl = `file://${evt.path}`;
|
||||
|
||||
if (this.state.documentPickerOpen) {
|
||||
this.setState({ documentPickerOpen: false, thumbnailImagePickerOpen: false }, () => {
|
||||
const currentMedia = {
|
||||
id: -1,
|
||||
filePath: fileUrl,
|
||||
duration: 0,
|
||||
};
|
||||
this.setCurrentMedia(currentMedia);
|
||||
});
|
||||
} else if (this.state.thumbnailImagePickerOpen) {
|
||||
this.setState(
|
||||
{
|
||||
documentPickerOpen: false,
|
||||
thumbnailImagePickerOpen: false,
|
||||
uploadThumbnailStarted: true,
|
||||
currentThumbnailUri: fileUrl,
|
||||
},
|
||||
() => {
|
||||
// upload a new thumbnail
|
||||
uploadImageAsset(fileUrl, this.handleThumbnailUploadSuccess, this.handleThumbnailUploadFailure);
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// could not determine the file path
|
||||
notify({ message: 'The path could not be determined. Please try a different file.' });
|
||||
}
|
||||
};
|
||||
|
||||
onPickerCanceled = () => {
|
||||
this.setState({ documentPickerOpen: false });
|
||||
this.setState({ documentPickerOpen: false, thumbnailImagePickerOpen: false });
|
||||
};
|
||||
|
||||
handleCloseCameraPressed = () => {
|
||||
|
@ -573,6 +620,7 @@ class PublishPage extends React.PureComponent {
|
|||
{
|
||||
currentThumbnailUri: null,
|
||||
updatingThumbnailUri: false,
|
||||
publishStarted: false,
|
||||
currentPhase: Constants.PHASE_DETAILS,
|
||||
showCameraOverlay: false,
|
||||
videoRecordingMode: false,
|
||||
|
@ -597,6 +645,7 @@ class PublishPage extends React.PureComponent {
|
|||
{
|
||||
currentPhase: Constants.PHASE_DETAILS,
|
||||
currentThumbnailUri: null,
|
||||
publishStarted: false,
|
||||
updatingThumbnailUri: false,
|
||||
showCameraOverlay: false,
|
||||
videoRecordingMode: false,
|
||||
|
@ -701,7 +750,7 @@ class PublishPage extends React.PureComponent {
|
|||
return;
|
||||
}
|
||||
|
||||
const { notify, uploadThumbnail } = this.props;
|
||||
const { notify } = this.props;
|
||||
const { thumbnailPath } = this.state;
|
||||
|
||||
this.setState({ updatingThumbnailUri: true });
|
||||
|
@ -716,7 +765,13 @@ class PublishPage extends React.PureComponent {
|
|||
|
||||
// upload the thumbnail
|
||||
if (!this.state.uploadedThumbnailUri) {
|
||||
this.setState({ uploadThumbnailStarted: true }, () => uploadThumbnail(this.getFilePathFromUri(uri), RNFS));
|
||||
this.setState({ uploadThumbnailStarted: true }, () =>
|
||||
uploadImageAsset(
|
||||
this.getFilePathFromUri(uri),
|
||||
this.handleThumbnailUploadSuccess,
|
||||
this.handleThumbnailUploadFailure
|
||||
)
|
||||
);
|
||||
}
|
||||
} else if (mediaType === 'image' || mediaType === 'video') {
|
||||
const create =
|
||||
|
@ -727,7 +782,9 @@ class PublishPage extends React.PureComponent {
|
|||
.then(path => {
|
||||
this.setState({ currentThumbnailUri: `file://${path}`, updatingThumbnailUri: false });
|
||||
if (!this.state.uploadedThumbnailUri) {
|
||||
this.setState({ uploadThumbnailStarted: true }, () => uploadThumbnail(path, RNFS));
|
||||
this.setState({ uploadThumbnailStarted: true }, () =>
|
||||
uploadImageAsset(path, this.handleThumbnailUploadSuccess, this.handleThumbnailUploadFailure)
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
|
@ -783,7 +840,7 @@ class PublishPage extends React.PureComponent {
|
|||
: '';
|
||||
const licenseUrl = LICENSES.CC_LICENSES.reduce((value, item) => {
|
||||
if (typeof value === 'object') {
|
||||
value = '';
|
||||
value = license === value.value ? item.url : '';
|
||||
}
|
||||
if (license === item.value) {
|
||||
value = item.url;
|
||||
|
@ -801,6 +858,25 @@ class PublishPage extends React.PureComponent {
|
|||
this.setState({ otherLicenseDescription });
|
||||
};
|
||||
|
||||
handleThumbnailPressed = () => {
|
||||
const { notify } = this.props;
|
||||
if (this.state.thumbnailImagePickerOpen || this.state.uploadThumbnailStarted) {
|
||||
if (this.state.uploadThumbnailStarted) {
|
||||
notify({ message: 'A thumbnail is already being uploaded. Please wait for the upload to finish.' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
thumbnailImagePickerOpen: true,
|
||||
},
|
||||
() => {
|
||||
NativeModules.UtilityModule.openDocumentPicker('image/*');
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { balance, navigation, notify, publishFormValues } = this.props;
|
||||
const {
|
||||
|
@ -895,22 +971,24 @@ class PublishPage extends React.PureComponent {
|
|||
}
|
||||
content = (
|
||||
<ScrollView style={publishStyle.publishDetails}>
|
||||
{currentThumbnailUri && currentThumbnailUri.trim().length > 0 && (
|
||||
<View style={publishStyle.mainThumbnailContainer}>
|
||||
<FastImage
|
||||
style={publishStyle.mainThumbnail}
|
||||
resizeMode={FastImage.resizeMode.contain}
|
||||
source={{ uri: currentThumbnailUri }}
|
||||
/>
|
||||
<TouchableOpacity style={publishStyle.mainThumbnailContainer} onPress={this.handleThumbnailPressed}>
|
||||
<FastImage
|
||||
style={publishStyle.mainThumbnail}
|
||||
resizeMode={FastImage.resizeMode.contain}
|
||||
source={{ uri: currentThumbnailUri }}
|
||||
/>
|
||||
|
||||
{this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
|
||||
<View style={publishStyle.thumbnailUploadContainer}>
|
||||
<ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
|
||||
<Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={publishStyle.thumbnailEditOverlay}>
|
||||
<Icon name={'edit'} style={publishStyle.editIcon} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{this.state.uploadThumbnailStarted && (
|
||||
<View style={publishStyle.thumbnailUploadContainer}>
|
||||
<ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
|
||||
<Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
|
||||
|
||||
<View style={publishStyle.card}>
|
||||
|
@ -1107,17 +1185,17 @@ class PublishPage extends React.PureComponent {
|
|||
</View>
|
||||
|
||||
<View style={publishStyle.actionButtons}>
|
||||
{(this.state.publishStarted || publishFormValues.publishing) && (
|
||||
{this.state.publishStarted && (
|
||||
<View style={publishStyle.progress}>
|
||||
<ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!publishFormValues.publishing && !this.state.publishStarted && (
|
||||
{!this.state.publishStarted && (
|
||||
<Link style={publishStyle.cancelLink} text="Cancel" onPress={() => this.showSelector()} />
|
||||
)}
|
||||
|
||||
{!publishFormValues.publishing && !this.state.publishStarted && (
|
||||
{!this.state.publishStarted && (
|
||||
<View style={publishStyle.rightActionButtons}>
|
||||
<Button
|
||||
style={publishStyle.publishButton}
|
||||
|
|
|
@ -3,6 +3,7 @@ import { ActivityIndicator, Alert, FlatList, NativeModules, Text, TouchableOpaci
|
|||
import Button from 'component/button';
|
||||
import Colors from 'styles/colors';
|
||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||
import EmptyStateView from 'component/emptyStateView';
|
||||
import FileListItem from 'component/fileListItem';
|
||||
import FloatingWalletBalance from 'component/floatingWalletBalance';
|
||||
import UriBar from 'component/uriBar';
|
||||
|
@ -137,16 +138,11 @@ class PublishesPage extends React.PureComponent {
|
|||
)}
|
||||
|
||||
{!fetching && (!uris || uris.length === 0) && (
|
||||
<View style={publishStyle.noPublishes}>
|
||||
<Text style={publishStyle.noPublishText}>
|
||||
{__('It looks like you have not published anything to LBRY yet.')}
|
||||
</Text>
|
||||
<Button
|
||||
style={publishStyle.publishNowButton}
|
||||
text={__('Publish something new')}
|
||||
onPress={() => navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH })}
|
||||
/>
|
||||
</View>
|
||||
<EmptyStateView
|
||||
message={__('It looks like you have not\npublished any content to LBRY yet.')}
|
||||
buttonText={__('Publish something new')}
|
||||
onButtonPress={() => navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH })}
|
||||
/>
|
||||
)}
|
||||
|
||||
{uris && uris.length > 0 && (
|
||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
|||
import { ActivityIndicator, NativeModules, View, ScrollView, Text } from 'react-native';
|
||||
import Colors from 'styles/colors';
|
||||
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
||||
import EmptyStateView from 'component/emptyStateView';
|
||||
import TransactionList from 'component/transactionList';
|
||||
import UriBar from 'component/uriBar';
|
||||
import walletStyle from 'styles/wallet';
|
||||
|
@ -53,11 +54,9 @@ class TransactionHistoryPage extends React.PureComponent {
|
|||
<Text style={walletStyle.loadingText}>Loading transactions...</Text>
|
||||
</View>
|
||||
)}
|
||||
{!fetchingTransactions && transactions.length === 0 && <EmptyStateView message={'No transactions to list.'} />}
|
||||
<ScrollView style={walletStyle.transactionHistoryScroll}>
|
||||
<View style={walletStyle.historyList}>
|
||||
{!fetchingTransactions && transactions.length === 0 && (
|
||||
<Text style={walletStyle.infoText}>No transactions to list.</Text>
|
||||
)}
|
||||
{!fetchingTransactions && transactions && transactions.length > 0 && (
|
||||
<TransactionList navigation={navigation} transactions={transactions} />
|
||||
)}
|
||||
|
|
|
@ -43,7 +43,7 @@ class SyncVerifyPage extends React.PureComponent {
|
|||
navigation.goBack();
|
||||
});
|
||||
} else {
|
||||
syncApply(syncHash, syncData, this.state.password);
|
||||
syncApply(syncHash, syncData, this.state.password ? this.state.password : '');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
@ -121,7 +121,7 @@ const channelCreatorStyle = StyleSheet.create({
|
|||
height: '100%',
|
||||
},
|
||||
listFooter: {
|
||||
marginTop: 24,
|
||||
marginTop: 8,
|
||||
},
|
||||
createChannelButton: {
|
||||
backgroundColor: Colors.LbryGreen,
|
||||
|
@ -254,6 +254,15 @@ const channelCreatorStyle = StyleSheet.create({
|
|||
fontSize: 12,
|
||||
marginLeft: 4,
|
||||
},
|
||||
loading: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default channelCreatorStyle;
|
||||
|
|
|
@ -169,6 +169,9 @@ const channelPageStyle = StyleSheet.create({
|
|||
actionButton: {
|
||||
backgroundColor: Colors.White,
|
||||
},
|
||||
deleteButton: {
|
||||
marginLeft: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default channelPageStyle;
|
||||
|
|
40
src/styles/emptyState.js
Normal file
40
src/styles/emptyState.js
Normal file
|
@ -0,0 +1,40 @@
|
|||
import { StyleSheet } from 'react-native';
|
||||
import Colors from './colors';
|
||||
|
||||
const emptyStateStyle = StyleSheet.create({
|
||||
container: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingLeft: 24,
|
||||
paddingRight: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 99,
|
||||
},
|
||||
outerContainer: {
|
||||
top: 60,
|
||||
},
|
||||
innerContainer: {
|
||||
top: 0,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: Colors.LbryGreen,
|
||||
fontSize: 18,
|
||||
},
|
||||
image: {
|
||||
width: 128,
|
||||
height: 170,
|
||||
},
|
||||
message: {
|
||||
marginTop: 24,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'Inter-UI-Regular',
|
||||
fontSize: 18,
|
||||
lineHeight: 28,
|
||||
marginBottom: 24,
|
||||
},
|
||||
});
|
||||
|
||||
export default emptyStateStyle;
|
|
@ -1,6 +1,9 @@
|
|||
import { StyleSheet } from 'react-native';
|
||||
import { Dimensions, StyleSheet } from 'react-native';
|
||||
import Colors from './colors';
|
||||
|
||||
const screenDimension = Dimensions.get('window');
|
||||
const screenWidth = screenDimension.width;
|
||||
|
||||
const publishStyle = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
|
@ -434,7 +437,7 @@ const publishStyle = StyleSheet.create({
|
|||
color: Colors.DescriptionGrey,
|
||||
},
|
||||
publishesFooter: {
|
||||
marginTop: 16,
|
||||
marginTop: 2,
|
||||
marginLeft: 16,
|
||||
marginRight: 16,
|
||||
},
|
||||
|
@ -443,6 +446,21 @@ const publishStyle = StyleSheet.create({
|
|||
backgroundColor: Colors.LbryGreen,
|
||||
marginTop: 16,
|
||||
},
|
||||
thumbnailEditOverlay: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 24,
|
||||
position: 'absolute',
|
||||
padding: 8,
|
||||
left: screenWidth / 2 - 32 / 2,
|
||||
bottom: 8,
|
||||
backgroundColor: '#00000077',
|
||||
},
|
||||
editIcon: {
|
||||
color: Colors.White,
|
||||
fontFamily: 'Inter-UI-SemiBold',
|
||||
fontSize: 12,
|
||||
},
|
||||
});
|
||||
|
||||
export default publishStyle;
|
||||
|
|
Loading…
Reference in a new issue