LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

fixes from ui/ux review

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-08-25 17:07:50 +01:00
parent 6217c45322
commit 6e4765a743
3 changed files with 56 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/component/channelSelector/view.js
View file

@ -178,7 +178,7 @@ export default class ChannelSelector extends React.PureComponent {
render() { render() {
const channel = this.state.addingChannel ? 'new' : this.props.channel; const channel = this.state.addingChannel ? 'new' : this.props.channel;
const { fetchingChannels, channels = [] } = this.props; 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.map(ch => ch.name));
const { const {
@ -195,6 +195,7 @@ export default class ChannelSelector extends React.PureComponent {
return ( return (
<View style={channelSelectorStyle.container}> <View style={channelSelectorStyle.container}>
<Picker <Picker
enabled={enabled}
selectedValue={this.state.currentSelectedValue} selectedValue={this.state.currentSelectedValue}
style={channelSelectorStyle.channelPicker} style={channelSelectorStyle.channelPicker}
itemStyle={channelSelectorStyle.channelPickerItem} itemStyle={channelSelectorStyle.channelPickerItem}

71
src/page/publish/view.js
View file

@ -77,6 +77,7 @@ class PublishPage extends React.PureComponent {
camera = null; camera = null;
state = { state = {
canPublish: false,
canUseCamera: false, canUseCamera: false,
editMode: false, editMode: false,
titleFocused: false, titleFocused: false,
@ -109,6 +110,7 @@ class PublishPage extends React.PureComponent {
priceSet: false, priceSet: false,
// input data // input data
hasEditedContentAddress: false,
bid: 0.1, bid: 0.1,
description: null, description: null,
title: null, title: null,
@ -159,7 +161,7 @@ class PublishPage extends React.PureComponent {
}; };
onComponentFocused = () => { onComponentFocused = () => {
const { pushDrawerStack, setPlayerVisible, navigation } = this.props; const { balance, pushDrawerStack, setPlayerVisible, navigation } = this.props;
pushDrawerStack(); pushDrawerStack();
setPlayerVisible(); setPlayerVisible();
@ -168,6 +170,7 @@ class PublishPage extends React.PureComponent {
NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath })); NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
this.setState( this.setState(
{ {
canPublish: balance >= 0.1,
loadingVideos: true, loadingVideos: true,
}, },
() => { () => {
@ -216,6 +219,7 @@ class PublishPage extends React.PureComponent {
editMode: true, editMode: true,
currentPhase: Constants.PHASE_DETAILS, currentPhase: Constants.PHASE_DETAILS,
hasEditedContentAddress: true,
bid: amount, bid: amount,
channelName, channelName,
description, description,
@ -335,7 +339,11 @@ class PublishPage extends React.PureComponent {
}; };
handlePublishSuccess = data => { handlePublishSuccess = data => {
this.setState({ publishStarted: false, currentPhase: Constants.PHASE_PUBLISH }); const { navigation, notify } = this.props;
notify({
message: `Your content was successfully published to ${this.state.uri}. It will be available in a few mintues.`,
});
navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISHES, params: { publishSuccess: true } });
}; };
handlePublishFailure = error => { handlePublishFailure = error => {
@ -371,7 +379,7 @@ class PublishPage extends React.PureComponent {
this.setState( this.setState(
{ {
currentMedia: media, currentMedia: media,
title: name, title: null, // no title autogeneration (user will fill this in)
name: this.formatNameForTitle(name), name: this.formatNameForTitle(name),
currentPhase: Constants.PHASE_DETAILS, currentPhase: Constants.PHASE_DETAILS,
}, },
@ -404,6 +412,7 @@ class PublishPage extends React.PureComponent {
priceSet: false, priceSet: false,
// input data // input data
hasEditedContentAddress: false,
bid: 0.1, bid: 0.1,
description: null, description: null,
title: null, title: null,
@ -534,9 +543,13 @@ class PublishPage extends React.PureComponent {
this.setState({ price }); this.setState({ price });
}; };
handleNameChange = name => { handleNameChange = (name, userInput) => {
const { notify } = this.props; const { notify } = this.props;
this.setState({ name }); this.setState({ name });
if (userInput) {
this.setState({ hasEditedContentAddress: true });
}
if (!isNameValid(name, false)) { if (!isNameValid(name, false)) {
notify({ message: 'Your content address contains invalid characters' }); notify({ message: 'Your content address contains invalid characters' });
return; return;
@ -553,7 +566,7 @@ class PublishPage extends React.PureComponent {
}; };
handleAddTag = tag => { handleAddTag = tag => {
if (!tag) { if (!tag || !this.state.canPublish || this.state.publishStarted) {
return; return;
} }
@ -570,7 +583,7 @@ class PublishPage extends React.PureComponent {
}; };
handleRemoveTag = tag => { handleRemoveTag = tag => {
if (!tag) { if (!tag || !this.state.canPublish || this.state.publishStarted) {
return; return;
} }
@ -626,15 +639,20 @@ class PublishPage extends React.PureComponent {
}; };
handleTitleChange = title => { handleTitleChange = title => {
this.setState( this.setState({ title });
{
title, if (!this.state.editMode && !this.state.hasEditedContentAddress) {
name: this.formatNameForTitle(title), // only autogenerate url if the user has not yet edited the field
}, // also shouldn't change url in edit mode
() => { this.setState(
this.handleNameChange(this.state.name); {
} name: this.formatNameForTitle(title),
); },
() => {
this.handleNameChange(this.state.name);
}
);
}
}; };
handleDescriptionChange = description => { handleDescriptionChange = description => {
@ -774,7 +792,7 @@ class PublishPage extends React.PureComponent {
/> />
</View> </View>
)} )}
{balance < 0.1 && <PublishRewardsDriver navigation={navigation} />} {!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
{this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && ( {this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
<View style={publishStyle.thumbnailUploadContainer}> <View style={publishStyle.thumbnailUploadContainer}>
@ -789,6 +807,7 @@ class PublishPage extends React.PureComponent {
<Text style={publishStyle.textInputTitle}>Title</Text> <Text style={publishStyle.textInputTitle}>Title</Text>
)} )}
<TextInput <TextInput
editable={this.state.canPublish && !this.state.publishStarted}
placeholder={this.state.titleFocused ? '' : 'Title'} placeholder={this.state.titleFocused ? '' : 'Title'}
style={publishStyle.inputText} style={publishStyle.inputText}
value={this.state.title} value={this.state.title}
@ -806,6 +825,7 @@ class PublishPage extends React.PureComponent {
<Text style={publishStyle.textInputTitle}>Description</Text> <Text style={publishStyle.textInputTitle}>Description</Text>
)} )}
<TextInput <TextInput
editable={this.state.canPublish && !this.state.publishStarted}
placeholder={this.state.descriptionFocused ? '' : 'Description'} placeholder={this.state.descriptionFocused ? '' : 'Description'}
style={publishStyle.inputText} style={publishStyle.inputText}
value={this.state.description} value={this.state.description}
@ -837,7 +857,11 @@ class PublishPage extends React.PureComponent {
<View style={publishStyle.card}> <View style={publishStyle.card}>
<Text style={publishStyle.cardTitle}>Channel</Text> <Text style={publishStyle.cardTitle}>Channel</Text>
<ChannelSelector channelName={this.state.channelName} onChannelChange={this.handleChannelChange} /> <ChannelSelector
enabled={this.state.canPublish && !this.state.publishStarted}
channelName={this.state.channelName}
onChannelChange={this.handleChannelChange}
/>
</View> </View>
<View style={publishStyle.card}> <View style={publishStyle.card}>
@ -855,6 +879,7 @@ class PublishPage extends React.PureComponent {
{this.state.priceSet && ( {this.state.priceSet && (
<View style={[publishStyle.inputRow, publishStyle.priceInputRow]}> <View style={[publishStyle.inputRow, publishStyle.priceInputRow]}>
<TextInput <TextInput
editable={this.state.canPublish && !this.state.publishStarted}
placeholder={'0.00'} placeholder={'0.00'}
keyboardType={'number-pad'} keyboardType={'number-pad'}
style={publishStyle.priceInput} style={publishStyle.priceInput}
@ -869,7 +894,7 @@ class PublishPage extends React.PureComponent {
</View> </View>
<View style={publishStyle.card}> <View style={publishStyle.card}>
<Text style={publishStyle.cardTitle}>Content Address</Text> <Text style={publishStyle.cardTitle}>Content address</Text>
<Text style={publishStyle.helpText}> <Text style={publishStyle.helpText}>
The address where people can find your content (ex. lbry://myvideo). The address where people can find your content (ex. lbry://myvideo).
{this.state.editMode && {this.state.editMode &&
@ -877,16 +902,17 @@ class PublishPage extends React.PureComponent {
</Text> </Text>
<TextInput <TextInput
editable={!this.state.editMode && this.state.canPublish && !this.state.publishStarted}
placeholder={'lbry://'} placeholder={'lbry://'}
editable={!this.state.editMode}
style={publishStyle.inputText} style={publishStyle.inputText}
underlineColorAndroid={Colors.NextLbryGreen} underlineColorAndroid={Colors.NextLbryGreen}
numberOfLines={1} numberOfLines={1}
value={this.state.name} value={this.state.name}
onChangeText={this.handleNameChange} onChangeText={value => this.handleNameChange(value, true)}
/> />
<View style={publishStyle.inputRow}> <View style={publishStyle.inputRow}>
<TextInput <TextInput
editable={this.state.canPublish && !this.state.publishStarted}
placeholder={'0.00'} placeholder={'0.00'}
style={publishStyle.priceInput} style={publishStyle.priceInput}
underlineColorAndroid={Colors.NextLbryGreen} underlineColorAndroid={Colors.NextLbryGreen}
@ -906,6 +932,7 @@ class PublishPage extends React.PureComponent {
<View> <View>
<Text style={publishStyle.cardText}>Language</Text> <Text style={publishStyle.cardText}>Language</Text>
<Picker <Picker
enabled={this.state.canPublish && !this.state.publishStarted}
selectedValue={this.state.language} selectedValue={this.state.language}
style={publishStyle.picker} style={publishStyle.picker}
itemStyle={publishStyle.pickerItem} itemStyle={publishStyle.pickerItem}
@ -920,6 +947,7 @@ class PublishPage extends React.PureComponent {
<View> <View>
<Text style={publishStyle.cardText}>License</Text> <Text style={publishStyle.cardText}>License</Text>
<Picker <Picker
enabled={this.state.canPublish && !this.state.publishStarted}
selectedValue={this.state.license} selectedValue={this.state.license}
style={publishStyle.picker} style={publishStyle.picker}
itemStyle={publishStyle.pickerItem} itemStyle={publishStyle.pickerItem}
@ -935,6 +963,7 @@ class PublishPage extends React.PureComponent {
</Picker> </Picker>
{[LICENSES.COPYRIGHT, LICENSES.OTHER].includes(this.state.license) && ( {[LICENSES.COPYRIGHT, LICENSES.OTHER].includes(this.state.license) && (
<TextInput <TextInput
editable={this.state.canPublish && !this.state.publishStarted}
placeholder={'License description'} placeholder={'License description'}
style={publishStyle.inputText} style={publishStyle.inputText}
underlineColorAndroid={Colors.NextLbryGreen} underlineColorAndroid={Colors.NextLbryGreen}
@ -977,7 +1006,7 @@ class PublishPage extends React.PureComponent {
<View style={publishStyle.rightActionButtons}> <View style={publishStyle.rightActionButtons}>
<Button <Button
style={publishStyle.publishButton} style={publishStyle.publishButton}
disabled={balance < 0.1 || !this.state.uploadedThumbnailUri} disabled={!this.state.canPublish || !this.state.uploadedThumbnailUri}
text={this.state.editMode ? 'Save changes' : 'Publish'} text={this.state.editMode ? 'Save changes' : 'Publish'}
onPress={this.handlePublishPressed} onPress={this.handlePublishPressed}
/> />

8
src/page/publishes/view.js
View file

@ -37,10 +37,10 @@ class PublishesPage extends React.PureComponent {
const { checkPendingPublishes, fetchMyClaims, pushDrawerStack, setPlayerVisible } = this.props; const { checkPendingPublishes, fetchMyClaims, pushDrawerStack, setPlayerVisible } = this.props;
pushDrawerStack(); pushDrawerStack();
setPlayerVisible(); setPlayerVisible();
NativeModules.Firebase.setCurrentScreen('Publishes'); NativeModules.Firebase.setCurrentScreen('Publishes').then(result => {
fetchMyClaims();
fetchMyClaims(); checkPendingPublishes();
checkPendingPublishes(); });
}; };
addOrRemoveItem = (uri, claim) => { addOrRemoveItem = (uri, claim) => {