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

Publish UX #44

Merged
akinwale merged 3 commits from publish-ux into master 2019-09-20 11:29:37 +02:00
Conversation 0 Commits 3 Files changed 8 +192 -74
8 changed files with 192 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/page/channelCreator/index.js
View file

@ -15,7 +15,7 @@ import {
import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
import { doUpdateChannelFormState, doClearChannelFormState } from 'redux/actions/form';
import { selectDrawerStack } from 'redux/selectors/drawer';
import { selectChannelFormState } from 'redux/selectors/form';
import { selectChannelFormState, selectHasChannelFormState } from 'redux/selectors/form';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import ChannelCreator from './view';
@ -26,6 +26,7 @@ const select = state => ({
drawerStack: selectDrawerStack(state),
fetchingChannels: selectFetchingMyChannels(state),
balance: selectBalance(state),
hasFormState: selectHasChannelFormState(state),
updatingChannel: selectUpdatingChannel(state),
updateChannelError: selectUpdateChannelError(state),
});

16
src/page/channelCreator/view.js
View file

@ -35,7 +35,7 @@ export default class ChannelCreator extends React.PureComponent {
canSave: false,
claimId: null,
currentSelectedValue: Constants.ITEM_ANONYMOUS,
currentPhase: Constants.PHASE_LIST,
currentPhase: null,
displayName: null,
channelNameUserEdited: false,
newChannelTitle: '',
@ -110,8 +110,8 @@ export default class ChannelCreator extends React.PureComponent {
};
componentWillReceiveProps(nextProps) {
const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify } = this.props;
const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) {
this.onComponentFocused();
@ -148,6 +148,7 @@ export default class ChannelCreator extends React.PureComponent {
navigation,
pushDrawerStack,
setPlayerVisible,
hasFormState,
} = this.props;
NativeModules.Firebase.setCurrentScreen('Channels').then(result => {
@ -163,14 +164,20 @@ export default class ChannelCreator extends React.PureComponent {
DeviceEventEmitter.addListener('onDocumentPickerFilePicked', this.onFilePicked);
DeviceEventEmitter.addListener('onDocumentPickerCanceled', this.onPickerCanceled);
let isEditMode = false;
if (navigation.state.params) {
const { editChannelUrl, displayForm } = navigation.state.params;
if (editChannelUrl) {
isEditMode = true;
this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
} else if (displayForm) {
}
}
if (!isEditMode && hasFormState) {
this.loadPendingFormState();
this.setState({ currentPhase: Constants.PHASE_CREATE });
}
} else {
this.setState({ currentPhase: Constants.PHASE_LIST });
}
});
};
@ -519,7 +526,6 @@ export default class ChannelCreator extends React.PureComponent {
handleNewChannelPress = () => {
const { pushDrawerStack } = this.props;
pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM);
this.loadPendingFormState();
this.setState({ currentPhase: Constants.PHASE_CREATE });
};

13
src/page/publish/index.js
View file

@ -8,22 +8,31 @@ import {
selectBalance,
selectPublishFormValues,
} from 'lbry-redux';
import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
import { selectDrawerStack } from 'redux/selectors/drawer';
import { doUpdatePublishFormState, doClearPublishFormState } from 'redux/actions/form';
import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
import { selectPublishFormState, selectHasPublishFormState } from 'redux/selectors/form';
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import PublishPage from './view';
const select = state => ({
balance: selectBalance(state),
drawerStack: selectDrawerStack(state),
hasFormState: selectHasPublishFormState(state),
publishFormState: selectPublishFormState(state),
publishFormValues: selectPublishFormValues(state),
});
const perform = dispatch => ({
notify: data => dispatch(doToast(data)),
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: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)),
pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
popDrawerStack: () => dispatch(doPopDrawerStack()),
setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
});

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

@ -84,6 +84,7 @@ class PublishPage extends React.PureComponent {
titleFocused: false,
descriptionFocused: false,
loadingVideos: false,
vanityUrl: null,
// gallery videos
videos: null,
@ -102,7 +103,7 @@ class PublishPage extends React.PureComponent {
currentMedia: null,
currentThumbnailUri: null,
updatingThumbnailUri: false,
currentPhase: Constants.PHASE_SELECTOR,
currentPhase: null,
// publish
advancedMode: false,
@ -167,12 +168,18 @@ class PublishPage extends React.PureComponent {
this.setState({ allThumbnailsChecked: true });
};
loadPendingFormState = () => {
const { publishFormState } = this.props;
const advancedMode = publishFormState.license !== null;
this.setState({ ...publishFormState, advancedMode });
};
onComponentFocused = () => {
const { balance, pushDrawerStack, setPlayerVisible, navigation } = this.props;
pushDrawerStack();
const { balance, hasFormState, pushDrawerStack, setPlayerVisible, navigation } = this.props;
NativeModules.Firebase.setCurrentScreen('Publish').then(result => {
pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH, navigation.state.params ? navigation.state.params : null);
setPlayerVisible();
NativeModules.Firebase.setCurrentScreen('Publish').then(result => {
NativeModules.Gallery.canUseCamera().then(canUseCamera => this.setState({ canUseCamera }));
NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
this.setState(
@ -186,26 +193,44 @@ class PublishPage extends React.PureComponent {
);
// Check if this is an edit action
let isEditMode = false,
vanityUrlSet = false;
if (navigation.state.params) {
const { editMode, claimToEdit, vanityUrl } = navigation.state.params;
const { displayForm, editMode, claimToEdit, vanityUrl } = navigation.state.params;
if (editMode) {
this.prepareEdit(claimToEdit);
isEditMode = true;
} else if (vanityUrl) {
const { claimName } = parseURI(vanityUrl);
vanityUrlSet = true;
this.setState({
name: claimName,
hasEditedContentAddress: true,
vanityUrlSet: true,
vanityUrlSet,
vanityUrl: claimName,
});
}
}
if (!isEditMode && hasFormState) {
this.loadPendingFormState();
if (vanityUrlSet) {
// 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 });
}
});
};
prepareEdit = claim => {
let channelName;
const { pushDrawerStack } = this.props;
const { amount, name, signing_channel: signingChannel, value } = claim;
const { description, fee, languages, license, license_url: licenseUrl, tags, thumbnail, title } = value;
let channelName;
if (signingChannel) {
channelName = signingChannel.name;
}
@ -256,6 +281,7 @@ class PublishPage extends React.PureComponent {
if (channelName) {
this.handleChannelChange(channelName);
}
pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
}
);
};
@ -374,8 +400,8 @@ class PublishPage extends React.PureComponent {
}
componentWillReceiveProps(nextProps) {
const { currentRoute, publishFormValues } = nextProps;
const { currentRoute: prevRoute, notify } = this.props;
const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify, updatePublishFormState } = this.props;
const { currentRoute, drawerStack, publishFormValues } = nextProps;
if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) {
this.onComponentFocused();
@ -383,24 +409,38 @@ class PublishPage extends React.PureComponent {
if (publishFormValues) {
if (publishFormValues.thumbnail && !this.state.uploadedThumbnailUri) {
this.setState({
currentThumbnailUri: publishFormValues.thumbnail,
uploadedThumbnailUri: publishFormValues.thumbnail,
});
const { thumbnail } = publishFormValues;
updatePublishFormState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
this.setState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
}
}
if (
this.state.currentPhase === Constants.PHASE_DETAILS &&
prevDrawerStack[prevDrawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH_FORM &&
drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH
) {
// navigated back from the form
this.showSelector();
}
}
setCurrentMedia(media) {
const { pushDrawerStack, updatePublishFormState } = this.props;
const name = generateCombination(2, ' ', true);
const newName = this.state.hasEditedContentAddress ? this.state.name : this.formatNameForTitle(name);
updatePublishFormState({ currentMedia: media, name: newName });
this.setState(
{
currentMedia: media,
title: null, // no title autogeneration (user will fill this in)
name: this.state.hasEditedContentAddress ? this.state.name : this.formatNameForTitle(name),
name: newName,
currentPhase: Constants.PHASE_DETAILS,
},
() => this.handleNameChange(this.state.name)
() => {
this.handleNameChange(this.state.name);
pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM);
}
);
}
@ -416,6 +456,7 @@ class PublishPage extends React.PureComponent {
publishStarted: false,
documentPickerOpen: false,
editMode: false,
vanityUrl: null,
currentMedia: null,
currentThumbnailUri: null,
@ -505,6 +546,8 @@ class PublishPage extends React.PureComponent {
};
handleCameraActionPressed = () => {
const { pushDrawerStack } = this.props;
// check if it's video or photo mode
if (this.state.videoRecordingMode) {
if (this.state.recordingVideo) {
@ -522,14 +565,17 @@ class PublishPage extends React.PureComponent {
duration: 0,
};
this.setCurrentMedia(currentMedia);
this.setState({
this.setState(
{
currentThumbnailUri: null,
updatingThumbnailUri: false,
currentPhase: Constants.PHASE_DETAILS,
showCameraOverlay: false,
videoRecordingMode: false,
recordingVideo: false,
});
},
() => pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH_FORM)
);
});
}
} else {
@ -543,13 +589,16 @@ class PublishPage extends React.PureComponent {
duration: 0,
};
this.setCurrentMedia(currentMedia);
this.setState({
this.setState(
{
currentPhase: Constants.PHASE_DETAILS,
currentThumbnailUri: null,
updatingThumbnailUri: false,
showCameraOverlay: false,
videoRecordingMode: false,
});
},
() => pushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)
);
});
}
};
@ -575,15 +624,20 @@ class PublishPage extends React.PureComponent {
};
handleBidChange = bid => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ bid });
this.setState({ bid });
};
handlePriceChange = price => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ price });
this.setState({ price });
};
handleNameChange = (name, userInput) => {
const { notify } = this.props;
const { notify, updatePublishFormState } = this.props;
updatePublishFormState({ name });
this.setState({ name });
if (userInput) {
this.setState({ hasEditedContentAddress: true });
@ -599,8 +653,10 @@ class PublishPage extends React.PureComponent {
};
handleChannelChange = channel => {
const { updatePublishFormState } = this.props;
const { name } = this.state;
const uri = this.getNewUri(name, channel);
updatePublishFormState({ uri, channelName: channel, selectedChannel: channel });
this.setState({ uri, channelName: channel, selectedChannel: channel });
};
@ -609,12 +665,13 @@ class PublishPage extends React.PureComponent {
return;
}
const { notify } = this.props;
const { notify, updatePublishFormState } = this.props;
const { tags } = this.state;
const index = tags.indexOf(tag.toLowerCase());
if (index === -1) {
const newTags = tags.slice();
newTags.push(tag);
updatePublishFormState({ tags: newTags });
this.setState({ tags: newTags });
} else {
notify({ message: __(`You already added the "${tag}" tag.`) });
@ -626,11 +683,13 @@ class PublishPage extends React.PureComponent {
return;
}
const { updatePublishFormState } = this.props;
const newTags = this.state.tags.slice();
const index = newTags.indexOf(tag.toLowerCase());
if (index > -1) {
newTags.splice(index, 1);
updatePublishFormState({ tags: newTags });
this.setState({ tags: newTags });
}
};
@ -678,6 +737,8 @@ class PublishPage extends React.PureComponent {
};
handleTitleChange = title => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ title });
this.setState({ title });
if (!this.state.editMode && !this.state.hasEditedContentAddress) {
@ -695,26 +756,30 @@ class PublishPage extends React.PureComponent {
};
handleCurrencyValueChange = currency => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ currency });
this.setState({ currency });
};
handleDescriptionChange = description => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ description });
this.setState({ description });
};
handleLanguageValueChange = language => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ language });
this.setState({ language });
};
handleLicenseValueChange = license => {
const { updatePublishFormState } = this.props;
const otherLicenseDescription = [LICENSES.COPYRIGHT, LICENSES.OTHER].includes(license)
? this.state.otherLicenseDescription
: '';
this.setState({
otherLicenseDescription,
license,
licenseUrl: LICENSES.CC_LICENSES.reduce((value, item) => {
const licenseUrl = LICENSES.CC_LICENSES.reduce((value, item) => {
if (typeof value === 'object') {
value = '';
}
@ -722,11 +787,15 @@ class PublishPage extends React.PureComponent {
value = item.url;
}
return value;
}),
});
updatePublishFormState({ otherLicenseDescription, license, licenseUrl });
this.setState({ otherLicenseDescription, license, licenseUrl });
};
handleChangeLicenseDescription = otherLicenseDescription => {
const { updatePublishFormState } = this.props;
updatePublishFormState({ otherLicenseDescription });
this.setState({ otherLicenseDescription });
};
@ -831,9 +900,6 @@ class PublishPage extends React.PureComponent {
resizeMode={FastImage.resizeMode.contain}
source={{ uri: currentThumbnailUri }}
/>
</View>
)}
{!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
{this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
<View style={publishStyle.thumbnailUploadContainer}>
@ -841,6 +907,9 @@ class PublishPage extends React.PureComponent {
<Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
</View>
)}
</View>
)}
{!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
<View style={publishStyle.card}>
<View style={publishStyle.textInputLayout}>

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

@ -157,6 +157,15 @@ class PublishesPage extends React.PureComponent {
initialNumToRender={8}
maxToRenderPerBatch={24}
removeClippedSubviews
ListFooterComponent={
<View style={publishStyle.publishesFooter}>
<Button
style={publishStyle.publishesFooterButton}
text={__('Publish something new')}
onPress={() => navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH })}
/>
</View>
}
renderItem={({ item }) => (
<FileListItem
key={item}

10
src/redux/selectors/form.js
View file

@ -11,3 +11,13 @@ export const selectChannelFormState = createSelector(
selectState,
state => state.channelFormValues || {}
);
export const selectHasPublishFormState = createSelector(
selectPublishFormState,
values => Object.keys(values).length > 0
);
export const selectHasChannelFormState = createSelector(
selectChannelFormState,
values => Object.keys(values).length > 0
);

4
src/styles/channelCreator.js
View file

@ -129,11 +129,9 @@ const channelCreatorStyle = StyleSheet.create({
},
scrollContainer: {
marginTop: 60,
marginLeft: 16,
marginRight: 16,
},
scrollPadding: {
paddingTop: 16,
padding: 16,
},
channelListItem: {
flexDirection: 'row',

34
src/styles/publish.js
View file

@ -328,18 +328,24 @@ const publishStyle = StyleSheet.create({
marginLeft: 4,
},
thumbnailUploadContainer: {
marginTop: 16,
marginLeft: 16,
marginRight: 16,
paddingLeft: 2,
paddingRight: 2,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 16,
flexDirection: 'row',
position: 'absolute',
top: 8,
right: 8,
backgroundColor: '#00000077',
paddingLeft: 8,
paddingRight: 8,
paddingTop: 4,
paddingBottom: 4,
justifyContent: 'center',
},
thumbnailUploadText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 14,
marginLeft: 8,
color: Colors.White,
fontFamily: 'Inter-UI-SemiBold',
fontSize: 12,
marginLeft: 4,
},
toggleField: {
flexDirection: 'row',
@ -427,6 +433,16 @@ const publishStyle = StyleSheet.create({
fontSize: 14,
color: Colors.DescriptionGrey,
},
publishesFooter: {
marginTop: 16,
marginLeft: 16,
marginRight: 16,
},
publishesFooterButton: {
alignSelf: 'flex-start',
backgroundColor: Colors.LbryGreen,
marginTop: 16,
},
});
export default publishStyle;